Turn your front panel into an interactive HTML5 site

[hooovahh]

Oh I'm very grateful for you getting this started and sharing it with the community.  I've deployed a couple of projects that use this technology pretty successfully.  There is plenty of room for improvement, I just don't have time for it right now, and all the features needed for my projects are complete so there isn't much motivation either from a business stand point.  I think getting RT working well (with an included example) would be the next thing I'd want to work on.  I'm not much of a CSS/HTML guy so adding more control types is something I don't think I would take on.

[K4zz]

Hallo hooovahh,

now i am trying to extend my example to publish more than one HTML Page. but i am not getting the best results.its becoming slower.

"correct me if am wrong" i thought that the "Front Panel Publisher" Libary is only used once at the start. and later on....the HTML and js files are responsible for calling Values from LabVIEW.

is there any better way to extending the number of HTML Pages i am Publishing than the way am using. attached i am sending you a snapshot of my Project

PS: String Indicators have a maximum Font Size (150 pt) which cant be crossed. thats why i am Forced to send Images.

Thanks in advance

Edited November 2, 2017 by K4zz

[hooovahh]

There are a few VIs not setup to be reentrant.  There is a quick and dirty solution, which doesn't work quite as well as I'd like but may work for you.  If not you are welcome to try to make improvements.  The following two VIs need to be set to be reentrant preallocated in the execution of the VI:

\FP Publisher\Websocket_class\Protected\Connection Listener.vi

\FP Publisher\Front Panel Manager_class\Protected\FP Server.vi

And then the Open VI References in these two VIs need to have a decimal 8 constant on the Options terminal.  There are two in each VI:

\FP Publisher\Websocket_class\Protected\Connection Listener Repository.vi

\FP Publisher\Front Panel Manager_class\Protected\FP Server Repository.vi

Once I did that I was able to make a second example, and run them both, and then get updates from both at the same time.  The problem is the close function doesn't differentiate from one web page to the other, so running the Cleanup.vi on one, will cause all webpages to stop updating, and then trying to cleanup a second time will result in an error.  To cleanup only one at a time, more work would be needed to track the name of the VI better but for now this will allow you to have multiple web pages going at once, until I or someone else gets time to improve it.

[K4zz]

Thank you hooovahh,

as you said more work is needed to track the name of the VI better.

I am working on that problem, as soon as i get some results i will post it here.

my pleasure if you can check on it when its done.

regards

 

[ThomasGutzler]

K4zz,

I modified the source to be able to run multiple front panels. You can get a copy from github

It's in LV2016. Let us know if you have any problems.

[K4zz]

Thank you Thomas,

i have tried it out..seems like the clean up function is working well now.

regards

[hooovahh]

Okay another amazing feat thanks to Thomas.  I have a reentrant VI running on a Linux RT chassis.  Which creates two web pages at run-time (without anything from the host as pre-compile data), one for each reentrant instance of a VI creating two web pages, both that can be interacted with independently.  This is something NI's remote front panels cannot do, due to the reentrant VIs not having front panels in RT.  But with the embedded UI enabled that doesn't fully seem to be the case.  Still lots of work needed to clean this up, and I'm hoping performance doesn't take a big hit, otherwise I'll just revert to sending data about the reentrant states using some other network protocol.  Oh and like most things this might just fall apart when attempted to be built into an executable.

[hooovahh]

I have an update, but am unsure how to handle this in Github.  I have an account but I don't know how to batch upload replacing all files, removing the ones not used, and doing so in a way that doesn't look like a bunch of small commits.  So until I learn that here is the update and change log.

• Cluster support (Woot Woot)
  • Clusters of clusters supported with recursion
  • A rectangular decoration for the cluster is used
• Paths supported as string type
  • JSON escape strings seemed needed for some paths
• Re-write of config dialog and settings
  • Enum on Publish for showing the config, using settings, or load settings
  • Option for Recommended Control Settings which minimizes data sent, and property and method calls
  • Dialog shows controls with drop down options
    • Drop down options only show the settings possible to that control hiding ones not possible
  • Dialog also shows what kind of control each control is to more easily identify it
  • Each object in a cluster gets its own setting for now
• Re-write of object creation
  • This wasn't very scaleable before and is now a bit better with dynamic dispatch on the Object class.  This should mean less work for adding new control types.
• Removal of many DVRs and DVRs of DVRs
  • Many object types don't need to be DVRs since they are write once read many so these were removed, simplifying the clean up, and query of class data.
  • This does add extra work in a few cases like with clusters but overall I prefer this method
• Multiple Panes supported
  • Splitters and panes can now be used
  • Scrolling within one pane can be done and the example will update 
  • New function for detecting if a pane has scrolled which can invoke a pane update that is needed.
• Few bug fixes in cleanup not closing all references
• Bug fixes in Value Only for graph, it never seemed to work before
• Added optional VI Identifier input to Publish and Cleanup
  • I found a case where I wanted to assign an arbitrary name that wasn't a VI name or title.  It defaults to front panel title, or VI name just as before.

I do have some concerns about how to handle other data types.  I want arrays, and scrollbars at some point.  I think the only decent way to implement an array is going to be with N static objects, that the values of which are replaced to replicate an array, which also to me means needing a scrollbar control creating a virtual array or table.  Any thoughts on the right way to do this?  I'd also like to handle images of controls differently where we make the labels of these controls a separate object.  At the moment the image contains things like the label and as a result I do see some weird scaling.  Any help in creating scrollbars, or array controls in the web would be appreciated.

I'd also like to handle Comboboxes, and static images as decorations, but just need time...

FP Publisher With Cluster and Pane Support.zip

[smithd]

6 hours ago, hooovahh said:

I have an update, but am unsure how to handle this in Github.  I have an account but I don't know how to batch upload replacing all files, removing the ones not used, and doing so in a way that doesn't look like a bunch of small commits. 

I may be misreading it but it sounds like you just want to:

1. Clone the repo
2. Delete all the code (leaving the .git folder and presumably the readme/etc if one exists)
3. Copy in your code
4. Commit (git add -all; git commit)

[ThomasGutzler]

On 6/12/2018 at 5:16 AM, hooovahh said:

I have an update, but am unsure how to handle this in Github.  I have an account but I don't know how to batch upload replacing all files, removing the ones not used, and doing so in a way that doesn't look like a bunch of small commits.  So until I learn that here is the update and change log.

You should check out master, make your changes locally in a new branch, push and create a pull request.

Alternatively, I can add you as a contributor. Then you can go the nasty way of just merging your changes in without creating a pull-request.

Or, if you give me some time, I can make those changes.

[ensegre]

Onboard. Observations:

1. Brian's last version must have a bug, the resulting html is almost static (I can type inside numerics and strings, I can pull down Averaging, but non data is sent from or to the VI). I wouldn't be surprised if it is a trivial mistake in JSON escaping. See my image, the double backslashes in the path are suspicious.[EDIT - no]
2. The thing still depends on wsapi (dragging in the whole library for good), thus working only on windows. This is because Escape HTTP URL.vi,  Unescape HTTP URL.vi and LV Image to PNG Data.vi.

Edited June 24, 2018 by ensegre

[ensegre]

Ok, 1 depends apparently on a double NIC. I should have read this before, perhaps. In fact  "Here we can use the external IP address..." in Example.vi is wired in Brian's latest version, and not in Thomas' one on github. Sorry for the noise.

For 2 I'm testing a solution which could make it work on linux and possibly even on mac.

[hooovahh]

Yeah honestly I'm not too thrilled with the example included, but it just grew organically.  I'd like a set of examples that show different features maybe one at a time, in some kind of progression instead of trying to shove it all into one.  One of those features that aren't demonstrated very well is the IP settings.  I knew there would be an issue with dual NICs but just went with LabVIEW picking the primary one.  If you haven't figured it out yet right click the String to IP and select Multiple Output and it will return all IP addresses on all NICs.  Then you can use a for loop going over each one with the IP to String function and it will return every IP address on all NICs.  I imagine an example where the user is prompted to select the IP address to use with localhost being one of them. 

I started working on scrollbar functionality, but ran into a few issues.  The first problem is there are a few dozen JQuery scrollbar examples.  Some I just couldn't get to work the way I wanted.  I got close on one but can't query the pixel location of the scrollbar to send back to the VI so it can calculate the value.  Ideally I'd have it work like a LabVIEW scrollbar and snap to an index but that requires even more knowledge I don't have.

Cool idea on the Linux and Mac, I don't have have a need for these platforms but am curious on what the results are

[hooovahh]

On 6/24/2018 at 3:39 AM, ensegre said:

Onboard. Observations:

1. Brian's last version must have a bug, the resulting html is almost static (I can type inside numerics and strings, I can pull down Averaging, but non data is sent from or to the VI). I wouldn't be surprised if it is a trivial mistake in JSON escaping. See my image, the double backslashes in the path are suspicious.[EDIT - no]

You know I've seen this a few times and if I refresh the webpage (F5) it starts working again.  I think it has to do with some race condition specifically with the graph control but couldn't isolate it.  I'll make a copy of the Escape and Unescape string function so it doesn't pull in the whole library.

[ensegre]

Well, my idea for multiplatform is in fact trivial: replace the three wsapi VIs with independent ones, fiddle a little to get rid of the broken library dependencies, and go. For the two % escape vis it is just a matter of copying the code which is open, modulo some correction. Talking about the third VI is a bit hairy because the original is password protected, but, I found out a posteriori, you have been there too. As you said there, the code appears as conceived for working on the three platforms.

So I did that and played a bit with it, with inconsistent results. I tested three machines, one windows and two linuces, and concentrated just in getting the two examples read as file:// in chrome and firefox. The one windows was most of the time updating correctly (but not sometimes, not on second run of the same vi, sometimes only refreshing the browser, etc.) The first linux updated itself erratically when it should have, mostly updated correctly only refreshing the page, but still transmitted correctly to the VI the controls operated in the browser. The third linux produced a static and messed page in the browers. Alas, that one happens to be a system with comma decimal separator, so perhaps there is this in the way. All together nothing yet stable enough to post here. I'd need to grasp the mechanics of what goes on, and look for races or bugs, not sure if I'll manage soon. For one, I have a vague suspect that the final anonymous call to Cleanup.vi cripples the synchronization if the Example vi is run the second time.

[ThomasGutzler]

On 6/12/2018 at 5:16 AM, hooovahh said:

I have an update, but am unsure how to handle this in Github.

I've updated the repo on github with what was in your .zip

Unfortunately, I'm still stuck on 2016 so I couldn't even open it   ... one day

[hooovahh]

Yeah sorry about that, I wanted to back save to something older, but then if I do that I won't be able to open it and even test that it still works and relinks properly, since 2017 is the oldest I have on my current development machine.  I have since then found a few bugs with pane and panels, and I re-did the cluster object a bit to work better if and when arrays happen but I don't need to to post that until I get something working well.  That being said I don't know what my bandwidth on this is going to be lately.

16 hours ago, ensegre said:

I found out a posteriori, you have been there too. As you said there, the code appears as conceived for working on the three platforms.

Awesome and good work, yeah I do hope that function improves in later versions but for now you can just force it to run and your platform may support it.  If it doesn't then again something like the Web Publishing Tool could be used, where it is generated on a platform like Windows, and then copied to a platform that doesn't support that function, and then it will likely work for Value Only, and possibly Value and Visibility modes.

[Flavio Formica]

Hello everyone,

first of all congratulations for this project that is the most similar to our needs I have found. Despite the investments, NXG is at present too young and poor to become a real web publisher for LabVIEW stuff (at least in my honest opinion).

I am starting to play on this project in order to find how much it can fit our needs and I immediately found an odd behaviour: though it works pretty fine (I am using Example2.vi as first test) on IE, Chrome, Firefox and Opera, it never works on Edge whatever configuration you might try. Has anyone some explanation for that issue? I tried on two different PCs (both Win10) with the same result.

Let me know if anyone has ideas on that. 

Thanks

Flavio

[hooovahh]

Sorry I don't really know the answer to this.  Chrome on desktop and mobile is primarily the browser I've been using.  I did notice that in IE there is sometimes a security warning that you need to enable something for it to work.  It is possible that there is some Edge security thing stopping it from working well.  

I have put some effort into adding arrays, and scrollbars to this.  Scrollbars I think I have working well enough, but when it comes to arrays there are multiple ways to do it and I couldn't decide which way met use cases better so it is on hold until I get some more time to try things out and think about it more.  For discussion here is the thought process.  If I have an array with 100 items in it, and I see 4 rows, and a scrollbar.  How should the data be sent back and forth?  Should I send all 100 values with every refresh?  Or only send the 4 items that the user can see?  The drawbacks to only sending the 4 values the user can see, is that when scrolling that scroll value needs to be sent, and then the new 4 values need to be sent back, and I feel like this would cause a laggy feeling.  Of course sending 100 values every refresh is also undesired.  Keeping track of the changed values would probably help

[ThomasGutzler]

Hooovahh, as is so often the case, the best solution is the difficult one. Sending the entire content once and then keeping track of changes in a clever way transparent to the "user".

Sending only 4 is definitely going to cause pain in user experience.

Flavio, no idea why IE works and Edge doesn't, sorry  Maybe just stick with Chrome if you can

[smithd]

On 9/7/2018 at 9:43 AM, hooovahh said:

If I have an array with 100 items in it, and I see 4 rows, and a scrollbar.  How should the data be sent back and forth?  Should I send all 100 values with every refresh?  Or only send the 4 items that the user can see?  The drawbacks to only sending the 4 values the user can see, is that when scrolling that scroll value needs to be sent, and then the new 4 values need to be sent back, and I feel like this would cause a laggy feeling.  Of course sending 100 values every refresh is also undesired.  Keeping track of the changed values would probably help

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. You can scale that number of elements up pretty far before it becomes important. A reasonable middle ground could be to send [viewed region] +/- N elements. For N=1000 thats about 150 usec transfer time, and for small-to-moderate arrays this would still be the whole thing. For large arrays you can make N configurable so if someone really wants to transmit a 10M element array they can. 

I disagree about the change detection. Unless the number of elements changing is small (unlikely for measurements) you end up with a lot of transmission overhead (update index X to Y is 50% overhead for doubles) and regardless of the number of elements changing, your processing overhead is high (is Xn=Xn-1, is Yn=Yn-1, etc) although probably negligible.

Edited September 10, 2018 by smithd

[Flavio Formica]

7 hours ago, 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. You can scale that number of elements up pretty far before it becomes important. A reasonable middle ground could be to send [viewed region] +/- N elements. For N=1000 thats about 150 usec transfer time, and for small-to-moderate arrays this would still be the whole thing. For large arrays you can make N configurable so if someone really wants to transmit a 10M element array they can. 

I disagree about the change detection. Unless the number of elements changing is small (unlikely for measurements) you end up with a lot of transmission overhead (update index X to Y is 50% overhead for doubles) and regardless of the number of elements changing, your processing overhead is high (is Xn=Xn-1, is Yn=Yn-1, etc) although probably negligible.

I agree.... That would be a reasonable compromise

[Flavio Formica]

On 20/10/2017 at 1:49 PM, K4zz said:

Hello Guys,

first for all i would like to thank you for such a great exmple.

Although I played and tried out a few things, I still having problems accessing the website that i have published from local PC on different remote PCs.

all what i get by calling the website is the static layout and no values ( in case of using remote access).

would be very thankful for help.

regards

Mouaz

Sorry Hooovahh, but I'm facing K4zz's same issue. I also connected the external PC IP address to the Host Connection in Publisher.vi and the XAMPP page (with symbolic link enabled) to the Webpage Root link, but, still, I can receive only a static image on the remote PC. Both PCs are under Win10 (1709 release). I do not know what I am missing...

Help please... I know it's my fault, but I cannot see where I am doing wrong....

[Flavio Formica]

Here are the modifications I was talking about... but they did not work...

[Flavio Formica]

Ok, I found something. Using WIn7 as server machine everything works. Using Win10 no. Odd behaviour.... I must find out what changes between those OSs....

Quote