Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Charging status icons #14581

Merged
merged 21 commits into from
Jul 7, 2024
Merged

UI: Charging status icons #14581

merged 21 commits into from
Jul 7, 2024

Conversation

naltatis
Copy link
Member

@naltatis naltatis commented Jun 26, 2024

fixes #14408
fixes #14057
fixes #12566
fixes #14542

We have a lot of different mechanisms that influence the charging process. Before reasons and states were shown in a single status text. Since only one text could be visible at a time it was quite challenging (or impossible) to always show the most important information for the user. In this PR the status information is divided into two areas: charger status (left) and other settings or environmental factors each with icon+value combination (right). This side deliberately contains no always-visible explanation text to not overload the UI. Tooltips will be added for each entry.

New behavior

  • 💰🌱 price/co2 limit is always shown if configured
  • 🔌 cheap price/co2 availability is shown even if disconnected
  • 🚗 vehicle limit is shown when lower than evcc limit (before only as divider line and tooltip)
  • ⚠️ plan soc not reachable due to vehicle limit added (before only in plan modal and marker color)
  • 🌏 translated text only for charger status, more stable layout even for languages with longer words
  • 🌞 added solar indicator: session percentage, green = using solar, gray = grid charging, timers replace percentage temporary

Bildschirmfoto 2024-06-26 um 16 54 08

TODOs

  • add tooltip with explanation to each icon+value entry
  • decide on adding click-actions
  • adjust status tests
  • add next available smart cost time
  • add projected plan end time (maybe separate pr)
  • adjust tests

Video

status.icons.webm

List of all states

states

@naltatis naltatis added enhancement New feature or request ux User experience/ interface labels Jun 26, 2024
@naltatis naltatis requested a review from andig June 26, 2024 15:29
@VolkerK62
Copy link
Contributor

Bin ja hin- und hergerissen.
Einerseits echt klasse, was du dir so einfallen lässt, auf der anderen Seite wird es echt bunt.
Was mir auf den ersten Blick nicht so gut gefällt, dass der Text bzgl enable/disable timer wegfällt

@andig
Copy link
Member

andig commented Jun 26, 2024

Ich habe ohne Blick auf die Statusliste versucht, rauszufinden ws Sonne in % oder Zeit bedeutet. Ist mir erstmal nicht gelungen.

@StevieC121176
Copy link

Ich find es klasse , gefällt mir besser als nur mit dem Text.

@naltatis
Copy link
Member Author

@VolkerK62 die Bunt-Bedenken hatte ich auch. Gerade wenn man sich die ganzen Kombinationsmöglichkeiten anschaut bekommt man schnell diesen Eindruck. Ich glaube in der Praxis ist das aber deutlich cleaner als es bei der Übersichtsgrafik wirkt. Viele oder Zustände treten nur selten in Kombination auf. Die rot und orange Fälle sind im Betrieb nur die Ausnahme.

@naltatis
Copy link
Member Author

Ich mag die aktuelle Text Version eigentlich auch ganz gerne. Gerade weil sie nicht erklärungsbedürftig sind. Aber gerade mit der Menge an Feature die wir aktuell bereits haben skaliert das mit den Texten nicht.

@andig
Copy link
Member

andig commented Jun 26, 2024

@StevieC121176 hast du es rausgefunden? Schön finde ich es auch- aber mir gehts um den Informationsgehalt. Ein Piktogramm spricht nicht immer mehr als 1000 Worte.

Wäre Klasse, wenn wir das mit Feintuning richtig sprechend bekommen würden!

@StevieC121176
Copy link

@StevieC121176 hast du es rausgefunden? Schön finde ich es auch- aber mir gehts um den Informationsgehalt. Ein Piktogramm spricht nicht immer mehr als 1000 Worte.

Wäre Klasse, wenn wir das mit Feintuning richtig sprechend bekommen würden!

Ja, gerade das Sonnensymbol mit den % oder das Herunterregeln auf 1 phasig mit der Zeitangabe z.bsp. finde ich doch sehr aussagekräftig. bis auf einige wenige finde ich das sehr gelungen.
Evtl könnte man das ja splitten. Bei wenig Platz z.Bsp. in der mobilen Ansichtsvariante könnte man die Symbole und in der Desktopvariante den Text verwenden.
Ich bin aber auch deiner Meinung, mit etwas Finetuning ist das ne prima Sache.

@andig
Copy link
Member

andig commented Jun 26, 2024

Was heisst Sonne mit %? Und warum heisst Sonne mit Zeit „disable“? Ich glaube das das aktuell mehr Fragezeichen erzeugen würde. Die Phasenumschaltung impliziert etwas mit hoch/runter, enable/disable kann ich (noch) nicht erkennen. Hab aber auch keine gute Idee 😩

@andig
Copy link
Member

andig commented Jun 26, 2024

An der Stelle vllt. lieber ein ein/aus Symbol plus Timer? Dass wir im PV Modus sind ergibt ja schon der Modus?

@naltatis
Copy link
Member Author

Dass wir im PV Modus sind ergibt ja schon der Modus?

Nicht zwingend. Den PV Modus Namen wollen wir ja ändern. Auch heute ist es ja so, dass man im PV Modus ist, aber der Grund warum geladen wird kann ein anderer sein als PV Überschuss (MinSoC, Plan, smartcost). Daher die Idee das sonnensymbol grün anzuzeigen wenn hier gerade aufgrund von Überschuss geladen wird.

Ich überleg mir noch was um den enable disable Timer besser vom Phase Timer unterscheiden zu können. Wenn ihr Symbolvorschläge habt die nicht hässliche oder mehrdeutig sind gerne her damit. Die Quelle ist hier "Material Symbols".

Sonne + Prozent: in der jetzigen Version (die tooltips kommen noch) wird hier der Anteil Sonnenenergie des aktuellen Ladevorgangs angezeigt. Die gleiche Info die man sich auch oben rechts am Ladepunkt anzeigen lassen und im Ladelog sehen kann. Alternativ hätten wir auch den aktuellen Anteil an Sonnen/Eigenstrom zur Verfügung. Weiß nicht ob das besser wäre.
Wir können die % Zusatzinfo auch weg lassen, dann ist es allerdings kein Icon+wert Paar und das Sonne Icon rutscht ggf. zu nah an das nächste Icon. Daher hier mein Versuch zur Symmetrie. Wir können da auch "aktiv" hinter schreiben aber das hat wenig Informationsgehalt.

@StevieC121176 Längere Beschreibung bei mehr Fläche: könnten wir machen, ist aber nicht einfach. Die Anzahl der icons und damit auch der verfügbare Platz kann sich zur Laufzeit ändern. Einige Sprachen haben wirklich lange Wörter, auch für kurze Texte. Das sehen wir jetzt schon beim aktuellen statustext. Der wird da oft schon mehrzeilig. Daher würd ich hier erst einmal mit kompakt und sprachunabhängig starten wollen. Das ist vorhersagbarer 😄

@naltatis
Copy link
Member Author

Und warum heisst Sonne mit Zeit „disable“?

Das wird über den Kontext (lädt/lädt nicht) und die Farbe der eindeutigen.

Grüne Sonne + Timer = pv disable
Graue Sonne + Timer = pv enable

Aber, oben schon geschrieben, ich schau mal nach eine klareren Lösung die auch ohne Kontext/Farbe funktioniert.

@VolkerK62
Copy link
Contributor

Wie wäre "Change Circle" für Phasentimer
image

@VolkerK62
Copy link
Contributor

Enable
image

Disable
image

@naltatis
Copy link
Member Author

@VolkerK62 Gute Idee. Vielleicht kann ich aus dem Kreis noch ne Sonne machen. Das wäre auf jeden Fall ein gutes Symbol für "Sonne Start" und "Sonne Ende"

@naltatis
Copy link
Member Author

Hier neue PV Enable und Disable Icons.

Phasenumschaltung finde ich so wie es ist (Sonne + Doppelhoch/-runter) eigentlich ganz aussagekräftig. Also ein mehr davon, bzw. weniger davon.

enable disable

@premultiply
Copy link
Member

Ich finde die Farben für enable und disable sind vertauscht.
enable müsste grün sein und disable grau.

@naltatis
Copy link
Member Author

Ich finde die Farben für enable und disable sind vertauscht. enable müsste grün sein und disable grau.

Das Konzept hinter den Farben ist, dass die Faktoren farblich grün hervorgehoben sind, die dafür verantwortlich sind, dass aktuell geladen wird.

Das Preislimit ist bpsw. grün, wenn der Preis unterschritten wird und(!) aufgrund dessen auch geladen wird. Im Nicht verbundenen Zustand wird die Unterschreitung angezeigt, aber nicht farblich hervorgehoben (grau).

Analog dazu ist die Idee auch mit dem Sonnen-Icon und seinen Abwandlungen (enable, disable, >3p, >1p). Konzeptionell gehören die alle zusammen: "Laden weil Überschuss". In der Disable Phase wird immer noch geladen (grün), weil es kürzlich noch Überschuss gab. In der Enable Phase wird noch nicht geladen (grau).

Planner: geplante Startzeit (grau), aktives Planladen (grün)

MinSoc ist ne farbliche Ausnahme, weil rot. Stellt aber damit die Verbindung zum roten Ladebalken (wie bisher auch) her.

@naltatis
Copy link
Member Author

naltatis commented Jun 28, 2024

  • created custom plan start, plan end icon variants
  • removed sun + % state
  • removed conditional minsoc instead of plan state
  • added plan tooltips
  • click to open settings (minsoc, plan, smartcost)
  • underline editable values

estimated plan start

plan start

plan overrun

overrun

plan active + estimated finish time

plan active

@VolkerK62
Copy link
Contributor

image

Hier sollte die Sonne aber grün sein, oder?

@naltatis
Copy link
Member Author

@VolkerK62 ja, korrekt. Ich hab den Sonnen-Zustand (siehe oben) aber jetzt erst einmal raus genommen. Bin mir mit dem Prozentwert noch nicht sicher. Müssen wir in einem späteren PR noch mal diskutieren, was hier eine gute Information ist.

@premultiply
Copy link
Member

Die grüne Farbe irritiert mich immer noch.
Insbesondere bei Disable und Enable.
Vielleicht das grün dann besser ganz weg?

@naltatis
Copy link
Member Author

naltatis commented Jul 5, 2024

@premultiply ja, jetzt, wo das Sonnen-Icon nicht permanent da und grün ist, wenn wegen PV Überschuss geladen wird, find ich es auch inkonsequent pv disable und phase switch grün zu machen. Daher habe ich diese Zustände jetzt erstmal wieder grau gemacht. Für Smart Cost, Plan und Min Soc habe ich die Farben drin gelassen um hier den aktiven vom inaktiven Zustand besser unterscheiden zu können.

Bildschirmfoto 2024-07-05 um 11 30 21

@premultiply
Copy link
Member

Das gefällt mir schon viel besser. 👍🏼

Gäbe jetzt noch pro Indikator konsequent nur ein Symbol vor dem jeweiligen Text hätte es noch eine klarere Line finde ich.
Sprich bei MinSoC das Auto weg und bei der Phasenumschaltung die Sonne weg.
Ggf. dann noch bessere Einzelsymbole finden.

@naltatis
Copy link
Member Author

naltatis commented Jul 5, 2024

all tooltips

Bildschirmfoto 2024-07-06 um 01 10 25

@naltatis
Copy link
Member Author

naltatis commented Jul 5, 2024

Ggf. dann noch bessere Einzelsymbole finden.

I'm open for suggestions 😄. Ich fänd ein Icon auch besser. Aber in Zweifelsfall sticht Aussagekraft.

@naltatis
Copy link
Member Author

naltatis commented Jul 5, 2024

@premultiply hier noch mal ein Icon Update. Habe mal ein Low Battery Vehicle Icon erstellt und die Sonne bei der Phase entfernt.

Bildschirmfoto 2024-07-06 um 01 45 56

@andig
Copy link
Member

andig commented Jul 6, 2024

Screenshot 2024-07-06 at 10 17 38

Hier lieber die Zielzeit? Ich würde nicht t+47min oder so in der Art rechnen wollen?

@andig
Copy link
Member

andig commented Jul 6, 2024

Screenshot 2024-07-06 at 10 18 52

Sollen wir noch "waiting for vehicle" sagen wenn wir gleichzeitig wissen, dass das Fahrzeug "fertig" hat?

@naltatis
Copy link
Member Author

naltatis commented Jul 6, 2024

Sollen wir noch "waiting for vehicle" sagen wenn wir gleichzeitig wissen, dass das Fahrzeug "fertig" hat?

Guter Hinweis. Hier ist der Text falsch. Da sollte nur "vehicle Limit" stehen. Reached ist ein anderer Zustand.

@naltatis
Copy link
Member Author

naltatis commented Jul 6, 2024

Hier lieber die Zielzeit? Ich würde nicht t+47min oder so in der Art rechnen wollen?

Aktuelles Muster: Im Status steht immer die absolute Zeit (8:00 AM) und im Tooltip die relative Zeit von jetzt (in 0:30 h). In diesem konkreten Zustand (overrun) wird die Verspätung gegenüber des Plans angezeigt. Würdest du hier stattdessen auch die relative Zeit von jetzt bis zum Abschluss angeben? Die absolute Zeit steht da ja bereits.

Gerne einen Formulierungsvorschlag.

@andig
Copy link
Member

andig commented Jul 6, 2024

Aktuelles Muster: Im Status steht immer die absolute Zeit (8:00 AM) und im Tooltip die relative Zeit von jetzt (in 0:30 h)

Ah, hab ich falsch interpretiert- dachte das wäre die ursprüngliche Plan time. Dann passt es perfekt so wie es ist.

@All-Ex-U
Copy link

All-Ex-U commented Jul 6, 2024

Das gefällt mir gut!

Die Sonnenauf- und -untergang-Icons finde ich allerdings nicht selbsterklärend. Daher schlage ich vor, statt dessen die Sonne + ein Play bzw. Pause-Icon zu verwenden. Das passt dann zu den Icons bei der Phasen-Reduzierung/Erhöhung.

Also so:
image

@andig
Copy link
Member

andig commented Jul 6, 2024

Daher schlage ich vor, statt dessen die Sonne + ein Play bzw. Pause-Icon zu verwenden.

Die Diskussion ist schon an der Stelle nur 1 Icon zu verwenden. Auch bei Phasen.

@All-Ex-U
Copy link

All-Ex-U commented Jul 6, 2024

OK. Dann evtl. bei Start/Pause unter der Sonne ein kleines Play/Pause-Symbol in das Icon (statt dem Oben/Unten-Pfeil)?
Und bei geplanter Phasenänderung ein ^ bzw. v unter die Sonne?
Alles in einem Icon. Dann gäbe es eine Unterscheidung: Pfeile für Phasenänderung und Play/Pause für Ladestart/Ladestopp.

@naltatis naltatis marked this pull request as ready for review July 6, 2024 22:51
@naltatis
Copy link
Member Author

naltatis commented Jul 6, 2024

@All-Ex-U Danke für die Anregungen. Mit Play/Pause habe ich ganz am Anfang auch schon experimentiert, aber keine gute Kombination mit der Sonne gefunden, die ich ästhetisch fand und die selbsterklärend genug war. Da wir hier jetzt schon einige Runden gedreht haben, würde ich erst mal mit den jetzigen Icons ins Rennen gehen und das Feedback abwarten. Wenn wir merken, dass das erklärungsbedürftig ist, würd ich die Idee noch mal aufgreifen.

@andig Von meiner Seite aus gibts keine Todos mehr hier. Rein damit?

@andig andig merged commit 93c8b36 into master Jul 7, 2024
6 checks passed
@andig andig deleted the feature/charging_status_icon branch July 7, 2024 06:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ux User experience/ interface
Projects
None yet
6 participants