LabView instrumentoinnissa, 55492, 3op Labview in instrumentation
Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building...
Transcript of Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building...
![Page 1: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/1.jpg)
ni.com
Building Web Applications with LabVIEW Alexey Podolskiy
Technical Marketing Engineer
![Page 2: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/2.jpg)
2ni.com
High Level Web Connectivity Options in LabVIEW
![Page 3: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/3.jpg)
5ni.com
The way
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 4: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/4.jpg)
ni.com
www.tinyurl.com/lvweb
https://decibel.ni.com/content/groups/web-services
![Page 5: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/5.jpg)
7ni.com
Remote Connectivity Options in LabVIEW
![Page 6: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/6.jpg)
8ni.com
LabVIEW Web Client Technologies
Native Technologies• HTTP Palette• TCP/UDP/FTP/SMTP/WebDav• LabVIEW Web Server
External Tools• LabSocket• WebPager• Cloud Dashboard
![Page 7: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/7.jpg)
10ni.com
2. Web Services
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 8: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/8.jpg)
11ni.com
What is a Web Server?
Software that accepts and responds to HTTP requests, usually from a browser.
![Page 9: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/9.jpg)
12ni.com
LabVIEW Web Services
Web Service
LabVIEW Web Services host web content and respond to HTTP requests.
![Page 10: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/10.jpg)
13ni.com
LabVIEW Web Services
Web Browser
Web Service
LabVIEW Web Services host web content and respond to HTTP requests.
![Page 11: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/11.jpg)
14ni.com
LabVIEW Web Services
Web Browser
Web Service
LabVIEWWeb Method
LabVIEW Web Services host web content and respond to HTTP requests.
![Page 12: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/12.jpg)
15ni.com
Web Service in a Project
![Page 13: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/13.jpg)
16ni.com
Web Service in a Project
![Page 14: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/14.jpg)
17ni.com
Static Content and Web Methods
Web Browser
Web Service
LabVIEWWeb Method
HTML
JS
CSS
![Page 15: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/15.jpg)
18ni.com
3. HTTP
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 16: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/16.jpg)
19ni.com
Uniform Resource Locator OR “Web Address”
scheme://domain:port/path?query_string
URL
HTTP – Hyper Text Transfer Protocol
ProtocolLocation Resource path
Query String
http://www.ni.com/exampleURL?value=“true”
![Page 17: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/17.jpg)
20ni.com
HTTP Demo –Add two numbers
http://127.0.0.1:8001/WebService1/add?b=4.5&a=3.5
Ex.
![Page 18: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/18.jpg)
22ni.com
HTTP Demo –Add two numbers
Protocol Target Web Service Name
VI Name
http://127.0.0.1:8080/WebService1/add?b=2&a=4
Query
![Page 19: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/19.jpg)
23ni.com
URL Mapping
![Page 20: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/20.jpg)
24ni.com
Browser to LabVIEW Communication
Web Browser
Web Service
LabVIEWWeb Method
![Page 21: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/21.jpg)
25ni.com
Static Content and Web Methods
Web Browser
Web Service
LabVIEWWeb Method
HTML
JS
CSS
![Page 22: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/22.jpg)
26ni.com
4. HTML/JS
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 23: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/23.jpg)
27ni.com
What is HTML?
HTML is a markup language for describing web documents (web pages). It is the Front Panel of your web application.
Ex.
![Page 24: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/24.jpg)
28ni.com
What is JavaScript?
JavaScript can change HTML content. It is the Block Diagram of your web application.
Ex.
Turn on a lightbulbJavaScript Introduction
![Page 25: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/25.jpg)
29ni.com
HTML and JavaScript Run in the Browser
Web Browser
Web Service
LabVIEWWeb Method
![Page 26: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/26.jpg)
30ni.com
AJAX
Web Browser
Web Service
LabVIEWWeb Method
Asynchronous JavaScript and XML – web applications with behind the scenes updates
![Page 27: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/27.jpg)
31ni.com
AJAX Demo –Add on Value Change
Ex.http://127.0.0.1:8001/WebClient/home.html
![Page 28: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/28.jpg)
36ni.com
Add Two Numbers on Value Change - AJAX
• LabVIEW Web Method
![Page 29: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/29.jpg)
39ni.com
AJAX
Web Browser
Web Service
LabVIEWWeb Method
Asynchronous JavaScript and XML – web applications with behind the scenes updates
![Page 30: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/30.jpg)
40ni.com
5. JavaScript Libraries
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 31: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/31.jpg)
41ni.com
JavaScript Libraries
Web Browser
Web Service
LabVIEWWeb Method
Libraries
![Page 32: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/32.jpg)
43ni.com
Graph Example
![Page 33: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/33.jpg)
48ni.com
4. The Cloud
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 34: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/34.jpg)
49ni.com
Cloud Data
![Page 35: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/35.jpg)
51ni.com
Cloud Demo
• Load Data from Cloud source
• Pass data to Google Chart
![Page 36: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/36.jpg)
53ni.com
7. Next Steps
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 37: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/37.jpg)
54ni.com
Next Steps: www.tinyurl.com/lvweb• Getting Started Series
• Context• Web Services• HTTP• HTML and JavaScript• AJAX• JavaScript Libraries
• Publishing Data Series• Text Stream• Table Display• Chart• Historian
• Misc Examples• Google Maps• Screenscrape• Your Example Here!
![Page 38: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/38.jpg)
55ni.com
7. Next Steps
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
![Page 39: Building Basic Web Applications with LabVIEW printsouthafrica.ni.com/sites/default/files/2 Building Basic Web... · ni.com Building Web Applications with LabVIEW Alexey Podolskiy](https://reader030.fdocuments.in/reader030/viewer/2022012405/5baf8f7909d3f22d458ccd1c/html5/thumbnails/39.jpg)
ni.com