Jon00 HSTile (Touchscreen Interface) for HS3 & HS4

[jon00]

Last update for the moment (except bugs):

V1.1.10 is now available.

Changes since V1.1.9

Linux - Added method to prevent Jon00hstile.aspx web page from unloading in memory by the OS when not used for a while. Keeps page responsive at all times.

Added user defined status tracking methods to the following tags (does not affect existing configurations):

Changing button class (color, style etc):

[buttonbyvalue] , [buttonbylabel] , [buttonbyindex] , [buttontogglebyvalue] , [buttontogglebyvalue3way] , [buttontogglebyvalue4way] , [buttontogglebyvalue5way] , [buttontogglebylabel] , [buttontogglebylabel3way] , [buttontogglebylabel4way] , [buttontogglebylabel5way] , [buttonup] , [buttondown]

Changing image:

[imagetogglebyvalue] , [imagetogglebyvalue3way] , [imagetogglebyvalue4way] , [imagetogglebyvalue5way] , [imagebyvalue] , [imagebylabel] , [imagetogglebylabel] , [imagetogglebylabel3way] , [imagetogglebylabel4way] , [imagetogglebylabel5way] , [imagedown] , [imageup]

Additional sections in the documentation to help with status tracking methods.

[Dweber85rc]

Hello, I am having some trouble getting the tiletogglebyvalue to work. When I try to use it for a specific device, it does not toggle the device and the following error shows up in the log

JSON controldevicebyvalue ref 402 value not found

402 being the deviceid of the device I am trying to control.

I also tried switching to the tiletogglebylabel but that also did not work.

[jon00]

The message is from HomeSeer (not HSTile) stating device 402 is not found. Therefore I suspect you have selected the wrong reference ID.
Are you sure you have selected the feature rather than the root device? If you are sure you are correct, post a screen grab of the device showing the status graphics page.

[OmegaQuest]

What's everyone doing for a Header, Main Page, and Footer layout? I'm trying to wrap my head around setting up a Static Header (which will have a Home Button, Time, Date, and Current Weather). And the Main Page with different Lables and Tiles depending on the page you're on. And a Footer page with some Icons (Static) for navigation only.

The Main page and Footer are fine, but the Header I am trying to figure out the best way to do this to where the Time and Weather Information is always "Instantly" up-to-date when a user navigates to another screen.

Currently I have each screen with a duplicate header labels and tiles. This is fine, however when a user navigates to another screen, the time and weather is out of sync and takes a couple seconds to load the current values.


I thought about making a Screen with just the Header and calling it from another screen with just a single label (using Row 1 of the Label for the Header iFrame, the 2nd Row of the Label for another iFrame screen, and the 3rd Row of the Label for the Footer iFrame). However when I select the "Home Icon" on the Header iFrame, it only changes that iFrame screen.

Is there a way to name each Label Row (that is using an iFrame) so that inside each [imageurl] or [lableurl] or whatever tag is used, can select which "iFrame" to change?


OR

Is there another way I am not thinking about or something?

Thanks in advance.

[Dweber85rc]

The message is from HomeSeer (not HSTile) stating device 402 is not found. Therefore I suspect you have selected the wrong reference ID.
Are you sure you have selected the feature rather than the root device? If you are sure you are correct, post a screen grab of the device showing the status graphics page.

[Dweber85rc]

And now that I see it for the 100th time, I think I see the issue, the values I'm trying to use are status only, not control...

[jon00]

What's everyone doing for a Header, Main Page, and Footer layout? I'm trying to wrap my head around setting up a Static Header (which will have a Home Button, Time, Date, and Current Weather). And the Main Page with different Lables and Tiles depending on the page you're on. And a Footer page with some Icons (Static) for navigation only.

The Main page and Footer are fine, but the Header I am trying to figure out the best way to do this to where the Time and Weather Information is always "Instantly" up-to-date when a user navigates to another screen.

Currently I have each screen with a duplicate header labels and tiles. This is fine, however when a user navigates to another screen, the time and weather is out of sync and takes a couple seconds to load the current values.


I thought about making a Screen with just the Header and calling it from another screen with just a single label (using Row 1 of the Label for the Header iFrame, the 2nd Row of the Label for another iFrame screen, and the 3rd Row of the Label for the Footer iFrame). However when I select the "Home Icon" on the Header iFrame, it only changes that iFrame screen.

Is there a way to name each Label Row (that is using an iFrame) so that inside each [imageurl] or [lableurl] or whatever tag is used, can select which "iFrame" to change?


OR

Is there another way I am not thinking about or something?

Thanks in advance.

I've read your thread several times to get my head around it but still not 100% sure I fully understand. Anyway some observations that may assist:

1) Using the JavaScript clock will always display the correct time immediately on page load.
2) Perhaps having one page as the header with other pages within a iframe below may be a path to take.
3) You can set the URL of [imageurl] and [labelurl] and other similar tags by using the built in 'store' variables. Each store has a user defined name and a value associated with it. You can set a store name/value depending on the page loaded and/or via other tags which support setting the store values. In your case the named store/value can be a URL which can be changed on page load if you want. Therefore each page you load can set the named store value to something different. In turn the [imageurl] [labelurl] etc tag will read the store name and set the URL to its value.

As you may not have the latest version of the docs (updated yesterday), look for "Changing text, button classes and URL's dynamically via HS events, page load or tile/label & button presses" in the index. Also search for 'SetStoreOnLoad1" to understand changing a store value on page load.

Let me know if you want more help with this. The documentation is unclear on the store functionality so will be updated to explain this all better.

[OmegaQuest]

I tried option 1, but there is still a delay. The Clock is Black for a few seconds and then the current time is shown.

Option 2 is close to what I am doing now, but you only suggest using 1 iframe (as the "Main Screen"). I will see if I can work around that.

Thanks

[ewkearns]

I am trying to use a space (not 56°F, but 56° F) and have encountered a tiny issue. Inputting "56([alt]0176) F" or "56([alt]0176) F" both work perfectly, but when going back into the editor, only a space is visible where the " " or " " was. This might be the intended behavior!

Another thing (from the fellow that can't remember what he had for supper last night) that would be nice is a way to annotate the *.ini file, as remembering what was done under (for example) [Gaugecolor] a month ago is going to be a real head scratcher, today. I'm not sure this is even possible. While ubiquitous, I've never seen an annotated .ini file, and trying to do it now may break far more than the convenience helps. I dunno....

[jon00]

I am trying to use a space (not 56°F, but 56° F) and have encountered a tiny issue. Inputting "56([alt]0176) F" or "56([alt]0176) F" both work perfectly, but when going back into the editor, only a space is visible where the " " or " " was. This might be the intended behavior!

Another thing (from the fellow that can't remember what he had for supper last night) that would be nice is a way to annotate the *.ini file, as remembering what was done under (for example) [Gaugecolor] a month ago is going to be a real head scratcher, today. I'm not sure this is even possible. While ubiquitous, I've never seen an annotated .ini file, and trying to do it now may break far more than the convenience helps. I dunno....

Because the setup page is also rendering the html, it will automatically convert   etc to spaces. So yes, expected behavior. That said, I can correct this and will do so in the next version.

Regarding annotation, you can put any unused name under an ini heading and add what you want. For instance you could:

[GaugeColor]
MyChanges01/21/2023 = I changed something but have forgotten!
MyChanges01/22/2023 = Oh yes, I remember now , I changed the gauge color from green to red.

This will not break an ini file, provided the name is not repeated more than once.

You could also have your own heading for general notes i.e.

[MyNotes]
01/21/2023 = I changed something but have forgotten!
01/22/2023 = Oh yes, I remember now , I changed the gauge color from green to red.

This method would not interfere with anything but again each name under MyNotes must be different.

So two entries in a day could be:

01/22/2023_1 =
01/22/2023_2 =

Make sense?

[ewkearns]

Spectacular, Jon, it makes perfect sense! I have another noobie question... I'm looking at a weather image that updates, but I'm having trouble wrapping my head around this. While the example you included with HSTile works perfectly, it isn't really in *my* area. So, looking to get a descriptive (radar) image closer to home I ran solidly aground with this statement, "Due to security issues, iframes can now only show pages served from the same domain so you will not be able to show remote websites." So, how do I get "their" image into my server and what sort of image can I use. So many of them, today, seem to be assembled at "GET" time.

[jon00]

Spectacular, Jon, it makes perfect sense! I have another noobie question... I'm looking at a weather image that updates, but I'm having trouble wrapping my head around this. While the example you included with HSTile works perfectly, it isn't really in *my* area. So, looking to get a descriptive (radar) image closer to home I ran solidly aground with this statement, "Due to security issues, iframes can now only show pages served from the same domain so you will not be able to show remote websites." So, how do I get "their" image into my server and what sort of image can I use. So many of them, today, seem to be assembled at "GET" time.

I suggest you use a Windy dot com widget which allows embedded iframes.

Unzip the attached file and place in your html/jon00hstile folder.

Then create a tile or label with size 650px by 450px

Use the following tag in row 1:

[iframe /jon00hstile/iframe6.html,650,450,0]

In the inline style code for Row 1 enter:

padding:0px;

You should see this (I set this to your area - animated):



If you wish to configure the map differently (zoom, metrics etc), go here. There are so many different layers you may need more than 1 map!

After config, just copy the iframe URL and paste it in iframe6.html to replace the existing. Hope that helps!

iframe6.zip

[jon00]

Whilst I'm on the subject, enabling the 'Spot forecast' with another iframe size adjusted, you can get a nice forecast on its own:

[ewkearns]

Jon, thank you a million times! I already had some familiarity with windy.com, because they do a great job tracking hurricanes. I didn't know what magic was hidden in their URLs, though. I think I'm really making progress! I have one more question, though, I see the -T and -L and understand how they work. What do I do if I am up to tile 99 and need to get rid of tile 45?

[OmegaQuest]

Jon00, is there a way/or add a feature to use the Page/Screens Name (with Spaces being replaced with _ and Not Case Sensitive) in the Page link (?p=) vs the Number?

For example:

/jon00hstile.ash?p=Index
/jon00hstile.ash?p=Weather
/jon00hstile.ash?p=Calendar
/jon00hstile.ash?p=Family_Map

This way its easier to remember what page url goes where as more and more screens, tiles, and labels are added?