Tutoriel : Prix du carburant

Dans ce tutoriel, nous allons voir ensemble, étape par étape, comment afficher le prix des carburants sur votre dashboard Home Assistant.

Installation et paramétrage de l’intégration « Prix Carburant »

L’intégration Prix Carburant est disponible sur HACS. La première étape consiste donc à l’y rechercher et à l’installer :

Une fois l’installation terminée, rendez-vous dans votre fichier configuration.yaml pour ajouter les informations suivantes :

sensor:

  - platform: prix_carburant
    # IDs from https://www.prix-carburants.gouv.fr/
    stations: 
    - 78200001 
    - 78410002
    - 78680004

Si votre fichier configuration.yaml contient déjà le mot-clé sensor:, ajoutez simplement la section à partir de - platform: prix_carburant. Pensez à remplacer les stations par les vôtres.

La principale difficulté réside dans l’obtention des identifiants des stations-service.

Pour les trouver, rendez-vous sur Prix Carburants, recherchez les stations de votre secteur :

Sélectionnez la station de votre choix, faites un clic droit sur Afficher les détails, puis cliquez sur Inspecter :

L’ID de la station s’affichera dans la fenêtre qui s’ouvre à droite :

Ajoutez ainsi toutes les stations qui vous intéressent, puis enregistrez le fichier configuration.yaml et redémarrez Home Assistant.

Ajouter une carte pour afficher les prix du carburant sur le dashboard Lovelace

Prérequis : Installez la carte flex-table-card via HACS.

Une fois l’installation terminée, rendez-vous sur la page du dashboard où vous souhaitez ajouter la carte, puis passez en mode édition.

Ajoutez la carte en copiant et collant le code suivant :

type: custom:flex-table-card
sort_by: state+
clickable: true
title: Prix du carburant E10
entities:
  include:
    - sensor.station_*_e10
  exclude: null
max_rows: 20
columns:
  - data: entity_picture
    name: " "
    align: center
    icon: mdi:gas-station
    modify: "'<img src=\"' + x + '\"style=\"height: 35px\">'"
  - attr: name
    icon: mdi:map-search-outline
    name: " "
    align: left
  - data: state
    icon: mdi:currency-eur
    suffix: €
    name: " "
    align: center
  - attr: distance
    icon: mdi:map-marker-distance
    align: center
    modify: Math.round(x)
    suffix: " km"
    name: " "
  - icon: mdi:calendar-clock
    name: " "
    data: days_since_last_update
    align: center
    modify: |
      if (x>=1) {'J+'+x} else {'Auj.'}
css:
  tbody tr:nth-child(odd): "background-color: rgba(255, 255, 255, 0.2)"
  tbody tr:nth-child(even): "background-color: rgba(255, 255, 255, 0.1)"
  tbody tr:nth-child(1): "color: #00C62D; font-weight: bold"
  tbody tr:nth-child(2): "font-weight: normal"
card_mod: null
style: |
  :host {
    font-size: 14px;
    border-radius: 10px;
  }

Le code doit être modifié en fonction du carburant que vous souhaitez visualiser.

Pour afficher le prix du gazole, voici le code que j’utilise :

type: custom:flex-table-card
sort_by: state+
clickable: true
title: Prix du carburant Gazole
entities:
  include:
    - sensor.station_*_gazole
  exclude: null
max_rows: 20
columns:
  - data: entity_picture
    name: " "
    align: center
    icon: mdi:gas-station
    modify: "'<img src=\"' + x + '\"style=\"height: 35px\">'"
  - attr: name
    icon: mdi:map-search-outline
    name: " "
    align: left
  - data: state
    icon: mdi:currency-eur
    suffix: €
    name: " "
    align: center
  - attr: distance
    icon: mdi:map-marker-distance
    align: center
    modify: Math.round(x)
    suffix: " km"
    name: " "
  - icon: mdi:calendar-clock
    name: " "
    data: days_since_last_update
    align: center
    modify: |
      if (x>=1) {'J+'+x} else {'Auj.'}
css:
  tbody tr:nth-child(odd): "background-color: rgba(255, 255, 255, 0.2)"
  tbody tr:nth-child(even): "background-color: rgba(255, 255, 255, 0.1)"
  tbody tr:nth-child(1): "color: #00C62D; font-weight: bold"
  tbody tr:nth-child(2): "font-weight: normal"
card_mod: null
style: |
  :host {
    font-size: 14px;
    border-radius: 10px;
  }

Et voilà, vous avez maintenant le prix des carburants directement sur votre tableau de bord Home Assistant !

N’oubliez pas de jeter un œil à mes autres tutoriels pour découvrir davantage d’astuces.