Added patriot clock - show your country's flag!
Gordon Williams
|
|
@ -0,0 +1 @@
|
||||||
|
0.01: New App!
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
require("heatshrink").decompress(atob("mEwwJC/AH4A/AH4AgA=="))
|
||||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,71 @@
|
||||||
|
Graphics.prototype.setFontAudiowide = function() {
|
||||||
|
// Actual height 33 (36 - 4)
|
||||||
|
return this.setFontCustom(
|
||||||
|
E.toString(require('heatshrink').decompress(atob('AB/wAgcB/AFVgFgHbkYAok4AogvEgYFEg4FEj4FEn4FE//gKQf/4AcD/4QDh/8Djf+DhN/T4YcFgYcKh4cEh68Eh4cDAoOAAocORYkMf1JxBIYcf/6PDn//MIYEB/5KBOIIABKwIFFO4V/UQMHEIMfFQMHAQP3AQJ3BDIKABh/ggf7ApHAg/5AonxAocPAokf8IFE4IFDn4FEv+BAokBAof/AofB/wFE/gFD4YFE4/4AohgBAoXPAonvMAIFD4AFCVgIFBQYX3wCGCR4T+CTYqtLX4rLC/zXIcYoAQQYIFiJoR9CArgAlToIpDRQIFDSwI7C4CiBApN/Apb1D4F+Av4Fd8H+Aof/AoaTB/gFIgaBBAoSrB+AFCgF/8AFDAESP/Av3wv0HZYYABYoYAB+AFGZYIAB8DLCAAPAZYQFBZUhHC/gFE/wFaAAN+Av4Fqv53EboYFdAFIvB4EBGofwAon4Aon8ApX+AofAAot+Av4Fev8DAojFDAo0/S4IFGAAMf//gV4mAAoUD/zYgFwP8AoRGB/4FCAgI1CgIFC4A5BAoRHBg4FCKYMH/l+n5fC+F+g5rC8F+PoYFFZf7XVw7XNAALXNTYLXCVoYAQF4IFZjAFEnAFELIZCBAojRDAoMfAol/AohrCAoJfBNYIFBNYOAAoUf/xBDv/8AoXBRAcP4aCDh/PDgSNCDgQFCHIIFDUoafFAoJ3EGYQFCDgYFBXgZuBGYQAba4pDEhzvE/4ABKoMBAogbBAAJKBg4EBw4FEX4Z9BgIFC8AFE4F+Av5HFKYhfFAoRxCO4qDFgF/AokATYgfCZwcD/zTdAAV/Z4RBCHIZNBJYI5D/gFFOJEP+DF/a7N+ZYQFG+F+g7XFRYIFFbobLBboajCAoTRCcYTiEUQYAdgYCBsACBMwJlCAqUHJYLxDAAMgHSQ'))),
|
||||||
|
46,
|
||||||
|
atob("CiAsESQjJSQkHyQkDA=="),
|
||||||
|
48|65536
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
{
|
||||||
|
|
||||||
|
let img = require("Storage").read("patriotclk.bg.img");
|
||||||
|
let options = require("Storage").readJSON("patriotclk.opts",1)||{};
|
||||||
|
|
||||||
|
// timeout used to update every minute
|
||||||
|
let drawTimeout;
|
||||||
|
|
||||||
|
// draw everything
|
||||||
|
let draw = function() {
|
||||||
|
var x = g.getWidth()/2;
|
||||||
|
var y;
|
||||||
|
if (options.bottomText)
|
||||||
|
y = g.getHeight() - 24;
|
||||||
|
else
|
||||||
|
y = 4+(g.getHeight())/2; // middle
|
||||||
|
g.reset();
|
||||||
|
g.drawImage(img,0,0);
|
||||||
|
// work out locale-friendly date/time
|
||||||
|
var date = new Date();
|
||||||
|
var timeStr = require("locale").time(date,1);
|
||||||
|
var dateStr = require("locale").date(date);
|
||||||
|
// draw time
|
||||||
|
g.setFontAlign(0,0).setFont("Audiowide");
|
||||||
|
// draw a shadow by shifting left/right/up/down
|
||||||
|
g.drawString(timeStr,x-6,y);
|
||||||
|
g.drawString(timeStr,x+6,y);
|
||||||
|
g.drawString(timeStr,x,y-6);
|
||||||
|
g.drawString(timeStr,x,y+6);
|
||||||
|
g.drawString(timeStr,x-4,y+4);
|
||||||
|
g.drawString(timeStr,x+4,y+4);
|
||||||
|
g.drawString(timeStr,x-4,y-4);
|
||||||
|
g.drawString(timeStr,x+4,y-4);
|
||||||
|
// finally draw in the foreground color
|
||||||
|
g.setColor(g.theme.bg).drawString(timeStr,x,y);
|
||||||
|
// draw date
|
||||||
|
//y += 35;
|
||||||
|
//g.setFontAlign(0,0).setFont("6x8").g.setColor(g.theme.fg);
|
||||||
|
//g.drawString(dateStr,x,y);
|
||||||
|
// queue draw in one minute
|
||||||
|
if (drawTimeout) clearTimeout(drawTimeout);
|
||||||
|
drawTimeout = setTimeout(function() {
|
||||||
|
drawTimeout = undefined;
|
||||||
|
draw();
|
||||||
|
}, 60000 - (Date.now() % 60000));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Clear the screen once, at startup
|
||||||
|
g.clear();
|
||||||
|
// draw immediately at first, queue update
|
||||||
|
draw();
|
||||||
|
// Show launcher when middle button pressed
|
||||||
|
Bangle.setUI({mode:"clock", remove:function() { //f ree memory
|
||||||
|
if (drawTimeout) clearTimeout(drawTimeout);
|
||||||
|
delete Graphics.prototype.setFontAudiowide;
|
||||||
|
require("widget_utils").cleanup();
|
||||||
|
}});
|
||||||
|
// Load widgets (make them swipeable)
|
||||||
|
Bangle.loadWidgets();
|
||||||
|
require("widget_utils").swipeOn();
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 446 B |
|
|
@ -0,0 +1,133 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||||
|
<style>
|
||||||
|
.flag {
|
||||||
|
width : 100px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#preview {
|
||||||
|
width : 176px;
|
||||||
|
height: 176px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Please choose your country's flag:</p>
|
||||||
|
<div id="flaglist"></div>
|
||||||
|
<p>Is your flag not here? Please <a href="https://github.com/espruino/BangleApps/tree/master/apps/patriotclk/img" target="_blank">add it here</a>! </p>
|
||||||
|
<div style="float:right">Preview:<br/><canvas width="176" height="176" id="preview"></canvas></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-switch">
|
||||||
|
<input type="checkbox" id="box_zoom">
|
||||||
|
<i class="form-icon"></i> Zoom
|
||||||
|
</label>
|
||||||
|
<label class="form-switch">
|
||||||
|
<input type="checkbox" id="box_textbottom">
|
||||||
|
<i class="form-icon"></i> Time at bottom
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Click <button id="upload" class="btn btn-primary disabled" style>Upload</button></p>
|
||||||
|
|
||||||
|
<img id="preview_overlay" src="app-preview.png" style="display:none">
|
||||||
|
<img id="preview_overlay_btm" src="app-preview-btm.png" style="display:none">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="../../core/lib/customize.js"></script>
|
||||||
|
<script src="../../webtools/imageconverter.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var FLAGS = `
|
||||||
|
icons8-australia-480.png
|
||||||
|
icons8-belgium-480.png
|
||||||
|
icons8-england-480.png
|
||||||
|
icons8-flag-of-europe-480.png
|
||||||
|
icons8-france-480.png
|
||||||
|
icons8-germany-480.png
|
||||||
|
icons8-great-britain-480.png
|
||||||
|
icons8-greece-480.png
|
||||||
|
icons8-hungary-480.png
|
||||||
|
icons8-italy-480.png
|
||||||
|
icons8-lgbt-flag-480.png
|
||||||
|
icons8-scotland-480.png
|
||||||
|
icons8-switzerland-480.png
|
||||||
|
icons8-ukraine-480.png
|
||||||
|
icons8-usa-480.png
|
||||||
|
icons8-wales-480.png
|
||||||
|
`.trim().split("\n").map(s=>s.trim());
|
||||||
|
// If we can't map a flag direct to 3 bit color, enable dithering
|
||||||
|
var DITHERED_FLAGS = `
|
||||||
|
icons8-lgbt-flag-480.png
|
||||||
|
icons8-ukraine-480.png
|
||||||
|
`.trim().split("\n").map(s=>s.trim());
|
||||||
|
|
||||||
|
var selectedImage;
|
||||||
|
var bgImageData;
|
||||||
|
var clockOptions = {
|
||||||
|
bottomText : false
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("flaglist").innerHTML =
|
||||||
|
FLAGS.map(f => `<img class="flag" src="img/${f}" data-file="${f}"/>`).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 imgFile = selectedImage.getAttribute("data-file");
|
||||||
|
var zoom = document.getElementById("box_zoom").checked;
|
||||||
|
clockOptions.bottomText = document.getElementById("box_textbottom").checked;
|
||||||
|
const canvas = document.getElementById("preview");
|
||||||
|
canvas.width = 176; // setting size clears canvas
|
||||||
|
canvas.height = 176;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
var y = 0;
|
||||||
|
if (clockOptions.bottomText)
|
||||||
|
y = -28;
|
||||||
|
if (zoom)
|
||||||
|
ctx.drawImage(selectedImage, 90, 90, 300, 300, 0, y, 176, 176);
|
||||||
|
else
|
||||||
|
ctx.drawImage(selectedImage, 20, 20, 440, 440, 0, y, 176, 176);
|
||||||
|
var options = {
|
||||||
|
mode:"3bit",
|
||||||
|
output:"raw",
|
||||||
|
compression:false,
|
||||||
|
updateCanvas:true,
|
||||||
|
transparent:false,
|
||||||
|
contrast:128
|
||||||
|
};
|
||||||
|
if (DITHERED_FLAGS.includes(imgFile))
|
||||||
|
options.diffusion = "bayer2";
|
||||||
|
bgImageData = imageconverter.canvastoString(canvas, options);
|
||||||
|
ctx.drawImage(document.getElementById(clockOptions.bottomText?"preview_overlay_btm":"preview_overlay"),0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// If options changed
|
||||||
|
document.getElementById("box_zoom").addEventListener("click", function() {
|
||||||
|
drawPreview();
|
||||||
|
});
|
||||||
|
document.getElementById("box_textbottom").addEventListener("click", function() {
|
||||||
|
drawPreview();
|
||||||
|
});
|
||||||
|
// When the 'upload' button is clicked...
|
||||||
|
document.getElementById("upload").addEventListener("click", function() {
|
||||||
|
// send finished app (in addition to contents of metadata.json)
|
||||||
|
if (bgImageData) sendCustomizedApp({
|
||||||
|
storage:[
|
||||||
|
{name:"patriotclk.bg.img", content:bgImageData},
|
||||||
|
{name:"patriotclk.opts", content:JSON.stringify(clockOptions)}, // we don't save as .json or we'd have a sanitycheck warning
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
Flags
|
||||||
|
------
|
||||||
|
|
||||||
|
These flags come from https://icons8.com/icon/set/flags/color and are 480x480px
|
||||||
|
|
||||||
|
If you want to add your own flag ensure it's in the same style and then also list the image file in custom.html in the root directory.
|
||||||
|
|
||||||
|
If your flag is listed in https://icons8.com/icon/set/flags/color and you can't download it in the right size, please file an issue and we'll download it with our account.
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
{ "id": "patriotclk",
|
||||||
|
"name": "Patriotic Clock",
|
||||||
|
"shortName":"Patriot",
|
||||||
|
"version":"0.01",
|
||||||
|
"description": "Show your Patriotism with your Country's flag as a clock face (configurable)",
|
||||||
|
"icon": "app.png",
|
||||||
|
"screenshots": [{"url":"screenshot.png"}],
|
||||||
|
"type": "clock",
|
||||||
|
"tags": "clock,flag",
|
||||||
|
"supports" : ["BANGLEJS2"],
|
||||||
|
"custom": "custom.html",
|
||||||
|
"storage": [
|
||||||
|
{"name":"patriotclk.app.js","url":"app.js"},
|
||||||
|
{"name":"patriotclk.bg.img"},
|
||||||
|
{"name":"patriotclk.opts"},
|
||||||
|
{"name":"patriotclk.img","url":"app-icon.js","evaluate":true}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |