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-09 21:08:41 +00:00
< b > Datasource: < / b > < / br >
2021-12-07 18:49:10 +00:00
< input type = "radio" id = "useTEXT" name = "mode" checked / >
2021-12-09 21:08:41 +00:00
< label for = "useTEXT" > Text< / label > < / br >
2020-05-11 11:18:50 +00:00
< input type = "radio" id = "useWIFI" name = "mode" / >
2021-12-09 21:08:41 +00:00
< label for = "useWIFI" > Wifi Credentials< / label > < / br >
< input type = "radio" id = "useFILE" name = "mode" / >
< label for = "useFILE" > QR image< / label > < / br >
< input type = "radio" id = "useCAM" name = "mode" / >
< label for = "useCAM" > QR scan< / label > < / br >
< hr >
< div id = "srcText" >
< p > Text/URL: < input type = "text" id = "text" class = "form-input" value = "http://www.espruino.com" > < / p >
< / div >
< div id = "srcScanCam" >
< div >
< video id = "qrVideo" align = "center" width = "50%" > < / video >
< / div >
< div >
< select id = "camList" >
< / select >
< / div >
< div >
< button id = "flashToggle" > Flash: < span id = "flashState" > off< / span > < / button >
< / div >
< br >
Detected QR code:
< span id = "camQrResult" > None< / span >
< br >
< button id = "startButton" class = "btn btn-primary" > Start< / button >
< button id = "stopButton" class = "btn btn-primary" > Stop< / button >
2020-05-11 10:43:25 +00:00
< / div >
2021-12-09 21:08:41 +00:00
< div id = "srcScanFile" >
< input type = "file" id = "fileSelector" >
< br >
Detected QR code:
< span id = "fileQrResult" > None< / span >
< / div >
< div id = "srcWifi" >
< p > 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 >
< 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 >
2020-05-11 10:43:25 +00:00
< / div >
2021-12-09 21:08:41 +00:00
2021-12-07 22:13:09 +00:00
< hr >
< p id = "errors" style = "color:Tomato;" > < / p >
< p > Try your QR Code: < div id = "qrcode" > < / div > < / p >
2021-12-09 21:08:41 +00:00
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 >
2021-12-09 21:08:41 +00:00
< / div >
2019-11-06 17:25:02 +00:00
< p > Click < button id = "upload" class = "btn btn-primary" > Upload< / button > < / p >
2021-12-07 22:13:09 +00:00
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 >
2021-12-09 21:08:41 +00:00
< script src = "./qr-scanner.umd.min.js" > < / script > <!-- https://github.com/nimiq/qr - scanner -->
2019-11-06 17:25:02 +00:00
< script >
2021-12-09 21:08:41 +00:00
var targetSize = 200;
var deviceWidth = targetSize;
var deviceHeight = targetSize;
var border = 4;
var scanner = null;
var qrcode = null;
function onInit(device) {
console.info("onInit" + device);
if (device & & device.info & & device.info.g) {
deviceWidth = device.info.g.width;
deviceHeight = device.info.g.height;
}
refreshQRCode();
}
2021-09-02 10:51:17 +00:00
2021-12-09 21:08:41 +00:00
const updateFlashAvailability = () => {
scanner.hasFlash().then(hasFlash => {
document.getElementById('flashToggle').style.display = hasFlash ? 'inline-block' : 'none';
});
};
function setResult(label, result) {
console.info("setResult " + result);
label.textContent = result;
scanner.stop();
refreshQRCode();
}
function initQrScanner() {
console.info("initQrScanner");
QrScanner.WORKER_PATH = './qr-scanner-worker.min.js';
if (scanner == null) {
scanner = new QrScanner(document.getElementById('qrVideo'), result => setResult(document.getElementById('camQrResult'), result), error => {
document.getElementById('camQrResult').textContent = error;
document.getElementById('camQrResult').style.color = 'inherit';
});
}
}
function initQrCam(){
scanner.start().then(() => {
updateFlashAvailability();
QrScanner.listCameras(true).then(cameras => cameras.forEach(camera => {
const option = document.createElement('option');
option.value = camera.id;
option.text = camera.label;
document.getElementById('camList').add(option);
}));
});
}
function toggleVis(id){
console.info("Got id", id);
["srcScanFile", "srcText", "srcWifi", "srcScanCam"].forEach(function (item){
document.getElementById(item).style.display = "none";
});
if (id != undefined & & id != null) document.getElementById(id).style.display = "block";
refreshQRCode();
2021-09-02 10:51:17 +00:00
}
2021-12-09 21:08:41 +00:00
toggleVis("srcText");
//https://github.com/evgeni/qifi/blob/gh-pages/index.html#L168
function escapeString (string) {
2020-05-11 10:43:25 +00:00
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;
2020-05-11 11:10:00 +00:00
}
2021-12-09 21:08:41 +00:00
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;
2021-12-07 21:54:36 +00:00
}
2021-12-09 21:08:41 +00:00
function refreshQRCode(){
if (qrcode == null){
qrcode = new QRCode("qrcode", {
text: document.getElementById("text").value,
colorDark : "#000000",
colorLight : "#ffffff"
});
}
document.getElementById("errors").innerText="";
qrcode.clear(); // clear the code.
var qrText = "";
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);
qrText= wifiString;
} else if (document.getElementById("useCAM").checked) {
qrText= document.getElementById("camQrResult").innerText;
} else if (document.getElementById("useFILE").checked) {
qrText= document.getElementById("fileQrResult").innerText;
} else {
qrText = document.getElementById("text").value;
}
console.info("Given qrtext was: " + qrText);
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);
}
targetSize = Math.min(deviceWidth - border, deviceHeight - border);
console.info("Targetsize: " + targetSize);
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.";
console.info("IntegerScale: " + integerScale);
if (!document.getElementById("preventIntegerScaling").checked){
finalSizeQr = integerScale * (qrcode._oQRCode.moduleCount + 1);
finalSizeCanvas = finalSizeQr - 1;
}
2021-12-07 22:08:20 +00:00
2021-12-09 21:08:41 +00:00
console.info("FinalSizeQr: " + finalSizeQr);
console.info("FinalSizeCanvas: " + finalSizeCanvas);
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);
}
2021-12-07 18:16:41 +00:00
}
2021-12-09 21:08:41 +00:00
document.getElementById("useTEXT").addEventListener("change",function(){toggleVis("srcText");});
document.getElementById("useCAM").addEventListener("change",function(){
initQrScanner();
initQrCam();
toggleVis("srcScanCam");
});
document.getElementById("useFILE").addEventListener("change",function(){
initQrScanner();
toggleVis("srcScanFile");
});
document.getElementById("useWIFI").addEventListener("change",function(){toggleVis("srcWifi");});
document.getElementById("ssid").addEventListener("change",refreshQRCode);
document.getElementById("text").addEventListener("change",refreshQRCode);
document.getElementById("password").addEventListener("change",refreshQRCode);
document.getElementById("encryption").addEventListener("change",refreshQRCode);
document.getElementById("hidden").addEventListener("change",refreshQRCode);
document.getElementById("useTEXT").addEventListener("change",refreshQRCode);
document.getElementById("useCAM").addEventListener("change",refreshQRCode);
document.getElementById("useFILE").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() {
var content = document.getElementById("text").value;
if(document.getElementById("useWIFI").checked){
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 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);
`;
2021-12-09 21:08:41 +00:00
sendCustomizedApp({
storage:[{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
2021-12-09 21:08:41 +00:00
document.getElementById('camList').addEventListener('change', event => {
scanner.setCamera(event.target.value).then(updateFlashAvailability);
});
document.getElementById('flashToggle').addEventListener('click', () => {
scanner.toggleFlash().then(() => document.getElementById('flashState').textContent = scanner.isFlashOn() ? 'on' : 'off');
});
document.getElementById('startButton').addEventListener('click', () => {
scanner.start();
});
document.getElementById('stopButton').addEventListener('click', () => {
scanner.stop();
});
document.getElementById('fileSelector').addEventListener('change', event => {
const file = document.getElementById('fileSelector').files[0];
if (!file) {
return;
}
QrScanner.scanImage(file)
.then(result => setResult(document.getElementById('fileQrResult'), result))
.catch(e => setResult(document.getElementById('fileQrResult'), e || 'No QR code found.'));
});
2019-11-06 17:25:02 +00:00
< / script >
2021-12-09 21:08:41 +00:00
2019-11-06 17:25:02 +00:00
< / body >
< / html >
