This is a very simple, lightweight menu library (graphical_menu (About Modules)) for displays that use Espruino's Graphics library.
NOTE: This is the menu library used by the Pixl.menu()
command on Pixl.js
Simply use it as follows:
var g = /* my graphics object */;
var menu = require("graphical_menu");
var m;
var boolean = false;
var number = 50;
// First menu
var mainmenu = {
"" : {
"title" : "-- Menu --"
},
"Light On" : function() { LED1.set(); },
"Light Off" : function() { LED1.reset(); },
"Submenu" : function() { m=menu.list(g, submenu); },
"A Boolean" : {
value : boolean,
format : v => v?"On":"Off",
onchange : v => { boolean=v; }
},
"A Number" : {
value : number,
min:0,max:100,step:10,wrap:true,
onchange : v => { number=v; }
}
};
// Submenu
var submenu = {
"" : {
"title" : "-- SubMenu --"
},
"One" : undefined,
"Two" : undefined,
"< Back" : function() { m=menu.list(g, mainmenu); },
};
function onInit() {
// Create and display the first menu
m = menu.list(g, mainmenu);
}
setWatch(function() {
m.move(-1); // up
}, BTN1, {repeat:true,debounce:50,edge:"rising"});
setWatch(function() {
m.move(1); // down
}, BTN4, {repeat:true,debounce:50,edge:"rising"});
setWatch(function() {
m.select(); // select
}, BTN3, {repeat:true,debounce:50,edge:"rising"});
Call menu.list
with the Graphics object and
an object which defines the main menu.
Each object is as follows:
var menuinfo = {
"" : {
"title": "...", // optional, the menu's title
"back" : function() { } // optional - adds a menu item to go 'back' which calls this function
"selected": 0, // optional, first selected menu item's index
"fontHeight": 0, // optional, height of the font being used (default is 6)
"y": 0, // optional, y offset of menu
"x": 0, // optional, x offset of menu
"x2": g.getWidth()-1, // optional, x coordinate of right of menu
"y2": g.getHeight()-1, // optional, y coordinate of bottom of menu
"cB" : 0, // optional, background colour
"cF" : -1, // optional, foreground colour
"cHB" : 0, // optional, background colour of highlighted item
"cHF" : -1, // optional, foreground colour of highlighted item
"predraw": function(gfx) {}, // optional, function called before menu is drawn
// (you could for instance set the font in here)
"preflip": function(gfx,less,more) {} // optional, function called after menu is drawn,
// before it's sent to the screen.
// less is true if there are menu items off the top of the screen
// more is true if there are menu items off the bottom of the screen
},
"menu text" : function() {}, // called when menu item selected
"another menu" : {
value : 42, // A number or boolean to be changed
step : 1, // optional (default 1) - the amount to inc/dec the number
min : 1, // minimum value to clamp to
max : 100, // maximum value to clamp to
wrap : boolean, // optional - wrap around from minimum to maximum and vise versa
onchange : function(value) {}, // optional - called when the value changes
format : function(value){} // optional - converts the value to a string to be displayed
}
};
And menu.list
returns an object containing the following functions:
draw()
- draw the menu to the screen (usually happens automatically)select()
- 'select' the current menu item - call this when the 'action' button is pressedmove(n)
- if n=-1
, select the menu item above the current one, if it's 1
select the item below the current oneThis page is auto-generated from GitHub. If you see any mistakes or have suggestions, please let us know.