mirror of https://github.com/espruino/BangleApps
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}
|
||||
]
|
||||
},
|
||||
{ "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",
|
||||
"name": "Imprecise Word Clock",
|
||||
"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) {
|
||||
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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue