LabVIEW Idea Exchange

cancel
Showing results for 
Search instead for 
Did you mean: 
smmarlow

Support for HTML5 and SVG in Web Publishing Tool

Status: New

The web format wars are over, and the plug-ins have lost.  Microsoft has relented and will support HTML5 and SVG in IE9, and has admitted that Silverlight's role will change to that of a Windows phone development platform.  Silverlight support on iPhone/iPad/Andoid/Chrome OS will likely never be fully formed, and will wither on the vine. 

 

New javascript/ecmascript engines that are much faster, and make use of multicore environments have arrived and work well.  The addiition of WebSockets means your browser can now open a tcp/ip socket.  I have done this, as I am sure others have, as well.  Drop an old-fashioned tcp/ip listener into your diagram, return the WebSocket handshake, and presto: you can now stream data directly to/from your browser.  WebSockets provides an "onmessage" event handler function which you can define.  Combine this with the SVG DOM, and you can transform SVG elements until your heart is content.  Two-way streaming of data between your browser and plain-old tcp/ip?  Goodbye web services, we knew you well. Good riddance, plugins.

 

I have built my own SVG UI objects using Inkscape (free), and wrote a script (notepad/Inkscape script editor, also free) to handle WebSockets communication without a gateway.  I have a simple LV class built on the TCP/IP functions that will stream data to/from a browser which is pointing to an SVG "webpanel" that I also built using Inkscape.  So far I have a simple waveform graph, buttons, LED's, progress bars, etc.  I have tested my Inkscape webpanels in Firefox 4.0 Beta and Google Chrome 9 and it works like a champ, and is very fast.  The old-fashioned LV webserver will serve up SVG files with the addition of a mime type. 

 

Screenshot_5.png

 

 

An alternative to SVG is the HTML5 <canvas> tag, which allows the rendering of graphics drawn using java/ecma script.  There is a free-for-personal-use script library called RGraph Library that you can download with lots of example code.  Here is RGraph/LabVIEW in action in Chrome 9:

 

 

Screenshot_7.png

 

 

So what is my idea?  

 

0. Ditch Silverlight.

 

1. Convert all of the nice-looking UI panel objects in the Web UI Builder from Microsoft XAML to SVG and distribute them with the  LabVIEW professional development license.  I am programmer first, and I admit my web panel objects don't look too good.

 

2. Design a script library for handling WebSockets communcation (or add native support for WebSockets to the Shared Variable Engine) and manipulating/updating the SVG UI objects from streamed WebSockets data.  Make this library open source.

 

3. Create a standard open protocol for streaming LabVIEW data that sits on top of WebSockets and is free and open.

 

4. Publish documentation for the SVG UI elements so users and thrid parties can create new UI objects.  Make use of the creativity of the community at large!

 

5. Modernize the Web Publishing Tool so that it will optionally output an HTML5 and/or SVG document that accepts streaming I/O from WebSockets.  The user could choose from compatible SVG elements to use in place of front panel elements on the VI being published.

 

6. Create a Web UI SVG element exchange for registered NI users to upload/download elements for free.

 

7.  Work toward the long term goal of adding SVG Import/Export to the control editor (with better editing tools), or make the CTL format of custom controls SVG/XML.

 

27 Comments
lordsathish
Active Participant

smmarlow,

That's a great idea. It would have been great if NI had chosen HTML5 instead of Silverlight. But I think because of the investment they have made into building the Web UI builder using silverlight, they will be reluctant to change to HTML 5 in near future. So as GregR suggest, HTML 5 and Silverlight have to coexists for a while. The community can probably build some stuff to use HTML 5,Websockets and share it for those who are interested to use them. Since Websockets are a level above TCP/IP can't we use the native TCP/IP functions to build the WebSocket functions ? I'm also wondering why John Bergmans solution is using the Kaazing WebSocket gateway. I guess Websockets should allow peer to peer communication. If this can be done without this Kaazing gateway, it will probably be attractive for more developers. One more thought is instead of SVG, wont WebGL objects be a better choice. I have little knowledge on these stuff, so ignore it I a made any stupid suggestions...

smmarlow
Member

@lordsathish

 

Yes it is easy to do peer-to-peer with websocket (you do not need Kaazing or any other gateway).  All you have to do is return the websocket handshake that is initiated by the browser by sending the appropiate string using LabVIEW TCP/IP.   Once the connection is made, you need only send/recieve strings using the tcp/ip read/write primitives.  

tst
Knight of NI Knight of NI
Knight of NI

> There are many factors that went into the decision to develop the Web UI Builder in Silverlight. Many of those related to finding the best technology for developing a web-based development environment.

 

 

I think that was actually an unfortunate decision. I understand the basic reasoning behind it, but I would prefer paying for a local IDE with installation and maintainance, if it meant I would not have to compromise on things such as right clicking or having a better chance of deploying to multiple targets.


___________________
Try to take over the world!
vitoi
Active Participant

 

Adobe have decided to abandon their Flash product for mobile devices and instead promote HTML5 (http://www.smh.com.au/technology/technology-news/adobe-surrenders-to-apple-in-mobile-flash-war-20111...). Hopefully this will help influence NI into using HTML5, which, if not already, would soon be standard on all web browsers on all platforms.

 

I think that having the ability to have the user interface on (multiple) web browsers would be the best thing to happen to LabVIEW since the Event structure.

 

Think how great this would be for something like a home automation system with multiple iPads (or similar) mounted on the wall and available loose.

X.
Trusted Enthusiast
Trusted Enthusiast
smmarlow
Member

Thanks for the continuing comments, everyone.  Glad to see this thread still alive, even if just barely.  It's interesting to see the news about the state of Adobe and Microsoft rich media plugins.

lordsathish
Active Participant

smmarlow,

I'm not sure if you are still working on this. But the example that you had posted in lavag does not work now (in chrome 15). Its because of the handshake and data framing changes in the websocket protocol. If you can post an update to that, it would be great. It will help new ppl like me get interested. 🙂

smmarlow
Member

@lordathish

 

Thanks for the heads up.  I apologize for letting this lapse, but I have been busy with other commitments.  I will be getting back to work on this soon, and will fix all of the problems.  I will also be creating new controls and indicators.  I will try to post a fix as soon as possible.  Once the other upgrades have been made, I will be moving the entire porject to its own website with the hope of getting an open source project moving.

 

Steve

vitoi
Active Participant

I wonder if the just announced Data Dashboard for LabVIEW (iPad and Android Tablet App) goes part way towards fulfilling this need. Or at least is a step in the right direction. See http://https://decibel.ni.com/content/docs/DOC-19387.

RavensFan
Knight of NI