Home Community Example Programs Example Code Document

Example Code

cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
ASK A QUESTION

NXG WebVI : Develop, Deploy and Host a Simple Web Game

by: Member Member
‎05-12-2019 04:20 AM
Last Edited by: Active Participant MilanR ‎02-10-2021 11:08 PM

Products and Environment

This section reflects the products and operating system used to create the example.

To download NI software, including the products shown below, visit ni.com/downloads.

    Software

  • LabVIEW NXG Web Module

Code and Documents

Attachment

Description

Overview

National Instrument LabVIEW has grown and evolved a lot since its introduction in 1986 for Macintosh. Over time, NI has taken their graphical programming paradigm to most of the Operating systems, to real-time, to FPGAs and now to the web. Yes today you could build a neat Web Page quickly with your LabVIEW knowledge using NXG WebVI

  • Prerequisite: No HTML, CSS, JavaScript knowledge required. It’s Pure LabVIEW.

This example shows you a way to create a simple web game using LabVIEW NXG

 

Description

 

How to do this?

Explaining the flow used to develop, build and deploy LabVIEW NXG WebVI

WebVI develop, deploy and host

 

Develop Web page using WebVI

Introducing WebVI

  • WebVI is like a normal VI in NXG where a developer can build web pages using the available and web supported LabVIEW front Panel objects and block diagram functions.
  • WebVI can be translated into an HTML + CSS + Javascript functions and can be run on the browser or it can also be run within the NXG ADE
  • WebVI is run on a Web browser using an open source runtime engine (vireo)

Steps to develop a Web page

  • Open LabVIEW NXG
  • Select ‘Programming WebVIs’ from the lessons – This will be a good starting point as this comes with default application and a WebVI in the project with System Designer configured already
  • Open WebVI – This has Front Panel, Block Diagram, Icon and HTML pages. We will skip the HTML and Icon page for now
  • Develop the program using the Front Panel and Block diagram using the functions available (National Instruments will be coming up with more functions as NXG matures)
  • As an example program: I have the screenshots of the Front panel and block diagram of the game below
Source code snippet of NXG WebVI that explains the web game
WebVI Game Source Code

 

  • Once the program is ready, the user can run the WebVI in the LabVIEW NXG ADE to test the behavior
  • Now we have our WebVI ready to build!

 

Building web application using System Designer

Introducing System Designer

  • System Designer is an important component of the LabVIEW NXG ADE and it comes by default with every NXG project
  • System Designer = NI Measurement and Automation Explorer++ and Software Library and Builds Manager ++. It combines both hardware and related software management in one place
  • System Designer is the place where we will detect, organize, document and manage the hardware system using the two views – Live and Design View. It gives the graphical representation of the system.
  • Live View – Automatically detect the hardware connected to the machine and reflect the state of the system
  • Design View – Let’s say I don’t have all the hardware available for my system but still I can use design view to simulate/design the system with actual and simulated hardware and also build my software components

 

Steps to build a Web application

  • All we need to do is – Go to the system designer in the project, In Design View we will find a web server with the application that contains our WebVI.
  • Right Click on the application and choose build
Build the Web page using NXG System Designer
NXG System Designer Build Option

 

  • The build status can be seen in the status bar (Make sure the WebVI is not running in the ADE when we try to build the application)
Displaying NXG System Designer Build Status
NXG System Designer Build Status

 

Host using NI Web Server

Introducing NI Web Server

  • NI Web Server will serve the browser with web pages requested
  • Users can host any web pages using NI Web Server once NI Web Server is configured in the server machine

 

Configure NI Web Server

  • To Configure –> Open NI Web Server Configuration window –> Go to Summary Page –> Open ‘Run Guided setup to select preset settings’
Using the NI Web Server Configuration to setup the server settings
NI Web Server Configuration

 

  • Run through the setup wizard using ‘Simple Local Access’. By default port 80 will be configured

 

Host the built Web application

  • Copy the built components into ‘C:\Program Files\National Instruments\Shared\Web Server\htdocs‘ as shown below
Once built, Web page should be deployed in the NI Web Server Hosting folder
NI Web Server Hosting folder

 

  • Now access the web page from browser using ‘http://<ipaddress>:<portnumber>/<Folder name inside htdocs>/<HTML file name.html> . for example: http://localhost:80/MathGame/Math.html

 

Hardware and Software Requirements

  • LabVIEW NXG
  • LabVIEW NXG Web Modules

 

Additional Information or References

 

Blog: https://boringengineer.com/2018/07/15/develop-deploy-host-webvi/

Source Code: https://github.com/navinsubramani/develop-and-deploy-WebVI

 

Navin Subramani | CLA, CTA | boring engineer

Example code from the Example Code Exchange in the NI Community is licensed with the MIT license.