在LabVIEW NXG Web模块中显示QR二维码

更新 May 20, 2021

LabVIEW NXG Web模块不具备QR二维码生成功能,但可以透过使用JavaScript Library Interface(JSLI)调用JavaScript功能来实现该功能。本文将详细向您展示如何在LabVIEW NXG Web模块中实现QR二维码生成和显示功能。

  1. qrcode.js上下载和提取由davidshimjs提供的JavaScript函数文件夹。
  2. 在LabVIEW NXG中创建一个Web应用项目 (Web Application Project)。 image.png
  3. 保存项目。如果不保存项目,那么您将无法在接下来的步骤中导入文件。
  4. 点击Edit HTML Source,将以下HTML代码段植入到webVI的HTML Source中。
    • <div id ="qrcode"> </div> 
    • image.png
  5. 点击OK保存修改后的HTML Source。
  6. 步骤1中提取的qrcode.min.jsqrcode.js导入到项目中。 image.png
  7. 通过使用文本编辑器,将以下代码段另存为qr.js,然后将其导入到您的Web应用程序项目中,如步骤6所示。
    • (function () {
          // Use strict prevents silent and common JavaScript errors.
          'use strict';
          window.QR = function (word) {
              new QRCode(document.getElementById("qrcode"), word);
          };
      }());
    • 此JavaScript代码段接受一个表示QR码内容的String型参数,并将其显示在ID为qrcode的HTML元素上。
  8. 为您的Web应用程序项目创建一个JavaScript Library Interface(JSLI)。 image.png
  9. 现在,在已自动为您打开一个Library.jsli选项卡,HTML script and link dependencies输入以下HTML代码段。
    • <script src ="qrcode.min.js"> </ script>
      <script src ="qr.js"> </ script>
  10. 在JavaScript Global中,输入QR并单击Add function。使用QR是因为它是我们在步骤7中,在qr.js中创建的函数名称。
  11. 在不展开右侧侧面板的情况下,单击Add Parameter。
  12. 在选择我们新创建的参数时,打开右侧面板以将其数据类型更改为String并相应地重命名。在下图中,它已重命名为wordimage.png
  13. 如图中进行以下设置后,在浏览器中运行程序后,您将获得一个带有URL的QR二维码。该URL指向NI官方网站,如步骤14所示。 image.png
  14. 在浏览器中运行webVI的结果: image.png