Turn your front panel into an interactive HTML5 site

[ludo35]

Hi, for server address, I put localhost and I have page one running.

Ludo

[Flavio Formica]

On ‎1‎/‎15‎/‎2019 at 4:07 PM, ludo35 said:

Hi, for server address, I put localhost and I have page one running.

Ludo

Ok, and if you click on the Next page button, nothing happens. Correct? Or do you receive an error message?

[ludo35]

Exactly, no ihm but file Under explorer match with page 2.

[Flavio Formica]

23 hours ago, ludo35 said:

Exactly, no ihm but file Under explorer match with page 2.

Ok, I see. Why don't you contact me in private so that we may analyze the issue, find the solution and post it to the general forum. I fear that we fulfil the forum with this problem otherwise….

Thanks

[Flavio Formica]

Hi Hooovahh,

do you think normal that progressbars  work only as indicators? I tried to use them (a simple numeric slide) to simulate a scrollbar in an array indicator but it did not work. Even if configured as VALUE ONLY or VALUE AND VISIBILITY, the control did not respond to change requests, as if it was only an image…. When value was changed from LabVIEW side the change was read, instead.

My fault or something odd in the control behavior?

Thanks for your help

[Flavio Formica]

Hello everyone,

I made a very light update.

Up to now a background image to the front panel was not allowed.

I added this possibility by modifying the HTML generated by the HTML JS Template.vi file (attached below).

When the function "show border" is not enabled (if you want a border, maybe, you dislike to have a background image…) you might underimpress an image defined in the "bkgrnd dim" control. Size and filename are requested by this control. Of course, the image name must be expressed in html mode (considering the generated html file as root folder).

If someone wants to use this option must bring out the added control to the preferred main vi.

Hope it might be helpful

HTML JS Template.vi

[K4zz]

Hello hoovahh,

the Force Update.Vi dosent support multiple Pages. i mean it will force the update in all webpages of the last VI been called

 

do you have any idea what could be causing the Problem.

 

best regards

Edited January 22, 2019 by K4zz

[hooovahh]

5 hours ago, Flavio Formica said:

do you think normal that progressbars  work only as indicators?

Nope, at the moment the progress bar is an indicator only.  It can be value only, which will use the web control made in javascript so the appearance will be slightly different, but there is no way at the moment to interact with it.  If you understand JS better than me, then you could probably add the control functionality.

As for the background image I've never had a need for that, but I can see that it might be useful.  One option might be to just place a 2D picture control behind all other controls on the front panel, and load it with an image.  It should default to Image Only mode, and if I did the Z order stuff properly it should work, but to be clear I never tried using that control.

[Flavio Formica]

Ok Hoovahh, I tried your solution several times but the z-order was not correct and the background image was displayed as top-most. More than that, I found that any image is displayed in a higher layer than any interactive control. For this reason I tried to work on HTML level and found that solution.

Unluckily I'm not so expert in JSs, so I'm not able to act at that level. Nevertheless, I will try to find where the z-order is set and change it. I'll let you know my progresses.

Thanks

[Hugo Fernandez]

On 13/12/2016 at 21:09, RayR said:

Modifiqué la segunda versión (pre-hooovahh) y la hice funcionar en una PC remota a través de la misma red.

Mi objetivo es hacer que algo como esto (o este código por ahora) funcione en un iPad o mejor, en una tableta Android. Cuando pruebo en un iPad, recibo un mensaje que dice que no puede abrir la página porque es un archivo local. La búsqueda en Internet no proporcionó soluciones. La tableta Android es peor, solo dice "archivo no encontrado".

¿Alguien ha intentado ejecutar el código html remoto en un dispositivo inteligente (tableta, teléfono, etc.)?

Gracias,

RayR

disculpa como hiciste para que funcione en una pc remota muchas gracias

[Hugo Fernandez]

On 14/12/2016 at 9:56, RayR said:

Gracias Hooovahh,

Lo tengo funcionando.    Me perdí el paso para crear un enlace simbólico al archivo html.

No probé su última versión, ya que no estaba seguro de si todo lo que tenía que hacer era ejecutar Publish.vi. No pude encontrar su archivo Demo Html5.

Ahora exploraré el control del software usando este método. Será un experimento interesante.

Muchas gracias,

RayR

Buenas tardes podras poner un ejemplo, e intentado hacerlo pero sin resultado muchas gracias

[jlw186]

Hi,

 

Is there a labview project example of this running on a crio/sbrio with embedded UI? I seem to get error 1055 with reading property nodes from front panel references and the HTML page is not being created when I run the publish VI on the controller.

Also, will this work with pop-up windows?

 

Thanks,

-Jon

[hooovahh]

14 hours ago, jlw186 said:

Is there a labview project example of this running on a crio/sbrio with embedded UI? I seem to get error 1055 with reading property nodes from front panel references and the HTML page is not being created when I run the publish VI on the controller.

There are complications with this.  On Windows the first thing it does it figure out where the controls are, and creates the template HTML pages and web code.  Then when it runs it can send the values of controls to the HTML pages, or send images of what the controls look like.

If I'm remembering right, on embedded devices, some of the needed functions won't work.  I think the get an image of a control doesn't work, even if the embedded UI is enabled.  And Writing to PNG using compression doesn't work.  But the good news is the values of controls can still be sent and received.  At some point I did have this working on devices with an embedded UI as a test and showed it here  It looks like some controls are in image mode, so maybe I'm wrong about it not working.  The code as it is today is already a bit of a mess, when it comes to examples and demoing the features it has.  So that code was an even bigger hack.  I do wish I had time to work on this because it is one of the cooler projects I've worked on, and the easiest 80% of the project is done.  But the last 20% would take a bunch of work.  So it sorta sits here in this sorta works, but needs some attention, stage.