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):
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.