BangleApps/apps/mywelcome/custom.html

136 lines
8.1 KiB
HTML
Raw Normal View History

<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
2021-11-21 15:49:25 +00:00
</head>
<body>
<div class="form-group">
<p>Style: <select class="form-select" id="style">
<option>Christmas</option>
<option>Birthday</option>
</select>
</div></p>
<p>Line 1: <input type="text" id="line1" class="form-input" value="Merry Christmas"></p>
<p>Line 2: <input type="text" id="line2" class="form-input" value="Someone"></p>
<p>Line 3 (smaller): <input type="text" id="line3" class="form-input" value="Love from"></p>
<p>Line 4 (smaller): <input type="text" id="line4" class="form-input" value="Espruino Team"></p>
</div>
<p><button id="try" class="btn">Try in Emulator</button></p>
<p><button id="upload" class="btn btn-primary">Upload</button></p>
<p>To turn the Bangle off so the Welcome screen runs at startup go to <code>Settings -> Apps -> My Welcome</code> and choose <code>Turn off & run next</code></p>
2021-11-21 15:49:25 +00:00
<script src="../../core/lib/customize.js"></script>
<script>
2021-11-21 15:49:25 +00:00
function getApp() {
// get the text to add
var line1 = document.getElementById("line1").value;
var line2 = document.getElementById("line2").value;
var line3 = document.getElementById("line3").value;
var line4 = document.getElementById("line4").value;
var style = document.getElementById("style").value;
2021-12-06 16:11:01 +00:00
2021-11-21 15:49:25 +00:00
// build the app's text using a templated String
if (style=="Birthday") return `(function() {
var ib = require("heatshrink").decompress(atob("jk0ggGDhOZAAWQCYwMEBxAMFAAIaHyc/+c5DgwMC/84Dg4aCBgwcDBoOf+Y4GBoQEBn4zCI44DBDQ4NEyf4BpgoIBoefxINMBhApEBrQAKBrrrGWpANZHBT7FBpYqIFAYcJBggNOFQwoFDgwMHBwoMIBwYMKBrkykANLmcwBu0zBrMDBv4AFN5gA/ADY"));
var ir = require("heatshrink").decompress(atob("jk0ggGDhvdAAXQCYwMEBxAMFAAIaH6c/+c9DgwMC/8zDg4aC/4YCHIwNB7/zHAwNCAgM/DQwqDAYIaHBonT/oNMFBAND74NNBhApEBrQAKBrrrGWpANZHBT7FBpYqIFAYcJBgkA5oMF7gNFFQwoFDgwMHHIoMIAAPM5gMKBrk0oANLmcwBu0zBrMDBv4AFN5gA/ADYA="));
var ig = require("heatshrink").decompress(atob("jk0ggGDg93AAVwCYwMEBxAMFAAIaHuc/+c3DgwMC/8yDg4aC/4YCHIwNBv/zHAwNCAgM/DQwqDAYIaHBolz+4NMFBANDv8nBpgMIFIgNaABQNddYy1IBrI4KfYoNLFRAoDDhIMEgHnBgt+BooqGFAoqGBg4OFBhAODBhQNcmUgBpczmAN2mYNZgYN/AApvMAH4Ab"));
var igift = require("heatshrink").decompress(atob("q1QxH+ADOi0QbZ5nMHDQAbKgIACKa4ACKnJWVKghW0KgxWTKgxWyKhBWRKhBWwKhRWPKhRWuKhhWNKhhWtKpxWKKhys8KxBU8Ky5U+KypU/KyhU/KyhU/KynGKn5WTKn5WUKmHCADpJJE7uYABZUfKuuYKv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/AAv+Kv5VT/wADyIAaKpIlbABZSEKv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/Kv5V/ADNtKv6rdKzZVwKhAABy5V/Khw"));
2021-12-06 16:11:01 +00:00
var W=g.getWidth(),H=g.getHeight();
var titleFont = g.getFonts().includes("12x20") ? "12x20" : "6x8:2";
2021-11-21 15:49:25 +00:00
var blns = [];
function updateFlake(f) {
f.im = [ir,ig,ib][Math.round(Math.random()*100)%3];
f.s = 0.4+Math.random()*0.5;
}
for (var i=0;i<6;i++) {
var f = {
y:Math.random()*H,x:(0.5+(i<3?i:i+5))*W/11,
v:0.5+Math.random(),r:0,
t:(0.5+Math.random())*0.15,
};
updateFlake(f);
blns.push(f);
}
function draw() {
blns.forEach(f=>{
f.y-=f.v;f.r+=f.t;
if (f.y<-22) {
f.y=H+22;
updateFlake(f);
2020-10-16 10:42:33 +00:00
}
2021-11-21 15:49:25 +00:00
g.drawImage(f.im,f.x,f.y,{rotate:Math.sin(f.r)/2,scale:f.s});
});
var x = W/2, y = H/2;
g.drawImage(igift,x-43,y-80);
2021-12-06 16:11:01 +00:00
g.setFont(titleFont).setFontAlign(0,0);
2021-11-21 15:49:25 +00:00
g.drawString(${JSON.stringify(line1)},x,y+=20);
g.drawString(${JSON.stringify(line2)},x,y+=20);
g.setFont("6x8");
g.drawString(${JSON.stringify(line3)},x,y+=20);
g.drawString(${JSON.stringify(line4)},x,y+=10);
g.flip();
}
2021-12-06 16:11:01 +00:00
g.clear(1).setBgColor(0).setColor(-1).clearRect(0,0,W,H);
2021-11-21 15:49:25 +00:00
setInterval(draw,50);
})()`;
// if (style=="Christmas")
return `(function() {
var isnow = require("heatshrink").decompress(atob("jEagQWTgfAAocf+gFDh4FDiARBggVB3AFBl3Agf8jfkn/AgX/v/9/+Agfv/2//YrBgfwh4wCgfghYFJCIYdFFIw1EIIpNFL44FFOIoAP"));
var itree = require("heatshrink").decompress(atob("mtWwcBkmSpICFnAIHARV2CKFJk1sEyNO7cSEyFt22EEx2d23bCgPYChsnCIIUBxI7OEyKJCEyMk9o7BO6A7CEx+TEwKzQndhwxiQuMpklxHaGGjBiQkoDBEx+So0YsOZEyNJ//JJp9hy/+KBs5suWpO5kmEEx/bjVJwJNMEwNN0uWrI7NrN3/8ZsuRMRmW7d7/+CrNkExdP/lhw+ekOWggmLz/8hMpk0IkDIMn15O4QCCxIUKsmZkGCEwVYWBYjDAQWDzgUJqxxBAwdZnP/HZOVywmEw96vDsLEYLIBrM30mQKB+XvNgTxWUyUJOgMJn/+pLvKJoUIsGDj/5wwmJ8mSpCeBhM3k+RkgmJnBNDycYpMGjBiJpwDBEwP8wVZkuWogUHkomCsnf/wFCR4LFKydttPkDYKhBsTFJr9140SoImLpMpm3n/tky0JZAVkEw+f4dZtPmd4YUBrAmHz/1y2SomGd4OQjMgEw+Tk+YEYUhy0ZsAFBMQ8mpMChEgwEJsECgDLBprvGpxKDBwIXBAoNg4zIHdgcIgEACgOCv9keIIUFdgYCEs//zA7FyYDCHAQCDt1/gJNFrAmIm/GyVhxLXFrIbEhAwBtMl0zIFktlEw0Z/IFDZAq/ByxXE73/8oyBso7EybjBEweHttp/4FBCgJ3EnNkdIQpBm3WrVJCIMly1EEwkYCIMYsnfrDsBzAICsOBEwVJsmSjMgyaYB61IEYNJsoPB//JCgNGcYPXtu1w2ePoMZQAef/xQCy3btv/8UJlMkrLFBeoImB3MkHYX+OgOf8LIHsObjVIEwOZ/sZkMkSYLsDQgf9PQLIBqV5DoNJEw9g4/8UINY8uUzLFGAQdN5fkVQORnIRBYogCEs3WiVBBwLsEAQYmCkuTvtl0nZd4TFBCIQmFjux/6hBd4Y7CFI0m7dT/LsB8uWGINWooRFunf/o4ByA4BkqJBkniKANkp1ZtrLBt/+rNpk1ZsR/EKANEAQMf+OWj15BAdESgopBktln+xHAKnBOIOUVJFJrVJh1ZsBEBOIIRIAQUwyGCgAOKCg1hgIROAQNEiECEx8k8OGgg7QfYMJEx+Td4J0NAQdJ0hiQp0YTwIUP4MmyBiQjFhwJiQgmaoA7QsOGiA7PpkStLaIoAA="));
2021-11-21 15:49:25 +00:00
var W=g.getWidth(),H=g.getHeight();
2021-12-06 16:11:01 +00:00
var titleFont = g.getFonts().includes("12x20") ? "12x20" : "6x8:2";
2021-11-21 15:49:25 +00:00
var flakes = [];
for (var i=0;i<10;i++) {
var f = {
y:Math.random()*H,
x:(0.5+(i<5?i:i+5))*W/15,
v:0.7+Math.random(),
s:0.6+Math.random(),
r:0,
t:0.1*(Math.random()-0.5)
};
f.v = f.s * (1+Math.random());
flakes.push(f);
}
function draw() {
flakes.forEach(f=>{
f.y+=f.v;f.r+=f.t;
if (f.y>H+16) f.y=-8;
g.drawImage(isnow,f.x,f.y,{rotate:f.r,scale:f.s});
});
var x = W/2, y = H/2;
g.drawImage(itree,x-27,y-80);
2021-12-06 16:11:01 +00:00
g.setFont(titleFont).setFontAlign(0,0);
2021-11-21 15:49:25 +00:00
g.drawString(${JSON.stringify(line1)},x,y+=20);
g.drawString(${JSON.stringify(line2)},x,y+=20);
g.setFont("6x8");
g.drawString(${JSON.stringify(line3)},x,y+=20);
g.drawString(${JSON.stringify(line4)},x,y+=10);
g.flip();
}
2021-12-06 16:11:01 +00:00
g.clear(1).setBgColor(0).setColor(-1).clearRect(0,0,W,H);
2021-11-21 15:49:25 +00:00
setInterval(draw,50);
})();
`;
// or an 8 bit tree, but 3 bit (above) renders better on Bangle.js 2
// var itree = require("heatshrink").decompress(atob("mtWxH+ADHHDTI0aGuXH5vNGmhqvTYIzBGtoxF6fTG4g4oGgQyBAAZssGoI0Ga1g1FGdo01ZgIAEGmHHNoLSuAAN/rdb0YFBGlgCBGYIABA4YArGYY1CGn4znAAM6GeVd5PQ5Iyurc/vQ0oGZFAn+d4XC3d5GddiGYIEBy+7zoEBGlFhoEcsQ9GT08+oFk1mkGdaVBMgNArnJ6/KzswGs/J6GlrlbqtbvPC5PCy8wGohniMIPJvIpCqmX3e7vI0BqhqlMIY0DqhtBqoEBa0xgBMIIoEqoABGQwzfsIhBv4qHABM50vQGjg1CGaN66DoBGt1ioGd5LoBGjo1PGYNhvLoCa7wnBqgvGA4YzCAgN5GUAsCqoDBmAHCAYU/wPQ0oSDGcBiDqkwAYcxoFd5PX6GdGjrIIqtUAAc3jk5vPC4fCy5pef5I2BTQMcnAHBy+7y95T0oADnFk1ekBpI2aGRUin7NGAA9hsIzVsIgHTAKZBZoPJ5LNDGhBpXGolcwOsrtcA4TNB3bNDGb/+sVin9AoGe6HX5InEvN/TkP+5XQwM/sRsBzqWB4QuKGjvC6HQ4QdDvKWBZYMwmAuHmFUCYNbqibX3fD5O7qolEZQQ0FBwgKDqgJBGiphEDwNUEgJbBFIQqCAgYOCB4IzCnE6GyhYFGoQnDABYzGAAQ1UAAo2NBoQSBnOB0t/Gjo2EABIPCoGe6HX4QzTGRIAEqtVF4QEBBQc4oE4y/J5PCvIxeABk/oADBvO73eXTyAyZMwM/Awd5vIOFGslAr2Av4PLNcU/jmA6HX5I1KasFcn8dTIOd5PJ4SZGGiNhAAIyNn0ckU+ZYe7AAJpJEYJnNGZk+n9kw9cBAcwGoN5aZg1JJJQABm8/oEjoDKC5ALCrUwqh/NrvQ6HDGp04n9doEdoE/sQJBZQZhCqgABGZk6zw0K/1dnVAoNAFwOlCYL1FubJBy4GCGh1AnOX4XC3YzHFYOeCgdV5PQ5OdD4rKBqqYNGYlbv+X3edGY3CGgKMDAAO7JAJgDAClcr2BEYgADaIZ0DL4uXGbDuB6HX5I1GsP+sNhOgWXIhBmWd4Od5PK4TwFGIJoBAYI2BAD0/jlcQoO7AAJaEGQQADGr0/sjNEvOdAoZmDGgw2ZsVAkeAZpQACGZI2VsU/kVGn1bZoPJZogpGGhA4GfRYwBoGC1mlBQbNFFoo0JNxAGCEod/wM6oFAn9iv/J6/Kzo1Ey9/MZQAKCg4GCFgTDEvPCSwI0BC5I0RN4ocEYYPQ5OdHgeXSwTFKGaJyKFYPC3f+MIdbpzFLAD4zB/1OqtbqtOGgYArGAIADGl9UAAI0wGQN5GoQ0vvIABGoI0uGYQABqo0zNOg0uaQY0/GllOGn40//w="))
2021-11-21 15:49:25 +00:00
}
// when 'try' is clicked, load the emulator...
document.getElementById("try").addEventListener("click", function() {
window.open("https://www.espruino.com/ide/emulator.html?code="+encodeURIComponent(getApp())+"&upload");
});
2021-11-21 15:49:25 +00:00
// When the 'upload' button is clicked...
document.getElementById("upload").addEventListener("click", function() {
2021-11-21 15:49:25 +00:00
// send finished app (in addition to contents of app.json)
sendCustomizedApp({
storage:[
2021-11-21 15:49:25 +00:00
{name:"mywelcome.custom.js", url:"app.js", content:getApp()},
]
});
});
2021-11-21 15:49:25 +00:00
</script>
</body>
</html>