FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

custom image clock for bangle.js 2

pull/2069/head
Gordon Williams 2022-07-28 15:15:06 +01:00
parent 1c261bea03
commit 6c46718acf
8 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/imgclock/ChangeLog
View File

@ -7,3 +7,4 @@
0.06: Support 12 hour time
0.07: Don't cut off wide date formats
0.08: Use Bangle.setUI for button/launcher handling
0.09: Bangle.js 2 compatibility

6
apps/imgclock/app.js
View File

@ -10,8 +10,8 @@ var IX = inf.x, IY = inf.y, IBPP = inf.bpp;
var IW = 174, IH = 45, OY = 24;
var bgwidth = img.charCodeAt(0);
var bgoptions;
if (bgwidth<240)
bgoptions = { scale : 240/bgwidth };
if (bgwidth<g.getWidth())
bgoptions = { scale : g.getWidth()/bgwidth };
require("Font7x11Numeric7Seg").add(Graphics);
var cg = Graphics.createArrayBuffer(IW,IH,IBPP,{msb:true});
@ -26,7 +26,7 @@ function createBgImg() {
require("Storage").write("imgclock.face.bg", cg.buffer);
bgimg = require("Storage").read("imgclock.face.bg");
}
if (!bgimg || !bgimg.length) createBgImg();
if (!bgimg || bgimg.length<10) createBgImg();
function draw() {
var t = new Date();

BIN
apps/imgclock/b2_122240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
apps/imgclock/b2_122271.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
apps/imgclock/b2_explode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
apps/imgclock/b2_thisisfine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

53
apps/imgclock/custom.html
View File

@ -5,6 +5,7 @@
<body>
<div class="container">
<div class="columns">
Please wait...
</div>
</div>
@ -12,13 +13,51 @@
<script src="../../core/lib/imageconverter.js"></script>
<script>
var faces = [
var faces = [];
const FACES_BANGLE1 = [
{ img:"122240.png", bpp : 8, x:56, y:20, align: 1, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
{ img:"122271.png", bpp : 8, x:10, y:125, align: -1, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
{ img:"thisisfine.png", bpp : 8, x:53, y:5, align: 0, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
{ img:"explode.png", bpp : 8, x:0, y:145, align: 0, col:"#FFFFFF", name:"Boom.", attrib:"", attribLink:"", description:"" },
];
const FACES_BANGLE2 = [
{ img:"b2_122240.png", bpp : 8, x:2, y:5, align: 1, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
{ img:"b2_122271.png", bpp : 8, x:2, y:115, align: -1, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
{ img:"b2_thisisfine.png", bpp : 8, x:2, y:5, align: 0, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
{ img:"b2_explode.png", bpp : 8, x:2, y:115, align: 0, col:"#FFFFFF", name:"Boom.", attrib:"", attribLink:"", description:"" },
];
var recommendedUploadStyle = "...";
var defaultBPP = 8;
var defaultImageMode = "...";
var defaultPositions = {};
function onInit(device) {
if (device && device.id=="BANGLEJS2") {
faces = FACES_BANGLE2;
recommendedUploadStyle = "176x152 3 bits per pixel (8 color)";
defaultBPP = 3;
defaultImageMode = "3bit";
defaultPositions = {
"2,5,-1":"Top",
"2,115,-1":"Bottom",
};
} else {
faces = FACES_BANGLE1;
recommendedUploadStyle = "240x192 or 240x216 8 bit web palette";
defaultBPP = 8;
defaultImageMode = "web";
defaultPositions = {
"16,16,-1":"Top Left",
"50,16,1":"Top Right",
"16,131,-1":"Bottom Left",
"50,131,1":"Bottom Right"
};
}
updateFaces();
}
function updateFaces() {
document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
<div class="column col-6 col-xs-12">
<div class="card">
@ -42,7 +81,7 @@
</div>
<div class="card-header">
<div class="card-title h5">Custom</div>
<div class="card-subtitle text-gray">(240x192 or 240x216 8 bit web palette)</div>
<div class="card-subtitle text-gray">(${recommendedUploadStyle})</div>
</div>
<div class="card-body">
<div class="form-group">
@ -69,10 +108,7 @@
<div class="form-group">
<label class="form-label" for="customlocation">Clock location</label>
<select class="form-select" id="customlocation">
<option value="16,16,-1">Top Left</option>
<option value="50,16,1">Top Right</option>
<option value="16,131,-1">Bottom Left</option>
<option value="50,131,1">Bottom Right</option>
${Object.keys(defaultPositions).map(k=>`<option value="${k}">${defaultPositions[k]}</option>`).join("")}
</select>
</div>
</div>
@ -99,7 +135,7 @@
x : pos[0],
y : pos[1],
align: pos[2],
bpp : document.getElementById('cusom16bit').checked ? 16 : 8,
bpp : document.getElementById('cusom16bit').checked ? 16 : defaultBPP,
col : col
};
} else {
@ -112,7 +148,7 @@
align : face.align,
col : face.col
};
var imgMode = faceInfo.bpp==16 ? "rgb565" : "web";
var imgMode = faceInfo.bpp==16 ? "rgb565" : defaultImageMode;
var img = document.querySelector(`img[face='${facenumber}']`);
var imgString = imageconverter.imagetoString(img, {mode:imgMode, output:"raw", compression:false});
// send finished app
@ -136,6 +172,7 @@
fr.readAsDataURL(files[0]);
}
}
}
</script>
</body>

7
apps/imgclock/metadata.json
View File

@ -2,18 +2,19 @@
"id": "imgclock",
"name": "Image background clock",
"shortName": "Image Clock",
"version": "0.08",
"version": "0.09",
"description": "A clock with an image as a background",
"icon": "app.png",
"type": "clock",
"tags": "clock",
"supports": ["BANGLEJS"],
"supports": ["BANGLEJS","BANGLEJS2"],
"custom": "custom.html",
"customConnect": true,
"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":""}
{"name":"imgclock.face.bg","content":"X"}
]
}