Hello,
I cannot get the text of my widget to wrap on the OH-Button.
See the latest button with text “HDMI Side” on it.
What am I missing?
uid: PhilipsTvRemote
tags: []
props:
parameters:
- context: item
description: The item to send the command to
label: Item
name: item
required: false
type: TEXT
groupName: items
- description: Type label to display on top of the remote (TV, Sat, Amp etc.)
label: Device Type
name: devicetype
required: false
type: TEXT
groupName: labels
- description: Command to power on/off
label: Power
name: power
required: false
type: TEXT
groupName: commands
- description: Command to increase volume
label: Volume Up
name: volumeup
required: false
type: TEXT
groupName: commands
- description: Command to decrease volume
label: Volume Down
name: volumedown
required: false
type: TEXT
groupName: commands
- description: Command to mute volume
label: Volume Mute
name: volumemute
required: false
type: TEXT
groupName: commands
- description: Command to switch one channel up
label: Channel Up
name: channelup
required: false
type: TEXT
groupName: commands
- description: Command to switch one channel down
label: Channel Down
name: channeldown
required: false
type: TEXT
groupName: commands
- description: Command to send 1
label: "1"
name: one
required: false
type: TEXT
groupName: commands
- description: Command to send 2
label: "2"
name: two
required: false
type: TEXT
groupName: commands
- description: Command to send 3
label: "3"
name: three
required: false
type: TEXT
groupName: commands
- description: Command to send 4
label: "4"
name: four
required: false
type: TEXT
groupName: commands
- description: Command to send 5
label: "5"
name: five
required: false
type: TEXT
groupName: commands
- description: Command to send 6
label: "6"
name: six
required: false
type: TEXT
groupName: commands
- description: Command to send 7
label: "7"
name: seven
required: false
type: TEXT
groupName: commands
- description: Command to send 8
label: "8"
name: eight
required: false
type: TEXT
groupName: commands
- description: Command to send 9
label: "9"
name: nine
required: false
type: TEXT
groupName: commands
- description: Command to send 0
label: "0"
name: zero
required: false
type: TEXT
groupName: commands
- description: Command to send Return
label: Return
name: return
required: false
type: TEXT
groupName: commands
- description: Command to send Home/Menu
label: Home/Menu
name: home
required: false
type: TEXT
groupName: commands
- description: Command to send OK/Enter
label: OK/Enter
name: ok
required: false
type: TEXT
groupName: commands
- description: Command to send Up
label: Arrow Up
name: up
required: false
type: TEXT
groupName: commands
- description: Command to send Left
label: Arrow Left
name: left
required: false
type: TEXT
groupName: commands
- description: Command to send Right
label: Arrow Right
name: right
required: false
type: TEXT
groupName: commands
- description: Command to send Down
label: Arrow Down
name: down
required: false
type: TEXT
groupName: commands
- description: Command to send Red
label: Red
name: red
required: false
type: TEXT
groupName: commands
- description: Command to send Green
label: Green
name: green
required: false
type: TEXT
groupName: commands
- description: Command to send Yellow
label: Yellow
name: yellow
required: false
type: TEXT
groupName: commands
- description: Command to send Blue
label: Blue
name: blue
required: false
type: TEXT
groupName: commands
- description: Command to send HDMI 1
label: HDMI 1
name: hdmi1
required: false
type: TEXT
groupName: commands
- description: Command to send HDMI 2
label: HDMI 2
name: hdmi2
required: false
type: TEXT
groupName: commands
- description: Command to send HDMI 3
label: HDMI 3
name: hdmi3
required: false
type: TEXT
groupName: commands
- description: Command to send HDMI Side
label: HDMI Side
name: hdmiSide
required: false
type: TEXT
groupName: commands
parameterGroups:
- name: items
label: Items to use
- name: labels
label: Labels to set
- name: commands
label: Commands to send
timestamp: Jun 8, 2021, 6:35:32 PM
component: f7-card
config:
style:
box-shadow: 2px 3px rgb(150,150,150)
background-color: rgb(192, 192, 192)
--f7-card-margin-horizontal: 0px
border-radius: 30px
width: 15rem
height: 40rem
slots:
default:
- component: oh-button
config:
bgColor: black
style:
position: absolute
left: 20px
top: 20px
width: 60px
height: 40px
border-radius: 12px
display: flex
iconF7: power
iconSize: 25
action: command
actionCommand: =props.power
actionItem: =props.item
- component: oh-link
config:
color: black
style:
font-size: 25px
position: absolute
left: 90px
top: 20px
width: 60px
height: 40px
display: flex
text: '=(props.devicetype) ? props.devicetype : "TV"'
- component: oh-button
config:
bgColor: black
style:
position: absolute
left: 160px
top: 20px
width: 60px
height: 40px
border-radius: 12px
display: flex
iconF7: speaker_slash
iconSize: 25
action: command
actionCommand: =props.volumemute
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 20px
top: 80px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 1
action: command
actionCommand: =props.one
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 90px
top: 80px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 2
action: command
actionCommand: =props.two
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 160px
top: 80px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 3
action: command
actionCommand: =props.three
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 20px
top: 130px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 4
action: command
actionCommand: =props.four
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 90px
top: 130px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 5
action: command
actionCommand: =props.five
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 160px
top: 130px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 6
action: command
actionCommand: =props.six
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 20px
top: 180px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 7
action: command
actionCommand: =props.seven
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 90px
top: 180px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 8
action: command
actionCommand: =props.eight
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 160px
top: 180px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: 9
action: command
actionCommand: =props.nine
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 20px
top: 230px
width: 60px
height: 40px
border-radius: 12px
display: flex
color: white
iconF7: house
iconSize: 25
action: command
actionCommand: =props.home
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 90px
top: 230px
width: 60px
height: 40px
border-radius: 12px
display: flex
text: "0"
action: command
actionCommand: =props.zero
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 160px
top: 230px
width: 60px
height: 40px
border-radius: 12px
display: flex
color: white
iconF7: arrow_uturn_left
iconSize: 25
action: command
actionCommand: =props.return
actionItem: =props.item
- component: f7-badge
config:
bgColor: black
style:
position: absolute
left: 40px
top: 290px
width: 160px
height: 160px
transform: rotate(45deg)
border-radius: 30%
z-index: 1
- component: oh-button
config:
color: white
bgColor: black
style:
font-size: 25px
position: absolute
left: 80px
top: 330px
width: 80px
height: 80px
border-radius: 50%
border: gray solid 1px
display: flex
z-index: 2
text: OK
action: command
actionCommand: =props.ok
actionItem: =props.item
- component: oh-button
config:
color: black
bgColor: black
style:
position: absolute
left: 20px
top: 285px
width: 50px
height: 40px
border-radius: 20%
z-index: 1
transform: skew(-45deg)
action: command
actionCommand: =props.volumeup
actionItem: =props.item
- component: oh-link
config:
color: white
style:
position: absolute
left: 35px
top: 290px
display: flex
z-index: 2
iconF7: speaker_3
iconSize: 25
action: command
actionCommand: =props.volumeup
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 100px
top: 285px
width: 40px
height: 40px
display: flex
z-index: 2
iconF7: arrowtriangle_up
iconSize: 35
action: command
actionCommand: =props.up
actionItem: =props.item
- component: oh-button
config:
color: black
bgColor: black
style:
position: absolute
left: 170px
top: 285px
width: 50px
height: 40px
border-radius: 20%
z-index: 1
transform: skew(45deg)
action: command
actionCommand: =props.channelup
actionItem: =props.item
- component: oh-link
config:
color: white
style:
font-size: 20px
position: absolute
left: 178px
top: 290px
display: flex
z-index: 2
text: CH+
action: command
actionCommand: =props.channelup
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 35px
top: 350px
width: 40px
height: 40px
display: flex
z-index: 2
iconF7: arrowtriangle_left
iconSize: 35
action: command
actionCommand: =props.left
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 165px
top: 350px
width: 40px
height: 40px
display: flex
z-index: 2
iconF7: arrowtriangle_right
iconSize: 35
action: command
actionCommand: =props.right
actionItem: =props.item
- component: oh-button
config:
color: black
bgColor: black
style:
position: absolute
left: 20px
top: 415px
width: 50px
height: 40px
border-radius: 20%
z-index: 1
transform: skew(45deg)
action: command
actionCommand: =props.volumedown
actionItem: =props.item
- component: oh-link
config:
color: white
style:
position: absolute
left: 35px
top: 425px
display: flex
z-index: 2
iconF7: speaker_1
iconSize: 25
action: command
actionCommand: =props.volumedown
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 100px
top: 415px
width: 40px
height: 40px
display: flex
z-index: 2
iconF7: arrowtriangle_down
iconSize: 35
action: command
actionCommand: =props.down
actionItem: =props.item
- component: oh-button
config:
color: black
bgColor: black
style:
position: absolute
left: 170px
top: 415px
width: 50px
height: 40px
border-radius: 20%
z-index: 1
transform: skew(-45deg)
action: command
actionCommand: =props.channeldown
actionItem: =props.item
- component: oh-link
config:
color: white
style:
font-size: 20px
position: absolute
left: 178px
top: 420px
display: flex
z-index: 2
text: CH-
action: command
actionCommand: =props.channeldown
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 25px
top: 470px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: red
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.red
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 75px
top: 470px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: green
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.green
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 125px
top: 470px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: yellow
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.yellow
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
position: absolute
left: 175px
top: 470px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: blue
iconF7: circle_fill
iconSize: 25
action: command
actionCommand: =props.blue
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
font-size: 10px
position: absolute
left: 25px
top: 520px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: white
text: HDMI 1
action: command
actionCommand: =props.hdmi1
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
font-size: 10px
position: absolute
left: 75px
top: 520px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: white
text: HDMI 2
action: command
actionCommand: =props.hdmi2
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
font-size: 10px
position: absolute
left: 125px
top: 520px
width: 40px
height: 40px
border-radius: 12px
display: flex
color: white
text: HDMI 3
action: command
actionCommand: =props.hdmi3
actionItem: =props.item
- component: oh-button
config:
color: white
bgColor: black
style:
font-size: 10px
position: absolute
left: 175px
top: 520px
width: 40px
height: 40px
border-radius: 12px
display: flex
flex-wrap: wrap
color: white
text: HDMI Side
action: command
actionCommand: =props.hdmiSide
actionItem: =props.item
