Merge pull request #438 from nebbishhacker/imgclock-wide-dates

imgclock: Make text area wider
pull/440/head
Gordon Williams 2020-05-21 08:09:58 +01:00 committed by GitHub
commit d4463e4379
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 13 deletions

View File

@ -168,7 +168,7 @@
"name": "Image background clock",
"shortName":"Image Clock",
"icon": "app.png",
"version":"0.06",
"version":"0.07",
"description": "A clock with an image as a background",
"tags": "clock",
"type" : "clock",

View File

@ -4,4 +4,5 @@
0.04: Fix hour alignment for single digits
Scaling for background images <240px wide
0.05: Fix memory/interval leak when LCD turns on
0.06: Support 12 hour time
0.06: Support 12 hour time
0.07: Don't cut off wide date formats

View File

@ -7,7 +7,7 @@ var is12Hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"];
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;
var IW = 174, IH = 45, OY = 24;
var bgwidth = img.charCodeAt(0);
var bgoptions;
if (bgwidth<240)
@ -40,7 +40,7 @@ function draw() {
new Uint8Array(cg.buffer).set(bgimg);
// draw time
cg.setColor(inf.col);
var x = 40;
var x = 74 + 32 * inf.align;
cg.setFont("7x11Numeric7Seg",3);
cg.setFontAlign(1,-1);
cg.drawString(hours, x, 0);
@ -54,8 +54,14 @@ function draw() {
cg.drawString(("0"+t.getSeconds()).substr(-2), x, 20);
cg.setFont("6x8",1);
cg.drawString(meridian, x+2, 0);
cg.setFontAlign(0,-1);
cg.drawString(locale.date(t),IW/2,IH-8);
let date = locale.date(t);
if (cg.stringWidth(date) < IW-64) {
cg.setFontAlign(0, -1);
cg.drawString(date,IW/2+32*inf.align,IH-8);
} else {
cg.setFontAlign(inf.align, -1);
cg.drawString(date,IW*(inf.align+1)/2,IH-8);
}
// draw to screen
g.drawImage(cgimg,IX,IY+OY);
}

View File

@ -13,9 +13,9 @@
<script>
var faces = [
{ img:"122240.png", bpp : 8, x:120, y:20, 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, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
{ img:"thisisfine.png", bpp : 8, x:85, y:5, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", 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:"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:"" },
];
document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
@ -68,10 +68,10 @@
<div class="form-group">
<label class="form-label" for="customlocation">Clock location</label>
<select class="form-select" id="customlocation">
<option value="16,16">Top Left</option>
<option value="114,16">Top Right</option>
<option value="16,131">Bottom Left</option>
<option value="114,131">Bottom Right</option>
<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>
</select>
</div>
</div>
@ -97,6 +97,7 @@
face = {
x : pos[0],
y : pos[1],
align: pos[2],
bpp : document.getElementById('cusom16bit').checked ? 16 : 8,
col : col
};
@ -107,6 +108,7 @@
bpp : face.bpp,
x : face.x,
y : face.y,
align : face.align,
col : face.col
};
var imgMode = faceInfo.bpp==16 ? "rgb565" : "web";