Debugging interactive HTML VI

[RayR]

The project is based on the code presented here: 

There is / are bug(s) in my implementation and I may need help to get to the core issue.

This is the VI hat I am running as seen from the remote unit (PC / tablet):

In the above image, the controls of interest are Selected Room, Calibrate, Microphone, and the year (duration) selector.  The indicators of interest are Serial Number, Mfg Sensitivity, Calibration Data, Measured Sensitivity, the graph and the other items on the right..

What works..  Well, when I click on Calibrate, it seems to activate it on the running VI.  But it does not update the display.

 

Edited January 20, 2017 by RayR
more details

[RayR]

Here is more information (I had issues with posting which is why I do it in smaller chunks).  Plus it helps my post count LOL!

Below is the running VI when the above image was taken:

Below is what happens on the running VI when clicking on Calibrate from the remote unit (PC):  This is good..

 

However, there is no change on the remote screen. 

 

[RayR]

As expected, some of the controls are seen as images.  This is similar to what I reported yesterday in the original thread.

 

Below is the configuration that I used for the controls; hence the one shown above (Selected Room).  The check-marks are not selected for "Show as image" or  "Value Only".  No check marks..

 

Would the issue be related to using "System" controls?  Or is it related to some other non-supported feature?  Or is it something completely different?

 

 

 

[hooovahh]

(BTW I don't mind having a two way conversation the whole internet can see)

Combo boxes aren't a supported control type, so it must default to the image type.  Just like if you have an array of something on your VI you can't represent that as web page elements (not easily at least) so it makes it be an image.  So no matter what check boxes you pick, it will be the image type, maybe I should make that more clear, and disable check boxes, or force check boxes on to make that more clear.  What also doesn't help is that the system enum, ring, and combo box all appear the same visually (which is usually a nice thing)  Use a ring and you'll be fine, or implement combo boxes to use the same technique that the enum and ring use.  Had you used a non system combo box it would have been visually obvious that it was showing it as an image and not a native web control.

You also reminded me of what might be an interesting feature, which is when a button is clicked on the webpage, to show the true value and hold it for X amount of time, maybe until the page polls the new button value again.  Sometimes I am unsure I clicked a button because the image won't change unless when it refreshes that it is true, which can be a small window.

Your first post mentions things not updating, which controls/indicators in particular aren't working, it looks like the graph is, 

[RayR]

Interesting...  I thought I had posted a reply... it must not have made it.  Let's see... what did I write...

Here goes.. (again)

 

The two obvious indicators are "Calibration Date" and "Measured Sensitivity".  When remotely clicking on "Calibrate" button, the local VI runs and displays values for those 2 indicators, but the values are not displayed in the remote page.

[RayR]

I break my replies in small sections due to posts not making it. 

I would like to contribute the Combo Box support for the VI (project).  I just started looking deeper into the code this morning, but may not have much time to do so today.  However, any indications of where the support code lies would be grateful.  Looking at the existing code that supports the Ring control would be great.  Where is that VI within the project?

Thanks!

RayR

[hooovahh]

Some of the details of adding new control types was posted in the other thread, but I'd really like it to be class based with dynamic dispatch.  At the moment it is a bit of a pain to add new types but clearly is possible.

Start by looking in the Web Front Panel_class\Private\Object Factory.vi.  This VI is what identifies each object and figures out the type that it is.  The Init state looks at the control ClassName, then goes to other states based on that.  You can probably just duplicate the String class and do what it does (which isn't much) until it goes to the Finish state.  Here we create the new object class.  Here I think you can go into the Select object class type.

Now how do we update the object we just made?  Open the Front Panel Objects\Select_class\Get JSON Data.vi and edit it to support the combo box class type.  This VI at the moment assumes the data is always a numeric, so you'll need to do some type checking, or maybe attempt both the variant to data on string and numeric and use the one that doesn't generate an error.  Or feel really adventurous and update the Front Panel Objects\Select_class\Attributes.ctl to have the added attribute of Numeric, or String which can be set in the Object Factory.  If you do add this to the cluster, be sure and update the value to numeric when a ring, or enum are used.

Then the last thing is to look into what to do when the user changes a combo box control value.  Update the Front Panel Objects\Select_class\Set JSON Data.vi and set the combo box with new control values.  It will return a numeric of which item is selected, so you'll need to look up the list of available items from the combo box and set it.  Again if you update the Attribute type def you'll know to treat it as a string or numeric.  Otherwise you can look at the data type of the control, or the class the control belongs to.  But since this will be called a bunch of times the more efficient method might be to update that type def to contain things like what the data type or ClassName is.  This will have a limitation that a combo box can't have a value that is undefined or not in the table.  Not sure what would be needed to support that but it would probably involve looking into the web control support.

If you give more information on the other two controls that aren't being updated I can try to help.  Are the controls just normal string?  If they are images do they update?  I realize you can't control them then, I'm just trying to figure out what it could be

[RayR]

Thanks Hooovahh,

I was on the right path and was about to post a question, but you already provided the details.

Thanks!

[RayR]

On 1/23/2017 at 10:59 AM, hooovahh said:

Now how do we update the object we just made?  Open the Front Panel Objects\Select_class\Get JSON Data.vi and edit it to support the combo box class type.  This VI at the moment assumes the data is always a numeric, so you'll need to do some type checking, or maybe attempt both the variant to data on string and numeric and use the one that doesn't generate an error. 

I basically duplicated the String class with a few changes to support the ComboBox.  Part of the code was the "Get JSON Data.vi method.  At the moment it looks very much like the one from "string".

My question is:  In what you wrote above, should the support for this function be part of the Select class or should I base the modifications of the newly created Get JSON Data.vi which is specifically for the ComboBox?  I suspect it is the latter if I modify the Get JSON Data.vi located in the ComboBox class it will be what is necessary to support it. I agree that it should somewhat be like the ring or enumerator.  While waiting for your response, I will start to modify the one in ComboBox.

[RayR]

So far, everything looks good.  I should have time today to test the ComboBox.  I think it will work, but I want to test it before before posting it to the original thread.

[hooovahh]

Either method would work.  I was suggesting it leverage the select class so that you don't have more code to manage, but making a Select - String class as a apposed to a Select - Numeric class would be a fine solution too. 

[wly]

hello,

can you tell how to make " interactive HTML VI"? use which method?

Thanks !

[hooovahh]

Well here are about 10 options with my favorite being the one already linked to in the first post of this thread.  You decide what is the best fit for your application.