diff --git a/apps/analogquadclk/metadata.json b/apps/analogquadclk/metadata.json index 0afc15e99..d60255717 100644 --- a/apps/analogquadclk/metadata.json +++ b/apps/analogquadclk/metadata.json @@ -6,7 +6,7 @@ "icon": "icon.png", "screenshots" : [ { "url":"screenshot.png" }, { "url":"screenshot2.png" } ], "type": "clock", - "tags": "clock,clkinfo,analog", + "tags": "clock,clkinfo,analog,clockbg", "supports" : ["BANGLEJS2"], "dependencies" : { "clock_info":"module", "clockbg":"module" }, "storage": [ diff --git a/apps/clockbg/interface.html b/apps/clockbg/interface.html index 0ed26c883..c92600b1b 100644 --- a/apps/clockbg/interface.html +++ b/apps/clockbg/interface.html @@ -2,7 +2,7 @@ -

Upload an image:

-
+

Upload an image:

+

If you'd like to contribute images you can add them on GitHub!

Preview:
@@ -89,21 +89,20 @@ var selectedImage; var bgImageData; - document.getElementById("flaglist").innerHTML = - IMAGES.map(f => ``).join("\n"); - var elements = document.querySelectorAll(".flag"); + document.getElementById("thumbnaillist").innerHTML = `\n`+ + IMAGES.map(f => ``).join("\n"); + var elements = document.querySelectorAll(".thumbnail"); for (var i=0;i 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 dither = document.getElementById("box_dither").value; if (dither=="" && img.dither) dither="bayer2"; @@ -144,6 +143,7 @@ brightness:64*brightness }; bgImageData = imageconverter.canvastoString(canvas, options); + document.getElementById("upload").classList.remove("disabled") } // 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() { Util.readStorageJSON("clockbg.json", function(data) { diff --git a/apps/pebblepp/metadata.json b/apps/pebblepp/metadata.json index 9097e3346..66ce91ee1 100644 --- a/apps/pebblepp/metadata.json +++ b/apps/pebblepp/metadata.json @@ -7,7 +7,7 @@ "icon": "app.png", "screenshots": [{"url":"screenshot.png"}], "type": "clock", - "tags": "clock,clkinfo", + "tags": "clock,clkinfo,clockbg", "supports": ["BANGLEJS2"], "dependencies" : { "clock_info":"module", "clockbg":"module" }, "storage": [ diff --git a/apps/twotwoclock/metadata.json b/apps/twotwoclock/metadata.json index 76364501a..ebcba539c 100644 --- a/apps/twotwoclock/metadata.json +++ b/apps/twotwoclock/metadata.json @@ -5,7 +5,7 @@ "description": "A clock with the time split over two lines, with custom backgrounds and two ClockInfos", "icon": "icon.png", "type": "clock", - "tags": "clock,clkinfo", + "tags": "clock,clkinfo,clockbg", "supports" : ["BANGLEJS2"], "dependencies" : { "clock_info":"module", "clockbg":"module" }, "screenshots": [{"url":"screenshot.png"}],