# 🎨 \[Mon Dashboard\] - @Clemalex

**URL:** <https://forum.hacf.fr/t/mon-dashboard-clemalex/737>\
**Category:** Présentations\
**Tags:** tableau-de-bord-dashboard\
**Created:** [Octobre 21, 2020, 12:08 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737 "2020-10-21T12:08:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Octobre 21, 2020, 12:08 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/1 "2020-10-21T12:08:31Z")

</div>

Voici des captures d’écran de mon Lovelace.

La couleur violet provient de mon thème, mais peut très bien être remplacée.

N’hésitez pas à poser des questions.

 ![lovelace](https://forum.hacf.fr/uploads/default/original/2X/5/52e8d7ccf1e957350afcd9dfc8518b72f62a94d4.jpeg) ![2](https://forum.hacf.fr/uploads/default/original/1X/a571396b60193260c236d13a5cb8c2eae34ff1bf.png) ![3](https://forum.hacf.fr/uploads/default/original/1X/7acf84e8084efcd915102f77dfd86d375fc5bf8c.png) ![4](https://forum.hacf.fr/uploads/default/original/1X/d36241171df5f95cad74f3ebc0e3609e62617137.png) ![5](https://forum.hacf.fr/uploads/default/original/1X/43fc1de31b083ec975c4cf138ea439fec348f148.png) ![6](https://forum.hacf.fr/uploads/default/original/1X/b059173a558d849976458fae4311aa35dcc65b02.png) ![7](https://forum.hacf.fr/uploads/default/original/1X/f388ba3b0154560b2267fc210cccd623ea03a776.png) ![8](https://forum.hacf.fr/uploads/default/original/1X/8271f1906637f3f59b34242800f4619fc87b897c.png) ![9](https://forum.hacf.fr/uploads/default/original/1X/b1b05746ce5d90232f45526a25b96f4263d27dbe.png)  
 ![20201227_165250](https://forum.hacf.fr/uploads/default/original/2X/4/4822116dfd452705ff846959ae76bfad67742ada.jpeg)  
 ![Screenshot_20210121-075357_Home Assistant](https://forum.hacf.fr/uploads/default/original/2X/9/92961c96efb15ceeadbdfc82e0403d3f2ec9ea85.jpeg)  
 ![animate](https://forum.hacf.fr/uploads/default/original/2X/d/d650588e89b223e623532ecaf04ccca58665d2c8.gif) ([code](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/31))  
 ![animate](https://forum.hacf.fr/uploads/default/original/2X/4/4cad4c48a0f30ff353cc62586d78243ffaaa31aa.gif)([code](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/32))  
 ![animate](https://forum.hacf.fr/uploads/default/original/2X/6/66392427c761839c2774705c650a4d4d50c78e16.gif) ([code](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/35))  
 ![image](https://forum.hacf.fr/uploads/default/original/2X/4/40e882e73e0f64ebe6ee9a282a307dc3911e23ff.png)  
 ![image](https://forum.hacf.fr/uploads/default/original/2X/a/aa3f2dabb961501af7b5c988f3da541a230b4d90.png)  
 ![animate](https://forum.hacf.fr/uploads/default/original/2X/b/b928e3d00c168d53e91c497e59868ac45f6e0788.gif)([code](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/50))  
 ![animate](https://forum.hacf.fr/uploads/default/original/2X/b/b17de595d06dd7d04fd7aa075ab4ae248dcaba4b.gif) [Code](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/51?u=clemalex)  
 ![image](https://forum.hacf.fr/uploads/default/original/2X/0/027b74b3eed487fa4674cca09074762b77ae5932.png) [Code](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/77?u=clemalex)

---

<div class="post-metadata">

**Author:** ![DcJona](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dcjona/32/1274_2.png) [@DcJona](https://forum.hacf.fr/u/DcJona)\
**Post date:** [Octobre 21, 2020, 12:25 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/2 "2020-10-21T12:25:21Z")

</div>

> [@Clemalex](#):
>
> z pas à poser

pour smartphone donc ?

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Octobre 21, 2020, 12:38 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/3 "2020-10-21T12:38:38Z")

</div>

Pas forcément, s’adapte sur tablette et pc mais effectivement, orienté smartphone.

Mais maintenant que nous pouvons faire plusieurs dashboard, je vais en faire un pour le nest hub.

Sur pc cela ne m’intéresse pas.

---

<div class="post-metadata">

**Author:** ![DcJona](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dcjona/32/1274_2.png) [@DcJona](https://forum.hacf.fr/u/DcJona)\
**Post date:** [Octobre 21, 2020, 4:03 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/4 "2020-10-21T16:03:33Z")

</div>

> [@Clemalex](#):
>
> sse pas

idem un pour nesthub et Archos Hello 7

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Octobre 21, 2020, 6:40 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/5 "2020-10-21T18:40:39Z")

</div>

> [@DcJona](#):
>
> idem un pour nesthub et Archos Hello 7

👀 pas assez joli pour les partager ? 😉 🤐

---

<div class="post-metadata">

**Author:** ![DcJona](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dcjona/32/1274_2.png) [@DcJona](https://forum.hacf.fr/u/DcJona)\
**Post date:** [Octobre 22, 2020, 5:18 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/6 "2020-10-22T17:18:38Z")

</div>

Nope je n’ai pas.encore ce que je veux

---

<div class="post-metadata">

**Author:** ![Bilbon](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bilbon/32/10_2.png) [@Bilbon](https://forum.hacf.fr/u/Bilbon)\
**Post date:** [Novembre 3, 2020, 5:26 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/7 "2020-11-03T17:26:09Z")

</div>

Tu peux expliquer comment tu recupere les differents type d’essence et mettre en vert le moins cher ??

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Novembre 3, 2020, 9:07 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/8 "2020-11-03T21:07:04Z")

</div>

> [@Bilbon](#):
>
> Tu peux expliquer comment tu recupere les differents type d’essence et mettre en vert le moins cher ??

C’est expliqué [ici](https://forum.hacf.fr/t/comparer-les-prix-des-carburants-de-vos-stations-preferees/434/17) (le même lien que je t’ai donné sur discord 😉) avec une précision [ici](https://forum.hacf.fr/t/comparer-les-prix-des-carburants-de-vos-stations-preferees/434/17).

Même si j’utilise encore la méthode de `scrape`, la [méthode](https://forum.hacf.fr/t/recuperer-les-prix-de-carburants/644) de @max5962 est à préférer (pour les stations de France seulement) (il faut cliquer sur les [images](https://forum.hacf.fr/t/recuperer-les-prix-de-carburants/644/8) pour lancer les gifs)

Concernant la coloration :

> [@Clemalex](#):
>
> [post:17, topic:434](https://forum.hacf.fr/t/comparer-les-prix-des-carburants-de-vos-stations-preferees/434/17)
> 
> Concernant la coloration, je viens d’y repondre [ici](https://forum.hacf.fr/t/et-moi-cest-clemalex/432/13) mais des infos utiles se trouvent [ici](https://forum.hacf.fr/t/comment-colore-ses-icones-pour-les-debutants-tuto-debutant-n-1/308/2), et [ici](https://forum.hacf.fr/t/modifier-la-couleur-dicone-sur-un-button-card/447/2) et [là](https://forum.hacf.fr/t/modifier-licone-dun-switch-en-fonction-dun-binary-sensor/446/17).

N’hésites pas si, après avoir tout lu, tu as besoin d’explications ou de précisions.

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Décembre 27, 2020, 4:00 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/9 "2020-12-27T16:00:43Z")

</div>

Ajout du niveau d’encre de mon imprimante.

 ![20201227_165250](https://forum.hacf.fr/uploads/default/original/2X/4/4822116dfd452705ff846959ae76bfad67742ada.jpeg)

[Source](https://community.home-assistant.io/t/custom-component-for-printer-ink-levels/36431/37?u=clemalex)

---

<div class="post-metadata">

**Author:** ![DcJona](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dcjona/32/1274_2.png) [@DcJona](https://forum.hacf.fr/u/DcJona)\
**Post date:** [Décembre 28, 2020, 2:41 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/10 "2020-12-28T14:41:20Z")

</div>

sympa ca pour ceux qui possède une imprimante compatible c´est assez utile

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Décembre 28, 2020, 2:56 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/11 "2020-12-28T14:56:00Z")

</div>

Oui, la mienne est apparue dans la partie intégration, rien eu a faire… 😇

---

<div class="post-metadata">

**Author:** ![mat4444](https://forum.hacf.fr/user_avatar/forum.hacf.fr/mat4444/32/1859_2.png) [@mat4444](https://forum.hacf.fr/u/mat4444)\
**Post date:** [Janvier 7, 2021, 10:20 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/12 "2021-01-07T10:20:57Z")

</div>

Quelle carte utilises-tu pour afficher/cacher les batteries à la manière d’un menu déroulant ?  
Je n’avais pas vu ça encore, c’est pratique

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Janvier 7, 2021, 10:23 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/13 "2021-01-07T10:23:41Z")

</div>

Salut @mat4444,

J’utilise fold-entity-row :

> **[GitHub - thomasloven/lovelace-fold-entity-row: 🔹 A foldable row for entities...](https://github.com/thomasloven/lovelace-fold-entity-row)**
>
> 🔹 A foldable row for entities card, containing other rows - GitHub - thomasloven/lovelace-fold-entity-row: 🔹 A foldable row for entities card, containing other rows

> **[🔹 fold-entity-row - Hide away stuff in entities cards](https://community.home-assistant.io/t/fold-entity-row-hide-away-stuff-in-entities-cards/140454)**
>
> Avoid clutter in your entities cards by hiding rows inside other rows.

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Janvier 21, 2021, 6:55 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/14 "2021-01-21T06:55:29Z")

</div>

Ajout de la maintenance du roborock (temps + bouton de reinitialsation)

---

<div class="post-metadata">

**Author:** ![Pierre\_Ma](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pierre_ma/32/670_2.png) [@Pierre\_Ma](https://forum.hacf.fr/u/Pierre_Ma)\
**Post date:** [Février 18, 2021, 3:45 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/15 "2021-02-18T15:45:29Z")

</div>

Vraiment très chouette, épuré ! j’aime beaucoup !  
Tes captures des «&nbsp;volets&nbsp;» et «&nbsp;capteurs&nbsp;» m’intéresse. J’aime l’idée d’avoir plusieurs info sur la même tuile ! ça évite un nombre important de tuile 😃

J’ai reussi à le faire pour les caractéristiques de Pi, mais je n’arrive pas à reproduire pour mes capteurs par exemple, j’aimerai réaliser ce que tu as fait pour ces derniers 😬  
J’ai des soucis au niveau des unitées par exemple …

 ![Capture d’écran 2021-02-18 à 16.40.36](https://forum.hacf.fr/uploads/default/original/2X/9/9507073e2bac9db94aa5c83ca04b66f28fab463c.png)

---

<div class="post-metadata">

**Author:** ![Pierre\_Ma](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pierre_ma/32/670_2.png) [@Pierre\_Ma](https://forum.hacf.fr/u/Pierre_Ma)\
**Post date:** [Février 18, 2021, 3:53 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/16 "2021-02-18T15:53:51Z")

</div>

A quoi sert le «&nbsp;cadena&nbsp;» dans la tuile garage ? Une sorte de code à taper pour rentrer sur la page ?

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Février 19, 2021, 10:04 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/17 "2021-02-19T22:04:35Z")

</div>

> [@Pierre\_Ma](#):
>
> A quoi sert le « cadena » dans la tuile garage ?

C’est une des options des la carte [button-card](https://github.com/custom-cards/button-card#lock-object) qui empêche dans mon cas l’ouverture accidentel du garage (il faut appuyer une première fois sur le bouton pour enlever le cadena et une seconde fois pour activer l’action).

---

<div class="post-metadata">

**Author:** ![Pierre\_Ma](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pierre_ma/32/670_2.png) [@Pierre\_Ma](https://forum.hacf.fr/u/Pierre_Ma)\
**Post date:** [Février 19, 2021, 10:50 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/18 "2021-02-19T22:50:06Z")

</div>

Je teste mais j’ai un soucis au niveau de l’indentation… tu l’intègre ou exactement le bout de code ? à la fin ? au debut ?

---

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Février 19, 2021, 11:02 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/19 "2021-02-19T23:02:32Z")

</div>

> [@Pierre\_Ma](#):
>
> je n’arrive pas à reproduire pour mes capteurs

Ouvre un fil de discussion en expliquant ce que tu veux 👍

Ca permettra un meilleur référencement plutôt qu’ici… mais voici le code de mes boutons :

![image](https://forum.hacf.fr/uploads/default/original/2X/e/e9eadb9fe653cbcbd6bcd7df2c2afd42a313f323.png) ![image](https://forum.hacf.fr/uploads/default/original/2X/f/f48b22df42b2df9a29f6d0da3da5cccf104a394d.png)

> **Code de la carte (changement de couleur)**
>
> ```auto
> color: auto
> color_type: icon
> entity: cover.volet_rue_2
> icon: 'mdi:chevron-down'
> name: Descendre
> show_icon: true
> show_label: false
> show_last_changed: false
> show_name: true
> show_state: false
> styles:
> card:
> - border-radius: 10px
> - height: 75px
> - width: 75px
> - margin: 5px 5px 0px 11px
> - padding: 0px 0px
> - background-color: |
> [[[
> if (entity.attributes.current_position == '0') return 'var(--primary-background-inactive-color)';
> else return 'var(--primary-background-active-color)';
> ]]]
> grid:
> - position: relative
> icon:
> - position: absolute
> - left: 2px
> - top: '-15px'
> - color: |
> [[[
> if (entity.attributes.current_position == '0') return 'var(--grey-color)';
> else return 'var(--primary-color)';
> ]]]
> name:
> - position: absolute
> - left: 5px
> - bottom: 5px
> - font-variant: small-caps
> - font-size: 14px
> - color: |
> [[[
> if (entity.attributes.current_position == '0') return 'var(--grey-color)';
> else return 'var(--primary-color)';
> ]]]
> tap_action:
> action: call-service
> service: cover.close_cover
> service_data:
> entity_id: cover.volet_rue_2
> type: 'custom:button-card'
> 
> ```

* * *

* * *

![animate](https://forum.hacf.fr/uploads/default/original/2X/6/60bb109417dd235910f3dfe9775ddcfcd82dfc17.gif)

> **Code de la carte (animation/couleur/changement d'icone)**
>
> ```auto
> color_type: card
> custom_fields:
> battery: |
> [[[
> return `
> <span>
> <span style="color: var(--text-color-sensor);">
> ${entity.attributes.battery_level}%
> </span>
> </span>
> `
> ]]]
> entity: binary_sensor.ouverture_fenetre_rue
> hold_action:
> action: more-info
> name: Rue
> show_icon: true
> show_last_changed: true
> show_name: true
> state:
> - color: var(--red-color)
> icon: 'mdi:door-open'
> styles:
> card:
> - border: var(--red-color)
> - animation: blink 0.7s ease infinite
> icon:
> - color: var(--white-color)
> label:
> - color: var(--white-color)
> name:
> - color: var(--white-color)
> value: 'on'
> - icon: 'mdi:door-closed'
> styles:
> card:
> - background-color: var(--primary-background-inactive-color)
> - border: var(--primary-background-inactive-color)
> icon:
> - color: var(--grey-color)
> label:
> - color: var(--grey-color)
> name:
> - color: var(--grey-color)
> value: 'off'
> styles:
> card:
> - border-radius: 10px
> - height: 75px
> - width: 75px
> - margin: 5px 5px 0px 0px
> - padding: 0px 0px
> custom_fields:
> battery:
> - background-color: 'rgba(0, 0, 0, 0)'
> - position: absolute
> - right: 5%
> - top: 5%
> - font-size: 15px
> - line-height: 20px
> - '--text-color-sensor': |
> [[[
> if ( entity.state == 'on') return 'var(--white-color)';
> else if ( entity.attributes.battery_level < '10' ) return 'var(--red-color)';
> else if ( entity.attributes.battery_level < '20' ) return 'var(--orange-color)';
> else return 'var(--grey-color)';
> ]]]
> grid:
> - position: relative
> icon:
> - position: absolute
> - left: 2px
> - top: '-18px'
> label:
> - position: absolute
> - left: 5px
> - bottom: 5px
> - font-size: 12px
> - font-weight: bold
> - color: var(--primary-color)
> name:
> - position: absolute
> - left: 5px
> - bottom: 23px
> - font-variant: small-caps
> - color: var(--primary-color)
> tap_action:
> action: more-info
> type: 'custom:button-card'
> 
> ```

---

<div class="post-metadata">

**Author:** ![Pierre\_Ma](https://forum.hacf.fr/user_avatar/forum.hacf.fr/pierre_ma/32/670_2.png) [@Pierre\_Ma](https://forum.hacf.fr/u/Pierre_Ma)\
**Post date:** [Février 20, 2021, 6:02 UTC](https://forum.hacf.fr/t/mon-dashboard-clemalex/737/20 "2021-02-20T18:02:25Z")

</div>

C’est marrant la façon dont tu écris ton code, de mettre le «&nbsp;type&nbsp;» de carte à la fin

> [@Clemalex](#):
>
> ```auto
> type: 'custom:button-card'
> 
> ```

J’ouvre le fil quand j’ai un peu de temps, surement demain soir 🕶

[Page suivante](https://forum.hacf.fr/t/mon-dashboard-clemalex/737.md?page=2)