LabVIEW and SVG integration

The idea behind this project is to demonstrate how to improve User Interfaces by using SVG and Javascript thanks to the WebView2 control and the WebSocket API.

This project will display the map of France where the User can click on any region to get the name of it. The click of User will be sent back to the server and logged in the console.

Table of content

• LabVIEW and SVG integration
  • Table of content
• Acknowledgements
• Built with
• How to use it
  • Prerequisite
  • Run the application
• Reflections on Preferences: Exploring Likes and Dislikes.
  • Pros
  • Cons
  • When should you use it ?
• License

Acknowledgements

This project would not have been possible without the following tools, libraries and tutorials:

• The project was inspired by the tutorial from "Grafikart.fr"
• The SVGs were downloaded from amcharts.com
• The LabVIEW WebView2 package / VIPM
• The LabVIEW Websockets API / VPIM
• Inkscape : The best tool to edit .svg
• SVG Repo : For providing open-licensed SVG.

Built with

How to use it

Prerequisite

• LabVIEW 2020 or greater
• The package WebView2 installed from the VIPM
• The package Websockets API installed from the VIPM

Run the application

Open the LabVIEW project labview-svg.lvproj then open the main.vi and run it. You should have the following window:

By clicking on any region you should see the name of the region in the "received data" output and a message in the console log of the web browser. To display it, click on it and press ctrl+shift+i . The following image is an example:

To stop the program click om the red cross or press ctrl+w .

Reflections on Preferences: Exploring Likes and Dislikes.

Pros

• The debug from the web browser is great and always available (even with a build)
• Shallow learning curve for basic HTML, CSS and JS with the Websocket API
• The amount of resources for web related scripts and all of the free AI tools available
• The easiness of having clean interface and not need "to reinvent the wheel"

Cons

• The first time you set a build can be tricky (unfortunately I don't have the required license to give an example)
• The HTML, CSS and JS scripts are not compiled, therefor not hidden

When should you use it?

License

Distributed under the MIT License. See LICENSE.txt for more information.