mirror of https://github.com/espruino/BangleApps
widclkinfo: Make clockInfoMenu part of the widget
parent
5579fd36e0
commit
f213da4a5a
|
@ -1,93 +1,101 @@
|
|||
if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
|
||||
// Load the clock infos
|
||||
let clockInfoItems = clock_info.load();
|
||||
(() => {
|
||||
if (!require("clock_info").loadCount) { // don't load if a clock_info was already loaded
|
||||
//WIDGETS = {};
|
||||
const clock_info = require("clock_info");
|
||||
|
||||
let clockInfoMenu = 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
|
||||
x: 0,
|
||||
y: -24, // TODO how know if offscreen to start?
|
||||
w: 72,
|
||||
h: 24,
|
||||
// You can add other information here you want to be passed into 'options' in 'draw'
|
||||
// This function draws the info
|
||||
draw: (itm, info, options) => {
|
||||
// itm: the item containing name/hasRange/etc
|
||||
// info: data returned from itm.get() containing text/img/etc
|
||||
// options: options passed into addInteractive
|
||||
clockInfoInfo = info;
|
||||
clockInfoMenu.y = options.y;
|
||||
if (WIDGETS["clkinfo"] && clockInfoMenu.y > -24) {
|
||||
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
|
||||
WIDGETS["clkinfo"] = {
|
||||
area: "tl",
|
||||
width: 0, //this.clockInfoMenu.w,
|
||||
init: function() {
|
||||
this.width = this.clockInfoMenu.w;
|
||||
delete this.init;
|
||||
return this;
|
||||
},
|
||||
clockInfoInfo: undefined, // defined during clockInfoMenu.draw()
|
||||
clockInfoMenu: clock_info.addInteractive(clock_info.load(), {
|
||||
app: "widclkinfo",
|
||||
// Add the dimensions we're rendering to here - these are used to detect taps on the clock info area
|
||||
x: 0,
|
||||
y: 0, // TODO how know if offscreen to start?
|
||||
w: 72,
|
||||
h: 24,
|
||||
// You can add other information here you want to be passed into 'options' in 'draw'
|
||||
// This function draws the info
|
||||
draw: (itm, info, options) => {
|
||||
// itm: the item containing name/hasRange/etc
|
||||
// info: data returned from itm.get() containing text/img/etc
|
||||
// options: options passed into addInteractive
|
||||
var wi = WIDGETS["clkinfo"];
|
||||
wi.clockInfoInfo = info;
|
||||
wi.clockInfoMenu.y = options.y;
|
||||
if (WIDGETS["clkinfo"] && wi.clockInfoMenu.y > -24) {
|
||||
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
|
||||
}
|
||||
}
|
||||
}),
|
||||
draw: function(e) {
|
||||
this.clockInfoMenu.x = e.x;
|
||||
var o = this.clockInfoMenu;
|
||||
g.reset();
|
||||
// indicate focus
|
||||
if (this.clockInfoMenu.focus) {
|
||||
g.setColor("#f00");
|
||||
}
|
||||
g.clearRect(o.x, o.y, o.x + o.w - 1, o.y + o.h - 1);
|
||||
if (this.clockInfoInfo) {
|
||||
var x = o.x;
|
||||
if (this.clockInfoInfo.img) {
|
||||
g.drawImage(this.clockInfoInfo.img, x, o.y); // draw the image
|
||||
x += 24;
|
||||
}
|
||||
var availableWidth = o.x + this.clockInfoMenu.w - (x + 2);
|
||||
g.setFont("6x8:2").setFontAlign(-1, 0);
|
||||
if (g.stringWidth(this.clockInfoInfo.text) > availableWidth)
|
||||
g.setFont("6x8:1x2");
|
||||
g.drawString(this.clockInfoInfo.text, x + 2, o.y + 12); // draw the text
|
||||
}
|
||||
}
|
||||
}.init();
|
||||
|
||||
Bangle.on("widgets-start-show", () => {
|
||||
var wi = WIDGETS["clkinfo"];
|
||||
if (wi) {
|
||||
wi.clockInfoMenu.y = 0;
|
||||
wi.draw(wi);
|
||||
}
|
||||
});
|
||||
|
||||
let clockInfoInfo; // when clockInfoMenu.draw is called we set this up
|
||||
let draw = function(e) {
|
||||
clockInfoMenu.x = e.x;
|
||||
var o = clockInfoMenu;
|
||||
// Clear the background
|
||||
g.reset();
|
||||
// indicate focus
|
||||
if (clockInfoMenu.focus) {
|
||||
g.setColor("#f00");
|
||||
}
|
||||
g.clearRect(o.x, o.y, o.x + o.w - 1, o.y + o.h - 1);
|
||||
|
||||
if (clockInfoInfo) {
|
||||
var x = o.x;
|
||||
if (clockInfoInfo.img) {
|
||||
g.drawImage(clockInfoInfo.img, x, o.y); // draw the image
|
||||
x += 24;
|
||||
}
|
||||
var availableWidth = o.x + clockInfoMenu.w - (x + 2);
|
||||
g.setFont("6x8:2").setFontAlign(-1, 0);
|
||||
if (g.stringWidth(clockInfoInfo.text) > availableWidth)
|
||||
g.setFont("6x8:1x2");
|
||||
g.drawString(clockInfoInfo.text, x + 2, o.y + 12); // draw the text
|
||||
}
|
||||
};
|
||||
|
||||
// The actual widget we're displaying
|
||||
WIDGETS["clkinfo"] = {
|
||||
area: "tl",
|
||||
width: clockInfoMenu.w,
|
||||
draw: draw
|
||||
};
|
||||
|
||||
Bangle.on("widgets-start-show", () => {
|
||||
clockInfoMenu.y = 0;
|
||||
if (WIDGETS["clkinfo"]) {
|
||||
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
|
||||
}
|
||||
})
|
||||
|
||||
Bangle.on("widgets-shown", () => {
|
||||
clockInfoMenu.y = 0;
|
||||
if (WIDGETS["clkinfo"]) {
|
||||
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
|
||||
var wi = WIDGETS["clkinfo"];
|
||||
if (wi) {
|
||||
wi.clockInfoMenu.y = 0;
|
||||
wi.draw(wi);
|
||||
}
|
||||
});
|
||||
|
||||
Bangle.on("widgets-start-hide", () => {
|
||||
clockInfoMenu.y = -24;
|
||||
if (WIDGETS["clkinfo"]) {
|
||||
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
|
||||
}
|
||||
if (clockInfoMenu.focus) {
|
||||
clockInfoMenu.blur();
|
||||
var wi = WIDGETS["clkinfo"];
|
||||
if (wi) {
|
||||
if (wi.clockInfoMenu.focus) wi.clockInfoMenu.blur();
|
||||
wi.clockInfoMenu.y = -24;
|
||||
wi.draw(wi);
|
||||
}
|
||||
});
|
||||
|
||||
Bangle.on("widgets-hidden", () => {
|
||||
clockInfoMenu.y = -24;
|
||||
if (WIDGETS["clkinfo"]) {
|
||||
WIDGETS["clkinfo"].draw(WIDGETS["clkinfo"]);
|
||||
}
|
||||
// check here too in case widget_utils.hide() is called
|
||||
if (clockInfoMenu.focus) {
|
||||
clockInfoMenu.blur();
|
||||
var wi = WIDGETS["clkinfo"];
|
||||
if (wi) {
|
||||
if (wi.clockInfoMenu.focus) wi.clockInfoMenu.blur();
|
||||
wi.clockInfoMenu.y = -24;
|
||||
wi.draw(wi);
|
||||
}
|
||||
});
|
||||
}
|
||||
}})()
|
||||
|
||||
/*
|
||||
const widget_utils = require("widget_utils");
|
||||
g.clear();
|
||||
Bangle.loadWidgets();
|
||||
widget_utils.swipeOn();
|
||||
Bangle.drawWidgets();
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue