Adding app id to clockinfo to ensure clock faces remember their own settings

pull/2757/head^2
Gordon Williams 2023-05-17 09:06:09 +01:00
parent 1f30066c7d
commit b3d251f681
20 changed files with 43 additions and 33 deletions

View File

@ -6,3 +6,4 @@
0.06: ClockInfo Fix: Use .get instead of .show as .show is not implemented for weather etc. 0.06: ClockInfo Fix: Use .get instead of .show as .show is not implemented for weather etc.
0.07: Use clock_info.addInteractive instead of a custom implementation 0.07: Use clock_info.addInteractive instead of a custom implementation
0.08: Use clock_info module as an app 0.08: Use clock_info module as an app
0.09: clock_info now uses app name to maintain settings specifically for this clock face

View File

@ -193,6 +193,7 @@ function queueDraw() {
*/ */
let clockInfoItems = clock_info.load(); let clockInfoItems = clock_info.load();
let clockInfoMenu = clock_info.addInteractive(clockInfoItems, { let clockInfoMenu = clock_info.addInteractive(clockInfoItems, {
app : "aiclock",
x : 0, x : 0,
y: 0, y: 0,
w: W, w: W,

View File

@ -3,7 +3,7 @@
"name": "AI Clock", "name": "AI Clock",
"shortName":"AI Clock", "shortName":"AI Clock",
"icon": "aiclock.png", "icon": "aiclock.png",
"version":"0.08", "version":"0.09",
"readme": "README.md", "readme": "README.md",
"supports": ["BANGLEJS2"], "supports": ["BANGLEJS2"],
"dependencies" : { "clock_info":"module" }, "dependencies" : { "clock_info":"module" },

View File

@ -1,2 +1,3 @@
0.01: first release 0.01: first release
0.02: Use clock_info module as an app 0.02: Use clock_info module as an app
0.03: clock_info now uses app name to maintain settings specifically for this clock face

View File

@ -37,13 +37,13 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
{ {
// must be inside our own scope here so that when we are unloaded everything disappears // 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 // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
let draw = function() { let draw = function() {
var date = new Date(); var date = new Date();
var timeStr = require("locale").time(date,1); var timeStr = require("locale").time(date,1);
var h = g.getHeight(); var h = g.getHeight();
var w = g.getWidth(); var w = g.getWidth();
g.reset(); g.reset();
g.setColor(g.theme.bg); g.setColor(g.theme.bg);
g.fillRect(Bangle.appRect); g.fillRect(Bangle.appRect);
@ -66,7 +66,7 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
/** /**
* clock_info_support * clock_info_support
* this is the callback function that get invoked by clockInfoMenu.redraw(); * 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 * We will display the image and text on the same line and centre the combined
* length of the image+text * length of the image+text
* *
@ -76,7 +76,7 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
//g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg); //g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
g.reset().setFontLatoSmall(); g.reset().setFontLatoSmall();
g.setBgColor(options.bg).setColor(options.fg); g.setBgColor(options.bg).setColor(options.fg);
//use info.text.toString(), steps does not have length defined //use info.text.toString(), steps does not have length defined
var text_w = g.stringWidth(info.text.toString()); var text_w = g.stringWidth(info.text.toString());
// gap between image and text // gap between image and text
@ -88,7 +88,7 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
// clear the whole info line, allow additional 2 pixels in case LatoFont overflows area // clear the whole info line, allow additional 2 pixels in case LatoFont overflows area
g.clearRect(0, options.y -2, g.getWidth(), options.y+ 23 + 2); g.clearRect(0, options.y -2, g.getWidth(), options.y+ 23 + 2);
// draw the image if we have one // draw the image if we have one
if (info.img) { if (info.img) {
// image start // image start
@ -110,8 +110,8 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
// clock_info_support // clock_info_support
// setup the way we wish to interact with the menu // 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 // 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"} ); let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { app : "lato", x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
// timeout used to update every minute // timeout used to update every minute
var drawTimeout; var drawTimeout;
g.clear(); g.clear();

View File

@ -37,13 +37,13 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
{ {
// must be inside our own scope here so that when we are unloaded everything disappears // 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 // we also define functions using 'let fn = function() {..}' for the same reason. function decls are global
let draw = function() { let draw = function() {
var date = new Date(); var date = new Date();
var timeStr = require("locale").time(date,1); var timeStr = require("locale").time(date,1);
var h = g.getHeight(); var h = g.getHeight();
var w = g.getWidth(); var w = g.getWidth();
g.reset(); g.reset();
g.setColor(g.theme.bg); g.setColor(g.theme.bg);
g.fillRect(Bangle.appRect); g.fillRect(Bangle.appRect);
@ -66,7 +66,7 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
/** /**
* clock_info_support * clock_info_support
* this is the callback function that get invoked by clockInfoMenu.redraw(); * 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 * We will display the image and text on the same line and centre the combined
* length of the image+text * length of the image+text
* *
@ -76,7 +76,7 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
//g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg); //g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
g.reset().setFontLatoSmall(); g.reset().setFontLatoSmall();
g.setBgColor(options.bg).setColor(options.fg); g.setBgColor(options.bg).setColor(options.fg);
//use info.text.toString(), steps does not have length defined //use info.text.toString(), steps does not have length defined
var text_w = g.stringWidth(info.text.toString()); var text_w = g.stringWidth(info.text.toString());
// gap between image and text // gap between image and text
@ -88,7 +88,7 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
// clear the whole info line, allow additional 2 pixels in case LatoFont overflows area // clear the whole info line, allow additional 2 pixels in case LatoFont overflows area
g.clearRect(0, options.y -2, g.getWidth(), options.y+ 23 + 2); g.clearRect(0, options.y -2, g.getWidth(), options.y+ 23 + 2);
// draw the image if we have one // draw the image if we have one
if (info.img) { if (info.img) {
// image start // image start
@ -110,8 +110,8 @@ Graphics.prototype.setFontLatoSmall = function(scale) {
// clock_info_support // clock_info_support
// setup the way we wish to interact with the menu // 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 // 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"} ); let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { app : "lato", x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
// timeout used to update every minute // timeout used to update every minute
var drawTimeout; var drawTimeout;
g.clear(); g.clear();

View File

@ -64,7 +64,7 @@ function queueDraw() {
/** /**
* clock_info_support * clock_info_support
* this is the callback function that get invoked by clockInfoMenu.redraw(); * 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 * We will display the image and text on the same line and centre the combined
* length of the image+text * length of the image+text
* *
@ -109,8 +109,8 @@ let clockInfoItems = require("clock_info").load();
* selected after tapping on it * 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"} ); let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { app : "lato", x:64, y:132, w:50, h:40, draw : clockInfoDraw, bg : g.theme.bg, fg : g.theme.fg, hl : "#0ff"} );
g.clear(); g.clear();
// Show launcher when middle button pressed // Show launcher when middle button pressed

View File

@ -1,7 +1,7 @@
{ {
"id": "lato", "id": "lato",
"name": "Lato", "name": "Lato",
"version": "0.02", "version": "0.03",
"description": "A Lato Font clock with fast load and clock_info", "description": "A Lato Font clock with fast load and clock_info",
"readme": "README.md", "readme": "README.md",
"icon": "app.png", "icon": "app.png",

View File

@ -1,2 +1,3 @@
0.01: New App! 0.01: New App!
0.02: Use clock_info module as an app 0.02: Use clock_info module as an app
0.03: clock_info now uses app name to maintain settings specifically for this clock face

View File

@ -79,6 +79,6 @@ let clockInfoDraw = (itm, info, options) => {
}; };
let clockInfoItems = require("clock_info").load(); let clockInfoItems = require("clock_info").load();
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { x:R.x, y:R.y, w:midX-2, h:barY-R.y-2, draw : clockInfoDraw}); let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { app:"lcdclock", x:R.x, y:R.y, w:midX-2, h:barY-R.y-2, draw : clockInfoDraw});
let clockInfoMenu2 = require("clock_info").addInteractive(clockInfoItems, { x:midX+2, y:R.y, w:midX-3, h:barY-R.y-2, draw : clockInfoDraw}); let clockInfoMenu2 = require("clock_info").addInteractive(clockInfoItems, { app:"lcdclock", x:midX+2, y:R.y, w:midX-3, h:barY-R.y-2, draw : clockInfoDraw});
} }

View File

@ -1,6 +1,6 @@
{ "id": "lcdclock", { "id": "lcdclock",
"name": "LCD Clock", "name": "LCD Clock",
"version":"0.02", "version":"0.03",
"description": "A Casio-style clock, with ClockInfo areas at the top and bottom. Tap them and swipe up/down to toggle between different information", "description": "A Casio-style clock, with ClockInfo areas at the top and bottom. Tap them and swipe up/down to toggle between different information",
"icon": "app.png", "icon": "app.png",
"screenshots": [{"url":"screenshot.png"}], "screenshots": [{"url":"screenshot.png"}],

View File

@ -1 +1,2 @@
0.01: First release 0.01: First release
0.02: clock_info now uses app name to maintain settings specifically for this clock face

View File

@ -90,10 +90,12 @@ let clockInfoDraw = (itm, info, options) => {
}; };
let clockInfoMenuA = require("clock_info").addInteractive(clockInfoItems, { let clockInfoMenuA = require("clock_info").addInteractive(clockInfoItems, {
app:"pebblepp",
x : 0, y: 0, w: w/2, h:h/2, x : 0, y: 0, w: w/2, h:h/2,
draw : clockInfoDraw draw : clockInfoDraw
}); });
let clockInfoMenuB = require("clock_info").addInteractive(clockInfoItems, { let clockInfoMenuB = require("clock_info").addInteractive(clockInfoItems, {
app:"pebblepp",
x : w/2, y: 0, w: w/2, h:h/2, x : w/2, y: 0, w: w/2, h:h/2,
draw : clockInfoDraw draw : clockInfoDraw
}); });

View File

@ -2,7 +2,7 @@
"id": "pebblepp", "id": "pebblepp",
"name": "Pebble++ Clock", "name": "Pebble++ Clock",
"shortName": "Pebble++", "shortName": "Pebble++",
"version": "0.01", "version": "0.02",
"description": "A pebble style clock (based on the 'Pebble Clock' app) but with two configurable ClockInfo items at the top", "description": "A pebble style clock (based on the 'Pebble Clock' app) but with two configurable ClockInfo items at the top",
"icon": "app.png", "icon": "app.png",
"screenshots": [{"url":"screenshot.png"}], "screenshots": [{"url":"screenshot.png"}],

View File

@ -1,3 +1,4 @@
0.01: first release 0.01: first release
0.02: removed fast load, minimalism is useful for narrowing down on issues 0.02: removed fast load, minimalism is useful for narrowing down on issues
0.03: Use clock_info module as an app 0.03: Use clock_info module as an app
0.04: clock_info now uses app name to maintain settings specifically for this clock face

View File

@ -5,7 +5,7 @@ function draw() {
var timeStr = require("locale").time(date,1); var timeStr = require("locale").time(date,1);
var h = g.getHeight(); var h = g.getHeight();
var w = g.getWidth(); var w = g.getWidth();
g.reset(); g.reset();
g.setColor(g.theme.bg); g.setColor(g.theme.bg);
g.fillRect(Bangle.appRect); g.fillRect(Bangle.appRect);
@ -34,7 +34,7 @@ function queueDraw() {
/** /**
* clock_info_support * clock_info_support
* this is the callback function that get invoked by clockInfoMenu.redraw(); * 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 * We will display the image and text on the same line and centre the combined
* length of the image+text * length of the image+text
* *
@ -42,7 +42,7 @@ function queueDraw() {
function clockInfoDraw(itm, info, options) { function clockInfoDraw(itm, info, options) {
g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg); g.reset().setFont('Vector',24).setBgColor(options.bg).setColor(options.fg);
//use info.text.toString(), steps does not have length defined //use info.text.toString(), steps does not have length defined
var text_w = g.stringWidth(info.text.toString()); var text_w = g.stringWidth(info.text.toString());
// gap between image and text // gap between image and text
@ -54,7 +54,7 @@ function clockInfoDraw(itm, info, options) {
// clear the whole info line // clear the whole info line
g.clearRect(0, options.y -1, g.getWidth(), options.y+24); g.clearRect(0, options.y -1, g.getWidth(), options.y+24);
// draw the image if we have one // draw the image if we have one
if (info.img) { if (info.img) {
// image start // image start
@ -82,7 +82,7 @@ let clockInfoItems = require("clock_info").load();
* selected after tapping on it * 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"} ); let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { app:"simplestpp", 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 // Clear the screen once, at startup
g.clear(); g.clear();

View File

@ -2,7 +2,7 @@
"id": "simplestpp", "id": "simplestpp",
"name": "Simplest++ Clock", "name": "Simplest++ Clock",
"shortName": "Simplest++", "shortName": "Simplest++",
"version": "0.03", "version": "0.04",
"description": "The simplest working clock, with clock_info, acts as a tutorial piece", "description": "The simplest working clock, with clock_info, acts as a tutorial piece",
"readme": "README.md", "readme": "README.md",
"icon": "app.png", "icon": "app.png",

View File

@ -1 +1,2 @@
0.01: New Widget! 0.01: New Widget!
0.02: Now use an app ID (to avoid conflicts with clocks that also use ClockInfo)

View File

@ -1,8 +1,8 @@
{ "id": "widclkinfo", { "id": "widclkinfo",
"name": "Clock Info Widget", "name": "Clock Info Widget",
"version":"0.01", "version":"0.02",
"description": "Use 'Clock Info' in the Widget bar. Tap on the widget to select, then drag up/down/left/right to choose what information is displayed.", "description": "Use 'Clock Info' in the Widget bar. Tap on the widget to select, then drag up/down/left/right to choose what information is displayed.",
"icon": "widget.png", "icon": "widget.png",
"screenshots" : [ { "url":"screenshot.png" }], "screenshots" : [ { "url":"screenshot.png" }],
"type": "widget", "type": "widget",
"tags": "widget,clkinfo", "tags": "widget,clkinfo",

View File

@ -3,6 +3,7 @@ if (!require("clock_info").loadCount) { // don't load if a clock_info was alread
let clockInfoItems = require("clock_info").load(); let clockInfoItems = require("clock_info").load();
// Add the // Add the
let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, { let clockInfoMenu = require("clock_info").addInteractive(clockInfoItems, {
app : "widclkinfo",
// Add the dimensions we're rendering to here - these are used to detect taps on the clock info area // Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
x : 0, y: 0, w: 72, h:24, x : 0, y: 0, w: 72, h:24,
// You can add other information here you want to be passed into 'options' in 'draw' // You can add other information here you want to be passed into 'options' in 'draw'
@ -19,8 +20,8 @@ if (!require("clock_info").loadCount) { // don't load if a clock_info was alread
let clockInfoInfo; // when clockInfoMenu.draw is called we set this up let clockInfoInfo; // when clockInfoMenu.draw is called we set this up
// The actual widget we're displaying // The actual widget we're displaying
WIDGETS["clkinfo"] = { WIDGETS["clkinfo"] = {
area:"tl", area:"tl",
width: clockInfoMenu.w, width: clockInfoMenu.w,
draw:function(e) { draw:function(e) {
clockInfoMenu.x = e.x; clockInfoMenu.x = e.x;