2024-04-04 11:56:26 +00:00
< html >
< head >
< link rel = "stylesheet" href = "../../css/spectre.min.css" >
< style >
.flag {
width : 100px;
cursor: pointer;
}
#preview {
2024-05-02 13:49:16 +00:00
width : 178px; /* include the border */
height: 178px;
2024-04-04 11:56:26 +00:00
border: 1px solid black;
}
< / style >
< / head >
< body >
< p > Upload an image:< / p >
< div id = "flaglist" > < / 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 >
< div style = "float:right" > Preview:< br / > < canvas width = "176" height = "176" id = "preview" > < / canvas > < / div >
< div class = "form-group" >
2024-05-02 13:49:16 +00:00
< select class = "form-select" id = "box_zoom" style = "width:inherit" >
< option value = "0" > No Zoom< / option >
< option value = "1" > 10% Zoom< / option >
< option value = "1.5" > 15% Zoom< / option >
< option value = "2" > 20% Zoom< / option >
< / select > < br / >
2024-04-04 11:56:26 +00:00
< label class = "form-switch" >
< input type = "checkbox" id = "box_mirror" >
< i class = "form-icon" > < / i > Mirror
< / label >
< select class = "form-select" id = "box_bright" style = "width:inherit" >
< option value = "0" > Normal Brightness< / option >
< option value = "1" > Brighten< / option >
< option value = "-1" > Darken< / option >
< / select > < br / >
< select class = "form-select" id = "box_dither" style = "width:inherit" >
< option value = "" > Default Dither< / option >
< option value = "no" > No Dither< / option >
< option value = "bayer2" > Bayer Dither< / option >
< option value = "error" > Diffusion Dither< / option >
< option value = "random1" > Random Dither< / option >
< option value = "comic" > 'Comic' Dither< / option >
< / select >
< / div >
< p > Click < button id = "upload" class = "btn btn-primary disabled" style > Upload< / button > < / p >
< script src = "../../core/lib/interface.js" > < / script >
< script src = "../../webtools/imageconverter.js" > < / script >
< script >
const IMAGES =[
{"path":"img/ai_rock.jpeg","dither":true},
{"path":"img/ai_robot.jpeg","dither":true},
{"path":"img/ai_eye.jpeg","dither":true},
{"path":"img/ai_hero.jpeg","dither":true},
{"path":"img/icons8-australia-480.png","dither":false},
{"path":"img/icons8-austria-480.png","dither":false},
{"path":"img/icons8-belgium-480.png","dither":false},
{"path":"img/icons8-brazil-480.png","dither":false},
{"path":"img/icons8-canada-480.png","dither":false},
{"path":"img/icons8-china-480.png","dither":false},
{"path":"img/icons8-denmark-480.png","dither":false},
{"path":"img/icons8-england-480.png","dither":false},
{"path":"img/icons8-flag-of-europe-480.png","dither":false},
{"path":"img/icons8-france-480.png","dither":false},
{"path":"img/icons8-germany-480.png","dither":false},
{"path":"img/icons8-great-britain-480.png","dither":false},
{"path":"img/icons8-greece-480.png","dither":false},
{"path":"img/icons8-hungary-480.png","dither":false},
{"path":"img/icons8-italy-480.png","dither":false},
{"path":"img/icons8-netherlands-480.png","dither":false},
{"path":"img/icons8-new-zealand-480.png","dither":false},
{"path":"img/icons8-norway-480.png","dither":false},
{"path":"img/icons8-scotland-480.png","dither":false},
{"path":"img/icons8-spain-480.png","dither":false},
{"path":"img/icons8-sweden-480.png","dither":false},
{"path":"img/icons8-switzerland-480.png","dither":false},
{"path":"img/icons8-usa-480.png","dither":false},
{"path":"img/icons8-wales-480.png","dither":false},
{"path":"img/icons8-lgbt-flag-480.png","dither":true},
{"path":"img/icons8-ukraine-480.png","dither":true}];
var selectedImage;
var bgImageData;
document.getElementById("flaglist").innerHTML =
IMAGES.map(f => `< img class = "flag" src = "${f.path}" data-file = "${f.path}" / > `).join("\n");
var elements = document.querySelectorAll(".flag");
for (var i=0;i< elements.length ; i + + )
elements[i].addEventListener("click", function(e) {
selectedImage = e.target;
drawPreview();
document.getElementById("upload").classList.remove("disabled")
});
function drawPreview() {
if (!selectedImage) return;
var imgPath = selectedImage.getAttribute("data-file");
var img = IMAGES.find(img => img.path == imgPath);
2024-05-02 13:49:16 +00:00
var zoom = document.getElementById("box_zoom").value;
2024-04-04 11:56:26 +00:00
var dither = document.getElementById("box_dither").value;
if (dither=="" & & img.dither) dither="bayer2";
if (dither=="no" || dither=="") dither=undefined;
var mirror = document.getElementById("box_mirror").checked;
var brightness = 0|document.getElementById("box_bright").value;
const canvas = document.getElementById("preview");
canvas.width = 176; // setting size clears canvas
canvas.height = 176;
const ctx = canvas.getContext("2d");
var y = 0;
console.log(selectedImage);
let imgW = selectedImage.naturalWidth;
let imgH = selectedImage.naturalHeight;
let border = 0;
2024-05-02 13:49:16 +00:00
let imgMin = Math.min(imgW,imgH);
switch (zoom) {
case "0": border = 0; break;
case "1": border = Math.round(imgMin*0.1); break;
case "1.5": border = Math.round(imgMin*0.15); break;
case "2": border = Math.round(imgMin*0.2); break;
}
2024-04-04 11:56:26 +00:00
ctx.save(); // Save the current state
if (mirror) {
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
}
ctx.drawImage(selectedImage, border, border, imgW-border*2, imgH-border*2, 0, y, canvas.width, canvas.height);
ctx.restore();
var options = {
mode:"3bit",
output:"raw",
compression:false,
updateCanvas:true,
transparent:false,
diffusion:dither,
contrast: brightness ? -64 : 64,
brightness:64*brightness
};
bgImageData = imageconverter.canvastoString(canvas, options);
}
// If options changed
document.getElementById("box_zoom").addEventListener("click", function() {
drawPreview();
});
document.getElementById("box_dither").addEventListener("click", function() {
drawPreview();
});
document.getElementById("box_mirror").addEventListener("click", function() {
drawPreview();
});
document.getElementById("box_bright").addEventListener("click", function() {
drawPreview();
});
// When the 'upload' button is clicked...
document.getElementById("upload").addEventListener("click", function() {
let settings = {
style : "image",
fn : "clockbg.bg0.img"
};
Util.showModal("Uploading Image...");
Util.writeStorage(settings.fn, bgImageData, function(data) {
Util.writeStorage("clockbg.json", JSON.stringify(settings), function(data) {
Util.hideModal()
});
});
});
function onInit() {
Util.readStorageJSON("clockbg.json", function(data) {
let settings = Object.assign({
style : "randomcolor",
colors : ["#F00","#0F0","#00F"]
},data);
console.log(settings);
});
}
< / script >
< / body >
< / html >
