Embed Size (px)
Citation preview
ni.com
Building Web Applications with LabVIEW Alexey Podolskiy
Technical Marketing Engineer
2ni.com
High Level Web Connectivity Options in LabVIEW
5ni.com
The way
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
ni.com
www.tinyurl.com/lvweb
https://decibel.ni.com/content/groups/web-services
7ni.com
Remote Connectivity Options in LabVIEW
8ni.com
LabVIEW Web Client Technologies
Native Technologies• HTTP Palette• TCP/UDP/FTP/SMTP/WebDav• LabVIEW Web Server
External Tools• LabSocket• WebPager• Cloud Dashboard
10ni.com
2. Web Services
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
11ni.com
What is a Web Server?
Software that accepts and responds to HTTP requests, usually from a browser.
12ni.com
LabVIEW Web Services
Web Service
LabVIEW Web Services host web content and respond to HTTP requests.
13ni.com
LabVIEW Web Services
Web Browser
Web Service
LabVIEW Web Services host web content and respond to HTTP requests.
14ni.com
LabVIEW Web Services
Web Browser
Web Service
LabVIEWWeb Method
LabVIEW Web Services host web content and respond to HTTP requests.
15ni.com
Web Service in a Project
16ni.com
Web Service in a Project
17ni.com
Static Content and Web Methods
Web Browser
Web Service
LabVIEWWeb Method
HTML
JS
CSS
18ni.com
3. HTTP
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
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”
20ni.com
HTTP Demo –Add two numbers
http://127.0.0.1:8001/WebService1/add?b=4.5&a=3.5
Ex.
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
23ni.com
URL Mapping
24ni.com
Browser to LabVIEW Communication
Web Browser
Web Service
LabVIEWWeb Method
25ni.com
Static Content and Web Methods
Web Browser
Web Service
LabVIEWWeb Method
HTML
JS
CSS
26ni.com
4. HTML/JS
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
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.
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
29ni.com
HTML and JavaScript Run in the Browser
Web Browser
Web Service
LabVIEWWeb Method
30ni.com
AJAX
Web Browser
Web Service
LabVIEWWeb Method
Asynchronous JavaScript and XML – web applications with behind the scenes updates
31ni.com
AJAX Demo –Add on Value Change
Ex.http://127.0.0.1:8001/WebClient/home.html
36ni.com
Add Two Numbers on Value Change - AJAX
• LabVIEW Web Method
39ni.com
AJAX
Web Browser
Web Service
LabVIEWWeb Method
Asynchronous JavaScript and XML – web applications with behind the scenes updates
40ni.com
5. JavaScript Libraries
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
41ni.com
JavaScript Libraries
Web Browser
Web Service
LabVIEWWeb Method
Libraries
43ni.com
Graph Example
48ni.com
4. The Cloud
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
49ni.com
Cloud Data
51ni.com
Cloud Demo
• Load Data from Cloud source
• Pass data to Google Chart
53ni.com
7. Next Steps
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
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!
55ni.com
7. Next Steps
1. Context
3. HTTP4. HTML/JS
7. Next Steps
2. Web Services
6. The Cloud5. JavaScript Libraries
ni.com
