Announcement

Collapse
No announcement yet.

Jon00 HSTile (Touchscreen Interface) for HS3 & HS4

Collapse
This topic is closed.
X
This is a sticky topic.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Originally posted by Corvl1 View Post


    I tried that as well, but in Chrome another tab is opened.
    Click image for larger version

Name:	2023-03-09 10_22_42-Home automation Heubergau - AnyDesk.jpg
Views:	147
Size:	107.6 KB
ID:	1597266

    Thanks,
    Cornelis
    I've just tried it on both Chrome and Firefox and it works fine here (i.e replaces the page it was on.). Not sure what to suggest
    Jon

    Comment


      ohw... I think I need more coffee.

      I was changing everything on a different (wrong) page , which has just one small difference

      It is working as expected , I am very sorry to have bothered you 🙈

      Cornelis

      Comment


        kenm

        Just FYI, the flashing you saw with the LED we discussed earlier is due to the browser needing to download the background images and will only do so when requested. Once cached there is no longer an issue, hence it only flashes once. This cache is lost when you refresh the page if you have the 'Allow Browser Image Caching' in HS Setup disabled. Enabling this setting stops the flash with future page loads.

        Also, you can easily add shadowing to text by using the following inline style as shown below.:

        Click image for larger version  Name:	Capture.png Views:	0 Size:	7.1 KB ID:	1597298

        Click image for larger version  Name:	Capture1.png Views:	0 Size:	18.1 KB ID:	1597299
        Jon

        Comment


          Jon00, this may already be an option, but I cannot find anyway to accomplish it:

          I need to be able to change the Store Name and Store Text of 5 different Stores with 1 Tile or Lable button click.

          For example: [labelstoremd {store 1 name},{text 1 to store},{store 2 name},{text 2 to store},{store 3 name},{text 3 to store},{store 4 name},{text 4 to store},{store 5 name},{text 5 to store}]

          Is this already something I can do within 1 Tile/Lable somehow?

          Comment


            I don't think this has ever been used but I did code something. Try this:

            Original single store tag:
            Code:
            [labelstoremd {store 1 name},{text 1 to store}]
            becomes:
            Code:
            [labelstoremd {store 1 name}|~|{store 2 name}|~|{store 3 name}|~|{store 4 name}|~|{store 5 name},{text 1 to store}|~|{text 2 to store}|~|{text 3 to store}|~|{text 4 to store}|~|{text 5 to store}]
            Up to 50 store name/text positions are supported and another set of 50 if you used the original store 2 name/text comma delimiter fields.

            Let me know if it works!
            Jon

            Comment


              Originally posted by jon00 View Post

              Code:
              [labelstoremd {store 1 name}|~|{store 2 name}|~|{store 3 name}|~|{store 4 name}|~|{store 5 name},{text 1 to store}|~|{text 2 to store}|~|{text 3 to store}|~|{text 4 to store}|~|{text 5 to store}]
              That seems to be working. Thanks!

              Comment


                Should work in any tag that has a store fields...
                Jon

                Comment


                  Originally posted by jon00 View Post
                  kenm

                  Just FYI, the flashing you saw with the LED we discussed earlier is due to the browser needing to download the background images and will only do so when requested. Once cached there is no longer an issue, hence it only flashes once. This cache is lost when you refresh the page if you have the 'Allow Browser Image Caching' in HS Setup disabled. Enabling this setting stops the flash with future page loads.

                  Also, you can easily add shadowing to text by using the following inline style as shown below.:
                  Thanks. I'll look for that setting and make sure it's enabled.

                  Edit: It was disabled, so I enabled it.

                  Also, thanks for the inline style code. That will save me a lot of time since I won't have to make every button with unique text.
                  "if I have seen further [than others], it is by standing on the shoulders of giants." --Sir Isaac Newton (1675)

                  Comment


                    The next step in my UI concept work is panelizing (grouping) elements in a visual way. Here's a screenshot and a short video showing 6 alarm zones.

                    Click image for larger version

Name:	Screen Shot 2023-03-09 at 9.35.46 AM.png
Views:	135
Size:	28.7 KB
ID:	1597350​


                    https://drive.google.com/file/d/1XBC...usp=share_link


                    Each zone can have 5 states:

                    0 = clear or closed (Green)
                    1 = active or open (Red)
                    2 = bypassed or ignored (Amber)
                    3 - faulted (Flashing Yellow)
                    4 = alarmed (Rapid Flashing Red)*
                    otherwise = unknown (White)

                    The panel is made up of 13 tiles. The border is a tile with the panel image set to its background. It's important to set the Z-Index of this tile to "1", otherwise you won't be able to edit/move the other tiles. The indicators use [devicetileurl] to show the state of each zone. The zone names underneath of just text on a tile. I could have used labels but I find it easier just to click on "C" and step through the tiles as I'm editing.

                    *I created a flashing red LED with a short (0.2 second) inter-frame delay based on user feedback and to mimic the actual alarm panel.
                    "if I have seen further [than others], it is by standing on the shoulders of giants." --Sir Isaac Newton (1675)

                    Comment


                      Originally posted by jon00 View Post

                      I don't think there is any code I can add to a web page to override the OS screen orientation preferences.

                      Not sure what OS your phone is but there are several apps for Android you could try:

                      https://freeappsforme.com/rotation-c...-apps-android/
                      Thanks, this looks promising!

                      Comment


                        Originally posted by kenm View Post
                        The next step in my UI concept work is panelizing (grouping) elements in a visual way. Here's a screenshot and a short video showing 6 alarm zones.

                        Click image for larger version

Name:	Screen Shot 2023-03-09 at 9.35.46 AM.png
Views:	135
Size:	28.7 KB
ID:	1597350​


                        https://drive.google.com/file/d/1XBC...usp=share_link


                        Each zone can have 5 states:

                        0 = clear or closed (Green)
                        1 = active or open (Red)
                        2 = bypassed or ignored (Amber)
                        3 - faulted (Flashing Yellow)
                        4 = alarmed (Rapid Flashing Red)*
                        otherwise = unknown (White)

                        The panel is made up of 13 tiles. The border is a tile with the panel image set to its background. It's important to set the Z-Index of this tile to "1", otherwise you won't be able to edit/move the other tiles. The indicators use [devicetileurl] to show the state of each zone. The zone names underneath of just text on a tile. I could have used labels but I find it easier just to click on "C" and step through the tiles as I'm editing.

                        *I created a flashing red LED with a short (0.2 second) inter-frame delay based on user feedback and to mimic the actual alarm panel.
                        Great Job Ken. Looking very professional. As I said before, I'm graphically challenged so envy those who have these design skills!
                        Jon

                        Comment


                          Version 1.1.16 is now available:

                          Changes since V1.1.15

                          Added [tileopacitymd] and [labelopacitymd] tags. Allows you to set the opacity of a tile/label contents and swap background images when pressed down and released.

                          Added constant #LP# as a means to switch to the last page viewed in tags that support URL's and remote page switching via Homeseer events.

                          Added 23 png images (button backgrounds and animated/static led) provided by kenm (see previous threads for images).

                          Jon

                          Comment


                            Originally posted by jon00 View Post

                            Great Job Ken. Looking very professional. As I said before, I'm graphically challenged so envy those who have these design skills!
                            Thanks Jon. I'm happy to contribute where I can. Graphics design and plumbing are in the same category for me. While I can get it done, I'm by no means an expert, and certainly couldn't make a living at either. I have to spend a lot of time studying and thinking before I implement. I consider it therapy in a way.
                            "if I have seen further [than others], it is by standing on the shoulders of giants." --Sir Isaac Newton (1675)

                            Comment


                              Like a few others, I have been playing around with a Sonoff NSPanel Pro. In my case, I wanted to use it as a desk stand in the bedroom to display/control things via HSTile. Basically, this is currently showing thumbnails of 6 cameras (click to enlarge) plus a few other functions and information.

                              Anyway, first night it was a bit bright in the room. Rather than a compromise between a set brightness for day/night usage using the panel settings, I added a new tile which covers the entire display area and set the background color to black with 50% transparency (to do so just use rgba(0,0,0,0.5) as the background color entry). I then added a single tag [tilehidetilemd XX,,180000] (where XX is the tile number) which when pressed will hide this tile and restore it after 180 seconds. Finally I added events to show this tile at bed time and hide it at sunrise.

                              So at bed time, the new tile appears and dims the display due to its opacity. If you want to operate the panel during the night, you just tap the screen, the opaque tile then disappears, giving you 3 minutes to operate. After that time, the tile reappears to dim the display again. Obviously, you can set the timeout time and opacity to what you want.

                              I did think about using adb commands to remote control the panel brightness directly but not sure how reliable that may be. I had the connection drop a few times when I was playing with it....

                              I'm sure there are a few apk's that do this for you (including the paid for version of FKB) but I have not gone down that route.
                              Jon

                              Comment


                                A novel solution to what's a very common problem with touchscreens in the bedroom. A while back, I had a SquuezeBox Radio on my nightstand, but it would dim the display too much for me to be able to see it at night AND the dimming level couldn't be adjusted. Granted not a touchscreen but a similar problem. As far as FKB Plus, it's all or nothing. The screensaver sets the screen to black but there is still a pretty bright "glow". Having FKB turn off the screen has given me mixed results. In one case, the display is all messed up until I close FKB and re-open it. This may be because the Android OS is old on that tablet. I've been meaning to open a support ticket with Fully but haven't got around to it yet.
                                "if I have seen further [than others], it is by standing on the shoulders of giants." --Sir Isaac Newton (1675)

                                Comment

                                Working...
                                X