bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom image clock for bangle.js 2

master
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.06: Support 12 hour time
0.07: Don't cut off wide date formats 0.07: Don't cut off wide date formats
0.08: Use Bangle.setUI for button/launcher handling 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 IW = 174, IH = 45, OY = 24;
var bgwidth = img.charCodeAt(0); var bgwidth = img.charCodeAt(0);
var bgoptions; var bgoptions;
if (bgwidth<240) if (bgwidth<g.getWidth())
bgoptions = { scale : 240/bgwidth }; bgoptions = { scale : g.getWidth()/bgwidth };
require("Font7x11Numeric7Seg").add(Graphics); require("Font7x11Numeric7Seg").add(Graphics);
var cg = Graphics.createArrayBuffer(IW,IH,IBPP,{msb:true}); var cg = Graphics.createArrayBuffer(IW,IH,IBPP,{msb:true});
@ -26,7 +26,7 @@ function createBgImg() {
require("Storage").write("imgclock.face.bg", cg.buffer); require("Storage").write("imgclock.face.bg", cg.buffer);
bgimg = require("Storage").read("imgclock.face.bg"); bgimg = require("Storage").read("imgclock.face.bg");
} }
if (!bgimg || !bgimg.length) createBgImg(); if (!bgimg || bgimg.length<10) createBgImg();
function draw() { function draw() {
var t = new Date(); 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> <body>
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
Please wait...
</div> </div>
</div> </div>
@ -12,13 +13,51 @@
<script src="../../core/lib/imageconverter.js"></script> <script src="../../core/lib/imageconverter.js"></script>
<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:"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:"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:"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:"" }, { 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)=>` document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
<div class="column col-6 col-xs-12"> <div class="column col-6 col-xs-12">
<div class="card"> <div class="card">
@ -42,7 +81,7 @@
</div> </div>
<div class="card-header"> <div class="card-header">
<div class="card-title h5">Custom</div> <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>
<div class="card-body"> <div class="card-body">
<div class="form-group"> <div class="form-group">
@ -69,10 +108,7 @@
<div class="form-group"> <div class="form-group">
<label class="form-label" for="customlocation">Clock location</label> <label class="form-label" for="customlocation">Clock location</label>
<select class="form-select" id="customlocation"> <select class="form-select" id="customlocation">
<option value="16,16,-1">Top Left</option> ${Object.keys(defaultPositions).map(k=>`<option value="${k}">${defaultPositions[k]}</option>`).join("")}
<option value="50,16,1">Top Right</option>
<option value="16,131,-1">Bottom Left</option>
<option value="50,131,1">Bottom Right</option>
</select> </select>
</div> </div>
</div> </div>
@ -99,7 +135,7 @@
x : pos[0], x : pos[0],
y : pos[1], y : pos[1],
align: pos[2], align: pos[2],
bpp : document.getElementById('cusom16bit').checked ? 16 : 8, bpp : document.getElementById('cusom16bit').checked ? 16 : defaultBPP,
col : col col : col
}; };
} else { } else {
@ -112,7 +148,7 @@
align : face.align, align : face.align,
col : face.col 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 img = document.querySelector(`img[face='${facenumber}']`);
var imgString = imageconverter.imagetoString(img, {mode:imgMode, output:"raw", compression:false}); var imgString = imageconverter.imagetoString(img, {mode:imgMode, output:"raw", compression:false});
// send finished app // send finished app
@ -136,6 +172,7 @@
fr.readAsDataURL(files[0]); fr.readAsDataURL(files[0]);
} }
} }
}
</script> </script>
</body> </body>

7
apps/imgclock/metadata.json
View File

@ -2,18 +2,19 @@
"id": "imgclock", "id": "imgclock",
"name": "Image background clock", "name": "Image background clock",
"shortName": "Image Clock", "shortName": "Image Clock",
"version": "0.08", "version": "0.09",
"description": "A clock with an image as a background", "description": "A clock with an image as a background",
"icon": "app.png", "icon": "app.png",
"type": "clock", "type": "clock",
"tags": "clock", "tags": "clock",
"supports": ["BANGLEJS"], "supports": ["BANGLEJS","BANGLEJS2"],
"custom": "custom.html", "custom": "custom.html",
"customConnect": true,
"storage": [ "storage": [
{"name":"imgclock.app.js","url":"app.js"}, {"name":"imgclock.app.js","url":"app.js"},
{"name":"imgclock.img","url":"app-icon.js","evaluate":true}, {"name":"imgclock.img","url":"app-icon.js","evaluate":true},
{"name":"imgclock.face.img"}, {"name":"imgclock.face.img"},
{"name":"imgclock.face.json"}, {"name":"imgclock.face.json"},
{"name":"imgclock.face.bg","content":""} {"name":"imgclock.face.bg","content":"X"}
] ]
} }