[Mon Dashboard] - @kaoru

Salut,

Il ressemble à quoi ton ui-lovelace.yaml sur cette card ? et aussi les template thermometre et icon_thermometre se trouvant button_card_templates.yaml dans template

ui-lovelace.yaml:

          - type: custom:button-card
            entity: sensor.temperature_salon
            name: Salon
            hold_action: !include popup/temperature_salon.yaml
            tap_action: !include popup/temperature_salon.yaml
            custom_fields:
              graph:
                card:
                  entities:
                    - entity: sensor.temperature_salon
                      color: '#0066ff'
            template:
              - thermometre
              - icon_thermometre

thermometre:

  thermometre:
    template:
      - base
    aspect_ratio: 1/1
    show_state: true
    custom_fields:
      graph:
        card:
          type: "custom:mini-graph-card"
          height: 800
          upper_bound: 38
          lower_bound: 18
          line_width: 12
          align_state: left
          group: false
          points_per_hour: 2
          hour24: true
          hours_to_show: 12
          show:
            name: false
            icon: false
            state: false
            legend: false
            labels: false
            style: |
              ha-card {
                box-shadow: none;
                background: transparent;
                border-radius: 0;
              }type: ''
    styles:
      name:
        - z-index: 1
      state:
        - z-index: 1
      custom_fields:
        graph: [bottom: 0%, left: 0%, width: 100%, position: absolute, z-index: -1]
        icon:
          - width: 100%
          - fill: "#9da0a2"

icon_thermometre:

  icon_thermometre:
    custom_fields:
      icon: >
        <svg viewBox="10 5 50 50">
          <style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
          <path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
        </svg>

Hello,

Merci @kaoru pour ces desgin.
@hugoKs3,
As-tu réussi à trouver le problème? Depuis la dernière maj, la problème a été amplifié avec la taille qui sort du « carré »?
Merci

Bonsoir,

J’ai un soucis d’affichage sur les cartes « température », j’ai beau chercher dans tout les sens je ne trouve pas mon erreur, surement un truc tout bête… j’ai volontairement mis une seule colonne pour le moment pour voir tout ce qui est écrit dans le cadre rouge, et j’ai essayé de vider le cache de mon navigateur.

Et merci pour ce dashboard, il est top :heart_eyes:
Ci-joint mes codes:

ui.lovelace.yaml:

      - type: grid
        title: Temperature
        view_layout:
          grid-area: temperature
        columns: 1
        cards:
          - type: custom:swipe-card
            start_card: 1
            parameters:
              roundLengths: true
              effect: coverflow
              speed: 650
              spaceBetween: 20
              threshold: 7
              coverflowEffect:
                rotate: 80
                depth: 300
            cards:
              - type: grid
                columns: 1
                cards:
                  - type: custom:button-card
                    entity: sensor.salon_temperature
                    name: salon
                    hold_action: !include popup/temperature_salon.yaml
                    tap_action: !include popup/temperature_salon.yaml
                    custom-field:
                      graph:
                        card:
                          entities:
                            - entity: sensor.salon_temperature
                              color: "#0066ff"
                    template:
                      - thermometre
                      - icon_thermometre

base.yaml:

base:
  variables:
    state: >
      [[[ return entity === undefined || entity.state; ]]]
    timeout: >
      [[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
    light_color: >
      [[[ return entity === undefined || entity.state === 'unavailable' ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]
  aspect_ratio: 1/1
  show_state: true
  show_icon: false
  state_display: >
    [[[ if (variables.state === true) return 'Inactif'; ]]]
  tap_action:
    ui_sound_tablet: |
      [[[
        const screensaver = states['switch.lenovotab_screensaver'] === undefined ||
          states['switch.lenovotab_screensaver'].state;
          
        if (variables.state === 'off' && screensaver === 'off') {
          hass.callService('media_player', 'play_media', {
            entity_id: 'media_player.c2080cea_6627150a',
            media_content_id: '/local/sound/on.m4a',
            media_content_type: 'music'
          });
        }
        if (variables.state === 'on' && screensaver === 'off') {
          hass.callService('media_player', 'play_media', {
            entity_id: 'media_player.c2080cea_6627150a',
            media_content_id: '/local/sound/off.m4a',
            media_content_type: 'music'
          });
        }
      ]]]
    animation_card: |
      [[[
        const animation_speed_ms = 900;
        const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
        this.shadowRoot.getElementById("card").style.animation = animation;
        window.setTimeout(() => {
          this.shadowRoot.getElementById("card").style.animation = "none";
        }, animation_speed_ms)
      ]]]
    action: toggle
    haptic: medium
  styles:
    grid:
      - grid-template-areas: |
          "icon  circle"
          "n     n"
          "s     s"
      - grid-template-columns: repeat(2, 1fr)
      - grid-template-rows: auto repeat(2, min-content)
      - gap: 2%
      - align-items: start
    name:
      - justify-self: start
      - line-height: 115%
    state:
      - justify-self: start
      - line-height: 115%
    card:
      - font-family: Sf Display
      - border-radius: 5%
      - -webkit-tap-highlight-color: rgba(0,0,0,0)
      - transition: none
      - padding: 10%
      - --mdc-ripple-color: >
          [[[
            return (variables.state === 'on' || variables.state === 'home' || variables.state === 'cool' || variables.state === 'fan_only') ?
              'rgb(0, 0, 0)' :
              'rgba(255, 255, 255, 0.3)';
          ]]]
      - color: >
          [[[
            return (variables.state === 'on' || variables.state === 'home' || variables.state === 'cool' || variables.state === 'fan_only') ?
              'rgba(0, 0, 0, 0.6)' :
              'rgba(255, 255, 255, 0.3)';
          ]]]
      - background-color: >
          [[[
            return (variables.state === 'on' || variables.state === 'home' || variables.state === 'cool' || variables.state === 'fan_only') ?
              'rgba(255, 255, 255, 0.8)' :
              'rgba(115, 115, 115, 0.2)';
          ]]]
  extra_styles: |
    #name, #state {
      font-size: 1.34vw;
      letter-spacing: 0.05vw;
    }
    /* portrait */
    @media screen and (max-width: 1200px) {
      #name, #state {
        font-size: 2vw;
        letter-spacing: 0.05vw;
      }
    }
    /* phone */
    @media screen and (max-width: 800px) {
      #name, #state {
        font-size: 3.1vw;
        letter-spacing: 0.12vw;
      }
    }
    @keyframes card_bounce {
      0% {
        transform: scale(1);
      }
      15% {
        transform: scale(0.9);
      }
      25% {
        transform: scale(1);
      }
      30% {
        transform: scale(0.98);
      }
      100% {
        transform: scale(1);
      }
    }

icons.yaml:

thermometre:
  template:
    - base
  aspect_ratio: 1/1
  show_state: true
  tap_action:
    ui_sound: |
      [[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
      hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
      else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
      hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
  custom_fields:
    graph:
      card:
        type: custom:mini-graph-card
        height: 800
        upper_bound: 38
        lower_bound: 18
        line_width: 12
        align_state: left
        group: false
        points_per_hour: 2
        hour24: true
        hours_to_show: 24
        show:
          name: false
          icon: false
          state: false
          legend: false
          labels: false
          style: |
            ha-card {
              box-shadow: none;
              background: transparent;
              border-radius: 0;
            }type: ''
  styles:
    name:
      - z-index: 1
    state:
      - z-index: 1
    custom_fields:
      graph: [bottom: 0%, left: 0%, width: 100%, position: absolute, z-index: -1]
      icon:
        - width: 100%
        - fill: "#9da0a2"

Bonjour, Bon je ne pense pas que sa vienne de là, mais sur ton image à la fin il y a
Type:’ ’
Je débute donc difficile, y’a t’il une erreur quand tu publie ta Card ?

1 « J'aime »

Faut supprimer le type:'' ca rien a faire la et ca doit te créer ton erreur.

Hélas ça ne règle pas le problème. le type:'' est aussi dans le code de @kaoru aoru, c’est la que je l’ai pris, je débute également donc pas facile, facile…
Quand je remplace le template « thermometre » par le template « base » dans le ui.lovelacela carte s’affiche correctement (sans le graph bien sûr) donc le soucis doit bien venir du code de mon template mais impossible de voir où. J’ai pourtant fait un copié collé du code de @kaoru.
Mystère…

@antyamok tu avais eu le même souci, comment avais-tu réglé le problème?