What is the DOM?
Cascading Style Sheets, CSS, tell the web browser how to display the HTML elements. CSS defines attributes like width, height, color, borders, orientation, font, font size, etc. By carefully adding styles to individual HTML elements we can recreate LabVIEW front panel controls.
LabVIEW Web Services enables LabVIEW programmers to create rich web apps powered by LabVIEW. Most of the programming can be done in LabVIEW, but in order to create truly amazing applications some knowledge of web development is needed.
A powerful design model for web apps is the RESTful API. You can read the full details on Wikipedia Representational state transfer. For the TL;DR crowd, a RESTful API loosely defines mapping the HTTP methods (GET, POST, PUT, DELETE) to data creation and retrieval. The API is stateless and all data is stored server side. The stateless architecture allows for clients to disconnect and reconnect at will.
In this tutorial I will demonstrate how to create a Web Resource that returns the current value of a Vertical Slider.
Start with a blank project. Add a new VI with a single Vertical Slider on the front panel and wire the slider to a Global Variable on the back panel.
One of the core design principles of the web is to separate date from presentation. Every webpage has at least HTML and CSS. The HTML defines the data and the CSS defines the presentation. In the case where the CSS is not explicitly defined the default styles of the web browser are used.
By manipulating the HTML and CSS it is possible to recreate most of the LabVIEW front panel controls. In this example I will show you how to recreate a crude, but functional, Vertical Progress Bar. The same techniques can be used to recreate most of the front panel controls.
The static html page can be updated while the LabVIEW 2013 Web Service is running. This allows for the files to be dynamically updated by a running VI. Then whenever the web page is refreshed in the web browser, new data will be displayed.
This example shows how to update an HTML file in the Public Content folder of a running LabVIEW 2013 Web Service. (Read the static html page example to learn the basics before trying this example.)
LabVIEW Web Services received a great update for 2013. Web Services are now easier to use and run in the same context as the other VIs in a LabVIEW project. Remote front panels can now be created that can be accessed from any mobile device with a web browser.
This is a very simple tutorial showing how to serve static html webpages with the LabVIEW 2013 Web Service. The next example shows how to dynamically update a webpage.
The biggest hurdle for me when getting started with a new technology is setting up my workspace with all the tools I'll need. For basic web development there are two tools, a web browser and a text editor. Obviously the browser choice is whichever one my customer will be using. The text editor choice is complex. There are dozens of excellent editors available.