|
|
|
|
@ -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);
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|