在仪表板上显示带有图标的Markdown卡片的废物收集

2024年1月11日下午4:45 1

你好，我目前正在处理我的废物收集日历集成。日历和日期都已集成，配置和传感器已创建。

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: ```yaml
  - platform: waste_collection_schedule
    name: AbfallBio
    details_format: "即将到来"
    value_template: '{{ value.daysTo }}'
    types:
      - gelb

  - platform: waste_collection_schedule
    name: AbfallRestmuell
    details_format: "即将到来"
    value_template: '{{ value.daysTo }}'
    types:
      - braun

  - platform: waste_collection_schedule
    name: AbfallPapier
    details_format: "即将到来"
    value_template: '{{ value.daysTo }}'
    types:
      - blau

  - platform: waste_collection_schedule
    name: AbfallNaechster
    details_format: "即将到来"
    value_template: ' {% if value.daysTo == 0 %} 今天{% elif value.daysTo == 1 %} 明天{% else %} 还有{{value.daysTo}}天{% endif %}'

我的仪表板卡片目前是一个Markdown卡片：

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

  ##### {{ states.sensor.abfallnaechster.
``` 属性 | 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;
    }

以上代码显示如下：

黄色（传感器类型）
下次收集日期
距离下次收集的天数

然而，我希望根据下一个垃圾（我有4个传感器）的类型来显示一个图标，而不是名称/类型。
我不知道如何做到这一点。
我在想一些if else语句（如果下一个垃圾是黄色，显示这个图标，否则如果垃圾是黑色，显示另一个图标，等等...

有什么办法可以做到这一点吗？
如您所见，我在我的传感器中添加了一个图标，但在这里没有捕捉到。
此外，我更喜欢一个上传的图标。以下是Markdown的中文翻译，并删除了一级标题：n（*-png），但这是我的第二步。

关于格式的一个问题：是否有减小每个段落之间距离的选项，这样我的卡片就不会像现在这样大了？如何在Markdown卡片中居中文本？

我想你已经注意到我对HA还很陌生，对CSS的了解也不多。

非常感谢 Thorsten

WallyR (opens new window)（Wally）

2024年1月11日，下午5:12 2

你有图标吗，还是会使用MDI图标或其他图标？

WallyR (opens new window)（Wally）

2024年1月11日，下午6:00 3

你的一个图标条目弄乱了。看起来像是你把一些东西复制到了已经存在的文本中。

Markdown卡片不会自动获取图标，但你仍然可以显示图标，它更加灵活，但也需要一些更多的“编码”。

你需要使用if-else行，像这样：

{% if ((states.sensor.abfallnaechster.attributes.values() | first)=='gelb') %}
    <font color="yellow" 以下是将Markdown转换为中文并删除第一级标题的结果:

{% if ((states.sensor.abfallnaechster.attributes.values() | first)=='gelb') %} {% elif ((states.sensor.abfallnaechster.attributes.values() | first)=='rot') %} {% else %} {% endif %}


此外，关于间距，当使用{{、{％、％}和}}时，您可能需要添加额外的换行符以使其对人类可读，但这些额外的换行符也会计入卡片的查看中。  
为了避免这些额外的换行符，有一个选项可以忽略{{和{％之前以及％}和}}之后的换行符。技巧是在内部添加一个-，如{{-和{％-用于删除换行符之前，-％}和-}}用于删除换行符之后。  
如果没有换行符或已经被之前的-删除，那么它将无效，所以可以试试您自己的方式。

[@WallyR](https://community.home-assistant.io/u/wallyr) - 该代码有效。谢谢。
然而，为了回答你的问题， 你的第一个问题：是的，我想使用我自己上传到文件夹中的\*.png文件。如何链接到该文件，并且是否可以使用代码调整图标的大小？

谢谢

[WallyR](https://community.home-assistant.io/u/WallyR) (Wally)

2024年1月11日，晚上7:27 5

我从未尝试过调整图标的大小。在我需要时，我认为我已经将图标拆分到了自己的卡片中，然后将其放入垂直或水平堆栈中以使其符合我的要求。

关于您的图标，可以使用图片卡片，但在这里可能存在模拟状态更改颜色的问题。PNG不是HA中看到的图标，需要矢量格式。

我将尝试使用图形编辑工具更改图像大小。也许那样可以解决问题。

嗯，调整大小可能是可能的，但似乎存在一个无法在Markdown卡片中更改的大的顶部边距。

所以现在的样子是这样的：
![image](https://community-assets.home-assistant.io/original/4X/5/9/c/59c80cb7b1e69aada 如您所见，垃圾桶上方仍有一些空间，并且图像仅在宽度上调整大小，而没有在高度上调整大小。这就是为什么它比实际卡片要大（如您可以通过边框看到的那样）。

有没有办法将其移到卡片内部？（我知道我需要再调整一下大小）

再次提供我的当前代码：

```yaml
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 ![Image](/local/muell_images/Rest.png)

![Image](/local/muell_images/Papier.png)

{{ states.sensor.abfallnaechster.state }} 将以下的Markdown翻译成中文，并删除一级标题："h0 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"
徽章: []

我的目标是将这个Markdown卡片显示为一个固定的正方形卡片，而且不要太大。我希望它的大小和你在附上的截图中看到的当前边框大小一样。