Jeff_Smart
(Jeff Smart)
December 2, 2022, 10:28am
1
Hello All,
Platform information:
Hardware: Rasperry Pi
openHAB version: 3.4.0
I have created the following widget for a remote contrl. It is based on Remote Control Widget
How can I animate one button so that when I press it (e.g. mouse down) it looks like a real button, i.e. it appears pressed in?
Thanks and greetings Holger
uid: Argon Audio Remote Widget
tags: []
props:
parameters:
- context: item
description: The item to send the command to
label: Item
name: item
required: false
type: TEXT
groupName: items
- 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 switch to source bluetooth
label: Source BT
name: source_bt
required: false
type: TEXT
groupName: commands
- description: Command to switch to source TV
label: Source TV
name: source_tv
required: false
type: TEXT
groupName: commands
- description: Command to switch to source PC
label: Source PC
name: source_pc
required: false
type: TEXT
groupName: commands
parameterGroups:
- name: items
label: Items to use
- name: commands
label: Commands to send
timestamp: Dec 2, 2022, 10:29:50 AM
component: f7-card
config:
style:
box-shadow: 2px 3px rgb(150,150,150)
background-color: rgb(50,50,50)
--f7-card-margin-horizontal: 0px
border-radius: 30px
left: 0px
width: 280px
height: 650px
slots:
default:
- component: oh-link
config:
color: yellow
style:
font-size: 30px
position: absolute
left: 0px
top: 5px
width: 280px
height: 40px
display: flex
text: Volume
- component: oh-button
config:
color: yellow
bgColor: gray
style:
position: absolute
left: 40px
top: 40px
width: 80px
height: 80px
border-radius: 50%
display: flex
iconF7: arrowtriangle_up_filled
iconSize: 50
action: command
actionCommand: =props.volumeup
actionItem: =props.item
- component: oh-button
config:
color: yellow
bgColor: gray
style:
position: absolute
left: 160px
top: 40px
width: 80px
height: 80px
border-radius: 50%
display: flex
iconF7: arrowtriangle_down_filled
iconSize: 50
action: command
actionCommand: =props.volumedown
actionItem: =props.item
- component: oh-link
config:
color: yellow
style:
font-size: 30px
position: absolute
left: 0px
top: 120px
width: 280px
height: 40px
display: flex
text: Source
- component: oh-button
config:
color: black
bgColor: yellow
style:
font-size: 26px
font-weight: bold
position: absolute
left: 90px
top: 160px
width: 100px
height: 80px
border-radius: 12px
display: flex
flex-wrap: wrap
white-space: normal
line-height: 15px
text: BT
action: command
actionCommand: =props.source_bt
actionItem: =props.item
- component: oh-button
config:
color: black
bgColor: yellow
style:
font-size: 26px
font-weight: bold
position: absolute
left: 90px
top: 270px
width: 100px
height: 80px
border-radius: 12px
display: flex
flex-wrap: wrap
white-space: normal
line-height: 15px
text: TV
action: command
actionCommand: =props.source_tv
actionItem: =props.item
- component: oh-button
config:
color: black
style:
font-size: 26px
font-weight: bold
position: absolute
left: 90px
top: 380px
width: 100px
height: 80px
border-radius: 12px
display: flex
flex-wrap: wrap
white-space: normal
line-height: 15px
background: '=(items[props.item].state === "ON") ? "lightgreen" : "yellow"'
text: PC
action: command
actionCommand: =props.source_pc
actionItem: =props.item
- component: oh-link
config:
color: white
style:
font-size: 60px
font-style: bold
position: absolute
left: 0px
top: 500px
width: 280px
height: 0px
display: flex
text: Argon
- component: oh-link
config:
color: yellow
style:
font-size: 20px
position: absolute
left: 0px
top: 560px
width: 280px
height: 20px
text: Argon Audio
- component: oh-link
config:
color: yellow
style:
font-size: 20px
position: absolute
left: 0px
top: 600px
width: 280px
height: 10px
text: Remote Control System
JustinG
(JustinG)
December 2, 2022, 3:19pm
2
The most effective way to do this will be to use css. You’ll need to use the stylesheet
property to directly inject css into the widget (search the forums for “stylesheet”, you’ll find plenty of examples). You’re looking to use a selector with the active
pseudo-class:
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
and most devs use the box-shadow
style with the inset
property as a shortcut to getting a pressed-in look.
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Jeff_Smart
(Jeff Smart)
December 2, 2022, 8:36pm
3
@JustinG thanks for the tips.
My solution is as follows.
uid: Argon Audio Remote Widget
tags: []
props:
parameters:
- context: item
description: The item to send the command to
label: Item
name: item
required: false
type: TEXT
groupName: items
- 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 switch to source bluetooth
label: Source BT
name: source_bt
required: false
type: TEXT
groupName: commands
- description: Command to switch to source TV
label: Source TV
name: source_tv
required: false
type: TEXT
groupName: commands
- description: Command to switch to source PC
label: Source PC
name: source_pc
required: false
type: TEXT
groupName: commands
parameterGroups:
- name: items
label: Items to use
- name: commands
label: Commands to send
timestamp: Dec 2, 2022, 9:16:13 PM
component: f7-card
config:
style:
box-shadow: 2px 3px rgb(150,150,150)
background-color: rgb(50,50,50)
--f7-card-margin-horizontal: 0px
border-radius: 30px
left: 0px
width: 280px
height: 650px
stylesheet: >
.button-style {
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
} .button-style:active {
box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25);
}
slots:
default:
- component: oh-link
config:
color: yellow
style:
font-size: 30px
position: absolute
left: 0px
top: 5px
width: 280px
height: 40px
display: flex
text: Volume
- component: oh-button
config:
class:
- button-style
color: yellow
bgColor: gray
style:
position: absolute
left: 40px
top: 40px
width: 80px
height: 80px
border-radius: 50%
display: flex
iconF7: arrowtriangle_up_filled
iconSize: 50
action: command
actionCommand: =props.volumeup
actionItem: =props.item
- component: oh-button
config:
class:
- button-style
color: yellow
bgColor: gray
style:
position: absolute
left: 160px
top: 40px
width: 80px
height: 80px
border-radius: 50%
display: flex
iconF7: arrowtriangle_down_filled
iconSize: 50
action: command
actionCommand: =props.volumedown
actionItem: =props.item
- component: oh-link
config:
color: yellow
style:
font-size: 30px
position: absolute
left: 0px
top: 120px
width: 280px
height: 40px
display: flex
text: Source
- component: oh-button
config:
class:
- button-style
color: black
bgColor: yellow
style:
font-size: 26px
font-weight: bold
position: absolute
left: 90px
top: 160px
width: 100px
height: 80px
border-radius: 12px
display: flex
flex-wrap: wrap
white-space: normal
line-height: 15px
text: BT
action: command
actionCommand: =props.source_bt
actionItem: =props.item
- component: oh-button
config:
class:
- button-style
color: black
bgColor: yellow
style:
font-size: 26px
font-weight: bold
position: absolute
left: 90px
top: 270px
width: 100px
height: 80px
border-radius: 12px
display: flex
flex-wrap: wrap
white-space: normal
line-height: 15px
text: TV
action: command
actionCommand: =props.source_tv
actionItem: =props.item
- component: oh-button
config:
class:
- button-style
color: black
bgColor: yellow
style:
font-size: 26px
font-weight: bold
position: absolute
left: 90px
top: 380px
width: 100px
height: 80px
border-radius: 12px
display: flex
flex-wrap: wrap
white-space: normal
line-height: 15px
text: PC
action: command
actionCommand: =props.source_pc
actionItem: =props.item
- component: oh-link
config:
color: white
style:
font-size: 60px
font-style: bold
position: absolute
left: 0px
top: 500px
width: 280px
height: 0px
display: flex
text: Argon
- component: oh-link
config:
color: yellow
style:
font-size: 20px
position: absolute
left: 0px
top: 560px
width: 280px
height: 20px
text: Argon Audio
- component: oh-link
config:
color: yellow
style:
font-size: 20px
position: absolute
left: 0px
top: 600px
width: 280px
height: 10px
text: Remote Control System
2 Likes
ysc
(Yannick Schaus)
December 10, 2022, 11:47am
4
FYI - For these specific cases you can also try the built-in Elevation | Framework7 Documentation CSS classes, have a look at the last example for instance.
- component: oh-button
config:
class:
- elevation-12
- elevation-hover-24
- elevation-pressed-2
- elevation-transition
2 Likes
HolBaum5
(Holger Baum)
December 11, 2022, 9:47am
5
Hello @ysc thank you, this also works very well.
But do I have to add this for each button in the widget individually or can I do this globally for all oh-buttons in the widget so that I only have to change in one place?
ysc
(Yannick Schaus)
December 11, 2022, 5:40pm
6
In this case you would have to apply these 4 classes to every button. The elevation classes are there for convenience, but the other approach is equally valid, if you don’t mind fiddling with CSS properties.
In fact you can have a look at Framework7’s source to check how these are defined (in LESS):
In particular:
each(@elevations, {
.elevation-@{value} {
box-shadow: ~"var(--f7-elevation-@{value}) !important";
}
});
each(@elevations, {
.device-desktop .elevation-hover-@{value}:hover {
box-shadow: ~"var(--f7-elevation-@{value}) !important";
}
});
each(@elevations, {
.active-state.elevation-pressed-@{value},
.device-desktop .active-state.elevation-pressed-@{value} {
box-shadow: ~"var(--f7-elevation-@{value}) !important";
}
});
There are CSS variables for each elevation level that you can use for your box-shadow properties if you like (e.g. “box-shadow: var(--f7-elevation-12);
”) defined in framework7/elevation-vars.less at v5 · framework7io/framework7 · GitHub
Mark_VG
(Mark)
December 12, 2022, 10:42am
7
Can you share your example please?
HolBaum5
(Holger Baum)
December 12, 2022, 7:59pm
8
All with f7 elements.
uid: Argon Audio Remote Widget
tags: []
props:
parameters:
- context: item
description: The item to send the command to
label: Item
name: item
required: false
type: TEXT
groupName: items
- 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 switch to source bluetooth
label: Source BT
name: source_bt
required: false
type: TEXT
groupName: commands
- description: Command to switch to source TV
label: Source TV
name: source_tv
required: false
type: TEXT
groupName: commands
- description: Command to switch to source PC
label: Source PC
name: source_pc
required: false
type: TEXT
groupName: commands
parameterGroups:
- name: items
label: Items to use
- name: commands
label: Commands to send
timestamp: Dec 10, 2022, 1:18:55 PM
component: f7-card
config:
style:
--f7-card-margin-horizontal: 0px
background-color: rgb(200,200,200)
border-radius: 30px
box-shadow: 5px 5px rgb(150,150,150)
height: 650px
left: 0px
width: 280px
slots:
default:
- component: oh-link
config:
color: yellow
style:
display: flex
font-size: 30px
height: 40px
left: 0px
position: absolute
top: 5px
width: 280px
text: Volume
- component: oh-button
config:
action: command
actionCommand: =props.volumeup
actionItem: =props.item
bgColor: gray
class:
- elevation-2
- elevation-hover-10
- elevation-pressed-2
- elevation-transition
color: yellow
iconF7: arrowtriangle_up_filled
iconSize: 50
style:
border-radius: 50%
display: flex
height: 80px
left: 40px
position: absolute
top: 40px
width: 80px
- component: oh-button
config:
action: command
actionCommand: =props.volumedown
actionItem: =props.item
bgColor: gray
class:
- elevation-2
- elevation-hover-10
- elevation-pressed-2
- elevation-transition
color: yellow
iconF7: arrowtriangle_down_filled
iconSize: 50
style:
border-radius: 50%
display: flex
height: 80px
left: 160px
position: absolute
top: 40px
width: 80px
- component: oh-link
config:
color: yellow
style:
display: flex
font-size: 30px
height: 40px
left: 0px
position: absolute
top: 130px
width: 280px
text: Source
- component: oh-button
config:
action: command
actionCommand: =props.source_bt
actionItem: =props.item
bgColor: yellow
class:
- elevation-2
- elevation-hover-10
- elevation-pressed-2
- elevation-transition
color: black
style:
border-radius: 12px
display: flex
flex-wrap: wrap
font-size: 26px
font-weight: bold
height: 80px
left: 90px
line-height: 15px
position: absolute
top: 180px
white-space: normal
width: 100px
text: BT
- component: oh-button
config:
action: command
actionCommand: =props.source_tv
actionItem: =props.item
bgColor: yellow
class:
- elevation-2
- elevation-hover-10
- elevation-pressed-2
- elevation-transition
color: black
style:
border-radius: 12px
display: flex
flex-wrap: wrap
font-size: 26px
font-weight: bold
height: 80px
left: 90px
line-height: 15px
position: absolute
top: 290px
white-space: normal
width: 100px
text: TV
- component: oh-button
config:
action: command
actionCommand: =props.source_pc
actionItem: =props.item
bgColor: yellow
class:
- elevation-2
- elevation-hover-10
- elevation-pressed-2
- elevation-transition
color: black
style:
border-radius: 12px
display: flex
flex-wrap: wrap
font-size: 26px
font-weight: bold
height: 80px
left: 90px
line-height: 15px
position: absolute
top: 400px
white-space: normal
width: 100px
text: PC
- component: oh-link
config:
color: gray
style:
display: flex
font-size: 60px
font-style: bold
height: 0px
left: 0px
position: absolute
top: 550px
width: 280px
text: Argon
- component: oh-link
config:
color: gray
style:
font-size: 20px
height: 10px
left: 0px
position: absolute
top: 600px
width: 280px
text: Remote Control System
1 Like