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-05-11 11:10:00 +00:00
|
|
|
<input type="radio" id="useUrl" name="useURL"/>
|
|
|
|
|
<label for="useURL">Use URL</label>
|
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>
|
2020-05-11 11:10:00 +00:00
|
|
|
<hr>
|
|
|
|
|
<input type="radiox" id="useWIFI" name="useWIFI"/>
|
|
|
|
|
<label for="useWIFI">Use WIFI</label>
|
|
|
|
|
<p>Enter Wifi name: <input type="text" id="ssid" class="form-input" value=""></p>
|
|
|
|
|
<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 10:43:25 +00:00
|
|
|
<label for="hidden">Hidden</label>
|
|
|
|
|
</div>
|
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>
|
|
|
|
|
|
2020-02-10 13:49:36 +00:00
|
|
|
<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/ -->
|
2020-05-07 09:04:24 +00:00
|
|
|
<script src="../../lib/heatshrink.js"></script>
|
|
|
|
|
<script src="../../lib/imageconverter.js"></script>
|
2019-11-06 17:25:02 +00:00
|
|
|
|
|
|
|
|
<script>
|
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(){
|
|
|
|
|
qrcode.clear(); // clear the code.
|
|
|
|
|
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);
|
|
|
|
|
qrcode.makeCode(wifiString);
|
|
|
|
|
}else{
|
|
|
|
|
qrcode.makeCode(document.getElementById("url").value);
|
|
|
|
|
}
|
2020-05-11 10:43:25 +00:00
|
|
|
}
|
|
|
|
|
var qrcode = new QRCode("qrcode", {
|
|
|
|
|
text: document.getElementById("url").value,
|
|
|
|
|
width: 200,
|
|
|
|
|
height: 200,
|
|
|
|
|
colorDark : "#000000",
|
|
|
|
|
colorLight : "#ffffff",
|
|
|
|
|
});
|
2019-11-06 17:25:02 +00:00
|
|
|
|
2020-05-11 11:10:00 +00:00
|
|
|
document.getElementById("url").addEventListener("change", refreshQRCode});
|
|
|
|
|
document.getElementById("ssid").addEventListener("change",refreshQRCode);
|
|
|
|
|
document.getElementById("password").addEventListener("change",refreshQRCode);
|
|
|
|
|
document.getElementById("encryption").addEventListener("change",refreshQRCode);
|
|
|
|
|
document.getElementById("hidden").addEventListener("change",refreshQRCode);
|
2019-11-06 17:25:02 +00:00
|
|
|
document.getElementById("upload").addEventListener("click", function() {
|
2020-05-11 11:10:00 +00:00
|
|
|
var content = document.getElementById("url").value;
|
|
|
|
|
if(document.getElementById("useWIFI").checked){
|
|
|
|
|
content = document.getElementById("ssid").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};
|
2020-05-11 11:10:00 +00:00
|
|
|
var content = ${JSON.stringify(content)};
|
2019-11-06 17:25:02 +00:00
|
|
|
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);
|
2020-05-11 11:10:00 +00:00
|
|
|
g.drawString(content,120,230);
|
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-02-28 11:44:25 +00:00
|
|
|
{name:"qrcode.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>
|
