UI: optional battery state next to the engeryflow visualisation

[spuky]

Since I like the idea in #24403 for my self i scratched my own itch...

In the time it evolved to this:

Variations are in
#24449 (comment)

for reference and understanding some comments link to my original prototype

Todo:

• add playwright test

[sourcery-ai]

Hey there - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[naltatis]

Puh, really dont like the visual look of this. Makes it look cheap. We don't scale icons because it introduces different stroke widths. Same for the bold typo.

Did you see the "battery hold" state we currently have? I can imaging using this (original icon height) and putting a SoC percentage below (same minimal typo as in/out) without extra color coding. Might be tight on space on the right side (soc conflict with in/out). Maybe move battery to the left. I'd also not introduce an option. Either we decide it's a good idea for most users, then we add it, or we leave it out. Configuration option only when its really important.

[VolkerK62]

I'm rather skeptical. The battery symbol already provides a rudimentary indication of the charge level. If I want to know the exact information, one click on the power bar is enough (if the details aren't already open).
(created with Google Translate)

[spuky]

Did expect that (am no designer... ) but get pushback by designers in my team... just realized how often i klick the energy flow to see battery percentage...

Did you see the "battery hold" state we currently have?

no I am Swabian and want to wait to spend the money on fenecon control api when i really know i need it... ;-)

your suggestion is a good option Battery with just a 65 or what ever the soc ist below it would be sufficent other states like charging / discharging can already deducted from the ui...

The battery symbol already provides a rudimentary indication of the charge level.

where is that when it is not charging or discharging... ? the actual reason for me clicking that often ;-)

[spuky]

@naltatis if we make "In" and "Out" rotated normally and improve readablity (rotation is uncommon direction anyway for my feeling..) but may be some people like to turn their head the other direction.. there would be eough space to fit Icon and number without loosing space on the left side too

[spuky]

Wobei könnte man lassenWorks out no need to rotate

Edit: @spuky Please write in english...

[spuky]

[spuky]

Did do a text rotated version also... (put it on a shelf right now...) which i'd like a little better because in feels less dense...

also played with using lowercase first letter for in and out makes recognizing the english word in a german ui easier..not reading LN

Don't like it in the vertical text version but in the horizontal

[spuky]

@VolkerK62 + rest

Lets play a round of Who wants to be a millionaire?

Real screnshot of my live system right now:

Possible answers:
A: 0 somebody used a lot of energy
B: 50 removed from the config to trick you
C: 35 locked in the fenecon app
D: 100 Fenecon crashed (this one is easyly excuded there would be a red triangle) but need 4th answer

Additional hints:
Saw battery at 70% arround 15.00
60 % usualy bring us through the night

Todays charge

Joker would be screenshot of the new Feature (but does not exist yet)

every one can play resolution tomorrow evening every player only one reaction ....

A: 🚀 B: ❤️ C: 👀 D: 🎉

[naltatis]

if we make "In" and "Out" rotated normally and improve readablity

+1 for this. I think this is a good option. Keep the casing In/Out, vertical align labels with the bracket-lines and icons. Left Align the In/Out text.

This way we should always show the battery, if configured. No option. We might want to keep the current layout (rotated in/out labels) for non battery owners because it's more space efficient.

We can't show a number without units. Units (and their exact spacing) are critical for a lot of people here. Learned that the hard way 😅. So we need to prepare the layout to handle 100 % as well (space before % is locale dependent, use the formatter).

Clicking on the battery icon should open the battery settings modal.

The special states (hold, grid charge) should be reflected in the icon. The battery icon already has props for this. In these scenarios the icon does not reflect the SoC level visually any more. But since we have a dedicated text this should be fine.

[naltatis]

@spuky if you prefer I can do the final alignment stuff. Might be easier then following my "text commands" 😄

[spuky]

Ok will prepare most of it... will have some dead time during the day installing an server... will give you a go when I feel done...

[cschlipf]

I like the non-rotated version. In general rotated texts are an accessibility smell. With rotated texts the paddings between the elements are also way too dense.

However I think in horizontal alignment they should be left aligned, not right-aligned.

Alternatively center aligned.

[amtssp]

Why not reuse the icons already present and add the percentage below?
Maybe the SOC of the car could be easily added as well?

[naltatis]

@amtssp battery is not always in the mix and you mights still want to see its soc. It also can be above.

[spuky]

@naltatis it is not abandond... had some other stuff over the weekend... shoud get to this tomorrow ;-)

[naltatis]

@spuky no worries! Thanks for the update.