{"id":23769752,"url":"https://github.com/ni/webvi-examples","last_synced_at":"2026-03-29T07:30:20.659Z","repository":{"id":20456180,"uuid":"89962265","full_name":"ni/webvi-examples","owner":"ni","description":"Examples of WebVI functionality in G Web Development Software","archived":false,"fork":false,"pushed_at":"2024-11-05T22:36:57.000Z","size":162308,"stargazers_count":102,"open_issues_count":1,"forks_count":78,"subscribers_count":32,"default_branch":"main","last_synced_at":"2025-01-01T02:33:30.553Z","etag":null,"topics":["g-web-development-software","gweb","labview","webvi"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ni.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":"CONTRIBUTING.MD","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-01T20:55:22.000Z","updated_at":"2024-11-19T08:36:30.000Z","dependencies_parsed_at":"2024-11-05T23:28:23.110Z","dependency_job_id":null,"html_url":"https://github.com/ni/webvi-examples","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ni%2Fwebvi-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ni%2Fwebvi-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ni%2Fwebvi-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ni%2Fwebvi-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ni","download_url":"https://codeload.github.com/ni/webvi-examples/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239952597,"owners_count":19723922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["g-web-development-software","gweb","labview","webvi"],"created_at":"2025-01-01T02:32:02.802Z","updated_at":"2026-03-29T07:30:20.563Z","avatar_url":"https://github.com/ni.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebVI Examples for G Web Development Software\n\nIf you have any **questions or feedback**, ask in the [G Web Development Software Discussion Forums](https://www.ni.com/r/ask-ni-community-gweb).\n\nThis repository has examples for: **G Web Development Software 2022 Q1**.\n\nFor previous versions of G Web Development Software or LabVIEW NXG Web Module see the [previous releases](https://github.com/ni/webvi-examples/releases/).\n\nThe following examples demonstrate different ways of using WebVIs. Each directory contains example code and a `README.md` file explaining the example.\n\n## Programming Basics\n\nTo understand the basics of programming with G language refer to the examples in [Programming Basics directory](ProgrammingBasics).\n\n## Call 3rd Party Web Service\n\n[![Call 3rd Party Web Service Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/Call3rdPartyWebService/Builds/WebApp_Default%20Web%20Server/)\n[![Call 3rd Party Web Service README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](Call3rdPartyWebService)\n\nThis example demonstrates how to use a WebVI to call the [Earthquake API](https://earthquake.usgs.gov/) from the [US Geological Survey](https://www.usgs.gov/) and display recent earthquakes on a web page.\n\nOn the diagram, this WebVI uses [HTTP GET](https://www.ni.com/documentation/en/g-web-development/latest/node-ref/get/) to query the Earthquake API for earthquakes from the last 30 days. The WebVI also uses [Unflatten from JSON](https://www.ni.com/documentation/en/g-web-development/latest/node-ref/unflatten-from-json/) to convert the results from JSON to LabVIEW data.\n\nOn the panel, this WebVI displays a summary of the results in a data grid and a map of the selected earthquake region in a URL Image indicator.\n\n![Screenshot of Demo](Call3rdPartyWebService/readme_files/Screenshot.gif)\n\n## Call JavaScript From a WebVI\n\n[![Call JavaScript From a WebVI Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/CallJavaScriptFromAWebVI/Builds/WebApp_Default%20Web%20Server/)\n[![Call JavaScript From a WebVI README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](CallJavaScriptFromAWebVI)\n\nThis example is a simple 4-bit calculator using the JavaScript Library Interface (JSLI). The math functions and Log to Console button illustrate different methods of using the JSLI. Add (JSLI) and Multiply (JSLI) use external JavaScript files to implement their functions. The Log to Console button logs text to the browser debug console using the browser-supported `console.log` function. After building and deploying the WebVI to a browser, open the browser developer tools (Press F12 in most browsers) and select the Console tab to view the console log.\n\nOn the panel, this WebVI has X and Y binary inputs. The user clicks these to change the numerical values of the inputs. The Outputs of X+Y and X*Y are updated with binary and numerical indicators.\n\n![Screenshot of Demo](CallJavaScriptFromAWebVI/readme_files/Screenshot.gif)\n\n## Call LabVIEW Web Service\n\n[![Call LabVIEW Web Service Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/CallLabVIEWWebService/Builds/WebApp_Default%20Web%20Server/)\n[![Call LabVIEW Web Service README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](CallLabVIEWWebService)\n\n**Note: The Call LabVIEW Web Service demo requires the included LabVIEW Web Service to be running locally on your machine.**\n\nThis example demonstrates how to create a WebVI that makes requests to a LabVIEW web service, and how to create a LabVIEW web service that can respond to requests from a WebVI.\n\n![Screenshot of Demo](CallLabVIEWWebService/readme_files/Screenshot.gif)\n\n## Call SystemLink Data Services\n\n[![Call SystemLink Data Services](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/CallSystemLinkDataServices/Builds/Full%20Data%20Services%20App_Default%20Web%20Server/)\n[![CallSystemLink Data Services README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](CallSystemLinkDataServices)\n\nThis example demonstrates how to use a WebVI to communicate over networks with SystemLink Tags after connecting to SystemLink Cloud or SystemLink Server, an on-premises web server.  \n\nOnce you complete the necessary steps, you will know:\n\n- How to set up, build, and host web applications.\n- How to set up and connect to SystemLink Cloud or SystemLink Server, an on-premises web server.\n\n![Screenshot of Demo](CallSystemLinkDataServices/readme_files/Screenshot.gif)\n\n## Connect WebVI to WebSocket Echo Server\n\n[![Connect WebVI to WebSocket Echo Server](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/ConnectWebVIToWebSocketEchoServer/Builds/WebApp_Default%20Web%20Server/)\n[![Connect WebVI to WebSocket Echo Server](https://img.shields.io/badge/Details-README_Link-orange.svg)](ConnectWebVIToWebSocketEchoServer)\n\nThis example uses the WebSockets API in G Web Development Software to connect to the WebSocket Echo Server hosted by https://ifelse.io/. The WebVI connects to the server, sends a message, and receives the same message from the server.\n\nOn the diagram, this WebVI uses WebSocket VIs to open a connection to the echo server, send messages, read received messages, and close the connection. The WebVI also formats sent and received strings to display on the Messages indicator.\n\n![Screenshot of Demo](ConnectWebVIToWebSocketEchoServer/readme_files/Screenshot.gif)\n\n## Customize WebVI with CSS\n\n[![Customize WebVI with CSS Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/CustomizeWithCss/Builds/WebApp_Default%20Web%20Server/)\n[![Customize WebVI with CSS README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](CustomizeWithCss)\n\nThis example demonstrates how to customize the styling of a WebVI using CSS.\n\nThe underlying technology used by WebVIs is HTML Custom Elements. One of the advantages of using HTML Custom Elements is the ability leverage CSS in a web application that separates style from the content. For example, you could create a custom CSS file that is shared across your organization for custom styles and layouts.\n\n![Screenshot of Demo](CustomizeWithCss/readme_files/Screenshot.gif)\n\n## Embed Content into a WebVI\n\n[![Embed Content into a WebVI Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/EmbedContentIntoWebVI/Builds/WebApp_Default%20Web%20Server/)\n[![Embed Content into a WebVI README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](EmbedContentIntoWebVI)\n\nThis example demonstrates how to embed custom web content into the WebVI panel using G Web Development Software. WebVIs use HTML to define and describe the content of the panel that is loaded in a web page. This means that you can add custom HTML content to appear alongside the generated HTML.\n\n![Screenshot of Demo](EmbedContentIntoWebVI/readme_files/Screenshot.gif)\n\n## Incorporate User Resource into WebVI\n\n[![Incorporate User Resource into WebVI Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/IncorporateUserResources/Builds/WebApp_Default%20Web%20Server/)\n[![Incorporate User Resource into WebVI README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](IncorporateUserResources)\n\nThis example demonstrates how to add resource files such as images, CSS files, JavaScript files, and HTML files to your web application component and reference them in a WebVI without needing to upload these files to a web server.\n\nYou can also use resource files to augment the WebVI's capabilities. For example, you can add other HTML widgets or scripts and reference them in the HTML view of the WebVI.\n\n![Screenshot of Demo](IncorporateUserResources/readme_files/Screenshot.gif)\n\n## Multiple Top-Level WebVIs\n\n[![Multiple Top-Level WebVIs Demo Link](https://img.shields.io/badge/Details-Demo_Link-green.svg)](https://ni.github.io/webvi-examples/MultipleTopLevelWebVIs/Builds/WebApp_Default%20Web%20Server/)\n[![Multiple Top-Level WebVIs README Link](https://img.shields.io/badge/Details-README_Link-orange.svg)](MultipleTopLevelWebVIs)\n\nThis example demonstrates how to create a web application with multiple pages by using multiple top-level WebVIs and Hyperlink controls to link between them. When you build the web application, each top-level WebVI generates a separate HTML file with links to the other HTML files that are generated.\n\n![Multiple Top-Level WebVIs Demo Link](MultipleTopLevelWebVIs/readme_files/Screenshot.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fni%2Fwebvi-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fni%2Fwebvi-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fni%2Fwebvi-examples/lists"}