-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #94 from ni/guides
WebVI CSS Guide first release of common examples for NXG 3.1
- Loading branch information
Showing
19 changed files
with
1,490 additions
and
206 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "default": true, | ||
| "line-length": false, | ||
| "no-bare-urls": false, | ||
| "no-empty-links": false, | ||
| "no-trailing-punctuation": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| # markdown-spellcheck spelling configuration file | ||
| # Format - lines beginning # are comments | ||
| # global dictionary is at the start, file overrides afterwards | ||
| # one word per line, to define a file override use ' - filename' | ||
| # where filename is relative to this configuration file | ||
|
|
||
| # General language | ||
| amongst | ||
| i.e. | ||
| e.g. | ||
| lossy | ||
| learnability | ||
| unflatten | ||
| checkbox | ||
| checkboxes | ||
| checkmark | ||
| checkmarks | ||
|
|
||
| # General Technical Terminology | ||
| api | ||
| apis | ||
| enum | ||
| enums | ||
| CSV | ||
| YML | ||
| timestamp | ||
| timestamps | ||
| namespace | ||
| namespaces | ||
| dequeue | ||
| subdiagram | ||
| subdiagrams | ||
| subfolder | ||
| subfolders | ||
| i8 | ||
| i16 | ||
| i32 | ||
| i64 | ||
| u8 | ||
| u16 | ||
| u32 | ||
| u64 | ||
| boolean | ||
| losslessly | ||
| utf-8 | ||
| utf-16 | ||
| Uint8Array | ||
| async | ||
|
|
||
| # Web Terminology | ||
| JSON | ||
| CSS | ||
| UI | ||
| CORS | ||
| F12 | ||
| hostname | ||
| LDAP | ||
| WebSocket | ||
| WebSockets | ||
| HTTP | ||
| HTTPS | ||
| IETF | ||
| iframe | ||
| iframes | ||
| url | ||
| urls | ||
| TypedArray | ||
| TypedArrays | ||
| polyfill | ||
|
|
||
| # NI Terminology | ||
| LabVIEW | ||
| VI | ||
| VIs | ||
| GVI | ||
| GVIs | ||
| SubVI | ||
| SubVIs | ||
| NXG | ||
| nipkg | ||
| ni | ||
| ni.com | ||
| SSP | ||
| SystemDesigner | ||
|
|
||
| # Web Module Terminology | ||
| WebVI | ||
| WebVIs | ||
| JSLI | ||
| SystemLink | ||
|
|
||
| # Example Terminology | ||
| webvi-examples | ||
| USGS | ||
| DataQueue |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| language: node_js | ||
| node_js: | ||
| - "lts/*" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,86 @@ | ||
| # Call JavaScript From a WebVI | ||
|
|
||
| [](https://ni.github.io/webvi-examples/CallJavaScriptFromAWebVI/Builds/WebApp_Web%20Server/) | ||
| []() | ||
|
|
||
| This 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. | ||
| This 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. | ||
|
|
||
| On 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. | ||
|
|
||
|  | ||
|
|
||
| # Dependencies | ||
| ## Dependencies | ||
|
|
||
| - LabVIEW NXG Web Module | ||
|
|
||
| # Setup | ||
| ## Setup | ||
|
|
||
| 1. Clone the [ni/webvi-examples](https://github.com/ni/webvi-examples) repository to your machine. | ||
| 2. Open `CallJavaScriptFromAWebVI\CallJavaScriptFromAWebVI.lvproject` | ||
| 3. Open `index.gviweb` and click the **Run** button. | ||
| 4. Build the web application. | ||
| a. Open `WebApp.gcomp`. | ||
| b. On the **Document** tab, click **Build**. | ||
|
|
||
| **Note:** To view the build output on your machine, click **Locate Directory in Windows Explorer** on the **Document** tab once your application finishes building. You can automatically launch and view the Web application locally by going to **System Designer** >> **Web Server** >> right-click **WebApp.gcomp** >> **Run** | ||
| **Note:** To view the build output on your machine, click **Locate Directory in Windows Explorer** on the **Document** tab once your application finishes building. You can automatically launch and view the Web application locally by going to **System Designer** >> **Web Server** >> right-click `WebApp.gcomp` >> **Run** | ||
|
|
||
| # Hosting | ||
| You can manually the move the build output found at `\CallJavaScriptFromAWebVI\Builds` to any web server. This project also includes a Distribution (WebApp.lvdist) that can be used to build a package (.nipkg). Packages utilize NI Package Manager to automated the process of installing, upgrading, or removing the web app. A package is also a requirement for hosting a Web application on SystemLink Cloud. | ||
| ## Hosting | ||
|
|
||
| You can manually the move the build output found at `\CallJavaScriptFromAWebVI\Builds` to any web server. This project also includes a Distribution (`WebApp.lvdist`) that can be used to build a package (.nipkg). Packages utilize NI Package Manager to automated the process of installing, upgrading, or removing the web app. A package is also a requirement for hosting a Web application on SystemLink Cloud. | ||
|
|
||
| ### SystemLink Cloud Web App Hosting | ||
|
|
||
| ## SystemLink Cloud Web App Hosting | ||
| The following steps can be used to host the web app on SystemLink Cloud | ||
|
|
||
| 1. Open `CallJavaScriptFromAWebVI.lvproject`. | ||
| 2. Open `WebApp.lvdist`. | ||
| 3. Click the build icon in the top command bar of this distribution document | ||
| 4. Open a Web browser and navigate to https://systemlinkcloud.com/ | ||
| 5. Click the **Choose nipkg** button and select the nipkg built in step 3. | ||
| 6. When the upload is complete, click on your newly uploaded Web app from your list of Web apps | ||
|
|
||
| ## Local Hosting | ||
| ### Local Hosting | ||
|
|
||
| The following steps can be used to host the web app on a local web server | ||
| ### Hosting on the NI Web Server with a nipkg | ||
|
|
||
| #### Hosting on the NI Web Server with a nipkg | ||
|
|
||
| 1. Open `CallJavaScriptFromAWebVI.lvproject` | ||
| 2. Open `WebApp.lvdist`. | ||
| 3. Click the build icon in the top command bar of this distribution document | ||
| 4. Double-click the nipkg and follow the on screen instructions | ||
| 5. Open a web browser and navigate to `http://localhost:9090/CallJavaScriptFromAWebVI/` | ||
|
|
||
| ### Hosting on the NI Web Server by manually moving files | ||
| #### Hosting on the NI Web Server by manually moving files | ||
|
|
||
| 1. Open `C:\Program Files\National Instruments\Shared\Web Server\htdocs` | ||
| 2. Copy the `WebApp_Web Server` directory into the `htdocs` directory | ||
| 3. Open a web browser and navigate to `http://localhost:9090/WebApp_Web%20Server/` | ||
|
|
||
| ### Hosting on the LabVIEW 2009-2017 Web Server | ||
| #### Hosting on the LabVIEW 2009-2017 Web Server | ||
|
|
||
| 1. Open `C:\Program Files (x86)\National Instruments\Shared\NI WebServer\www` | ||
| 2. Copy the `WebApp_Web Server` directory into the `www` directory | ||
| 3. Open a web browser and navigate to `http://localhost:8080/WebApp_Web%20Server/` | ||
|
|
||
| # Details | ||
| This WebVI uses the JSLI to interface with simple functions defined in Add.js and Multiply.js, and compares the results with the LabVIEW NXG built-in functions. A single JSLI wraps JavaScript functions in the two external JavaScript files. The external functions are referenced by using the Function prototype symbol, or name, used in the JavaScript file. For example, AddWithJSLI is a function defined in Add.js. The corresponding JSLI function references the Symbol 'AddWithJSLI' to link the JavaScript function to the JSLI function. | ||
| ## Details | ||
|
|
||
| This WebVI uses the JSLI to interface with simple functions defined in `Add.js` and `Multiply.js`, and compares the results with the LabVIEW NXG built-in functions. | ||
| A single JSLI wraps JavaScript functions in the two external JavaScript files. | ||
| The external functions are referenced by using the Function prototype symbol, or name, used in the JavaScript file. | ||
| For example, `AddWithJSLI` is a function defined in `Add.js`. | ||
| The corresponding JSLI function references the Symbol `AddWithJSLI` to link the JavaScript function to the JSLI function. | ||
|
|
||
|  | ||
|
|
||
| The Add and Multiply nodes output the JSLI and built-in function results to the index WebVI. The Multiply.js file demonstrates a simple, external JavaScript function, and the Add.js file demonstrates a more complex JavaScript function. See these files for comments about the functions themselves. | ||
| The Add and Multiply nodes output the JSLI and built-in function results to the index WebVI. | ||
| The `Multiply.js` file demonstrates a simple, external JavaScript function, and the `Add.js` file demonstrates a more complex JavaScript function. | ||
| See these files for comments about the functions themselves. | ||
|
|
||
|  | ||
|
|
||
| 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. The log allows the user to see messages that can potentially help debug their application. | ||
| 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. | ||
| The log allows the user to see messages that can potentially help debug their application. | ||
|
|
||
|  |
Oops, something went wrong.