[Mon Dashboard] - @Quintus

Et voici le mien :

#!/usr/local/bin/python
# coding: utf8
import json

with open('/config/.shopping_list.json') as data_file:
    shoppingListData = json.load(data_file)

content = u"<b>Liste de Courses :</b><br>"
for entry in shoppingListData:
    if not entry['complete']:
        content += u"- %s<br>" % entry['name']

content += u"<br>"

print(content)

(désolé, je me maitrise pas complètement les outils de post. Je ne sais pas comment mettre le code dans un « fold » comme toi)

En effet, ce ne sont pas tout à fait les mêmes.

Et je me suis permis une petite retouche perso, en remplaçant les « \n » par des « br », car dans une notif de phone, le retour à la ligne ne marchait pas.

Tu essayeras et tu me diras si ça le fait mieux comme ça pour toi?

Bon c’est les même… Lol…

Amuse-toi à ajouter un texte de plus de 255 caractère et tu verras normalement tu auras le même problème que moi… Après j’ai jamais cherché de solution c’est toi pas être un truc trop dur à mettre en place

Curieux. Je n’ai pas d’erreur en soit. Ma liste de courses peut être longue, pas de problème.

À moins que tu parles de mettre 255 caractères sur une même ligne ? Dans ce cas, je veux bien croire que ça foire. En même temps, étant donné que c’est pensé pour une liste de courses, j’avoue qu’ils n’ont pas prévu un article si long ^^

De mon côté, le souci c’est que je ne peux pas voir ma liste au complet. Dommage

A cause de la montre ? car déjà pas sûr que le titre soit utile…

Non je remarque que c’est au niveau du sensor. Il doit avoir lui-même une limite de caractères (pas forcément 255, j’ai l’impression que c’est même moins).

Moi aussi, je vais inclure cette enquête dans ma To Do List :grin:

Bonjour.

J avais mal compris, j’ai cru qu’il faisait du pur ui sans yaml piur les custom card… Je voulais connaître le secret :slight_smile:

@Quintus ça m’intéresse. Merci pour le thermostat et la shopping list.
Je vais mettre sur todolist lol

Bonjour ça rend vraiment bien. Je suis intéressé par le code de ta carte essence. je trouve ta présentation très propre

1 « J'aime »

Merci cob94440, ça fait plaisir :blush:

Voici mon code :

Résumé
type: entities
entities:
  - entities:
      - entity: sensor.carburant_superu_bruz_essence
        name: Sans Plomb 95 (E-10)
        icon: 'hass:gas-station'
        icon_color: red
        positions:
          value: 'off'
          icon: inside
          indicator: 'off'
        color: none
    height: 36px
    entity_row: true
    positions:
      icon: inside
      indicator: inside
    style:
      .: |
        ha-card {
          height: 40px;
          }

        :host 
        {
          --ha-card-border-radius: 10px;    
        }
        ha-icon {
          border-radius: 20px;    
          border: 3px solid rgb(24,190, 250);
          background: white;
          color: green;
          size: 60px;
        }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 22px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_superu_bruz_essence
        name: Super U - Bruz
    height: 36px
    entity_row: true
    positions:
      icon: 'off'
      indicator: inside
    style:
      .: |
        ha-card {
          height: 36px;
          }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
        bar-card-value {
          margin-right: 6px;
          margin-left: 0px;
          margin-bottom: auto;
          margin-top: auto;
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
        }

        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 12px;    
          border: 1px solid #DDD9;
          background: {% if is_state('sensor.essence_meilleur_prix', 'Super U - Bruz') %} rgb(24,196, 50) {% endif %};
        }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_superu_noyal_essence
        name: Super U - Noyal
    height: 36px
    entity_row: true
    positions:
      icon: 'off'
      indicator: inside
    style:
      .: |
        ha-card {
          height: 36px;
          }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
        bar-card-value {
          margin-right: 6px;
          margin-left: 0px;
          margin-bottom: auto;
          margin-top: auto;
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
        }

        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 12px;    
          border: 1px solid #DDD9;
          background: {% if is_state('sensor.essence_meilleur_prix', 'Super U - Noyal') %} rgb(24,196, 50) {% endif %};
        }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_carrefour_essence
        name: Carrefour
    height: 36px
    entity_row: true
    positions:
      icon: 'off'
      indicator: inside
    style:
      .: |
        ha-card {
          height: 36px;
          }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
        bar-card-value {
          margin-right: 6px;
          margin-left: 0px;
          margin-bottom: auto;
          margin-top: auto;
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
        }

        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 12px;    
          border: 1px solid #DDD9;
          background: {% if is_state('sensor.essence_meilleur_prix', 'Carrefour') %} rgb(24,196, 50) {% endif %};
        }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_superu_bruz_essence
        name: Diesel
        icon: 'hass:gas-station'
        positions:
          value: 'off'
          icon: inside
          indicator: 'off'
        color: none
    height: 36px
    entity_row: true
    positions:
      icon: inside
      indicator: inside
    style:
      .: |
        ha-card {
          margin-top: 20px;
          height: 36px;
          }

        :host 
        {
          --ha-card-border-radius: 10px;    
        }

        ha-icon {
          border-radius: 20px;    
          border: 3px solid rgb(24,190, 250);
          background: white;
          color: black;
          size: 60px;
        }

        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 22px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_superu_bruz_diesel
        name: Super U - Bruz
    height: 36px
    entity_row: true
    positions:
      icon: 'off'
      indicator: inside
    style:
      .: |
        ha-card {
          height: 36px;
          }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
        bar-card-value {
          margin-right: 6px;
          margin-left: 0px;
          margin-bottom: auto;
          margin-top: auto;
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
        }

        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 12px;    
          border: 1px solid #DDD9;
          background: {% if is_state('sensor.diesel_meilleur_prix', 'Super U - Bruz') %} rgb(24,196, 50) {% endif %};
        }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_superu_noyal_diesel
        name: Super U - Noyal
    height: 36px
    entity_row: true
    positions:
      icon: 'off'
      indicator: inside
    style:
      .: |
        ha-card {
          height: 36px;
          }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
        bar-card-value {
          margin-right: 6px;
          margin-left: 0px;
          margin-bottom: auto;
          margin-top: auto;
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
        }

        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 12px;    
          border: 1px solid #DDD9;
          background: {% if is_state('sensor.diesel_meilleur_prix', 'Super U - Noyal') %} rgb(24,196, 50) {% endif %};
        }
    type: 'custom:bar-card'
  - entities:
      - entity: sensor.carburant_carrefour_diesel
        name: Carrefour
    height: 36px
    entity_row: true
    positions:
      icon: 'off'
      indicator: inside
    style:
      .: |
        ha-card {
          height: 36px;
          }
        bar-card-name {
          margin-right: auto;
          margin-left: 0px; 
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
          }
        bar-card-value {
          margin-right: 6px;
          margin-left: 0px;
          margin-bottom: auto;
          margin-top: auto;
          font-size: 18px;
          font-weight: bold;
          text-shadow: 2px 2px #0005;
        }

        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 12px;    
          border: 1px solid #DDD9;
          background: {% if is_state('sensor.diesel_meilleur_prix', 'Carrefour') %} rgb(24,196, 50) {% endif %};
        }
    type: 'custom:bar-card'
title: Prix des Carburants
icon: 'hass:currency-eur'
style:
  .: |
    ha-card {
      height: 90px;
      text-justify: right;
      }

    :host 
    {
      --ha-card-border-radius: 20px;    
    }
    ha-icon {
      color: var(--primary-color);
      icon-size: 60px;
      top: -10px;

    }

Le plus compliqué sur cette carte pour moi, a été de trouver la bonne syntaxe pour faire changer la couleur du background des « bar » en fonction du sensor « meilleur_prix ».

Sinon, rien de bien sorcier.

Super merci beaucoup ça marche impec.
J’ai pas compris par contre car jamais rencontré le cas comment fait pour que la carte apparaisse via un clic sur une icone

C’est très simple tu vas voir. Je joue sur un input_boolean.

Le code que je viens de te donner est englobé par une carte « conditional ». La condition étant que « l’input_boolean.essence » soit sur « on » pour afficher la carte des prix.

Il m’a suffit de faire un autre bouton (ça peut même être les boutons officiels) qui « toggle » le fameux input_boolean.essence :wink:

Bonjour @Quintus,
Whaaa quel travail. J’adhère.
Étant vraiment débutant…. J’aimerais faire la même cards que toi pour l’heure, fête du jour, et surtout les prochains bus… peux-tu nous envoyer le code… ainsi que les cards utilisés s’il te plaît.
Encore un grand merci pour le temps que tu as prit pour ton installation et ton poste. :ok_hand:

Salut Libertycrash91,

Pas de souci, voici les codes :

D’abord celui de l’heure, la date (et la séparation) :

  - type: custom:hui-markdown-card
    class: sidebar
    style: |
      ha-card {
        background: none;
        box-shadow: none
        }
      :host {
        top: 5%;
        left: 10.4%;
        width: 21.5%;
        font-weight: bold;
        font-size: 480%;
        }
    content: |
      <center>    
      {{ states.sensor.time.state }}

      </center>
  - type: custom:hui-markdown-card
    class: sidebar
    style: |
      ha-card {
        background: none;
        box-shadow: none
        }
      :host {
        top: 12%;
        left: 10.5%;
        width: 22.5%;
        font-weight: bold;
        font-size: 140%;

        }
    content: |
      <center>    
      {{ states.sensor.date_fr.state }}


      ---
      </center>

Maintenant les codes pour les fêtes et horaires :

  - type: custom:hui-markdown-card
    class: sidebar
    style: |
      ha-card {
        background: none;
        box-shadow: none;
        margin-top: 0px;
        margin-bottom: 0px;
        }
      :host {
        top: 42%;
        left: 10.5%;
        width: 22.5%;
        font-size: 120%;
        font-weight: bold;
        text-align:justify;
        }
    content: |
      <font color='#6a7377'> 

        <center>

       {% if is_state('input_text.fete_femme', 'unknown') %} {% if is_state('input_text.fete_homme', 'unknown') %}  {% else %} 
        Aujourd'hui nous fêtons les <font color= CornflowerBlue>{{ states.input_text.fete_homme.state }}</font>. {% endif%} {% else %} 
        Aujourd'hui nous fêtons les <font color= MediumOrchid>{{ states.input_text.fete_femme.state }}</font>{% if is_state('input_text.fete_homme', 'unknown') %}. {% else %} ainsi que les <font color= CornflowerBlue>{{ states.input_text.fete_homme.state }}</font>. {% endif%} {% endif%}
       
       
       {% if is_state('sensor.heure_ligne_172', 'unknown') %}  {% elif is_state('sensor.heure_ligne_172', 'unavailable') %}  {% elif is_state('sensor.heure_ligne_172_temps_restant', '<1 min') %} {% else %} 
        ![72](/local/Icones/172.png) 
       Prochain Bus : {{ states.sensor.heure_ligne_172.state }} ({{ states.sensor.heure_ligne_172_temps_restant.state }})          
       {% if is_state('sensor.heure_ligne_172_suivant', 'unavailable') %} {% elif is_state('sensor.heure_ligne_172_suivant', 'unknown') %}  {% elif is_state('sensor.heure_ligne_172_suivant_temps_restant', ' ') %} {% else %} Suivant : {{ states.sensor.heure_ligne_172_suivant.state }} ({{ states.sensor.heure_ligne_172_suivant_temps_restant.state }}) {% endif%}
       {% endif%}

       {% if is_state('input_boolean.infos', 'off') %}    {% else %}
       {% if is_state('sensor.heure_ligne_72', 'unknown') %}  {% elif is_state('sensor.heure_ligne_72', 'unavailable') %}  {% elif is_state('sensor.heure_ligne_72_temps_restant', ' ') %} {% else %} 
        ![72](/local/Icones/72.png) 
       Prochain Bus : {{ states.sensor.heure_ligne_72.state }} ({{ states.sensor.heure_ligne_72_temps_restant.state }}) {% endif%}         
       {% if is_state('sensor.heure_ligne_72_suivant', 'unavailable') %} {% elif is_state('sensor.heure_ligne_72_suivant', 'unknown') %}  {% elif is_state('sensor.heure_ligne_72_suivant_temps_restant', ' ') %} {% else %} Suivant : {{ states.sensor.heure_ligne_72_suivant.state }} ({{ states.sensor.heure_ligne_72_suivant_temps_restant.state }}) {% endif%}
       {% endif%}

       ### {% if is_state('sensor.freville_etat', 'Ouvert') %}  
       ![Image](/local/Icones/Parking.png)Fréville
       {{ state_attr('sensor.freville_etat', 'nombreplacesdisponibles') }} places restantes. 
       {% else %}![Image](/local/Icones/Parking.png)Fréville 
       Le Parc-Relais est Fermé. 
       {% endif%}
        
       </center>

J’ai mis des sortes de sécurités au cas où il y ait un problème avec le scrape des fêtes et horaires. Si l’info n’est pas dispo, les phrases n’apparaissent pas. C’est plus propre.

Tout ce beau monde est bien entendu enveloppé dans une picture-elements card.

Les positions sont éventuellement à adapter à ton écran.

Et évidemment, tous les sensors sont à adapter avec les tiens. Pour récupérer les horaires, j’utilise l’intégration « Scrape », sur les sites adéquats.

J’espère que j’ai correctement répondu à tes demandes :slight_smile:

super boulot…Concernant la markdown, tu peux aussi nous donner les differents sensors ? je bloque un peu la dessus.
merci a toi.

Pas de soucis !

Qu’est-ce qui t’intéresse ?

je suis prenneur de tout sensors, style meteo, ferier, jour de fete, calendrier, etc…
je ne connais pas encore bien les technique pour les sensors et template.
je suis un peu perdu dans tout ca !

Je reviens vers toi pour ton aide, si tu veux bien… Merci d’avance

Oui oui pardon Schumi.

Je rentre de vacances mercredi soir.

Je comptais m’occuper de toi jeudi, si cela ne te dérange pas

pas de soucis. et excuse moi, je ne savais pas que tu etais en vacances. alors profite encore des ces derniers jours. :+1:
J’attendrais bien jusque la, je ne suis pas dans l’urgence.
Encore merci a toi !

  • Pour la météo, je suis actuellement sur le sensor de l’intégration officielle « Météo-France », disponible directement en intégration par l’UI. Pour la carte, elle vient de cette communauté! Regarde ici.

  • Je n’utilise pas de sensors pour les jours fériés (pour le moment)

  • Pour le jour de fête je scrape comme beaucoup (ou pas?) sur le site Ephemeride.com. Voici le code :

Code du sensor
   #### FETES ####
  - platform: scrape
    name: Fete du Jour - Homme
    resource: https://www.ephemeride.com/free/fete.jsp
    select: ".FeteHomme"
    scan_interval: 28800
    
  - platform: scrape
    name: Fete du Jour - Femme
    resource: https://www.ephemeride.com/free/fete.jsp
    select: ".FeteFemme"
    scan_interval: 28800

Pour l’afficher dans le markdown, ma méthode est la suivante :

Code du Markdown
{% if is_state('input_text.fete_femme', 'unknown') %} {% if is_state('input_text.fete_homme', 'unknown') %}  {% else %}  Aujourd'hui nous fêtons les <font color= CornflowerBlue>{{ states.input_text.fete_homme.state }}</font>. {% endif%} {% else %}
  Aujourd'hui nous fêtons les <font color= MediumOrchid>{{ states.input_text.fete_femme.state }}</font>{% if is_state('input_text.fete_homme', 'unknown') %}.  {% else %} ainsi que les <font color= CornflowerBlue>{{ states.input_text.fete_homme.state }}</font>.
  {% endif%} {% endif%}

Avec cette petite méthode, si il y a un problème avec le scrape, ou bien seulement pas de données qui remontent un jour, l’info n’est pas affichée.

Il y a sans doute de bien meilleures techniques que la mienne. J’ai vu que tu as regardé le dashboard de @Felix62 et même si je ne l’ai regardé pour le moment qu’en diagonale pendant mes vacances, j’ai cru voir bon nombre de choses intéressantes. Je vais prendre le temps de regarder son œuvre et de lui faire honneur dans le mien :slightly_smiling_face:

  • Je n’utilise pour le moment pas de calendrier dans HA. Mais cela viendra peut-être!

Voilà, je ne pense pas avoir complètement répondu alors n’hésite pas

ok, impec. cela va bien m’aider. Un grand merci…
Puis-je encore profiter de toi et de ton dashboard ?
Pour les carte et code de :

  • Liste des course. (deja installer, mais j’aimerais aussi l’avoir sur ma montre…(apple watch)
  • Ta carte "stack-in-card avec media player et fold-entity-row histoire d’avoir les pochettes et surtout les playlist.
  • Tes lumieres (facon homekit) avec l’intensité de l’eclairage.

J’en demande beaucoup, mais j’apprecie vraiment bc^p de chose de ton dashboard…
Et un grand merci pour ton temps que j’occupe a me repondre.