LabVIEW has many things that make it a great language for quick development for control and data acquisition. And while it’s user interface has many easy to use features, I have always found the UI to be very limiting when compared to what is possible and expected nowadays with slick web interfaces and online applications. That is why I’ve switched to often using web tools for the user interfaces with LabVIEW applications.
Web Application Frameworks
My web framework of choice is Vue.js, its reactive data, store frameworks and efficient code/execution make it ideal for real time data with LabVIEW systems. I pair that with Electron.js when I need multi window or standalone executables, which then allows me a completely unique client interface.
Drag ‘n’ drop components on custom layouts with full resizing and flexible web interface.
LabVIEW Data Interface
Unfortunately, there are no native interfaces or toolkits in LabVIEW to easily get data to Vue.js, so I ended up designing and building my own for the needs of my applications.
The were three major requirements I needed for a data interface layer between Vue.js on the web side to LabVIEW’s dataflow capabilities. These were:
- An efficient memory store for various data types
- Auto connecting and bidirectional transmission of this data to and from web apps
- Support multiple connection and auto reconnects
Memory Store
I went about building this and testing performance of the memory storage and I use this now for live data of any data types, configuration data, state data and all of it is easy to save/restore. I utilize LabVIEW’s MAP features to efficient keep unique names and data types for very fast storage and lookup, which is essential for this solution.
Auto Connecting and Bidirectional Data
I transmit all data at the base level using JSON, making it easy to support various data types and to objectify it both in LabVIEW and Vue.js.
Multiple Connections
Connections are done using websocket and I’ve built websocket servers in LabVIEW that handle multiple connections. They auto synchronize data from my memory store and have support for any additional custom messaging.
Web Design and UX
To me, the design of a great user experience has always been extremely important to ensure an application is both easy to use and completely functional in regards to the needs of the user. Modern web apps are excellent for that and using them as the interface for a LabVIEW based application is a great way to gain the many advantages they offer. From being responsive, mobile friendly and having endless libraries and UI components to utilize makes for some great user experiences.
When Are Web UIs Best for LabVIEW
I don’t built every UI with web tools, because sometimes it is just much simply to build a simple front end in LabVIEW, especially with its quick and easy to use graphing tools. However, anytime the following factors are important, I’d consider a web based user interface:
- Multiple client connections and viewers
- Mobile device usage
- Resizing and adjustable layouts
- Themes and color styles
- Multi languages
- Tables and Grids needed in various displays
- Database integration with binded datasets
Hosting Web Apps
I’ve utilized 3 different methods of hosting web apps for use with LabVIEW applications.
- Using LabVIEW’s web server – this works great for embedded LabVIEW and real-time applications because you can load the webapp directly from the controller and no other computer or network is needed to still use a rich web interface. This can also be done from any PC based LabVIEW application, just using a web interface instead of LabVIEW’s native UI.
- Using Electron.js to create a stand alone multi-platform executable. This is best when you need multiple windows or additional desktop tools like audio, file IO, window management, notifications, etc.
- Using a cloud base service like amazon web services, where you host your web interface for your app and either host the data for it online as well or require a network connection from the LabVIEW end.
