UI Widget Amazon Echo TuneIN

[lenschith]

Mühsam ernährt sich das Eichhörnchen. Ich bin wieder einen Schritt weiter, aber jetzt habe ich nochmal eine Frage, da komme ich wieder mal nicht drauf wie ich das umsetzen kann. Ich möchte das die Medienwiedergabe also das Bedienelement immer auf derselben Höhe bleibt auch wenn sich oben die Anzeige ändert. Aber egal was ich versuche das klappt nicht. Das kommt immer dann vor wenn ein Radiosender irgendwelche Infos nicht mit sendet.

2.png

1.png

Code: Alles auswählen

uid: Amazon Player
tags:
  - alexa
  - music
  - amazon
  - tunein
  - senderauswahl
  - lenschi.th
props:
  parameters:
    - context: item
      label: Player Control Item
      name: playerControlItem
      required: true
      type: TEXT
    - context: item
      label: Artist Name Item
      name: artistItem
      required: true
      type: TEXT
    - context: item
      label: Album Name Item
      name: albumItem
      required: true
      type: TEXT
    - context: item
      label: Track Name Item
      name: trackItem
      required: true
      type: TEXT
    - context: item
      label: Album Art Item
      name: albumArtItem
      required: false
      type: TEXT
    - context: item
      label: Track Progress Time Item
      name: trackProgressItem
      required: false
      type: TEXT
    - context: item
      label: Track Total Time Item
      name: trackTimeItem
      required: false
      type: TEXT
    - context: item
      label: Power Item
      name: powerItem
      required: false
      type: TEXT
    - context: item
      label: Musikanbieter
      name: musikanbieterItem
      required: false
      type: TEXT
    - context: item
      label: Volume Control Item
      name: volumeControlItem
      required: false
      type: TEXT
    - label: Force Dark Theme
      name: darkTheme
      required: false
      type: BOOLEAN
    - description: Sender
      label: Sender1
      name: Sender1
      required: true
      type: TEXT
    - description: Sender
      label: Sender2
      name: Sender2
      required: true
      type: TEXT
    - description: Sender
      label: Sender3
      name: Sender3
      required: true
      type: TEXT
    - description: Sender
      label: Sender4
      name: Sender4
      required: true
      type: TEXT
    - description: Sender
      label: Sender5
      name: Sender5
      required: true
      type: TEXT
    - description: Sender
      label: Sender6
      name: Sender6
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Nov 10, 2022, 11:51:07 AM
component: f7-card
config:
  themeDark: =props.darkTheme
  style:
    height: auto
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: oh-image
            config:
              item: =props.albumArtItem
              action: photos
              actionPhotos: =[props.albumArtItem]
              actionPhotoBrowserConfig:
                theme: dark
              style:
                display: "=props.albumArtItem ? 'block' : 'none'"
                height: 80px
                width: 80px
                float: left
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: column
            slots:
              default:
                - component: Label
                  config:
                    text: =items[props.artistItem].state
                    class:
                      - margin-top
                    style:
                      overflow: hidden
                      white-space: nowrap
                      text-overflow: ellipsis
                - component: Label
                  config:
                    text: =items[props.albumItem].state
                    style:
                      font-size: 10px
                      overflow: hidden
                      white-space: nowrap
                      text-overflow: ellipsis
                - component: Label
                  config:
                    text: =items[props.trackItem].state
                    style:
                      font-size: 18px
                      font-weight: bold
                      overflow: hidden
                      white-space: nowrap
                      text-overflow: ellipsis
                - component: Label
                  config:
                    text: "=(props.trackProgressItem && props.trackTimeItem) ? items[props.trackProgressItem].state + ' / ' + items[props.trackTimeItem].state : ''"
                    style:
                      font-size: 12px
                      height: 20px
                      margin-top: 2px
                      color: gray
                - component: oh-player-controls
                  config:
                    item: =props.playerControlItem
                    color: green
                    visible: =!vars.showVolume
                    style:
                      margin: 0.5rem
                - component: oh-slider
                  config:
                    item: =props.volumeControlItem
                    color: blue
                    visible: =vars.showVolume === true
                    style:
                      margin-top: 1.3rem
          - component: f7-block
            config:
              style:
                position: absolute
                top: 138px
                width: 112px
                text-align: right
                display: flex
                flex-direction: row-reverse
                justify-content: center
            slots:
              default:
                - component: oh-link
                  config:
                    style:
                      margin: 0 0.5em
                    visible: =props.volumeControlItem !== undefined
                    iconF7: speaker_3_fill
                    iconSize: 18
                    color: "=(vars.showVolume) ? 'blue' : 'gray'"
                    round: true
                    action: variable
                    actionVariable: showVolume
                    actionVariableValue: =!(vars.showVolume === true)
                - component: oh-link
                  config:
                    style:
                      margin: 0 0.5em
                    visible: =props.musikanbieterItem !== undefined
                    iconF7: music_house_fill
                    iconSize: 18
                    color: gray
                    round: true
                    action: options
                    actionItem: =props.musikanbieterItem
                    tooltip: =items[props.musikanbieterItem].displayState || items[props.musikanbieterItem].state
                - component: oh-link
                  config:
                    style:
                      margin: 0 0.5em
                      color: var(--f7-card-text-color)
                      opacity: "=(items[props.powerItem].state === 'ON') ? 1 : 0.3"
                    visible: =props.powerItem !== undefined
                    iconF7: power
                    iconSize: 18
                    round: true
                    action: toggle
                    actionItem: =props.powerItem
                    actionCommand: ON
                    actionCommandAlt: OFF
    - component: oh-list
      config:
        accordionList: true
        class:
          padding-top: 0 5em
          padding-bottom: 0 5em
        style:
          --f7-button-bg-color: var(--f7-card-bg-color)
          --f7-button-text-color: var(--f7-text-color)
          --f7-theme-color-rgb: var(--f7-color-blue-rgb)
          font-size: 15px
          height: auto
          text-align: center
      slots:
        default:
          - component: oh-list-item
            config:
              badge: =items['AlexaEchoDOTBuero_Musikanbieter'].state
              badgeColor: gray
              icon: f7:bars
              textColor: gray
              size: 100px
              title: Senderliste
            slots:
              accordion:
                - component: oh-list-card
                  config:
                    accordionList: true
                    noBorder: true
                    noShadow: true
                    class:
                      - margin
                      - no-padding
                  slots:
                    default:
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: ="ziggy spiel " + props.Sender1 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender1
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: ="ziggy spiel " + props.Sender2 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender2
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: ="ziggy spiel " + props.Sender3 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender3
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: ="ziggy spiel " + props.Sender4 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender4
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: ="ziggy spiel " + props.Sender5 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender5
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: ="ziggy spiel " + props.Sender6 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender6
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state

Vielleicht hat da noch jemand nen Tipp was ich machen muss, damit das in der Höhe statisch bleibt. Horizontal gleich zu den Bedienelementen links davon.

[peter-pan]

...wie gesagt ich bin nur ein "Try and Error-Dummy", aber es gibt Möglichkeiten in Zeilen und Reihen (f7-row und f7-col) u gruppieren, und/oder "padding" und "margin" zu verwenden. Auch eine Verwendung von mehreren Cards in eine Card, wäre ein denkbare Möglichkeit.

Hier ein Beispiel aus meinem Fundus. Die Werte dazu kommen aus dem Astro-Binding.

Code: Alles auswählen

uid: moonphases_v0.1
tags:
  - Anfängerspielerei
  - Mondphasen
  - https://www.rapidtables.com/web/css/css-color.html#red  -- CSS-Colors
  - peter-pan / fibu-freak
props:
  parameters:
    - description: Uni-Farbe z.B. green or blue or yellow (default - orangered)
      label: Text-Farbe
      name: textcolor1
      required: false
      type: TEXT
timestamp: Aug 13, 2022, 8:10:32 PM
component: f7-card
config:
  style:
    background-image: ="linear-gradient(rgba(0,191,255,0.3), rgba(70,130,180,0.4)), url(/static/picture/mond3_orbit.jpg)"
    background-position: center center
    background-repeat: no-repeat
    background-size: cover
    border-radius: var(--f7-card-expandable-border-radius)
    font-size: medium
    height: auto
    margin: 5px
    noShadow: true
    padding: 0px
slots:
  content:
    - component: f7-card-header
      config:
        style:
          color: cyan
          font-size: 18px
          justify-content: flex-end
          margin-top: -15px
          min-height: 20px
          padding: 10px
      slots:
        default:
          - component: Label
            config:
              style:
                left: 40px
                margin-left: 20px
                position: absolute
              text: Mondphasen
          - component: Label
            config:
              text: Datum
          - component: Label
            config:
              style:
                margin-left: 20px
                margin-right: -5px
              text: Uhrzeit
    - component: f7-card-content
      config:
        style:
          color: green
          font-size: 18px
          justify-content: flex-start
          margin-left: -5px
          margin-top: 5px
          padding: 0px
          width: 100%
      slots:
        default:
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 50px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      height: 26px
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_new1
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: Neumond
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.New_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 50px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      height: 26px
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_first
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="zunehmender Mond"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.First_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 50px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      height: 26px
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_full
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="Vollmond"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.Full_moon.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 50px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      height: 26px
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 40px
                          icon: moon3_third
                      - component: Label
                        config:
                          style:
                            margin-left: 15px
                            white-space: nowrap
                          text: ="abnehmender Mond"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                          text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("dd, DD.MM")
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                          text: =dayjs(items.Third_quarter.state).add(-0,"hour").add(0,"minute").format("HH:mm ") + " Uhr "
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 53px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 50px
                          icon: orbit
                      - component: Label
                        config:
                          style:
                            margin-left: 5px
                            margin-right: 7px
                            white-space: nowrap
                          text: ="aktuelle Entfernung"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                            white-space: nowrap
                          text: =Number.parseInt(items.Kilometer_distance.state).toLocaleString() + ' km'
          - component: f7-row
            config:
              style:
                color: '=(props.textcolor1) ? props.textcolor1 : "orangered"'
                display: true
                height: 53px
                justify-content: flex-end
            slots:
              default:
                - component: f7-col
                  config:
                    style:
                      align-items: center
                      display: flex
                      justify-content: flex-start
                      left: 0px
                      position: absolute
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          height: 35px
                          icon: '=items.Moon_Phase.state == "WAXING_GIBBOUS" ? "moon-waxing_gibbous" : items.Moon_Phase.state == "FULL" ? "moon-fullmoon" : "orbit" '
                      - component: Label
                        config:
                          style:
                            margin-left: 22px
                            margin-right: 7px
                            white-space: nowrap
                          text: ="aktuelle Phase"
                      - component: Label
                        config:
                          style:
                            margin-left: auto
                            white-space: nowrap
                          text: =items.Moon_Phase.displayState

Das Ergebnis sieht dann so aus:

mond.jpg

Und hier noch eine Card in Card Möglichkeit:´
Yaml_code:

Code: Alles auswählen

uid: multi_window_Rel_0_v0
tags:
  - Window Sensor Control
  - in progress
  - peter pan
props:
  parameters:
    - default: "300"
      description: Breite des Widgets in px (default:300)
      label: Widget Breite
      name: size
      required: false
    - description: Hintergrund des Widgets (e.g. linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%) )
      label: Hintergrund/Background
      name: background1
      required: false
  parameterGroups: []
timestamp: Nov 6, 2022, 1:49:09 PM
component: f7-card
config:
  border: no
  style:
    --cardCorners: 20px
    --cardHigh: auto
    --cardWidth: =props.size + "px"
    --f7-card-box-shadow: none
    background: '=(props.background1) ? props.background1 : "linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"'
    border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
    font-size: 30px
    height: auto
    margin: 5px
    noShadow: true
    padding: 10px
    width: '=(props.size) ? "var(--cardWidth)" : "300px"'
  title: Fenster-Monitor
slots:
  default:
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background5) ? props.background5 : "radial-gradient(circle, lightgreen, yellow, lightblue 20%, #6fa8dc 60% ,#ffe74c 95%)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Schlafzimmer
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_AE50_1STATECONTACT.state == "CLOSED") ? "Geschlossen" : "Offen"'
                    badgeColor: '=(items.HmIP_SWDO_AE50_1STATECONTACT.state == "CLOSED") ? "green" : "blue"'
                    icon: oh:window
                    iconUseState: true
                    item: HmIP_SWDO_AE50_1STATECONTACT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Fenster links
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_AE50_0LOWBAT.state == "OFF") ? "Ok" : "Wechseln"'
                    badgeColor: '=(items.HmIP_SWDO_AE50_0LOWBAT.state == "OFF") ? "green" : "red"'
                    icon: '=(items.HmIP_SWDO_AE50_0LOWBAT.state == "OFF") ? "oh:battery-90" : "oh:battery-10"'
                    iconUseState: false
                    item: HmIP_SWDO_AE50_0LOWBAT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Batterie links
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_B808_1STATECONTACT.state == "CLOSED") ? "Geschlossen" : "Offen"'
                    badgeColor: '=(items.HmIP_SWDO_B808_1STATECONTACT.state == "CLOSED") ? "green" : "blue"'
                    icon: oh:window
                    iconUseState: true
                    item: HmIP_SWDO_B808_1STATECONTACT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Fenster rechts
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_B808_0LOWBAT.state == "OFF") ? "Ok" : "Wechseln"'
                    badgeColor: '=(items.HmIP_SWDO_B808_0LOWBAT.state == "OFF") ? "green" : "red"'
                    icon: '=(items.HmIP_SWDO_B808_0LOWBAT.state == "OFF") ? "oh:battery-90" : "oh:battery-10"'
                    iconUseState: false
                    item: HmIP_SWDO_B808_0LOWBAT
                    title: Batterie rechts
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background2) ? props.background2 : "linear-gradient(to top right,#B0E0E6 20%,#1E90FF 30%,#FFC0CB 60%)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Küche
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_DA7E_1STATECONTACT.state == "CLOSED") ? "Geschlossen" : "Offen"'
                    badgeColor: '=(items.HmIP_SWDO_DA7E_1STATECONTACT.state == "CLOSED") ? "green" : "blue"'
                    icon: oh:window
                    iconUseState: true
                    item: HmIP_SWDO_DA7E_1STATECONTACT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Fenster
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_DA7E_0LOWBAT.state == "OFF") ? "Ok" : "Wechseln"'
                    badgeColor: '=(items.HmIP_SWDO_DA7E_0LOWBAT.state == "OFF") ? "green" : "red"'
                    icon: '=(items.HmIP_SWDO_DA7E_0LOWBAT.state == "OFF") ? "oh:battery-90" : "oh:battery-10"'
                    iconUseState: false
                    item: HmIP_SWDO_DA7E_0LOWBAT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Batterie
    - component: f7-card
      config:
        border: no
        style:
          background: '=(props.background3) ? props.background3 : "linear-gradient(to top left,green 0%,lightblue 60%)"'
          border-radius: '=(props.corners) ? props.corners : "var(--cardCorners)"'
          height: var(--cardHigh)
        title: Toilette
      slots:
        default:
          - component: oh-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_6AF9_1STATECONTACT.state == "CLOSED") ? "Geschlossen" : "Offen"'
                    badgeColor: '=(items.HmIP_SWDO_6AF9_1STATECONTACT.state == "CLOSED") ? "green" : "blue"'
                    icon: oh:window
                    iconUseState: true
                    item: HmIP_SWDO_6AF9_1STATECONTACT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Fenster
                - component: oh-list-item
                  config:
                    badge: '=(items.HmIP_SWDO_6AF9_0LOWBAT.state == "OFF") ? "Ok" : "Wechseln"'
                    badgeColor: '=(items.HmIP_SWDO_6AF9_0LOWBAT.state == "OFF") ? "green" : "red"'
                    icon: '=(items.HmIP_SWDO_6AF9_0LOWBAT.state == "OFF") ? "oh:battery-90" : "oh:battery-10"'
                    iconUseState: false
                    item: HmIP_SWDO_6AF9_0LOWBAT
                    style:
                      --f7-list-item-border-color: transparent
                    title: Batterie

Das sieht dann so aus:

monitor1.jpg

Vielleicht hilft dir das weiter. Viel Spass weiterhin. Wenn's dann fertig ist gibst du mir Bescheid und eine Einweisung

[lenschith]

Für dich Peter nochmal ein Feedback. Das Widget habe ich jetzt für mich soweit fertig. Auch wenn ich nicht ganz verstehe wie ich es schaffen kann eine f7-row statisch in der Höhe zu machen auch wenn sich dort was am Text ändert. Ich habe da jetzt viel Zeit verbracht aber habe keine Möglichkeit gefunden. Wenn das noch jemand wüsste, wäre ich sehr Dankbar. Ich habe mir hier einen WorkAround geschaffen mit dem man leben kann.

Hauptsächlich ging es mir darum das ich meinen Echo steuern kann, auch wenn das Mikro aus ist. Möchte einfach im Büro einen Radiosender einschalten und auch mal ändern können ohne das ich physikalisch an das Gerät muss. Der Rest war dann einfach aus Interesse was alles möglich wäre.

Im Widget kann dann einfach zwischen TuneIN und Amazon Musik gewechselt werden und im Dropdown die Radiosender wechseln.

Code: Alles auswählen

uid: Amazon Player
tags:
  - alexa
  - music
  - amazon
  - tunein
  - senderauswahl
  - lenschi.th
props:
  parameters:
    - description: Echo Aktivierungswort
      label: Aktivierung
      name: aktivierung
      required: true
      type: TEXT  
      groupName: alexa
    - context: item
      label: Medienwiedergabe
      name: playerControlItem
      required: true
      type: TEXT
      groupName: player
    - description: Untertitel 2
      context: item
      label: Artist Name
      name: artistItem
      required: true
      type: TEXT
      groupName: player
    - description: Untertitel 1
      context: item
      label: Album Name
      name: albumItem
      required: true
      type: TEXT
      groupName: player
    - description: Titel
      context: item
      label: Track Name
      name: trackItem
      required: true
      type: TEXT
      groupName: player
    - context: item
      label: Album Bild
      name: albumArtItem
      required: false
      type: TEXT
      groupName: player
    - context: item
      label: Spielzeit
      name: trackProgressItem
      required: false
      type: TEXT
      groupName: player
    - context: item
      label: Gesamtzeit
      name: trackTimeItem
      required: false
      type: TEXT
      groupName: player
    - context: item
      label: Power
      name: powerItem
      required: false
      type: TEXT
      groupName: player
    - context: item
      label: Musikanbieter
      name: musikanbieterItem
      required: false
      type: TEXT
      groupName: player
    - context: item
      label: Lautstärkeregler
      name: volumeControlItem
      required: false
      type: TEXT
      groupName: player
    - label: Force Dark Theme
      name: darkTheme
      required: false
      type: BOOLEAN
      groupName: player
    - description: Aktivierung Radiostream auf TuneIN
      label: Sprich Sender 1
      name: Sender1
      required: true
      type: TEXT
      groupName: senderliste
    - description: Sender Anzeigename
      label: Sender 1 Anzeigename
      name: Sender1Anzeigename
      required: true
      type: TEXT
      groupName: senderliste
    - description: Aktivierung Radiostream auf TuneIN
      label: Sprich Sender 2
      name: Sender2
      required: true
      type: TEXT
      groupName: senderliste
    - description: Sender Anzeigename
      label: Sender 2 Anzeigename
      name: Sender2Anzeigename
      required: true
      type: TEXT  
      groupName: senderliste
    - description: Aktivierung Radiostream auf TuneIN
      label: Sprich Sender 3
      name: Sender3
      required: true
      type: TEXT
      groupName: senderliste
    - description: Sender Anzeigename
      label: Sender 3 Anzeigename
      name: Sender3Anzeigename
      required: true
      type: TEXT
      groupName: senderliste
    - description: Aktivierung Radiostream auf TuneIN
      label: Sprich Sender 4
      name: Sender4
      required: true
      type: TEXT
      groupName: senderliste
    - description: Sender Anzeigename
      label: Sender 4 Anzeigename
      name: Sender4Anzeigename
      required: true
      type: TEXT
      groupName: senderliste
    - description: Aktivierung Radiostream auf TuneIN
      label: Sprich Sender 5
      name: Sender5
      required: true
      type: TEXT
      groupName: senderliste
    - description: Sender Anzeigename
      label: Sender 5 Anzeigename
      name: Sender5Anzeigename
      required: true
      type: TEXT
      groupName: senderliste
    - description: Aktivierung Radiostream auf TuneIN
      label: Sprich Sender6
      name: Sender6
      required: true
      type: TEXT
      groupName: senderliste
    - description: Sende Anzeigename
      label: Sender 6 Anzeigename
      name: Sender6Anzeigename
      required: true
      type: TEXT
      groupName: senderliste
  parameterGroups:
    - name: alexa
      label: Alexa
    - name: player
      label: Playerkonfiguration
    - name: senderliste
      label: Senderliste

timestamp: Nov 10, 2022, 8:58:49 PM
component: f7-card
config:
  themeDark: =props.darkTheme
  style:
    height: auto
    border-radius: 20px
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: oh-image
            config:
              item: =props.albumArtItem
              action: photos
              actionPhotos: =[props.albumArtItem]
              actionPhotoBrowserConfig:
                theme: dark
              style:
                display: "=props.albumArtItem ? props.albumArtItem : 'none'"
                height: 80px
                width: 80px
                float: left
          - component: f7-block
            config:
              style:
                display: flex
                flex-direction: column
            slots:
              default:
                - component: Label
                  config:
                    text: "=items[props.artistItem].state ? items[props.artistItem].state : 'keine Information'"
                    class:
                      - margin-top
                    style:
                      overflow: hidden
                      white-space: nowrap
                      text-overflow: ellipsis
                - component: Label
                  config:
                    text: "=items[props.albumItem].state ? items[props.albumItem].state : 'keine Information'"
                    style:
                      font-size: 10px
                      overflow: hidden
                      white-space: nowrap
                      text-overflow: ellipsis
                - component: Label
                  config:
                    text: "=items[props.trackItem].state ? items[props.trackItem].state : 'keine Information'"
                    style:
                      font-size: 18px
                      font-weight: bold
                      overflow: hidden
                      white-space: nowrap
                      text-overflow: ellipsis
                - component: Label
                  config:
                    text: "=(props.trackProgressItem && props.trackTimeItem) ? items[props.trackProgressItem].state + ' / ' + items[props.trackTimeItem].state : ''"
                    style:
                      font-size: 12px
                      height: 20px
                      margin-top: 2px
                      color: gray
                - component: oh-player-controls
                  config:
                    item: =props.playerControlItem
                    color: green
                    visible: =!vars.showVolume
                    style:
                      margin: 0.5rem
                - component: oh-slider
                  config:
                    item: =props.volumeControlItem
                    color: blue
                    visible: =vars.showVolume === true
                    style:
                      margin-top: 1.3rem
          - component: f7-block
            config:
              style:
                position: absolute
                top: 138px
                width: 112px
                text-align: right
                display: flex
                flex-direction: row-reverse
                justify-content: center
            slots:
              default:
                - component: oh-link
                  config:
                    style:
                      margin: 0 0.5em
                    visible: =props.volumeControlItem !== undefined
                    iconF7: speaker_3_fill
                    iconSize: 18
                    color: "=(vars.showVolume) ? 'blue' : 'gray'"
                    round: true
                    action: variable
                    actionVariable: showVolume
                    actionVariableValue: =!(vars.showVolume === true)
                - component: oh-link
                  config:
                    style:
                      margin: 0 0.5em
                    visible: =props.musikanbieterItem !== undefined
                    iconF7: music_house_fill
                    iconSize: 18
                    color: gray
                    round: true
                    action: options
                    actionItem: =props.musikanbieterItem
                    tooltip: =items[props.musikanbieterItem].displayState || items[props.musikanbieterItem].state
                - component: oh-link
                  config:
                    style:
                      margin: 0 0.5em
                      color: var(--f7-card-text-color)
                      opacity: "=(items[props.powerItem].state === 'ON') ? 1 : 0.3"
                    visible: =props.powerItem !== undefined
                    iconF7: power
                    iconSize: 18
                    round: true
                    action: toggle
                    actionItem: =props.powerItem
                    actionCommand: ON
                    actionCommandAlt: OFF
    - component: oh-list
      config:
        accordionList: true
        class:
          padding-top: 5px 
        style:
          --f7-button-bg-color: var(--f7-card-bg-color)
          --f7-button-text-color: var(--f7-text-color)
          --f7-theme-color-rgb: var(--f7-color-blue-rgb)
          font-size: 15px
          height: auto
          text-align: center
      slots:
        default:
          - component: oh-list-item
            config:
              badge: =items['AlexaEchoDOTBuero_AnbieterName'].state
              badgeColor: gray
              icon: f7:bars
              textColor: gray
              size: 100px
              title: Senderliste
            slots:
              accordion:
                - component: oh-list-card
                  config:
                    accordionList: true
                    noBorder: true
                    noShadow: true
                    class:
                      - margin
                      - no-padding
                  slots:
                    default:
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: =props.aktivierung + "spiele " + props.Sender1 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender1Anzeigename
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: =props.aktivierung + "spiele " + props.Sender2 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender2Anzeigename
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: =props.aktivierung + "spiele " + props.Sender3 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender3Anzeigename
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: =props.aktivierung + "spiele " + props.Sender4 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender4Anzeigename
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: =props.aktivierung + "spiele " + props.Sender5 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender5Anzeigename
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state
                      - component: oh-button
                        config:
                          accordionList: true
                          action: command
                          actionCommand: =props.aktivierung + "spiele " + props.Sender6 + "auf tunein"
                          actionItem: AlexaEchoDOTBuero_Befehl
                          class:
                            - display-flex
                            - flex-direction-column
                            - align-items-center
                          text: =props.Sender6Anzeigename
                          color: blue
                          title: =items['AlexaEchoDOTBuero_AnbieterName'].state

Ginge wahrscheinlich alles etwas schöner und einfacher aber es läuft
Ursprünglich habe ich das Widget im Forum gefunden: https://community.openhab.org/t/multiro ... yer/110272

Gruß Lenschi

[neuling10]

Hallo @lenschi,

erstmals großes Lob und vielen Dank für Deine Arbeit
Das Widget deckt auch meine Anforderungen sehr gut ab. Ich möchte noch eine Erweiterung durchführen, um verschiedene Echo-Gruppen auswählen zu können, vorerst habe ich jedoch noch ein Problem mit der Aktualisierung von Echo Tunein Items:

Szenario:
Wenn ich zum Abspielen von Tunein Kanälen den Player via "Play-Dreieck" starte, geht das Symbol erstmal korrekterweise auf "Stop" und dann gleich wieder auf "Play". Der Tunein Sender startet dann kurz nach der obligatorischen Werbung wie gewünscht. Leider passt dann aber das Player-Icon nicht überein (Tunein Kanal wird abgespielt, Icon steht auf "Play" statt "Stop"). Die Items für Untertitel, Sender-Icon etc. werden auch nicht aktualisiert. Gleiches Problem, wenn ich den Tunein Kanal wechsle.
Betätige ich dann nochmals den Play Button, passt der Status aller Items wieder überein. Mit dem Widget dürfte das grundsätzlich nichts zu tun haben, denn die Echo Thing Channels haben ebenso nicht den korrekten Status.

Habt ihr ein ähnliches Problem mit den Tunein Items? Könnte es an der Werbeunterbrechung liegen, die vor dem Start des Tunein Radiosenders abgespielt wird?

Könnte man die Aktualisierung der Echo Items irgendwie "manuell" oder via Rule anstoßen, z.B. 10s nach Betätigung des Play Buttons?

Welches Abfrageintervall habt ihr im Amazonechocontrol Thing eingestellt? Bei mir macht es leider keinen Unterschied ob 10, 20 oder 30 Sekunden.

Noch eine weitere Frage:
Wozu nutzt du den "Power" Button? Was welches Item hast du mit dem "Power" Button verbunden?

Ich nutze derzeit übrigens OH 3.4.5

Grüße
neuling10

[neuling10]

Ich habe heute noch etwas recherchiert und getestet:
Alle Echo Items werden aktualisiert, sobald bei einem beliebigen verknüpftem Item auf "Save" geklickt wird:

Item_Save.JPG

Könnte das auf einen Bug bezüglich fehlgeschlagener automatischen Aktualisierung deuten? Könnte man alternativ den Klick auf den "Save" Button via Rule emulieren, z.B. alle 10 Sekunden Item "Save" auslösen, wenn ein Tunein Sender läuft? "Play" müsste man natürlich separat in einer Variable mittracken, da ja der Status der Medienwiedergabe nicht aktualisiert wird...