mirror of https://github.com/espruino/BangleApps
Simplestpp, removed fast load so that we have the simplest clock with clock_info support
Hugh Barney
parent
8425f0b50a
commit
a6e2207b4a
|
|
@ -0,0 +1,2 @@
|
|||
0.01: first release
|
||||
0.02: removed fast load, minimalism is useful for narrowing down on issues
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Simplest++ Clock
|
||||
|
||||
The simplest working clock, with fast load and clock_info
|
||||
The simplest working clock, with clock_info
|
||||
|
||||
|
||||
|
||||
|
|
@ -36,8 +36,6 @@ This provides a working demo of how to use the clock_info modules.
|
|||
|
||||
## References
|
||||
|
||||
* [What is Fast Load and how does it work](http://www.espruino.com/Bangle.js+Fast+Load)
|
||||
|
||||
* [Clock Info Tutorial](http://www.espruino.com/Bangle.js+Clock+Info)
|
||||
|
||||
* [How to load modules through the IDE](https://github.com/espruino/BangleApps/blob/master/modules/README.md)
|
||||
|
|
|
|||
|
|
@ -1,108 +1,95 @@
|
|||
// Simplestpp Clock, see comments 'clock_info_support'
|
||||
|
||||
function draw() {
|
||||
var date = new Date();
|
||||
var timeStr = require("locale").time(date,1);
|
||||
var h = g.getHeight();
|
||||
var w = g.getWidth();
|
||||
|
||||
g.reset();
|
||||
g.setColor(g.theme.bg);
|
||||
g.fillRect(Bangle.appRect);
|
||||
|
||||
g.setFont('Vector', w/3);
|
||||
g.setFontAlign(0, 0);
|
||||
g.setColor(g.theme.fg);
|
||||
g.drawString(timeStr, w/2, h/2);
|
||||
|
||||
clockInfoMenu.redraw(); // clock_info_support
|
||||
queueDraw(); // queue draw in one minute
|
||||
};
|
||||
|
||||
// timeout used to update every minute
|
||||
var drawTimeout;
|
||||
|
||||
// schedule a draw for the next minute
|
||||
function queueDraw() {
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = setTimeout(function() {
|
||||
drawTimeout = undefined;
|
||||
draw();
|
||||
}, 60000 - (Date.now() % 60000));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Simplestpp Clock
|
||||
*
|
||||
* The entire clock code is contained within the block below this
|
||||
* supports 'fast load'
|
||||
*
|
||||
* To add support for clock_info_supprt we add the code marked at [1] and [2]
|
||||
* clock_info_support
|
||||
* this is the callback function that get invoked by clockInfoMenu.redraw();
|
||||
*
|
||||
* We will display the image and text on the same line and centre the combined
|
||||
* length of the image+text
|
||||
*
|
||||
*/
|
||||
|
||||
function clockInfoDraw(itm, info, options)
|
||||
{
|
||||
// must be inside our own scope here so that when we are unloaded everything disappears
|
||||
// we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
|
||||
g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
|
||||
|
||||
let draw = function() {
|
||||
var date = new Date();
|
||||
var timeStr = require("locale").time(date,1);
|
||||
var h = g.getHeight();
|
||||
var w = g.getWidth();
|
||||
|
||||
g.reset();
|
||||
g.setColor(g.theme.bg);
|
||||
g.fillRect(Bangle.appRect);
|
||||
//use info.text.toString(), steps does not have length defined
|
||||
var text_w = g.stringWidth(info.text.toString());
|
||||
// gap between image and text
|
||||
var gap = 10;
|
||||
// width of the image and text combined
|
||||
var w = gap + (info.img ? 24 :0) + text_w;
|
||||
// different fg color if we tapped on the menu
|
||||
if (options.focus) g.setColor(options.hl);
|
||||
|
||||
g.setFont('Vector', w/3);
|
||||
g.setFontAlign(0, 0);
|
||||
g.setColor(g.theme.fg);
|
||||
g.drawString(timeStr, w/2, h/2);
|
||||
clockInfoMenu.redraw(); // clock_info_support
|
||||
|
||||
// schedule a draw for the next minute
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = setTimeout(function() {
|
||||
drawTimeout = undefined;
|
||||
draw();
|
||||
}, 60000 - (Date.now() % 60000));
|
||||
};
|
||||
|
||||
/**
|
||||
* clock_info_support
|
||||
* this is the callback function that get invoked by clockInfoMenu.redraw();
|
||||
*
|
||||
* We will display the image and text on the same line and centre the combined
|
||||
* length of the image+text
|
||||
*
|
||||
*
|
||||
*/
|
||||
let clockInfoDraw = (itm, info, options) => {
|
||||
|
||||
g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
|
||||
|
||||
//use info.text.toString(), steps does not have length defined
|
||||
var text_w = g.stringWidth(info.text.toString());
|
||||
// gap between image and text
|
||||
var gap = 10;
|
||||
// width of the image and text combined
|
||||
var w = gap + (info.img ? 24 :0) + text_w;
|
||||
// different fg color if we tapped on the menu
|
||||
if (options.focus) g.setColor(options.hl);
|
||||
|
||||
// clear the whole info line
|
||||
g.clearRect(0, options.y -1, g.getWidth(), options.y+24);
|
||||
|
||||
// draw the image if we have one
|
||||
if (info.img) {
|
||||
// image start
|
||||
var x = (g.getWidth() / 2) - (w/2);
|
||||
g.drawImage(info.img, x, options.y);
|
||||
// draw the text to the side of the image (left/centre alignment)
|
||||
g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12);
|
||||
} else {
|
||||
// text only option, not tested yet
|
||||
g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// clock_info_support
|
||||
// retrieve all the clock_info modules that are installed
|
||||
let clockInfoItems = require("clock_info").load();
|
||||
|
||||
// clock_info_support
|
||||
// setup the way we wish to interact with the menu
|
||||
// the hl property defines the color the of the info when the menu is selected after tapping on it
|
||||
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
|
||||
// clear the whole info line
|
||||
g.clearRect(0, options.y -1, g.getWidth(), options.y+24);
|
||||
|
||||
// timeout used to update every minute
|
||||
var drawTimeout;
|
||||
g.clear();
|
||||
// draw the image if we have one
|
||||
if (info.img) {
|
||||
// image start
|
||||
var x = (g.getWidth() / 2) - (w/2);
|
||||
g.drawImage(info.img, x, options.y);
|
||||
// draw the text to the side of the image (left/centre alignment)
|
||||
g.setFontAlign(-1,0).drawString(info.text, x + 23 + gap, options.y+12);
|
||||
} else {
|
||||
// text only option, not tested yet
|
||||
g.setFontAlign(0,0).drawString(info.text, g.getWidth() / 2, options.y+12);
|
||||
}
|
||||
|
||||
// Show launcher when middle button pressed, add updown button handlers
|
||||
Bangle.setUI({
|
||||
mode : "clock",
|
||||
remove : function() {
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = undefined;
|
||||
// remove info menu
|
||||
clockInfoMenu.remove();
|
||||
delete clockInfoMenu;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Load widgets
|
||||
Bangle.loadWidgets();
|
||||
draw();
|
||||
setTimeout(Bangle.drawWidgets,0);
|
||||
} // end of clock
|
||||
/**
|
||||
* clock_info_support: retrieve all the clock_info modules that are
|
||||
* installed
|
||||
*
|
||||
*/
|
||||
let clockInfoItems = require("clock_info").load();
|
||||
|
||||
/**
|
||||
* clock_info_support: setup the way we wish to interact with the menu
|
||||
* the hl property defines the color the of the info when the menu is
|
||||
* selected after tapping on it
|
||||
*
|
||||
*/
|
||||
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
|
||||
|
||||
// Clear the screen once, at startup
|
||||
g.clear();
|
||||
|
||||
// Show launcher when middle button pressed
|
||||
Bangle.setUI("clock");
|
||||
// Load widgets
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
draw();
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
"id": "simplestpp",
|
||||
"name": "Simplest++ Clock",
|
||||
"shortName": "Simplest++",
|
||||
"version": "0.01",
|
||||
"description": "The simplest working clock, with fast load and clock_info, acts as a tutorial piece",
|
||||
"version": "0.02",
|
||||
"description": "The simplest working clock, with clock_info, acts as a tutorial piece",
|
||||
"readme": "README.md",
|
||||
"icon": "app.png",
|
||||
"screenshots": [{"url":"screenshot3.png"}],
|
||||
|
|
|
|||
Loading…
Reference in New Issue