Merge pull request #3775 from sebinsuresh/master

Update TimeCal watch face to support weather integration
master
Rob Pilling 2025-03-25 18:06:53 +00:00 committed by GitHub
commit 040dcbeb49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 94 additions and 26 deletions

View File

@ -10,3 +10,4 @@
0.05: bugfix: default settings
0.06: bugfix: Mrk.Color doesn't reflect the color selected, fixes #1706
0.07: Minor code improvements
0.08: Added weather integration

View File

@ -5,6 +5,7 @@ Shows the
* Date
* Time (hh:mm) - respecting 12/24 (uses locale string)
* 3 weeks calendar view (last,current and next week)
* Weather icon and temperature - if weather app is set up
### The settings menu
Calendar View can be customized
@ -13,6 +14,7 @@ Calendar View can be customized
* Start wday: Set day of week start. Values: 0=Sunday, 1=Monday,...,6=Saturday or -1=Relative to today [default 0: Sunday]
* Su color: Set Sundays color. Values: none [default], red, green or blue
* Border: show or none [default]
* Weather: show or none [default]
* Submenu Today settings - choose how today is highlighted
* < Back:
* Color: none, red [default], green or blue

View File

@ -1,7 +1,7 @@
{ "id": "timecal",
"name": "TimeCal",
"shortName":"TimeCal",
"version": "0.07",
"version": "0.08",
"description": "TimeCal shows the date/time along with a 3 week calendar",
"icon": "icon.png",
"type": "clock",

View File

@ -2,7 +2,7 @@
class TimeCalClock{
DATE_FONT_SIZE(){ return 20; }
TIME_FONT_SIZE(){ return 40; }
/**
* @param{Date} date optional the date (e.g. for testing)
* @param{Settings} settings optional settings to use e.g. for testing
@ -18,7 +18,7 @@ class TimeCalClock{
const defaults = {
shwDate:1, //0:none, 1:locale, 2:month, 3:monthshort.year #week
wdStrt:0, //identical to getDay() 0->Su, 1->Mo, ... //Issue #1154: weekstart So/Mo, -1 for use today
tdyNumClr:3, //0:fg, 1:red=#E00, 2:green=#0E0, 3:blue=#00E
@ -29,7 +29,8 @@ class TimeCalClock{
suClr:1, //0:fg, 1:red=#E00, 2:green=#0E0, 3:blue=#00E
//phColor:"#E00", //public holiday
calBrdr:false
calBrdr:false,
showWeather:false
};
for (const k in this._settings) if (!defaults.hasOwnProperty(k)) delete this._settings[k]; //remove invalid settings
for (const k in defaults) if(!this._settings.hasOwnProperty(k)) this._settings[k] = defaults[k]; //assign missing defaults
@ -39,7 +40,15 @@ class TimeCalClock{
Bangle.loadWidgets();
Bangle.drawWidgets();
this.centerX = Bangle.appRect.w/2;
// X coord to center date and time text at
this.dtCenterX = Bangle.appRect.w/2;
this.weather = undefined;
if(this.settings().showWeather && require('weather')){
this.weather = require('weather').get();
}
if(this.weather){
this.dtCenterX =2*Bangle.appRect.w/3;
}
this.nrgb = [g.theme.fg, "#E00", "#0E0", "#00E"]; //fg, r ,g , b
this.ABR_DAY=[];
@ -68,11 +77,55 @@ class TimeCalClock{
* Run forest run
**/
draw(){
// DEBUG
// require("weather").get = () => ({
// "temp": 298.15, // Temperature in Kelvin
// "code": 800, // Weather condition code
// "txt": "few clouds", // Weather condition text
// });
// require("weather").get = undefined;
const d = this.date ? this.date : new Date();
if (this.settings().showWeather && require('weather')){
this.weather = require('weather').get();
}
const prevCenterX = this.dtCenterX;
if(this.weather){
this.dtCenterX = 2 * Bangle.appRect.w / 3;
} else {
this.dtCenterX = Bangle.appRect.w / 2;
}
this.drawTime();
if(prevCenterX !== this.dtCenterX) {
this.drawDateAndCal();
}
if (this.TZOffset===undefined || this.TZOffset!==d.getTimezoneOffset())
this.drawDateAndCal();
if(this.weather){
this.drawWeather();
}
}
drawWeather() {
const curr = this.weather;
const temp = require("locale").temp(curr.temp-273.15).match(/^(\D*\d*)(.*)$/)[0];
const iconRadius = 20;
const widgetHeight = 24;
g.clearRect(
Bangle.appRect.x,
Bangle.appRect.y,
Bangle.appRect.w/3,
Bangle.appRect.y + widgetHeight + iconRadius
);
(require('weather')).drawIcon(curr, Bangle.appRect.x + widgetHeight, Bangle.appRect.y + widgetHeight - 4, iconRadius);
g
.setFontAlign(0, -1)
.setFont('6x8', 2)
.setColor(g.theme.fg)
.drawString(temp, Bangle.appRect.x2/6, Bangle.appRect.y + widgetHeight + iconRadius);
}
/**
* draw given or current time from date
@ -80,15 +133,16 @@ class TimeCalClock{
* schedules itself to update
*/
drawTime(){
d=this.date ? this.date : new Date();
const d=this.date ? this.date : new Date();
const Y=Bangle.appRect.y+this.DATE_FONT_SIZE()+10;
d=d?d :new Date();
g.setFontAlign(0, -1).setFont("Vector", this.TIME_FONT_SIZE()).setColor(g.theme.fg)
.clearRect(Bangle.appRect.x, Y, Bangle.appRect.x2, Y+this.TIME_FONT_SIZE()-7)
.drawString(("0" + require("locale").time(d, 1)).slice(-5), this.centerX, Y, true);
//.drawRect(Bangle.appRect.x, Y, Bangle.appRect.x2, Y+this.TIME_FONT_SIZE()-7); //DEV-Option
g.setFontAlign(0, -1)
.setFont("Vector", this.TIME_FONT_SIZE())
.setColor(g.theme.fg)
.clearRect(Bangle.appRect.x, Y - 13, Bangle.appRect.x2,Y+this.TIME_FONT_SIZE()-7)
.drawString(("0" + require("locale").time(d, 1)).slice(-5), this.dtCenterX, Y, true)
// .drawRect(Bangle.appRect.x, Y - 13, Bangle.appRect.x2,Y+this.TIME_FONT_SIZE()-7) //DEV-Option
;
setTimeout(this.draw.bind(this), 60000-(d.getSeconds()*1000)-d.getMilliseconds());
}
@ -98,7 +152,7 @@ class TimeCalClock{
* @param{Date} d provide date or uses today
*/
drawDateAndCal(){
d=this.date ? this.date : new Date();
const d=this.date ? this.date : new Date();
this.TZOffset=d.getTimezoneOffset();
this.drawDate();
@ -108,12 +162,12 @@ class TimeCalClock{
clearTimeout(this.tOutD);
this.tOutD=setTimeout(this.drawDateAndCal.bind(this), 86400000-(d.getHours()*24*60*1000)-(d.getMinutes()*60*1000)-d.getSeconds()-d.getMilliseconds());
}
/**
* draws given date as defiend in settings
*/
drawDate(){
d=this.date ? this.date : new Date();
const d=this.date ? this.date : new Date();
const FONT_SIZE=20;
const Y=Bangle.appRect.y;
@ -164,7 +218,12 @@ class TimeCalClock{
}
}
if (render){
g.setFont("Vector", FONT_SIZE).setColor(g.theme.fg).setFontAlign(0, -1).clearRect(Bangle.appRect.x, Y, Bangle.appRect.x2, Y+FONT_SIZE-3).drawString(dateStr,this.centerX,Y);
g
.setFont("Vector", FONT_SIZE)
.setColor(g.theme.fg)
.setFontAlign(0, -1)
.clearRect(Bangle.appRect.x, Y, Bangle.appRect.x2, Y+FONT_SIZE-3)
.drawString(dateStr, this.dtCenterX - 3, Y+1);
}
//g.drawRect(Bangle.appRect.x, Y, Bangle.appRect.x2, Y+FONT_SIZE-3); //DEV-Option
}
@ -173,7 +232,7 @@ class TimeCalClock{
* draws calender week view (-1,0,1) for given date
*/
drawCal(){
d=this.date ? this.date : new Date();
const d=this.date ? this.date : new Date();
const DAY_NAME_FONT_SIZE=10;
const CAL_Y=Bangle.appRect.y+this.DATE_FONT_SIZE()+10+this.TIME_FONT_SIZE()+3;
@ -181,7 +240,7 @@ class TimeCalClock{
const CELL_W=Bangle.appRect.w/7; //cell width
const CELL_H=(CAL_AREA_H-DAY_NAME_FONT_SIZE)/3; //cell heigth
const DAY_NUM_FONT_SIZE=Math.min(CELL_H-1,15); //size down, max 15
g.setFont("Vector", DAY_NAME_FONT_SIZE).setColor(g.theme.fg).setFontAlign(-1, -1).clearRect(Bangle.appRect.x, CAL_Y, Bangle.appRect.x2, CAL_Y+CAL_AREA_H);
//draw grid & Headline
@ -198,13 +257,13 @@ class TimeCalClock{
var nextY=CAL_Y+DAY_NAME_FONT_SIZE;
for(i=0; i<3; i++){
for(let i=0; i<3; i++){
const y=nextY+i*CELL_H;
g.drawLine(Bangle.appRect.x, y, Bangle.appRect.x2, y);
}
g.setFont("Vector", DAY_NUM_FONT_SIZE);
//write days
const tdyDate=d.getDate();
const days=this.settings().wdStrt>=0 ? 7+((7+d.getDay()-this.settings().wdStrt)%7) : 10;//start day (week before=7 days + days in this week realtive to week start) or fixed 7+3 days
@ -217,11 +276,11 @@ class TimeCalClock{
g.setColor(this.nrgb[this.settings().tdyMrkClr]); //today marker color or fg color
switch(this.settings().tdyMrkr){ //0:none, 1:circle, 2:rectangle, 3:filled
case 1:
for(m=1; m<=this.settings().tdyMrkPxl&&m<CELL_H-1&&m<CELL_W-1; m++)
for(let m=1; m<=this.settings().tdyMrkPxl&&m<CELL_H-1&&m<CELL_W-1; m++)
g.drawCircle(x*CELL_W+(CELL_W/2)+1, nextY+(CELL_H*y)+(CELL_H/2)+1, Math.min((CELL_W-m)/2, (CELL_H-m)/2)-2);
break;
case 2:
for(m=1; m<=this.settings().tdyMrkPxl&&m<CELL_H-1&&m<CELL_W-1; m++)
for(let m=1; m<=this.settings().tdyMrkPxl&&m<CELL_H-1&&m<CELL_W-1; m++)
g.drawRect(x*CELL_W+m, nextY+CELL_H+m, x*CELL_W+CELL_W-m, nextY+CELL_H+CELL_H-m);
break;
case 3:
@ -264,11 +323,11 @@ class TimeCalClock{
}
}
timeCalClock = new TimeCalClock(); timeCalClock.draw();
let timeCalClock = new TimeCalClock(); timeCalClock.draw();
//hook on settime to redraw immediatly
var _setTime = setTime;
var setTime = function(t) {
_setTime(t);
timeCalClock.draw(true);
};
};

View File

@ -17,7 +17,8 @@
suClr:1, //0:fg, 1:red=#E00, 2:green=#0E0, 3:blue=#00E
//phColor:"#E00", //public holiday
calBrdr:false
calBrdr:false,
showWeather:false
};
let validSttngs = require("Storage").readJSON(FILE, 1) || {};
for (const k in validSttngs) if (!DEFAULTS.hasOwnProperty(k)) delete this.validSttngs[k]; //remove invalid settings
@ -64,6 +65,11 @@
format: v => v ? /*LANG*/"show" : /*LANG*/"none",
onchange: v => chngdSttngs.calBrdr = v
},
"Weather": {
value: chngdSttngs.showWeather,
format: v => v ? /*LANG*/"show" : /*LANG*/"none",
onchange: v => chngdSttngs.showWeather = v
},
/*LANG*/"Today settings": () => showTodayMenu(),
/*LANG*/"< Cancel": () => cancelExitSettings()
});