Ereignisname bzw Bild im Abfallkalender ändern

Hallo zusammen,

ich habe den Abfallkalender der AWB Köln in HA über die Integration waste_collection_schedule übernommen. Das hat zunächst einmal mit Hilfe des Videos von Simon prima geklappt.

Folgendes "Problem" habe ich bisher nicht lösen können:

1. Die von der AWB gelieferten Bezeichnungen finde ich nicht so toll (grey für Restmüll, blue für Papier etc) und würde die im Kalender und im Dashboard gerne anpassen.

2. Ich habe "eigene" farbige Mülltonnen als png-Dateien im www/icons Ordner abgelegt. Die würde ich anstatt des mdi:trash-can Symbols nutzen wollen. Im Kalender z.B. soll dann statt der Bezeichnung "Papiertonne" nur das Symbol mit der blauen Tonne angezeigt werden.

Gibt es hierfür eine Lösung?

grafik.png

grafik.png

grafik.png

So ähnlich sollte es funktioniert, ich habe es allerdings in einer Mushroom gemacht.

{% if is_state('<muellwert>', 'grey') %}
Restmüll
{% endif %}

Danke für den Tipp. Allerdings hilft mir das nicht bei der Darstellung im Kalender. Jedenfalls wenn ich die Erläuterungen zur Integration richtig verstanden habe.

Bin aber auch einen Schritt weitergekommen:

Die Darstellung der nächsten Abholtermine im Dashboard kann ich durch eine Änderung im value_template anpassen.

Leider ist die Sortierung nicht nach Datum, sondern nach Entität.

Wie sortiert man die Einträge nach Datum und wie wählt man als Symbol statt "mdi:trah-can" das eigene Symbol aus dem Verzeichnis www/icons/Tonne_blau.png aus (Beispiel)?

grafik.png


So sieht da bei mir mittlerweile aus wer Interesse hat einfach melden.

3 „Gefällt mir“

Hallo, brauchst du Hilfe bei deinem Project ?

Sieht sehr cool aus, wie hast Du das hinbekommen?

Also ich hatte auch Hilfe aber ich gebe es gerne weiter. Als erstes habe ich mir die Bilder auf google gesucht und in den www Ordner abgelegt. Als nächstes musst du bei jedem Sensor ausser beim ersten {{value.types|join(", ")}} das entfernen. Nächster Schritt du brauchst die picture-elements. Ist das soweit klar ?

Nicht so wirklich, ich bin noch ziemlicher HA-Anfänger… kannst Du den YAML Code dazu vielleicht posten? Daran könnte man sich ranhangeln…

Kein Problem aber du hast das so nach der Anleitung von Simon42 gemacht mit jumomind nicht dass ich dr etwas schicke und es funktioniert nicht.

Musst eventuell noch anpassen wie bei deinen Sensoren genau heißen. Ich hänge die Bilder auch mit ran die musst du im www Ordner in deiner yaml ablegen.
Einmal den Background transparent und die Bilder von den Tonnen. Wenn du eine Blaue Tonne brauchst musst du bescheid geben.
Ich habe das video mit dem Waste Collection Schedule gemeint.
Meld dich wenn etwas nicht funktioniert.

type: picture-elements
image: /local/Back_trans.png
elements:
  - type: state-label
    entity: sensor.nachste_abholung
    prefix: null
    style:
      top: 10%
      left: 50%
      font-size: 2em
      font-family: brush script mt
  - type: image
    entity: sensor.gelber_sack
    image: /local/gelbersack.png
    style:
      pointer-events: none
      left: 15%
      top: 45%
      width: 20%
  - type: image
    entity: sensor.papier
    image: /local/papier.png
    style:
      pointer-events: none
      left: 38%
      top: 45%
      width: 20%
  - type: image
    entity: sensor.biomull
    image: /local/bio.png
    style:
      pointer-events: none
      left: 61%
      top: 45%
      width: 20%
  - type: image
    entity: sensor.restmull
    image: /local/rest.png
    style:
      pointer-events: none
      left: 84%
      top: 45%
      width: 20%
  - type: custom:button-card
    entity: sensor.gelber_sack
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 15%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.altpapier
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 38%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.biomull
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 61%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.restmull
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 84%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none





4 „Gefällt mir“

Sorry für späte Reaktion auf Deinen Lösungsvorschlag. Deine Karte gefällt mir auch sehr gut und kommt meiner Vorstellung schon recht nahe.
Ich habe Deinen Code (nach Anpassung der Bezeichnungen für die Sensoren) in eine Picture Elements Karte kopiert. So einfach ist es aber wohl nicht.

Die Überschrift wird angezeigt, die Tonnen auch. Der Code wird bis -type: image also korrekt ausgeführt.
Ab Zeile mit -type: custom:button-card passt es aber nicht. Der Code wird in der Karte angezeigt.
Wenn ich den Code in eine leere manuelle Karte kopiere, habe ich den gleichen Fehler.

Wahrscheinlich mache ich etwas grundsätzlich falsch und die Lösung ist ganz einfach - allerdings finde ich den Fehler nicht. Liegt wahrscheinlich daran, dass ich auch noch HA-Anfänger bin.

Hier noch mal der code. Schicken sie mal ein Bild wie das aussieht.
Sie müssen über HACS die Button Card installieren.
Es geht auch einfacher, siehe Bild.

type: picture-elements
image: /local/Back_trans.png
elements:
  - type: state-label
    entity: sensor.nachste_abholung
    prefix: null
    style:
      top: 10%
      left: 50%
      font-size: 2em
      font-family: brush script mt
  - type: image
    entity: sensor.gelber_sack
    image: /local/müll/gelbersack.png
    style:
      pointer-events: none
      left: 15%
      top: 45%
      width: 20%
  - type: image
    entity: sensor.altpapier
    image: /local/müll/altpapier.png
    style:
      pointer-events: none
      left: 38%
      top: 45%
      width: 20%
  - type: image
    entity: sensor.biomull
    image: /local/müll/biomüll.png
    style:
      pointer-events: none
      left: 61%
      top: 45%
      width: 20%
  - type: image
    entity: sensor.restmull
    image: /local/müll/restmüll.png
    style:
      pointer-events: none
      left: 84%
      top: 45%
      width: 20%
  - type: custom:button-card
    entity: sensor.gelber_sack
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 15%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.altpapier
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 38%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.biomull
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 61%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none
  - type: custom:button-card
    entity: sensor.restmull
    show_name: true
    show_icon: false
    show_state: true
    style:
      top: 85%
      left: 84%
      width: 25%
    styles:
      name:
        - font-size: 1em
        - font-family: arial
        - font-weight: bold
      state:
        - font-size: 1em
        - font-family: arial
      card:
        - background-color: transparent
        - border: none

1 „Gefällt mir“

Wie ich vermutet habe: Die Lösung ist ganz einfach. Ich hatte die Button Card nicht über HACS installiert. Das war der entscheidende Hinweis. Vielen Dank für die Hilfe!

Na also geht doch dann wünsche ich viel Spaß damit. Die untere Karte funktioniert auch ohne die Button Card. Einfach Bild und Sensor einfügen und dann in der Größe reduzieren.

Ist es eigentlich möglich, die Tonnen und nächsten Termine bei der Button Card immer in der Reihenfolge der nächsten Leerung (von links nach rechts) anzeigen zu lassen?

Keine Ahnung ist auch gar nicht vorgesehen, sollte doch auch reichen wenn es darüber erscheint in der Schrift. Irgendwann könnte man das so weiter machen biss dann nur die Tonne erscheint die als nächstes abgeholt wird und alle andern ausgeblendet werden. Wird nur Problematisch wenn 2 Sachen gleichzeitig abgeholt werden. Ich würde vorschlagen sich damit zufrieden zu geben ist auf jeden fall besser als die Standart Karte.

Hallo @bimbo009
Die Blau Tonne würde ich gerne noch nehmen :+1:t2:
Habe bis jetzt andere Bilder in Verwendung.

Finde momentan nichts anderes kannst du aber selber auch machen einfach einen screenshot von dem Objekt und einfügen.
Ich hoffe ich hab dich richtig verstanden.

Ja danke, das habe ich gemeint. Und danke für den Code. Der hat mir echt weiter geholfen :+1:t2:

Edit: Hat super geklappt!

Bitte schön gerne geschehen freut mich dass ich helfen konnte.
Mir war der SmartHomeBastler behilflich.