SwipeCard aus HACS und Mediaplayer

[Andifidi]

Die SwipeCard für eine Heizkörpersteuerung mit der Anleitung von https://www.simon42.com/home-assistant- ... at-karten/funktioniert bei mir super.
Diese hätte ich gerne um durch meine 5 Sonos-Lautsprecher zu swipen. Wenn ich nur die Entitäten der Sonos-Lautsprecher nehme, funktioniert das auch…wie folgt:

Code: Alles auswählen

cards:
  - type: vertical-stack
    cards:
      - entity: media_player.buero
        type: custom:mini-media-player
    group: true
    volume_stateless: true
    entity: media_player.buero
    toggle_power: false
    artwork: cover-fit
    hide:
      power: true
  - type: vertical-stack
    cards:
      - entity: media_player.sonos_wohnzimmer
        type: custom:mini-media-player
    group: true
    volume_stateless: true
    entity: media_player.sonos_wohnzimmer
    toggle_power: false
    artwork: cover-fit
    hide:
      power: true
  - type: vertical-stack
    cards:
      - entity: media_player.kueche
        type: custom:mini-media-player
    group: true
    volume_stateless: true
    entity: media_player.kueche
    toggle_power: false
    artwork: cover-fit
    hide:
      power: true
  - type: vertical-stack
    cards:
      - entity: media_player.bad
        type: custom:mini-media-player
    group: true
    volume_stateless: true
    entity: media_player.bad
    toggle_power: false
    artwork: cover-fit
    hide:
      power: true
type: custom:swipe-card

Jetzt möchte ich aber Picture-Elemente zu jeder SwipeCard hinzufügen oder Buttons die jeweils auf ein Script verzweigen (insgesamt 5) die dann einen bestimmten Radiosender auf dem entsprechenden Lautsprecher starten. Die Schalter sollen dann zu jedem Mediaplayer "mitswipen". Da gelingt mir das aber nicht, wie bei der Lösung mit den Thermostaten. Yaml mach mich hier wahnsinnig…
Ein Beispiel für ein Picture-Element:

Code: Alles auswählen

- type: picture
    tap_action:
      action: call-service
      service: script.bb_radio
      service_data: {}
      target: {}
    hold_action:
      action: call-service
      service: script.stop_media
      service_data: {}
      target: {}
    image: http://192.xxx.xxx.xxx:xxxx/local/BB_Radio_Logo.png

Vielleicht ist das ganz einfach und ich komme mal wieder nicht drauf…
Gruß
AndiFidi

[Andifidi]

Habe es jetzt mit den Bordmitteln von custom:mini-media-player gelöst. Das bietet u.a. das Einfügen von Schaltflächen.
Was ich noch nicht hinbekommen habe ist die Anpassung der Breite vom mini-media-player. Vielleicht geht da was mit card-mod.

Bildschirm­foto 2023-03-19 um 12.43.44.png (240.4 KiB) 2474 mal betrachtet

Code: Alles auswählen

cards:
  - cards:
      - type: custom:mini-media-player
        cards:
          - entity: media_player.buero
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.buero
        toggle_power: false
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: material
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_buero
            - name: BB
              type: script
              id: script.bb_radio_buero
            - type: script
              name: B2
              id: script.schlagerradio_buero
            - type: script
              name: AnNi
              id: script.anni_buero
            - type: script
              name: Andi
              id: script.playlist_andreas_buero
      - type: custom:mini-media-player
        cards:
          - entity: media_player.kueche
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.kueche
        toggle_power: true
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: material
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_kueche
            - name: BB
              type: script
              id: script.bb_radio_kueche
            - type: script
              name: B2
              id: script.schlagerradio_3
            - type: script
              name: AnNi
              id: script.anni_kueche
            - type: script
              name: Andi
              id: script.playlist_andreas_kueche
      - type: custom:mini-media-player
        cards:
          - entity: media_player.sonos_wohnzimmer
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.sonos_wohnzimmer
        toggle_power: true
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: material
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_wohn
            - name: BB
              type: script
              id: script.bb_radio_2
            - type: script
              name: B2
              id: script.schlagerradio_2
            - type: script
              name: AnNi
              id: script.anni_wohn
            - type: script
              name: Andi
              id: script.playlist_andreas_wohnzimmer
      - type: custom:mini-media-player
        cards:
          - entity: media_player.bad
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.bad
        toggle_power: true
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: material
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_bad
            - name: BB
              type: script
              id: script.bb_radio_bad
            - type: script
              name: B2
              id: script.schlagerradio_bad
            - type: script
              name: AnNi
              id: script.anni_bad
            - type: script
              name: Andi
              id: script.playlist_andreas_bad
    type: custom:swipe-card
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.lautsprechergruppe
          service_data: {}
          target: {}
        show_state: false
        hold_action:
          action: none
        icon: mdi:group
        icon_height: 25px
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.lautsprechereinzel
          service_data: {}
          target: {}
        hold_action:
          action: none
        icon: mdi:music-box-outline
        show_state: true
        icon_height: 25px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        show_state: false
        icon: mdi:speaker-wireless
        icon_height: 25px
        hold_action:
          action: none
        entity: group.lautsprecher
type: vertical-stack

[PX80]

sehr schick! ich wer von meine default spotify media player umsteigen. auch das problem des shuffle buttons wurde wohl gelöst

https://community.home-assistant.io/t/m ... y/368172/4

[Andifidi]

Hallo PX80. Danke Dir. Habe es noch ein wenig umgestylt, sieht jetzt so aus (mit card-mod aus HACS):

Bildschirm­foto 2023-03-20 um 14.01.46.png (262.14 KiB) 2459 mal betrachtet

Ist Geschmacksache, aber so ist das Fenster besser ausgefüllt.

Hier der geänderte Code:

Code: Alles auswählen

cards:
  - cards:
      - type: custom:mini-media-player
        cards:
          - entity: media_player.buero
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.buero
        toggle_power: false
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: full-cover
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_buero
            - name: BB
              type: script
              id: script.bb_radio_buero
            - type: script
              name: B2
              id: script.schlagerradio_buero
            - type: script
              name: AnNi
              id: script.anni_buero
            - type: script
              name: Andi
              id: script.playlist_andreas_buero
        style:
          .: >
            ha-card > div.mmp-player {

            padding-left: 0px !important;

            padding-right: 0px !important;

            padding-bottom: 0px !important;

            --paper-slider-knob-color: white;

            --paper-slider-active-color: white;

            --paper-slider-container-color: #303741;

            }

            ha-card > div.mmp-player div {

            padding-left: 10px !important;

            padding-right: 10px !important;

            background: rgba(0,0,0,0.8);

            }

            ha-card > div.mmp-player div .entity__info,

            ha-card > div.mmp-player div .entity__info__media {

            background: rgba(0,0,0,0);

            padding: 0px !important;

            }

            ha-card > div.mmp-player div .entity__info__media
            span:nth-of-type(2)::before {

            content: '\000A' !important;

            white-space: pre !important;

            }

            ha-card > div.mmp-player div .entity__info__media span {

            color: #FFFFFF !important;

            }

            ha-card > div.mmp-player .mmp-player__adds mmp-media-controls {

            padding-bottom: 10px !important;

            }
      - type: custom:mini-media-player
        cards:
          - entity: media_player.kueche
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.kueche
        toggle_power: true
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: full-cover
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_kueche
            - name: BB
              type: script
              id: script.bb_radio_kueche
            - type: script
              name: B2
              id: script.schlagerradio_3
            - type: script
              name: AnNi
              id: script.anni_kueche
            - type: script
              name: Andi
              id: script.playlist_andreas_kueche
        style:
          .: >
            ha-card > div.mmp-player {

            padding-left: 0px !important;

            padding-right: 0px !important;

            padding-bottom: 0px !important;

            --paper-slider-knob-color: white;

            --paper-slider-active-color: white;

            --paper-slider-container-color: #303741;

            }

            ha-card > div.mmp-player div {

            padding-left: 10px !important;

            padding-right: 10px !important;

            background: rgba(0,0,0,0.8);

            }

            ha-card > div.mmp-player div .entity__info,

            ha-card > div.mmp-player div .entity__info__media {

            background: rgba(0,0,0,0);

            padding: 0px !important;

            }

            ha-card > div.mmp-player div .entity__info__media
            span:nth-of-type(2)::before {

            content: '\000A' !important;

            white-space: pre !important;

            }

            ha-card > div.mmp-player div .entity__info__media span {

            color: #FFFFFF !important;

            }

            ha-card > div.mmp-player .mmp-player__adds mmp-media-controls {

            padding-bottom: 10px !important;

            }
      - type: custom:mini-media-player
        cards:
          - entity: media_player.sonos_wohnzimmer
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.sonos_wohnzimmer
        toggle_power: true
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: full-cover
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_wohn
            - name: BB
              type: script
              id: script.bb_radio_2
            - type: script
              name: B2
              id: script.schlagerradio_2
            - type: script
              name: AnNi
              id: script.anni_wohn
            - type: script
              name: Andi
              id: script.playlist_andreas_wohnzimmer
        style:
          .: >
            ha-card > div.mmp-player {

            padding-left: 0px !important;

            padding-right: 0px !important;

            padding-bottom: 0px !important;

            --paper-slider-knob-color: white;

            --paper-slider-active-color: white;

            --paper-slider-container-color: #303741;

            }

            ha-card > div.mmp-player div {

            padding-left: 10px !important;

            padding-right: 10px !important;

            background: rgba(0,0,0,0.8);

            }

            ha-card > div.mmp-player div .entity__info,

            ha-card > div.mmp-player div .entity__info__media {

            background: rgba(0,0,0,0);

            padding: 0px !important;

            }

            ha-card > div.mmp-player div .entity__info__media
            span:nth-of-type(2)::before {

            content: '\000A' !important;

            white-space: pre !important;

            }

            ha-card > div.mmp-player div .entity__info__media span {

            color: #FFFFFF !important;

            }

            ha-card > div.mmp-player .mmp-player__adds mmp-media-controls {

            padding-bottom: 10px !important;

            }
      - type: custom:mini-media-player
        cards:
          - entity: media_player.bad
            type: custom:mini-media-player
        group: false
        volume_stateless: true
        entity: media_player.bad
        toggle_power: true
        info: short
        scale: 1
        hide:
          power: true
          volume: false
          source: true
          icon: true
        artwork: full-cover
        shortcuts:
          columns: 5
          buttons:
            - name: Paloma
              type: script
              id: script.paloma_bad
            - name: BB
              type: script
              id: script.bb_radio_bad
            - type: script
              name: B2
              id: script.schlagerradio_bad
            - type: script
              name: AnNi
              id: script.anni_bad
            - type: script
              name: Andi
              id: script.playlist_andreas_bad
        style:
          .: >
            ha-card > div.mmp-player {

            padding-left: 0px !important;

            padding-right: 0px !important;

            padding-bottom: 0px !important;

            --paper-slider-knob-color: white;

            --paper-slider-active-color: white;

            --paper-slider-container-color: #303741;

            }

            ha-card > div.mmp-player div {

            padding-left: 10px !important;

            padding-right: 10px !important;

            background: rgba(0,0,0,0.8);

            }

            ha-card > div.mmp-player div .entity__info,

            ha-card > div.mmp-player div .entity__info__media {

            background: rgba(0,0,0,0);

            padding: 0px !important;

            }

            ha-card > div.mmp-player div .entity__info__media
            span:nth-of-type(2)::before {

            content: '\000A' !important;

            white-space: pre !important;

            }

            ha-card > div.mmp-player div .entity__info__media span {

            color: #FFFFFF !important;

            }

            ha-card > div.mmp-player .mmp-player__adds mmp-media-controls {

            padding-bottom: 10px !important;

            }
    type: custom:swipe-card
  - type: horizontal-stack
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.lautsprechergruppe
          service_data: {}
          target: {}
        show_state: false
        hold_action:
          action: none
        icon: mdi:group
        icon_height: 25px
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: call-service
          service: script.lautsprechereinzel
          service_data: {}
          target: {}
        hold_action:
          action: none
        icon: mdi:music-box-outline
        show_state: true
        icon_height: 25px
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        show_state: false
        icon: mdi:speaker-wireless
        icon_height: 25px
        hold_action:
          action: none
        entity: group.lautsprecher
type: vertical-stack

Die unteren Schaltflächen swipen nicht mit und sind zum Gruppieren, DeGruppieren und Ausschalten der Lautsprecher (über eine smarte Steckdose).

Gruß
AndiFidi

PS: JA stimmt mit der ShuffleFunktion. Hat am Anfang auch nicht funktioniert, jetzt schon

[PX80]

Gibt es die Möglichkeit ein eigenes script zu starten, wenn ich die Lautsprechergruppe auswähle?

Aktuell muss ich über das Spotcast Script die Lautsprechergruppen ( Google Speaker ) auswhlen und bestätigen. Schön wäre es dies dirket im Player umzusetzen?

[Andifidi]

Hi,
ich nutze zur Gruppierung nicht die Funktion aus custom:mini-media-player (die hat bei mir nicht immer funktioniert)
sondern folgendes Script (wird über einen Button gestartet):

Code: Alles auswählen

alias: Lautsprechergruppe
sequence:
  - service: media_player.join
    data:
      group_members:
        - media_player.sonos_wohnzimmer
        - media_player.bad
        - media_player.kueche
        - media_player.buero
    target:
      device_id: xxxxxxxxxxxxxxxxxxxxxxxx
  - delay:
      hours: 0
      minutes: 0
      seconds: 5
      milliseconds: 0
  - service: media_player.volume_set
    data:
      volume_level: 0.06
    target:
      entity_id:
        - media_player.bad
        - media_player.buero
        - media_player.sonos_wohnzimmer
        - media_player.kueche
  - service: tts.cloud_say
    data:
      cache: false
      entity_id: media_player.buero
      message: >-
        Die Lautsprecher wurden gruppiert. Eine Wiedergabe ist nun in allen
        Räumen gleichzeitig möglich.
mode: single
icon: mdi:group

Zur DeGruppierung dieses Script:

Code: Alles auswählen

sequence:
  - service: media_player.volume_set
    data:
      volume_level: 0.1
    target:
      entity_id:
        - media_player.bad
        - media_player.buero
        - media_player.kueche
        - media_player.sonos_wohnzimmer
  - service: media_player.unjoin
    data: {}
    target:
      device_id:
        - xxxxxxxxxxxxxxxxxxxxxxxx
        - xxxxxxxxxxxxxxxxxxxxxxxx
        - xxxxxxxxxxxxxxxxxxxxxxxx
        - xxxxxxxxxxxxxxxxxxxxxxxx
  - service: tts.cloud_say
    data:
      cache: false
      entity_id: media_player.buero
      message: Die Gruppierung der Lautsprecher wurde aufgehoben.
mode: single
alias: LautsprecherEinzel
icon: mdi:music-box-outline

Bei den Targets werden die Device-ID’s des Hauptlautsprechers (beim Gruppieren der Bürolautsprecher) und beim DeGruppieren alle Lautsprecher vom System durch einen Code von Homeassistant ersetzt).

Gruß
AndiFidi

[PX80]

Hast du vorselektierte Gruppen oder kannst du die Lautsprecher einzeln anwählen. wenn letzteres, wie sieht dies auf die GUI und im Code aus?

VG
P