Banner card avec Json

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] ___

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

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

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

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

Markdown c’est encore autre chose.

On peut faire de jolie chose. :innocent:

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

1 « J'aime »

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;
                            }

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 !

2 « J'aime »

Bonjour,

Avec le partage du code complet se sera plus sympa :grin:.

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 :

image

2 « J'aime »

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)

bus-bon rendu

bus-css qui saute

@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é

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 :wink: et je n’ai pas insister car ça ne dure pas longtemps.

A+

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.

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

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

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

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

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