mirror of https://github.com/espruino/BangleApps
commit
d18c0d2fd3
|
@ -0,0 +1 @@
|
|||
0.01: Back to the future clock first version
|
|
@ -0,0 +1,37 @@
|
|||
# Back to the future Clock
|
||||
|
||||

|
||||
|
||||
A watchface inspierd by <a target="_blank" href="https://apps.garmin.com/apps/d181bcf9-5421-42a5-b460-863e5e76d798">this garmin watchface</a>.<br/>
|
||||
|
||||
## Todo
|
||||
|
||||
- Improving quality of Fonts.
|
||||
- More status icons.
|
||||
- A way to change step golas.
|
||||
- Improving bangle app performances (using functions for images and specialized array).
|
||||
|
||||
## Functionalities
|
||||
|
||||
- Current time
|
||||
- Current day and month
|
||||
- Steps
|
||||
- Battery
|
||||
- Step goal
|
||||
- Bluetooth connected icon
|
||||
|
||||
## Screenshots
|
||||
Clock:<br/>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
## Links
|
||||
### code ispired by
|
||||
advCasioBangleClock <a target="_blank" href="https://github.com/dotgreg/advCasioBangleClock">https://github.com/dotgreg/advCasioBangleClock</a>
|
||||
|
||||
93dub <a target="_blank" href="https://github.com/espruino/BangleApps/tree/master/apps/93dub">https://github.com/espruino/BangleApps/tree/master/apps/93dub</a>
|
||||
|
||||
### Creator
|
||||
<a target="_blank" href="https://github.com/NoobEjby">https://github.com/NoobEjby</a>
|
|
@ -0,0 +1 @@
|
|||
require("heatshrink").decompress(atob("mEwyEAhN0AMF1AIl2AKAXFH8Jbny4BKu5j/LZWWJ4W4AIXYhPZAJAPDzBnIMc3GjABFLZBZB25XDgP5gUaAIU7AJUbgP6AIRnB3JlEMYw/KLbAjIGIJbBWIJZDrcCvkCzkC3oBMzsCvsCrkCnhnDZomXH6BfU9HkAIIfGLoP4gU6LYRZB7sC/sDj0DnwBCrwBEBIYPBj0C7xnCMoZjD3I/QLqwhJLYpJCKIOege/gffAIX/AIwJBB4IBBv8Dn5lEZYNcH6ZfPDo4hHLYl+I4X/gkfgk/glfAJgPBAIMfM4WfgdfMYW+H6ZffW4W+LI1/gmfAKATBAIIZBMYLNBMYM/L8bfPToJbYMpZjD74/TL5ZhLBIv9vJdCLbpjJn4tBH58JupfTAJP+oJhCLsYBCFIItBH55fOBoIBBywbHF4YBDMMotJLZGYhN3L6GWhO3gUagWcgcdgeegkfGYvvmxhhEIIlBRY0fgefgcegV+gUcgO6L4V2MJhfD7ECrcC3sDr0D/8Er43FAIZhdEplfHIMDr8C70CnsB7bBCL5YJBAIO3hP5gV7gX9XocEv47JTIhdYcYaDIGoLBCgX+gV9gP8hO5YIRfLNoO4gUagWcb4MD78En4/LfYxdWDp0/HoMDn8Cz0CjkB3RfOy0J7ECncC3sDrzjBc4JDPUJBdMbYZ7Or49BgdfgW+gU9gPbhOYWYRfNrcC7pfPI4oBDMJoVVL6DBHA4OXhPZL4l+gkfgl/VKKrDJZLVDLqQBBv5fE70CrpfS/JfXJ4oBDJ4oNNL9C/FrwhBL6JTHL5ZdSAINfL4m+gU9L4WZL6E7gW9L4lfHKRVC982AIIFBA44jTL/ZhFL4pdWL4ffgc/gWeL4mYL5gLB3ECjcCzsDnwhBgk/HqzDID61/HIMD38Dj5fCjsB3cJvBfPgP7gV9gX+gYnBj4pCL+sfHoMC/8Cv0B/pfSy8B7UCrkC70DcYP/c4JfX/1BAIJfYHIQ9BgW/gVegP8gOaL5wBBy8J3MCjcCzsDjzBZL7i9EgcfgWegUdgPchOZhN3KohfFYIu4gP7gVdYInfgk/MKZfaFoM/GoMDn69E/sB3a9ML4+XgPagUcgV9gX+MK5ZB982AIJfSFIIxB/41BgX/gV+XocBzS9CL54BBCYOYgPbgU9cIQrBv5hTL6y7DGIRdCz8Cny9KL5bBFMIO5gP8MIyRB38Ej6XBMZZfSXIQlBRYK7ELoNeLomZXqDBHCoLBB3RhISoOfS4LFCMZBZB/1BAIJfILYa5DEoJdGgUdgPcgOaXqhhHPIJhB3ZhEv0CSoKZBYoJjDY4JlDr5fIBYS3ELYO/EIUfFIJdMIYJdTMIp5BDoN4MIkdGIQ1BMY4HBMoRfHK4QBBCIK3CLYm/RYU+gP9LoW6Loi9DLqZhL3QtBMIU+HIQ9BIIJNBn5LCr/GjABFBYQPBn4VBW4l/EoS5BLoO8LsRhLzTFCMYrHBMoOfLY4BHLIlfDoUeXIgrBzJdkMI5jDzDFCMYQ/BMoZVF9HkAIJfGLIf+LY2aLZBdhMIrFGhOZY4pdJMJMB7sB3gbC3UJvJduMI5jHvD7BLpZhHW4hbLLtJjPu5fTLIhb3MZxPDMJINFLIRb9MZhhJLoxZFLf4BIKooBJJ/5jbI/4B/AP4B/AP4BLA"))
|
|
@ -0,0 +1,229 @@
|
|||
require("Font8x16").add(Graphics);
|
||||
require("Font7x11Numeric7Seg").add(Graphics);
|
||||
require("Font5x7Numeric7Seg").add(Graphics);
|
||||
require("Font4x5").add(Graphics);
|
||||
|
||||
const timeTextY = 4;
|
||||
const timeDataY = timeTextY+19;
|
||||
const DateTextY = 48;
|
||||
const DateDataY = DateTextY+19;
|
||||
const stepGoalBatTextY = 100;
|
||||
const stepGoalBatdataY = stepGoalBatTextY+19;
|
||||
const statusTextY = 140;
|
||||
const statusDataY = statusTextY+19;
|
||||
let stepGoal = 7000;
|
||||
let steps = 0;
|
||||
|
||||
|
||||
let bOn = require("heatshrink").decompress(atob("iEQwYROg3AAokYAgUMg0DAoUBwwFDgE2CIYdHAogREDoopFGoodGABI="));
|
||||
|
||||
let bOff = require("heatshrink").decompress(atob("iEQwYLIgwFF4ADBgYFBjAKCsEGBAIABhgFEgOA7AdDmApKmwpCC4OGFIYjFGoVgIIkMEZAAD"));
|
||||
|
||||
|
||||
|
||||
//the following 2 sections are used from waveclk to schedule minutely updates
|
||||
// timeout used to update every minute
|
||||
var drawTimeout;
|
||||
|
||||
// schedule a draw for the next minute
|
||||
function queueDraw() {
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = setTimeout(function() {
|
||||
drawTimeout = undefined;
|
||||
draw();
|
||||
}, 60000 - (Date.now() % 60000));
|
||||
}
|
||||
|
||||
function getSteps() {
|
||||
steps = Bangle.getHealthStatus("day").steps;
|
||||
}
|
||||
|
||||
function drawBackground() {
|
||||
//g.setBgColor(1,1,1);
|
||||
g.setBgColor('#555555');
|
||||
g.setColor(1,1,1);
|
||||
g.clear();
|
||||
//g.drawImage(imgBg,0,0);
|
||||
g.reset();
|
||||
}
|
||||
function drawBlackBox() {
|
||||
g.reset();
|
||||
g.setBgColor(1,0,0);
|
||||
g.setColor(0,0,0);
|
||||
|
||||
//Hour, Min and Sec
|
||||
g.fillRect(50, timeDataY,50+33,timeDataY+22);
|
||||
g.fillRect(90, timeDataY,90+33, timeDataY+22);
|
||||
g.fillRect(128, timeDataY+8,130+24, timeDataY+8+14);
|
||||
//Day, Month, Day and Year
|
||||
g.fillRect(9, DateDataY,9+24, DateDataY+15);
|
||||
g.fillRect(42, DateDataY,42+40, DateDataY+15);
|
||||
g.fillRect(91, DateDataY,91+24, DateDataY+15);
|
||||
g.fillRect(124, DateDataY,124+43, DateDataY+15);
|
||||
//Present day
|
||||
g.fillRect(60, 86,60+47, 86+7);
|
||||
//Middle line
|
||||
g.drawLine(0,95,176,95);
|
||||
//Step and bat
|
||||
g.fillRect(3, stepGoalBatdataY-1, 62, stepGoalBatdataY+15);
|
||||
g.fillRect(121, stepGoalBatdataY-1, 150, stepGoalBatdataY+15);
|
||||
|
||||
//Status
|
||||
g.fillRect(62, statusDataY-1, 62+49, statusDataY+15);
|
||||
}
|
||||
function drawGoal() {
|
||||
var goal = stepGoal <= steps;
|
||||
g.reset();
|
||||
g.setColor(0,0,0);
|
||||
|
||||
g.fillRect(84, stepGoalBatdataY-1, 92, stepGoalBatdataY+15);
|
||||
|
||||
if (goal){
|
||||
g.reset();
|
||||
g.setColor(0,1,0);
|
||||
g.fillRect(84, stepGoalBatdataY, 92, stepGoalBatdataY+7);
|
||||
} else {
|
||||
g.reset();
|
||||
g.setColor(1,0,0);
|
||||
g.fillRect(84, stepGoalBatdataY+7, 92, stepGoalBatdataY+14);
|
||||
}
|
||||
}
|
||||
function drawRedkBox() {
|
||||
g.reset();
|
||||
g.setBgColor(1,0,0);
|
||||
g.setColor(1,0,0);
|
||||
//Hour, Min and Sec
|
||||
g.fillRect(50, timeTextY,50+33,timeTextY+15);
|
||||
g.fillRect(90, timeTextY,90+33, timeTextY+15);
|
||||
g.fillRect(128, timeTextY+8,130+24, timeTextY+8+15);
|
||||
//Day, Month, Day and Year
|
||||
g.fillRect(9, DateTextY,9+24, DateTextY+15);
|
||||
g.fillRect(42, DateTextY,42+40, DateTextY+15);
|
||||
g.fillRect(91, DateTextY,91+24, DateTextY+15);
|
||||
g.fillRect(124, DateTextY,124+43, DateTextY+15);
|
||||
//Step, Goal and Bat
|
||||
g.fillRect(2, stepGoalBatTextY,2+61, stepGoalBatTextY+15);
|
||||
g.fillRect(70, stepGoalBatTextY,72+33, stepGoalBatTextY+15);
|
||||
g.fillRect(120, stepGoalBatTextY,120+31, stepGoalBatTextY+15);
|
||||
//Status
|
||||
g.fillRect(62, statusTextY,62+49, statusTextY+15);
|
||||
}
|
||||
|
||||
function draw(){
|
||||
drawBackground();
|
||||
getSteps();
|
||||
drawBlackBox();
|
||||
drawRedkBox();
|
||||
drawGoal();
|
||||
var date = new Date();
|
||||
var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
|
||||
var d = date.getDate(), y = date.getFullYear();//, w = date.getDay();
|
||||
|
||||
if (h<10) {
|
||||
h = ("0"+h).substr(-2);
|
||||
}
|
||||
if (m<10) {
|
||||
m = ("0"+m).substr(-2);
|
||||
}
|
||||
if (s<10) {
|
||||
s = ("0"+s).substr(-2);
|
||||
}
|
||||
if (d<10) {
|
||||
d = ("0"+d).substr(-2);
|
||||
}
|
||||
|
||||
g.reset();
|
||||
g.setBgColor(1,0,0);
|
||||
g.setColor(1,1,1);
|
||||
//Draw text
|
||||
g.setFont("8x16");
|
||||
g.drawString('HOUR', 51, timeTextY+1);
|
||||
g.drawString('MIN', 96, timeTextY+1);
|
||||
g.drawString('SEC', 130, timeTextY+9);
|
||||
|
||||
g.drawString('DAY', 10, DateTextY+1);
|
||||
g.drawString('MONTH', 43, DateTextY+1);
|
||||
g.drawString('DAY', 92, DateTextY+1);
|
||||
g.drawString(' YEAR ', 125, DateTextY+1);
|
||||
|
||||
g.drawString('STEPS', 15, stepGoalBatTextY+1);
|
||||
g.drawString('GOAL', 72, stepGoalBatTextY+1);
|
||||
g.drawString(' BAT ', 120, stepGoalBatTextY+1);
|
||||
g.drawString('STATUS', 64, statusTextY+1);
|
||||
|
||||
//time
|
||||
g.reset();
|
||||
g.setBgColor(0,0,0);
|
||||
g.setColor(1,0,0);
|
||||
g.setFont("5x7Numeric7Seg",2);
|
||||
g.drawString(s, 131, timeDataY+8);
|
||||
g.setFont("7x11Numeric7Seg",2);
|
||||
g.drawString(h, 53, timeDataY);
|
||||
g.drawString(m, 93, timeDataY);
|
||||
//Date
|
||||
g.reset();
|
||||
g.setBgColor(0,0,0);
|
||||
g.setColor(0,1,0);
|
||||
g.setFont("5x7Numeric7Seg",2);
|
||||
g.drawString(d, 13, DateDataY);
|
||||
g.drawString(y, 127, DateDataY);
|
||||
g.setFont("8x16");
|
||||
g.drawString(require("locale").month(new Date(), 2).toUpperCase(), 52, DateDataY);
|
||||
g.drawString(require("locale").dow(new Date(), 2).toUpperCase(), 92, DateDataY);
|
||||
|
||||
|
||||
//status
|
||||
g.reset();
|
||||
g.setBgColor(0,0,0);
|
||||
g.setColor(1,1,0);
|
||||
g.setFont("5x7Numeric7Seg",2);
|
||||
var step = steps;
|
||||
var stepl = steps.toString().length;
|
||||
var stepdDrawX = 4+(36-(stepl*6))+(4*(6-stepl));
|
||||
g.drawString(step, stepdDrawX, stepGoalBatdataY);
|
||||
var bat = E.getBattery();
|
||||
var batl = bat.toString().length;
|
||||
var batDrawX = 122+(18-(batl*6))+(4*(3-batl));
|
||||
g.drawString(bat, batDrawX, stepGoalBatdataY);
|
||||
|
||||
//status
|
||||
var b = bOff;
|
||||
if (NRF.getSecurityStatus().connected){
|
||||
b = bOn;
|
||||
}
|
||||
g.drawImage(b, 64, statusDataY);
|
||||
|
||||
|
||||
g.reset();
|
||||
g.setBgColor(0,0,0);
|
||||
g.setColor(1,1,1);
|
||||
g.setFont("4x5");
|
||||
g.drawString('Present day', 62, 88);
|
||||
|
||||
queueDraw();
|
||||
}
|
||||
|
||||
/**
|
||||
* This watch is mostly dark, it does not make sense to respect the
|
||||
* light theme as you end up with a white strip at the top for the
|
||||
* widgets and black watch. So set the colours to the dark theme.
|
||||
*
|
||||
*/
|
||||
g.setTheme({bg:"#000",fg:"#fff",dark:true}).clear();
|
||||
//draw();
|
||||
|
||||
//the following section is from waveclk
|
||||
Bangle.on('lcdPower',on=>{
|
||||
if (on) {
|
||||
draw(); // draw immediately, queue redraw
|
||||
} else { // stop draw timer
|
||||
if (drawTimeout) clearTimeout(drawTimeout);
|
||||
drawTimeout = undefined;
|
||||
}
|
||||
});
|
||||
Bangle.setUI("clock");
|
||||
// Load widgets, but don't show them
|
||||
Bangle.loadWidgets();
|
||||
require("widget_utils").swipeOn(); // hide widgets, make them visible with a swipe
|
||||
g.clear(1);
|
||||
draw();
|
Binary file not shown.
After Width: | Height: | Size: 6.5 KiB |
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"id": "bttfclock",
|
||||
"name": "Back To The Future",
|
||||
"version": "0.01",
|
||||
"description": "The watch of Marty McFly",
|
||||
"readme": "README.md",
|
||||
"icon": "app.png",
|
||||
"screenshots": [{"url":"screenshot.png"}],
|
||||
"type": "clock",
|
||||
"tags": "clock",
|
||||
"supports": ["BANGLEJS2"],
|
||||
"allow_emulator": true,
|
||||
"storage": [
|
||||
{"name":"bttfclock.app.js","url":"app.js"},
|
||||
{"name":"bttfclock.img","url":"app-icon.js","evaluate":true}
|
||||
]
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 4.0 KiB |
Loading…
Reference in New Issue