Trash-Card ähnliche Visualisierung

[jambala]

Guten Morgen Zusammen,

ich habe mein Dashboard gerade auf ein Box-Design umgestellt. Jeder Raum oder jedes Thema ist dabei in einer Box dargestellt.

Ich habe aber leider noch keine Lösung gefunden die Trash-Card Darstellung meiner Mülltermine in eine stack-in-card zu integrieren.

Aktuell habe ich eine ICS Kalenderdatei per URL über die configurations.yaml eingebunden. Den Rest macht die Trash-Card.

Hat jemand einen Lösungsansatz für mich, wie ich vier Mushroom Karten in einer stack-in-Karte vereinen kann und dabei die Mülltermine genau so nach Tagen sortiert darstellen kann?

Viele Grüße

Michael

[totow]

@jambala

Ich habe aber leider noch keine Lösung gefunden die Trash-Card Darstellung meiner Mülltermine in eine stack-in-card zu integrieren.

Habe eben bisschen rum probiert, ich würde es so machen, passt am besten zum Rest:

type: custom:vertical-stack-in-card
cards:
  - type: heading
    icon: mdi:trash-can
    heading: Abfallkalender
    heading_style: title
  - event_grouping: true
    drop_todayevents_from: "10:00:00"
    next_days: 30
    pattern:
      - icon: mdi:flower
        color: lime
        type: organic
        pattern: Bio
      - icon: mdi:newspaper
        color: blue
        type: paper
        pattern: Papier
      - icon: mdi:recycle-variant
        color: amber
        type: recycle
        pattern: Gelb
      - icon: mdi:trash-can-outline
        color: grey
        type: waste
        pattern: Rest
      - icon: mdi:dump-truck
        color: purple
        type: others
    alignment_style: left
    color_mode: icon
    items_per_row: 2
    refresh_rate: 60
    with_label: true
    type: custom:trash-card
    entities:
      - calendar.abfallkalender
    filter_events: false
    full_size: false
    use_summary: false
    only_all_day_events: false
    card_mod:
      style: |
        ha-card {
          border-width: 0;
        }

Brauchst dafür dann noch Card-mod wenn noch nicht vorhanden.

Bzw. brauchst du den Card-mod Teil glaube ich gar nicht da du ein Theme ohne border verwendest, in dem fall das einfach weg lassen:

    card_mod:
      style: |
        ha-card {
          border-width: 0;
        }

LG

[jambala]

@totow

type: custom:vertical-stack-in-card
cards:
  - type: heading
    icon: mdi:trash-can
    heading: Abfallkalender
    heading_style: title
  - event_grouping: true
    drop_todayevents_from: "10:00:00"
    next_days: 30
    pattern:
      - icon: mdi:flower
        color: lime
        type: organic
        pattern: Bio
      - icon: mdi:newspaper
        color: blue
        type: paper
        pattern: Papier
      - icon: mdi:recycle-variant
        color: amber
        type: recycle
        pattern: Gelb
      - icon: mdi:trash-can-outline
        color: grey
        type: waste
        pattern: Rest
      - icon: mdi:dump-truck
        color: purple
        type: others
    alignment_style: left
    color_mode: icon
    items_per_row: 2
    refresh_rate: 60
    with_label: true
    type: custom:trash-card
    entities:
      - calendar.abfallkalender
    filter_events: false
    full_size: false
    use_summary: false
    only_all_day_events: false
    card_mod:
      style: |
        ha-card {
          border-width: 0;
        }

cool, herzlichen Dank!

Das passt so perfekt.

Viele Grüße

Michael

Das Ergebnis fügt sich optimal ein.

Ich werde nur noch herum probieren anstelle des langen Datums in “in x Tagen” umzuwandeln.

by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

[totow]

@jambala

anstelle des langen Datums in “in x Tagen” umzuwandeln.

---

Edit:

Wie hast du bei den anderen Karten den border weg gemacht? mich wundert es das es nur bei der Karte da ist.
So hättest du auch mit cardmod die border weg:

type: custom:vertical-stack-in-card
cards:
  - type: heading
    icon: mdi:trash-can
    heading: Abfallkalender
    heading_style: title
  - event_grouping: true
    drop_todayevents_from: "10:00:00"
    next_days: 30
    pattern:
      - icon: mdi:flower
        color: lime
        type: organic
        pattern: Bio
      - icon: mdi:newspaper
        color: blue
        type: paper
        pattern: Papier
      - icon: mdi:recycle-variant
        color: amber
        type: recycle
        pattern: Gelb
      - icon: mdi:trash-can-outline
        color: grey
        type: waste
        pattern: Rest
      - icon: mdi:dump-truck
        color: purple
        type: others
    day_style: counter
    alignment_style: left
    color_mode: icon
    items_per_row: 2
    refresh_rate: 60
    with_label: true
    type: custom:trash-card
    entities:
      - calendar.abfallkalender
    filter_events: false
    full_size: false
    use_summary: false
    only_all_day_events: false
    card_mod:
      style: |
        ha-card {
          border-width: 0;
        }
card_mod:
  style: |
    ha-card {
      border-width: 0;
    }

und auch schon die Tage drin:

[jambala]

der Rand war mir noch gar nicht aufgefallen. Ich habe das bei den anderen Karten so gemacht:

`card_mod:`
`style: |`
`ha-card {`
`–ha-card-border-width: 0px;`
`padding: 0px !important;`
`margin: 0px !important;`
`}`

by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)
s.a.: (Neues Update & Features - Hier in der Community 🫶)

[totow]

@jambala

Ich habe das bei den anderen Karten so gemacht

Wenn du das gleiche eh bei allen Karten machst, würde ich er ein eigenes Theme empfehlen das lädt schneller als Card-mod.

Hier wurde ich damals auf die Idee gebracht:

Hilfe! Dashboard UI style mit separater CSS datei und card-mod definieren

Du hast ja auch Probleme bei den chips. Meine Mushroom Chips sehen so aus: [grafik] square: false columns: 3 type: grid cards: - type: custom:mushroom-chips-card chips: - type: menu - type: action double_tap_action: action: none tap_action: action: assist start_listening: true hold_action: action: none icon: mdi:message-text alignment: start card_mod: style: | ha-card { --ch…

LG

[jambala]

Vielen Dank für den Hinweis. Ich baue erst mal das ganze GUI um und dann muß ich schauen, was ich davon einheitlich in die CSS Datei auslagern kann.

Ich hatte bereits eine größerer Challenge innerhalb einer stack-in-card auf den Buttons die Textgröße zu manipulieren. Ursprünglich hatte ich dort die Mini-Graph-Cards eingebettet, aber dort mußte ich stark in Textgrößen und Abstände eingreifen, was mein Android basiertes Wandpanel von Akuvox gar nicht dargestellt hat.

Ich bin daher auf normale Mushrooms Entity Cards geschwenkt, aber auch die identische Textgrößenanpassung dort (siehe Screenshot unten), habe ich gestern bei den Trash-Cards nicht hinbekommen.

Das wird daher noch eine Challenge möglichst viel in eine CSS auszulagern. An sich sind die Mushrooms Entity Cards klasse, aber wenn in der zweiten Zeile nicht nur An/Aus dargestellt wird, sondern Werte, ist mir die Textgröße zu klein.

Viele Grüße
Michael

[Bacardi]

Dieses flache Design und die lesbaren Infos (Textgröße) gefallen mir sehr gut!
Allerdings wäre mir der Aufwand zu hoch und es besteht immer das Risiko, daß ein Update Nacharbeiten nachzieht.

EDIT:

Habe etwas gespielt obwohl ich es nicht wollte

Wenn man den “Kreis” Icon-Hintergrund auch noch weghaben will, kann man die Farbe identisch zum Kartenhintergrund setzen.

[jambala]

sehr gute Idee mit den Kreisen, funktioniert aber irgendwie bei mir nicht. Was mache ich falsch?

type: custom:stack-in-card
mode: vertical
cards:
  - type: heading
    icon: mdi:alarm-panel
    heading: Zentralfunktionen
    heading_style: title
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: switch.abwesenheit
        name: Abwesenheit
        icon: mdi:home-lock
      - type: custom:mushroom-entity-card
        entity: switch.zirkulation_2
        name: Zirkulation
        icon: mdi:recycle-variant
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: switch.brunnenpumpe
        name: Brunnenpumpe
        icon: mdi:water-pump
      - type: custom:mushroom-entity-card
        entity: switch.zentralsauganlage
        name: Zentralsauger
        icon: mdi:vacuum
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:mushroom-entity-card
        entity: switch.beschattung
        name: Beschattung
        icon: mdi:blinds-horizontal
      - type: custom:mushroom-media-player-card
        entity: media_player.kuche
        fill_container: false
        use_media_info: false
        name: Sonos Küche
        media_controls: []
        show_volume_level: false
        card_mod:
          style: |
            .mushroom-shape-icon$: |
              .shape {
              --shape-color: black !important;
            }
card_mod:
  style: |
    ha-card {
      --ha-card-border-width: 0px;
    }
    .mushroom-shape-icon$: |
      .shape {
        --shape-color: black !important;
    }

so geht es jetzt und sieht leider sehr gut aus…

card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
box-shadow: none !important;
}

by HarryP:

. Zusammenführung Mehrfachpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)
. Code-/Logzeilen formatiert (bitte immer in </> einbinden)
. s.a.: (Neues Update & Features - Hier in der Community 🫶)

[Bacardi]

Ich “hasse” diese Arbeiten

type: custom:mushroom-entity-card
entity: sensor.aqara_mitte_hwr_bewegung_battery
icon_color: green
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: white !important;
      }
    .: |
      ha-card {
        --ha-card-border-width: 0;
        border: none;
        box-shadow: none;
      }

Try and error und am Ende ChatGPT 5 mit dieser Frage

falsch, lese Dir durch GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card und versuche es nochmal

ChatGPT4 gab es nur Blödsinn