Carte pour station essence

Home Assistant - Tutoriels & Partages Interface / Lovelace / Thème / Custom Card
1

Bj

noir
noir896×340 11.5 KB

type: custom:button-card
entity: sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10
show_icon: false
hold_action:
  action: more-info
tap_action:
  action: toggle
aspect_ratio: 3/1
name: false
show_name: false
show_state: false
styles:
  card:
    - background-color: '#4e5e78'
    - border-radius: 2%
    - padding: 5%
    - opacity: 0.7
  grid:
    - grid-template-areas: >
        ". . . . ." "price street_1 street_1 street_1 ." "price street_2
        street_2 street_2 ." "price street_3 street_3 street_3 distance" "time .
        . . km" ". . . . ." 
    - grid-template-columns: 2fr 1fr 1fr 1fr 1fr
    - grid-template-rows: min-content 1fr 1fr 1fr 1fr min-content
  custom_fields:
    price:
      - align-self: start
    street_1: null
    street_2: null
    street_3: null
    time:
      - justify-self: start
      - margin-top: '-35px'
      - font-size: 13px
      - margin-left: 10px
    km:
      - align-self: start
      - justify-self: start
      - margin-top: '-25px'
      - font-size: 13px
    distance:
      - align-self: start
      - justify-self: end
      - margin-right: 45px
      - margin-top: '-25px'
custom_fields:
  price:
    card:
      type: custom:button-card
      name: |
        [[[
        if (states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].state > 1)
          return ` ${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].state}`;
        else 
          return '0,00';
        ]]]
      styles:
        card:
          - font-family: DJBGetDigital
          - color: yellow
          - font-size: 40px
  street_1:
    card:
      type: custom:button-card
      name: >-
        [[[ return
        `${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].attributes.station_name}`
        ]]]
      styles:
        card:
          - background-color: transparent
          - box-shadow: none
  street_2:
    card:
      type: custom:button-card
      name: >-
        [[[ return
        `${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].attributes.postal_code}
        ${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].attributes.city}` ]]]
      styles:
        card:
          - background-color: transparent
          - box-shadow: none
  street_3:
    card:
      type: custom:button-card
      name: >-
        [[[ return
        `${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].attributes.address}
        ${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].attributes.city}` ]]]
      styles:
        card:
          - background-color: transparent
          - box-shadow: none
  time: |
    [[[
      if (states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].state > 1)
        return 'Ouvert';
      else 
        return 'Fermé';
    ]]]
  km: >-
    [[[ return `${states['sensor.station_intermarche_XXXXXXXXXXXXXXXX_e10'].state} km`
    ]]]
  distance:
    card:
      type: custom:button-card
      icon: mdi:navigation-variant
      name: false
      show_name: false
      tap_action:
        action: navigate
        navigation_path: /map
      styles:
        card:
          - background-color: '#242e42'
          - height: 25px
          - width: 25px
          - box-shadow: none
        icon:
          - width: 15px
2

Merci pour la proposition !

2 petits détails :

  • sur le prix, ça ne fonctionne pas pour le gpl car il est à moins d’1€/L , il faut plutôt faire ce test : .state > 0.1)
  • Le toggle sur le tap_action n’a pas de sens est peut être retirer :
tap_action:
  action: none
3

Bonjour,

Merci pour le partage !

J’ai un petit problème chez moi, la distance en km en bas a droite n’est pas bonne, ça m’affiche le prix de l’essence, une idée d’où peut venir le problème ?

image

4

Bonsoir,
Si tu cherches à avoir les prix des carburants vers chez toi tu as cette extension également.
Aohzan/hass-prixcarburant: Récupération des prix des stations en France (github.com)

5

Bonjour @Sabjul33

Les prix fonctionnent, j’ai testé sur 3 stations différentes j’ai 3 prix différents, mais pour la station qui est a 40km de chez moi, j’ai la distance = prix de l’essence.

6

les données sont basées sur quelle source ?

7

J’ai l’intégration suivante : https://github.com/Aohzan/hass-prixcarburant/

Avec une entrée :

image
image375×763 15.2 KB

8

ok donc c’est celle dont je te parlais.
Est-ce que tu as essayé de regarder sur le site du gouvernement, si les données sont bonnes.
Après est-ce que tu pourrais donner la station en question ?

Tu peux essayer ce code « à modifier selon ton besoin » voir si tu as le même résultat sur ta station qui pose problème : (il te faudra peut-être la custom flex-table-card

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

J’ai les mêmes données pour les prix des carburants que toi, avec ton code.
En fait le problème est le même pour les autres stations, mais au final dans le tiens il y a pas de bug pour la distance, c’est même bien plus clair comme ca ! je vais prendre ton code pour intégrer mes stations.

image
image404×691 34 KB

Du coup, j’aimerais utiliser des noms spécifiques pour certaines stations, j’ai modifié dans le nom, mais ça ne le prend pas en compte dans le tableau.

image

Ça m’affiche Lerclerc drive, alors que je voudrais Leclerc drive Viviers du lac.

10

Cool que mon code te va bien.
« après il faut rendre à césar ce qui est à césar », il n’est pas de moi je l’ai trouvé sur le forum dans un sujet qui parlait de cette extension :wink: :wink:

Pour changer le nom des stations ça ne se fait au niveau de l’entité.
Il faut aller dans le fichier stations_name.json et modifier le nom lié à l’id de la station.
exemple :

  "1000006": {
    "Nom": "CASINO SUPERMARCHE",
    "Marque": "Casino"
  },

tu changes le nom dans la partie Nom

 "1000006": {
    "Nom": "CASINO SUPERMARCHE DE MA VILLE",
    "Marque": "Casino"
  },

il faut après recharger l’extension en allant dans l’intégration « les petits points / recharger » je crois que ça suffit. (un refresh de ta page) au pire un redméarrage rapide de HA.
C’est ce que j’ai fait autour de chez moi, après j’en ai fait profiter les autres personnes car j’ai également proposé les modifs sur le Github de l’extension, ça c’est donc propagé pour tout le monde.
Après je ne sais pas si tu fais des modifications en local est-ce qu’une mise à jour va remodifier tes noms…

11

Ok merci, j’ai regardé sur mon téléphone ce matin ce fichier, je modifierai ce soir sur pc PC ce sera beaucoup plus facile !

Ça sera cool que la MAJ se fasse pour les autres en modifiant mon fichier json, mais j’y crois pas trop lol.

J’imagine qu’il faut que je me fasse une sauvegarde après modification du fichier stations_names.json, car si une MAJ est dispo de prixcarburant, ça risque de m’écraser ce que j’ai fais.