Waste_collection shown in Markdown Card with an Icon on Dashboard

Configuration Frontend
1

Hallo,
I am currently working on my Waste-Collection calendar integration.
Calendar and dates are all integrated, Config and sensors created.

Configuration.yaml

 sources:
    - name: jumomind_de
      args:
        service_id: mymuell
        city_id: 39764
        area_id: 349
      customize:
        - type: Braune Biotonne
          alias: braun
          icon: mdi:trash-can-outline
        - type: Gelbe Tonne / Container
          alias: gelb
          icon: mdi:trash-can
        - type: Restmüll - 2 wöchentlich
          alias: schwarz
          icon: mdi:delete-cwaste_collection_schedule:ircle
        - type: Blaue Tonne / Container
          alias: blau
          icon: mdi:delete-circle-outline
  fetch_time: "04:00"
  day_switch_time: "11:00"

sensors.yaml:

# ABFALL Sensoren
  - platform: waste_collection_schedule
    name: AbfallPlastik
    details_format: "upcoming"
    value_template: '{{ value.daysTo }}' 
    types:
      - gelb

  - platform: waste_collection_schedule
    name: AbfallBio
    details_format: "upcoming"
    value_template: '{{ value.daysTo }}' 
    types:
      - braun

  - platform: waste_collection_schedule
    name: AbfallRestmuell
    details_format: "upcoming"
    value_template: '{{ value.daysTo }}' 
    types:
      - schwarz

  - platform: waste_collection_schedule
    name: AbfallPapier
    details_format: "upcoming"
    value_template: '{{ value.daysTo }}' 
    types:
      - blau  

  - platform: waste_collection_schedule
    name: AbfallNaechster
    details_format: "upcoming"
    value_template: ' {% if value.daysTo == 0 %} Heute{% elif value.daysTo == 1 %} Morgen{% else %} in {{value.daysTo}} tagen{% endif %}'

My Dashboard card is currently a markdown card:

type: markdown
content: >
  ### {{ states.sensor.abfallnaechster.attributes.values() | first }}

  ##### {{ states.sensor.abfallnaechster.attributes | first | as_timestamp |
  timestamp_custom("%d.%m.%y") }}


  ###### {{ states.sensor.abfallnaechster.state }}
card_mod:
  style: |
    ha-card {
      color: black;
      font-size: 18px;
      background-color: rgba(0 ,0 ,25, 0.0);
      border-width: 1px;
      border-radius: 3px;
    }

The above code shows sth like this:

  • gelb (which is the sensor type)
  • Date of next collection
  • Days till next collection

image

However, I would like to show an icon instead of the name/type, depending on the kind of trash (I have 4 sensors) that is next.
I dont have any idea how to do that.
I am thinking of some if else line (if next trash is yellow, show this icon, else if trash ist black show the other icon, etc…

Any idea how to do that?
As you can see I have added an icon in my sensors, but it is not catched here.
Also, I would prefer an uploaded icon (*-png) but that would be my second step.

Also one question regarding formatting: Any option to decrease the distance between each paragraph, so that my card will be not as large as it is now? And how could I center the text within the Markdown card?

I guess you notice that I am quite new to HA and I have not much knowledge in CSS.

Thx a lot
Thorsten
2

Do you have the icon or will you use a MDI icon or something else?

3

One of your icon entries is messed up. Looks like you copied something into the text already there.

The Markdown card do not pull the icon, but you can still show icons and it is more versatile, but also require a bit more “coding”.

You need to use if-else lines, like this

{% if ((states.sensor.abfallnaechster.attributes.values() | first)=='gelb') %}
    <font color="yellow"><ha-icon icon="mdi:delete-circle-outline"></ha-icon></font>
{% elif ((states.sensor.abfallnaechster.attributes.values() | first)=='rot') %}
    <font color="red"><ha-icon icon="mdi:delete-circle-outline"></ha-icon></font>
{% else %}
    <font color="green"><ha-icon icon="mdi:delete-empty"></ha-icon></font>
{% endif %}

Also regarding the spacing, then when using {{, {%, %} and }} you might need to add extra linefeeds to make it readable to humans, but those extra linefeeds count also in the viewing of the card.
To prevent those extra linefeeds there is an option to ignore a linefeed before {{ and {% and after %} and }}. The trick is to add a - inside, like {{- and {%- for removing a linefeed before and -%} and -}} for removing a linefeed after.
If there is no linefeed or it has already been removed be a - earlier, then it will have no effect, so try your way forward.

4

@WallyR - that code works. Thank you.
However, to answer your first question: Yes, i would like to use my own *.png which I uploaded into a folder. How can I link to that file and also is it possible to resize an icon with code?

Thank You

5

I have never tried to resize an icon. I think I have split the icon out to its own card when I have needed it and then put it into a vertical or horizontal stack to make it fit my requirements.

Regarding you icon, then a picture card might be used, but the issue here might be the changing of the color to simulate states. PNG is not an icon seen from HA, which require a vector format.

6

I will try to change the image size with a graphic-edit-tool. Maybe that will work.

7

Well resizing might be possible but there seems to be a big Top-Margin which I wont get to change within the Markdown card.

So this is what it looks right now:
image
As you can see there is still some space above the trash can and also the image does only resize in terms of width but no in terms of height. Thats why its larger than the actual card (as you can see with the borderline

Any chance to move it up within the card? (and I know i need to resize it a little more)

Again my current code:

type: markdown
card_mod:
  style: |
    ha-card {
      color: black;
      font-size: 14px;
      background-color: rgba(0 ,0 ,25, 0.0);
      border-width: 1px;
      border-radius: 3px;
      border-color: rgba(150 ,150 ,50, 0.25);
      padding: 0 0 0 0 0 px;
      height:100px !important;
    }
content: >
  {% if ((states.sensor.abfallnaechster.attributes.values() | first)=='gelb')
  %}   <font
  color="yellow"><center>![Image](/local/muell_images/Kunststoff.png)</center></font>

  {% elif ((states.sensor.abfallnaechster.attributes.values() | first)=='braun')
  %}   <font
  color="yellow"><center>![Image](/local/muell_images/Bio.png)</center></font>

  {% elif ((states.sensor.abfallnaechster.attributes.values() |
  first)=='schwarz') %}   <font
  color="yellow"><center>![Image](/local/muell_images/Rest.png)</center></font>

  {% elif ((states.sensor.abfallnaechster.attributes.values() | first)=='blau')
  %}   <font
  color="yellow"><center>![Image](/local/muell_images/Papier.png)</center></font>

  {% endif %}

  #### {{ states.sensor.abfallnaechster.state }} 
view_layout:
  grid-area: w2

Also, FYI I am using the grid card:

layout:
      grid-template-columns: 5% 3% 3% 10% 10% 10% 3% 10% 10% 3% 10% 10% 10% 3%
      grid-template-rows: auto
      justify-items: left
      grid-template-areas: |
        "c    c0   c1   c2 c3 c3   c5   c6 c7   c8   c9 c10 c11   c12"
        "d    d0   d1   d2 d2 d2   d5   d6 d7   d8   d9 d10 d11   d12"
        "w    w0   w1   w2 w3 w4   w5   w6 w7   w8   w9 w10 w11   w12"
        "h    h0   h1   h2 h2 h2   h5   h6 h7   h8   h9 h10 h11   h12"
        "hh   hh0  h1   h2 h2 h2   h5   h6 h7   h8   h9 h10 h11   h12"
        "hhh  hhh0 h1   h2 h2 h2   h5   h6 h7   h8   h9 h10 h11   h12"
        "i    i0   i1   i2 i3 i4   i5   i6 i6   i8   i9 i10 i11   i12"
    badges: []

My aim is to get this Markdown card shown as a fixed square card and not too large.
I like it the size of the current border that you can see in attached screenshot.

8

You have not added - to the brackets yet?
Other than that I do not really know what to do.

9

Where exactly do you mean? Only brackets I set is where I have the if-else code.

10

exactly.
The text with hidden characters actually look like this.

{% if some... %} \linefeed
  some text\linefeed
{% elif some... %} \linefeed
  some other text\linefeed
{% else %} \linefeed
  catch text\linefeed
{% endif %} \linefeed

As you can see there are a lot of linefeeds there. Not all of them will go into your card, but an estimate would be that the text would end up something like this.

\linefeed
some text\linefeed
\linefeed

Two of those linefeeds are just waste and adding extra space between your text.
You should replace your {% with {%- and %} with -%}. which would probably give something like this.

some text

This might be a linefeed to few, so try to remove one of the - to see what happens then.

11

I eliminated all line feeds, no change.
I will see if I can use another card to get what I need

12

What if I use a standard mdi:icon ?
How could I define the size in my If-code?

13

Don’t think so. The markdown card inserts it as text and give it the same size as text. I tried with the html <font size=X>, but that did not work.
I did not try it with the headline tags for a markdown card though.

14

Well, I resized the images which worx now.

image

Thats the way I thought of.

Placing text and objects in HA ist not really easy…at least needs a lot of tweaking.

15

The issue with HA is that it has to fit all screen sizes with a single layout.
If your layout is too fixed it might be distorted and out of bounds if you look at it on devices like a phone or tablet.