LabVIEW, Websockets, and SVG

[smarlow]

I normally don't post on LAVA, but lately I have been experimenting with the WebSocket protocol, ecmascript, and the SVG DOM for creating animated browser displays with data streamed from LabVIEW. The technique is surprisingly simple. All you have to do is create a script to change the attributes of the SVG elements using the Document Object Model. The WebSocket protocol has a built in message event handler that allows you to create your own script function which executes when messages are received. The browser connects to the socket server and sends a handshake when you create the WebSocket object in script.

All you need do is put a TCP/IP listerner in your diagram and return this handshake as described in the wikipedia article on WebSockets. Once the connection is made, you can stream bidirectional data between your LabVIEW application and any bleeding edge browser (Firefox 4, Chrome 9, Safari, IE9?). You can use the DOM to set the transform attributes of SVG elements using the streamed info (rotate, scale, set heigh, width, line points, etc.).

Now that we can all design our own GUI objects using Inkscape (free), I suggest a concerted effor to develop a standard SVG format, streaming protocol (based on WebSockets) and open-source script library. The very best thing about this is that it is all FREE, and runs on any platform that has an HTML5/SVG/WebSockets supporting browser (I'm keeping my fingers crossed for the next firmware revision of the Nintendo DSi), and requires NO PLUGINS. So all you folks with iOS and Android who feel left out by the WebUI Builder, or those of us who are infurated by it's $1500/yr price tag (after spending $ on LabVIEW RT/FPGA), Cheer Up!

Here are some screenshots of my efforts. The files are opened in the OS, but will also work when served by the old-fashioned "non-webservices" LV web server (you gotta add an SVG mime type to the mime-types file).

You can also use RGraph Library and the HTML <canvas> tag if you want to implement a non-SVG browser solution. The library is free for non-commercial use.

I suggest a community effort the create the standard SVG formats for UI elements, and a free, open-source ecmascript library for handling the messaging and DOM animation tasks. If there is interest, I will upload my script as a starting point, but I must warn that there is much improvement needed.

sm

Edited February 4, 2011 by smarlow

[ShaunR]

1. Where's the code then

2.FF4 and Opera are going to disable websocket support in future releases, over security concerns (rather foolishly).

3 Websockets are the future.

Edited February 4, 2011 by ShaunR

[smarlow]

1. Where's the code then

2.FF4 and Opera are going to disable websocket support in future releases, over security concerns (rather foolishly).

3 Websockets are the future.

Since I didn't set a lower limit on interest. Here is a ZIP file with the project and demo SVG and HTML files. It's crude, but works.

Some things about the project:

1. The script file for the SVG demo is www\libraries\webpanel.js file. There is a line of code in that scipt that is:

var ipAddr="LocalHost";

This line of code must be edited to replace LocalHost with the IP address of the server when serving the file in which this script is embedded. If you just want to test it by opening the WebPanelTest.svg file from the disk using Chrome, it must be set to localhost if you have your LV server enabled. You could make a VI that edits the webpanel.js file and sets the IP address on startup.

2. If you want to server the SVG file from the LV web server, you will need to add the following mime type to the C:\Program Files\National Instruments\LabVIEW 2009\resource\webserver\mime.types file:

image/svg+xml svg svgz

On the cRIO, the mime.types file is in the ni-rt\system\webserver folder

3. To test the SVG panel, open the LV 2009 project and run the SVGDemo.vi. Open the www folder, right-click the WebPanelTest.svg file, and select Open With > Google Chrome (you must install Chrome 8 or 9 first)

Watch the panel update from the VI. Use the slider to move the dial indicator.

4. To test the RGraph Library Example, open and run RGraph Demo.vi. Open RGraphdemo.html using Chrome.

You will need LV 2009 minimum for this demo. I'll keep watch here and try to answer any questions that are posted. I really would like to get an open-source project started based on this idea of a common SVG format for free Web UI controls/Indicators. If everyone pitches in a little, it could progress quickly and drive a stake through the heart of NI's misguided Silverlight adventure.

Too bad about the security issue confusion, but from what I read, it seems to be a proxy issue that affects Flash and Java, as well as WebSockets. I hope Mozilla.org wasn't too hasty in disabling WebSockets in FF Beta 8.

WebPanelLava.zip

[ShaunR]

Sweet. that's my (sad) weekend filled.

A little food for thought to maybe kick off a discussion.....With a small spattering of ajax to show/refresh an image and detect where in the image the user has clicked, and you wouldn't need all the extra libraries and widgets and you can standardise the deployment (even via CDN)

I think the real boon in websockets is purely for web browsers (not much difference for LV-LV client/servers). With a websocket, polling is no longer required and the server can stream data to the client. something that without websockets has always been a bit cumbersome and very limiting (requiring the user to refresh the page and use a intermediary webserver).

My thoughts here are along the lines of Google Maps (but for VIs) where we can have an ajax browser API that "seamlessly" interacts with a LV front end - A remote-panel that is more effective and configurable (not to mention open source) than NI remote panels whilst being able to leverage already established technologies (KML, SVG and the like). No dedicated, pre configured servers. Just VIs and browsers. Wouldn't it be nice to just put a link in to your webpage to download the script from the NI CDN and, hey presto, your front panel appears in the <div class="NI"> tag with a websocket stream straight to/from your VI?

[mje]

This looks awesome. Can't wait to play with it.

[ShaunR]

This looks awesome. Can't wait to play with it.

Me too. .

I'm going to mod Dispatcher this weekend and have a play

[smarlow]

Has anybody who downloaded this had a chance to play with it? Any thoughts?

[Shellback]

Are the charts able to have a time stamp on the x axis and keep it updated? This has been a deal breaker for me on my current project in trying to use remote panels or web UI hosted off a cRIO controller.

[Richard_Jennings]

Has anybody who downloaded this had a chance to play with it? Any thoughts?

Very nice Especially like that it is platform neutral.

[smarlow]

Are the charts able to have a time stamp on the x axis and keep it updated? This has been a deal breaker for me on my current project in trying to use remote panels or web UI hosted off a cRIO controller.

Sorry I've been away for a while and haven't been able to reply in a timely fashion. Right now, there is only one rudimentary "waveform graph" style chart. The example I posted is to get the ball rolling, in that it describes a protocol and javascript programming methodology that can be used to manipulate SVG objects using data streamed via websockets. In the script, there is a switch statement (analogous to a case statement in LV) that supports "properties" messages for each of the SVG group objects. One could bundle up a property message with the time stamps and use the data to update the text boxes that serve as axis scale labels. I was planning on doing this, but had only as a means of implementing an auto-scale feature. But since the scale labels are just text, using time stamps should be a snap.

I am in the middle of moving right now and won't have time to update the script until I get set up in my new house. Once there, I plan to return to this project, and possibly even create an open-source project for it. I envision a website where people can upload and download SVG group objects based on standard types (numeric, boolean, graph, etc.) that are designed to be manipulated by the script. I also plan to fully document the script, SVG objects, and process for creating new objects using Inkscape,. I will shamelessly admit that I am trolling for volunteers to help out, so if anyone with scripting experience wants to contribute, or has some ideas on improving the system, let me know.

Very nice Especially like that it is platform neutral.

Thanks! I plan to revise the script next month and create a new suite of objects and website. Check back next month, as I will post a link to the new site when I get it up and running.

[smarlow]

Are the charts able to have a time stamp on the x axis and keep it updated? This has been a deal breaker for me on my current project in trying to use remote panels or web UI hosted off a cRIO controller.

You can also use RGraph Library to create a chart with any strings for the X-scale labels. You'll have to do some javascript programming, but the library download has tons of examples. Once you create your HTML page with the appropriate RGraph script, you'll have to copy the RGraph javascipt files to your cRIO. You can use my websocket script (cut and paste it into a script tag in your HTML document) for streaming the data. It will create the socket and parse incoming messages. It is currently set up to handle vertical pipe character as the delimiter. If you get stuck, just send me a message; I'll do what i can to help you out. I'm not an expert js programmer, but I know enough to get by. In fact, I created the websocket script by cutting and pasting free examples I found on the web and mixing in some trial and error. The good thing about that is once you learn a little java/ecma script and how websockets works, a whole new free world opens up.

[toyotabedzrock]

1. Where's the code then

2.FF4 and Opera are going to disable websocket support in future releases, over security concerns (rather foolishly).

3 Websockets are the future.

Firefox and Opera disabled websockets. Server-Sent Events is still enabled in Opera.

You can enable websockets in Opera by going to the following url "opera:config#UserPrefs|EnableWebSockets" then scroll down and save the changes no restart needed.

Websockets can be enabled on Opera Mobile with the same url as the desktop version.

They both plan on bringing back websockets when the security problem is fixed.

It looks like Google and Opera are working on it. http://www.ietf.org/...t/msg07296.html

Also you might want to use BufferedRendering for SVG, it helps speed things up.

Edited May 26, 2011 by toyotabedzrock

[ShaunR]

Firefox and Opera disabled websockets. Server-Sent Events is still enabled in Opera.

You can enable websockets in Opera by going to the following url "opera:config#UserPrefs|EnableWebSockets" then scroll down and save the changes no restart needed.

Websockets can be enabled on Opera Mobile with the same url as the desktop version.

They both plan on bringing back websockets when the security problem is fixed.

It looks like Google and Opera are working on it. http://www.ietf.org/...t/msg07296.html

Also you might want to use BufferedRendering for SVG, it helps speed things up.

Firefox can also be used. FF4 is shipped with web sockets disabled but it can be enabled from the config page

Enable Web Sockets

For internet explorer you need an additional (experimental?) plugin which isn't really any better than NI's approach and a real pain since it is still the dominant business browser.

IE web sockets plugin

[lukepike]

Firefox can also be used. FF4 is shipped with web sockets disabled but it can be enabled from the config page

Enable Web Sockets

For internet explorer you need an additional (experimental?) plugin which isn't really any better than NI's approach and a real pain since it is still the dominant business browser.

IE web sockets plugin

Or you can use web-socket-js, which uses Flash sockets to emulate WebSocket. All you have to do is load the Flash file included (there's an example on the website) and serve the socket policy file at port 843 (more on that also on the website). The javascript code for using WebSocket is the same.

[lordsathish]

Hey smarlow,

Any progress in your idea of the community effort ? The code that you have uploaded does not work with Chrome 14. The hand shakes have changed in the recent version of chrome. I tried fixing the handshakes. But still I couldn't get the code working. The onclose callback gets called when I stop the LabVIEW code, but I think the onmessage callback is not getting triggered. I'm new to SVG, HTML5 stuff. Can someone post an update to this code to get it working on chrome 14.

[David Wisti]

Hey smarlow,

Any progress in your idea of the community effort ? The code that you have uploaded does not work with Chrome 14. The hand shakes have changed in the recent version of chrome. I tried fixing the handshakes. But still I couldn't get the code working. The onclose callback gets called when I stop the LabVIEW code, but I think the onmessage callback is not getting triggered. I'm new to SVG, HTML5 stuff. Can someone post an update to this code to get it working on chrome 14.

While this does apply to the latest draft specification ("hybi-10") of websockets, there is a bug in "websocket handshake string.vi". The MD5 can sometimes contain an ascii line feed. If it did, the "Search and Replace Pattern.vi"would screwup the MD5. This is pretty easy to fix by moving the MD5 after the search and replace. Here an fixed image of the fix.

Edited October 17, 2011 by David Wisti

[lordsathish]

I'm attaching the modifications that I did to fix the handshakes in "hybi-10". You'll have to copy this to the util folder in the WebPanelLava.zip file that smarlow has attached. I'm not sure if this handshake fix is good enough, I''m still not able to get the code working with Chrome 14.

util.zip

Edited October 18, 2011 by lordsathish

[ShaunR]

The framing has also changed

http://updates.html5rocks.com/2011/08/What-s-different-in-the-new-WebSocket-protocol

[smarlow]

Hello everybody. Thanks for keeping this thread going and for trying to fix the code to get it to work with the new protocol changes. My apologies for seeming to have abandoned this project, but family and other issues forced a hiatus recently. I should be able to get started work again soon. First on my list will be to make the changes necessary to get it working reliably with the new handshake and protocol. Then I will move on to cleaning up the ecmascript to a more coherent method of manipulating the SVG. I also want to better define and document the SVG panel objects (including adding some new items). Once that is done, I will give all the graphics a face lift.

I do sincerely hope this project can grow into a open source project with worldwide support. I know there are many other and probably better ways to do the SVG manipulation in the script. I'd also like to see participation from individuals with better graphics skills than my own. I've got a lot of work to do to get that going, so it may take a while. In the meantime, if anybody has an idea of where we might create a repository for code changes, etc., I am open to suggestions (OpenG.org maybe?). Thanks again for the help, and check back here for the changes, although I may not get them done until after the holidays.

[David Wisti]

I've used the websocket code posted here and updated it with the latest framing and mask. I created a simple websocket chat client that connects to echo.websocket.org. You can open and run "WS Chat Client.vi" in the attached Labview 2010 project. The server will echo back what you send.

WebSocketChatClient.zip

[David Wisti]

If echo.websocket.org is not working. You can also use the above websocket chat client with the following in host:

node.remysharp.com:8001

Note that the above websocket server does not echo back the chat. You can use Google Chrome and connect to the Websocket server at:

http://html5demos.com/web-socket

Edited November 30, 2011 by David Wisti

[ShaunR]

I've really got the web-socket bug now

http://screencast.com/t/TqFOatnbfmC

(frame rate is due to Jing, not the apps)

[jgcode]

I've really got the web-socket bug now

http://screencast.com/t/TqFOatnbfmC

(frame rate is due to Jing, not the apps)

Nice mirror.

[ShaunR]

Nice mirror.

Yup. This is what she looks like, face-on.

[jgcode]

I would have been more impressed if you posted that as a SVG instead of a jpg