Turn your front panel into an interactive HTML5 site

[ThomasGutzler]

This is a weekend project (ok, several weekends now) I've been meaning to share for a while. It's a proof of concept which I'd like to get some feedback on before I invest more time.

The idea is to provide a toolkit that uses LabVIEW webservices to serve an interactive HTML5 representation of any application's front panel(s) as an easy way to monitor and control the application (over the internet) without the need for heavy applications or runtime engines. Just a browser. And because not everyone is a also web-developer, the work required to create that website should be done entirely by the toolkit. In my solution it's as easy as dropping a single vi on the block diagram, that registers the VI with the FrontPanelManager which takes care of all the data exchange between the website and the front panel.

Here's a screenshot of an example front panel showing all supported elements and its HTML version on chrome:

Obviously, there are some cosmetic differences that can be fixed later.

Controls on both LabVIEW front panel and HTML site act as controls and are synchronised across the two. By default, the website queries the front panel every 250ms for new data. The refresh rate can be changed with the cog button in the bottom right corner.

 

To run it

• open the project
• start the WebService
  
• Get the URL of Main.html and point your browser to it
  
• start "To Publish/Main.vi" and watch the data appear in the browser

As I said this is a proof on concept and it's a long away from being a toolkit. I'm working on functions that appear in the Tools menu to automatically add and configure the webservice and dependencies and many other things.

 

[2014]FPPublisher.zip

Edited September 24, 2015 by ThomasGutzler

[ned]

Cool idea. You might be interested in the similar-looking LabSocket (https://lavag.org/topic/17164-new-release-of-labsocket-the-easy-way-to-extend-labview-to-the-web/), which I think uses a similar approach (although I haven't used it myself nor have I downloaded your code).

[hooovahh]

Pretty neat.  I couldn't actually get it to display live data for some reason.  I tried in the source, and the EXE and when running both only 8080 gave me a static image of the FP, and 8001 was page not available.  That being said I was able to follow the code and understand it, and see where you can add methods for other control types.

 

This isn't any thing new really, but no one has released a free version that worked well, and is fully open, as far as I know.  Don't get me wrong I, think the toolkits others are making are awesome and hope they make lots of money off of them.  But in many cases the bosses just believe "software is free" and are often leery about buying 3rd party toolkits.  Wezarp is another one you've probably seen doing some self promotion.  Even NI has been dabbling in it at some level according to their keynote this year.

 

Until recently my development world was in a place where I would never really have a need for this type of software.  But now I could see some places where this could be very handy.  Especially with my somewhat limited experience with web design.

 

EDIT: Oh and VIRemote is another.

[ThomasGutzler]

I'm aware of "the competition" and they all charge a lot. I've looked at

• LabSocket
• WebPager (after handing over $2k for the software they charge an additional $100 per hour for tech support. WTF?)
• WebPanel (similar but dead?)
• Wezarp (uses VNC)
• NI's own Web UI Builder (dead, mainly thanks to Silverlight requirement I heard). Is that what you meant, hooovahh?

VIremote sounds like it's using different technology, since it seems to be limited to apple devices. I hadn't seem that one before.

 

What I wanted to do is to provide an open-source, low-cost or free tool that allows the developer to achieve similar functionality as the above via a web browser. Get them started in a pain-free way and if they're keen provide the ability to modify to their own needs.

I'm not a huge web designer myself. Enough to get this demo to work (for me at least) but for the final version I would probably need some input.

 

 

Pretty neat.  I couldn't actually get it to display live data for some reason.  I tried in the source, and the EXE and when running both only 8080 gave me a static image of the FP, and 8001 was page not available.

 

There is a weird "bug". When you open the "Show Public URL" dialog the web service seems to freeze until you close that dialog again.

[hooovahh]

• NI's own Web UI Builder (dead, mainly thanks to Silverlight requirement I heard). Is that what you meant, hooovahh?

Watch the Wednesday Keynote >> NI's Software Platform >> Around 7 minute mark

 

http://www.ni.com/niweek/keynote-videos/

 

"Port the entire LabVIEW engine to Java script".

 

Yeah I was messing with the Show Public URL function so that was probably it.  I commend your efforts and hope it is in a semi-complete state when I have a need for this type of thing.

[Ian]

Excellent idea.

 

However, I am having issues getting the demo to work. (I have not used the webserver before so it might be user error).

I am doing the following:

1) Open Labview project "FPPublisher.lvproj"

2) Enable Webserver.

        a) Select "Tools->Options...->Web Server"

 

        b) Select "Configure Web Application Server". A web page will open.

 

3) Open and Run "FPPublisher.lvproj->My Computer->To Publish->Main.vi"

4) Check Web Server Application has been published

        a) In  "Configure Web Application Server->Web Services Management"

 

In my case nothing shows in this box, which I think is causing the problem.

 

5) Get server webpage

        a) In project explorer, right click "FPPublisher.lvproj->My Computer->WebService->Public Content->Main.html->Show Public Content URL"

        b) Select either "local debugging" or "Application" and then "Copy URL".

6) View in webrowser.

        a) Paste URL into Chrome

 

If I use the "local debugging" url I get:

or the application url, I get:

 

Any suggestions/ideas of what I am doing wrong?

 

Appreciate your help

Ian

 

 

[smithd]

You need to right click on the web service in the project and select start. Doing "publish" will have it run in the application web server context, while "start" runs in the project context (and I think probably doesn't show up in the WIF viewer).

[ThomasGutzler]

You need to right click on the web service in the project and select start. Doing "publish" will have it run in the application web server context, while "start" runs in the project context (and I think probably doesn't show up in the WIF viewer).

 

That's right, you shouldn't have to play with the Webserver configuration at all.

I guess my "How to run it" description wasn't great. I've edited the post and added some screenshots to make it clear.

[Ian]

smithd, ThomasGutzler. Thanks for your help. I now have it working. Excellent.

[venugopal]

Hi Thomas,

 

 

Missing  G libraries error cannot start server shown when i start the web service

how to resolve this?

 

regards,

Venu 

[ThomasGutzler]

Missing  G libraries error cannot start server shown when i start the web service

how to resolve this?

 

What's missing?

 

Don't get too involved with this project. I'm currently rewriting it to get rid of the NI WebService and replace it with websockets. Should have an update out soon.

[venugopal]

Hi Thomas,

 

That's great news I am eagerly  waiting  for that demo. 

can we show the F.p on mobiles ? 

 

Thanks&Regards,

venu.

[ThomasGutzler]

That's great news I am eagerly  waiting  for that demo.

So am I

 

 

can we show the F.p on mobiles ?

 

I haven't tried that yet but it shouldn't be a problem as long as your browser supports HTML5 and websockets

[ThomasGutzler]

So it looks like I won't be able to continue my LabVIEW development in the near future (or at least have a major break) *sadface*

 

Is anyone interested in continuing development of the project?

 

It is now at the point where all dependencies to web services have been removed and replaced with web sockets. That means the page for the front panel can be viewed via file:// protocol and doesn't require a http:// any more. Web socket connection is established to a configurable port. It can handle multiple clients (how ever stupid that may be to give control over a single system to multiple users; makes sense if they're all indicators). It supports a bunch of common controls that can be represented as HTML5 and it supports representing any control as an image. I've implemented a basic config editor that can be used to select if a control should be represented as HTML or image.

 

Current version is attached.

FPPublisher.zip

[Jordan Kuehn]

It supports a bunch of common controls that can be represented as HTML5 and it supports representing any control as an image.

 

This last part doesn't seem to be working.  The path control and any other test controls I drop down don't seem to be recognized.  I've started working my way through your configuration code, but I thought I might check and see if there is a simple mistake I've made.

 

Edit//  Looks like some work is still to be done to get generic objects/controls to display as images.  I've worked on that some and made it work.  There are some other things I want to do as well.  Perhaps I'll post my changes when I'm done, though don't count on me to take things over.

Edited January 15, 2016 by Jordan Kuehn

[hooovahh]

So what is the likelihood that this type of thing could be used on a real-time system?

 

I have a simulated RT system in a VM and I started testing with it and I made some progress, but things still don't quite work.  I copied all the www files to the right location on the RT system, including the config file made setting the image type or not, and I modified the example to run without the event structure but instead poll the button values, then I ran the VI on the RT system.  I got an error in the following VI because it tried to read the front panel, when there isn't one on RT.  (Errro 1013)

 

FPPublisher\WebFrontPanel_class\CreateHTML.vi

 

This part of the code is relatively minor and just reads the size and color of a panel so I replaced the read with some constants for a test.  After this the code ran without error so I thought I may get lucky.  I went to the file browser from MAX and navigated to the following URL path in a web browser.

 

http://192.168.56.101/files/ni-rt/startup/www/Example.html

 

The page loaded up and...it was mostly blank.

 

 

I viewed the page source and it is attached.  Any idea why this wouldn't work?  I looked into several of the properties you call to make the page and I didn't find one that said it wasn't supported on real-time.

Example.htm

[hooovahh]

Okay I think I found the issue, of which I'd be curious to hear if NI has anything to say about it.  The issue is with getting the references to the controls and indicators.  On RT there is no front panel, so getting references to those controls isn't possible.  But the normal way you would do this is to use the Front Panel Property on the VI.  Reading the help is says it is available in Real-Time OS...but there is no FP in Real-Time...so it returns an error...so is this really available if it will always return an error?  Seems like these two things don't agree.

 

The reason this didn't return an error is because of a bug in the following VI.

 

\FPPublisher\WebFrontPanel_class\WebFrontPanel_Create.vi

 

The two for loops return references and errors, but if the loop runs 0 times (empty arrays) then the input error is cleared.  This should either be changed to shift registers, or add the incoming error to the merge errors already in the VI.

[Jordan Kuehn]

I haven't tried to make this work on RT, but definitely plan to.  Thanks for spending some time diagnosing the existing problems.

[JKSH]

On RT there is no front panel, so getting references to those controls isn't possible.

 

I don't suppose you have access to one of the shiny new Linux RT cRIOs that have a mini-DisplayPort for built-in GUIs? (cRIO-9030) I wonder if that works.

 

I've built a program for a cRIO-9030 which uses control/indicator property nodes and an event structure, so that means the references exist there. The cRIO is now with the customer though, so I can't experiment with it anymore.

Edited February 25, 2016 by JKSH

[smithd]

Okay I think I found the issue, of which I'd be curious to hear if NI has anything to say about it.  The issue is with getting the references to the controls and indicators.  On RT there is no front panel, so getting references to those controls isn't possible.  But the normal way you would do this is to use the Front Panel Property on the VI.  Reading the help is says it is available in Real-Time OS...but there is no FP in Real-Time...so it returns an error...so is this really available if it will always return an error?  Seems like these two things don't agree.

Theres a bunch of those, to the point that I don't find those properties in the help very trustworthy. I believe the explanation is that it can work on RT in interactive mode with the front panel open but not in an exe form? 

 

It will definitely work on the linux crios with displayports, as you have to check a little box which tells labview to compile it with the UI components.

 

You can use an invoke node on the VI, I think (control value.get all) but then you lose the signalling property nodes.

Edited February 25, 2016 by smithd

[himanka]

sir,

the example.vi is sincronized with my html page but it is only working on the follwoing mode:

file:///C:/Users/......./www/Example.html

how can i publish the page for another web page as well?

please reply.

thanks in advance.

himanka

[hooovahh]

Yeah I made a post on the the NI forums about this.

 

http://forums.ni.com/t5/LabVIEW/Property-is-supported-in-RT-but-will-always-return-an-error/m-p/3258138

 

It seems some of these UI nodes might work on the newer RT systems running Linux and have monitor outputs, and on remote front panels (I have yet to get this to work but crossrulz said it was possible).

 

So I'm thinking the only way to get this HTML5 version to work on RT, is to get these properties to work on RT, and at least for my vxWorks VM of RT, I haven't found a way to make them work.  If remote front panels causes other RT systems to have these nodes work, then I wonder if it is possible to publish these remote front panels, then have the RT connect to them, there by allowing the methods to work, and then you would be able to use this code to make HTML5 pages of it.  For my application, I think I can live with remote front panels and have the LabVIEW Web components installed.

[ShaunR]

Yeah I made a post on the the NI forums about this.

 

http://forums.ni.com/t5/LabVIEW/Property-is-supported-in-RT-but-will-always-return-an-error/m-p/3258138

 

It seems some of these UI nodes might work on the newer RT systems running Linux and have monitor outputs, and on remote front panels (I have yet to get this to work but crossrulz said it was possible).

 

So I'm thinking the only way to get this HTML5 version to work on RT, is to get these properties to work on RT, and at least for my vxWorks VM of RT, I haven't found a way to make them work.  If remote front panels causes other RT systems to have these nodes work, then I wonder if it is possible to publish these remote front panels, then have the RT connect to them, there by allowing the methods to work, and then you would be able to use this code to make HTML5 pages of it.  For my application, I think I can live with remote front panels and have the LabVIEW Web components installed.

 

When they say "RT" they really mean the Pharlap RT OS which is now called the NI Hypervisor, I think. (Windows PXI racks). That is Windows with an RT kernel.

 

Interesting that new embedded platforms are coming with GUIs. Should be able to get VNC working on them too.

 

Does anyone have a VMware or Virtualbox image of one of these GUI enabled systems?

Edited February 25, 2016 by ShaunR

[hooovahh]

When they say "RT" they really mean the Pharlap RT OS which is now called the NI Hypervisor, I think. (Windows PXI racks). That is Windows with an RT kernel.

 

Interesting that new embedded platforms are coming with GUIs. Should be able to get VNC working on them too.

 

Does anyone have a VMware or Virtualbox image of one of these GUI enabled systems?

Yeah again being a bit new to the RT scene I don't know all of the various OSs that were out there or supported.  At the moment the only official way to turn an industrial PC into an RT LabVIEW compatible OS is to follow these instructions, which as I said I think loads up some vxWorks  Pharlap OS.  Basically load up MAX, load the boot image on a USB drive, boot your PC with it and install.  There are several restrictions, the greatest one is you need to have a compatible network card, which generally supports Intel based ones, and a couple others.  Using instructions for VirtualBox posted on NI.com I was able to do this in a VM.

 

But what I don't see is any instructions or ways to do this with the newer Linux based RT OS.  If I had my hands on one I wonder if I could just pull the harddrive, perform an image of it, and then use that in a VM, but I don't.  I've been searching but I don't see anything on the idea exchange to add support for the Linux OS on industrial PCs.

 

EDIT:  It seems most of the Linux based RT systems have an ARM processor, but some are x86, these are the ones that pulling the hard drive image on might be useful.

[ShaunR]

Yeah again being a bit new to the RT scene I don't know all of the various OSs that were out there or supported.  At the moment the only official way to turn an industrial PC into an RT LabVIEW compatible OS is to follow these instructions, which as I said I think loads up some vxWorks/Pharlap OS.  Basically load up MAX, load the boot image on a USB drive, boot your PC with it and install.  There are several restrictions, the greatest one is you need to have a compatible network card, which generally supports Intel based ones, and a couple others.  Using instructions for VirtualBox posted on NI.com I was able to do this in a VM.

 

But what I don't see is any instructions or ways to do this with the newer Linux based RT OS.  If I had my hands on one I wonder if I could just pull the harddrive, perform an image of it, and then use that in a VM, but I don't.  I've been searching but I don't see anything on the idea exchange to add support for the Linux OS on industrial PCs.

 

Yeah. That's not what I'm after, though. I just want to open an appliance that someone else has gone through the excruciating pain of creating. Call me lazy but I've been mauled by Linux distros and the RIO evaluation board usb image so someone else can go through that for these platforms, thank you very much