Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

Add tag for clocks that use clockbg, and allow custom image upload for clockbg

master
Gordon Williams 2024-05-21 09:32:39 +01:00
parent 1869baeaae
commit 662cb75dfa
4 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/analogquadclk/metadata.json
View File

@ -6,7 +6,7 @@
"icon": "icon.png", "icon": "icon.png",
"screenshots" : [ { "url":"screenshot.png" }, { "url":"screenshot2.png" } ], "screenshots" : [ { "url":"screenshot.png" }, { "url":"screenshot2.png" } ],
"type": "clock", "type": "clock",
"tags": "clock,clkinfo,analog", "tags": "clock,clkinfo,analog,clockbg",
"supports" : ["BANGLEJS2"], "supports" : ["BANGLEJS2"],
"dependencies" : { "clock_info":"module", "clockbg":"module" }, "dependencies" : { "clock_info":"module", "clockbg":"module" },
"storage": [ "storage": [

30
apps/clockbg/interface.html
View File

@ -2,7 +2,7 @@
<head> <head>
<link rel="stylesheet" href="../../css/spectre.min.css"> <link rel="stylesheet" href="../../css/spectre.min.css">
<style> <style>
.flag { .thumbnail {
width : 100px; width : 100px;
cursor: pointer; cursor: pointer;
} }
@ -14,8 +14,8 @@
</style> </style>
</head> </head>
<body> <body>
<p>Upload an image:</p> <p>Upload an image: <input class="form-input" id="customfile" type="file"></p>
<div id="flaglist"></div> <div id="thumbnaillist"></div>
<p>If you'd like to contribute images you can <a href="https://github.com/espruino/BangleApps/tree/master/apps/patriotclk/img" target="_blank">add them on GitHub</a>!</p> <p>If you'd like to contribute images you can <a href="https://github.com/espruino/BangleApps/tree/master/apps/patriotclk/img" target="_blank">add them on GitHub</a>!</p>
<div style="float:right">Preview:<br/><canvas width="176" height="176" id="preview"></canvas></div> <div style="float:right">Preview:<br/><canvas width="176" height="176" id="preview"></canvas></div>
<div class="form-group"> <div class="form-group">
@ -89,21 +89,20 @@
var selectedImage; var selectedImage;
var bgImageData; var bgImageData;
document.getElementById("flaglist").innerHTML = document.getElementById("thumbnaillist").innerHTML = `<img class="thumbnail" id="customimage" src="" face="custom" style="display:none"/>\n`+
IMAGES.map(f => `<img class="flag" src="${f.path}" data-file="${f.path}"/>`).join("\n"); IMAGES.map(f => `<img class="thumbnail" src="${f.path}" data-file="${f.path}"/>`).join("\n");
var elements = document.querySelectorAll(".flag"); var elements = document.querySelectorAll(".thumbnail");
for (var i=0;i<elements.length;i++) for (var i=0;i<elements.length;i++)
elements[i].addEventListener("click", function(e) { elements[i].addEventListener("click", function(e) {
selectedImage = e.target; selectedImage = e.target;
drawPreview(); drawPreview();
document.getElementById("upload").classList.remove("disabled")
}); });
function drawPreview() { function drawPreview() {
if (!selectedImage) return; if (!selectedImage) return;
var imgPath = selectedImage.getAttribute("data-file"); var imgPath = selectedImage.getAttribute("data-file");
var img = IMAGES.find(img => img.path == imgPath); var img = IMAGES.find(img => img.path == imgPath) || {"dither":true}; // No IMAGES entry for custom images
var zoom = document.getElementById("box_zoom").value; var zoom = document.getElementById("box_zoom").value;
var dither = document.getElementById("box_dither").value; var dither = document.getElementById("box_dither").value;
if (dither=="" && img.dither) dither="bayer2"; if (dither=="" && img.dither) dither="bayer2";
@ -144,6 +143,7 @@
brightness:64*brightness brightness:64*brightness
}; };
bgImageData = imageconverter.canvastoString(canvas, options); bgImageData = imageconverter.canvastoString(canvas, options);
document.getElementById("upload").classList.remove("disabled")
} }
// If options changed // If options changed
@ -172,6 +172,20 @@
}); });
}); });
}); });
// Custom image upload
document.getElementById('customfile').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement, files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
document.getElementById("customimage").src = fr.result;
document.getElementById("customimage").style.display = "inline-block";
selectedImage = document.getElementById("customimage");
drawPreview();
}
fr.readAsDataURL(files[0]);
}
}
function onInit() { function onInit() {
Util.readStorageJSON("clockbg.json", function(data) { Util.readStorageJSON("clockbg.json", function(data) {

2
apps/pebblepp/metadata.json
View File

@ -7,7 +7,7 @@
"icon": "app.png", "icon": "app.png",
"screenshots": [{"url":"screenshot.png"}], "screenshots": [{"url":"screenshot.png"}],
"type": "clock", "type": "clock",
"tags": "clock,clkinfo", "tags": "clock,clkinfo,clockbg",
"supports": ["BANGLEJS2"], "supports": ["BANGLEJS2"],
"dependencies" : { "clock_info":"module", "clockbg":"module" }, "dependencies" : { "clock_info":"module", "clockbg":"module" },
"storage": [ "storage": [

2
apps/twotwoclock/metadata.json
View File

@ -5,7 +5,7 @@
"description": "A clock with the time split over two lines, with custom backgrounds and two ClockInfos", "description": "A clock with the time split over two lines, with custom backgrounds and two ClockInfos",
"icon": "icon.png", "icon": "icon.png",
"type": "clock", "type": "clock",
"tags": "clock,clkinfo", "tags": "clock,clkinfo,clockbg",
"supports" : ["BANGLEJS2"], "supports" : ["BANGLEJS2"],
"dependencies" : { "clock_info":"module", "clockbg":"module" }, "dependencies" : { "clock_info":"module", "clockbg":"module" },
"screenshots": [{"url":"screenshot.png"}], "screenshots": [{"url":"screenshot.png"}],