Banner card avec Json

Alasta · Septembre 12, 2021, 7:46

Mon problème

Bonjour,

Je viens de découvrir récemment « banner card », pour toutes les entités « classiques » ça fonctionne bien.
Je récupère mes horaires de bus sur « api-ratp.pierre-grimaud.fr » qui met à disposition l’accès aux infos temps réels des transports Parisiens :
Exemple au hasard :
https://api-ratp.pierre-grimaud.fr/v4/schedules/buses/175/mairie+asnieres/R

Config YAML :

sensor:
  - platform: rest
    name: makers_bus
    json_attributes:
      - result
      - _metadata
    value_template: "{{ value_json.result.schedules[0].message }}"
    resource: https://api-ratp.pierre-grimaud.fr/v4/schedules/buses/175/mairie+asnieres/R

Carte :

type: custom:banner-card
row_size: 2
heading:
  - mdi:bus
  - Bus
entities:
  - entity: sensor.makers_bus
    name: Prochain passage
  - entity: sensor.makers_bus
    name: Suivant

J’arrive à afficher le prochain horaire mais pas le suivant c’est du JSON et je ne trouve pas la bonne syntaxe ou si c’est possible…
Si quelqu’un à une idée je suis preneur.

Ma configuration

[center]## System Health

version	core-2021.9.5
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.9.6
os_name	Linux
os_version	5.10.17-v8
arch	aarch64
timezone	Europe/Paris

Home Assistant Community Store

GitHub API	ok
Github API Calls Remaining	5000
Installed Version	1.15.2
Stage	running
Available Repositories	882
Installed Repositories	16

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 6.3
update_channel	stable
supervisor_version	supervisor-2021.09.0
docker_version	20.10.7
disk_total	219.4 GB
disk_used	15.3 GB
healthy	true
supported	true
board	rpi4-64
supervisor_api	ok
version_api	ok
installed_addons	deCONZ (6.10.0), File editor (5.3.3), AdGuard Home (4.1.9), Grafana (7.2.0), InfluxDB (4.2.1), Log Viewer (0.11.1), motionEye (0.15.1), Node-RED (10.0.0), Visual Studio Code (3.6.2), Terminal & SSH (9.1.3), Z-Wave JS (0.1.39), Check Home Assistant configuration (3.8.0), Samba share (9.5.1)

Lovelace

dashboards	5
resources	14
views	18
mode	storage

[/center] ___

Clemalex · Septembre 12, 2021, 8:29

Comment espérer avoir un résultat différent si tu utilises la même entité ?

Ce code ne récupère t'il pas que le prochain passage ?
Fais voir son état dans les Outils de développement

Si tu ajoutes une nouvelle entité, et que tu récupères le second élément, cela convient-il ?

sensor:
  - platform: rest
    name: makers_bus_next #ajout de _next pour ne pas créer de doublon
    json_attributes:
      - result
      - _metadata
    value_template: "{{ value_json.result.schedules[1].message }}" # [1] au lieu de [0]
    resource: https://api-ratp.pierre-grimaud.fr/v4/schedules/buses/175/mairie+asnieres/R

On peut aussi, si banner-card sait le faire, tout mettre en attribut d'une seule et unique entité :

sensor:
  - platform: rest
    value_template: "{{ value_json._metadata.date }}"
    name: makers_bus # Cette entité récupère les informations
    json_attributes_path: "$.result"
    json_attributes:
      - schedules
  - platform: template
    sensors:
      makers_bus_all: #Cette entité contient les informations extraites de l'entité précédente
        friendly_name: "Arrêt Mairie"
        value_template: "{{states('sensor.makers_bus')}}" #date de la dernière récupération des données
        attribute_templates:
          shortly: "{{state_attr('sensor.makers_bus','schedules')[0].message}}" #Passage imminent
          next: "{{state_attr('sensor.makers_bus','schedules')[1].message}}" #Passage suivant

Alasta · Septembre 13, 2021, 11:07

Hello Clemalex,

oui je sais que j’ai mis la même entité, c’était pour l’exemple (même si c’est mauvais) car sur mes tests je joué qu’avec le premier pour essayer de trouver la syntaxe …

C’est dommage que banner car ne gère pas le json, je vais essayer ton second exemple avec le template.
Avec du markdown j’avais réussi mais ça rend moins bien :

<table>
  <thead>
      <tr>
          <th align="left">Destination</th>
          <th><font color="blue"><ha-icon icon="mdi:bus"></ha-icon></th>
          <th><font color="blue"><ha-icon icon="mdi:bus"></ha-icon></th>
      </tr>
  </thead>
  <tbody>
      <tr>
      <td width="50%" align="left">{{states.sensor.makers_bus.attributes.result.schedules[0].destination}}</td>
      <td width="25%" align="center">{{states.sensor.makers_bus.attributes.result.schedules[0].message}}</td>
      <td width="25%" align="center">{{states.sensor.makers_bus.attributes.result.schedules[1].message}}</td>
      </tr>
  </tbody>
</table>

Je teste cela ce soir !
Merci

Clemalex · Septembre 13, 2021, 11:11

Markdown c'est encore autre chose.

On peut faire de jolie chose.

Exemple d'hier soir sur discord lorsqu'on échangeait avec @kaoru :

Carte markdow + code HTML + card-mod :

type: markdown
content: |-
  <table>
      <tbody>
          <tr>
              <td>34</td>
              <td>PDB</td>
              <td>10:10</td>
              <td>10:25</td>
              <td>11:00</td>
          </tr>
          <tr>
              <td>13</td>
              <td>LFIV</td>
              <td>10:00</td>
              <td>10:10</td>
              <td>10:15</td>
          </tr>
          <tr>
              <td>13</td>
              <td>HDV</td>
              <td>10:00</td>
              <td>10:10</td>
              <td>10:15</td>
          </tr>
      </tbody>
  </table>
card_mod:
  style:
    ha-markdown:
      $:
        ha-markdown-element: |
          table{
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            font-family: sans-serif;
            min-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
          }
          td {
              padding: 12px 15px;
          }
          tr {
              border-bottom: 1px solid #dddddd;
          }

          tr:nth-of-type(even) {
              background-color: #f3f3f3;
          }

          tr:last-of-type {
              border-bottom: 2px solid #009879;
          }

Source du css : Table CSS: Creating beautiful HTML tables with CSS - DEV Community

kaoru · Septembre 13, 2021, 12:54

Je confirme ça marche bien comme ça

              action: fire-dom-event
              browser_mod:
                command: popup
                title: "Horaire de bus"
                style:
                  .: |
                    :host .content {
                      width: auto;
                      height: auto;
                      padding: 0em 1em 1em 1em;
                    }
                card:
                  type: markdown
                  content: |-
                    <table>
                        <tbody>
                            <tr>
                                <td>LIGNE</td>
                                <td>DESTINATION</td>
                                <td>1er passage</td>
                                <td>2eme passage</td>
                                <td>3eme passage</td>
                            </tr>
                            <tr>
                                <td><mark>34</mark></td>
                                <td>PONT DE BOIS</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_1', 'horaire_next_bus')[0]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_1', 'horaire_next_bus')[1]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_1', 'horaire_next_bus')[2]}}</td>
                            </tr>
                            <tr>
                                <td><mark>13</mark></td>
                                <td>LILLE FIVES</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_2', 'horaire_next_bus')[0]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_2', 'horaire_next_bus')[1]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_2', 'horaire_next_bus')[2]}}</td>
                            </tr>
                            <tr>
                                <td><mark>34</mark></td>
                                <td>EUROTELEPORT</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_3', 'horaire_next_bus')[0]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_3', 'horaire_next_bus')[1]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_3', 'horaire_next_bus')[2]}}</td>
                            </tr>
                            <tr>
                                <td><mark>13</mark></td>
                                <td>HOTEL DE VILLE</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_4', 'horaire_next_bus')[0]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_4', 'horaire_next_bus')[1]}}</td>
                                <td>{{state_attr('sensor.template_ilevia_ligne_4', 'horaire_next_bus')[2]}}</td>
                            </tr>
                        </tbody>
                    </table>
                  card_mod:
                    style:
                      ha-markdown:
                        $:
                          ha-markdown-element: |
                            table{
                              border-collapse: collapse;
                              font-size: 0.9em;
                              font-family: SF Display;
                              width: auto;
                              outline: 1px solid #393c3d;
                            }
                            td {
                                padding: 12px 15px;
                                text-align: center;
                            }
                            tr {
                                border-bottom: 1px solid #1c2020;
                            }

                            tr:nth-of-type(even) {
                                background-color: rgb(54, 54, 54, 0.3);
                            }
                            tr:last-of-type {
                                border-bottom: transparent;
                            }
                            tr:nth-child(1) {
                              font-weight: bold;
                            }
                            tr:nth-child(2) > td:nth-child(1) > mark, tr:nth-child(4) > td:nth-child(1) > mark {
                                background: #009767;
                                color: #222627;
                                border-radius: 10px;
                                padding: 10px;
                            }
                            tr:nth-child(3) > td:nth-child(1) > mark, tr:nth-child(5) > td:nth-child(1) > mark {
                                background: #ffcc00;
                                color: #222627;
                                border-radius: 10px;
                                padding: 10px;
                            }
                            tr:nth-child(n+2) > td:nth-child(2) {
                              text-align: left;
                            }

Alasta · Septembre 13, 2021, 7:42

Wahoo j’ai des étoiles dans les yeux quand je vois les cards !
ça rend super bien.

Merci Clemalex, ça fonctionne nickel avec ta version via template !

Alasta · Septembre 14, 2021, 4:07

Bonjour,

Avec le partage du code complet se sera plus sympa .

Utilisation de la doc API pour avoir l'URL, syntaxe du nom de l'arrêt.
Pré-requis, avoir installer "banner-card".

Dans la section sensor du configuration.yaml :

- platform: rest
  value_template: "{{ value_json._metadata.date }}"
  resource: https://api-ratp.pierre-grimaud.fr/v4/schedules/buses/175/clavel/A
  name: makers_bus # Cette entité récupère les informations
  json_attributes_path: "$.result"
  json_attributes:
    - schedules
- platform: template
  sensors:
    makers_bus_all: #Cette entité contient les informations extraites de l'entité précédente
      friendly_name: "Clavel"
      value_template: "{{states('sensor.makers_bus')}}" #date de la dernière récupération des données
      attribute_templates:
        shortly: "{{state_attr('sensor.makers_bus','schedules')[0].message}}" #Passage imminent
        next: "{{state_attr('sensor.makers_bus','schedules')[1].message}}" #Passage suivant
        destination: "{{state_attr('sensor.makers_bus','schedules')[0].destination}}" #Destination

Pour la partie lovelace :

type: custom:banner-card
background: '#2874A6'
row_size: 2
heading:
  - mdi:bus
  - Bus 175
entities:
  - entity: sensor.makers_bus_all
    name: Arrêt
    attribute: friendly_name
    size: 2
  - entity: sensor.makers_bus_all
    name: Destination
    attribute: destination
    size: 2
  - entity: sensor.makers_bus_all
    name: Passage imminent
    attribute: shortly
  - entity: sensor.makers_bus_all
    name: Passage suivant
    attribute: next
  - entity: sensor.makers_bus
    name: Dernière MAJ
    attribute: next
    size: 2
style: |
  ha-card {
    --ha-card-border-radius: 10px;
  }

Rendu :

Veher · Novembre 12, 2021, 10:11

Alasta:

- platform: rest
  value_template: "{{ value_json._metadata.date }}"
  resource: https://api-ratp.pierre-grimaud.fr/v4/schedules/buses/175/clavel/A
  name: makers_bus # Cette entité récupère les informations
  json_attributes_path: "$.result"
  json_attributes:
    - schedules

Hello

J'ai fait un mix entre les différentes solutions (RER & Bus) en me basant sur le markdown.
Cependant, j'ai un comportement vraiment bizarre : la mise en forme saute régulièrement puis se remets (cela semble du à la réactualisation des données... A confirmer)

@kaoru Est ce que tu aurais une idée?
Si besoin je peux partager le code mais il n'est pas vraiment différent de ceux déjà partagés

Merci de votre aide
Hervé

Alasta · Novembre 13, 2021, 1:59

Bonjour,
J’ai aussi le « bug » parfois quand il recharge la mise en forme se perd 1 ou 2s puis revient.
Je n’ai pas de réponse à ce soucis et je n’ai pas insister car ça ne dure pas longtemps.

A+

Veher · Novembre 14, 2021, 11:12

Merci, disons que de mon côté cela ne s’arrête pas et cela alterne régulièrement… Je vais regarder dans les prochains jours.
Je partagerais sur le forum, si j’ai la solution.

aurelienb · Mai 6, 2022, 3:40

T’as pas trouver de solution
J’ai le meme soucis

aurelienb · Mai 8, 2022, 3:33

pour info j’ai resolue ce probleme de chargement des css en enlevant markdown et en mettant directement la carte dns un template sans markdown
Car meme dans un template en markdown ca fesais pareil donc je suis passé par des layout area pour simuler un tableau
Depuis plus de soucis

Alasta · Mai 8, 2022, 4:21

Coucou,
tu peux refaire un topic avec ta solution ou l’ajouter à celui que j’avais fait, histoire de partager ta solution.

aurelienb · Mai 8, 2022, 4:35

Ca va etre compliqué car j’utilise les template du theme minimalist
Je vois pas comment les mettre pour tout le monde

Alasta · Décembre 10, 2022, 8:05

Pour information les horaires par les API OpenData ne sont plus disponible.
Utiliser l’intégration « Ile de france Mobilite » à la place.