UI / Graphics

[TeDeVPrime]

Hello, do you think that we can implement some graphics from the original NSPanel?
some backgrounds, weather icons, etc.

[edwardtfn]

It's possible. The main thing with UI is finding asomething that makes almost everyone happy. There are some limitations imposed by the Nextion version used (no transparency, no vídeo, etc), but it still quite capable.

[TeDeVPrime]

i am not a designer but i manage.
if you can give me some guidelines, sizes, resolutions, etc... i might be able to come out with something.
the transparency thing is indeed an issue

[edwardtfn]

Well, the background should take the full screen, which are the following sizes:

• EU model: 480x320, however only 450x320 visible
• US model: 320x480
• US Landscape: 480x320

Transparency is an issue for images, it works for fonts.
Currently, the weather icons are in a black area of the screen, so all this icons have a black background. As it is in a fix position, if you find transparent icons we can plot this with the background and no one will see this limitation.

For the buttons pages I've created 3 different backgrounds, one standard, the on the on with all buttons off, and one with all buttons on, so I work with cropping those.

If you find a nice background which can support the text in the different positions, share that here and I'd love to work together on this.

[edwardtfn]

One option that @Blackymas proposed a while ago was to have the weather icons as part of the background, so we can plot text in top of that. Changing background at runtime is possible, but we can only play with pictures already loaded to the TFT.

[edwardtfn]

We can use crop to create some animation. If you have a sequence of frames, we merge those all in a large picture and plot each part of that picture in a sequence.
This all takes memory, but we still have some space there... Additional fonts is a bit harder on memory.

[paddenstoeltje]

In my opinion, the home screen is too cluttered. There is a lot of information, all requiring space. This results in small buttons and poor usability (difficult to hot, multiple clicks for basic tasks, ...). I would suggest to:

• remove the entities from the home screen
• combine all fixed shortcuts (QR, message, ...) and buttons to bigger fully configurable buttons (like on the button pages)
• optional display of weather / time / day / chips

For the rest I would not change too much as a lot of users already implemented the setup and are familiar with the design. I made a quick mock-up to illustrate what I mean:

[TeDeVPrime]

i don't agree about the buttons on home page.

yes some things like the qrcode and the entities should be moved.
but the home screen is about information... minimal yes... but information.
if i want button i have 4 more screens with slides.

WiFi and Bluetooth should be at the top and visible ONLY when they are not available.... if my panel is connected and working i don't care about the wi-fi icon. i care if there is an issue.

the alarm icon.... should not be fixed... it should be configurable and ... it should be a lot bigger.

in the long run, everyone has different needs.
do we need the weather? not really.... but we like it so we keep it.
do we need the time? YES
do we need a button for qrcode? surely not in the first page. it should be optional or an entity that you can call from HA.

temperature in the room? yes super important
temperature outside.... under discussion... you already know if it is cold or not outside. click on the weather icon if you want to know the outside temperature.

do i want a button turning RED when there is a notification that i want to show to the user? yes
i would like to notify the user with entities that work with battery ON THAT room that they will need to change soon.

[irvintim]

They're clearly different use cases for this. I on the other hand do agree with having all the buttons on the one screen. I don't need much information on the screen at all, just super easy access to functions. Particularly since the people using this will not know how to use the system so it should be incredibly intuitive. I really don't even want the screensaver kicking in because people won't notice that there's a button for a fan available right there.

I love that mock-up. I think that looks great. I have mine set up in portrait mode currently but might even consider switching it to landscape given how nice that looks. But I think it would be interesting to see the portrait version.

[TeDeVPrime]

you do know that you can set the default page or even force the panel to show a page based on conditions right?
and we also have to keep in mind that there is the EU and the US version

[edwardtfn]

I think the challenge we have now is due to the fact this project have never had a UI designer supporting directly. I might be wrong, as I'm not here from the beginning, but since I came, most of the development is trying to say "yes" to everyone and not thinking on UI. It would be really nice to have someone supporting with this for future releases.
Another point, in my opinion, is that we try to have one solution for every use case, and those could be very different. Just to talk about my case, I have one panel besides the front door where the weather info (including external temperature) is quite useful (probably the first one I look for) and I use this to quickly decide which jacket I will take when going out. It's also nice to have a couple of buttons to turn-off all lights or start my car heating... I thing I could fit this all in a single page like the mock up from @paddenstoeltje above, and then I don't need any of the other pages.
Another panel is in the guest room. The weather information is not relevant at all there. The internal temperature with a link to the thermostat control page, the hardware button controlling the light and maybe a button to control the shutter... And again, I don't need other pages. Probably a panel in the bathroom won't be much different than that.
My third panel is sitting in my Workstation. There I wanna everything, but again the weather is irrelevant.
We can probably think in a couple of use cases more, like a panel in the kitchen (timers? Multimedia?) in the living room, etc. I bet we will end up in 4 or 5 different cases, and having 5 different home pages isn't the end of the world from the programing side.
Other than this... We need time and more people contributing here... With ideas, with mock ups, with coding... With whatever is possible from each one. 😉

[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
• Simpler Home Screen #1718

[darth-hp]

Just my 2 Cents here - the homescreen totally depends on the use case. Eg I have one display at the main entrance and want to use that mostly to display information just when I enter or leave the house.
I have another one which is more of a control center and buttons should be No.1 on this.

I am using the wake_up_page to decide where the display starts, so for me it's not really an issue but I'd like to have a very customizable homescreen because that current one is to limited for me.

[edwardtfn]

Same with me... On the one by my front door, weather is relevant, while for the one in my office desk the weather is almost useless...
Selecting the wake up page helps. The capability to select a fallback page would be nicer, but a custom home page is what I need... But Nextion doesn't helps. 😩