Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity
BangleApps/apps/imgclock/custom.html

189 lines
7.5 KiB
HTML
Raw Normal View History

Added image background clock
2020-05-06 10:03:04 +00:00
<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<div class="container">
<div class="columns">
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
Please wait...
Added image background clock
2020-05-06 10:03:04 +00:00
</div>
</div>
fix custom/interface after refactoring
2020-08-24 10:59:52 +00:00
<script src="../../core/lib/customize.js"></script>
Use heatshrink/imageconverter from webtools - see https://github.com/espruino/BangleApps/pull/2299
2022-11-21 12:16:27 +00:00
<script src="../../webtools/imageconverter.js"></script>
Added image background clock
2020-05-06 10:03:04 +00:00
<script>
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
var faces = [];
const FACES_BANGLE1 = [
imgclock: Make imgclock text area wider This prevents imgclock from cutting off the date in locales with long date formats such as "Wednesday, September 10, 2020". Also adjusts the position and alignment of the date when necessary to prevent it from flowing off the edge of the screen.
2020-05-12 00:58:31 +00:00
{ 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:"" },
add explosion background
2020-07-16 14:58:06 +00:00
{ img:"explode.png", bpp : 8, x:0, y:145, align: 0, col:"#FFFFFF", name:"Boom.", attrib:"", attribLink:"", description:"" },
Added image background clock
2020-05-06 10:03:04 +00:00
];
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
const FACES_BANGLE2 = [
{ img:"b2_122240.png", bpp : 8, x:2, y:5, align: 1, col:"#FFFFFF", name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
{ img:"b2_122271.png", bpp : 8, x:2, y:115, align: -1, col:"#FFFFFF", name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
quick image clock tweaks - give up on 3bpp images as palette handling (rendering 3->8bpp) makes it tricky
2022-07-28 16:05:44 +00:00
{ img:"b2_thisisfine.png", bpp : 8, x:10, y:0, align: 0, col:"#000000", name:"This is fine.", attrib:"Gunshow #648", attribLink:"https://knowyourmeme.com/memes/this-is-fine", description:"" },
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
{ img:"b2_explode.png", bpp : 8, x:2, y:115, align: 0, col:"#FFFFFF", name:"Boom.", attrib:"", attribLink:"", description:"" },
];
var recommendedUploadStyle = "...";
var defaultBPP = 8;
var defaultImageMode = "...";
var defaultPositions = {};
function onInit(device) {
if (device && device.id=="BANGLEJS2") {
faces = FACES_BANGLE2;
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
recommendedUploadStyle = "176x152 or 176x176(hidden widgets) 3bpp (8 color)";
quick image clock tweaks - give up on 3bpp images as palette handling (rendering 3->8bpp) makes it tricky
2022-07-28 16:05:44 +00:00
defaultBPP = 8;
defaultImageMode = "web";
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
defaultPositions = {
"2,5,-1":"Top",
"2,115,-1":"Bottom",
};
} else {
faces = FACES_BANGLE1;
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
recommendedUploadStyle = "240x192 or 240x216 8bpp web palette";
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
defaultBPP = 8;
defaultImageMode = "web";
defaultPositions = {
"16,16,-1":"Top Left",
"50,16,1":"Top Right",
"16,131,-1":"Bottom Left",
"50,131,1":"Bottom Right"
};
}
updateFaces();
}
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
hazel
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
function updateFaces() {
Added image background clock
2020-05-06 10:03:04 +00:00
document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
<div class="column col-6 col-xs-12">
<div class="card">
<div class="card-image">
<img src="${face.img}" face="${facenumber}" class="img-responsive">
</div>
<div class="card-header">
<div class="card-title h5">${face.name}</div>
<div class="card-subtitle text-gray"><a href="${face.attribLink}" target="_blank">${face.attrib}</a></div>
</div>
<div class="card-body">${face.description}</div>
<div class="card-footer">
<button class="btn btn-primary uploadbutton" face="${facenumber}">Upload</button>
</div>
</div>
allow custom images
2020-05-07 08:27:28 +00:00
</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>
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
<div class="card-subtitle text-gray">${recommendedUploadStyle}</div>
allow custom images
2020-05-07 08:27:28 +00:00
</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>
Add option for 16 bit images
2020-05-07 09:20:09 +00:00
<div class="form-group">
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
<label class="form-switch">
<input type="checkbox" id="custom16bit">
<i class="form-icon"></i> 16 bit images (look better, slower, not recommended)
</label>
</div>
<div class="form-group">
<label class="form-switch">
<input type="checkbox" id="hideWidgets">
<i class="form-icon"></i> Hide Widgets (use a square image)
</label>
</div>
allow custom images
2020-05-07 08:27:28 +00:00
<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">
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
${Object.keys(defaultPositions).map(k=>`<option value="${k}">${defaultPositions[k]}</option>`).join("")}
allow custom images
2020-05-07 08:27:28 +00:00
</select>
</div>
</div>
<div class="card-footer">
<button id="customupload" class="btn btn-primary uploadbutton disabled" face="custom">Upload</button>
</div>
</div>
</div>
`;
Added image background clock
2020-05-06 10:03:04 +00:00
var btns = document.getElementsByClassName("uploadbutton");
for (var i=0;i<btns.length;i++) {
// When the 'upload' button is clicked...
btns[i].addEventListener("click", function(btn) {
// build app text
var facenumber = btn.target.getAttribute("face");
allow custom images
2020-05-07 08:27:28 +00:00
var face;
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
var hideWidgets = true;
allow custom images
2020-05-07 08:27:28 +00:00
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;
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
hideWidgets = document.getElementById('hideWidgets').checked;
allow custom images
2020-05-07 08:27:28 +00:00
face = {
x : pos[0],
y : pos[1],
imgclock: Make imgclock text area wider This prevents imgclock from cutting off the date in locales with long date formats such as "Wednesday, September 10, 2020". Also adjusts the position and alignment of the date when necessary to prevent it from flowing off the edge of the screen.
2020-05-12 00:58:31 +00:00
align: pos[2],
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
bpp : document.getElementById('custom16bit').checked ? 16 : defaultBPP,
allow custom images
2020-05-07 08:27:28 +00:00
col : col
};
} else {
face = faces[facenumber];
}
Added image background clock
2020-05-06 10:03:04 +00:00
var faceInfo = {
bpp : face.bpp,
x : face.x,
imgclock: Add configurable color - and 'this is fine.'
2020-05-06 12:53:22 +00:00
y : face.y,
imgclock: Make imgclock text area wider This prevents imgclock from cutting off the date in locales with long date formats such as "Wednesday, September 10, 2020". Also adjusts the position and alignment of the date when necessary to prevent it from flowing off the edge of the screen.
2020-05-12 00:58:31 +00:00
align : face.align,
imgclock 0.11: Allow fullscreen clock faces with hidden widgets
2024-01-02 15:05:46 +00:00
col : face.col,
hideWidgets : hideWidgets
Added image background clock
2020-05-06 10:03:04 +00:00
};
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
var imgMode = faceInfo.bpp==16 ? "rgb565" : defaultImageMode;
Added image background clock
2020-05-06 10:03:04 +00:00
var img = document.querySelector(`img[face='${facenumber}']`);
Add option for 16 bit images
2020-05-07 09:20:09 +00:00
var imgString = imageconverter.imagetoString(img, {mode:imgMode, output:"raw", compression:false});
Added image background clock
2020-05-06 10:03:04 +00:00
// send finished app
sendCustomizedApp({
storage:[
{name:"imgclock.face.img", content:imgString},
{name:"imgclock.face.json", content:JSON.stringify(faceInfo)},
]
});
});
}
allow custom images
2020-05-07 08:27:28 +00:00
// 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]);
}
}
custom image clock for bangle.js 2
2022-07-28 14:15:06 +00:00
}
Added image background clock
2020-05-06 10:03:04 +00:00
</script>
</body>
</html>