Intégration de l'image d'une caméra dans un custom:button-card

Bonjour à tous,

Je souhaite intégrer l’image de ma caméra dans l’entête de ma card :

Ma nouvelle passion est le custom:button-card mais je ne trouve pas comment intégrer l’image d’une camera dans un custom:button-card. Quelqu’un aurait des pistes à me donner ?

Merci d’avance.

Je me répond à moi même car j’ai trouvé la solution à mon problème et si ca peux en aider certains :slight_smile:

L’idée est toujours d’utiliser les custom:button-card et d’insérer dans les custom_fields une carte picture-glance :

Voilà mon YAML :

card_pool:
  styles:
    card:
      - padding: "0px"
    grid:
      - grid-template-areas: "'cam overlay' 'measures measures'"
      - grid-template-columns: "1fr 0"
      - grid-template-rows: "180px min-content"
    custom_fields:
      overlay:
        - height: 180px
        - background: linear-gradient(180deg, rgba(var(--rgb-card-background-color),0) 45%, rgba(var(--rgb-card-background-color),1) 100%)
        - opacity: 1
        - padding: 0
  custom_fields:
    cam:
      card:
        type: picture-glance
        camera_image: camera.poolcamera
        entities: []
        card_mod:
          style:
            hui-image:
              $: |
                div img {
                  height: 180px;
                  object-fit: cover;
                  object-position: center -25px;
                }
              .: |
                hui-image {
                  height: 100%;
                }
            .: |
              ha-card {
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
                box-shadow: none;
              }
              ha-card .box {
                display: none;
              }
    overlay: <div></div>
    measures: 
      card:
        type: custom:button-card
        name: Indicateurs de l'eau
        label: "[[[ return states['sensor.pool_analysed_at'].state; ]]]"
        show_name: true
        show_label: true
        styles:
          card:
            - padding: 4%
            - border-radius: 0px
            - box-shadow: "none"
          grid:
            - grid-template-areas: "'n tmp . ph . redox . sel' 'l tmp . ph . redox . sel'"
            - grid-template-columns: "1fr 45px 5px 45px 5px 45px 5px 45px"
            - grid-template-rows: "min-content min-content"
          name:
            - font-weight: "bold"
            - font-size: "14px"
            - place-self: end left
          label:
            - font-size: "10px"
            - place-self: start
            - filter: "opacity(40%)"
        custom_fields:
          tmp:
            card:
              type: custom:button-card
              template: button_pool_measure
              name: Temp
              label: 23.5°C
              variables:
                  color: "blue"
          ph:
            card:
              type: custom:button-card
              template: button_pool_measure
              name: pH
              label: 7.2
              variables:
                  color: "green"
          redox:
            card:
              type: custom:button-card
              template: button_pool_measure
              name: RedOx
              label: 650mV
              variables:
                  color: "yellow"
          sel:
            card:
              type: custom:button-card
              template: button_pool_measure
              name: Sel
              label: 3.3g/l
              variables:
                  color: "red"

button_pool_measure:
  variables:
    color: "blue"
  show_name: true
  show_label: true
  aspect_ratio: 1/1
  styles:
    card:
      - padding: "0px"
      - box-shadow: none
      - background-color: var(--primary-background-color)
      - background-image: >
          [[[
              let theme = hass.themes.themes[hass.themes.theme].modes[(hass.themes.darkMode ? "dark" : "light")];
              let color_bckg = theme[`google-${variables.color}`].replace('#', '%23');
              let opacity = theme['opacity-bg'];
              return "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1440 1440'><path fill='"+color_bckg+"' fill-opacity='"+opacity+"' d='m 0,566 48,26.7 C 96,619 192,673 288,699.3 384,726 480,726 576,710 c 96,-16 192,-48 288,-42.7 96,5.7 192,47.7 288,58.7 96,11 192,-11 240,-21.3 l 48,-10.7 v 754 H 1392 1152 864 576 288 48 0 Z'></path></svg>\")";
          ]]]
      - background-size: 100%
    grid:
      - grid-template-areas: "'n' 'l'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "auto auto"
    name:
      - font-size: "10px"
      - place-self: center
    label:
      - font-size: "10px"
      - place-self: center
      - font-weight: "bold"
      - color: >
          [[[
            if (hass.themes.darkMode){
              return "#FFFFFF";
            } else {
              return `rgba(var(--color-${variables.color}), 1)`;
            }
          ]]]
4 « J'aime »

Merci pour le partage :+1:

Il y avait un autre exemple ici :

1 « J'aime »

Extrêmement intéressant, merci pour le partage.

Comment as-tu tous ces métriques de l’eau de la piscine ?
Tu peux décrire ton matériel stp notamment pour la mesure de la température ? du PH ? Niveau d’eau ?

J’ai essayé mais rapidement les mesures se sont retrouvées fausses à cause de la détérioration des sondes liées à l’électrolyse.

Tu n’as pas domotisé le volet de ta piscine ?

Merci de ton aide ?

C’est le but du forum le partage :wink:

J’ai une Blue Connect depuis 3 ans. Il marche nickel. Faut changer la sonde toutes les deux saisons. Faut la sonde pour les piscines au sel. J’aurais bien aimé la mesure de l’alcalinité mais cette sonde ne le fait pas.
Pour le niveau d’eau c’est du diy prévu pour cette année. Je vais juste mettre un flotteur dans un des skimmer.

C’est une idée que j’ai en tête mais que je n’ai pas encore mis en pratique. Plus pour l’ouverture lorsque le soleil donne dessus et que l’alarme est activée comme ça je sais qu’il n’y aurais pas mes enfants à côté !!!

2 messages ont été scindés en un nouveau sujet : Récupérer les informations du Blue Connect