From d1294599e06fe7a53a148e95281c39f89dc2415a Mon Sep 17 00:00:00 2001 From: Justin Parker Date: Thu, 6 Jan 2022 15:59:41 +1100 Subject: [PATCH] feature #213: QR code support, static and dynamic Feature thanks to automatic.com.au; co-authored-by: @morimoriysmoon --- nodel-webui-js/Gruntfile.js | 9 ++++--- nodel-webui-js/package.json | 1 + nodel-webui-js/src/index.xml | 8 +++++- nodel-webui-js/src/nodel.js | 45 +++++++++++++++++++++++++++++++- nodel-webui-js/src/qrcode.css | 16 ++++++++++++ nodel-webui-js/src/templates.xsl | 41 ++++++++++++++++++++++++++++- 6 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 nodel-webui-js/src/qrcode.css diff --git a/nodel-webui-js/Gruntfile.js b/nodel-webui-js/Gruntfile.js index df709b63..0a228c57 100644 --- a/nodel-webui-js/Gruntfile.js +++ b/nodel-webui-js/Gruntfile.js @@ -183,7 +183,8 @@ module.exports = function(grunt) { './node_modules/codemirror/addon/dialog/dialog.css', './temp/googlefonts.css', './src/spectrum/spectrum.css', - './src/spectrum/spectrum-dark.css' + './src/spectrum/spectrum-dark.css', + './src/qrcode.css' ], dest: './build/grunt/v1/css/components.css' }, @@ -198,7 +199,8 @@ module.exports = function(grunt) { './node_modules/codemirror/addon/dialog/dialog.css', './temp/googlefonts.css', './src/spectrum/spectrum.css', - './src/spectrum/spectrum-dark.css' + './src/spectrum/spectrum-dark.css', + './src/qrcode.css' ], dest: './build/grunt/v1/css/components.default.css' } @@ -244,7 +246,8 @@ module.exports = function(grunt) { './node_modules/google-charts/dist/googleCharts.js', './node_modules/lodash/lodash.js', './src/polyfill.js', - './src/spectrum/spectrum.js' + './src/spectrum/spectrum.js', + './node_modules/davidshimjs-qrcodejs/qrcode.min.js', ], dest: './build/grunt/v1/js/components.js' } diff --git a/nodel-webui-js/package.json b/nodel-webui-js/package.json index d8c4adde..2e430348 100644 --- a/nodel-webui-js/package.json +++ b/nodel-webui-js/package.json @@ -9,6 +9,7 @@ "bootstrap-select": "1.13.10", "cm-resize": "^1.0.1", "codemirror": "^5.58.3", + "davidshimjs-qrcodejs": "^0.0.2", "fuzzyset.js": "0.0.8", "google-charts": "^2.0.0", "gsap": "^3.8.0", diff --git a/nodel-webui-js/src/index.xml b/nodel-webui-js/src/index.xml index 58fca419..99b9d95a 100644 --- a/nodel-webui-js/src/index.xml +++ b/nodel-webui-js/src/index.xml @@ -133,5 +133,11 @@ + + + QR Code + + + - \ No newline at end of file + diff --git a/nodel-webui-js/src/nodel.js b/nodel-webui-js/src/nodel.js index e9f060ff..ba94bf6f 100644 --- a/nodel-webui-js/src/nodel.js +++ b/nodel-webui-js/src/nodel.js @@ -2241,6 +2241,43 @@ var populateAuxComponents = function () { ); }); }); + + // QR code + $('.qrcode-card').each(function() { + var qrcodeDiv = $(this).find('.qrcode') + var qrcodeHelpDiv = $(this).find('.qrcode-help') + var eventString = $(qrcodeDiv).data('event'); + var textString = $(qrcodeDiv).data('text'); + + // put 'place holder' if text is empty. + if (!textString || textString.length < 1) { + textString = ''; // white square + } + + var height = $(qrcodeDiv).data('height'); + height = (parseInt(height) || 128); + + var qrcodeInstance = $(qrcodeDiv).data('qrcode'); + if (!qrcodeInstance) { + qrcodeInstance = new QRCode(qrcodeDiv[0], { + text: textString, + width: height, + height: height, + colorDark : "#000000", + colorLight : "#ffffff", + correctLevel : QRCode.CorrectLevel.H + }); + // adjust width + $(qrcodeDiv).css('width', height + 4); // plus padding + if (qrcodeHelpDiv.length > 0) { + $(qrcodeHelpDiv).css('width', height + 4); // plus padding + } + $(qrcodeDiv).data('qrcode', qrcodeInstance); + } else { + qrcodeInstance.clear(); + qrcodeInstance.makeCode(textString); + } + }); }; var updateLogs = function(){ @@ -2513,6 +2550,12 @@ var process_event = function(log){ }).addClass($(ele).data('class-on')); } else if ($(ele).hasClass('spectrum-color-picker')) { $(ele).spectrum('setWithChannels', log.arg); // can not use val(colorString) with spectrum color picker. + } else if ($(ele).hasClass('qrcode')) { + var qrcodeInstance = $(ele).data('qrcode'); + if (qrcodeInstance) { + qrcodeInstance.clear(); + qrcodeInstance.makeCode(log.arg); // can not use val() with QRCode. + } } else { if ($(ele).is("span, h4, p")) $(ele).text(log.arg); // lists @@ -2726,4 +2769,4 @@ var parseLog = function(log){ requestAnimationFrame(function() { process_log(log); }); -}; \ No newline at end of file +}; diff --git a/nodel-webui-js/src/qrcode.css b/nodel-webui-js/src/qrcode.css new file mode 100644 index 00000000..377a61d5 --- /dev/null +++ b/nodel-webui-js/src/qrcode.css @@ -0,0 +1,16 @@ +.qrcode-card { +} + +.qrcode { + padding: 2px 2px; + background: #fff; +} + +.qrcode-help { + font-size: 12px; + color: #fff; + text-align: center; + margin-top: 5px; + overflow: hidden; +} + diff --git a/nodel-webui-js/src/templates.xsl b/nodel-webui-js/src/templates.xsl index 6f27177a..3123450f 100644 --- a/nodel-webui-js/src/templates.xsl +++ b/nodel-webui-js/src/templates.xsl @@ -1279,6 +1279,45 @@ + + +
+
+
+ + + + + qrcode- + + + + + + + + + + + + + + + + + +
+
+ +
+

+ +

+
+ +
+ +
@@ -1506,4 +1545,4 @@ - \ No newline at end of file +