HA: Pimp your Tankstellen-Card mit tankerkönig
5 (1)

Nach dem Wechsel zu Home Assistant als Smarthome-Lösung konnte ich mich austoben um mein Home weiter smart zu machen. Dabei habe ich auch ordentlich Zeit in die Optik fließen lassen. Die Zeit und Arbeit bis zu meinen fertigen Karten möchte ich gerne hier teilen und vielleicht kannst Du damit ja was anfangen… Orientiert habe ich mich an folgendem Blogbeitrag, allerdings hab ich keinen Erfolg mit der Umsetzung gehabt. Daher habe ich mit der Integration für Tankerkönig folgende Karte erstellt:

Alternativ schau doch auch mal bei Daniel vorbei, er hat auch noch eine Umsetzung nach Spritpreis sortiert in seinem Blog smarthomeyourself.de im Angebot

Spritpreise in Deiner Umgebung

API-Key bei tankerkönig.de

Um den API-Key zu bekommen, gehe auf folgende Seite und klicke zwei mal (ja richtig, zwei mal) auf den Menüpunkt API-Key:

https://creativecommons.tankerkoenig.de/

Trage Deine Daten dort ein und Du kriegst Deinen API-Key, der meines Wissens auf 10 Stations begrenzt sind pro Aufruf.

Finde Deine Tankstellen

Um einzelne Tankstellen-IDs (Station ID) auszulesen, pass folgenden Link auf Deine Bedürfnisse an (Quelle iobroker-Forum):

https://creativecommons.tankerkoenig.de/json/list.php?lat=52.285&lng=13.545&rad=10&sort=dist&type=all&apikey=00000000-0000-0000-0000-000000000002

Dabei musst Du die lat und ing Angabe im Link anpassen auf Deine Koordinaten. Die findet man bei Google Maps heraus . Der Parameter rad steht für den Radius, hier also 10.

So oder so musst Du die configuration.yaml Deiner Home Assistant Installation anpassen. Dort sieht Du im folgenden Beispiel auch eine Möglichkeit automatisch Tankstellen im Umkreis einer Position hinzuzufügen. Da ich persönlich aber meine festen Tanken habe, habe ich einzelne Stations hinzugefügt:

tankerkoenig:
    api_key: !secret tankerkoenig_api_key
    #radius: 2.5
    show_on_map: false
    fuel_types:
        - "diesel"
        - "e10"
    #latitude: 51.4321
    #longitude: 6.7890
    stations:
    - 00000000-0aa0-0aa0-aaaa-a0000000aa00
    - ...

Template Sensor für die Feinheiten

Ich habe mir ein paar Template Sensoren erstellt für meine Tank-Favoriten. Das habe ich vor allem deshalb gemacht, damit in den Badges e10 und Diesel steht, aber Du kannst hier auch schon images hinterlegen und später mit Variablen arbeite usw. Schau Dir einfach das Bespiel aus meiner sensors.yaml an:

- platform: template
  sensors:
    template_tankstelle_xyz_diesel:
      value_template: '{{ states.sensor.tankerkoenig_tanke_xyz_diesel.state }}'
      unit_of_measurement: Diesel
      attribute_templates:
        image: "/local/gasstation_logos/tanke_1.png"
        opt_name: "Mustergasse 7b - Beispielstadt"

- platform: template
  sensors:
    template_tankstelle_xyz_e10:
      value_template: '{{ states.sensor.tankerkoenig_tanke_xyz_e10.state }}'
      unit_of_measurement: e10
      attribute_templates:
        image: "/local/gasstation_logos/tanke_1.png"
        opt_name: "Mustergasse 7b - Beispielstadt"

Hier musst Du natürlich nacharbeiten, damit der richtige Template-Wert angezeigt wird.

Anpassen der Karte

Jetzt geht es ans eingemacht. Da ich per HACS (HACS installieren) ein paar Frontend installiert habe, liste ich diese vorab:

Das Design ist stark auf meine Bedürfnisse zugeschnitten, aber ich denke, dass Du mit folgendem Code auch ein tolles Ergebnis erzielen kannst:

type: custom:stack-in-card
style:
  .: |
    ha-card {
      padding-left: 10px;
      padding-bottom: 10px;
      padding-top: 10px;
    }
cards:
  - type: vertical-stack
    cards:
      - type: horizontal-stack
        cards:
          - type: markdown
            content: ' '
            style:
              .: |
                ha-card {
                  background-color: transparent !important;
                  box-shadow: none !important;
                }
          - type: horizontal-stack
            cards:
              - type: picture
                image: /local/gasstation_logos/auto_1.png
                style:
                  .: |
                    ha-card {
                      background-color: transparent !important;
                      box-shadow: none !important;
                      margin-bottom: 5px;
                      margin-left: 0px;
                      margin-right: 0px;
                    }
                    ha-card img{
                      height: 43px;
                      width: 70px;
                      margin: auto;
                    }
              - type: picture
                image: /local/gasstation_logos/auto_2.png
                style:
                  .: |
                    ha-card {
                      padding: auto;
                      background-color: transparent !important;
                      box-shadow: none !important;
                      margin-bottom: 5px;
                      margin-left: 0px;
                      margin-right: 0px;
                    }
                    ha-card img{
                      height: 43px;
                      width: 70px;
                      margin: auto;
                    }
      - type: horizontal-stack
        cards:
          - type: markdown
            content: |
              <table>
                <tr>
                  <td width="50px;">     
                    <img src = '/local/gasstation_logos/tankestelle_xyz.png' align='top' height='40'></img>
                  </td>
                  <td>
                    Beispielstraße 99 - Musterstadt
                  </td>
                </tr>
              </table>
            style:
              .: |
                ha-card {
                  max-height:51px;

                  padding-top: 0px;
                  background-color: transparent !important;
                  box-shadow: none !important;
                  }
                ha-markdown {
                  font-family: Arial;
                  font-size: 11px;
                  font-weight: bold;
                }
                .no-header {
                  padding: 0px !important;
                }
          - type: horizontal-stack
            cards:
              - type: custom:badge-card
                badges:
                  - entity: sensor.template_tankestelle_xyz_diesel
                    name: ' '
                    style: |
                      :host {
                        font-weight: bold;
                        --label-badge-text-color: white;
                        --label-badge-red: black;
                        --label-badge-background-color: gray;
                        --ha-label-badge-label-color: white;
                      }
              - type: custom:badge-card
                badges:
                  - entity: sensor.template_tankestelle_xyz_e10
                    name: ' '
                    style: |
                      :host {
                        font-weight: bold;
                        --label-badge-text-color: white;
                        --label-badge-red: black;
                        --label-badge-background-color: red;
                        --ha-label-badge-label-color: white;
                      }
      - type: horizontal-stack
        cards:
          - type: markdown
            content: |
              <table>
                <tr>
                  <td width="50px;">     
                    <img src = '/local/gasstation_logos/tankestelle_abc.png' align='top' height='40'></img>
                  </td>
                  <td>
                    Essener Str. 345 - OB
                  </td>
                </tr>
              </table>
            style:
              .: |
                ha-card {
                  max-height:51px;

                  padding-top: 0px;
                  background-color: transparent !important;
                  box-shadow: none !important;
                  }
                ha-markdown {
                  font-family: Arial;
                  font-size: 11px;
                  font-weight: bold;
                }
                .no-header {
                  padding: 0px !important;
                }
          - type: horizontal-stack
            cards:
              - type: custom:badge-card
                badges:
                  - entity: sensor.template_tankestelle_abc_diesel
                    name: ' '
                    style: |
                      :host {
                        font-weight: bold;
                        --label-badge-text-color: white;
                        --label-badge-red: black;
                        --label-badge-background-color: gray;
                        --ha-label-badge-label-color: white;
                      }
              - type: custom:badge-card
                badges:
                  - entity: sensor.template_tankestelle_abc_e10
                    name: ' '
                    style: |
                      :host {
                        font-weight: bold;
                        --label-badge-text-color: white;
                        --label-badge-text-weight: bold;
                        --label-badge-red: black;
                        --label-badge-background-color: red;
                        --ha-label-badge-label-color: white;
                      }

Die Images kannst Du Dir z.B. per Google-Bilder Suche laden. Nutze dabei den Suchfilter Farbe: Transparent. Wenn Du die Skills hast, schneide das Bild zu und passe die Bildgröße an (z.B. 128X128px). Die Datein gehören dann in das config/www-Verzeichnis auf Deinem Home Assistant System. Im oben gezeigten Beispiel habe ich noch ein Verzeichnis gasstation_logos erstellt.

Bewerte diesen Beitrag
[Total: 1 Durchschnitt: 5]
Abonnieren
Benachrichtige mich bei
Deine Daten werden nicht an Dritte weitergegeben und auf deutschen Servern verarbeitet. Hiermit stimmst Du zu, dass Deine IP-Adresse für maximal 48h gespeichert wird. Außerdem stimmst Du der Speicherung und Veroffentlichung Deines Namens, Deiner Mailadresse, falls vorhanden Deiner Webseite und Deines Kommentares zu.
0 Kommentare
Inline Feedbacks
Zeige alle Kommentare
Scroll to Top