Visit webvi.io What are WebVIs Download Contribute Awesome WebVIs

Awesome WebVIs

A curated list of awesome WebVIs and resources for making awesome free-range organic WebVIs 🤘.

What are WebVIs
Getting Started
Documentation
Add-Ons
Tutorials
Presentations
Just for Fun
Spotted in the Wild
Experimental
Non-English Resources

What are WebVIs

WebVIs are web applications created using G Web Development Software 🧙‍♂️.

WebVIs build standalone HTML + JS + CSS webpages that can acquire data (usually from a web service), do some analysis, and present the data in scientific and engineering web controls. G Web Development Software allows you to use the LabVIEW graphical programming language (also known as the G programming language) to create web applications.

Find out more at webvi.io, on NI's What Is G Web Development Software? page, or from the video What is G Web?.

Getting Started

How to Build a Web UI for Your LabVIEW-Based Test System - Christina and Milan give a step-by-step overview of how to modify your LabVIEW test system to web-enable it using G Web Development Software.
Resources to help you get started with G Web Development Software - Useful links for getting started with G Web.

Documentation

Documentation and examples provided by National Instruments 🦅.

Examples

Call 3rd Party Web Service - Acquire data from the US Geological Survey Earthquake API and present in a WebVI. Demo.
Call JavaScript From a WebVI - Create a JavaScript Library Interface (JSLI) document to interact with JS in a page. Demo.
Call LabVIEW Web Service - Acquire data with a LabVIEW Web Service to share with a WebVI. Demo.
Call SystemLink Data Services - Communication with high-level tags, messages, and file APIs included with G Web Development Software. Demo.
Connect WebVI to WebSocket Echo Server - Stream data to WebVIs with WebSockets. Demo.
Customize WebVI with CSS - Advanced customization of a WebVI's style with CSS. Demo.
Embed Content into a WebVI - Add custom HTML to a WebVI. Demo.
Incorporate User Resource into WebVI - Add resource files such as images, CSS files, JavaScript files, and HTML files to your web application. Demo.
Multiple Top-Level WebVIs - Create a web application with multiple pages linked together. Demo.
SystemLink Web Interface Template - Create custom tiles for WebVIs on the NI Web Server landing page. Forum post describing configuration.

Manuals

G Web Development Software - Creating, building, and hosting WebVIs.
- G Web Development Software API Reference - API Reference for VIs and Node in G Web Development Software.
- Communicating Data with Web Services Using WebVIs
- Hosting WebVIs - See several options available for hosting built WebVIs.
SystemLink Cloud - Cloud service from NI to securely make WebVIs available on the internet.
HTTP Nodes - LabVIEW HTTP Nodes documentation with important compatibility notes for WebVIs (Web Server target).

Training

Build a Web App for Your Test System - Course showing how to web-enable an existing LabVIEW test system with G Web Development Software and SystemLink Cloud. Registration required (free). Webinar Example Code.
Creating Web Applications Using G Web Development Software - Online training course introducing WebVIs and guiding you through creation and publishing of a WebVI. Requires SSP.

Forums

G Web Development Software Forum - The official community forum for G Web Development Software.
Example Code - Examples tagged as Software-G Web Development Software in the NI Example Code forum.

Videos

What is G Web? - David talks about web application architecture and shows example control and monitoring WebVIs.
Tom's LabVIEW Adventure - What's New In LabVIEW 2021 ?! - Tom shows the G Web Development Software environment and runs a simple WebVI.
SystemLink - G Web Development & Deployment - Makkal shows a walkthrough of web application development using G Web Development Software and deploys the web app in SystemLink.

Add-Ons

Libraries from the community to add new capabilities to WebVIs 🧩.

Debug Tools for WebVI - Advanced debugging tools for WebVIs. Includes the Debug Log VI to enable logging arbitrary values to the console. See bit.ly/debugtools.
ECharts - 2D and 3D charting libraries. Demo.
File for WebVI - Open, modify, and download files from the browser. Capture and preview images using the Uppy library. Demo.
Maps for WebVI - Interactive maps and markers. Google Maps and Leaflet + Open Street Maps examples. Demo.
Rich Text - Different rich text editor examples. Demos for CKEditor, Quill, and Trix.
Custom Popup Dialogs for WebVI - Highly configurable modal dialogs. Demo.

Tutorials

Tutorials, blogs, hands-ons, social media, and articles on WebVIs 📰.

Articles

Boring Engineer: Web Monitor and Control application using NI SystemLink APIs - WebVIs + SystemLink APIS for monitoring. October 2019.
TestStand Executor - WebVIs + SystemLink to remotely execute TestStand sequences. October 2019.
SystemLink file browser - Use SystemLink jobs to read a file in a WebVI from a RT target. Community. September 2019.
Hands-on: Create Web-Ready User Interfaces with the LabVIEW NXG Web Module - Create WebVIs that communicate with LabVIEW applications. NIWeek May 2019.
Boring Engineer: NI Web Technology: Monitor and Control Systems - WebVIs + LabVIEW Web Services for monitoring. July 2018.
Boring Engineer: NXG WebVI: How to access and embed web service and resources - Embed images, iframes, and use HTTP with web services. July 2018.
Boring Engineer: NXG WebVI : Develop, Deploy and Host a Simple Web Game - Learn the basics of making WebVIs by creating a math game! July 2018.
Latest enhancements to LabVIEW NXG include WebVI, expanded instrument coverage - WebVIs are here! January 2018.
First WebVI Prototype - The first Hello World! of WebVIs. Demo. May 2013.

Social media

G Web Dev Software Tweet Collection - Curated tweets about NI G Web Development Software and LabVIEW Web technologies.

Presentations

Presentations about WebVIs from NIWeek, LabVIEW User Groups, and the community 🗣.

One WebVI to rule (and print) them all! - Michal shows a project made with G Web Development Software to remote monitor and control a 3D printer. GDevCon October 2024.
All you wanted to know about LabVIEW and Web Services but feared to ask – Part 2 - Matthias dives into calling web services from LabVIEW. While the presentation does not cover G Web Development Software directly it has invaluable information on using web services which is applicable to all G Web apps. Studio Bods Abstract. GLA Summit November 2022.
All you wanted to know about LabVIEW and Web Services but feared to ask – Part 1 - Matthias gives a great discussion of making Web Services with LabVIEW. Featuring a live audience poll web application made with G Web Development Software. Studio Bods Abstract. GDevCon September 2022.
How to Build a Web UI for Your LabVIEW-Based Test System - Christina and Milan give a step-by-step overview of how to modify your LabVIEW test system to web-enable it using G Web Development Software. Initially presented at NI Connect May 2022. YouTube recording July 2022.
G Web. Is it any good? - Brian Powell talks about their experience with G Web Development Software web-enabling a data logger LabVIEW application. GDevConNA July 2022.
NXG WebVIs and SystemLink Tags - Working with Symation to make a tablet UI to communicate with a PLC and other instruments. October 2019.
Creating Powerful Web Apps With the LabVIEW NXG Web Module - Matthias details creating a sophisticated web application with a responsive UI, user login, and database backend. Studio Bods. NIWeek May 2019.
Customizing Your WebVIs - Darin and Milan follow-up the NIWeek 2018 presentation talking about styling WebVIs and creating Add-On libraries with the JSLI. Community page. NIWeek May 2019.
Using LabVIEW NXG Web Technologies to Enhance Existing Applications - Rita introduces WebVIs and shows communication techniques and Matthias introduces creating web applications backed by databases. LabVIEW Wiki. NIWeek May 2019.
LabVIEW NXG web module Remote server client - Creating a WebVI, setting up the NI Web Server, testing, and deploying a WebVI. June 2018.
Styling and Customizing WebVIs - Mark and Milan go over common styling scenarios, a deep dive using devtools to style WebVIs, and tease the future of the JSLI document. NIWeek May 2018.
Creating Web Enabled HMIs with LabVIEW NXG - WebVI demonstration by Omid, Mark, and Eli. NIWeek May 2017.

Just for Fun

Games and other fun WebVIs you can play right away in the browser 🕹.

Avalanche 🌠 - Dodge the shooting stars. Source.
Cyclone 🌀 - Use your reflexes to land on the cyclone. Homepage.
Dr. Emoji 💊 - Save the animals by matching their hearts ❤💙💛. Source.
Fire 🔥 - The PSX Doom fire animation ported to HTML 5 to LabVIEW to LabVIEW NXG to WebVIs. Source.
Nibbles 🐍💡 - Snake made out of LEDs. Facebook post.
Reflex tester 👉 - Test your reflexes. Source.
Snake 🐍 - Snake with extra steps. Source.
T-Rex 🦖 - Your favorite offline dinosaur game made online.

Spotted in the Wild

Screenshots and videos of WebVIs being used inconspicuously in the wild 🔍.

DAM Group Leak Test Platform @ 2:13 - Looks like the NXG 2 button border style. Not running in a normal browser. Awesome music.
GCentral - The GCentral Package Search tool is a WebVI. A sophisticated LabVIEW Web Service backend with user authentication, database storage, and a WebVI frontend. Source.

Discover WebVIs on GitHub using the webvi GitHub topic, find WebVI source by searching for the gviweb file extension, or find built WebVIs with a clever search.

If you find a built WebVI on GitHub you can also use an online tool like githack.com to quickly preview and run the built WebVI in your browser.

Experimental

Crazy experiments that try to push WebVIs to their limits 🧪.

WebVI Experiments - Playground with lots of examples and experiments using the JSLI with G Web. Demo.

Non-English Resources

Awesome WebVI resources in non-english languages 🌐.

rajsite/awesome-webvis