TI-Nspire Lua Editor: dropDown Script

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

Lua and JavaScript

Scripting Tutorial - Lesson 29: dropDown Script

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

platform.apilevel = '1'

-- Lua DropDown menu Sampler
-- Steve Arnold January 2015
-- steve.arnold@ti.com

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

-- Section 2: 160. Actions

-- Section 3: 195. Menus

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

-- Section 4 (Lines 230 - ): Define classes for:

-- 230. Buttons
        -- 425.DropDown menus
        -- 630. Rectangles
       
-- Section 5 (Lines 695 - ): Mouse  and Keyboard Controls:

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

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

local screen = platform.window
    local w = 800 or 318
    local h = 600 or 212
    local width
    local height
    local selectedItem = 2

local image_switch = nil

-- Define the DropDown menu
    local  dropList = {'navy',
                    'blue',
                    'dodgerblue',
                    'green',
                    'brown',
                    'orange',
                    'yellow',
                    'red',
                    'magenta',
                    'white',
                    'lightgray',
                    'gray',
                    'black'}

local dropX
    local dropY 
    local dropWidth
    local dropHeight
    local keyPlace = 0
    
    local guide = {"Try the drop down menu", 
                    }
        
                    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 = color.blue

function on.construction()
    w = 800 or 318
    h = 600 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

dropX = 0.2*w
    dropY = 0.05*h
    dropWidth = 0.6*w
    dropHeight = 0.125*h
    keyPlace = 0
    
    dropDownMenu = dropDown(dropX, dropY, 
                   dropWidth, dropHeight, 
                   bluebutton, myColor, "Colors...", dropList, dropDownAction, false)

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)
        
            dropDownMenu:paint(gc)
                        
            fontSize = math.floor(h/30 + 0.5)
            fontSize = fontSize > 6 and fontSize or 7
            gc:setFont("serif", "i", fontSize)
            gc:setColorRGB(unpack(myColor))
            
                for m = 1, #guide do
                    local str = guide[m]
                    local sw = gc:getStringWidth(str)
                    gc:drawString(str, 0.8*w - sw, m*h/11 + 0.85*h)
                end
       
 end
 
 
 
 ------------------------------------------------
 
 function dropDownAction(selectedItem)
 
    if selectedItem and selectedItem > 0 then
        myColor = Colors[selectedItem]
        dropDownMenu.color = myColor
    end
    screen:invalidate()
    
 end
 
  function on.escapeKey()
 
     if dropDownMenu.selected then
         dropDownMenu.selected = false
     else
 
         myColor = color.blue
         on.resize()
         
     end
     
     screen:invalidate()
 end

function selectColor(item)
 
        dropDownAction(item)  
        screen:invalidate()
        
 end
 
 
 ------------------------------------------------
 
-- You should generally not need to change anything below this point...
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------

-- The Button

Button = class()

function Button:init(x, y, width, height, image, mycolor, label, curve, actions, selected, isVisible, draggable)
    self.x = x
    self.y = y
    self.width = width
    self.height= height
    self.color = mycolor
    self.label = label
    self.image = image
    self.curve = curve
    self.actions = actions
    self.isVisible = isVisible
    self.isDraggable = draggable
    self.selected = false
end

function Button:contains(x, y)

local sw = self.width or self.height
    local sh = self.height or self.width
    return x >= self.x and x <= self.x + sw and
       y >= self.y and y <= self.y + sh
end

function Button:paint(gc)

w = 800
    h = 600

if self.isVisible == true then
        
        local x = self.x
        local y = self.y
        local width = self.width
        local height = self.height
        local label = self.label
        local im1 = self.image
        local mycolor = self.color
        local curve = self.curve
        local vertices = {(x + curve), (y),
                          (x + width - curve), (y),
                          (x + width), (y + curve),
                          (x + width), (y + height - curve),
                          (x + width - curve), (y + height),
                          (x + curve), (y + height),
                          (x), (y + height - curve),
                          (x), (y + curve),
                          (x + curve), (y),}
    
        
        mycolor = myColor
    
    -- Define image or graphic
   
    if image_switch and im1 and im1 ~= ''  then
    
        im1 = im1:copy(width, height)

if mycolor == color.blue or mycolor == color.dodgerblue or mycolor == color.navy then
       
           im1 = bluebutton:copy(width, height)
           
       elseif mycolor == color.green or mycolor == color.brown or mycolor == color.orange or mycolor == color.yellow then
       
           im1 = greenbutton:copy(width, height)
           
       elseif mycolor == color.gray or mycolor == color.lightgray then
        
            im1 = graybutton:copy(width, height)
       
       else
       
           im1 = blackbutton:copy(width, height)      
      end
    
          local imw = im1:width(im1)
          local imh = im1:height(im1)
          gc:drawImage(im1, x, y)

else
                if self.selected then
                    gc:setPen('medium', 'smooth')
                else
                    gc:setPen('thin', 'smooth')
                end
                
            gc:setColorRGB(unpack(myColor))

gc:fillPolygon(vertices)                 
                              
            gc:fillArc((x), (y), (2*curve), (2*curve), 90, 90)
            gc:fillArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
            gc:fillArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
            gc:fillArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
            gc:drawArc((x), (y), (2*curve), (2*curve), 90, 90)
            gc:drawArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
            gc:drawArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
            gc:drawArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
            
            gc:drawPolyLine(vertices)
            
            gc:drawArc((x), (y), (2*curve), (2*curve), 90, 90)
            gc:drawArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
            gc:drawArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
            gc:drawArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
    
            gc:setColorRGB(unpack(color.black))
            gc:drawArc((x), (y), (2*curve), (2*curve), 90, 90)
            gc:drawArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
            gc:drawArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
            gc:drawArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
            
            gc:drawArc((x), (y), (2*curve), (2*curve), 90, 90)
            gc:drawArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
            gc:drawArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
            gc:drawArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
            gc:drawLine((x + curve), (y), (x + width - curve), (y))
            gc:drawLine((x + width), (y + curve), (x + width), (y - curve + height))
            gc:drawLine((x + width - curve), (y + math.floor(height)), (x + curve), (y + math.floor(height)))
            gc:drawLine((x), (y + height - curve), (x), (y + curve))
    
        end
        
    -- Label
    
        local fontSize = math.floor(height/3.5)
        local fontSize = fontSize
        local fontSize = fontSize >= 7 and fontSize or 7
        local fontSize = fontSize <= 24 and fontSize or 24
        gc:setFont('sansserif','b',fontSize)
        
        if self.selected then    
            gc:setColorRGB(unpack(color.red))        
        else
            gc:setColorRGB(unpack(color.white))
        end
        
        local sw = gc:getStringWidth(label)
        local sh = gc:getStringHeight(label)
        gc:drawString(label, (x + width/2 - sw/2), (y + height*0.4), 'middle')
    end
end

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

function Button:mouseDown(x,y)

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

end

function Button:mouseUp(x,y)

if self.selected then
        if self.actions() then self.actions() end
        self.selected = false
	end

end

function Button:mouseMove(x,y)

w = 800
    h = 600
    
    if self.selected and self.isDraggable then
        if x <=0 then
            self.x = 0
        elseif x >= w - self.width/2 then
            self.x = w - self.width/2
        elseif y <= 0 then
            self.y = 0
        elseif y >= h + self.height then
            self.y = h - self.height
        else            
            self.x = x - self.width/2
            self.y = y - self.height/2
        end
    end
    
end

-------------------------
-- The DropDown menu

dropDown = class()

function dropDown:init(x, y, width, height, image, mycolor, label, contents, action, selected)
    self.x = x
    self.y = y
    self.width = width
    self.height= height
    self.color = mycolor
    self.image = image
    self.label = label
    self.contents = contents
    self.action = action
    self.selected = false
    self.Objects = {}
    
    for k = 1, #self.contents do
     self.Objects[k] = Rectangle(1.1*x, y + height + (k - 1)*h/(#self.contents + 4), 0.775*width, h/(#self.contents + 4), self.contents[k], color.white, self.color, true,  false)
    end

end

function dropDown:contains(x, y)

local sw = self.width
    local sh = self.height
    return x >= self.x and x <= self.x + sw and
        y >= self.y and y <= self.y + sh
end

function dropDown:paint(gc)

local x = self.x
    local y = self.y
    local width = self.width
    local height = self.height
    local label = self.label
    local contents = self.contents
    local im = self.image
    local curve = 0.25*height

-- Define image or graphic

if image_switch == 'on' and im1 and im1 ~= '' and self.label ~= '?' and self.label ~= 'reset all' and hh ~= 1 then
            im1 = im1:copy(width, height)
        
           if mycolor == color.blue or mycolor == color.dodgerblue or mycolor == color.navy then
           
               im1 = bluebutton:copy(width, height)
               
           elseif mycolor == color.green or mycolor == color.brown or mycolor == color.orange or mycolor == color.yellow then
           
               im1 = greenbutton:copy(width, height)
               
           elseif mycolor == color.gray or mycolor == color.lightgray then
            
                im1 = graybutton:copy(width, height)
           
           else
           
               im1 = blackbutton:copy(width, height)      
          end
    
        local imw = im1:width(im1)
        local imh = im1:height(im1)
        gc:drawImage(im1, x, y)
    
    else
    
	    dropButton1 = Button(x, y, width, height, im, self.color, '', 0.02*h, nil, false, true, false):paint(gc)
		
		--x, y, width, height, 
		--image, mycolor, label, curvature, selected, isVisible, draggable
    
    end

-- Draw the steps of the DropDown

local fontSize = math.floor(height/5)
    local fontSize = fontSize >= 7 and fontSize or 7
    local fontSize = fontSize <= 24 and fontSize or 24
	gc:setFont('sansserif','b',fontSize)
	
	gc:setColorRGB(unpack(color.black))
	gc:setPen('medium', 'smooth')  
	
	if self.selected == true then
	    gc:setColorRGB(unpack(color.gray))
        gc:setPen('medium', 'smooth')
        gc:drawArc((x), (y), (2*curve), (2*curve), 90, 90)
        gc:drawArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
        gc:drawArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
        gc:drawArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
        
        gc:drawArc((x), (y), (2*curve), (2*curve), 90, 90)
        gc:drawArc((x + width - 2*curve), (y), (2*curve), (2*curve), 0, 90)
        gc:drawArc((x + width - 2*curve), (y + height - 2*curve), (2*curve), (2*curve), 270, 90)
        gc:drawArc((x), (y + height - 2*curve), (2*curve), (2*curve), 180, 90)
        gc:drawLine((x + curve), (y), (x + width - curve), (y))
        gc:drawLine((x + width), (y + curve), (x + width), (y - curve + height))
        gc:drawLine((x + width - curve), (y + math.floor(height)), (x + curve), (y + math.floor(height)))
        gc:drawLine((x), (y + height - curve), (x), (y + curve))
	
--	    gc:drawRect(1.1*x, y + height, 0.775*width, (#contents)*1.11*dropHeight) 
        gc:setColorRGB(unpack(color.red))
    else
        if self.color == color.gray then
            gc:setColorRGB(unpack(color.black))
        else
            gc:setColorRGB(unpack(color.white))
        end
	end
	
		
	local sw = gc:getStringWidth(label)
    local sh = gc:getStringHeight(label)
    gc:drawString(label, 1.1*x, y + height/2, 'middle')
    
    local vertices = {x + 0.875*width, y + 0.35*height, 
                        x + 0.925*width, y + 0.35*height, 
                        x + 0.9*width, y + 0.65*height,
                        x + 0.875*width, y + 0.35*height}
    gc:setPen('medium', 'smooth')
    gc:fillPolygon(vertices)

if #self.contents > 0 then
    for k = 1, #self.contents do
        if self.selected == true then
        if self.Objects[k] then
            self.Objects[k]:paint(gc)
        end
        end
    end
    end

end

function dropDown:mouseDown(x,y)
    
    w = 800
    h = 600
    
    if self:contains(x, y) then
        
        if self.selected then

self.selected = false
        else
            self.selected = true
        	for k = 1, #self.contents do

self.Objects[k] = Rectangle(self.x + 0.1*self.width , self.y + self.height + (k - 1)*h/(#self.contents + 4), 0.8*self.width, h/(#self.contents + 4), self.contents[k], color.white, self.color, true, false)
	        
	        end
           
            for k = 1, #self.Objects do
                if self.Objects[k]:contains(x, y) == true then
                    self.Objects[k].selected = true
                else
                    self.Objects[k].selected = false
                end
          end

end
    end
       
            screen:invalidate()
end

function dropDown:mouseUp(x, y)

-- Choose an item from the DropDown menu

if self.selected then
       for k = 1, #self.Objects do
         if self.Objects[k]:contains(x, y) == true then

self.Objects[k].color = color.white
             self.action(k)
         end
     end

end

screen:invalidate()
end

function dropDown:mouseMove(x, y)

for k = 1, #self.Objects do
                if self.Objects[k]:contains(x, y) == true then
                    self.Objects[k].selected = true
                    self.action(k) -- this is optional
                else
                    self.Objects[k].selected = false
                end
          end

screen:invalidate()
end

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

Rectangle = class()

function Rectangle:init(x, y, width, height, label, color, textcolor, visible, close)

self.x	 = x
    self.y	 = y
    self.width	= width or 20
    self.height = height or 20
    self.color = color
    self.selected = false
    self.label = label
    self.textcolor = textcolor
    self.visible = visible
    self.close = close

if close and checkBox then self.close_box = checkBox(self.x + 0.95*self.width, self.y, self.width/20, "", true) end
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 and y <= self.y + sh

end

function wordWrap(self, str, width, gc)
            
            local str = tostring(self.label)
            local strList = {}
            local paraList = {}
            local border = 0.05*width
            
           if str:find(string.char(10)) then
               str = str:gsub(string.char(10)..string.char(10), string.char(10))
               paraList = str:split(string.char(10))
           else
               paraList = {str}
           end
           
           for p = 1, #paraList do
               local str1 = paraList[p]
               local templist = {}
               local newList = {}
                local temp = ""
               
               if str1:find(" ") then
                    str1 = str1:gsub("  ", " ")
                    tempList = str1:split(" ")
                else
                    tempList = {str1}
                end

local sw = gc:getStringWidth(str1)
       
                    if sw > (width - 2*border) then
                        temp = tempList[1]
                        for p = 2, #tempList do
                        local temp1
                        temp1 = temp.." "..tempList[p]
                        sw = gc:getStringWidth(temp1)
                            
                            if sw < (width - 2*border) then
                                temp = temp.." "..tempList[p]
                                if p == #tempList then
                                    table.insert(strList, temp)
               
                                end
                            else
                                table.insert(strList, temp)
                                temp = tempList[p]
                            end
                        end
               
                    else
                    
                       table.insert(strList, str1)
                    end
                     
                      table.insert(strList, string.char(10))          
           end

return strList

end

function Rectangle:paint(gc)

local fontSize = math.floor(h/50+0.5)
    local fontSize = fontSize > 6 and fontSize or 7
    local fontSize = fontSize < 24 and fontSize or 24
    gc:setFont("sansserif", "r", fontSize)
    
    if self.visible then
            gc:setPen("thin","dotted")
            gc:setColorRGB(unpack(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(unpack(self.textcolor))    
            
        
            if self.selected then
                gc:setColorRGB(240, 240, 250)
                gc:fillRect(self.x, self.y, self.width, self.height)
                gc:setColorRGB(255, 0, 0)
                gc:setFont("sansserif", "b", fontSize)
             end   
    --        local strList = wordWrap(self, str, self.width, gc)
            local strList = {self.label}  
            for p = 1, #strList do
            
            if strList[p] then
                str = strList[p]
                local sw = gc:getStringWidth(str)
                local sh = gc:getStringHeight(str)
                if strList[p] then
                gc:drawString(strList[p], self.x + 0.01*w, self.y + sh*(p), "bottom")
                end
            end
            
            gc:setColorRGB(unpack(self.color))
            gc:drawRect(self.x, self.y, self.width, self.height)
        end
        
        if self.close then self.close_box:paint(gc) end

end
end

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

-- Mouse controls and Keyboard Controls

function on.mouseDown(x,y)
    
    w = 800
    h = 600
    
    if dropDownMenu:contains(x, y) and dropList ~= {""} then
        dropDownMenu:mouseDown(x, y)        
    end

screen:invalidate()
end

function on.mouseUp(x, y)

-- Choose an item from the DropDown menu

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

screen:invalidate()
end

function on.mouseMove(x, y)

if dropDownMenu.selected then
        dropDownMenu:mouseMove(x, y)
    end

screen:invalidate()
end

function on.tabKey()

dropDownMenu.selected = not dropDownMenu.selected
    
    screen:invalidate()
end

function on.arrowKey(key)

if dropDownMenu.selected then
    if key == "down" or key == "left" then

if keyPlace < #dropDownMenu.Objects  then

keyPlace = keyPlace + 1
        end 
    elseif key == "up" or key == "right" then
    
        if keyPlace >= 1 then

keyPlace = keyPlace - 1
        end
    end
    
           for k = 1, #dropDownMenu.Objects do
                if k == keyPlace then

dropDownMenu.Objects[k].selected = true
                    dropDownMenu.Objects[k].color = color.gray
                    selectedItem = keyPlace
                    dropDownAction(keyPlace)
                else
                    dropDownMenu.Objects[k].selected = false
                    dropDownMenu.Objects[k].color = color.white
                end
            end
    end
    
    screen:invalidate()

end

function on.enterKey()

on.tabKey()

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: dropDown Script