mirror of https://github.com/espruino/BangleApps
weather: Use Layout library
Ben Whittaker
parent
6f477a9a06
commit
e088b3be33
|
|
@ -1,7 +1,42 @@
|
|||
(() => {
|
||||
const Layout = require('Layout');
|
||||
const locale = require('locale');
|
||||
const weather = require('weather');
|
||||
let current = weather.get();
|
||||
|
||||
Bangle.loadWidgets();
|
||||
|
||||
var layout = new Layout({type:"v", bgCol: g.theme.bg, c: [
|
||||
{filly: 1},
|
||||
{type: "h", filly: 0, c: [
|
||||
{type: "custom", width: g.getWidth()/2, height: g.getWidth()/2, valign: -1, txt: "unknown", id: "icon",
|
||||
render: l => weather.drawIcon(l.txt, l.x+l.w/2, l.y+l.h/2, l.w/2-5)},
|
||||
{type: "v", c: [
|
||||
{type: "h", pad: 2, c: [
|
||||
{type: "txt", font: "18%", id: "temp", label: "000"},
|
||||
{type: "txt", font: "12%", valign: -1, id: "tempUnit", label: "°C"},
|
||||
]},
|
||||
{filly: 1},
|
||||
{type: "txt", font: "6x8", pad: 2, halign: 1, label: "Humidity"},
|
||||
{type: "txt", font: "9%", pad: 2, halign: 1, id: "hum", label: "000%"},
|
||||
{filly: 1},
|
||||
{type: "txt", font: "6x8", pad: 2, halign: -1, label: "Wind"},
|
||||
{type: "h", halign: -1, c: [
|
||||
{type: "txt", font: "9%", pad: 2, id: "wind", label: "00"},
|
||||
{type: "txt", font: "6x8", pad: 2, valign: -1, id: "windUnit", label: "km/h"},
|
||||
]},
|
||||
]},
|
||||
]},
|
||||
{filly: 1},
|
||||
{type: "txt", font: "9%", id: "cond", label: "Weather line 1"},
|
||||
{filly: 1},
|
||||
{type: "h", c: [
|
||||
{type: "txt", font: "6x8", pad: 2, id: "loc", label: "Toronto"},
|
||||
{fillx: 1},
|
||||
{type: "txt", font: "6x8", pad: 2, id: "updateTime", label: "15 minutes ago"},
|
||||
]},
|
||||
{filly: 1},
|
||||
]}, null, {lazy: true});
|
||||
|
||||
function formatDuration(millis) {
|
||||
let pluralize = (n, w) => n + " " + w + (n == 1 ? "" : "s");
|
||||
if (millis < 60000) return "< 1 minute";
|
||||
|
|
@ -11,52 +46,27 @@
|
|||
}
|
||||
|
||||
function draw() {
|
||||
g.reset();
|
||||
g.clearRect(0, 24, 239, 239);
|
||||
|
||||
weather.drawIcon(current.txt, 65, 90, 55);
|
||||
const locale = require("locale");
|
||||
|
||||
g.reset();
|
||||
|
||||
layout.icon.txt = current.txt;
|
||||
const temp = locale.temp(current.temp-273.15).match(/^(\D*\d*)(.*)$/);
|
||||
let width = g.setFont("Vector", 40).stringWidth(temp[1]);
|
||||
width += g.setFont("Vector", 20).stringWidth(temp[2]);
|
||||
g.setFont("Vector", 40).setFontAlign(-1, -1, 0);
|
||||
g.drawString(temp[1], 180-width/2, 70);
|
||||
g.setFont("Vector", 20).setFontAlign(1, -1, 0);
|
||||
g.drawString(temp[2], 180+width/2, 70);
|
||||
|
||||
g.setFont("6x8", 1);
|
||||
g.setFontAlign(-1, 0, 0);
|
||||
g.drawString("Humidity", 135, 130);
|
||||
g.setFontAlign(1, 0, 0);
|
||||
g.drawString(current.hum+"%", 225, 130);
|
||||
if ('wind' in current) {
|
||||
g.setFontAlign(-1, 0, 0);
|
||||
g.drawString("Wind", 135, 142);
|
||||
g.setFontAlign(1, 0, 0);
|
||||
g.drawString(locale.speed(current.wind)+' '+current.wrose.toUpperCase(), 225, 142);
|
||||
}
|
||||
|
||||
g.setFont("6x8", 2).setFontAlign(0, 0, 0);
|
||||
g.drawString(current.loc, 120, 170);
|
||||
|
||||
g.setFont("6x8", 1).setFontAlign(0, 0, 0);
|
||||
g.drawString(current.txt.charAt(0).toUpperCase()+current.txt.slice(1), 120, 190);
|
||||
|
||||
drawUpdateTime();
|
||||
|
||||
g.flip();
|
||||
layout.temp.label = temp[1];
|
||||
layout.tempUnit.label = temp[2];
|
||||
layout.hum.label = current.hum+"%";
|
||||
const wind = locale.speed(current.wind).match(/^(\D*\d*)(.*)$/);
|
||||
layout.wind.label = wind[1];
|
||||
layout.windUnit.label = wind[2] + " " + current.wrose.toUpperCase();
|
||||
// TODO: split long weather conditions across multiple lines
|
||||
layout.cond.label = current.txt.charAt(0).toUpperCase()+current.txt.slice(1);
|
||||
layout.loc.label = current.loc;
|
||||
layout.updateTime.label = `${formatDuration(Date.now() - current.time)} ago`;
|
||||
layout.update();
|
||||
layout.render();
|
||||
}
|
||||
|
||||
function drawUpdateTime() {
|
||||
if (!current || !current.time) return;
|
||||
let text = `Last update received ${formatDuration(Date.now() - current.time)} ago`;
|
||||
g.reset();
|
||||
g.clearRect(0, 202, 239, 210);
|
||||
g.setFont("6x8", 1).setFontAlign(0, 0, 0);
|
||||
g.drawString(text, 120, 206);
|
||||
layout.updateTime.label = `${formatDuration(Date.now() - current.time)} ago`;
|
||||
layout.update();
|
||||
layout.render();
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
|
@ -64,13 +74,16 @@
|
|||
NRF.removeListener("connect", update);
|
||||
if (current) {
|
||||
draw();
|
||||
} else if (NRF.getSecurityStatus().connected) {
|
||||
} else {
|
||||
delete layout.rects;
|
||||
if (NRF.getSecurityStatus().connected) {
|
||||
E.showMessage("Weather unknown\n\nIs Gadgetbridge\nweather reporting\nset up on your\nphone?");
|
||||
} else {
|
||||
E.showMessage("Weather unknown\n\nGadgetbridge\nnot connected");
|
||||
NRF.on("connect", update);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let interval = setInterval(drawUpdateTime, 60000);
|
||||
Bangle.on('lcdPower', (on) => {
|
||||
|
|
@ -91,6 +104,4 @@
|
|||
// Show launcher when middle button pressed
|
||||
Bangle.setUI("clock");
|
||||
|
||||
Bangle.loadWidgets();
|
||||
Bangle.drawWidgets();
|
||||
})()
|
||||
|
|
|
|||
Loading…
Reference in New Issue