Jump to content

Turn your front panel into an interactive HTML5 site

Recommended Posts

On 9/10/2018 at 0:20 AM, smithd said:

While I know 100 is just an example, its worth keeping in mind that 100 doubles is 6400 bits, 7 usec, or 0.00064% of your network bandwidth if updating every second.

Compound this with the fact that these doubles are actually being sent as ASCII strings, with some amount of precision and things get worst.  How about a table?  Or a 2D array of strings?  There could be lots of rows and columns and lots of data to send.

I agree that ideally the best approach is the compromise between the two extremes.  Don't send just 4, and don't send all, but instead send the 4 +/- some percentage of the total values (or maybe an upper limit of N).  The problem is this approach involving a skill I don't have alot of, which is web development.  As soon as it is in G I can handle it, but trying to send over say 20 of 100 values, then keeping track of the starting index, the scrollbars position, triggering to get more values, handing if the user scrolls too fast and needs to see blanks until the data refreshes, all is things I have difficulty with.  Basically what I'm getting at is you are right this is the best approach, but I'm not certain I'm ready for that type of challenge yet, I'll need to think about it, and hope I get like a week vacation to do it a few ways before refactoring half a dozen times first.

Also glad you got something on Windows 10, I haven't experimented with it much but I didn't think there was any additional issues last time I tested it.  Again maybe increases security causes issues?

EDIT:  Oh and Flavo you may want to get the latest release from here.  I don't know things are fixed, but your first image showed the first release with WebServices.

Link to comment
11 hours ago, hooovahh said:

Compound this with the fact that these doubles are actually being sent as ASCII strings, with some amount of precision and things get worst.  How about a table?  Or a 2D array of strings?  There could be lots of rows and columns and lots of data to send.

So to one specific point...doubles can only represent 17 digits so your worst case string would be "-N.NN....NNE-15" so 23 bytes ~3x overhead. But more to the point in all of this, its a display application so I'd personally expect your conversion code to be much less precise.

For the 2d string case..I guess it depends on how much you think is reasonable to support. To my mind if someone says "heres my 10 MB table of data, let me run this magic front panel tool I downloaded from the internet and use it to publish that data" my general reaction would be "good luck with that" :P

11 hours ago, hooovahh said:

The problem is this approach involving a skill I don't have alot of, which is web development. 

Fair enough. I don't have much in the way of web skills either, for something like that.

Edited by smithd
Link to comment
On 11/9/2018 at 3:44 PM, hooovahh said:

EDIT:  Oh and Flavo you may want to get the latest release from here.  I don't know things are fixed, but your first image showed the first release with WebServices.

No, Hooovahh, I used your last available version.

I did some other tests on different OSs (all those I could use) and I can say that:

Remote PC feature works fine if the original vi is running on: Win7 or Win Server 2016 (I suppose also all the previous versions). It does NOT work on Win 10 (trying to investigate why. I think it may be interesting to find the reason). When an old Win 8 PC will be back I'll try that OS too.

Also, works fine on IE, Chrome, Firefox, Opera, and NOT on Edge. Trying to find Safari to test it also. The fact that the issue is only on Win 10 AND Edge makes me think that some hidden policies indroduced by Microsoft in Win 10 are involved.

I'll keep in touch as soon as I got new info.

Link to comment
  • 4 weeks later...

Hello guys,
I developed something thay may help those who intend to use the Front Panel Publisher for their projects. It may be thought as an addon to the main project.
The goal is to create an engine that launches and publishes several independent sessions of the panels you want to publish on web.
Each session is unique and fully functional. Vis in the session communicate with engine and web pages through temporary files dinamically created and destroyed. Unused sessions are automatically destroyed after a customized (through config file) timeout has occurred to preserve server resources.

The operational flux is: a web page writes a temporary file notificating the (LabVIEW) engine a new request has occurred by a 32bit random number. The engine copies the files having the panels that must be published to a target location with a unique extension (the 32bit number). Support and web pages are also copied to a new folder in the web server operating directory (I used xampp for publishing the pages, but this mechanism should work for other web severs as well). 
The engine launches the vis with the publishing panels; the first one writes a temporary file that is intercepted by a web page that creates an iframe where to send the front panel page. That page periodically checkes if info in that file has changed. When that occurs refreshes the iframe with the new page.

This solution comes from a couple of odd behaviours noted during tests:

1. reentrant clones are not well supported by websockets. Often data are updeted in the wrong istance when more clones are open.

2. all pages that should be published must be opened at the same time (in the same session), otherwise odd behaviours in websockets may occur. You cannot stop a published vi otherwise all the other "clones" (even if they are not generated by reentrancy) are affcted by closures or lack of updating

I was able to use this engine for several sessions on different PCs and even android stuff at the same time.
Suggestions and corrections will be always well appreciated.

Some minor changes were introduced in the main FrontPanel Publishing project. Now the cfg file can be retrieved from a custom folder, so that you can work with different "clones" with the same configuration. I used the last Hooovahh's version to make these changes.

Finally I must send my deepest thanks to Marco Gualberto, who used his long term web skills to create the very simple and effective web pages of this project. 

FrontPanel PublisherEngine.rar

Link to comment
  • 3 weeks later...
5 hours ago, Infanto said:

Is there is any way that I can use all the "mechanical action"(Switching and Latching) of Boolean control.

No there is not.  Only the Switch method is possible because of how VI Server works.  Basically the latch only works if you can only change the button value from the UI.  If you ever want to change the button value from anything else like loading the value from a file, or setting it programatically at runtime, then you need it to be switch.  That being said the easy solution is to just create a local variable in the event case where the value change is being handled and write the boolean back to a False and you get basically the same functionality.  The only way this technique doesn't work is if you are polling the control value, at which point you'd need to look for some boolean crossing and handle it differently.

Link to comment

Not that I can think of.  I mean maybe the image only technique would work but I haven't tried it and wouldn't be surprised if it didn't.  Beyond that maybe something frames would work, where a VI creates a webpage, that is then inserted into another webpage.  No idea if this would actually work or the issues related.  It would probably be a lot of work but if you get anything working be sure and post your results here.

Link to comment
  • 1 month later...

Hello Guys, 

Can I control the Web page from a HTML file which I have made slight changes by copying the "HTML" source code of Front panel from the google chrome(using  ctrl+u) and saving as HTML file and read this file & give it to Create HTML.vi? Do you got any ideas?!


Thank you

Link to comment

Oh that is an interesting request.  In debugging I would do something like that where I would run the VI, it would generate the HTML and open it, and then from there I could CTRL+Shift+I (inspect source) and then look at all kinds of things like network traffic and UID values.  I can see why it might be valuable to edit the HTML code generated.  I'd suggest some kind of post processing VI which edits the already generated HTML, rather than forcing your HTML to be used.  This is because things with the HTML could be changed on a run of the VI, like UID values, labels, adding/removing controls, etc.  Starting with something that works, and then running something to post process seems like a better design in my mind, but that is without knowing the kinds of edits you make to the HTML.

Link to comment
hello everyone and happy new year. I am very interested in your wonderful project. I have been looking for a solution to be able to share a LABVIEW exe between several windows users.
A html solution like yours seems to meet the need. I ask myself some questions ...
- Does it work with an executable version?

-Is it possible to have a single html page to point so that each user retains the software in the same state (multiple ihm)?

-Is it possible that a message or a configuration ihm appears as a pop-up on the html page?

thank you for your answers

Link to comment

EXE - I don't remember all that is involved in making this work, but I did have it working.  I think the main thing is getting the paths right to the various external files needed for HTML generation.

Multi User - I did some preliminary testing with this by using reentrant VIs.  The idea was that each request to a page would create a new clone of a VI and that close is that that user would see.  It worked okay, but was a bit of a hack.  So it is possible but wasn't pretty.

Pop-Up - Never looked into this sorry.  I bet something could be done since there is a dialog on the HTML page for configuring the refresh rate (click the gear in the lower right).  I'm not good on the HTML side of things, just the LabVIEW side so I don't know what it would take to come up with dialogs and make them work.  It would be possible for something but my suggestion might be to try to put the configuration on the same single HTML page rather than a separate dialog if getting that to work is too hard.

Link to comment

As far as the EXE is concerned I agree with Hooovahh. I was able to create an exe an made it work correctly just checking the right paths for external files (i.e., support files or server publishing folder). Unfortunately exe clones did not work properly. I guess that the unique id for the control and indicator components were involved in the issue. Still working on a solution...

Link to comment
10 hours ago, Flavio Formica said:

I guess that the unique id for the control and indicator components were involved in the issue. Still working on a solution...

I don't remember that being an issue.  That being said it might not be a bad idea to append the instance ID to all UIDs just to ensure that it is going to the right place.  Still I did experimentations a while ago and I'm not sure what I did but I clearly had something working (or seemingly working) a while ago on an internal version.  I'm working on other projects at the moment so I haven't had time to support this, and with NXG seemingly getting better all the time it makes me want to look to using that for things like manual panel.

Link to comment
7 hours ago, ludo35 said:

Hi, I want only one programm running on the PC but reach by 2 or 3  users session. So I write each html page when vi open then rename in main.html. In this case all user can have the same view of programm.

I think multiple sessions to the same running VI has been supported for a long time.  It is really giving different sessions to different users that is the tricky part which I tried doing with reentrant main VIs.  What I'm saying is if you want 2 or 3 people to see the same page, I don't think any thing extra needs to be done but they all will see the same view.

Link to comment
On ‎1‎/‎9‎/‎2019 at 11:01 AM, ludo35 said:

Hi Flavio, I try your code but the second page can't be seen on IE or Mozilla (file session is ok)

Do you know why this appears ,



Hi Ludo, quite odd. I tried several times on any web browser without any issue. Have you got some error message or simply empty page? I'm using that code on different projects, so I think it may be some config problem (I hope….)

Link to comment
On ‎1‎/‎10‎/‎2019 at 1:41 PM, ludo35 said:

I have only the page one and no error. But I don't know if your example is good for me because I want only one programm running for manage harware.

Sorry Ludo, I lost something. You mean that my engine is not working on your example? Or it is not working at all, with its own pages? In the fist case, maybe, some configuration went wrong. In the second one, there might be some bug in my example...

Let me know, I'm curious to find the issue

Link to comment

Hi Ludo, I checked the project and I must ask you some questions about the actions that must be done before launching the example:

1) Did you copy the entire www subfolder to the appropriate web server page (i.e.: for xampp in c:\xampp\htdocs)?

2) did you check that the web base path in the config file is correct (by default, it is c:\xampp\htdocs\www; if you use another web server, it mighr be different)

3) did you start your web server properly (the engine does NOT start the web server automatically)?

4) did you type the correct url on the web browser (http://<your web server address>/www/main.html)?

Maybe the issue comes from one of these points. If not, tell me how you launch the engine so that I might find what goes wrong.



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.

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.