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
This example shows you a way to create a simple web game using LabVIEW NXG
How to do this?
WebVI develop, deploy and host
Develop Web page using 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 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
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
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)
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’
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
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