mirror of https://github.com/espruino/BangleApps
66 lines
2.1 KiB
HTML
66 lines
2.1 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="../css/spectre.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
<p>Enter a URL: <input type="text" id="url" value="http://espruino.com"></p>
|
|
<p>Try your QR Code: <div id="qrcode"></div></p>
|
|
<p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
|
|
|
|
|
|
<script src="../lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->
|
|
<script src="https://espruino.github.io/EspruinoWebTools/heatshrink.js"></script>
|
|
<script src="https://espruino.github.io/EspruinoWebTools/imageconverter.js"></script>
|
|
|
|
<script>
|
|
|
|
var qrcode = new QRCode("qrcode", {
|
|
text: document.getElementById("url").value,
|
|
width: 200,
|
|
height: 200,
|
|
colorDark : "#000000",
|
|
colorLight : "#ffffff",
|
|
});
|
|
|
|
document.getElementById("url").addEventListener("change", function() {
|
|
qrcode.clear(); // clear the code.
|
|
qrcode.makeCode(document.getElementById("url").value); // make another code.
|
|
});
|
|
document.getElementById("upload").addEventListener("click", function() {
|
|
var url = document.getElementById("url").value;
|
|
var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});
|
|
var app = `var img = ${img};
|
|
var url = ${JSON.stringify(url)};
|
|
g.setColor(1,1,1);
|
|
g.fillRect(0,0,239,239);
|
|
g.drawImage(img,20,20);
|
|
g.setFontAlign(0,0);
|
|
g.setFont("6x8");
|
|
g.setColor(0,0,0);
|
|
g.drawString(url,120,230);
|
|
g.setColor(1,1,1);
|
|
`;
|
|
console.log(app);
|
|
var json = JSON.stringify({
|
|
name:"QR Code",
|
|
icon:"*qrcode",
|
|
src:"-qrcode"
|
|
});
|
|
var icon = `require("heatshrink").decompress(atob("mEwgP/AEX8gE8nkAn4FSngCWF6xfYDgIABHAQFPDQXD4YgDApxNDMooFOAQIdDAqIvWfcYA="))`;
|
|
|
|
window.postMessage({
|
|
id : "qrcode",
|
|
|
|
storage:[
|
|
{name:"-qrcode", content:app},
|
|
{name:"+qrcode", content:json},
|
|
{name:"*qrcode", content:icon, evaluate:true},
|
|
]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|