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

allow custom images

master
Gordon Williams 2020-05-07 09:27:28 +01:00
parent d6e2295c8c
commit 5b6d4e9956
1 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
apps/imgclock/custom.html
View File

@ -33,7 +33,48 @@
<button class="btn btn-primary uploadbutton" face="${facenumber}">Upload</button>
</div>
</div>
</div>`).join("\n");
</div>`).join("\n")+`
<div class="column col-6 col-xs-12">
<div class="card">
<div class="card-image">
<img id="customimage" src="" face="custom" class="img-responsive">
</div>
<div class="card-header">
<div class="card-title h5">Custom</div>
<div class="card-subtitle text-gray">(240x192 or 240x216 8 bit web palette)</div>
</div>
<div class="card-body">
<div class="form-group">
<div class="col-3">
<label class="form-label" for="customfile">Upload</label>
</div>
<div class="col-9">
<input class="form-input" id="customfile" type="file">
</div>
</div>
<div class="form-group">
<label class="form-label" for="customcolor">Clock color</label>
<select class="form-select" id="customcolor">
<option value="#ffffff">White</option>
<option value="#000000">Black</option>
</select>
</div>
<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>
</select>
</div>
</div>
<div class="card-footer">
<button id="customupload" class="btn btn-primary uploadbutton disabled" face="custom">Upload</button>
</div>
</div>
</div>
`;
var btns = document.getElementsByClassName("uploadbutton");
for (var i=0;i<btns.length;i++) {
@ -41,7 +82,21 @@
btns[i].addEventListener("click", function(btn) {
// build app text
var facenumber = btn.target.getAttribute("face");
var face = faces[facenumber];
var face;
if (facenumber=="custom") {
var select = document.getElementById("customlocation");
var pos = select.options[select.selectedIndex].value.split(",").map(x=>parseInt(x));
select = document.getElementById("customcolor");
var col = select.options[select.selectedIndex].value;
face = {
x : pos[0],
y : pos[1],
bpp : 8,
col : col
};
} else {
face = faces[facenumber];
}
var faceInfo = {
bpp : face.bpp,
x : face.x,
@ -59,6 +114,18 @@
});
});
}
// 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('customupload').classList.remove("disabled");
}
fr.readAsDataURL(files[0]);
}
}
</script>
</body>