Amélioration widgets Température et Hygrométrie de la pièce

Une valeur de température ou d’hygrométrie peut varier en fonction d’une pièce :

  • L’hygrométrie sera plus élevé dans la salle de bain que dans une chambre etc

Ca serait donc intéressant de permettre de définir des seuils de type bas/normal/élevé sur les widgets Température et Hygrométrie de la pièce pour avoir une information couleur fiable sur ces dashboards via ces widgets.

Il me semble qu’il existe uniquement des seuils génériques pour le widget Humidité (couleur du logo).

Aujourd’hui, on est sur ces seuils sur le widget hygrométrie de la pièce :

  • Humidité inférieur ou égale à 45% : logo Jaune
  • Humidité supérieur ou égale à 60% : logo Blue
  • Humidité entre 45% et 60% : logo Vert

Il me semble que le widget Température de la pièce n’a pas de notion de seuil par défaut aujourd’hui et le logo reste toujours en bleu. Alors vous allez me dire que je peux gérer mes alertes de température et d’hygrométrie via les scènes et vous avez raison mais je trouve ça bien aussi de l’avoir visuellement au niveau du widget coté dashboard. Ca permettrait également d’être plus clair sur les couleurs utilisés pour chaque seuil, je pense qu’aujourd’hui, peu de personne savent les correspondances couleurs/seuils de ce widget et n’apporte donc peu d’importance à ces couleurs.

J’imagine assez bien la possibilité de configurer ces seuils mais en mode optionnel (pour ne pas complexifier l’utilisation du widget si des gens n’ont pas besoin de seuils personnalisés):

  • Soit mettre des seuils génériques par défaut (comme ce qu’on a aujourd’hui avec le widget Hygrométrie de la pièce)
  • Soit ne pas mettre de seuil (comme ce qu’on a aujourd’hui avec le widget Température de la pièce)

Exemple visuel (je suis loin d’être graphiste mais ça peut donner une idée, à droite activation des seuils et à gauche pas de seuil) :

Peut-être aussi revoir le code couleur (l’ajouter dans la doc et/ou dans l’édition du widget) ou peut-être permettre de personnaliser la couleur associé au seuil.

Ce que je peux difficilement faire (Si quelqu’un veut se lancer) :

  • Développer l’amélioration pour pouvoir définir (ou pas) ces seuils sur la box

Ce que je peux faire :

  • Initier la doc pour la box hygrométrie (elle n’existe pas, seul le widget Température de la pièce est documenté)
  • Compléter les docs pour les box température et hygrométrie (seuils/couleurs et fonctionnement du widget dans la doc…)

Qu’en pensez-vous ?

A voté, il est vrais qu’aujourd’hui elle sont la juste a titre indicatif (sa fait beau ahah).

@qleg :
J’ai essayé de mettre en place le « design » que tu a fait dans mais j’ai une problèmatique au niveau de la largeur car cela ne rentre pas dans toutes les tailles d’écrans. J’ai pourtant essayé de tout compresser au maximum. (Ne pas faire attention au texte et au couleur, je suis en cours de dev :slight_smile: )

Est ce que tu aurais une idée d’une autre presentation ?

@Lokkye au lieu de faire ça en colonne, fait ça en ligne quand ça marche pas en colonne :slight_smile: Tu peux faire ça avec une flexbox !

@pierre-gilles : J’ai tenté en flexbox est j’ai le meme résultat



Je suis sur que j’ai encore oublié une petite option pour que cela fonctionne bien mais je trouve pas :cry:

Il faut jouer sur la direction de la flexbox avec l’attribut flex-direction !

Quand tu es sur des écrans larges, il faut que tu sois en:

 flex-direction: row;

Sur des petits écrans, il faut que tu sois en:

 flex-direction: column;

Pour cela il faut utiliser des media query pour passer de l’une à l’autre :

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

Si tu veux tester une configuration sans t’embêter, il y a des flexbox generator, très pratique pour faire des expériences :slight_smile:

N’hésite pas si tu bloques !

Edit: Sinon, tu peux aussi utiliser les class native de bootstrap (col-md-, col-lg-, etc…) qui font déjà ce boulot

Merci @pierre-gilles, tu m’a ouvert la voie. Le @media ne fonctionnait pas car on était en multi colonne mais j’ai trouvé le @container qui est super pour cela.
Voila le résultat sur plusieurs taille d’écran:




Qu’est ce que vous en pensez ?

1 « J'aime »

Je suis pas hyper fan du rendu, ça fait un peu fouilli je trouve!

Qu’est-ce que vous pensez d’un truc comme ça ?

3 « J'aime »

Je préfère cette manière de présenter le truc d’un point de vue de l’organisation des éléments, mais je préfère le code couleur de @Lokkye avec le bleu qui veut dire « trop humide »

1 « J'aime »

Je rejoins @guim31

Ok l’idée c’est « jaune = trop sec », « vert = tout bon », et bleu « trop humide » ?

Le jaune et vert je vois l’idée, le bleu peut-être un peu moins, ça donne l’impression que tout est ok alors que l’idée c’est de dire que c’est « trop » et qu’il faut faire quelque chose (ouvrir une fenêtre, déclencher une VMC)

Je vois ce que tu veux dire, mais on pourrait aussi dire que si une personne veut mesurer l’humidité de son hammam il voudra que >80% soit en vert ^^
Si quelqu’un a une meilleure idée moi je n’ai rien contre :wink:

Et si on laisse l’utilisateur choisir sa couleur par seuil ?
ça répondrait au problème d’interprétation de chacun mais ça veut dire que chacun aurait son code couleur perso sur ce widget, ça peut être bizarre.

Je suis partagé :slight_smile:

Je suis pas fan de la personnalisation à l’extrême jusqu’à ça, pour l’histoire du hammam, dans ce cas là le rouge fait tout aussi sens (quand tu sors du hammam, t’as la tête toute rouge !! :grin:)

1 « J'aime »

:joy: Très belle pirouette

@pierre-gilles :

Like this ?


Est-ce qu’on a besoin de la checkbox ? On peut afficher les seuils par défaut si jamais ils sont pas configurés non ? Là ça fait un état de plus à gérer, autant juste mettre le texte et les input non ?

Sinon j’aime bien :slight_smile:

Pour la couleur rouge, je veux pas m’imposer non plus, si je suis seul contre tous le bleu marche aussi !

1 « J'aime »

J’aime bien le design comme ça mais je trouve que c’est pas assez clair pour l’utilisateur :

  • On ne connait pas la couleur du seuil « normal »
  • On a du mal à savoir si la couleur correspond à en dessous ou au dessus du seuil

Je verrais plus un truc comme ça :
image

Moi je trouve que c’est ce design avec 3 icônes et 2 input qui est un peu confusant :sweat_smile:

Ou alors garder les 2 icones et ajouter une info « supérieur à … » et *« inférieur à… * » à gauche de l’input