Verbesserung der Widgets Temperatur und Luftfeuchtigkeit des Raumes

[qleg]

Ein Temperatur- oder Feuchtigkeitswert kann je nach Raum variieren:

• Die Luftfeuchtigkeit ist im Badezimmer höher als im Schlafzimmer usw.

Es wäre daher interessant, die Möglichkeit zu haben, Schwellenwerte wie niedrig/normal/high für die Temperatur- und Feuchtigkeitswidgets des Raums zu definieren, um eine zuverlässige Farbinformation über diese Dashboards über diese Widgets zu erhalten.

Mir scheint, dass es nur generische Schwellenwerte für das Feuchtigkeitswidget (Farbe des Logos) gibt.

Heute haben wir diese Schwellenwerte für das Feuchtigkeitswidget des Raums:

• Feuchtigkeit kleiner oder gleich 45%: gelbes Logo
• Feuchtigkeit größer oder gleich 60%: blaues Logo
• Feuchtigkeit zwischen 45% und 60%: grünes Logo

Mir scheint, dass das Temperaturwidget des Raums heute keine Standard-Schwellenwerte hat und das Logo immer blau bleibt. Dann werdet ihr mir sagen, dass ich meine Temperatur- und Feuchtigkeitsalarme über die Szenen verwalten kann, und ihr habt recht, aber ich finde es auch gut, dies visuell im Widget-Bereich des Dashboards zu haben. Dies würde auch dazu beitragen, die Farben, die für jeden Schwellenwert verwendet werden, klarer zu gestalten. Ich glaube, dass heute nur wenige Menschen die Farb-/Schwellenwert-Entsprechungen dieses Widgets kennen und daher diesen Farben wenig Bedeutung beimessen.

Ich kann mir gut vorstellen, diese Schwellenwerte zu konfigurieren, aber optional (um die Verwendung des Widgets nicht zu verkomplizieren, wenn die Leute keine benutzerdefinierten Schwellenwerte benötigen):

• Entweder generische Standard-Schwellenwerte festlegen (wie wir sie heute mit dem Feuchtigkeitswidget des Raums haben)
• Oder keine Schwellenwerte festlegen (wie wir sie heute mit dem Temperaturwidget des Raums haben)

Visuelles Beispiel (ich bin kein Grafikdesigner, aber es kann eine Idee geben, rechts Aktivierung der Schwellenwerte und links keine Schwellenwerte):

Vielleicht auch die Farbkodierung überarbeiten (sie in die Dokumentation und/oder in die Widget-Bearbeitung aufnehmen) oder vielleicht die Möglichkeit bieten, die Farbe, die dem Schwellenwert zugeordnet ist, anzupassen.

Was ich nur schwer tun kann (falls jemand Lust hat, sich darauf einzulassen):

• Die Verbesserung entwickeln, um diese Schwellenwerte (oder nicht) auf der Box zu definieren

Was ich tun kann:

• Die Dokumentation für die Feuchtigkeitsbox initiieren (sie existiert nicht, nur das Temperaturwidget des Raums ist dokumentiert)
• Die Dokumentationen für die Temperatur- und Feuchtigkeitsboxen ergänzen (Schwellenwerte/Farben und Funktionsweise des Widgets in der Dokumentation…)

Was denkt ihr?

[spenceur]

Ich habe abgestimmt, aber heute sind sie nur noch als Hinweis da (schönes Wetter, haha).

[Lokkye]

@qleg:
Ich habe versucht, das « Design » umzusetzen, das du gemacht hast, aber ich habe ein Problem mit der Breite, weil es nicht auf allen Bildschirmgrößen passt. Ich habe alles so weit wie möglich komprimiert. (Achte nicht auf den Text und die Farben, ich bin noch in der Entwicklung )

Hast du eine Idee für eine andere Präsentation?

[pierre-gilles]

@Lokkye anstatt das in einer Spalte zu machen, mach das in einer Zeile, wenn es in einer Spalte nicht funktioniert Du kannst das mit einer Flexbox machen!

[Lokkye]

@pierre-gilles: Ich habe es mit Flexbox versucht und habe das gleiche Ergebnis

Ich bin mir sicher, dass ich noch eine kleine Option vergessen habe, damit es richtig funktioniert, aber ich finde sie nicht

[pierre-gilles]

Man muss die Richtung der Flexbox mit dem Attribut flex-direction anpassen!

Wenn du auf großen Bildschirmen bist, musst du in Zeilenrichtung sein:

 flex-direction: row;

Auf kleinen Bildschirmen musst du in Spaltenrichtung sein:

 flex-direction: column;

Dafür muss man Media Queries verwenden, um von einer zur anderen zu wechseln:

@media (max-width: 992px) {
  .classname {
    flex-direction: column;
  }
}

Wenn du eine Konfiguration testen willst, ohne dich zu ärgern, gibt es Flexbox-Generatoren, die sehr praktisch sind, um Experimente durchzuführen

Flexy Boxes — CSS flexbox playground and code generation tool

CSS Flexbox Generator - CSS Portal

Zögere nicht, wenn du stecken bleibst!

Edit: Ansonsten kannst du auch die nativen Klassen von Bootstrap (col-md-, col-lg-, etc…) verwenden, die diesen Job bereits erledigen

[Lokkye]

Danke @pierre-gilles, du hast mir den Weg geebnet. Der @media hat nicht funktioniert, weil wir in mehreren Spalten waren, aber ich habe den @container gefunden, der dafür super ist.
Hier das Ergebnis auf verschiedenen Bildschirmgrößen:

Was haltet ihr davon?

[pierre-gilles]

Ich bin nicht so der Fan vom Ergebnis, das wirkt ein bisschen unordentlich, finde ich!

Was haltet ihr von so etwas?

[guim31]

Ich bevorzuge diese Art, die Sache aus Sicht der Elementorganisation darzustellen, aber ich bevorzuge die Farbgebung von @Lokkye mit dem Blau, das „zu feucht“ bedeutet.

[Tlse-vins]

Ich stimme @guim31 zu

[pierre-gilles]

Also die Idee ist „gelb = zu trocken“, „grün = alles gut“ und blau „zu feucht“?

Gelb und grün verstehe ich, blau vielleicht etwas weniger, das gibt den Eindruck, dass alles in Ordnung ist, aber die Idee ist zu sagen, dass es „zu viel“ ist und dass man etwas tun muss (ein Fenster öffnen, eine Lüftung einschalten).

[guim31]

Ich verstehe, was du meinst, aber man könnte auch sagen, dass jemand, der die Luftfeuchtigkeit in seinem Hammam messen möchte, möchte, dass >80% grün angezeigt werden ^^
Wenn jemand eine bessere Idee hat, ich habe nichts dagegen

[qleg]

Und wenn wir dem Nutzer erlauben, seine Farbe nach Schwellenwert auszuwählen?
Das würde das Problem der individuellen Interpretation lösen, aber es bedeutet, dass jeder seine eigene Farbkodierung für dieses Widget hätte, was seltsam sein könnte.

Ich bin hin- und hergerissen

[pierre-gilles]

Ich bin kein Fan von übertriebener Personalisierung bis zu diesem Punkt, aber bei der Geschichte des Hammams hat Rot genauso viel Sinn (wenn du aus dem Hammam kommst, ist dein Kopf ganz rot!! )

[guim31]

Sehr schöne Pirouette

[Lokkye]

@pierre-gilles :

So etwa?

[pierre-gilles]

Brauchen wir das Kontrollkästchen? Können wir nicht standardmäßig die Schwellenwerte anzeigen, falls sie nicht konfiguriert sind? So gibt es einen zusätzlichen Zustand zu verwalten, also können wir nicht einfach den Text und die Eingabefelder anzeigen?

Ansonsten gefällt es mir gut

Bei der roten Farbe will ich mich auch nicht aufdrängen, wenn ich der Einzige bin, der dagegen ist, dann geht auch Blau!

[qleg]

Ich mag das Design so, aber ich finde, es ist nicht klar genug für den Nutzer:

• Man kennt die Farbe des „normalen“ Schwellenwerts nicht
• Man hat Schwierigkeiten zu erkennen, ob die Farbe unter oder über dem Schwellenwert liegt

Ich würde mir eher so etwas vorstellen:

[guim31]

Ich finde, dass dieses Design mit 3 Icons und 2 Eingabefeldern ein bisschen verwirrend ist

[qleg]

Oder man behält die 2 Symbole und fügt eine Info wie « größer als.. » und « kleiner als.. » links neben der Eingabe hinzu