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 >
2021-12-07 18:49:10 +00:00
< input type = "radio" id = "useTEXT" name = "mode" checked / >
< label for = "useTEXT" > Use text (for example an URL):< / label >
< input type = "text" id = "text" class = "form-input" value = "www.espruino.com" >
2020-05-11 11:10:00 +00:00
< hr >
2021-12-07 18:49:10 +00:00
2020-05-11 11:18:50 +00:00
< input type = "radio" id = "useWIFI" name = "mode" / >
< label for = "useWIFI" > Use Wifi Credentials:< / label >
2020-05-11 11:15:09 +00:00
< input type = "text" id = "ssid" class = "form-input" value = "" >
2020-05-11 11:10:00 +00:00
< p > Wifi password: < input type = "password" id = "password" class = "form-input" value = "" > < / p >
2020-05-11 10:43:25 +00:00
< div class = "form-group" >
< label for = "encryption" class = "control-label" > Encryption< / label >
< div class = "input-group" >
< select name = "encryption" id = "encryption" class = "form-control" >
< option value = "WPA" > WPA/WPA2< / option >
< option value = "WEP" > WEP< / option >
< option value = "nopass" > None< / option >
< / select >
< / div >
< / div >
< div >
2020-05-11 11:10:00 +00:00
< input type = "checkbox" id = "hidden" name = "hidden" / >
2020-05-11 11:15:09 +00:00
< label for = "hidden" > Wifi is hidden< / label >
2020-05-11 10:43:25 +00:00
< / div >
2021-12-07 18:16:41 +00:00
< hr >
< p > Additional options:< / p >
2021-12-07 22:08:20 +00:00
< input type = "checkbox" id = "preventIntegerScaling" name = "preventIntegerScaling" / >
< label for = "preventIntegerScaling" > Prevent integer scaling< / label > < / br >
2021-12-07 20:21:24 +00:00
< input type = "checkbox" id = "boostBacklight" name = "boostBacklight" / >
< label for = "boostBacklight" > Set backlight to max. while QR is shown< / label > < / br >
< input type = "checkbox" id = "stayOn" name = "stayOn" / >
< label for = "stayOn" > Do not lock or dim while showing QR< / label > < / br >
< input type = "checkbox" id = "hideDescription" name = "hideDescription" / >
2021-12-07 18:16:41 +00:00
< label for = "hideDescription" > Hide Description< / label > < / br >
< label for = "description" > Replace default description:< / label >
< input type = "text" id = "description" class = "form-input" value = "" >
2021-12-07 21:22:00 +00:00
< label for = "correction" > Error correction level:< / label >
< div class = "input-group" >
< select name = "correction" id = "correction" class = "form-control" >
< option value = "1" > L - Low - 7%< / option >
< option value = "0" > M - Medium - 15%< / option >
< option value = "3" > Q - Quartile - 25%< / option >
< option value = "2" > H - High - 30%< / option >
< / select >
< / div >
2021-12-07 18:16:41 +00:00
< hr >
2021-12-07 21:54:36 +00:00
< p id = "errors" style = "color:Tomato;" > < / p >
2019-11-06 17:25:02 +00:00
< p > Try your QR Code: < div id = "qrcode" > < / div > < / p >
2021-12-07 21:54:36 +00:00
2019-11-06 17:25:02 +00:00
< p > Click < button id = "upload" class = "btn btn-primary" > Upload< / button > < / p >
2020-08-24 10:59:52 +00:00
< script src = "../../core/lib/customize.js" > < / script >
< script src = "../../core/lib/qrcode.min.js" > < / script > <!-- https://davidshimjs.github.io/qrcodejs/ -->
< script src = "../../core/lib/heatshrink.js" > < / script >
< script src = "../../core/lib/imageconverter.js" > < / script >
2019-11-06 17:25:02 +00:00
< script >
2021-12-07 18:45:12 +00:00
var targetSize = 200;
2021-09-02 10:51:17 +00:00
function onInit(device) {
if (device & & device.info & & device.info.g) {
2021-12-07 18:45:12 +00:00
border = 4;
targetSize = Math.min(device.info.g.width - border, device.info.g.height - border);
2021-09-02 10:51:17 +00:00
}
qrcode = new QRCode("qrcode", {
2021-12-07 18:49:10 +00:00
text: document.getElementById("text").value,
2021-09-02 10:51:17 +00:00
colorDark : "#000000",
colorLight : "#ffffff",
});
2021-12-07 18:45:12 +00:00
refreshQRCode();
2021-09-02 10:51:17 +00:00
}
2020-05-11 10:43:25 +00:00
//https://github.com/evgeni/qifi/blob/gh-pages/index.html#L168
function escapeString (string) {
var to_escape = ['\\', ';', ',', ':', '"'];
var hex_only = /^[0-9a-f]+$/i;
var output = "";
for (var i=0; i< string.length ; i + + ) {
2020-05-11 10:51:24 +00:00
if(string[i].includes(to_escape)) {
2020-05-11 10:43:25 +00:00
output += '\\'+string[i];
}
else {
output += string[i];
}
}
return output;
}
function generateWifiString(ssid, password, hidden,encryption){
//https://github.com/evgeni/qifi/blob/gh-pages/index.html#L198
var qrstring = 'WIFI:S:'+escapeString(ssid)+';T:'+encryption+';P:'+escapeString(password)+';';
if (hidden) {
qrstring += 'H:true';
}
return qrstring;
}
2020-05-11 11:10:00 +00:00
function refreshQRCode(){
2021-12-07 21:54:36 +00:00
document.getElementById("errors").innerText="";
2020-05-11 11:10:00 +00:00
qrcode.clear(); // clear the code.
2021-12-07 18:45:12 +00:00
var qrText = "";
2020-05-11 11:10:00 +00:00
if(document.getElementById("useWIFI").checked){
const ssid = document.getElementById("ssid").value;
const password = document.getElementById("password").value;
const encryption = document.getElementById("encryption").value;
const hidden = document.getElementById("hidden").checked;
const wifiString = generateWifiString(ssid, password, hidden, encryption);
2021-12-07 18:45:12 +00:00
qrText= wifiString;
2021-12-07 18:49:10 +00:00
} else {
qrText = document.getElementById("text").value;
2020-05-11 11:10:00 +00:00
}
2021-12-07 18:45:12 +00:00
qrcode._htOption.text = qrText;
2021-12-07 21:22:00 +00:00
qrcode._htOption.correctLevel = parseInt(document.getElementById("correction").value);
2021-12-07 21:54:36 +00:00
try {
qrcode.makeCode(qrText);
} catch (error) {
document.getElementById("errors").innerText="Error: QR could not be created.";
console.error(error);
}
2021-12-07 18:45:12 +00:00
2021-12-07 22:08:20 +00:00
var finalSizeQr=targetSize;
var finalSizeCanvas=targetSize;
2021-12-07 18:45:12 +00:00
2021-12-07 22:08:20 +00:00
var integerScale = Math.max(Math.floor(targetSize / (qrcode._oQRCode.moduleCount + 1)),1);
2021-12-07 21:54:36 +00:00
if (integerScale == 1) document.getElementById("errors").innerText = "Warning, QR will probably be too small to properly scan. Try less data or less error correction.";
2021-12-07 22:08:20 +00:00
if (!document.getElementById("preventIntegerScaling").checked){
finalSizeQr = integerScale * (qrcode._oQRCode.moduleCount + 1);
finalSizeCanvas = finalSizeQr - 1;
}
2021-12-07 18:45:12 +00:00
qrcode._htOption.width = finalSizeQr;
qrcode._htOption.height = finalSizeQr;
document.getElementsByTagName("canvas")[0].width = finalSizeCanvas;
document.getElementsByTagName("canvas")[0].height = finalSizeCanvas;
2021-12-07 21:54:36 +00:00
try {
qrcode.makeCode(qrText);
} catch (error) {
document.getElementById("errors").innerText="Error: QR could not be created.";
console.error(error);
}
2020-05-11 10:43:25 +00:00
}
2021-09-02 10:51:17 +00:00
var qrcode;
2019-11-06 17:25:02 +00:00
2020-05-11 11:10:00 +00:00
document.getElementById("ssid").addEventListener("change",refreshQRCode);
2021-12-07 18:49:10 +00:00
document.getElementById("text").addEventListener("change",refreshQRCode);
2020-05-11 11:10:00 +00:00
document.getElementById("password").addEventListener("change",refreshQRCode);
document.getElementById("encryption").addEventListener("change",refreshQRCode);
document.getElementById("hidden").addEventListener("change",refreshQRCode);
2021-12-07 18:49:10 +00:00
document.getElementById("useTEXT").addEventListener("change",refreshQRCode);
2020-05-11 11:52:26 +00:00
document.getElementById("useWIFI").addEventListener("change",refreshQRCode);
2021-12-07 22:08:20 +00:00
document.getElementById("preventIntegerScaling").addEventListener("change",refreshQRCode);
2021-12-07 21:22:00 +00:00
document.getElementById("correction").addEventListener("change",refreshQRCode);
2019-11-06 17:25:02 +00:00
document.getElementById("upload").addEventListener("click", function() {
2021-12-07 18:49:10 +00:00
var content = document.getElementById("text").value;
2020-05-11 11:10:00 +00:00
if(document.getElementById("useWIFI").checked){
content = document.getElementById("ssid").value
}
2021-12-07 18:16:41 +00:00
if(!(document.getElementById("description").value === "")){
content = document.getElementById("description").value;
}
2019-11-06 17:25:02 +00:00
var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});
var app = `var img = ${img};
2021-12-07 20:21:24 +00:00
${document.getElementById("boostBacklight").checked ? 'Bangle.setLCDBrightness(1);' : ''}
${document.getElementById("stayOn").checked ? 'Bangle.setLCDTimeout(0);' : ''}
${document.getElementById("hideDescription").checked ? '' : `var content = ${JSON.stringify(content)};`}
2021-09-02 10:51:17 +00:00
g.clear(1).setColor(1,1,1).setBgColor(0,0,0);
g.fillRect(0,0,g.getWidth()-1,g.getHeight()-1);
g.drawImage(img,(g.getWidth()-img[0])/2,(g.getHeight()-img[1])/2);
2021-12-07 18:16:41 +00:00
${ document.getElementById("hideDescription").checked ? '' : `g.setFontAlign(0,0).setFont("6x8").setColor(0,0,0);
g.drawString(content,g.getWidth()/2,g.getHeight()-(g.getHeight()-img[1])/4));
`}
2019-11-06 17:25:02 +00:00
g.setColor(1,1,1);
`;
2020-02-10 13:49:36 +00:00
sendCustomizedApp({
2019-11-06 17:25:02 +00:00
storage:[
2020-09-01 13:43:54 +00:00
{name:"qrcode.app.js", url:"app.js", content:app},
2019-11-06 17:25:02 +00:00
]
});
2020-02-10 13:49:36 +00:00
2019-11-06 17:25:02 +00:00
});
< / script >
< / body >
< / html >
