feature museumsvictoria#213: QR code support, static and dynamic

Feature thanks to automatic.com.au; co-authored-by: @morimoriysmoon
scroix · Apr 1, 2024 · b151ab5 · b151ab5
1 parent 760e459
commit b151ab5
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 6 deletions.
diff --git 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
@@ -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
@@ -133,5 +133,11 @@
         <lighting event="ColorEvent" options="rgbkwaui"></lighting>
       </column>
     </row>
+    <row>
+      <column sm="2">
+        <title>QR Code</title>
+        <qrcode text='https://google.com' help='Google' event='DynamicQRCode' height='128' />
+      </column>
+    </row>
   </page>
-</pages>
+</pages>
diff --git 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);
   });
-};
+};
diff --git a/nodel-webui-js/src/qrcode.css 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
@@ -1279,6 +1279,45 @@
     </form></div>
   </xsl:template>
   <!-- lighting -->
+  <!-- qrcode-->
+  <xsl:template match="qrcode">
+    <div class="qrcode-card">
+      <div class="qrcode-wrapper">
+        <div class="qrcode">
+          <xsl:if test="@event">
+            <xsl:attribute name="data-event">
+              <xsl:value-of select="@event"/>
+            </xsl:attribute>
+            <xsl:attribute name="id">qrcode-<xsl:value-of select="@event"/>
+            </xsl:attribute>
+          </xsl:if>
+          <xsl:if test="@text">
+            <xsl:attribute name="data-text">
+              <xsl:value-of select="@text"/>
+            </xsl:attribute>
+          </xsl:if>
+          <xsl:if test="@height">
+            <xsl:attribute name="data-height">
+              <xsl:value-of select="@height"/>
+            </xsl:attribute>
+          </xsl:if>
+          <xsl:if test="@help">
+            <xsl:attribute name="data-help">
+              <xsl:value-of select="@help"/>
+            </xsl:attribute>
+          </xsl:if>
+        </div>
+      </div>
+      <xsl:if test="@help">
+        <div class="qrcode-help">
+          <p>
+            <xsl:value-of select="@help"/>
+          </p>
+        </div>
+      </xsl:if>
+    </div>
+  </xsl:template>
+  <!-- qrcode-->
   <!-- meter -->
   <xsl:template match="meter">
     <div class="meter" data-event="{@event}">
@@ -1506,4 +1545,4 @@
     </xsl:if>
   </xsl:template>
   <!-- nodel -->
-</xsl:stylesheet>
+</xsl:stylesheet>