Added image background clock
Gordon Williams
parent
ec8950c230
commit
f1f1f11158
17
apps.json
17
apps.json
|
|
@ -164,6 +164,23 @@
|
||||||
{"name":"wclock.img","url":"clock-word-icon.js","evaluate":true}
|
{"name":"wclock.img","url":"clock-word-icon.js","evaluate":true}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{ "id": "imgclock",
|
||||||
|
"name": "Image background clock",
|
||||||
|
"shortName":"Image Clock",
|
||||||
|
"icon": "app.png",
|
||||||
|
"version":"0.01",
|
||||||
|
"description": "A clock with an image as a background",
|
||||||
|
"tags": "clock",
|
||||||
|
"type" : "clock",
|
||||||
|
"custom": "custom.html",
|
||||||
|
"storage": [
|
||||||
|
{"name":"imgclock.app.js","url":"app.js"},
|
||||||
|
{"name":"imgclock.img","url":"app-icon.js","evaluate":true},
|
||||||
|
{"name":"imgclock.face.img"},
|
||||||
|
{"name":"imgclock.face.json"},
|
||||||
|
{"name":"imgclock.face.bg","content":""}
|
||||||
|
]
|
||||||
|
},
|
||||||
{ "id": "impwclock",
|
{ "id": "impwclock",
|
||||||
"name": "Imprecise Word Clock",
|
"name": "Imprecise Word Clock",
|
||||||
"icon": "clock-impword.png",
|
"icon": "clock-impword.png",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
0.01: New App!
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
require("heatshrink").decompress(atob("mEwxH+AH4A/AH4AD1oAaF/4v2nAAUF/4v/F6WJAAQvbw/X69jF54xPF5YuBAAIvnrms64BBAAQGCrgvHnc7r4vYRYXX2QCE6+HF8/W5vN6wvNsqPb6/N5nM5qRCR5QvCsoACF9BeCF4YyKR7ovCYYIvYd6DuCss6nSVBSJSPKSISNCR5a+Cr4vWAAYvDBhAvisYuBsYvPnYvBYAQuIF5gAMF4buDLxovgRxwvcr4uBsqOOF7juELxovDADDuEF9TuERxovfLx4vedwIvtdwKOOAAR1CACIlBr4pBF4RePGDAAFnYvTAAIUCJgQvTRyIwIAAgvPLygyNGhVlF7QyNGgrzCFzQyQsouCF7wyQF8IyNF0YyLF84yHF9QyDF1oA/AH4AeA=="))
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
/*
|
||||||
|
Draws a fullscreen image from flash memory
|
||||||
|
Saves a small image to flash which is just the area where the clock is
|
||||||
|
Keeps an offscreen buffer and draws the time to that
|
||||||
|
*/
|
||||||
|
var inf = require("Storage").readJSON("imgclock.face.json");
|
||||||
|
var img = require("Storage").read("imgclock.face.img");
|
||||||
|
var IX = inf.x, IY = inf.y, IBPP = inf.bpp;
|
||||||
|
var IW = 110, IH = 45, OY = 24;
|
||||||
|
require("Font7x11Numeric7Seg").add(Graphics);
|
||||||
|
var cg = Graphics.createArrayBuffer(IW,IH,IBPP);
|
||||||
|
var cgimg = {width:IW,height:IH,bpp:IBPP,buffer:cg.buffer};
|
||||||
|
var locale = require("locale");
|
||||||
|
|
||||||
|
// store clock background image in bgimg (a file in flash memory)
|
||||||
|
var bgimg = require("Storage").read("imgclock.face.bg");
|
||||||
|
// if it doesn't exist, make it
|
||||||
|
function createBgImg() {
|
||||||
|
cg.drawImage(img,-IX,-IY);
|
||||||
|
require("Storage").write("imgclock.face.bg", cg.buffer);
|
||||||
|
bgimg = require("Storage").read("imgclock.face.bg");
|
||||||
|
}
|
||||||
|
if (!bgimg || !bgimg.length) createBgImg();
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
var t = new Date();
|
||||||
|
// quickly set background image
|
||||||
|
new Uint8Array(cg.buffer).set(bgimg);
|
||||||
|
// draw time
|
||||||
|
cg.setFontAlign(-1,-1);
|
||||||
|
var x = 0;
|
||||||
|
cg.setFont("7x11Numeric7Seg",3);
|
||||||
|
cg.drawString((" "+t.getHours()).substr(-2), x, 0);
|
||||||
|
x+=42;
|
||||||
|
cg.fillRect(x, 10, x+2, 10+2).fillRect(x, 20, x+2, 20+2);
|
||||||
|
x+=6;
|
||||||
|
cg.drawString(("0"+t.getMinutes()).substr(-2), x, 0);
|
||||||
|
x+=44;
|
||||||
|
cg.setFont("7x11Numeric7Seg",1);
|
||||||
|
cg.drawString(("0"+t.getSeconds()).substr(-2), x, 20);
|
||||||
|
cg.setFont("6x8",1);
|
||||||
|
cg.setFontAlign(0,-1);
|
||||||
|
cg.drawString(locale.date(t),IW/2,IH-8);
|
||||||
|
// draw to screen
|
||||||
|
g.drawImage(cgimg,IX,IY+OY);
|
||||||
|
}
|
||||||
|
|
||||||
|
// draw background
|
||||||
|
g.drawImage(img, 0,OY);
|
||||||
|
// draw clock itself and do it every second
|
||||||
|
draw();
|
||||||
|
var secondInterval = setInterval(draw,1000);
|
||||||
|
// load widgets
|
||||||
|
Bangle.loadWidgets();
|
||||||
|
Bangle.drawWidgets();
|
||||||
|
// Stop when LCD goes off
|
||||||
|
Bangle.on('lcdPower',on=>{
|
||||||
|
if (secondInterval) clearInterval(secondInterval);
|
||||||
|
secondInterval = undefined;
|
||||||
|
if (on) {
|
||||||
|
setInterval(draw,1000);
|
||||||
|
draw();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Show launcher when middle button pressed
|
||||||
|
setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,63 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../lib/customize.js"></script>
|
||||||
|
<script src="https://espruino.github.io/EspruinoWebTools/imageconverter.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var faces = [
|
||||||
|
{ img:"122240.png", bpp : 8, x:120, y:20, name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
|
||||||
|
{ img:"122271.png", bpp : 8, x:10, y:125, name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
|
||||||
|
];
|
||||||
|
|
||||||
|
document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
|
||||||
|
<div class="column col-6 col-xs-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-image">
|
||||||
|
<img src="${face.img}" face="${facenumber}" class="img-responsive">
|
||||||
|
</div>
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title h5">${face.name}</div>
|
||||||
|
<div class="card-subtitle text-gray"><a href="${face.attribLink}" target="_blank">${face.attrib}</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">${face.description}</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<button class="btn btn-primary uploadbutton" face="${facenumber}">Upload</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`).join("\n");
|
||||||
|
|
||||||
|
var btns = document.getElementsByClassName("uploadbutton");
|
||||||
|
for (var i=0;i<btns.length;i++) {
|
||||||
|
// When the 'upload' button is clicked...
|
||||||
|
btns[i].addEventListener("click", function(btn) {
|
||||||
|
// build app text
|
||||||
|
var facenumber = btn.target.getAttribute("face");
|
||||||
|
var face = faces[facenumber];
|
||||||
|
var faceInfo = {
|
||||||
|
bpp : face.bpp,
|
||||||
|
x : face.x,
|
||||||
|
y : face.y
|
||||||
|
};
|
||||||
|
var img = document.querySelector(`img[face='${facenumber}']`);
|
||||||
|
var imgString = imageconverter.imagetoString(img, {mode:"web",output:"raw",compression:false});
|
||||||
|
// send finished app
|
||||||
|
sendCustomizedApp({
|
||||||
|
storage:[
|
||||||
|
{name:"imgclock.face.img", content:imgString},
|
||||||
|
{name:"imgclock.face.json", content:JSON.stringify(faceInfo)},
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
function toJS(txt) {
|
function toJS(txt) {
|
||||||
return JSON.stringify(txt);
|
var json = JSON.stringify(txt);
|
||||||
|
var b64 = "atob("+JSON.stringify(btoa(json))+")";
|
||||||
|
return b64.length < json.length ? b64 : json;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ("undefined"!=typeof module)
|
if ("undefined"!=typeof module)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue