LabVIEW, Websockets, and SVG

[smarlow]

Haven't downloaded any of the recent code, but if I recall the HTTP 1.1 Specification explicitly requires CRLF sequences in the response status and headers, including the header terminator (empty line). See section 6 and other sections referenced therein. Granted many browsers don't care, but if you're designing something from the ground up, I'd say it would be best to stick with the specification and not have to rely on quirks that might be implemented in whatever your favorite browser is.

As Shaun implied, the line terminator constant in LabVIEW is platform dependent, I'd stick with strings containing "\r\n".

Will do that. I didn't see in the spec that the empty line is actually required as a terminator, thanks. I've got to remember to stick hard to the spec. The original version was just a toy, and since I only ever used Chrome as an interface, I only tested on that platform. There are many changes to the framework in the works, and I'll try to remember to make everything friendlier to those browsers which also adhere to the specs. I am hoping someone will help me with coding and testing. I'm pretty busy lately, and I'd like progress to go a little faster.

[smarlow]

I have created a new blog that covers this topic at http://blog.evexiallc.com/

[LV_Donkey]

Hello all, I am a beginner. I need a hand. Who can explain the image in here http://updates.html5rocks.com/2011/08/What-s-different-in-the-new-WebSocket-protocol ?(Sorry, I don't know how to paste an image in my post.)

[smarlow]

Hello all, I am a beginner. I need a hand. Who can explain the image in here http://updates.html5...Socket-protocol ?(Sorry, I don't know how to paste an image in my post.)

I assume you are asking about the websocket frame map:

This is a map of a typical websocket frame for the RFC6455 websocket specification. The numbers across the top starting at the left are bit numbers. The diagram is a description of the bits in a websocket frame. If you are using websocket RFC6455, the data must be arranged according to this diagram. Follow the link for the whole specification, or go to section 5 for a detailed description of the frame.

Edited February 25, 2012 by smarlow

[LV_Donkey]

Thank you for your help, smarlow. Another question: I have tested the files you uploading. I run the LabVIEW code in my computer in Jinan and put the webpaneltest.svg file into the shared folders using IIS. My friend in Shanghai connect the LabVIEW project using her computer. As a result, it works well. But I don't know why we need Kaazing Gateway Server software?

[smarlow]

Thank you for your help, smarlow. Another question: I have tested the files you uploading. I run the LabVIEW code in my computer in Jinan and put the webpaneltest.svg file into the shared folders using IIS. My friend in Shanghai connect the LabVIEW project using her computer. As a result, it works well. But I don't know why we need Kaazing Gateway Server software?

You do not need the Kaazing gateway to use WePanel. The LabVIEW program that is bundled is a websocket server.

[smarlow]

I've been doing some testing with the binary data transfer of websocket. Works well so far.

var wsURL=”ws://LocalHost:81/”;

ws = new WebSocket(wsURL);

ws.binaryType = “arraybuffer”;

Once you do that, you can treat the incoming message as a WebGL ArrayBuffer:

ws.onmessage = function(evt)

{

//view the array buffer as a dbl floating-point

var Y = new Float64Array(evt.data);

}

Read More at blog.evexiallc.com.

Edited March 3, 2012 by asbo
Condensed posts

[LV_Donkey]

I have tested the your demo using RGraph. But I can't see the correct interface by running the RGraphdemo.html. I can only see things as follows.

title="

[colinrebello]

There is another thread that deals with a similar concept.

Remote panels - a free HTML5 alternative that works in mobiles & browsers

based on a web server that uses a windows API to get the bitmap of the application window that needs to be remote controlled and sends that to the browser.

[madtofan]

Hi there!

So I tried this Websocket on a cRio.

The only thing that needs to be changed is the EOF,

I used the \r\n constant instead of CR\LF.

But theres one more problem that I am currently facing,

I cant access the svg file via web publish in the cRio. The svg file looks fine if I access to it via ftp.

But if I put it in the www folder and access via http, it comes out as text instead of graphics.

I tried a lot of method including creating a html file that calls the svg.

So far, none of them worked.

Currently using LabVIEW 2011 and Chrome ver 22.

[ShaunR]

Hi there!

So I tried this Websocket on a cRio.

The only thing that needs to be changed is the EOF,

I used the \r\n constant instead of CR\LF.

But theres one more problem that I am currently facing,

I cant access the svg file via web publish in the cRio. The svg file looks fine if I access to it via ftp.

But if I put it in the www folder and access via http, it comes out as text instead of graphics.

I tried a lot of method including creating a html file that calls the svg.

So far, none of them worked.

Currently using LabVIEW 2011 and Chrome ver 22.

He also has a website dedicated to this at http://blog.evexiallc.com/?p=37#comment-54.

Might be worth asking the question there also.

[madtofan]

my bad.

I didnt notice the mime.types part

so i went into the cRio ni-rt/system/webserver/ folder and added "image/svg+xml svg svgz" into the mime.types file.

now it pops up fine.

thanks!

[sharkera]

Hi smarlow,

 

I know this is a really old thread, but I am intrigued by the use of WebSockets and LabVIEW.  Lately I found a library that NI released:

https://decibel.ni.com/content/docs/DOC-38927 and I found the code to be very similar to yours.  I was just curious if you knew about this ... basically this library combines WebSockets and NI's CVT so that CVT tags get pushed out and exposed through Websocket connections.  Still have write your own UI web code, tho.  There's another package that's fascinating lately: http://labsocket.com/.  This commercial software supposedly "scrapes" your front panel generates a thin-client webpage for you.  Haven't tried it but looks promising.  Cheers!

[smithd]

 

Hi smarlow,

 

I know this is a really old thread, but I am intrigued by the use of WebSockets and LabVIEW.  Lately I found a library that NI released:

https://decibel.ni.com/content/docs/DOC-38927 and I found the code to be very similar to yours.  I was just curious if you knew about this ... basically this library combines WebSockets and NI's CVT so that CVT tags get pushed out and exposed through Websocket connections.  Still have write your own UI web code, tho.  There's another package that's fascinating lately: http://labsocket.com/.  This commercial software supposedly "scrapes" your front panel generates a thin-client webpage for you.  Haven't tried it but looks promising.  Cheers!

 

 

Hey sharkera,

 

That toolset actually consists of a few things.

 

The first package, tagwebclient, is a javascript+HTML web page along with some LabVIEW type definitions which are intended to allow you to create new web services which provide tag-oriented data to the web using a standard interface. At present it needs some work, but the basic concept is down. For example, there is a "tag browse" page which requests the available list of tags from a correctly-formatted web service.

 

The second package, cvt web addon, is a LabVIEW web service which uses the CVT and aims to meet the contract required for the tagwebclient. Originally, these packages were combined but we are interested in making a web service which supports the new tag bus library (which is basically CVT on a wire): https://decibel.ni.com/content/docs/DOC-36995

 

Finally, the cvt web addon does have a sample websocket server. However, to the best of my knowledge it currently just supports sending strings back and forth. It is not used to transfer tag data -- standard labview web service functions are used for that.

 

Thanks,

Daniel

[Jordan Kuehn]

I'll bring this back to life one more time.  I'm trying to use the webpanel demo, but I'm getting errors in the browser that suggest that jQuery is not being included correctly in the SVG file.  I've attempted to modify the SVG file to include the libraries, but this generates other errors.  Google suggests that jQuery assumes that it exists in HTML rather than SVG which may be causing the problems.  Is this an issue that others are encountering?  Could this simply be that I have up to date browsers and javascript installed and support broke along the way or am I doing something stupid?  I can navigate to 127.0.0.1:81 in Chrome and it begins downloading data and the VI shows a connection, so I think things are ok on that end.

ReferenceError: $ is not defined webpanel.js:34

Edit//

By downloading jQuery 1.9.1 and changing line 1321 from

if ( !all || !a || !all.length ) {

to

if (!all || !a || !all.length || !a.style) {

as described here I was able to get WP_jQuery.svg to work.  This page suggests it is a jQuery bug that may not have affected older browsers.  Perhaps a new release with the modified jQuery source is in order.

Edited September 16, 2014 by Jordan Kuehn

[CraigC]

Hi,

 

I had a quick go at thisin order to learn some javascript.  Below I have got the websocket server running from a pure script file, no jquery but also no SVG.  I managed to get the Front panel of a vi displaying into an HTML 5 canvas and get canvas mouse clicks propegated back to LabVIEW.  You can also resizethe vi and the canvas is adjusted accordingly which means you should be able to display a viof your choosing into the canvas.  I managed to send the FP over as a byte array and load this into the canvas as a dataURL.  I dontknow if this is any quicker than using JSON etc but it seems to work reasonable well.  I have posted this as hopefuly it will serve as a simple example of how to setup websockets.

 

Craig

 

First time adding attachment, hope it works

 

Re-uploaded with missing class

 

Websockets.zip

Edited November 11, 2014 by CraigC

[VDB]

Hi,

 

unfortunately, the class "websocket.lvclass" is missing.

 

VDB

[CraigC]

Hi,

 

I have re-uploaded with the missing class.  It is the same class created by the original poster I have just used his example to get my head around what is happening with websockets.  Hope it helps though.

 

Craig

Edited November 11, 2014 by CraigC

[Eraq]

Craig,

Thanks for the code. It is a big help in understanding websockets. One thing I  noticed about the code you uploaded is that whenever a new page is opened or a page is refreshed a connection is added but there is no way for a connection to be removed once a page is closed. I believe I noticed that a weird character is sent by the client when a page is closed but have not been able to find any documentation of this. I am having trouble conceptualizing how to handle closing connections that are no longer in use. Thanks for any information.

[ShaunR]

I believe I noticed that a weird character is sent by the client when a page is closed but have not been able to find any documentation of this.

 

Close frame?

[Brad Fuller]

Is this topic still alive?  I have invested a huge amount of time in a LV2017 application, and now I would like to be able to control the multiple front panels from remote using websockets. I have hit a roadblock with the Labview method in that the plug-ins required are not allowed by browsers. It seems like this websocket approach might work with any browser with no need for the Labview Run Time on the client-----I would like to use Android mobile phones for instance. Is "smarlow"still here?

[JKSH]

6 hours ago, Brad Fuller said:

Is this topic still alive?  I have invested a huge amount of time in a LV2017 application, and now I would like to be able to control the multiple front panels from remote using websockets. I have hit a roadblock with the Labview method in that the plug-ins required are not allowed by browsers. It seems like this websocket approach might work with any browser with no need for the Labview Run Time on the client-----I would like to use Android mobile phones for instance. Is "smarlow"still here?

There are multiple demonstrations in the wild about using WebSocket with LabVIEW. Google should be able to help you.

Here is one endorsed by NI: https://knowledge.ni.com/KnowledgeArticleDetails?id=kA00Z000000kJV5SAM

@smarlow has not posted in over a year, but might be lurking: https://lavag.org/profile/17965-smarlow/

[smarlow]

I am still here.  It's just by chance that I have reemerged here today.  I used to have a bunch of code posted at my old company, but that domain no longer exists.  I still have the example code, but most of it is too complicated, and will take a long time to slog through if you're just starting with Javascript/HTML. 

If you want to do a 'homebrew' approach, I can help you get the websocket link established in LabVIEW.  That part is easy.  What's not so easy is all the Javascript you have to do on the browser side.  You can use an open-source canned script library like https://www.rgraph.net/ to do graphs and dial indicators, etc.  You can also use standard HTML5 buttons and slider controls, spin controls, etc. for inputs.  Doing that requires you to know how to mix HTML with Javascript.  Your other option is to pay $$$ for something like LabSockets, or the LabVIEW NXG web VI option.

[Gribo]

Shameless plug:

Here is another example of WebSockets: