TI-Nspire Lua Editor: Slider Script

Home ← TI-Nspire Authoring ← Lua Scripting HQ ← Lua and JavaScript ← Scripting Tutorial - Lesson 29: Slider Script

Lua and JavaScript

Scripting Tutorial - Lesson 29: Slider Script

Play with the script in the text box below, and then click the "run your code" button above.

platform.apilevel = '1.0'     
-- Lua Objects Slider Sampler
-- Steve Arnold January 2015
-- steve.arnold@ti.com

-- Section 1 (Lines 30 - ): Initial values, resize and paint

-- Section 2 (Lines 135 - ): Actions

-- Section 3 (Lines 175 - ): Define classes for:

-- 175. Sliders
        -- 495. Rectangle
       
-- Section 4 (Lines 700 - ): Mouse Controls

-- Section 5: 755. KeyBoard Controls

------------------------------------------------

-- Initial Values and Layout

local screen = platform.window
    local w = screen:width() or 318
    local h = screen:height() or 212
    local width
    local height
    local var1 = 2
    
    color = {
    		navy = {50,50,211},
    		blue = {0, 0, 255},
    		dodgerblue = {30,144,255},
    		green = {0, 255, 0},
    		brown = {165,42,42},
    		orange = {255,165,0},
    		yellow = {255,255,0},
    		red = {255, 0, 0},
    		magenta = {255,0,255},
    		white = {255, 255, 255},
            lightgray = {211,211,211},
            gray = {128,128,128},
    		black = {0, 0, 0},
    	}
    	
    	Colors = {
        		{50,50,211},
        		{0, 0, 255},
        		{30,144,255},
        		{0, 255, 0},
        		{165,42,42},
        		{255,165,0},
        		{255,255,0},
        		{255, 0, 0},
        		{255,0,255},
        		{255, 255, 255},
                {211,211,211},
                {128,128,128},
        		{0, 0, 0},
        	}
   
   local myColor = unpack(Colors[var1])
    
function on.construction()
    w = screen:width() or 318
    h = screen:height() or 212
    
    on.resize()
    screen:invalidate()
end
   
 function on.resize()

w = 800
    h = 600
    
        if not w or w <= 0 then w = 318 end
        if not h or h <=0 then h = 212 end
        
-- Define the sliders

mySlider = Slider(0.1*w, 0.8*h, 0.8*w, var1, sliderActions,
                     1, #Colors, 1, "color", 1, Colors[var1], true)

-- sx, sy, length, value, action, 
                -- from, to, units, label, orient, mycolor, visible

screen:invalidate()

end

function on.paint(gc)
   
    screen = platform.window
    w = 800
    h = 600

-- Paint the background
    gc:setColorRGB(240, 240, 240)
    gc:fillRect(0, 0, w, h)

-- Paint the sliders
    mySlider:paint(gc)

-- Text
    gc:setColorRGB(unpack(Colors[var1]))

fontSize = math.floor(w/30 + 0.5)
    fontSize = math.floor(fontSize)
    fontSize = fontSize > 6 and fontSize or 7

gc:setFont("serif", "i", fontSize)
    local str = "Try the slider..."
    local sw = gc:getStringWidth(str)
    gc:drawString(str, 0.025*w, 0.05*h, "middle")

end

------------------------------------------------

-- Actions

function sliderActions(self)
   
         var1 = self.value or 1
         colorNum = ((var1 + 17) % #Colors)
         self.color = Colors[colorNum]
         if colorNum < 1 or colorNum > #Colors then colorNum = 12 end
         
         screen:invalidate()
 end
 
 function on.arrowKey(key)
 
     if key == "right" or key == "up" then
         if mySlider.value < mySlider.to then
             mySlider.value = mySlider.value + 1
             sliderActions(mySlider)
             on.resize()
         end
     elseif key == "left" or key == "down" then
     
         if mySlider.value > mySlider.from then
             mySlider.value = mySlider.value - 1
             sliderActions(mySlider)
             on.resize()
         end    
     end
 
     screen:invalidate()
 
 end

--------------------------------------------------------------------------- 
-- Sliders

Slider = class()

function Slider:init(sx, sy, length, value, action, from, to, units, label, orient, mycolor, visible)

self.sx = sx
    self.sy = sy
    self.radius = 0.065*h
    self.width = self.radius/6
    self.height = height
    self.from = from
    self.to = to
    self.units = units
    self.label = label
    self.action = action
    self.color = mycolor
    self.selected = false
    self.value = value
    self.range = self.to - self.from
    self.length = length
    self.visible = visible

self.orient = orient -- Vertical default
    
    self.textorient = 1        
    
    if self.orient == 0 and sx < 0.1*w then
        self.textorient = -1
     end

if self.orient == 1 and h - sy < 0.1*h then
        self.textorient = -1
    end

if self.orient == 1 then
        self.ex = self.sx + self.length    
        self.target = Rectangle(sx - 2*self.width, sy - 2*self.width, self.ex - sx + 4*self.width, 5*self.width, "", self, false, false)
        self.ey = sy
          
        self.x = sx + self.length*(self.value - self.from)/(self.range)
        self.y = sy
        
    else
        self.ey = self.sy + self.length    
        self.target = Rectangle(sx - 2*self.width, sy, 5*self.width, self.length, "", self, false, false)
        self.ex = sx
          
        self.y = sy + self.length*(self.value - self.from)/(self.range)
        self.x = sx
    end
    
end

function Slider:contains(x, y)

local r = self.radius
    local d = math.sqrt((self.x - x)^2 + (self.y - y)^2)
    return d <= r
    
end

function Slider:paint(gc)
     
     if self.visible then
     
            local sx = self.sx
            local sy = self.sy
            local x = self.x
            local y = self.y
            local ex = self.ex
            local ey = self.ey
            local width = self.width
            local height = self.height
            local radius = self.radius
            local orient = self.orient
            local text = self.textorient
            local mycolor = self.color
            local space = 0.01*w
            local range = self.to - self.from
        
            self.target:paint(gc) 
        
        
            if orient == 0 then  -- Vertical slider
        
        -- Slider label
        
                gc:setColorRGB(color.gray)
                local  fontSize = math.floor(w/60+0.5)
                local fontSize = fontSize > 6 and fontSize or 7
                gc:setFont("sansserif", "b", fontSize)
                local sw = gc:getStringWidth(self.label.."="..self.value)
                
                if text == 1 then
                    gc:drawString(self.label.."="..self.value, sx - 1.3*sw, sy + self.length/2, "middle")
                else
                    gc:drawString(self.label.."="..self.value, sx + 0.275*sw, sy + self.length/2, "middle")
                end
                
                gc:setColorRGB(color.gray)
        
        -- Slider tick marks
        
                for k = self.from, self.to, 1 do
                    local  fontSize = math.floor(w/100+0.5)
                    local fontSize = fontSize > 6 and fontSize or 7
                    gc:setFont("sansserif", "r", fontSize)
                    local sw = gc:getStringWidth(k)
                    if text == 1 then
                        gc:drawString("-", sx - width*2.25, sy - (k - self.from)*(sy - ey)/range, "middle")
                    else
                        gc:drawString("-", sx + width*0.75, sy - (k - self.from)*(sy - ey)/range, "middle")
                
                    end
                end
        
        -- Draw the slider track
        
                    gc:setPen("thin", "smooth")
                    gc:setColorRGB(250, 250, 250)    
                    gc:fillPolygon({sx - width/2, sy, sx - width/2, ey,
                            sx + width/2, ey, sx + width/2, sy,
                            sx - width/2, sy
                            })
                    gc:fillArc(sx - width/2, ey - width/2, width, width, 180, 180)
                            
                    gc:setColorRGB(self.color)
                    gc:fillPolygon({sx - width/2, sy, sx - width/2, y,
                            sx + width/2, y, sx + width/2, sy,
                            sx - width/2, sy
                            })
                    gc:fillArc(sx - width/2, sy - width/2, width, width, 0, 180)
                            
                    gc:setColorRGB((color.gray))
                    gc:drawLine(sx - width/2, sy, sx - width/2, ey)
                    gc:drawLine(sx + width*0.5, sy, sx + width*0.5, ey)
                    gc:drawArc(sx - width/2, sy - width/2, width, width, 0, 180)
                    gc:drawArc(sx - width/2, ey - width/2, width, width, 180, 180)
        
         -- Draw the slider circle
        
                
                if self.selected then
                      gc:setPen("medium", "smooth")
                end
        
                gc:setColorRGB(color.white)    
                gc:fillArc(x  - radius/2, y - width, radius, radius, 0, 360)
                gc:setColorRGB(80, 80, 80)    
                gc:drawArc(x  - radius/2, y - width, radius, radius, 0, 360)
            
             return self.y
        
            else -- Horizontal slider
        
                
                gc:setColorRGB(unpack(color.gray))
                   
        -- Slider label

gc:setColorRGB(unpack(self.color))

local  fontSize = math.floor(w/36 + 0.5)
                local fontSize = fontSize > 6 and fontSize or 7
                gc:setFont("sansserif", "r", fontSize)
                local str = self.label.." = "..self.value
                local sw = gc:getStringWidth(str)
                local sh = gc:getStringHeight(str)
                
                if text == 1 then	    
                    gc:drawString(str, (sx + ex)/2 - sw/2, y + sh, "middle")
                else
                    gc:drawString(str, (sx + ex)/2 - sw/2, y - sh, "middle")	    
                end
        
        -- Slider tick marks
        
                for k = self.from, self.to do
                    local  fontSize = math.floor(w/100)
                    local fontSize = fontSize > 6 and fontSize or 7
                    gc:setFont("sansserif", "r", fontSize)
                    local sw = gc:getStringWidth("|")
                    
                    if text == 1 then
                        gc:drawString("|", sx + (k - self.from)*(ex - sx)/range - sw/2, sy + width*1.5, "middle")
                    else
                        gc:drawString("|", sx + (k - self.from)*(ex - sx)/range - sw/2, sy - width*1.5, "middle")
                
                    end
                end
                
        -- Draw the slider track
        
                    gc:setPen("thin", "smooth")
                    gc:setColorRGB(250, 250, 250)    
                    gc:fillPolygon({sx, sy - width/2, ex, ey - width/2,
                            ex, ey + width/2, sx, sy + width/2,
                            sx, sy - width/2
                            })
                    gc:fillArc(ex - width/2, ey - width/2, width, width*1, -90, 180)
                            
                    gc:setColorRGB(unpack(self.color))
                    gc:fillPolygon({sx, sy - width/2, x, sy - width/2,
                            x, sy + width/2, sx, sy + width/2,
                            sx, sy - width/2
                            })
                    gc:fillArc(sx - width*0.5, sy - width/2, width, width, 90, 180)
                            
                    gc:setColorRGB(unpack(color.gray))
                    gc:drawLine(sx, sy - width/2, ex, ey - width/2)
                    gc:drawLine(sx, sy + width*0.5, ex, ey + width*0.5)
                    gc:drawArc(sx - width/2, sy - width/2, width, width*1, 90, 180)
                    gc:drawArc(ex - width/2, ey - width/2, width, width*1, -90, 180)
         
        
        -- Draw the slider circle
                
                if self.selected then
                      gc:setPen("medium", "smooth")
                end
                
                gc:setColorRGB(unpack(color.white))    
                gc:fillArc(x - radius/2, y  - radius/2, radius, radius, 0, 360)
                gc:setColorRGB(unpack(color.black))    
                gc:drawArc(x  - radius/2, y  - radius/2, radius, radius, 0, 360)
        
                return self.x
            
            end    
    end

end

function Slider:mouseDown(x, y)

if self:contains(x, y) then
	    self.selected = true
	end

screen:invalidate()

end

function Slider:mouseUp(x,y)

-- Control the sliders
    
	if self.selected then
        self.selected = false

if self == mySlider then
           
          if self.target:contains(x,y) then
          
               if self.orient == 0 then
                     self.y = y
                     self.x = self.sx
                     self.value = self.value > 0 and self.value or self.from
                     self.value = self.value <= self.to and self.value or self.to
                     
                     sliderActions(self)
                     on.resize()
               else
               
                     self.x = x
                     self.y = self.sy
                     self.value = self.value > 0 and self.value or self.from
                     self.value = self.value <= self.to and self.value or self.to
                     
                     sliderActions(self)
                     on.resize()
               end
           end
           end

end

screen:invalidate()
end

function Slider:mouseMove(x,y)

-- Drag the sliders
    if self == mySlider then
    
	  if self.target:contains(x,y) then
        if self.orient == 0 then
	      self.y = y
	      self.x = self.sx
	      self.value = math.floor(self.from + self.range*(self.y - self.sy)/(self.length))
	      self.value = self.value > 0 and self.value or self.from
	      self.value = self.value <= self.to and self.value or self.to
	      
	      sliderActions(self)
        
        else
	      self.x = x
	      self.y = self.sy
	      self.value = math.floor(self.from + self.range*(self.x - self.sx)/(self.length))
	      self.value = self.value > 0 and self.value or self.from
	      self.value = self.value <= self.to and self.value or self.to	
	            
	      sliderActions(self)
       
        end
      end
    end
    
    screen:invalidate()
end

--------------------------------------------------------------------------- 
-- Rectangle Class

Rectangle = class(Slider)

function Rectangle:init(x, y, width, height, label, host, selected, visible)

self.x	 = x
    self.y	 = y
    self.width	= width or 20
    self.height	= height or 20
    self.color = color.white
    self.selected = false
    self.label = label
    self.host = host
    self.textcolor = color.black
    self.visible = visible
    self.selected = selected

end

function Rectangle:contains(x, y)

local sw = self.width
    local sh = self.height
        
            return x >= self.x and x <= self.x + sw and
            y >= self.y - 0.05*h and y <= self.y + sh + 0.1*h

end

function Rectangle:paint(gc)
    
    if self.visible then
        gc:setPen("thin","smooth")
        gc:setColorRGB((self.color))
        gc:fillRect(self.x, self.y, self.width, self.height)
        gc:setColorRGB(150, 150, 150)
        gc:drawRect(self.x, self.y, self.width, self.height)
    
    gc:setColorRGB(self.textcolor)

if not fontSize then fontSize = math.floor(w/60+0.5) end
    fontSize = math.floor(h/43+0.5)
    fontSize = fontSize > 6 and fontSize or 7
    gc:setFont("sansserif", "r", fontSize)
    
    local str = tostring(self.label)
    local strList = {}
    local templist = {}
    local newList = {}
    local temp = ""
    local sw = gc:getStringWidth(str)
    
    str = str:gsub("not"..string.char(10), "not ")

if sw > 0.975*self.width then
       if str:find(" ") then
            str = str:gsub("  ", " ")
            tempList = str:split(" ")
        else
            str = str:gsub("  ", " ")
            tempList = {str}
        end
            
        if #tempList > 1 then
            for p = 1, #tempList do
            local temp1
            temp1 = temp.." "..tempList[p]
            sw = gc:getStringWidth(temp1)
                
                if sw < 0.975*self.width then
                    temp = temp.." "..tempList[p]
                    if p == #tempList then
                        table.insert(newList, temp)

end
                else
                    table.insert(newList, temp)
                    temp = tempList[p]
                end
            end
          
              if not newList[#newList]:find(tempList[#tempList]) then
                  table.insert(newList, tempList[#tempList])
              end

str = ""
            for m = 1, #newList do
                str = str..string.char(10)..newList[m]
            end
         end
    end
    
    
    if str:find(string.char(10)) then
        str = str:gsub(string.char(10)..string.char(10), string.char(10))
        strList = str:split(string.char(10))
    else
        strList = {str}
    end
    
    if strList[1] == "" then table.remove(strList, 1) end
    
        for p = 1, #strList do
        
        if strList[p] then
            str = strList[p]
            local sw = gc:getStringWidth(str)
            local sh = 0.05*h or gc:getStringHeight(str)
            if strList[p] and sh*(p) <= self.height then
                gc:drawString(strList[p], self.x + 0.01*w, self.y + sh*(p), "bottom")
            end
        end
        end
        
    if self.selected then
        gc:setColorRGB(240, 240, 250)
        gc:fillRect(self.x, self.y, self.width, self.height)
        gc:setColorRGB(self.textcolor)    
        gc:setColorRGB(color.red)

local str = self.label
        local sw = gc:getStringWidth(str)
        local sh = gc:getStringHeight(str)
        gc:drawString(str, self.x + 0.01*w, self.y + sh, "middle")

gc:setPen("medium","smooth")
        gc:setColorRGB(0, 0, 0)
        gc:drawRect(self.x, self.y, self.width, self.height)
    end
    end
end

function Rectangle:mouseDown(x, y)

if self:contains(x, y) then 	    
            self.selected = true           
        end
end

function Rectangle:mouseUp(x, y)
 
	    if self:contains(x, y) then

if self.host.orient == 0 then
	    
	    	    if mySlider.y < y then 
                    if self.host.value < self.host.to then
                        self.host.value = mySlider.value + 1
                        self.host.color = self.host.value
                        sliderActions(self.host)
                    end
	         else 
                     if self.host.value > self.host.from then
                        self.host.value = self.host.value - 1
                        self.host.color = self.host.value
                        sliderActions(self.host)
                    end
	          end

else
        
        	if self.host.x < x then
       	
                if self.host.value < self.host.to then
   	                  self.host.value = self.host.value + 1
     	              self.host.color = self.host.value
                      sliderActions(self.host)
            	 end
	         else 
                  if self.host.value > self.host.from then                  
       	              self.host.value = self.host.value - 1
      	              self.host.color = self.host.value
                      sliderActions(self.host)
	              end        
	          end 
         end 
              on.resize()
         end
         
    screen:invalidate()
end

function Rectangle:mouseMove(x, y)

if self.selected then
	    
            self.x = x
            self.y = y
        end
        screen:invalidate()
end

---------------------------------------------------------------------------

-- SECTION 3: Mouse controls

function on.mouseDown(x,y)

w = screen:width()
    h = screen:height()

if mySlider:contains(x, y) then
	    mySlider:mouseDown(x, y)
	end

if mySlider.target:contains(x, y) then
	    mySlider.target:mouseDown(x, y)
	end

screen:invalidate()

end

function on.mouseUp(x,y)

-- Control the sliders

if mySlider.selected then
        mySlider:mouseUp(x, y)
	end

if mySlider.target.selected then
        mySlider.target:mouseUp(x, y)
        mySlider.target.selected = false
	end

screen:invalidate()
end

function on.mouseMove(x,y)

-- Drag the sliders

if mySlider.selected == true  then	
        mySlider:mouseMove(x, y)
	end

screen:invalidate()
end

---------------------------------------------------------------------------
-- KeyBoard controls

function on.escapeKey()
    var1 = 2
    on.resize()
    screen:invalidate()
end

-------------------------------------------------------------------------------------

Click "run your code!" to get started.

You can copy and paste the script (or type your own) into the lower text box and then click "run your code!" After that, explore and experiment!

Home ← TI-Nspire Authoring ← Lua Scripting HQ ← Lua and JavaScript ← Scripting Tutorial - Lesson 29: Slider Script