Turn your front panel into an interactive HTML5 site

[Ajayvignesh]

I'm looking for other way around of using this concept.  Web technologies like javascript has lot of cool featured controls (like table, graphs etc..).  I want to build an application with these javascript controls which directly draws in LabVIEW front panel instead of taking user to the web-browser.  Is there a way to do this?

[Gribo]

Sure, the web socket is bidirectional. you can transfer JSON back to your LabView app easily.

[ShaunR]

I'm looking for other way around of using this concept.  Web technologies like javascript has lot of cool featured controls (like table, graphs etc..).  I want to build an application with these javascript controls which directly draws in LabVIEW front panel instead of taking user to the web-browser.  Is there a way to do this?

 

This is a bit different in that LabVIEW generates an exact representation of the LabVIEW panel by scanning the VI FP and essentially converting controls and indicators to HTML and Javascript - the panel is automagically created for any application. A pure HTML/JS UI to a LabVIEW back end is much easier but you have to create the page for the application.

Edited March 2, 2016 by ShaunR

[kull3rk3ks]

I couldn't seem to get the Panel to work for me for some reason, so I played around with it and startet digging.

In this process I found a bug that affects localised hardware, where the decimal symbol is not a point.

To get the example running I had to do the following:

Set "use system decimal point" to false

 

and

 

 

Set the options on the formating string to use the decimal point.

There might be other instances of the GetJSONData Method where the format has to be changed, I didn't check all of them.

 

Cheers, 

 

Robert

 

 

 

[hooovahh]

On 1/13/2016 at 5:35 PM, Jordan Kuehn said:

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.  

So what was needed to make this work?  I have an array of controls that I would like to be seen as an image.  I found in the ObjectFactory.vi that I needed to add the Array class to the Init state, and then add a state in the Finish state to create the object, where I used the Control class.  Then when I ran the VI it asked how I would like to configure that control and I choose as an image.  But in the web page all that was seen was an outline of the array control, and nothing inside it.  Ideally what would be useful is any control that doesn't have a class made (default case) would be represented as an image rather than having to make special edits for each control type.

I had another feature request that I thought would be useful, and that is to have visible scrollbars in the webpage when needed.  I tested this by making my VI front panel large, then ran the webpage and no scrollbars were seen.  I then made my window small and they never showed up.  Is there something simple in the HTML page to enable these?  

[hooovahh]

Okay I'm not quite done updating it but here are a few improvements I was able to make.

The refresh rate is defined by an input, along with if borders should be drawn at the size of the front panel or not.  I'm thinking this should probably be a setting in the config file that already exists but for now this is inputs in the Publish.vi.

Controls that don't have a specific type defining how they should look default to the Control Class, which will show the control as an image.  This means the Show as Image setting is ignored for control types that don't have a specific class handling how they should be displayed.  Two examples of this are the cluster with random things in it, and a custom array that shows alternating picture ring images.

I believe I have scrollbars working.  To do this I had to change the Body HTML, and all controls, decorations, and text to absolute positioning, and then adjust their Left and Top positions slightly because of the drawn border.  Now if the web page is too small to show all the items in it (including drawn border, and controls outside the FP) then scrollbars appear.

Something I would like to see, and have no clue how to do at the moment, would be to handle controls moving, or being resized.  The example that came to mind was if I have an array with 20 large items in it, then I could set the number of rows visible to 20 so all items can be seen, and the scroll bars I mentioned earlier would scroll the page showing all items.  But then if I later only have 2 items to show, I'd like to set the number of rows visible to 2, then send the new image with just the two items in it.  The problem right now is, the page expects the image to be the size when there are 20 rows, so it stretches the image of 2 to the size of the 20.  What I would like is a way to update the HTML file, and then tell the page to refresh the whole thing if something in it changed size or possibly position.  Any thoughts on how to do this?  Thanks.

FPPublisher Hooovahh Edit.zip

[hooovahh]

Wow this is a lot of fun.  So I have code now able to move and resize the images by updating the style attribute along with the new image data sent.  Other control moving and resizing isn't done yet but could be.  I also updated the Select class to support changing menu items.  This means if you have a Ring with 3 things in it, you can update it with a property node to have 3 different things, or 4 things, and the select item in the web page gets updated.  I also worked on reducing the amount of data sent.  Right now on the refresh interval all data is resent, and for images that don't change often that is a lot of wasted time and resources.  So if the data hasn't changed from the last sent data it doesn't send it.  The exception to this is on the first load of the page it requests all data.  I'm not going to post these changes just yet, I'd like to see if there are any other bug fixes or features I'm going to implement first.

Once again thank you so very much for getting this started, so much useful code in here, and having it be open is the best part so that changes like these can be made by anyone with the time.

[Ian]

Hi hooovahh,

Thanks for the update.

I am having trouble running the newer version, as the "WebService" option in the Project is now missing. therefore I am unsure how to start the service.

Please can you provide instructions?

Thanks for your hard work.

Cheers

Ian

[hooovahh]

The Webservices dependency has been removed.  All that is needed is to run the Example.vi, then open the Example.html in a web browser, I've been using chrome because of the awesome page debug and inspect features.  Because of this it might be possible to use this on an RT system as well, you just might have to generate the HTML, and JS files from a host.

[Ian]

Great thanks for the information. I now have it working. Looks very promising.

One thing to note for other users, if you use the "Abort Execution" button in the toolbar, then not all processes are destroyed and the second time you try to run it, you will have errors.

You should use the "Stop" button on the GUI interface.

I am not sure if there is an easy way to prevent this. (I have removed the "about execution" button from the toolbar"), but it would be nice if there was a better way to close the Vi's running in the background. Thoughts?

On a similar note, can you recommend any web hosting sites (free) that will allow deployment of the generated web interfaces?

Cheers

Ian

[hooovahh]

2 minutes ago, Ian said:

You should use the "Stop" button on the GUI interface.

...

Thoughts?

You should never use the abort execution button, unless you have to.  Pulling the rug from under any application is a bad idea and you should allow it to perform the cleanup operations that the developer made for it.  Many times in the LabVIEW world it has been said that using the abort button is like crashing your car into a tree to stop it.  It will stop the car, but it may have other consequences.  The more proper way to exit is to hit the red X in the upper right corner of the window, but of course for that to work the developer needs to add the Panel Close? event to an event structure, and then cause the code to perform the cleanup that pressing the stop button would have done.  In this example this wasn't done because it is just an example and not a full application.

As for your other question, the last time I needed to upload a website for free I used comlu which is apparently hosted through this site:

https://www.000webhost.com/features

They have FTP and other basic features, but there is no way you will be able to install the LabVIEW run time engine and various other tools to make this work from there.  If you need to have a site that is driven by this technology, you are either going to pay for full access to a VM, or make your own VM and run a web server from it.  I think this tool primarily can be useful from within a network, where a computer with a static IP in the corporate network can just serve pages for access within the network.

[hooovahh]

Okay I've come back with more, sorry about the wall of text.  Attached is a new version with most of the core code unchanged but with several new features.

• Webpages and VIs that are the pages can have spaces in their name
• Webpage names come from the VI title if there is one
• Rectangle decorations now work properly
  • Position and size can be updated periodically by using the config Decorations Can Change or using the Force Update (more on that later)
• Floating text decorations now work using the Text class
  • Position and text can be updated periodically by using the config Decorations Can Change or using the Force Update, size and boldness are sent only on start at the moment
• Default Refresh Rate can be set with the config
• Show Border which is the size of the FP can be set with the config, no way of updating this at the moment but I think it should be able to be
• Synchronous Requests enable the web page to only request new data, once it has received a reply from the last request
  • With this enabled the refresh rate can be set to 1ms without pilling up requests
  • With this enabled if no request comes in once every 5s a reply is automatically sent, this is in case a request is lost and no reply sent, this is per connection
• Reduce Sent Data can be set with the config
  • This will look at what data was sent for each object and not send it if the data hasn't changed.  The code still has to get all the values and attributes but can help in places where there isn't much changing often.
  • There is a separate list of objects, and what is sent, for each unique session.
  • The first request from the web page is for full data in case things have changed since the time the HTML page was made
• All controls/indicators on the UI support being shown as an image.
  • Controls that don't belong to a specific class will be defaulted to this mode
  • A control that is an image cannot be interacted with in the web page, except for boolean controls
  • When shown as an image, position, size, and visibility are also sent with each request along with the new image value
• New Value Only mode for all supported control types
  • This will send just the value of the control for each supported type, position visibility and other properties will only be sent using the Force Update
• New Force Update function
  • This is a VI that can be called from the main VI that will force objects whos references are passed in (or optionally all objects).  This means controls can be sent as a Value Only mode in most situations, but then if a property does change on an object, it can be forced to send its new attributes.
  • The example has been updated to have a button which shows and hides controls, and then an Update button that uses this Force Update function
• All controls support Visibility size and Position attributes which are sent on Force Update, or if the control is not Value Only
  • This also will update any captions or labels on corresponding controls for visibility, position, and value
• Progress Bar now supports ranges that are negative, and that don't start at 0
  • Ranges can be updated if the control is not Value Only, or if Force Update is used
• Ring controls now can have the items in the drop down updated
  • These are not updated if sent as Value Only, unless Force Update is used
• Picture Ring now supported
  • On start each unique picture that the picture ring can be is stored as a variable in the JS file, and then the value is sent for which to display
  • Code exists to try to detect duplicate Picture Rings, and only create one variable for each unique set of images, this also makes scanning faster
• Graphs now support up to two scales properly, but there is some kind of bug with multiple graphs not sure what it is yet
• String class now supports justification, background color including transparent, font color, font size, and boldness as attributes
• Captions, and Labels should work on controls now with some support for size
• External IP address can be set on Publish
  • This is necessary if you want the web page to be accessible from somewhere other than localhost
• Default Control Behavior is available on Publish
  • Here you can specify an array of control names that should default to Image Only, Value Only, or Value and Position
  • This supports control names that start with a common string too
• Show Config Dialog on Publish
  • If this is true, or if not all controls have been configured, then the dialog pops up to configure the page settings
• Config location moved into www directory
• Reorganization and cleanup

Things I'd like to see some day, but I don't intend on working on this any time soon

• More native control support, things like path controls, tables, trees, listboxes, dials, scrollbars, picture boxes, and Combo boxes
• Support more graph tools like zooming, setting ranges, and changing other graph settings
• Support for tabs
• Support for right click menus if possible
• RT Support
  • I think this one is possible, if the original static page is generated on the host, and the Value Only is used
• Multiple windows?  Maybe by opening new windows with new URLs.
• Independent pages for each client
  • Right now all clients share the same view of the same VI, it would be nice to be able to use a clone VI and have it generate new URLs and pages for each connection
• Better dynamic dispatch for creating the objects
  • Right now adding a new control type is a bit of a pain because dynamic dispatch isn’t used for selecting the class type for a GObject.  Doing this would mean just making a new class, and having it inherit from the control class
• Most VIs with no documentation, and some with the default icons, basically more documentation is needed
• VIPM Package could be made exposing just the 3 VIs needed, Publish, Force Update, and Cleanup

FP Publisher Hooovahh Edit 2.zip

[Jordan Kuehn]

 Awesome.  Sorry I didn't get around to advancing things like I had hoped!  I will try to look through this and your new goals to see what I can add if I have a chance.

[0_o]

Cool! Playing around I saw that there is lots to work on.

The main issue for me is that the CSS is embedded into the html making the page unresponsive.

I was hoping that moving to html5 will spare me the code I need to add to a VI to make it resizable.

In theory I can write a JS to clean and correct the CSS and add classes for all the controls that I use.

However, I don't have much free time and there are rumors that NI is converting their FP into JS and if that is so I will wait and spend my time elsewhere.

Is this tool something we need to work on? Does one of you know some specifics regarding a time table for upgrading the UI?

[hooovahh]

Any improvements you can make are appreciated.  I clearly don't know much about the web page side of things, I mostly was able to get done what I did with a lot of googling.  Plenty of room for improvements, but I am using it on a real project and it meets my needs.

As for the future of LabVIEW are you talking about the Tech Preview?

http://www.ni.com/en-us/support/software-technology-preview.html

WebVIs and porting the runtime engine to Java Script are things that have been announced, but the timelines mentioned (or not mentioned) makes me think it will be business as usual for a while longer.  I'm not saying it isn't cool, and I'm  not saying it isn't going to replace, or deprecate some of the work we are doing here, but I am saying you can use the code posted here today for free to create interactive webpages, and who knows when you'll be able to do the same with native NI technologies.

[0_o]

Yep.

The tool and the example worked fine and even demonstrated very well the need for html reload vs Jquery updates.

It was possible to correct the loaded html while keeping the server side running.

I'll ask a JS expert what is the best way to tackle the issues since I hate doing stuff the hard way.

I wonder if a headless VI can update the html without the memory being allocated in LV but rather only in the browser.

At the moment the memory and cpu are working twice for everything.

 

[Gepponline]

I developed an appication to manage a DB.
So I need to create an interface that could be accessed from different users that will make different queries on the DB so it should display different results.
Is this possible with this tool?

 

[hooovahh]

It probably would be possible.  But as mentioned earlier a limitation of the API at the moment is all users share the same front panel displays.  So having multiple users connected wouldn't work well, unless you can modify it to serve different pages to each user connected to the host.

[hooovahh]

So I don't have any spare time to improve this at the moment, but I do have this running on the embedded RT Linux with UI.  Before running the VI I needed to transfer the contents of the www folder to /usr/local/natinst/labview, and I needed to specify the IP address host in the example VI using the IP to string function. 

I'll admit things aren't 100% but I do have the example VI running on the Linux RT target, and after mapping a network drive to it in Windows (using Webdav) I can open the webpage and see the VI running on my RT machine from chrome on my Windows machine.  Not all of the controls look quite right, but interactions seem to work.

Then I installed Firefox on my Linux RT target by downloading it from here, and updated soundlib2 as described here.  The result is a similarly looking, semi-broken but interactive web page running on the embedded target.  Again looking a little broken, with images not being sent over, but even if this can't be correctly fixed, there are other solutions for controls with a limited number of images like picture rings, and buttons.

This is pretty exciting to me because it can mean that the same interface for interacting with a VI on the embedded UI, can be the same interface for controlling the same VI from any web browser that can access that target.

[RayR]

I modified the 2nd version (pre-hooovahh) and got it working on a remote PC over the same network.

My goal is to get something like this (or this code for now) working on an iPad or better an Android Tablet.  When I try on an iPad, I get a message saying that it cannot open the page because it is a local file.  Internet search did not provide solutions.  The android tablet is worse, it just says "file not found".

Has anyone tried to run the remote html code on a smart device (tablet, phone etc)?

Thanks,

RayR

[hooovahh]

So I've never actually tested this until today but I got it working without too much of an issue.  The older version (the one before my posted edits) didn't support remote systems very well.  You could only access the page from localhost.  In my version the Publish.vi has an input of what the host IP should be and if it is left blank it is localhost, but on my BD I have the unwired PCs IP address.  This address goes in the page and basically says where to get the web socket data from, and is used in the HTML JS Template.vi which creates the HTML file.  To access this page from a remote computer I've been using SMB file share in Windows (and mapped network drives for the RT) which admittedly is a bit odd and a web servers should be used instead.  This is using two different protocols, one to get access to the HTML file, and the other to use websockets to share the data.

I worked on improving that this morning and it worked.  I installed XAMPP on my Windows PC.  I then started up Apache (which is probably all that is needed) and then made a symbolic link, pointing a "Test" folder from my Apache to my www folder from the example.  I could then navigate to http://<My PC IP Address>/Test/Demo HTML5 Page.html on my local machine and the page came up with updated data.  I then put my Android phone on the same wireless network, went to the same address in Chrome and everything worked.  Drop downs, button clicking, etc.

So I think the trick is 1) You need to be using my edited version for access on anything other than localhost, and 2) You need a way to get access to the HTML file and the easiest for me was an Apache web server.  It would be really neat to see if I can also install Apache on the Linux RT system I have and also navigate to a web page that way.  Although reading through your post again I see you had it working on a remote computer so that means you already have the localhost issue fixed.

[RayR]

Thanks Hooovahh,

Yes, the localhost fix was an easy one.  Both the local and remote PCs run Win-7.  I shared the folder and when double clicking the Example.html it opened nicely and displayed the updated values as seen on the Example.vi n the local PC.

The Android tablet or iPad is a different story.  I have installed XAMPP and I seem to connect to their dashbard page (local) when attempting to connect to the local PC now running Apache.  See image below.  My question s:  How do I point Apache to Example.html?

Thanks,

RayR

[hooovahh]

What I did (not an expert BTW just like playing around) was from the XAMPP I clicked Explorer and searched for Dashboard.  Notice that is the folder you are in in your browser.  From there I found the root of my server was at:

C:\xampp\htdocs

So I ran the command 

mklink /J "C:\xampp\htdocs\Test" "C:\FP Publisher\www"

This makes Windows create a folder called Test which points to the www folder where the webpage is actually created.  Then from a browser you should be able to go to http://192.168.1.94/Test/Demo HTML5 Page.html and see the page at C:\FP Publisher\www\Demo HTML5 Page.html.  Even if the VI isn't running you should see the page with static data.  Then run the VI then refresh the page.

Obviously update the path in the mklink call to be the location on your disk to where your www folder actually is.

[RayR]

Thanks Hooovahh,

I got it working.    I missed the step to create a symbolic link to the html file.

I did not try your latest version, as I was not sure if all I needed to do was to execute Publish.vi.  I could not find your Demo Html5 file.

I will now explore controlling the software using this method.  It will be an interesting experiment.

Many thanks,

RayR

Edited December 14, 2016 by RayR

[hooovahh]

I didn't include the HTML file in my zip because the Publish will create it, and then open it in the default browser.  It's pretty self contained and has several improvements, but the core basics are the same.  Glad you got it working, and glad I finally got around to testing it with a webserver.