Jump to content

LabVIEW, Websockets, and SVG


Recommended Posts

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? thumbup1.gif

Link to comment
  • 4 weeks later...
  • 1 month later...

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 :thumbup1: 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.

Link to comment

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.

Link to comment
  • 1 month later...

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 by toyotabedzrock
Link to comment

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

Link to comment
  • 3 weeks later...

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.

Link to comment
  • 4 months later...

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.

Link to comment

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.

post-319-0-72419500-1318864710_thumb.png

Edited by David Wisti
Link to comment

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 by lordsathish
Link to comment
  • 1 month later...

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.

Link to comment

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 by David Wisti
Link to comment
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.