95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
(()=>{
|
|
const w = 26;
|
|
const h = 13;
|
|
const yOffset = 3;
|
|
const touchMargin = 20;
|
|
const animateUpdateInterval = 300;
|
|
const staticUpdateInterval = 1000 * 60 * 10; // 10 minutes
|
|
|
|
WIDGETS.widanibat={
|
|
area: "tr",
|
|
sortOrder: 30,
|
|
width: w,
|
|
height: h,
|
|
batWidth: w,
|
|
batHeight: h,
|
|
scale: 1,
|
|
dir: 0,
|
|
drawIntervalID: undefined,
|
|
showPercent: false,
|
|
|
|
draw: function(){
|
|
const midX = ((2 * this.x) + this.width)/2;
|
|
const midY = ((2 * (this.y + yOffset)) + this.height)/2;
|
|
g.setColor(g.theme.fg);
|
|
g.reset();
|
|
|
|
var drawBattery = () => {
|
|
var halfS = this.batWidth/2;
|
|
var halfT = this.batHeight/2;
|
|
|
|
g.clearRect(this.x, this.y, this.x+this.width, this.y+this.height+yOffset);
|
|
g.fillRect(midX-halfS, midY-halfT, midX+halfS-3, midY+halfT); // outer
|
|
g.clearRect(midX-halfS+2, midY-halfT+2, midX+halfS-3-2, midY+halfT-2); // centre
|
|
g.fillRect(midX+halfS-3, midY-2, midX+halfS, midY+2); // contact
|
|
g.fillRect(midX-halfS+3, midY-halfT+3,((this.batWidth-9)/100*E.getBattery())+midX-halfS+3, midY+halfT-3); // the level
|
|
};
|
|
|
|
var drawPercent = () => {
|
|
g.clearRect(this.x, this.y, this.x+this.width, this.y+this.height+yOffset);
|
|
g.drawRect(this.x, this.y, this.x+this.width, this.y+this.height+yOffset);
|
|
var str = E.getBattery() + "%";
|
|
g.setFont("6x15").getFontHeight();
|
|
var strW = g.stringWidth(str);
|
|
g.drawString(str, this.x + ((this.width - strW)/2), this.y + 3); //y = y + ((h + yOffset - strH)/2))
|
|
};
|
|
|
|
var animateBattery = () => {
|
|
this.batWidth = this.width * this.scale;
|
|
this.batHeight = this.height * this.scale;
|
|
drawBattery();
|
|
this.scale = this.dir==0?this.scale-0.1:this.scale+0.1;
|
|
if (this.scale <= 0.7) this.dir=1;
|
|
if (this.scale >= 1) this.dir=0;
|
|
};
|
|
|
|
if (this.showPercent) drawPercent();
|
|
else {
|
|
if (Bangle.isCharging()) animateBattery();
|
|
else drawBattery();
|
|
}
|
|
}, //draw
|
|
|
|
touchHandler: function(_b, t){
|
|
const maxX = this.x + this.width;
|
|
const maxY = this.y + this.height + yOffset;
|
|
if (t.x < this.x - touchMargin || t.x > maxX + touchMargin || t.y > maxY + touchMargin) return;
|
|
this.showPercent = true;
|
|
this.draw();
|
|
setTimeout(() => {
|
|
this.showPercent = false;
|
|
this.draw();
|
|
}, 2000);
|
|
}, //touchHandler
|
|
|
|
reset: function() {
|
|
this.scale = 1;
|
|
this.dir = 0;
|
|
this.showPercent = false;
|
|
this.batHeight = this.height;
|
|
this.batWidth = this.width;
|
|
} //reset
|
|
}
|
|
|
|
WIDGETS.widanibat.drawIntervalID = setInterval(() => WIDGETS.widanibat.draw(WIDGETS.widanibat), staticUpdateInterval);
|
|
|
|
Bangle.on('charging', (charging) => {
|
|
changeInterval(WIDGETS.widanibat.drawIntervalID, charging ? animateUpdateInterval : staticUpdateInterval);
|
|
if (! charging) WIDGETS.widanibat.reset();
|
|
WIDGETS.widanibat.draw();
|
|
});
|
|
|
|
Bangle.on('touch', (_b, xy) => WIDGETS.widanibat.touchHandler(WIDGETS.widanibat, xy));
|
|
|
|
})();
|