Hello everyone,
Now that the wall mount for my Galaxy Tab S8 Ultra is finally ready, it would be nice if someone could help me with my widget. I put one of several in the community together, which fits well with our house. Unfortunately, I don’t have the programming knowledge to build it up cleanly or to design it in such a way that the buttons always scale cleanly. Can someone help me to program this widget properly? Maybe other users can use it then 
Thanks in advance!!
With this widget I can access other overviews and see the status of my washing machine, dryer and dishwasher
wall mount
right view
wrong view
uid: Smart_Home
tags: []
props:
parameters:
- description: The card footer of dryer
label: Footer of dryer
name: footer_dryer
required: false
type: TEXT
- description: Expression that evaluates to minutes since the begin of dryer
label: Minutes running of dryer
name: runtime_dryer
required: true
type: TEXT
- description: Expression that evaluates to OFF, RUNNING or FINISHED of dryer
label: State of dryer
name: state_dryer
required: true
type: TEXT
- description: "Dryer mode: Set this to ON for a red dryer color scheme of dryer"
label: Dryer Mode of dryer
name: dryer_dryer
required: false
type: TEXT
- description: The card footer of washing
label: Footer of washing
name: footer_washing
required: false
type: TEXT
- description: Expression that evaluates to minutes since the begin of washing
label: Minutes running of washing
name: runtime_washing
required: true
type: TEXT
- description: Expression that evaluates to OFF, RUNNING or FINISHED of washing
label: State of washing
name: state_washing
required: true
type: TEXT
- description: "Dryer mode: Set this to ON for a red dryer color scheme of washing"
label: Dryer Mode of washing
name: dryer_washing
required: false
type: TEXT
- description: The card footer of dishwasher
label: Footer of dishwasher
name: footer_dishwasher
required: false
type: TEXT
- description: Header text above dishwasher
label: Header of dishwasher
name: header_dishwasher
required: false
type: TEXT
- description: Expression that evaluates to minutes since the begin of dishwasher
label: Minutes running of dishwasher
name: runtime_dishwasher
required: true
type: TEXT
- description: Expression that evaluates to OFF, RUNNING or FINISHED of dishwasher
label: State of dishwasher
name: state_dishwasher
required: true
type: TEXT
- label: Headline
name: headline
required: false
type: TEXT
- label: Headline Color
name: headlinecolor
required: false
type: TEXT
- label: Headline Weight
name: headlineweight
required: false
type: TEXT
- label: Left Button
name: leftButton
required: false
type: TEXT
- label: Right Button
name: rightButton
required: false
type: TEXT
- context: item
label: Item
name: item
required: false
type: TEXT
- label: Background
name: background
required: false
type: TEXT
parameterGroups: []
timestamp: Jul 10, 2022, 6:16:41 PM
component: f7-card
config:
backdrop: true
class:
- display-flex
- flex-direction-column
- align-items-center
style:
background-image: url(http://192.168.198.64:8080/static/standorte/smart_home.png)
background-position: center;
background-repeat: no-repeat;
background-size: cover
box-shadow: var(--f7-card-expandable-box-shadow)
height: 395px
swipeToClose: true
slots:
default:
- component: f7-card-content
config:
style:
height: 110px
margin-right: -395px
margin-top: 255px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-center
style:
width: 100%
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 70px
slots:
default:
- component: f7-block
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
background: rgba(255,255,255,1)
border-radius: 2px 2px 0px 0px
height: 80px
width: 60px
slots:
default:
- component: f7-block
config:
class:
- display-flex
- justify-content-flex-end
- align-items-center
- flex-shrink-0
- no-margin
style:
border-bottom: 1pt solid lightgray
height: 23px
padding-right: 2px
width: 55px
slots:
default:
- component: f7-icon
config:
color: gray
f7: circle_fill
size: 10
- component: f7-icon
config:
color: gray
f7: circle_fill
size: 10
- component: f7-icon
config:
f7: '=props.state_dryer == "OFF" ? "circle_fill" : "sun_min"'
size: 10
style:
color: '=props.state_dryer == "OFF" ? "gray" : "red"'
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
border: 5pt solid lightgray
border-radius: 50%
height: 50px
margin-top: 3px
width: 50px
slots:
default:
- component: f7-block
config:
class: custom-preloader-container-dummy
colorTheme: '=props.dryer_dryer == "ON" ? "red" : "lightblue"'
style:
--f7-preloader-color: var(--f7-theme-color)
--f7-preloader-size: 50px
display: '=props.state_dryer == "RUNNING" ? "" : "none"'
left: 50%
margin: 0
padding: 0
position: absolute
top: 50%
transform: translate(-50%, -50%)
slots:
default:
- component: f7-block
config:
class: custom-preloader-dummy
style:
height: var(--f7-preloader-size)
margin: 0
padding: 0
width: var(--f7-preloader-size)
slots:
default:
- component: f7-block
config:
class: custom-preloader-inner-dummy
style:
height: 100%
left: 0
margin: 0
padding: 0
position: absolute
top: 0
width: 100%
slots:
default:
- component: f7-block
config:
class: custom-preloader-inner-circle-dummy
style:
animation: aurora-preloader-rotate 1s linear infinite
border: calc(var(--f7-preloader-size)/8) solid var(--f7-preloader-color)
border-radius: 50%
border-top-color: transparent
box-sizing: border-box
height: 100%
left: 0
margin: 0
padding: 0
position: absolute
top: 0
width: 100%
- component: f7-icon
config:
f7: '=props.state_dryer == "FINISHED" ? "circle_bottomthird_split" : "circle"'
size: 40
style:
border-radius: 50%
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.25) inset
color: '=props.state_dryer == "OFF" ? "lightgray" : (props.dryer_dryer == "ON" ? "orange" : "lightblue")'
- component: f7-block-header
config:
class:
- no-margin
style:
position: absolute
visible: =props.state_dryer == "RUNNING"
slots:
default:
- component: Label
config:
style:
color: black
text: '=Math.floor(props.runtime_dryer / 60) + ":" + ((props.runtime_dryer % 60) < 10 ? ("0" + props.runtime_dryer % 60) : (props.runtime_dryer % 60))'
- component: f7-card-footer
config:
style:
background: rgba(255,255,255,1)
border-radius: 0px 0px 4px 4px
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px
height: 15px
margin-right: 0px
margin-top: -15px
width: 60px
slots:
default:
- component: Label
config:
style:
buttom: 0
color: black
font-size: 10pt
left: 0
margin-top: 10px
position: absolute
text-align: center
width: 100%
text: =props.footer_dryer
- component: f7-card-content
config:
style:
height: 110px
margin-right: -250px
margin-top: -128px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-center
style:
width: 100%
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 70px
slots:
default:
- component: f7-block
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
background: rgba(255,255,255,1)
border-radius: 2px 2px 0px 0px
height: 80px
width: 60px
slots:
default:
- component: f7-block
config:
class:
- display-flex
- justify-content-flex-end
- align-items-center
- flex-shrink-0
- no-margin
style:
border-bottom: 1pt solid lightgray
height: 23px
padding-right: 2px
width: 55px
slots:
default:
- component: f7-icon
config:
color: gray
f7: circle_fill
size: 10
- component: f7-icon
config:
color: gray
f7: circle_fill
size: 10
- component: f7-icon
config:
f7: '=props.state_washing == "OFF" ? "circle_fill" : "sun_min"'
size: 10
style:
color: '=props.state_washing == "OFF" ? "gray" : "red"'
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
border: 5pt solid lightgray
border-radius: 50%
height: 50px
margin-top: 3px
width: 50px
slots:
default:
- component: f7-block
config:
class: custom-preloader-container-dummy
colorTheme: '=props.dryer_washing == "ON" ? "red" : "lightblue"'
style:
--f7-preloader-color: var(--f7-theme-color)
--f7-preloader-size: 50px
display: '=props.state_washing == "RUNNING" ? "" : "none"'
left: 50%
margin: 0
padding: 0
position: absolute
top: 50%
transform: translate(-50%, -50%)
slots:
default:
- component: f7-block
config:
class: custom-preloader-dummy
style:
height: var(--f7-preloader-size)
margin: 0
padding: 0
width: var(--f7-preloader-size)
slots:
default:
- component: f7-block
config:
class: custom-preloader-inner-dummy
style:
height: 100%
left: 0
margin: 0
padding: 0
position: absolute
top: 0
width: 100%
slots:
default:
- component: f7-block
config:
class: custom-preloader-inner-circle-dummy
style:
animation: aurora-preloader-rotate 1s linear infinite
border: calc(var(--f7-preloader-size)/8) solid var(--f7-preloader-color)
border-radius: 50%
border-top-color: transparent
box-sizing: border-box
height: 100%
left: 0
margin: 0
padding: 0
position: absolute
top: 0
width: 100%
- component: f7-icon
config:
f7: '=props.state_washing == "FINISHED" ? "circle_bottomthird_split" : "circle"'
size: 40
style:
border-radius: 50%
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.25) inset
color: '=props.state_washing == "OFF" ? "lightgray" : (props.dryer_washing == "ON" ? "orange" : "lightblue")'
- component: f7-block-header
config:
class:
- no-margin
style:
position: absolute
visible: =props.state_washing == "RUNNING"
slots:
default:
- component: Label
config:
style:
color: black
text: '=Math.floor(props.runtime_washing / 60) + ":" + ((props.runtime_washing % 60) < 10 ? ("0" + props.runtime_washing % 60) : (props.runtime_washing % 60))'
- component: f7-card-footer
config:
style:
background: rgba(255,255,255,1)
border-radius: 0px 0px 4px 4px
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px
height: 15px
margin-right: 0px
margin-top: -15px
width: 60px
slots:
default:
- component: Label
config:
style:
color: black
font-size: 10pt
left: 0
margin-top: 10px
position: absolute
text-align: center
top: 50
width: 100%
text: =props.footer_washing
- component: f7-card
slots:
default:
- component: f7-card-content
config:
style:
height: 100px
margin-right: 390px
margin-top: -140px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-center
style:
width: 100%
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
slots:
default:
- component: f7-block
config:
class:
- display-flex
- flex-direction-column
- align-items-center
style:
background: rgba(255,255,255,1)
border-radius: 2px 2px 4px 4px
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px
height: 100px
width: 60px
slots:
default:
- component: f7-block
config:
class:
- display-flex
- justify-content-flex-end
- align-items-center
- flex-shrink-0
- no-margin
style:
border-bottom: 1pt solid lightgray
height: 18px
padding-right: 1px
width: 55px
slots:
default:
- component: f7-icon
config:
color: gray
f7: circle_fill
size: 10
- component: f7-icon
config:
color: gray
f7: circle_fill
size: 10
- component: f7-icon
config:
f7: '=props.state_dishwasher == "OFF" ? "circle_fill" : "sun_min"'
size: 10
style:
color: '=props.state_dishwasher == "OFF" ? "gray" : "red"'
- component: f7-block
config:
class:
- no-padding
style:
background: whitesmoke
bottom: 0px
height: calc(100% - 23px)
position: absolute
width: 90%
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
background: beige
border-radius: 50%
bottom: 0px
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.10) inset
height: 40px
left: 30%
position: absolute
transform: '=props.state_dishwasher == "FINISHED" ? "translate(-50%, -65px)" : "translate(-50%, 0)"'
transform-origin: left center
transition: transform 0.6s
width: 40px
slots:
default:
- component: f7-icon
config:
f7: circle
size: 40
style:
color: beige
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
background: beige
border-radius: 50%
bottom: 0px
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.10) inset
height: 40px
left: 50%
position: absolute
transform: '=props.state_dishwasher == "FINISHED" ? "translate(-50%, -67px)" : "translate(-50%, 0)"'
transform-origin: left center
transition: transform 0.6s
width: 40px
slots:
default:
- component: f7-icon
config:
f7: circle
size: 40
style:
color: beige
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
background: beige
border-radius: 50%
bottom: 0px
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.10) inset
height: 40px
left: 70%
position: absolute
transform: '=props.state_dishwasher == "FINISHED" ? "translate(-50%, -69px)" : "translate(-50%, 0)"'
transform-origin: left center
transition: transform 0.6s
width: 40px
slots:
default:
- component: f7-icon
config:
f7: circle
size: 40
style:
color: beige
- component: f7-block
config:
style:
height: 100%
transform: translate3d(0, 0, 0)
slots:
default:
- component: f7-block
config:
class:
- display-flex
- flex-direction-column
- justify-content-flex-start
- align-items-center
style:
backgroundColor: '=props.state_dishwasher == "RUNNING" ? "white" : "whitesmoke"'
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px
height: 100%
margin-top: auto
transform: '=props.state_dishwasher != "RUNNING" ? "perspective(500px) rotateX(-55deg)" : "perspective(0px) rotateX(0deg)"'
transform-origin: bottom center
transition: transform 0.6s
width: 60px
slots:
default:
- component: f7-block
config:
style:
backgroundColor: white
border-radius: 2px 2px 0px 0px
height: 10px
margin-top: -10px
position: absolute
transform: '=props.state_dishwasher != "RUNNING" ? "perspective(500px) rotateX(35deg)" : "perspective(500px) rotateX(90deg)"'
transform-origin: bottom center
transition: transform 0.6s
width: 60px
- component: f7-block
config:
style:
backgroundColor: gray
border-radius: 2px 2px 0px 0px
height: 3px
margin-top: 10px
width: 3px
- component: f7-block
config:
class:
- no-padding
style:
height: calc(100% - 40px)
margin-top: 10px
width: 100%
slots:
default:
- component: f7-block
config:
class: custom-preloader-container-dummy
colorTheme: lightblue
style:
--f7-preloader-color: var(--f7-theme-color)
--f7-preloader-size: 50px
display: '=props.state_dishwasher == "RUNNING" ? "" : "none"'
left: 50%
margin: 0
padding: 0
position: absolute
top: 50%
transform: translate(-50%, -50%)
slots:
default:
- component: f7-block
config:
class: custom-preloader-dummy
style:
height: var(--f7-preloader-size)
margin: 0
padding: 0
width: var(--f7-preloader-size)
slots:
default:
- component: f7-block
config:
class: custom-preloader-inner-dummy
style:
height: 100%
left: 0
margin: 0
padding: 0
position: absolute
top: 0
width: 100%
slots:
default:
- component: f7-block
config:
class: custom-preloader-inner-circle-dummy
style:
animation: aurora-preloader-rotate 1s linear infinite
border: calc(var(--f7-preloader-size)/8) solid var(--f7-preloader-color)
border-radius: 50%
border-top-color: transparent
box-sizing: border-box
height: 100%
left: 0
margin: 0
padding: 0
position: absolute
top: 0
width: 100%
- component: f7-block-header
config:
class:
- no-margin
style:
left: 50%
position: absolute
top: 50%
transform: '=props.state_dishwasher == "RUNNING" ? "scale(1, 1) translate(-50%, -50%)" : "scale(0, 0) translate(-50%, -50%)"'
transform-origin: left center
transition: transform 0.6s
slots:
default:
- component: Label
config:
style:
color: black
text: '=Math.floor(props.runtime_dishwasher / 60) + ":" + ((props.runtime_dishwasher % 60) < 10 ? ("0" + props.runtime_dishwasher % 60) : (props.runtime_dishwasher % 60))'
slots: {}
- component: f7-card
slots:
default:
- component: f7-card-content
config:
style:
margin-right: 200px
margin-top: -340px
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
outline: false
style:
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 500
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.85)
--f7-segmented-strong-padding: 1px
visible: true
slots:
default:
- component: oh-button
config:
action: popup
actionModal: page:Dachboden
style:
--f7-button-bg-color: rgba(0,0,0,.35)
--f7-button-border-color: rgba(255,255,255,.6)
--f7-button-border-radius: 10px
--f7-button-border-width: 1px
--f7-button-padding-horizontal: 10px
--f7-button-padding-vertical: 5px
--f7-button-text-color: orange
font-size: 18px
height: auto
text: Dachboden
- component: f7-card
slots:
default:
- component: f7-card-content
config:
style:
margin-right: -50px
margin-top: -320px
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
outline: false
style:
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 500
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.85)
--f7-segmented-strong-padding: 1px
visible: true
slots:
default:
- component: oh-button
config:
action: popup
actionModal: page:Obergeschoss
style:
--f7-button-bg-color: rgba(0,0,0,.35)
--f7-button-border-color: rgba(255,255,255,.6)
--f7-button-border-radius: 15px
--f7-button-border-width: 1px
--f7-button-padding-horizontal: 20px
--f7-button-padding-vertical: 20px
--f7-button-text-color: orange
font-size: 25px
height: auto
text: OG
- component: f7-card
slots:
default:
- component: f7-card-content
config:
style:
margin-right: -50px
margin-top: -260px
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
outline: false
style:
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 500
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.85)
--f7-segmented-strong-padding: 1px
visible: true
slots:
default:
- component: oh-button
config:
action: popup
actionModal: page:Erdgeschoss
style:
--f7-button-bg-color: rgba(0,0,0,.35)
--f7-button-border-color: rgba(255,255,255,.6)
--f7-button-border-radius: 15px
--f7-button-border-width: 1px
--f7-button-padding-horizontal: 20px
--f7-button-padding-vertical: 20px
--f7-button-text-color: orange
font-size: 25px
height: auto
text: EG
- component: f7-card
slots:
default:
- component: f7-card-content
config:
style:
margin-right: 160px
margin-top: -200px
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
outline: false
style:
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 500
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.85)
--f7-segmented-strong-padding: 1px
visible: true
slots:
default:
- component: oh-button
config:
action: popup
actionModal: page:Keller
style:
--f7-button-bg-color: rgba(0,0,0,.35)
--f7-button-border-color: rgba(255,255,255,.6)
--f7-button-border-radius: 15px
--f7-button-border-width: 1px
--f7-button-padding-horizontal: 20px
--f7-button-padding-vertical: 10px
--f7-button-text-color: orange
font-size: 25px
height: auto
text: Keller