Turn your front panel into an interactive HTML5 site

[RayR]

Hi guys,

I incorporated the Front Panel Publisher.lvlib into my project. I modified the code and the symbolic link (for XAMPP) to point to C:\www.  However, I may have missed something.  I am using Brian's latest version.

When running the original version, I can remote control every control on the front panel.  However, when running the same Example.vi with the modified location, I lost some of the controls.  I will show the front panel of the actual target application that I am working on at the bottom of this post.

The items circled in red & blue in the Example.vi are the controls that cannot be changed remotely. Items in red are control that I want/need to work with.  Try1.vi is a very basic VI for me to "try"  the applications.  It fully worked at one time using the older version.  Microphones.vi is what I am developing.

See attached images.

It is probably something simple.  Something in front of me that I am not seeing.  I figured that it would be faster to ask for help in finding that needle in the haystack.

Thanks,

RayR

[hooovahh]

Would it be possible to post any of the HTML or JS files generated?  I'm unsure why some controls that are legit controls wouldn't be controllable in one location but would be in another.  Maybe also post your cfg used which defines how each control should be seen and used.  If a control type isn't recognized it defaults to an image (which the path control does because what should it do in a browser?) and it is possible the other controls that don't work have the same issue.  Buttons will always act as buttons even when it is set to be image only (since it just toggles between the two static images) so if a button is no longer clickable then that likely isn't the problem with that control.

Oh what about z-order as well?  Is there something on top of the control?  I see a decoration and I thought I made them go to the back but maybe there is some invisible object on top of a button.  The HTML generated should make it clear if that is the issue.  In Chrome you can right click and choose inspect element to see the page source and where the objects are and what data they have.

[RayR]

I will have a look at the source code using Chrome as you suggested.  I compared the original HTML, cfg, and js files.  There are definite differences between them.  However, I must admit that I would not be able to identify them. 

I will first attach the files generated in the new project. The next post will contain the original versions using the "original" version of the FPPublisher at the beginning of this thread.

 

Example.html

Example.cfg

Example.js

Edited January 20, 2017 by RayR
inserting files

[RayR]

Original versions...  There are some differences, but the js file nearly matches what was included in the original Example.vi.

the cfg file was overwritten, but the one I include is very close.

Example.html

Example.js

Example.cfg

[RayR]

If I look at the Averaging enumerator control, the functional version (original) has the following html code:

<select id="UID1510" class="Enum" style="position: fixed; left: 264px; top: 20px; height: 40px; width: 84px;"><option value="0" selected="">5pt</option><option value="1">11pt</option><option value="2">33pt</option></select>

compared to the newer code

<img id="UID1510" class="Enum" style="position: absolute; left: 255px; top: 11px; height: 40px; width: 84px;" src="data:image/png;base64,*** insert image data *** <img id = " uid1510"> == $0

where *insert image data" is the actual image data file content.  

It appears that the new code is seeing only an image and not an object.  I need to fix this in the code that generates the HTML code in order to corectly build my application.  Example.vi is simply used as a known template to work with at this time.

[RayR]

Do others have trouble posting at times?  Maybe I take too long to write my post?  Often, when I click on "Submit Reply" I see a message "Saving", but the post does not make it.. 

Curious...

[JKSH]

1 hour ago, RayR said:

Do others have trouble posting at times?  Maybe I take too long to write my post?  Often, when I click on "Submit Reply" I see a message "Saving", but the post does not make it.. 

Curious...

I've experienced this a few times in recent weeks. I then become unable to post on the original page, so I have to copy + paste my comments into a new tab.

Running Google Chrome 55.0.2883.87 m, and I often take a long time to post too.

[RayR]

Ok, it's not just me... I'm using Firefox and I need to do the same thing.  Copy, refresh page, paste,post..

[hooovahh]

10 hours ago, RayR said:

where *insert image data" is the actual image data file content.  

It appears that the new code is seeing only an image and not an object.  I need to fix this in the code that generates the HTML code in order to corectly build my application.  Example.vi is simply used as a known template to work with at this time.

Yup that seems to be the problem.  The Enum control (or possibly ring I think those appear as the same control type in the JS) is being shown as an image, and not as a web control.  I'd suggest you either edit your cfg file, or give the boolean constant to the Publish function which can show a dialog of settings for each control.  Look at the settings for the enum control and it should have Show as image to be false.  If you want Value Only then that is up to you but with it either on or off it should be controllable.

[RayR]

Thanks hooovahh!

Okay, now I get to try with the actual application. 

[RayR]

Since I am in the debugging phase of my application, I did not want to hijack this thread for my issues.  The conversation is continued here:

https://lavag.org/topic/19969-debugging-interactive-html-vi/

[gmarantes]

On 23.6.2016 at 3:10 PM, hooovahh said:

Okay I've come back with more,  (...)

FP Publisher Hooovahh Edit 2.zip

Hello,

I Downloaded the files from Hooovahh and before LabView 2016 open it I got 8 Warning messages stating that a "LabView Tools Network" was missing. After some time I found out that the  solution was to install the "OpenG Toolkit" from "JKI Package Network" using the JKI VI package Manager.

Maybe this is evident for most of you but in future someone (Like me) may find this information useful.

Best regards

 

[hooovahh]

You'll find that OpenG is the most common LabVIEW reuse library there is.  It was originally developed around the LabVIEW 4 era (as far as I can tell) and has several major updates and improvements, but hasn't been updated recently.  It predates VIPM, tools network, and LabVIEW projects.  Since OpenG is so commonly used in the community, many members forget to list it as dependencies (myself included).  With the very open BSD license, there is little reason to not just install OpenG with every copy of LabVIEW.  Look around your newly added palette and you'll find all kinds of awesome useful tools.  The Array palette is probably the one I use the most, but File I/O, LabVIEW Data, Application Control, and Variant Config are also very useful.

[gmarantes]

On 14.12.2016 at 3:14 PM, hooovahh said:

So I've never actually tested this until today but I got it working   (....)

.  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. (...)

For windows users  a nice alternative to XAMPP is using the Windows Internet Information Services to set it I followed the Steps on the link bellow:

https://www.techwalla.com/articles/how-to-set-up-a-web-server-in-windows-7

 

[smithd]

IIS is really annoying to set up as a reverse proxy, I found, so if you're using it to access devices on a closed network you might have issues. Apache and Nginx are significantly simpler in that respect.

I'd also suggest looking at caddyserver (https://caddyserver.com/) which is a golang based web server that has one file and one binary and thats it, with a pretty respectable amount of built-in plugins...nowhere approaching apache, but good for something that came out two years ago. Caddy is not so good as a reverse proxy as (so far as I can tell) it doesn't have a rewriter plugin, meaning there is no way to fix html or js results which contain full URLs (which pushes that burden to the back-end you're proxying to)

Edited February 10, 2017 by smithd

[gmarantes]

Hello all,

I did run the example from hooovahh and it work nice also in a remote computer.

Then I decided to create a new project using two buttons and a Led *just to test if I was able to run it, before integrating it to my main project.

When I run it I get an "Error 1 writing a Text file" 

Does someone have any idea why is it not working?

Feb2017_Test1.zip

[hooovahh]

Well the issue is with the fact that you are calling the Clean up function right away before anything else.  I'll admit that probably should work, but it doesn't.  This is because it goes and looks to see if some object has been created before, and if it has then it doesn't add the right information like where to write the file to.  Removing that first Clean Up allows the files to be written without error and the page to be opened...however the page that is opened is blank.  This is because of yet another bug (thanks again) which creates the page setting the origin at 0,0 on the front panel.  Your controls are placed somewhere around -400, -500.  So if you take all three of your controls and move them about 500 to the right, and 600 down then run the VI it should work as expected.  For testing I'd recommend not using the static IP string constant you have unless you know that is your computers IP address.

[gmarantes]

Perfect! Now it works! Thanks!

[gmarantes]

I made some simple notations about how to use it (Just for my own future use)

I attach it here in case someone needs it in future as a "manual" (Far away from being a full manual or to be all correct)

FP Publisher_Info.docx

[hooovahh]

Attached is an updated version which adds support for the front panel not being set to 0,0 but instead has the offset from where the first pane (at the moment support for only one pane) is on first run.  So if you scroll around on the front panel it should make the web page view what you are viewing, and even with some support to update it when the VI is running.  The Update Origin needs to be triggered when the scroll takes place and the demo was updated to use this.  There are a few bugs for sure.  The borders, and static text don't get re positioned with a window resized or scroll.  But other controls, labels, and images will move with a front panel that scrolls around.

The other asynchronous VIs were updated to stop if the Queue reference becomes invalid (the VI that made the reference went idle).  And the clean up functions were changed to not create new references if they don't exist.  This means you should be able to call the Clean Up function first (like you did) and everything else should still work

 

FP Publisher With Origin and Cleanup Fix.zip

[K4zz]

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

Edited October 20, 2017 by K4zz

[hooovahh]

Okay after testing out a few things and being confused on why the last upload didn't, work I think I know your problem.  So the demo is primarily setup to work on localhost.  If you wan it to work on a remote system you need to tell the web publisher what your local IP address is.  I left a comment on the block diagram next to the Publish function stating:

"Here we can use the external IP address, in case computers on the network are trying to access this page.  Unwired is localhost and will only work from browsers on this computer."

So what you need to do is wire from the IP to String, to the Host Connection terminal on the Publish function.  In my setup I also use port 80 not 8080, but I tested using XAMPP on IE, Firefox and Chrome on another computer.

The reason I left this unwired is you may have multiple NICs and I didn't want to assume the IP address you want to use, is the one returned by the IP to String function and wanted you to be able to specify it.  Maybe in another update I could have the configure dialog ask for these settings listing the IPs found by performing IPConfig

[K4zz]

Thank you so much hooovahh.

this worked perfectly.and its a very good example to learn about OOP in LabVIEW.

regards
Mouaz

[hooovahh]

On 10/21/2017 at 5:22 AM, K4zz said:

this worked perfectly.and its a very good example to learn about OOP in LabVIEW.

Glad you think so but there are plenty of things this project does in a less than ideal way when it comes to OOP.  Certainly more dynamic dispatch would make adding new types easier but I never got around to improving it.  I always thought a hardware abstraction layer like some posted on NI's site were good ways to get your toes wet in OO.

http://www.ni.com/webcast/3431/en/

https://forums.ni.com/t5/Past-NIWeek-Sessions/Hardware-Abstraction-Layers-Using-LabVIEW-Object-Oriented/ta-p/3508682

http://www.ni.com/white-paper/53226/en/

[ThomasGutzler]

Oh wow, this thread is still going. I didn't think anyone would pick this up from where I left it.

Thanks hooovahh for jumping in with so many fixes and updates. I haven't had the chance to see what happened to it but I will soon