The Matrix Widget: A Dynamic Selector Widget for Multiple Items

Download the source code.
Play the video
Back








10









20









30









40









50









60









70

#!/usr/bin/env lua5.1

require[[fp]]
require[[fptheme]]
require[[fpeffects]]
require[[fpwidgets]]
require[[fpselectorwidgets]]

-- Set the background from the theme.
bg = fp.image{ style = "background" }

-- A predefined set of filenames.  This could come from anywhere really,
-- such as a database or the network.
-- These images are all square.  The transform effect only works on square
-- images for the time being.
filenames = { "icon_AlarmClock.png", "icon_Browser.png", "icon_Camera.png","icon_Email.png", 
	      "icon_Gallery.png", "icon_Music.png","icon_Settings.png", "icon_Videos.png", 
	      "icon_Calendar.png"}

-- Create a FancyPants matrix widget.  The matrix is populated with the 
-- images below.  The matrix is a FancyPants selector widget.  Selector
-- widgets are use as buttons and icons to select an action. 
matrix = fp.create{ type="matrix", focus=true, w=300, h=300, x=100, y=100 }

images = {}
for i = 1, #filenames do
   -- Load the images.  It doesn't matter where we place them for now
   -- as the matrix widget moves them into place.
   images[i] = fp.image{ file = "data/icon/"..filenames[i],
			 x=0, y=0, w=100, h=100 }
   matrix:add(images[i]) 
end

-- Create a callback function for the matrix focus event.
-- There can be more than one callback for each event so they
-- need to be named.
matrix.cb.focused.me = 
   function(item)
      for i = 1, #images do
	 -- We iterate through the images to find which image
	 -- was focussed.and set a bouncer on it if one
	 -- was not yet set.
	 if item == images[i] then
	    if false == images[i]:bouncer_get() then
	       images[i]:bouncer(true)
	    end
	 else
	    images[i]:bouncer(false)  
	 end
      end
   end

-- Initialise the matrix.
matrix:current_set(images[3])

-- Set the callback on the click event for the matrix. When clicked once, start 
-- bouncing, when clicked a second time, stop.
-- This is where an action, to be executed when the icon was clicked, could be added.
matrix.cb.clicked.me = 
   function(item)
      if true == item:bouncer_get() then
	 item:bouncer_end() 
      end	
   end

bg.cb.mouse_up.func = function(ev)
	fp.quit()
    end


-- Start the main loop.
fp.begin()