Jump to content

Turn your front panel into an interactive HTML5 site


Recommended Posts

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?

Link to comment

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

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:

post-27848-0-49978600-1456935026.png

Set "use system decimal point" to false

 

and

 

post-27848-0-31700300-1456935042.png

 

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

 

 

 

  • Like 2
Link to comment
  • 2 months later...
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?  

Link to comment

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

Link to comment

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.

Link to comment

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

Link to comment

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.

  • Like 1
Link to comment

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

Link to comment
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.

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

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?

Link to comment

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.

Link to comment

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.

 

Link to comment
  • 2 months later...

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.

Link to comment
  • 3 weeks later...

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.

Chrome Windows Browser.png

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.

imageproxy.php?img=&key=b80eef8ede14d04eFirefox XFCE Browser.png

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.

  • Like 2
Link to comment
  • 1 month later...

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

Link to comment

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.

Link to comment

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

xampp.png

Link to comment

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.

  • Like 1
Link to comment

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

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.

  • Like 1
Link to comment

Join the conversation

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

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
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.