Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #405 from v1nc/patch-2 

Add wifi QR code generation
master
Gordon Williams 2020-05-11 13:50:22 +01:00 committed by GitHub
parent 2e709b4f83 58b0ce31b5
commit 3c92b64bde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 80 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps.json
View File

@ -552,7 +552,7 @@
{ "id": "qrcode",
"name": "Custom QR Code",
"icon": "app.png",
"version":"0.01",
"version":"0.02",
"description": "Use this to upload a customised QR code to Bangle.js",
"tags": "qrcode",
"custom": "custom.html",

2
apps/qrcode/ChangeLog Normal file
View File

@ -0,0 +1,2 @@
0.01: New App!
0.02: Add posibillity to generate Wifi code.

93
apps/qrcode/custom.html
View File

@ -3,8 +3,28 @@
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<p>Enter a URL: <input type="text" id="url" class="form-input" value="http://espruino.com"></p>
<input type="radio" id="useURL" name="mode" checked/>
<label for="useURL">Use URL:</label>
<input type="text" id="url" class="form-input" value="http://espruino.com">
<hr>
<input type="radio" id="useWIFI" name="mode"/>
<label for="useWIFI">Use Wifi Credentials:</label>
<input type="text" id="ssid" class="form-input" value="">
<p>Wifi password: <input type="password" id="password" class="form-input" value=""></p>
<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>
<input type="checkbox" id="hidden" name="hidden"/>
<label for="hidden">Wifi is hidden</label>
</div>
<p>Try your QR Code: <div id="qrcode"></div></p>
<p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
@ -14,31 +34,72 @@
<script src="../../lib/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() {
//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++) {
if(string[i].includes(to_escape)) {
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;
}
function refreshQRCode(){
qrcode.clear(); // clear the code.
qrcode.makeCode(document.getElementById("url").value); // make another 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);
}
}
var qrcode = new QRCode("qrcode", {
text: document.getElementById("url").value,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
});
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);
document.getElementById("useURL").addEventListener("change",refreshQRCode);
document.getElementById("useWIFI").addEventListener("change",refreshQRCode);
document.getElementById("upload").addEventListener("click", function() {
var url = document.getElementById("url").value;
var content = document.getElementById("url").value;
if(document.getElementById("useWIFI").checked){
content = document.getElementById("ssid").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)};
var content = ${JSON.stringify(content)};
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.drawString(content,120,230);
g.setColor(1,1,1);
`;
sendCustomizedApp({