Seite 1 von 2
UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 14:10
von lenschith
Hallo zusammen,
ich bin gerade dabei mir ein Widget zusammen zu basteln für TuneIN Radio. Aber irgendwie scheitere ich total. Ich habe nun schon einiges recherchiert aber weiter gekommen bin ich nicht.
Ich möchte mir eine Liste in der UI anzeigen lassen mit der Auswahl an verschiedenen Radiosendern. So wie ich das jetzt verstehe muss ich da einen Command hinsenden aber mir ist nicht klar wie das geht. Kann mich da jemand unterstützen?
Ich dachte mir ich sende den Command irgendwie mit aber da mache ich 100%ig wieder mal was falsch.
actionItem: =(AlexaEchoDOTBuero_MusikSprachbefehl.events).sendCommand("spiele radio bob unplugged auf TuneIn")
Code: Alles auswählen
uid: TuneIn Radio
tags:
- Alexa
- Music
- TEST
- lenschi.th
props:
parameters:
- description: The Label at the top of the card
label: Friendly name Lounge
name: title
required: true
type: TEXT
- context: item
label: Musik Title
name: Musik_Title
required: true
type: TEXT
- context: item
label: Sender
name: Sender
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 5, 2022, 10:41:43 PM
component: oh-list-card
config:
accordionList: true
class:
- no-padding
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
title: =props.title
slots:
default:
- component: oh-list-item
config:
badge: " Radio "
badgeColor: red
icon: f7:music_note_list
textColor: blue
title: =items[props.Musik_Title].state
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
class:
- margin
- no-padding
slots:
default:
- component: oh-button
config:
accordionList: true
action: command
actionCommand: 100
actionItem: =(items[props.Sender.events].sendCommand("spiele radio bob wacken auf TuneIn"))
class:
- display-flex
- flex-direction-column
- align-items-center
text: Wacken Radio by RADIO BOB!
title: Wacken Radio by RADIO BOB!
- component: oh-button
config:
accordionList: true
action: command
actionCommand: 1
actionItem: =(AlexaEchoDOTBuero_MusikSprachbefehl.events).sendCommand("spiele radio bob unplugged auf TuneIn")
class:
- display-flex
- flex-direction-column
- align-items-center
text: RADIO BOB! Unplugged
title: RADIO BOB! Unplugged
Danke
Gruß Lenschi
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 15:15
von scotty
Verstehe ich nicht so ganz. Ich sage einfach "Alexa - spiele Radio BOB" dann läuft der Sender, aber auch jeder andere. Da benötige ich weder ein Widget noch eine Liste. Die würde den Startvorgang doch nur unnötig verzögern.
Welches Binding hast du denn installiert?
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 16:08
von lenschith
da hast du recht, allerdings habe ich auch eine Alexa die nicht ständig lauscht und da dachte ich mir das wäre eine Möglichkeit dennoch einen Sender zu wählen um den Radio nutzen zu können.
ich nutze das Amazon Echo Control Binding von openhab.
Gruß Lenschi
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 18:03
von peter-pan
Ich hab mal auf die Schnelle ein paar Änderungen an deinem Widget vorgenommen. Damit kannst du "radio bob" oder was auch immer eingeben und auch wieder ausschalten.
Code: Alles auswählen
uid: TuneIn Radio
tags:
- Alexa
- Music
- TEST
- lenschi.th
props:
parameters:
- description: The Label at the top of the card
label: Friendly name Lounge
name: title
required: true
type: TEXT
- context: item
label: Musik Title
name: Musik_Title
required: true
type: TEXT
- description: Rundfunkanstalt
label: Sender
name: Sender
required: true
type: TEXT
parameterGroups: []
timestamp: Nov 5, 2022, 10:41:43 PM
component: oh-list-card
config:
accordionList: true
class:
- no-padding
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
title: =props.title
slots:
default:
- component: oh-list-item
config:
badge: " Radio "
badgeColor: red
icon: f7:music_note_list
textColor: blue
title: =items[props.Musik_Title].state
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
class:
- margin
- no-padding
slots:
default:
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="alexa spiel " + props.Sender
actionItem: DotPeter_TextCommand
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender
title: Das ist SWR
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="alexa aus"
actionItem: DotPeter_TextCommand
class:
- display-flex
- flex-direction-column
- align-items-center
text: Alexa ausschalten
title: RADIO BOB! Unplugged
Musiktitel geht aber nicht (beziehungsweise habe ich nicht probiert. Wüsste auch nicht wie das bei einem Radio-Sender gehen sollte.
radio.jpg
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 18:19
von scotty
Das Binding nutze ich gar nicht, sondern die Applikation Alexa Voice Control. Jedoch kenne ich Vor- oder Nachteile aktuell allerdings nicht.
Mich interessiert aber deine Alexa, die nicht ständig lauscht. Erfolgt dann eine Reaktion nur auf bestimmte Befehle, oder wie funktioniert das?
Kannst du das mal kurz beschreiben?
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 19:20
von lenschith
@Peter danke für deine Unterstützung so klappt das, und ja der Titel wird angezeigt.
Screenshot 2022-11-09 191736.png
Hier mein der Code falls es jemanden interessiert.
Code: Alles auswählen
uid: TuneIn Radio
tags:
- Alexa
- TuneIn
- Music
- lenschi.th
props:
parameters:
- description: The Label at the top of the card
label: Friendly name Lounge
name: title
required: true
type: TEXT
- context: item
label: Musik Title
name: Musik_Title
required: true
type: TEXT
- 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 9, 2022, 7:14:52 PM
component: oh-list-card
config:
accordionList: true
class:
- no-padding
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
title: =props.title
slots:
default:
- component: oh-list-item
config:
badge: =items['AlexaEchoDOTBuero_Untertitel1'].state
badgeColor: gray
icon: f7:music_house_fill
textColor: black
title: =items[props.Musik_Title].state
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
class:
- margin
- no-padding
slots:
default:
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender1
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender1
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender2
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender2
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender3
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender3
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender4
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender4
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender5
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender5
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender6
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender6
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy aus"
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: Echo ausschalten
title: Echo aus
@Scotty nein ich kann den Echo nicht mit einem Codewort aktivieren dort ist einfach das Mikro abgeschaltet und muss manuell durch Betätigung aktiviert werden. Ich möchte nicht das die im Büro immer los labert wenn ich gerade am Telefonieren bin.
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 19:44
von scotty
zum Thema "taube Alexa": warum schwer, wenn es auch einfach geht
Das funktioniert vermutlich deshalb so gut, weil das Gerät in greifbarer Nähe ist. Bei mir ist die Entfernung etwas größer, deshalb für mich leider keine Alternative.
Im Übrigen freut es mich für dich, dass dir Peter helfen konnte. Es müsste noch viel mehr Anwender geben, die ihre Erfahrung teilen.
PS. Der Titel oben links und du im Büro
...Kopfkino....
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 21:50
von lenschith
ich bin in dieser ganzen Widget Geschichte überhaupt nicht fit und komm mir hin und wieder sehr dämlich vor wenn ich mit so banalen Fragen ankomme. Aber letzten Endes macht es einfach Spaß da dran rum zu basteln.
Da komm ich auch schon gleich mit einem nächsten Problem um die Ecke. Ich würde jetzt gerne an einen Player die Auswahlliste anhängen. Aber ich bekomme das nicht gebacken das sich das so verhält wie es soll. Gibts denn da irgendwo Tutorials um das etwas besser zu verstehen.
Ich hab das jetzt so angebaut aber das schaut und verhält sich einfach scheiße. Wie kann ich so was angehen?
Code: Alles auswählen
- component: oh-list-card
config:
accordionList: true
class:
- no-padding
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
title: =props.title
slots:
default:
- component: oh-list-item
config:
badge: TuneIN Radio
badgeColor: gray
icon: f7:bars
textColor: black
title: Senderauswahl
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noShadow: true
noBorder: false
class:
- margin
- no-padding
slots:
default:
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender1
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender1
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
So schaut dann das ganze Script aus
Code: Alles auswählen
uid: Amazon Player
tags:
- alexa
- music
- amazon
- tunein
- 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 9, 2022, 9:20:45 PM
component: f7-card
config:
themeDark: =props.darkTheme
style:
height: 220px
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: oh-list-card
config:
accordionList: true
class:
- no-padding
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
title: =props.title
slots:
default:
- component: oh-list-item
config:
badge: TuneIN Radio
badgeColor: gray
icon: f7:bars
textColor: black
title: Senderauswahl
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noShadow: true
noBorder: false
class:
- margin
- no-padding
slots:
default:
- component: oh-button
config:
accordionList: true
action: command
actionCommand: ="ziggy spiel " + props.Sender1
actionItem: AlexaEchoDOTBuero_Befehl
class:
- display-flex
- flex-direction-column
- align-items-center
text: =props.Sender1
title: =items['AlexaEchoDOTBuero_Untertitel1'].state
- 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
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 22:38
von scotty
Besser wäre es, wenn du für das zweite Problem ein neuen Thread aufmachst. Dann kann jeder über das Thema erkennen, worum es geht.
Re: UI Widget Amazon Echo TuneIN
Verfasst: 9. Nov 2022 23:31
von peter-pan
lenschith hat geschrieben: ↑9. Nov 2022 21:50
ich bin in dieser ganzen Widget Geschichte überhaupt nicht fit und komm mir hin und wieder sehr dämlich vor wenn ich mit so banalen Fragen ankomme. Aber letzten Endes macht es einfach Spaß da dran rum zu basteln.
Da geht's mir so wie dir. Ich weiss jetzt auch leider nicht auf was du genau hinaus willst und wozu du den Player für 'ne Alexa brauchst.
Ich habe bei mir hier 3 Sonos-Boxen und die steuere ich über ein "teilweise" modifizierten Player. Ich stelle den Yaml-Code mal hier rein. Vielleicht kannst du damit was anfangen und ein paar Schnipsel verwenden:
Yaml-Code Sonos-Player:
Code: Alles auswählen
uid: Sonos_Player_flex_V4
tags:
- flexible Hintergründe
- layout-changes peter-pan
props:
parameters:
- default: "350"
description: Breite des Widgets in px (default:350)
label: Widget Breite
name: size
required: false
type: TEXT
- default: soundvolume
description: Icon Aufstellungsort/Location-Header (default "soundvolume")
label: Icon Header
name: iconLocation
required: false
type: TEXT
- default: Der beste Platz ist immer noch an der Theke 😜🤪
description: Aufstellungsort/Raum (default "Der beste Platz ist immer noch an der Theke 😜🤪")
label: (optional) Aufstellungsort
name: speakerLocation
required: false
type: TEXT
- default: "linear-gradient(to bottom, #6fa8dc 0%, #ffe74c 100%)"
description: Farbe Aufstellungsort/Raum (default:"linear-gradient(to bottom,
label: (optional) Farbe/Color
name: colorLocation
required: false
type: TEXT
- default: lightblue
description: Farbe Hintergrund (default:lightblue)
label: (optional) Farbe/Color
name: colorBackground
required: false
type: TEXT
- default: red
description: Farbe Titel/Album/Artist (default:red)
label: (optional) Farbe/Color
name: textcolor1
required: false
type: TEXT
- default: blue
description: Farbe Titel/Album/Artist (default:blue)
label: (optional) Farbe/Color Bezeichnung
name: textcolor2
required: false
type: TEXT
- context: item
description: item to display the title
label: item title
name: itemTitle
required: true
type: TEXT
- context: item
description: (optional) item to display the album
label: (optional) item album
name: itemAlbum
required: false
type: TEXT
- context: item
description: (optional) item to display the artist
label: (optional) item artist
name: itemArtist
required: false
type: TEXT
- context: item
description: (optional) item to display a cover image
label: (optional) item cover image
name: itemCover
required: false
type: TEXT
- context: item
description: (optional) item to control the player
label: (optional) item player
name: itemPlayer
required: false
type: TEXT
- context: item
description: (optional) Mute-Button
label: (optional) Mute Button
name: itemMute
required: false
type: TEXT
- context: item
description: (optional) item to control the volume
label: (optional) item volume
name: itemVolume
required: false
type: TEXT
- context: item
description: (optional) item for shuffle option
label: (optional) item shuffle
name: itemShuffle
required: false
type: TEXT
- context: item
description: (optional) item for repeat option
label: (optional) item repeat
name: itemRepeat
required: false
type: TEXT
- context: item
description: (optional) item of Favorite-List
label: (optional) Favorite List
name: itemFavorite
required: false
type: TEXT
- default: Favoriten
description: (optional) Titel Favorite-List (default - Favoriten)
label: (optional) Titel Favoritenliste
name: titleFavorite
required: false
type: TEXT
- context: item
description: (optional) item of Radio-List
label: (optional) RadioStations List
name: itemRadio
required: false
type: TEXT
- default: Radiostationen
description: (optional) Titel Radio-List (default - Radiostationen)
label: (optional) Titel Radio-List
name: titleRadio
required: false
type: TEXT
- context: item
description: (optional) item of Play-List
label: (optional) Play List
name: itemPlaylist
required: false
type: TEXT
- default: PlayLists
description: (optional) Titel Play-List (default . Playlists)
label: (optional) Titel Play-List
name: titlePlay
required: false
type: TEXT
- description: (optional) Name of the zone player
label: (optional) Zone name
name: propZoneName
required: false
type: TEXT
advanced: true
- context: item
description: (optional) item of the zone coordinator channel
label: (optional) item coordinator
name: itemCoordinator
required: false
type: TEXT
advanced: true
- description: (optional) speaker array like this -> ["<zoneName>", "<player>", "<volume>", "<coordinator>"]["<zoneName2>", "<player2>", "<volume2>", "<coordinator2>"]
label: (optional) speaker array
name: propZoneArray
required: false
type: TEXT
advanced: true
- context: item
description: (optional) item for the sonos mulltiroom rule. e.g. Sonos_Multiroom_Control
label: (optional) item to control the multiroom control rule
name: itemSonosRule
required: false
type: TEXT
advanced: true
parameterGroups: []
timestamp: Oct 7, 2022, 5:35:52 PM
component: f7-card
config:
border: no
style:
--f7-card-box-shadow: none
--playerWidth: 190px
background: '=(props.colorBackground) ? props.colorBackground : "linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"'
background-position: down
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
width: '=(props.size) ? (props.size) * 1.23 + "px" : "400px"'
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-row
config:
style:
align-items: stretch
background: =props.colorLocation
border-radius: var(--f7-card-expandable-border-radius)
color: '=(props.textcolor1) ? props.textcolor1 : "blue"'
height: 100px
justify-content: center
margin-left: 0px
width: 100%
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
height: 36px
justify-content: center
margin-top: 35px
slots:
default:
- component: oh-icon
config:
height: 60px
icon: =props.iconLocation
style:
left: 10px
margin-left: 10px
position: absolute
- component: Label
config:
style:
display: flex
font-weight: 501
fontSize: =(Number(props.size)/17) +'px'
justify-content: center
left: 30px
overflow: hidden
position: relative
white-space: wrap
width: =(Number(props.size)-30) +'px'
text: =props.speakerLocation
- component: f7-row
config:
style:
color: '=(props.textcolor2) ? props.textcolor2 : "green"'
visible: "=(items[props.itemTitle].state) ? true : false"
slots:
default:
- component: Label
config:
class:
- display-flex
style:
fontSize: =(Number(props.size)/19) +'px'
margin-left: 5px
margin-top: 15px
text: "Title: "
- component: f7-row
config:
class:
- justify-content-center
style:
color: '=(props.textcolor1) ? props.textcolor1 : "blue"'
height: 30px
position: relative
top: 0px
visible: "=(items[props.itemTitle].state) ? true : false"
slots:
default:
- component: Label
config:
style:
fontSize: =(Number(props.size)/15) +'px'
margin-left: 5px
overflow: hidden
white-space: nowrap
text: =items[props.itemTitle].displayState || items[props.itemTitle].state
width: 80%
- component: f7-row
config:
style:
color: '=(props.textcolor2) ? props.textcolor2 : "green"'
visible: "=(items[props.itemAlbum].state) ? true : false"
slots:
default:
- component: Label
config:
class:
- display-flex
style:
fontSize: =(Number(props.size)/18) +'px'
margin-left: 5px
text: "Album: "
- component: f7-row
config:
class:
- justify-content-center
style:
color: '=(props.textcolor1) ? props.textcolor1 : "blue"'
height: 30px
position: relative
top: 0px
visible: "=(items[props.itemAlbum].state) ? true : false"
slots:
default:
- component: Label
config:
style:
fontSize: =(Number(props.size)/15) +'px'
margin-left: 5px
overflow: hidden
white-space: nowrap
text: =items[props.itemAlbum].displayState || items[props.itemAlbum].state
- component: f7-row
config:
style:
color: '=(props.textcolor2) ? props.textcolor2 : "green"'
visible: "=(items[props.itemArtist].state) ? true : false"
slots:
default:
- component: Label
config:
class:
- display-flex
style:
fontSize: =(Number(props.size)/18) +'px'
margin-left: 5px
text: "Artist: "
- component: f7-row
config:
class:
- justify-content-center
style:
color: '=(props.textcolor1) ? props.textcolor1 : "green"'
height: 30px
position: relative
top: 0px
visible: "=(items[props.itemArtist].state) ? true : false"
slots:
default:
- component: Label
config:
style:
fontSize: =(Number(props.size)/15) +'px'
overflow: hidden
white-space: nowrap
text: =items[props.itemArtist].displayState || items[props.itemArtist].state
- component: f7-row
config:
class:
- margin-vertical
- justify-content-center
visible: "=(props.itemCover) ? true : false"
slots:
default:
- component: oh-image
config:
item: =props.itemCover
style:
width: 70%
- component: f7-row
config:
class:
- justify-content-space-around
- display-flex
- align-items-center
- align-content-stretch
- margin-top
style:
position: relative
top: +5px
visible: "=(props.itemPlayer) ? true : false"
slots:
default:
- component: f7-icon
config:
color: '=(items[props.itemShuffle].state === "ON") ? "green" : ""'
f7: '=(props.itemShuffle) ? "shuffle" : ""'
size: 20
style:
left: +1%
position: relative
slots:
default:
- component: oh-button
config:
action: command
actionCommand: '=(items[props.itemShuffle].state !== "ON") ? "ON" : "OFF"'
actionItem: =props.itemShuffle
style:
height: 100%
position: absolute
top: 0px
width: 100%
- component: oh-player-item
config:
class:
- display-flex
- margin-
- align-content-stretch
- align-items-center
- justify-content-space-around
item: =props.itemPlayer
showRewindFFward: false
style:
width: var(--playerWidth)
- component: f7-icon
config:
color: '=(items[props.itemRepeat].state === "ALL") ? "green" : (items[props.itemRepeat].state === "ONE") ? "green" : ""'
f7: '=(props.itemRepeat) ? (items[props.itemRepeat].state === "ALL") ? "repeat" : (items[props.itemRepeat].state === "ONE") ? "repeat_1" : "repeat" : ""'
size: 20
style:
left: -1%
position: relative
slots:
default:
- component: oh-button
config:
action: command
actionCommand: '=(items[props.itemRepeat].state === "ALL") ? "ONE" : (items[props.itemRepeat].state === "ONE") ? "OFF": "ALL"'
actionItem: =props.itemRepeat
style:
height: 100%
position: absolute
top: 0px
width: 100%
- component: f7-row
config:
class:
- justify-content-space-around
- display-flex
- align-items-center
- align-content-stretch
visible: "=(props.itemVolume) ? true : false"
slots:
default:
- component: f7-card
config:
bg-color: =props.colorBackground
class: margin display-flex align-items-center
noShadow: false
style:
fontSize: 20px
min-width: calc(100% - 20px)
slots:
default:
- component: f7-icon
config:
class: margin-horizontal margin
f7: "=items[props.itemMute].state == 'ON' ? 'speaker_slash' : 'speaker_3'"
size: 20
- component: oh-button
config:
action: command
actionCommand: "=items[props.itemMute].state == 'ON' ? 'OFF' : 'ON'"
actionItem: =props.itemMute
style:
height: 100%
position: absolute
top: 0px
width: 100%
- component: oh-slider
config:
class:
- display-flex
- margin-horizontal
- align-content-stretch
- align-items-center
- justify-content-space-around
color: blue
item: =props.itemVolume
label: true
max: 100
min: 0
scale: true
scaleSteps: 5
style:
height: +40px
width: calc(100% - 35px)
unit: "%"
- component: f7-button
config:
class: '=(props.propZoneArray) ? "" : "display-none"'
popoverOpen: .popoverVolume
style:
height: 100%
position: absolute
top: 0px
width: 100%
slots:
default:
- component: f7-popover
config:
class: popoverVolume
style:
min-width: 350px
slots:
default:
- component: oh-repeater
config:
containerClasses:
- display-flex
- flex-direction-column
for: zoneVolume
in: =props.propZoneArray.split("]")
slots:
default:
- component: f7-card
config:
class: '=(loop.zoneVolume.split("\"")[1] && items[loop.zoneVolume.split("\"")[7]].state === items[props.itemCoordinator].state) ? "display-flex flex-direction-row justify-content-flex-start align-items-center" : "display-none"'
style:
height: 40px
slots:
default:
- component: Label
config:
class:
- margin-left
style:
fontSize: 20px
text: =(loop.zoneVolume.split("\"")[1])
- component: oh-slider
config:
class:
- display-flex
- margin
- align-content-stretch
- align-items-center
item: =(loop.zoneVolume.split("\"")[5])
label: true
min: 0
style:
height: +40px
width: calc(100% - 40%)
- component: f7-row
config:
class: '=(props.propZoneName && props.itemPlayer) ? "justify-content-space-around align-items-center align-content-stretch" : "display-none"'
style:
height: 50px
position: relative
top: -26px
slots:
default:
- component: f7-card
config:
bg-color: =props.colorBackground
class: display-flex align-items-center
noShadow: true
style:
fontSize: 20px
min-width: 130px
slots:
default:
- component: f7-icon
config:
class: margin
f7: hifispeaker
size: 30
- component: Label
config:
class: margin-right
style:
fontSize: 20px
text: =props.propZoneName
- component: f7-icon
config:
class: margin-right
f7: '=(items[props.itemPlayer].state === "PLAY") ? "chart_bar_alt_fill" : ""'
size: 20
- component: f7-button
config:
class: '=(props.propZoneArray) ? "" : "display-none"'
popoverOpen: .popoverPlayer
style:
height: 100%
position: absolute
top: 0px
width: 100%
slots:
default:
- component: f7-popover
config:
class: popoverPlayer
style:
min-width: 280px
slots:
default:
- component: oh-repeater
config:
containerClasses:
- display-flex
- flex-direction-column
for: zoneSpeaker
in: =props.propZoneArray.split("]")
slots:
default:
- component: f7-card
config:
class: '=(loop.zoneSpeaker.split("\"")[1]) ? "display-flex flex-direction-row align-items-center" : "display-none"'
style:
height: 40px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: '=(items[loop.zoneSpeaker.split("\"")[7]].state === items[props.itemCoordinator].state) ? "Remove:" + loop.zoneSpeaker.split("\"")[1] + "" : "Add:" + loop.zoneSpeaker.split("\"")[1] + "@" + props.propZoneName'
actionItem: =props.itemSonosRule
style:
height: 100%
position: absolute
top: 0px
width: 100%
- component: f7-col
config:
class: margin display-flex flex-direction-row align-items-center
slots:
default:
- component: f7-icon
config:
f7: '=(items[loop.zoneSpeaker.split("\"")[7]].state === items[props.itemCoordinator].state) ? "checkmark_alt_circle_fill" : "circle"'
- component: Label
config:
class: margin-left
style:
fontSize: 20px
text: =loop.zoneSpeaker.split("\"")[1]
- component: f7-col
config:
class: margin align-items-center
slots:
default:
- component: f7-icon
config:
f7: '=(items[loop.zoneSpeaker.split("\"")[3]].state === "PLAY") ? "chart_bar_alt_fill" : ""'
- component: f7-list
config:
accordionList: true
slots:
default:
- component: oh-list-item
config:
action: options
actionItem: =props.itemFavorite
listButton: true
title: =props.titleFavorite
visible: "=props.itemFavorite ? true : false"
- component: oh-list-item
config:
action: options
actionItem: =props.itemRadio
listButton: true
title: =props.titleRadio
visible: "=props.itemRadio ? true : false"
- component: oh-list-item
config:
action: options
actionItem: =props.itemPlaylist
listButton: true
title: =props.titlePlay
visible: "=props.itemPlaylist ? true : false"
Yaml-Code Widget Eingabe:
Code: Alles auswählen
component: widget:Sonos_Player_flex_V4
config:
colorBackground: "radial-gradient(circle, lightgreen, yellow, lightblue 20%, #6fa8dc 60% ,#ffe74c 95%)"
iconLocation: sonos_play1
itemAlbum: AZ_Sonos_CurrentAlbum
itemArtist: AZ_Sonos_CurrentArtist
itemCover: AZ_Sonos_CoverAlbum
itemFavorite: AZ_Sonos_Favorite
itemMute: AZ_Sonos_Mute
itemPlayer: AZ_Sonos_Control
itemPlaylist: AZ_Sonos_PlayPlaylist
itemRadio: AZ_Sonos_Radio
itemRepeat: AZ_Sonos_Repeat
itemShuffle: AZ_Sonos_Shuffle
itemTitle: AZ_Sonos_CurrentTitle
itemVolume: AZ_Sonos_Volume
size: "280"
speakerLocation: Sonos Play 1 Arbeitszimmer
textcolor1: blue
textcolor2: red
und so sieht das Ganze dann auf einer Seite aus:
sonos1.jpg