• WebVI Integrate service

NXG WebVI: How to access and embed web service and resources

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

"<yoastmark

"<yoastmark

 

 

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

"<yoastmark

 

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
URL Image Example
URL Image Example

 

Access WebService

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

"<yoastmark

 

Hope this is useful 🙂 Have fun with NI Web Technology!

Boring Engineer
Follow Boring Engineer:

Industrialist and CEO of Stark Industries, once a Patriotic Winter Soldier, After an Accidental Gamma Ray exposure became a strange magician. Talented at archery and swinging between buildings. Popularly called as Son of Odin or King of Wakanda!

Boring Engineer
Latest posts from

Leave a Reply

Your email address will not be published. Required fields are marked *