Display QR Code in LabVIEW NXG Web Module

Updated May 20, 2021

LabVIEW NXG Web Module does not come with QR code generation capability but JavaScript Library Interface (JSLI) can be utilized to implement this feature with the help of external Javascript functions. This article will demonstrate to you in detail how to implement the QR code generation feature in LabVIEW NXG Web Module.

  1. Download and extract the JavaScript function folder provided by davidshimjs at qrcode.js.
  2. Create a Web Application Project in LabVIEW NXG. image.png
  3. Save the project. Without saving the project, you wouldn't be able to import files in upcoming step.
  4. Include the following HTML snippet into HTML source of your webVI by click Edit HTML Source.  
    • <div id="qrcode"></div>
    • image.png
  5. Save the modified HTML Source by click OK.
  6. Import the qrcode.min.js or qrcode.js that have been extracted in Step 1 into your web application project. image.png
  7. By using a text editor, save the following snippet as qr.js and import it into your web application project as demonstrated in the image of Step 6. 
    • (function () {
    // Use strict prevents silent and common JavaScript errors.
    'use strict';
    window.QR = function (word) {
        new QRCode(document.getElementById("qrcode"), word);
    };
}());
    • This JavaScript snippet takes a String-type argument representing the content of the QR code and displays it at HTML element with ID of qrcode.
  8. Create a JavaScript Library Interface (JSLI) for your web application project. image.png
  9. A Library.jsli tab has been opened automatically for you by now. Enter the following HTML snippet into the HTML script and link dependencies. 
    • <script src="qrcode.min.js"></script>
<script src="qr.js"></script>
  10. In JavaScript Global section, enter QR and click Add function. QR is used because it is the name of the function we created in the qr.js in Step 7.
  11. Without expand the side panel at the right, click Add parameter.
  12. While selecting the parameter we newly created, open the right-side panel to change its data type to String and rename it accordingly. In the image below, it has been renamed as word. image.png
  13. With the following setup in Diagram, once you run your web application in the browser, you will get a QR code with URL to NI official website as its content as illustrated in Step 14. image.png
  14. Result of running the webVI in browser: image.png

Related Links

Other Support Options

Ask the NI Community

Collaborate with other users in our discussion forums



Request Support from an Engineer

A valid service agreement may be required, and support options vary by country.