BangleApps/apps/qrcode/custom.html

55 lines
1.7 KiB
HTML
Raw Normal View History

2019-11-06 17:25:02 +00:00
<html>
<head>
2019-11-20 15:54:57 +00:00
<link rel="stylesheet" href="../../css/spectre.min.css">
2019-11-06 17:25:02 +00:00
</head>
<body>
2020-03-04 16:41:10 +00:00
<p>Enter a URL: <input type="text" id="url" class="form-input" value="http://espruino.com"></p>
2019-11-06 17:25:02 +00:00
<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/customize.js"></script>
2019-11-20 15:54:57 +00:00
<script src="../../lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->
<script src="../../lib/heatshrink.js"></script>
<script src="../../lib/imageconverter.js"></script>
2019-11-06 17:25:02 +00:00
<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);
`;
sendCustomizedApp({
2019-11-06 17:25:02 +00:00
storage:[
{name:"qrcode.app.js", content:app},
2019-11-06 17:25:02 +00:00
]
});
2019-11-06 17:25:02 +00:00
});
</script>
</body>
</html>