Simpler Home Screen

[irvintim]

Hi,

Wow, this project is awesome. Thanks for putting in all this effort.

I'm using the panels in a vacation rental. The panel in the living room (right by the front door) has its 2 buttons set to the lights (living room and front porch), and I also use this as the thermostat for the room and (hopefully) the fan controller.

There are two problems with the current home screen:

1. The fan "button" is so small that it takes hitting the screen multiple times to get it to register.
2. The bigger issue is that the current home screen isn't intuitive enough for renters who have never been in the property before; for instance, they can't figure out that it is the thermostat or that the tiny little fan icon is how they can control the fan. I have created documentation for them, but not everyone reads the manual.

I would love it if there were an option for a more simplified home screen with fewer, but larger "buttons" that look like buttons. And are labelled with Text and not simply with ICONs.

This is a (very poor) mockup of what I had in mind. Maybe the fan icon could update as the speed changes, etc. I didn't draw in the top line of "chips." I think those are useful; I just didn't add them to this picture for simplicity.

[twasilczyk]

Similar problem here. I don't intend to pack everything into a single panel (I have full smart home control through HA phone app), but would rather like guests to be able to use it without me giving instructions.

Some problems I noticed:

• HA API / Wi-Fi icon is not in the status bar, so it may look like a button
• if you add "custom button" with Wi-Fi icon (I added one for Wi-Fi password QR code), it looks very similar (in shape and size) to that status icon - even if set to the large one, it's not large enough
• custom buttons and "regular" home buttons (QR code, sensors) don't look very organized with my current setup (2 regular icons + 2 light/shade icons)

[rudgej]

I agree. The screen is dominated by weather and time. The functions are not clear to the casual user.

Weather is a nice screen filler but doesn't control the house ! Time is a nice to have but the screen is mostly asleep and most people wear a watch.

The Home Screen could be far more useful if it was a button screen for the most common functions. At present for anything useful you have to swipe. The home buttons are very small and again assume you know what they are.

[edwardtfn]

You can set a button page as your "Wake-up page" so your panel will always show up that page when waking up.

[jshatch]

Looking for the setting to do that, I can't find it. Is it part of the blueprint or somewhere else, like in the esphome yaml?

[jshatch]

Just as luck would have it I found it right after I asked.

[edwardtfn]

It is under device's page (Settings > Devices and Services > ESPHome).

[irvintim]

I agree with @rudgej that the time and weather info could be much smaller than I am showing on the mockup. What is more important is that the ability to adjust the thermostat or the fan, or maybe open an alternate page with a button instead of swiping to a new page, are more important in this "guest use/simplified" design. The more real estate available for intuitive labels and/or buttons would make this more user-friendly.

[edwardtfn]

I really like this discussion. I also have different panels and while weather is quite useful in the panel beside my front door, that is not as important in the panel sitting at my working desk, and even less in the one in a bedroom.
We can certainly think about a few diferent layouts for the home page, I'd love to see some suggestions.

Just some considerations:

1. The home page as it is today is a special one, as that is the only page updated while not visible. This is to make it faster to load without overloading the Wi-Fi with updates all the time. Updating more pages while not visible riquires more memory from Nextion and/or from ESPHome, which are already close to the limit. A bit of engineering might handle the different versions of pages without using more memory, unless the info is very different.
2. We currently keep identical pages (in terms of components, including its IDs, names, sizes, fonts, etc) for US and EU models, to make easier on the ESPHome and Blueprint sides, without having to create a diferent version for each (which would be impossible to maintain). Think about that... Your solution should fit in a (almost) 470x320 but also in a 320x480 screens. And components close to the border are quite difficult to touch, so some area can contain info, but are not good for buttons.
3. Nextion (the version used here) cannot handle transparency and is quite square on its components, so many of the rounded/curvy elements seen are based on pictures superposition/crop. More pictures means a bigger TFT file size and more memory of Nextion, which again is limited.
4. Fonts takes a big part of TFT size, so we have limit for font sizes also. Bigger fonts (in size) takes way more memory than smaller fonts. If we can reduce one of the existing sizes would be nice. 😉

[Johannabacken]

Hi,
without deeper investigation I introduced this on 4 nspanel across the house. Thanks for this contribution!
However - It's toooo much weather status in the house ;) Using another screen as homepage makes it either a button page or a entity page - My wish is to havea bit of both. Some temp/status and some buttons. Is that possible to config or is it out of scope for this package? Many Thanks /Johan

[edwardtfn]

Some other topics related to this:

• Show buttons instead of weather/time on home screen #117
• Make a bit bigger the outside temperature display #126
• Layout #286
• UI / Graphics #2143

[edwardtfn]

I'm reading this discussion again and it is funny... the home page started quite simple, and then we got constants requests to add things there, but in the end it became a mess when all the info is shown.
I think it makes more sense to have different home screens depending on the use case. I have a panel close to my front door. The weather info is super useful there, as I can get prepared before leaving home. For the panel in the guest room, in other hands, that is not very intuitive. Room temperature and some buttons to control things in that room would be sufficient.

We need some time for a redesign. 😉

[lordhelmet77]

I was thinking about this since finding the project, but I feared it might be inappropriate to question the page that so much effort was put into. 🙈

To me personally, the homepage is rather unusable in its current state. Nobody in our house has any interest in the current weather. The clock is very welcome, but it could be smaller, and while we're at it, consistently visible in the header. For anyone using the screensaver, the huge homepage clock is most likely redundant.

I think that a homepage shouldn't reflect everything and all at once, it rather be the place for the most needed interactions. For us these are buttons for lights, appliances as well as status and buttons for climate, heating and media. I'm aware of some of the restrictions in layout and functionality of the Nextion Editor and that it's very difficult to satisfy all personal tastes for customisation. But I think that a step back for the homepage would cater a wider audience.

I'd also prefer a less distracting/intrusive background – if any at all.

[Bascht74]

I would love to have a cleaner home page, too.
More like a "Navigation" page where you can jump directly to an entity or another page with a smal clock on it and maybe some icons on top showing status of some stuff.

[paddenstoeltje]

I agree; I have made a dimple mock up in a different thread: #2143 (comment)

Basically it is just 8 conifgurable buttons which can be set up anyway you like. The idea is to declutter and more direct control with bigger buttons....

The only question is how to go forward? Some people like A, other B or C :). What I would propose is that we keep the current screen for those who do not want to change, and make a new additional simpler home screen for those who prefer a more minimalistic approach.
Both could live next to each other; although it would require some extra templating work as we would have to support 2 different home screens.

[edwardtfn]

Would it be a viable idea to give it as an option in the blueprint to choose between the 'normal' home screen or the 'de-cluttered' version?

I like the idea. And I think it is viable, but would require some changes on the current implementation.
I will try to find some time to look at this.

[edwardtfn]

Do you mind sharing your HMI file?

[paddenstoeltje]

Sure, here you go. Currently everything is still hard coded as I still need to find some time to figure out how everything is connected / communicating. I also attached the slightly modified transparent buttons. I can also modify the US version if required.

[irvintim]

I like it -- this is precisely what I'm looking for. It would be nice to have the US version and a portrait mode version, but if I ultimately have to rotate the panels to landscape, that would be fine with me. Thanks for tackling this.

[edwardtfn]

I have a few comments & questions about this simplified version of the home page:

1. You added the indoor temp icon close to the outdoor temperature. I will move it closer to the indoor temp, ok?
2. You remove the am/pm indication. I will add it back, ok? This won't be visible for most users, but is very nice to have for people using 12 hour format.
3. I see your buttons are hard-coded to go to specific button pages or to open an alarm page. Currently, buttons on home page are all assigned to entities, so it will toggle the entity (or open the detailed page when toggle is not available).
   • My suggestion here is to make it behave like the buttons on button pages, which are also always assigned to entities, but in this case, a short click would toggle (when available) and a long click would open the detailed page.
   • Is it possible to add link to other pages, but the input on the blueprint will be a bit odd, as conditionals are not available, so in the end users would be able to both select an entity and a page and we don't know what to do in that case.
     a. We can define (convention) a priority, like, if a page is selected, the entity will be ignored.
     b. We can use the button to go to a page, but use the entity to define the button state.
     c. We can do any of the above, and when the button is pressed, both actions would be executed (the entity will toggle and the page will be open).
     d. We can ask for behavior as an input (this will add more inputs to the already polluted list of inputs).

I'm totally open for new ideas. Please share your thoughts.
I believe a simpler version could be implemented quite easily. Just have to find some time to work at this. I'm planning a release on Wednesday this week (mainly bug fixes), so I might be able to work at this after that. 😉

[paddenstoeltje]

Hi Edward,

1/2; no problem to do so. I modified them for my needs and deleted everything which was unnecessary.

3; I would go for the possibility to link the button to an entity (same behavior as on button page) OR a direct link to a page as this greatly increases flexibility. Personally, I would not make a combination of the two as this might confuse the user. In this case you could add for instance a toggle button in the blueprint to switch between entity mode or page mode per button.

Wouter

[edwardtfn]

US version is a bit more challenging, as I probably will have to work on the button pages also (to keep a standard).

I work at this later, but if you wanna play, please use the new HMI from the dev. By changing home_page_id to 28 on the Program.s tab should give you a taste of the new page (although update won't work as it is missing ESPHome and Blueprint parts).

Just please if you make a change in one version (EU or US), please do exactly the same on the other and keep the same object_id on both, even if visuals are a bit broken, so that will make my life much easier. 😉

[edwardtfn]

In this case you could add for instance a toggle button in the blueprint to switch between entity mode or page mode per button.

Unfortunately the blueprint input doesn't supports conditionals, yet. 😞
All the questions are always displayed.

But I will look at that. Having a toggle to ignore some of the settings is a good way to go.

[Bascht74]

Yeah! I would like to have that home screen. Especially to use it for entitys and to go to a specific page. I want to choose freely. I know that you cannot hide options dynamically within blueprints and you cannot use sub-sections but actually the sections make it much more useably so that we now add more options :-)

[plasterer41]

Sounds great 👍🏼 Sent from my iPhoneOn 14 Jul 2024, at 06:47, Edward Firmo ***@***.***> wrote: I have a few comments & questions about this simplified version of the home page: You added the indoor temp icon close to the outdoor temperature. I will move it closer to the indoor temp, ok? You remove the am/pm indication. I will add it back, ok? This won't be visible for most users, but is very nice to have for people using 12 hour format. I see your buttons are hard-coded to go to specific button pages or to open an alarm page. Currently, buttons on home page are all assigned to entities, so it will toggle the entity (or open the detailed page when toggle is not available). My suggestion here is to make it behave like the buttons on button pages, which are also always assigned to entities, but in this case, a short click would toggle (when available) and a long click would open the detailed page. Is it possible to add link to other pages, but the input on the blueprint will be a bit odd, as conditionals are not available, so in the end users would be able to both select an entity and a page and we don't know what to do in that case. a. We can define (convention) a priority, like, if a page is selected, the entity will be ignored. b. We can use the button to go to a page, but use the entity to define the button state. c. We can do any of the above, and when the button is pressed, both actions would be executed (the entity will toggle and the page will be open). d. We can ask for behavior as an input (this will add more inputs to the already polluted list of inputs). I'm totally open for new ideas. Please share your thoughts. I believe a simpler version could be implemented quite easily. Just have to find some time to work at this. I'm planning a release on Wednesday this week (mainly bug fixes), so I might be able to work at this after that. 😉 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[irvintim]

I have a few comments:

• agree with the comment that I don't necessarily need all this weather information on each panel throughout the whole house, but this new design is so much more useful that that doesn't concern me at this point.
• since it's complicated to have the buttons operate the entity OR take you to a new page to manage the entity, then for me I really would just like the button to take you to the device page. If the button can show the status of that device in addition to being a toggle to take you to the page then that would be the best option. I don't really need the button to control a device. There are two hard buttons that can control the two main devices in the room and then everything else can be off of a separate device page.
• I also agree that having the button do two different things, based on whether you tap it or hold it or double tap it, is too complicated for what I'm looking for on this device. Since the people operating it won't have an opportunity to have any lessons I want it to be as intuitive as possible.

Thank you guys so much for all your insight, suggestions, and work on this. I'm looking forward to trying this out.

Tim

[paddenstoeltje]

I gave the dev a try. Changing the home_page_id to 28 didn't do the trick. I also changed the back_page_id and the "power on start page boot" to 28. When going back from any screen I can see the new simplified home screen; however starting up still shows the old screen. Maybe there are still some old hard coded references?

For the blueprint I would propose to add a new section "Home screen".

• Then a toggle button to use the classic or the simplified version OR maybe just use a drop down menu to select the wished home page. In this case all pages could be used as a home page?
• For the simplified home screen I would propose to have the possibility to change the icon, label and action of each button. As discussed earlier I would implement the possibility to link to an entity OR to a another page. Maybe switching between the can also be done using a toggle switch?

Might be interesting to try to aim for the v5.0 release; as this falls under "simplifying the user experience".

Let me know if I can help somewhere.