bryan
/
BangleApps_old
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1022 from halemmerich/master 

Integer scaling and additional configuration options for the Custom QR Code app
master
Gordon Williams 2021-12-08 09:58:48 +00:00 committed by GitHub
parent fcf31f2f4c 1d2f3c049d
commit 72aa32f9fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 87 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps.json
View File

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

1
apps/qrcode/ChangeLog
View File

@ -1,2 +1,3 @@
0.01: New App! 0.01: New App!
0.02: Add posibillity to generate Wifi code. 0.02: Add posibillity to generate Wifi code.
0.03: Forces integer scaling and adds more configuration (error correction, description, display)

103
apps/qrcode/custom.html
View File

@ -3,10 +3,11 @@
<link rel="stylesheet" href="../../css/spectre.min.css"> <link rel="stylesheet" href="../../css/spectre.min.css">
</head> </head>
<body> <body>
<input type="radio" id="useURL" name="mode" checked/> <input type="radio" id="useTEXT" name="mode" checked/>
<label for="useURL">Use URL:</label> <label for="useTEXT">Use text (for example an URL):</label>
<input type="text" id="url" class="form-input" value="http://espruino.com"> <input type="text" id="text" class="form-input" value="www.espruino.com">
<hr> <hr>
<input type="radio" id="useWIFI" name="mode"/> <input type="radio" id="useWIFI" name="mode"/>
<label for="useWIFI">Use Wifi Credentials:</label> <label for="useWIFI">Use Wifi Credentials:</label>
<input type="text" id="ssid" class="form-input" value=""> <input type="text" id="ssid" class="form-input" value="">
@ -25,30 +26,54 @@
<input type="checkbox" id="hidden" name="hidden"/> <input type="checkbox" id="hidden" name="hidden"/>
<label for="hidden">Wifi is hidden</label> <label for="hidden">Wifi is hidden</label>
</div> </div>
<hr>
<p id="errors" style="color:Tomato;"></p>
<p>Try your QR Code: <div id="qrcode"></div></p> <p>Try your QR Code: <div id="qrcode"></div></p>
<hr>
<p>Additional options:</p>
<input type="checkbox" id="preventIntegerScaling" name="preventIntegerScaling"/>
<label for="preventIntegerScaling">Prevent integer scaling</label></br>
<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"/>
<label for="hideDescription">Hide Description</label></br>
<label for="description">Replace default description:</label>
<input type="text" id="description" class="form-input" value="">
<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>
<p>Click <button id="upload" class="btn btn-primary">Upload</button></p> <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
<script src="../../core/lib/customize.js"></script> <script src="../../core/lib/customize.js"></script>
<script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ --> <script src="../../core/lib/qrcode.min.js"></script><!-- https://davidshimjs.github.io/qrcodejs/ -->
<script src="../../core/lib/heatshrink.js"></script> <script src="../../core/lib/heatshrink.js"></script>
<script src="../../core/lib/imageconverter.js"></script> <script src="../../core/lib/imageconverter.js"></script>
<script> <script>
var targetWidth = 200; var targetSize = 200;
var targetHeight = 200;
function onInit(device) { function onInit(device) {
if (device && device.info && device.info.g) { if (device && device.info && device.info.g) {
targetWidth = device.info.g.width - 20; border = 4;
targetHeight = device.info.g.height - 20; targetSize = Math.min(device.info.g.width - border, device.info.g.height - border);
} }
qrcode = new QRCode("qrcode", { qrcode = new QRCode("qrcode", {
text: document.getElementById("url").value, text: document.getElementById("text").value,
width: targetWidth,
height: targetHeight,
colorDark : "#000000", colorDark : "#000000",
colorLight : "#ffffff", colorLight : "#ffffff",
}); });
refreshQRCode();
} }
//https://github.com/evgeni/qifi/blob/gh-pages/index.html#L168 //https://github.com/evgeni/qifi/blob/gh-pages/index.html#L168
@ -75,40 +100,82 @@
return qrstring; return qrstring;
} }
function refreshQRCode(){ function refreshQRCode(){
document.getElementById("errors").innerText="";
qrcode.clear(); // clear the code. qrcode.clear(); // clear the code.
var qrText = "";
if(document.getElementById("useWIFI").checked){ if(document.getElementById("useWIFI").checked){
const ssid = document.getElementById("ssid").value; const ssid = document.getElementById("ssid").value;
const password = document.getElementById("password").value; const password = document.getElementById("password").value;
const encryption = document.getElementById("encryption").value; const encryption = document.getElementById("encryption").value;
const hidden = document.getElementById("hidden").checked; const hidden = document.getElementById("hidden").checked;
const wifiString = generateWifiString(ssid, password, hidden, encryption); const wifiString = generateWifiString(ssid, password, hidden, encryption);
qrcode.makeCode(wifiString); qrText= wifiString;
}else{ } else {
qrcode.makeCode(document.getElementById("url").value); qrText = document.getElementById("text").value;
}
qrcode._htOption.text = qrText;
qrcode._htOption.correctLevel = parseInt(document.getElementById("correction").value);
try {
qrcode.makeCode(qrText);
} catch (error) {
document.getElementById("errors").innerText="Error: QR could not be created.";
console.error(error);
}
var finalSizeQr=targetSize;
var finalSizeCanvas=targetSize;
var integerScale = Math.max(Math.floor(targetSize / (qrcode._oQRCode.moduleCount + 1)),1);
if (integerScale == 1) document.getElementById("errors").innerText = "Warning, QR will probably be too small to properly scan. Try less data or less error correction.";
if (!document.getElementById("preventIntegerScaling").checked){
finalSizeQr = integerScale * (qrcode._oQRCode.moduleCount + 1);
finalSizeCanvas = finalSizeQr - 1;
}
qrcode._htOption.width = finalSizeQr;
qrcode._htOption.height = finalSizeQr;
document.getElementsByTagName("canvas")[0].width = finalSizeCanvas;
document.getElementsByTagName("canvas")[0].height = finalSizeCanvas;
try {
qrcode.makeCode(qrText);
} catch (error) {
document.getElementById("errors").innerText="Error: QR could not be created.";
console.error(error);
} }
} }
var qrcode; var qrcode;
document.getElementById("url").addEventListener("change", refreshQRCode);
document.getElementById("ssid").addEventListener("change",refreshQRCode); document.getElementById("ssid").addEventListener("change",refreshQRCode);
document.getElementById("text").addEventListener("change",refreshQRCode);
document.getElementById("password").addEventListener("change",refreshQRCode); document.getElementById("password").addEventListener("change",refreshQRCode);
document.getElementById("encryption").addEventListener("change",refreshQRCode); document.getElementById("encryption").addEventListener("change",refreshQRCode);
document.getElementById("hidden").addEventListener("change",refreshQRCode); document.getElementById("hidden").addEventListener("change",refreshQRCode);
document.getElementById("useURL").addEventListener("change",refreshQRCode); document.getElementById("useTEXT").addEventListener("change",refreshQRCode);
document.getElementById("useWIFI").addEventListener("change",refreshQRCode); document.getElementById("useWIFI").addEventListener("change",refreshQRCode);
document.getElementById("preventIntegerScaling").addEventListener("change",refreshQRCode);
document.getElementById("correction").addEventListener("change",refreshQRCode);
document.getElementById("upload").addEventListener("click", function() { document.getElementById("upload").addEventListener("click", function() {
var content = document.getElementById("url").value; var content = document.getElementById("text").value;
if(document.getElementById("useWIFI").checked){ if(document.getElementById("useWIFI").checked){
content = document.getElementById("ssid").value content = document.getElementById("ssid").value
} }
if(!(document.getElementById("description").value === "")){
content = document.getElementById("description").value;
}
var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true}); var img = imageconverter.canvastoString(document.getElementsByTagName("canvas")[0],{mode:"1bit",output:"string",compression:true});
var app = `var img = ${img}; var app = `var img = ${img};
var content = ${JSON.stringify(content)}; ${document.getElementById("boostBacklight").checked ? 'Bangle.setLCDBrightness(1);' : ''}
${document.getElementById("stayOn").checked ? 'Bangle.setLCDTimeout(0);' : ''}
${document.getElementById("hideDescription").checked ? '' : `var content = ${JSON.stringify(content)};`}
g.clear(1).setColor(1,1,1).setBgColor(0,0,0); g.clear(1).setColor(1,1,1).setBgColor(0,0,0);
g.fillRect(0,0,g.getWidth()-1,g.getHeight()-1); g.fillRect(0,0,g.getWidth()-1,g.getHeight()-1);
g.drawImage(img,(g.getWidth()-img[0])/2,(g.getHeight()-img[1])/2); g.drawImage(img,(g.getWidth()-img[0])/2,(g.getHeight()-img[1])/2);
g.setFontAlign(0,0).setFont("6x8").setColor(0,0,0); ${ 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)); g.drawString(content,g.getWidth()/2,g.getHeight()-(g.getHeight()-img[1])/4));
`}
g.setColor(1,1,1); g.setColor(1,1,1);
`; `;
sendCustomizedApp({ sendCustomizedApp({