Previously I wrote about RESTful Web Services in LabVIEW and HTML/CSS Slider. By combining these two post I created a Web App powered by LabVIEW.

Android emulators are great for developing BluetoothLE applications. The trick is getting the Android emulator to recognize the BluetoothLE adapter.

I had spare time, patience and a camera. Using Darktable and jQuery Reel, I assembled a photo shoot and webpage to display the photos. The result is an illusion of a rotating myRIO.

Building native HTML and JavaScript apps for Android can be done with Apache Cordova on Ubuntu.

What is the DOM?

The Document Object Model (DOM) is the center of any web app. The DOM is the bridge between JavaScript and the display of the HTML and CSS. It could be argued that JavaScript’s sole purpose is to manipulate the DOM. The ability of JavaScript to change HTML/CSS and respond to user events through the DOM is what makes modern web apps possible.

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.

The Basics

The modern web is made of HTML [Wiki], CSS [Wiki], and JavaScript [Wiki].

RESTful

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.

The power of LabVIEW Web Services is in the Web Resources. A Web Resource is a URL that returns data from a LabVIEW VI. By combining a static HTML page with JavaScript we can create truly dynamic webpages that are powered by LabVIEW.

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.

Pages