[ Carte ] Mise en forme vanne avec thermostant Versatile

Bonjour,

Ayant installé l’excellente intégration Versatile de @Jean-Marc_Collin, que je profite pour remercier, je cherchais une carte qui me convenait visuellement avec tous les paramètres que je voulais pour le suivi et le débugage de mes vannes TRVZB. Je sais qu’il existe la carte versatile mais elle ne répondait pas à ce que je voulais.
Je vous propose donc cette carte pour ceux que ça intéresse :

  • Graphique avec température de la sonde dans la pièce et la température interne de la vanne
  • 2ème ligne :
    • A gauche : le % d’ouverture de la vanne, le % de batterie de la vanne et le hvac_action du
      thermostat versatile
    • A droite : les préréglages (preset_mod) du thermostat versatile
  • 3ème ligne : thermostat versatile

Cette carte n’utilise pas card_mod, elle utilise les cartes custom assez courante suivantes
On garde une partie de l’interface UI, sauf pour l’horizontale de la 2ème ligne
custom:vertical-stack-in-card
custom:stack-in-card
custom:mini-graph-card
custom:mushroom-template-card
custom:button-card

Le code
type: vertical-stack
cards:
  - type: heading
    icon: mdi:bed-double
    heading: Parents
    heading_style: title
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sonde_parents_temperature
            name: Température
            state_adaptive_color: true
          - entity: climate.valve_parents
            name: Temp
            attribute: current_temperature
            unit: °C
            state_adaptive_color: true
            show_graph: false
            show_state: true
        hour24: true
        hours_to_show: 24
        points_per_hour: 2
        font_size: 50
        show:
          name: false
          icon: false
          legend: false
          labels: true
          extrema: false
        color_thresholds:
          - color: "#33ccff"
            value: 19
          - color: "#00ffff"
            value: 19.5
          - color: "#33ffcc"
            value: 20
          - color: "#00ff99"
            value: 20.5
          - color: "#ffff99"
            value: 21
          - color: "#ffff33"
            value: 21.5
          - color: "#ff9933"
            value: 22
          - color: "#cc6633"
            value: 24
          - color: "#ff6000"
            value: 26
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: custom:mushroom-template-card
            secondary: ""
            layout: horizontal
            tap_action:
              action: more-info
            entity: sensor.sonde_parents_temperature
            fill_container: false
            multiline_secondary: false
            primary: >-
              {% if is_state_attr('climate.versatile_parents','hvac_action',
              'idle') %} 
               🗜️ {{ states('number.valve_parents_valve_opening_degree', with_unit=True,)}} |🔋{{ states('sensor.valve_parents_battery') }} % | Inactif
              {% elif  is_state_attr('climate.versatile_parents','hvac_action',
              'heating') %} 
               🗜️ {{ states('number.valve_parents_valve_opening_degree', with_unit=True,)}} |🔋{{ states('sensor.valve_parents_battery') }} % | Chauffe
              {% else %} 🗜️ {{
              states('number.valve_parents_valve_opening_degree',
              with_unit=True,)}} | 🔋{{ states('sensor.valve_parents_battery')
              }} % | Off {% endif %} 
            icon: ""
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                name: Conf.
                entity: climate.versatile_parents
                show_state: false
                show_icon: true
                show_name: false
                icon: mdi:fire
                size: 80%
                styles:
                  icon:
                    - color: |
                        [[[
                          if (states['climate.versatile_parents']) {
                          if (states['climate.versatile_parents'].attributes.preset_mode == 'comfort')
                            return 'darkorange';
                          else
                            return 'white'; }
                        ]]]
                  name:
                    - color: white
                    - font-size: 60%
                  card:
                    - height: 40px
                    - width: 30px
                tap_action:
                  action: perform-action
                  perform_action: climate.set_preset_mode
                  target:
                    entity_id:
                      - climate.versatile_parents
                  data:
                    preset_mode: comfort
              - type: custom:button-card
                name: Eco
                entity: climate.versatile_parents
                show_state: false
                show_icon: true
                show_name: false
                icon: mdi:leaf
                size: 80%
                styles:
                  icon:
                    - color: |
                        [[[
                          if (states['climate.versatile_parents']) {
                          if (states['climate.versatile_parents'].attributes.preset_mode == 'eco')
                            return 'lightgreen';
                          else
                            return 'white'; }
                        ]]]
                  name:
                    - color: white
                    - font-size: 60%
                  card:
                    - height: 40px
                    - width: 30px
                tap_action:
                  action: perform-action
                  perform_action: climate.set_preset_mode
                  target:
                    entity_id:
                      - climate.versatile_parents
                  data:
                    preset_mode: eco
              - type: custom:button-card
                name: Manu
                entity: climate.versatile_parents
                show_state: false
                show_icon: true
                show_name: false
                icon: mdi:hand-back-left
                size: 80%
                styles:
                  icon:
                    - color: |
                        [[[
                          if (states['climate.versatile_parents']) {
                          if (states['climate.versatile_parents'].attributes.preset_mode == 'none')
                            return 'indianred';
                          else
                            return 'white'; }
                        ]]]
                  name:
                    - color: white
                    - font-size: 60%
                  card:
                    - height: 40px
                    - width: 30px
                tap_action:
                  action: perform-action
                  perform_action: climate.set_preset_mode
                  target:
                    entity_id:
                      - climate.versatile_parents
                  data:
                    preset_mode: none
              - type: custom:button-card
                name: Abs.
                entity: climate.versatile_parents
                show_state: false
                show_icon: true
                show_name: false
                icon: mdi:snowflake
                size: 80%
                styles:
                  icon:
                    - color: |
                        [[[
                          if (states['climate.versatile_parents']) {
                          if (states['climate.versatile_parents'].attributes.preset_mode == 'frost')
                            return 'skyblue';
                          else
                            return 'white'; }
                        ]]]
                  name:
                    - color: white
                    - font-size: 60%
                  card:
                    - height: 40px
                    - width: 30px
                tap_action:
                  action: perform-action
                  perform_action: climate.set_preset_mode
                  target:
                    entity_id:
                      - climate.versatile_parents
                  data:
                    preset_mode: frost
              - type: custom:button-card
                name: Boost
                entity: climate.versatile_parents
                show_state: false
                show_icon: true
                show_name: false
                icon: mdi:rocket-launch
                size: 80%
                styles:
                  icon:
                    - color: |
                        [[[
                          if (states['climate.versatile_parents']) {
                          if (states['climate.versatile_parents'].attributes.preset_mode == 'boost')
                            return 'red';
                          else
                            return 'white'; }
                        ]]]
                  name:
                    - color: white
                    - font-size: 60%
                  card:
                    - height: 40px
                    - width: 30px
                tap_action:
                  action: perform-action
                  perform_action: climate.set_preset_mode
                  target:
                    entity_id:
                      - climate.versatile_parents
                  data:
                    preset_mode: boost
      - type: custom:mushroom-climate-card
        entity: climate.versatile_parents
        show_temperature_control: true
        hvac_modes: []
        tap_action:
          action: more-info
        primary_info: state
        icon: mdi:radiator
        secondary_info: last-updated
        fill_container: false
        layout: horizontal
3 « J'aime »

Merci superbe carte
Pourriez vous revoir le collage de votre code car toutes les tabulations ont disparu et

Salut,
C’est corrigé.

2 « J'aime »

Hello @Jeffodilo,

Excellente carte ! J’adore. Je peux la mettre en exemple dans ma documentation ?

EDIT : si on veut l’améliorer encore, tu pourrais ajouter les états de détection fenêtre ouverte, mouvement, presence, délestage, mise en sécurité. Tu peux t’inspirer de ce qui est là : GitHub - jmcollin78/versatile-thermostat-ui-card: A custom card for a Versatile thermostat in home assistant based on versatile_thermostat integration. Un simple icone si la fonction est configurée et active suffit (à mon avis)

Les états sont accessibles dans le climate VTherm sous la forme d’attributs accessible via `is_state_attr(‹ climate.vtherm ›, ‹ attribute_name ›, ‹ on ›).

is_xxx_configured indique que la fonction xxx est configurée (sinon ce n’est pas la peine de mettre l’icone),
'is_xxx_detected` indique la fonction xxx a détecté un evenement et est donc activée. Ca vaut ‹ on › ou ‹ off › selon que la fonction a été activée ou non.

Voici ce qui pourrait être utile :

is_on: true                       <--- le VTherm est actif (hvac_mode != OFF)
is_device_active: false    <--- au moins un sous-jacent est actif (hvac_action != OFF et Idle)
presence_state: "on"
is_presence_configured: true
overpowering_state: "off"
is_power_configured: true
motion_state: "off"
is_motion_configured: true
window_state: "off"
window_auto_state: unavailable
is_window_bypass: false
is_window_configured: true
is_window_auto_configured: false
is_safety_configured: true
safety_state: "off"

N’hésites pas si ce n’est pas clair.

1 « J'aime »

Le code peut être simplifié, utiliser horizontal-stack, a la place de custom:stack-in-card.
Ça enlève une carte à utiliser et installer.
Vu que toutes les cartes sous custom:vertical-stack-in-card, seront collés.

1 « J'aime »

Bonjour,
@WarC0zes , c’était déjà testé lors de mon post pour limiter les cartes, car avec cette carte j’ai les bordures et comme je voulais faire sans card_mod…

Bonjour @Jean-Marc_Collin , oui tu peux utiliser sans problème dans ta doc, c’était le but. J’y ai bien pensé rajouter les infos pour s’approcher de Versatile card mais je n’utilise que l’entité absence pour 2 valves et les autres ne sont pas actives. A l’occasion on la fera évoluer avec la communauté, si il y a des motivés :grin:
J’aurais aussi des remontées à te faire sur un problème de % de valve entre le climate.valve et le climate versatile. Où veux tu que je poste avec les détails : github ou ici ?

Edit : J’ai relu ton post, effectivement on peut voir pour rajouter une horizontale card selon si c’est configuré, détecté en option, j’y jèterais un oeil quand j’aurais un moment.
Le problème c’est que si on a qu’une option on aura une barre avec un seul icone et si plein option, une barre pleine. Je regarderais ce que je peux faire.

1 « J'aime »

Pas de soucis chez moi. Un souci de ton thème plutôt.

Ouvre un nouveau sujet ou sur github (mais en anglais) histoire de ne pas trop mélanger les sujets. Ou en MP aussi si tu penses que c’est un problème sur ta conf. Comme tu veux.

1 « J'aime »

Tu as un thème sans border avec card_mod ?
Car sur une autre page sans thème, on voit bien les bordures sur un fond noir ! J’ai passé mes derniers mois à enlever les bordures avec card_mod avec les cartes natives… Maintenant que j’essaie sans card_mod, je galère.
Si je me trompe, je veux bien qu’on regarde ce qui cloche, car c’est un réel soucis dans ma mise en page.

Oui, j’ai un thème sans les bordures. Mais pas besoin de card_mod.
j’utilise :

  ha-card-border-width: 0