# \[Mon Dashboard (Inactif) \] - @kaoru

**URL:** <https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022>\
**Category:** Présentations\
**Tags:** tableau-de-bord-dashboard\
**Created:** [Novembre 16, 2020, 12:57 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022 "2020-11-16T12:57:26Z")\
**Posts on this page:** 20\
**Page:** 6

<div class="post-metadata">

**Author:** ![kaoru](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kaoru/32/1405_2.png) [@kaoru](https://forum.hacf.fr/u/kaoru)\
**Post date:** [Avril 20, 2022, 6:59 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/113 "2022-04-20T18:59:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hugoKs3](https://forum.hacf.fr/user_avatar/forum.hacf.fr/hugoks3/32/13185_2.png) [@hugoKs3](https://forum.hacf.fr/u/hugoKs3)\
**Post date:** [Avril 20, 2022, 7:06 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/114 "2022-04-20T19:06:01Z")

</div>

ui-lovelace.yaml:

```auto
          - 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:

```auto
  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:

```auto
  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>

```

---

<div class="post-metadata">

**Author:** ![kerkhra](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/k/b782af/32.png) [@kerkhra](https://forum.hacf.fr/u/kerkhra)\
**Post date:** [Novembre 14, 2022, 2:57 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/115 "2022-11-14T14:57:42Z")

</div>

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 «&nbsp;carré&nbsp;»?  
Merci

---

<div class="post-metadata">

**Author:** ![Atchoom](https://forum.hacf.fr/user_avatar/forum.hacf.fr/atchoom/32/23709_2.png) [@Atchoom](https://forum.hacf.fr/u/Atchoom)\
**Post date:** [Novembre 17, 2022, 7:39 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/116 "2022-11-17T19:39:38Z")

</div>

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 😍  
Ci-joint mes codes:

ui.lovelace.yaml:

```auto
      - 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:

```auto
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:

```auto
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"

```

 ![carte-temp](https://forum.hacf.fr/uploads/default/original/3X/c/f/cfd39c69c1295868039452d767d2ea2f4dc48217.png)

---

<div class="post-metadata">

**Author:** ![DrDebase](https://forum.hacf.fr/user_avatar/forum.hacf.fr/drdebase/32/17430_2.png) [@DrDebase](https://forum.hacf.fr/u/DrDebase)\
**Post date:** [Novembre 23, 2022, 9:17 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/117 "2022-11-23T09:17:30Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Novembre 23, 2022, 9:53 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/118 "2022-11-23T09:53:54Z")

</div>

> [@Atchoom](#):
>
> ```auto
> style: |
> ha-card {
> box-shadow: none;
> background: transparent;
> border-radius: 0;
> }type: ''  
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![Atchoom](https://forum.hacf.fr/user_avatar/forum.hacf.fr/atchoom/32/23709_2.png) [@Atchoom](https://forum.hacf.fr/u/Atchoom)\
**Post date:** [Novembre 23, 2022, 11:05 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/119 "2022-11-23T23:05:07Z")

</div>

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 «&nbsp;thermometre&nbsp;» par le template «&nbsp;base&nbsp;» 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?

---

<div class="post-metadata">

**Author:** ![nonorider](https://forum.hacf.fr/user_avatar/forum.hacf.fr/nonorider/32/14302_2.png) [@nonorider](https://forum.hacf.fr/u/nonorider)\
**Post date:** [Décembre 22, 2022, 12:10 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/120 "2022-12-22T12:10:32Z")

</div>

Je viens de découvrir cette interface que je trouve top mais pas simple à adapter pour ma part .  
Pouvez vous m’expliquer comment procéder pour changer les icones hormis ceux déjà présents . Par exemple je voudrais mettre un sapin …

---

<div class="post-metadata">

**Author:** ![slypsteen](https://forum.hacf.fr/user_avatar/forum.hacf.fr/slypsteen/32/22973_2.png) [@slypsteen](https://forum.hacf.fr/u/slypsteen)\
**Post date:** [Décembre 28, 2022, 8:53 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/121 "2022-12-28T08:53:58Z")

</div>

Bonjour,

je voudrais aussi ajouter ce type de dashboard à ma configuration. Seulement j’ai déjà un dashboard pour nos téléphones et un autre pour mon pc.

ma question est comment faite vous pour implémenter celui-ci sans que cela modifie les autres déjà en places?

merci d’avance…

---

<div class="post-metadata">

**Author:** ![Atchoom](https://forum.hacf.fr/user_avatar/forum.hacf.fr/atchoom/32/23709_2.png) [@Atchoom](https://forum.hacf.fr/u/Atchoom)\
**Post date:** [Janvier 2, 2023, 10:39 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/122 "2023-01-02T22:39:13Z")

</div>

> [@nonorider](#):
>

tu peux te servir de ce site pour trouver de nouvelles icones : [https://materialdesignicons.com/](https://materialdesignicons.com/)  
sur l’icone qui t’interesse tu fais «&nbsp;View SVG&nbsp;»

> [@slypsteen](#):
>

Tu peux créer autant de dashboard que tu veux dans les paramêtres mais il faudra peut être que tu passes ta configuration en mode «&nbsp;yaml&nbsp;» ou «&nbsp;storage&nbsp;» si ce n’est pas déjà fait.

Et pour me répondre à moi même j’ai trouvé mon erreur :

un `custom-field` au lieu de `custom_fields` dans mon ui-lovelace.yaml

---

<div class="post-metadata">

**Author:** ![slypsteen](https://forum.hacf.fr/user_avatar/forum.hacf.fr/slypsteen/32/22973_2.png) [@slypsteen](https://forum.hacf.fr/u/slypsteen)\
**Post date:** [Janvier 3, 2023, 5:38 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/124 "2023-01-03T17:38:21Z")

</div>

j’ai bien réussi à implanter le dashboard, mais le thème «&nbsp;tablet&nbsp;» prend le dessus sur mes autres dashboard. Ce qui fait que cela ressemble plus à rien…

Qqun aurait déjà ajouter ce dashboard avec un autre qui mini du thème mushroom?

---

<div class="post-metadata">

**Author:** ![Atchoom](https://forum.hacf.fr/user_avatar/forum.hacf.fr/atchoom/32/23709_2.png) [@Atchoom](https://forum.hacf.fr/u/Atchoom)\
**Post date:** [Janvier 4, 2023, 12:36 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/125 "2023-01-04T00:36:14Z")

</div>

Je ne me sers pas du thème, j’ai juste rajouté une ou 2 lignes dans base.yaml (je suis parti sur une organisation comme matt8707 en séparant le button\_card\_templates.yaml en plusieurs fichiers, plus lisible je trouve) et comme ça je n’ai pas eu besoin de changer de thème.  
Mais pour le moment comme j’ai une utilisation surtout sur téléphone je ne me sers pas de la sidebar ni du footer.

---

<div class="post-metadata">

**Author:** ![slypsteen](https://forum.hacf.fr/user_avatar/forum.hacf.fr/slypsteen/32/22973_2.png) [@slypsteen](https://forum.hacf.fr/u/slypsteen)\
**Post date:** [Janvier 4, 2023, 7:37 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/126 "2023-01-04T07:37:51Z")

</div>

Ok, mais tu as quand même du mettre le thème «&nbsp;tablet&nbsp;» ?  
Mon problème c’est que quand j’ajoute les fichier et dossier de matt8707, dans mon profil sur l’onglet thème, je ne vois plus mes thèmes Mushroom, juste le thème tablet.

---

<div class="post-metadata">

**Author:** ![Atchoom](https://forum.hacf.fr/user_avatar/forum.hacf.fr/atchoom/32/23709_2.png) [@Atchoom](https://forum.hacf.fr/u/Atchoom)\
**Post date:** [Janvier 4, 2023, 3:53 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/127 "2023-01-04T15:53:36Z")

</div>

Il est visible dans mes choix de thèmes mais je ne m’en sers pas.  
Pour que tes thèmes soit visible il faut que, dans configuration.yaml tu ajoutes :

```auto
frontend:
  themes: !include_dir_merge_named themes

```

à adapter en fonction de l’endroit où sont rangé tes thèmes. Ils devraient ensuite tous être visible.

Après ça tu pourras choisir un thème par dashboard avec ce code :

```auto
theme: nomDuTheme

```

---

<div class="post-metadata">

**Author:** ![Trlc168](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/t/85f322/32.png) [@Trlc168](https://forum.hacf.fr/u/Trlc168)\
**Post date:** [Février 5, 2023, 9:40 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/128 "2023-02-05T09:40:48Z")

</div>

Bonjour à tous 😉  
Nouvel utilisateur de HA, je découvre ce post et trouve l’interface vraiment sympa. J’ai lu pas mal de posts, mais je ne comprend strictement rien à tout ça, à comment intégrer ce genre d’interface. C’est hyper compliqué pour des gens qui ne comprennent pas car rien n’indique par quoi commencer, les étapes à suivre, etc… J’ai uploadé tous les fichiers dans mon dossier config mais évidemment ça ne lance plus HA qu’en mode sans echec car pleins d’erreurs dans les Yaml. N’y a t-il pas un tuto pas à pas en français pour ce genre de manip? HA ne compte pas simplifier la mise en place de thèmes proposés par la communauté car là c’est quand même hyper fastidieux quand on débarque je trouve. Merci par avance pour les retours 😉

---

<div class="post-metadata">

**Author:** ![djal](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/d/f19dbf/32.png) [@djal](https://forum.hacf.fr/u/djal)\
**Post date:** [Février 5, 2023, 12:36 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/129 "2023-02-05T12:36:02Z")

</div>

Alors non, il n’y a pas de « tuto » pas à pas.  
HA est un système complexe, mais permet quand même de faire des interfaces fonctionnelles faciles à mettre en place par default (tu n’as pas connu il y a quelques années ce n’était pas possible)  
Et pour ceux qui veulent des trucs plus « personnalisés », il faut mettre les mains dedans, regarder les examples, les vidéos, les sujets du forum.  
Il faut comprendre comment fonctionne HA.  
Et ce n’est qu’une fois fait que tu va pouvoir commencer à faire ce genre de Dashboard.  
Désolé de couper tes illusions, mais un débutant ne parviendra pas immédiatement à faire ça, car un tuto pas a pas comme tu dis n’est pas faisable.  
On a tous commencer par la, sans aucunes compétences, et on a appris au fur et à mesure, à force de lectures et d’essais.  
Alors je t’invite à faire pareil, à prendre ton temps, à comprendre, et ça devrait bien se passer.  
😉

---

<div class="post-metadata">

**Author:** ![cob94440](https://forum.hacf.fr/user_avatar/forum.hacf.fr/cob94440/32/692_2.png) [@cob94440](https://forum.hacf.fr/u/cob94440)\
**Post date:** [Février 5, 2023, 2:56 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/130 "2023-02-05T14:56:28Z")

</div>

Tu confonds thème et personnalisation. Un thème s’installe facilement avec hacs.  
Une personnalisation si tu copies sans regarder ce qu’il y a dans les fichiers c’est normal de planter. Il faut être un peu curieux quand même.  
Pat exemple si tu copie un fichier yaml et qu’il fait appel à un plugins que tu n’as pas ça ne risque pas de marcher.

---

<div class="post-metadata">

**Author:** ![jeanini](https://forum.hacf.fr/user_avatar/forum.hacf.fr/jeanini/32/27764_2.png) [@jeanini](https://forum.hacf.fr/u/jeanini)\
**Post date:** [Mai 24, 2023, 2:03 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/131 "2023-05-24T14:03:50Z")

</div>

Salut à tous, je up le topic.  
Merci pour le partage de ta conf.  
J’essaye actuellement d’intégrer le code que tu as partagé pour la température mais rien à faire j’ai toujours le message "button-card template is missing " alors que .yaml est bien présent dans ma conf

---

<div class="post-metadata">

**Author:** ![Schumi](https://forum.hacf.fr/user_avatar/forum.hacf.fr/schumi/32/21330_2.png) [@Schumi](https://forum.hacf.fr/u/Schumi)\
**Post date:** [Août 15, 2023, 1:03 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/132 "2023-08-15T13:03:41Z")

</div>

Bonjour @kaoru  
Je suis tres fan de ton dashboard et je voudrais me lancer pour tester ce board.  
Mon petit soucis: je suis avec un dashboard en mode UI (je pense que c’est cela) hors, toi, ton dashboard est en mode yaml, si je ne dis pas de betise.  
Peux-tu m’expliquer comment je dois configurer mon «&nbsp;configuration.yaml&nbsp;» pour acceder au deux sorte de dashboard, mais surtout sans rien perdre ou abimer de mon dashboard actuel.  
Merci a toi pour toutes infos que tu pourra me fournir, j’ai hate de pouvoir tester.  
😉

---

<div class="post-metadata">

**Author:** ![epoxsv](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/e/ba9def/32.png) [@epoxsv](https://forum.hacf.fr/u/epoxsv)\
**Post date:** [Août 29, 2023, 10:53 UTC](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022/133 "2023-08-29T10:53:15Z")

</div>

Bonjour a tous, @kaoru merci pour ce super travail !  
J'ai importé le dashbord, notamment ta partie sur les thermétre très sympa mais je ne comprend pas pourquoi ma case n'est pas remplit par le graph, j'ai un petit écart.  
J'ai un peu tout checké et je ne trouve pas pourquoi ! Quelqu'un a t-il une idée ? A PRIOR @hugoKs3 tu as le même soucis, as tu trouvé la solution ?

 ![image](https://forum.hacf.fr/uploads/default/original/3X/b/3/b340c3dfd4a41023519747eccc6a2355ab59d653.png)

UI LOVELACE :

```auto
      - type: grid
        title: Températures
        view_layout:
          grid-area: temperatures
        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: 2
                cards:

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

```

thermometre :

```auto
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: 1
        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: 70%
        - fill: "#9da0a2"

```

[Page précédente](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022.md?page=5)

[Page suivante](https://forum.hacf.fr/t/mon-dashboard-inactif-kaoru/1022.md?page=7)