We have already seen how to use LabVIEW NXG to Develop, Build and Deploy WebVI. In this blog, I have talked about a few more options in WebVI on how to use the online resources and embed it in your WebVI.
I have also embedded some interactive examples developed using NXG WebVI here
NXG WebVI Front Panel page and HTML page
HTML page in WebVI is the HTML view of the WebVI Front Panel. For every object that is dropped in the NXG Front Panel, an HTML code of the object and CSS property will be automatically created in the HTML page. Similarly, If we make any changes on the HTML page that will, in turn, get reflected on the NXG Front Panel (conditions apply). There are few rules to develop a UI using HTML page
- The developer should not code within the read-only section of the HTML page
- Object developed using the HTML page will not have its corresponding Block Diagram terminal
- Properties of Object developed using NXG Front Panel can be edited by adding a style sheet and CSS properties
- Functions and Events can be captured in the LabVIEW block diagram (not available until NXG 2.1) as well as in HTML page
Embed Web Pages using WebVI HTML
We can embed any Web Page into the NXG front panel using the HTML page. For example, I have used an interesting boids algorithm GitHub page from http://anoopelias.github.io/boids/# and embedded it into a LabVIEW NXG WebVI
- Get the link of the web page that you need to embed.
- Go to NXG HTML Page and body section create a new div and use the iframe to add the WebPage
Access Images using URL
LabVIEW NXG provides a URL Image control underdrawing Palette. Using this, we can display any images from the web (This example uses Robohash.org to display images)
All we need to do is,
- Input the URL to the indicator in the block diagram as shown in the example below
Using the HTTP API’s developer can query any Web services, get information and display it. For example, I have used a Joke Service from http://www.icndb.com/api/ to display a random Chuck Norris jokes on every click.
This example uses,
- HTTP API’s in WebVI (HTTP is a mostly used web protocol)
- Get HTTP request to query for jokes
- Uses Unflatten JSON to parse the response and display it in a string
Hope this is useful 🙂 Have fun with NI Web Technology!