mirror of https://github.com/espruino/BangleApps
Refactoring, Improved Description
OmegaRogue
parent
01dc955206
commit
2d82d8dbfe
|
|
@ -1421,8 +1421,8 @@
|
|||
"name": "Digital Assistant, not EDITH",
|
||||
"shortName": "DANE",
|
||||
"icon": "app.png",
|
||||
"version": "0.10",
|
||||
"description": "A Watchface inspired by Tony Stark's EDITH",
|
||||
"version": "0.11",
|
||||
"description": "A Watchface inspired by Tony Stark's EDITH and based on https://arwes.dev/",
|
||||
"tags": "clock",
|
||||
"type": "clock",
|
||||
"allow_emulator": true,
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@
|
|||
0.07: Added Description
|
||||
0.08: Removed Image, Reduced RAM usage
|
||||
0.09: Added Unix Time
|
||||
0.10: Added Counter, Added Battery Display
|
||||
0.10: Added Counter, Added Battery Display
|
||||
0.11: Code Refactoring, Improved Description
|
||||
164
apps/dane/app.js
164
apps/dane/app.js
|
|
@ -1,36 +1,37 @@
|
|||
const font = "6x8";
|
||||
const timeFontSize = 4;
|
||||
const unixTimeFontSize = 2;
|
||||
const dateFontSize = 3;
|
||||
const font = "6x8";
|
||||
const timeFontSize = 4;
|
||||
const unixTimeFontSize = 2;
|
||||
const dateFontSize = 3;
|
||||
const smallFontSize = 2;
|
||||
const yOffset = 23;
|
||||
const yOffset = 23;
|
||||
const width = g.getWidth();
|
||||
const height = g.getHeight();
|
||||
const xyCenter = width/2+4;
|
||||
const cornerSize = 14;
|
||||
const cornerOffset = 3;
|
||||
const borderWidth = 1;
|
||||
const yposTime = 27+yOffset;
|
||||
const yposDate = 65+yOffset+12;
|
||||
const yposCounter = 58+yOffset+35+40;
|
||||
const xyCenter = width / 2 + 4;
|
||||
const cornerSize = 14;
|
||||
const cornerOffset = 3;
|
||||
const borderWidth = 1;
|
||||
const yposTime = 27 + yOffset;
|
||||
const yposDate = 65 + yOffset + 12;
|
||||
const yposCounter = 58 + yOffset + 35 + 40;
|
||||
|
||||
const mainColor = "#26dafd";
|
||||
const mainColorDark = "#029dbb";
|
||||
const mainColor = "#26dafd";
|
||||
const mainColorDark = "#029dbb";
|
||||
// const mainColorLight = "#8bebfe";
|
||||
|
||||
const secondaryColor = "#df9527";
|
||||
const secondaryColorDark = "#8b5c15";
|
||||
const secondaryColor = "#df9527";
|
||||
const secondaryColorDark = "#8b5c15";
|
||||
// const secondaryColorLight = "#ecc180";
|
||||
|
||||
const success = "#00ff00";
|
||||
const success = "#00ff00";
|
||||
// const successDark = "#000900";
|
||||
// const successLight = "#060f06";
|
||||
|
||||
const alert = "#ff0000";
|
||||
const alert = "#ff0000";
|
||||
// const alertDark = "#090000";
|
||||
// const alertLight = "#0f0606";
|
||||
|
||||
let count = 100;
|
||||
let oldCount = count;
|
||||
|
||||
|
||||
// function getImg() {
|
||||
|
|
@ -46,67 +47,70 @@ let count = 100;
|
|||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
function drawTopLeftCorner(x,y) {
|
||||
function drawTopLeftCorner(x, y) {
|
||||
g.setColor(mainColor);
|
||||
const x1 = x - cornerOffset;
|
||||
const y1 = y - cornerOffset;
|
||||
g.fillRect(x1,y1,x1+cornerSize,y1+cornerSize);
|
||||
g.fillRect(x1, y1, x1 + cornerSize, y1 + cornerSize);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x,y,x+cornerSize-cornerOffset,y+cornerSize-cornerOffset);
|
||||
g.fillRect(x, y, x + cornerSize - cornerOffset, y + cornerSize - cornerOffset);
|
||||
}
|
||||
function drawTopRightCorner(x,y) {
|
||||
|
||||
function drawTopRightCorner(x, y) {
|
||||
g.setColor(mainColor);
|
||||
const x1 = x + cornerOffset;
|
||||
const y1 = y - cornerOffset;
|
||||
g.fillRect(x1,y1,x1-cornerSize,y1+cornerSize);
|
||||
g.fillRect(x1, y1, x1 - cornerSize, y1 + cornerSize);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x,y,x-cornerSize-cornerOffset,y+cornerSize-cornerOffset);
|
||||
g.fillRect(x, y, x - cornerSize - cornerOffset, y + cornerSize - cornerOffset);
|
||||
}
|
||||
function drawBottomLeftCorner(x,y) {
|
||||
|
||||
function drawBottomLeftCorner(x, y) {
|
||||
g.setColor(mainColor);
|
||||
const x1 = x - cornerOffset;
|
||||
const y1 = y + cornerOffset;
|
||||
g.fillRect(x1,y1,x1+cornerSize,y1-cornerSize);
|
||||
g.fillRect(x1, y1, x1 + cornerSize, y1 - cornerSize);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x,y,x+cornerSize-cornerOffset,y-cornerSize+cornerOffset);
|
||||
g.fillRect(x, y, x + cornerSize - cornerOffset, y - cornerSize + cornerOffset);
|
||||
}
|
||||
function drawBottomRightCorner(x,y) {
|
||||
|
||||
function drawBottomRightCorner(x, y) {
|
||||
g.setColor(mainColor);
|
||||
const x1 = x + cornerOffset;
|
||||
const y1 = y + cornerOffset;
|
||||
g.fillRect(x1,y1,x1-cornerSize,y1-cornerSize);
|
||||
g.fillRect(x1, y1, x1 - cornerSize, y1 - cornerSize);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x,y,x-cornerSize+cornerOffset,y-cornerSize+cornerOffset);
|
||||
g.fillRect(x, y, x - cornerSize + cornerOffset, y - cornerSize + cornerOffset);
|
||||
}
|
||||
|
||||
function drawFrame(x1,y1,x2,y2) {
|
||||
drawTopLeftCorner(x1,y1);
|
||||
drawTopRightCorner(x2,y1);
|
||||
drawBottomLeftCorner(x1,y2);
|
||||
drawBottomRightCorner(x2,y2);
|
||||
function drawFrame(x1, y1, x2, y2) {
|
||||
drawTopLeftCorner(x1, y1);
|
||||
drawTopRightCorner(x2, y1);
|
||||
drawBottomLeftCorner(x1, y2);
|
||||
drawBottomRightCorner(x2, y2);
|
||||
g.setColor(mainColorDark);
|
||||
g.drawRect(x1,y1,x2,y2);
|
||||
g.drawRect(x1, y1, x2, y2);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x1+borderWidth,y1+borderWidth,x2-borderWidth,y2-borderWidth);
|
||||
}
|
||||
function drawTopFrame(x1,y1,x2,y2) {
|
||||
|
||||
drawBottomLeftCorner(x1,y2);
|
||||
drawBottomRightCorner(x2,y2);
|
||||
g.setColor(mainColorDark);
|
||||
g.drawRect(x1,y1,x2,y2);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x1+borderWidth,y1+borderWidth,x2-borderWidth,y2-borderWidth);
|
||||
g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
|
||||
}
|
||||
|
||||
function drawFrameNoCorners(x1,y1,x2,y2) {
|
||||
function drawTopFrame(x1, y1, x2, y2) {
|
||||
|
||||
drawBottomLeftCorner(x1, y2);
|
||||
drawBottomRightCorner(x2, y2);
|
||||
g.setColor(mainColorDark);
|
||||
g.drawRect(x1,y1,x2,y2);
|
||||
g.drawRect(x1, y1, x2, y2);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x1+borderWidth,y1+borderWidth,x2-borderWidth,y2-borderWidth);
|
||||
g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
|
||||
}
|
||||
|
||||
function drawFrameNoCorners(x1, y1, x2, y2) {
|
||||
g.setColor(mainColorDark);
|
||||
g.drawRect(x1, y1, x2, y2);
|
||||
g.setColor("#000000");
|
||||
g.fillRect(x1 + borderWidth, y1 + borderWidth, x2 - borderWidth, y2 - borderWidth);
|
||||
}
|
||||
|
||||
// function drawBottomFrame(x1,y1,x2,y2) {
|
||||
// drawTopLeftCorner(x1,y1);
|
||||
// drawTopRightCorner(x2,y1);
|
||||
|
|
@ -121,16 +125,14 @@ function drawFrameNoCorners(x1,y1,x2,y2) {
|
|||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
function drawTimeText(d) {
|
||||
const da = d.toString().split(" ");
|
||||
// var dutc = getUTCTime(d);
|
||||
|
||||
const time = da[4].split(":");
|
||||
const hours = time[0],
|
||||
minutes = time[1],
|
||||
seconds = time[2];
|
||||
minutes = time[1],
|
||||
seconds = time[2];
|
||||
g.setColor(mainColor);
|
||||
g.setFont(font, timeFontSize);
|
||||
g.drawString(`${hours}:${minutes}:${seconds}`, xyCenter, yposTime, true);
|
||||
|
|
@ -138,20 +140,21 @@ function drawTimeText(d) {
|
|||
|
||||
g.setFont(font, unixTimeFontSize);
|
||||
g.setColor(secondaryColor);
|
||||
g.drawString(`${unix}`, xyCenter, yposTime +22, true);
|
||||
g.drawString(`${unix}`, xyCenter, yposTime + 22, true);
|
||||
g.setFont(font, smallFontSize);
|
||||
}
|
||||
|
||||
function drawDateText(d) {
|
||||
g.setColor(mainColor);
|
||||
g.setFont(font, dateFontSize);
|
||||
g.drawString(`${d.getDate()}.${d.getMonth()+1}.${d.getFullYear()}`, xyCenter, yposDate, true);
|
||||
g.drawString(`${d.getDate()}.${d.getMonth() + 1}.${d.getFullYear()}`, xyCenter, yposDate, true);
|
||||
}
|
||||
|
||||
function drawCounterText() {
|
||||
if(count>999) count = 999;
|
||||
if(count<0) count = 0;
|
||||
if (count > 255) count = 255;
|
||||
if (count < 0) count = 0;
|
||||
g.setColor("#000000");
|
||||
g.fillRect(37,58+yOffset+36,203,58+80+yOffset+34);
|
||||
g.fillRect(37, 58 + yOffset + 36, 203, 58 + 80 + yOffset + 34);
|
||||
g.setFontAlign(0, 0);
|
||||
g.setColor(alert);
|
||||
g.setFont(font, 8);
|
||||
|
|
@ -170,25 +173,25 @@ function levelColor(l) {
|
|||
|
||||
function drawBattery() {
|
||||
const l = E.getBattery(), c = levelColor(l);
|
||||
const xl = 45+l*(194-46)/100;
|
||||
g.setColor(c).fillRect(46,58+80+yOffset+37,xl, height-5);
|
||||
count = l;
|
||||
const xl = 45 + l * (194 - 46) / 100;
|
||||
g.setColor(c).fillRect(46, 58 + 80 + yOffset + 37, xl, height - 5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function drawClock() {
|
||||
// main frame
|
||||
drawFrame(3,10+yOffset,width-3,height-3);
|
||||
drawFrame(3, 10 + yOffset, width - 3, height - 3);
|
||||
// time frame
|
||||
drawTopFrame(20,10+yOffset,220,58+yOffset);
|
||||
drawTopFrame(20, 10 + yOffset, 220, 58 + yOffset);
|
||||
// date frame
|
||||
drawTopFrame(28,58+yOffset,212,58+yOffset+35);
|
||||
drawTopFrame(28, 58 + yOffset, 212, 58 + yOffset + 35);
|
||||
|
||||
// counter frame
|
||||
drawTopFrame(36,58+yOffset+35,204,58+80+yOffset+35);
|
||||
drawTopFrame(36, 58 + yOffset + 35, 204, 58 + 80 + yOffset + 35);
|
||||
|
||||
// battery frame
|
||||
drawFrameNoCorners(44,58+80+yOffset+35,196, height-3);
|
||||
drawFrameNoCorners(44, 58 + 80 + yOffset + 35, 196, height - 3);
|
||||
|
||||
|
||||
updateClock();
|
||||
|
|
@ -196,6 +199,7 @@ function drawClock() {
|
|||
// const img = makeImg();
|
||||
// g.drawImage(img,width/2-(img.width/2),height/2);
|
||||
}
|
||||
|
||||
function updateClock() {
|
||||
g.setFontAlign(0, 0);
|
||||
const date = new Date();
|
||||
|
|
@ -206,12 +210,11 @@ function updateClock() {
|
|||
}
|
||||
|
||||
|
||||
Bangle.on('lcdPower', function(on) {
|
||||
Bangle.on('lcdPower', function (on) {
|
||||
if (on) drawClock();
|
||||
|
||||
});
|
||||
|
||||
|
||||
g.clear();
|
||||
|
||||
Bangle.loadWidgets();
|
||||
|
|
@ -220,17 +223,18 @@ Bangle.drawWidgets();
|
|||
drawClock();
|
||||
|
||||
|
||||
setWatch(Bangle.showLauncher, BTN2, {repeat: false, edge: "falling"});
|
||||
|
||||
setWatch(Bangle.showLauncher, BTN2, {repeat:false,edge:"falling"});
|
||||
|
||||
setWatch(function() {
|
||||
count+=1;
|
||||
drawCounterText();
|
||||
}, BTN1, {repeat:true,edge:"falling"});
|
||||
setWatch(function() {
|
||||
count--;
|
||||
drawCounterText();
|
||||
}, BTN3, {repeat:true,edge:"falling"});
|
||||
// setWatch(function () {
|
||||
// count++;
|
||||
// drawCounterText();
|
||||
// }, BTN1, {repeat: true, edge: "falling"});
|
||||
// setWatch(function () {
|
||||
// count--;
|
||||
// drawCounterText();
|
||||
// }, BTN3, {repeat: true, edge: "falling"});
|
||||
|
||||
// refesh every 100 milliseconds
|
||||
setInterval(updateClock, 500);
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue