I use a simple reed switch. In my case one from Flukso. This is connected to An esp8266 board (nodemcu flashed with tasmota). In the past In also use a reed switch for my gas, connected to the same board, but I have a digital meter now.
The level of my watertank (rainwater) measured with a pressure sensor connected to a Shelly Uni. I bought the pressure sensor some years ago via Ali, was around €60.
Is possible to share the yaml code of the widgets ?
Thanks
Artur
Can you please let me know where I can find these icons. Thanks!
They are from flaticon.com
And this is mine !
Basically, almost each element is clickable (Except the Spotify Widget and the todo’s list).
The design is made to fit perfectly on a Amazon Fire Tab10.
HOME : change to AWAY and in red when no one is at home (helped me to figure out what’s going on sometimes haha !)
A click inside the green open a popup that show the status of every member of the family
The meteo widget is based on the weatherCard available here → https://community.openhab.org/t/ui-widget-weather/106842
The TodoList is filled with items created dynamically from an external source (a custom one for my case, but can work well with a Calendar like Google); basically :
Each button below that is a scene, a flag that help me control my stuff, or a button that open a popup.
Each button can show elements like temperature, presence or not, etc…
Here’s the code of the button widget :
uid: widget_cell
tags: []
props:
parameters:
- description: background color
label: Background Color
name: bgcolor
required: true
type: TEXT
- context: item
description: item for state
label: Item for state
name: itemForState
required: false
type: TEXT
- description: text color
label: Text Color
name: textColor
required: true
type: TEXT
- description: text Header
label: Text Header
name: textHeader
required: false
type: TEXT
- description: Icon Header
label: Icon Header
name: iconHeader
required: false
type: TEXT
- description: text
label: Text
name: text
required: true
type: TEXT
- context: item
description: item 1 State
label: Item 1 State
name: item1State
required: false
type: TEXT
- description: item 1 Unit
label: Item 1 Unit
name: item1Unit
required: false
type: TEXT
- context: item
description: item 2 State
label: Item 2 State
name: item2State
required: false
type: TEXT
- description: item 2 Unit
label: Item 2 Unit
name: item2Unit
required: false
type: TEXT
- context: item
description: item 3 State
label: Item 3 State
name: item3State
required: false
type: TEXT
- description: item 3 Unit
label: Item 3 Unit
name: item3Unit
required: false
type: TEXT
- description: Action to perform
label: Action
name: action
required: true
type: TEXT
- context: item
description: Action item
label: Action Item
name: actionItem
required: false
type: TEXT
- description: Action command
label: Action Command
name: actionCommand
required: false
type: TEXT
- description: Action command Alt
label: Action Command Alt
name: actionCommandAlt
required: false
type: TEXT
- description: Action Page
label: Action Page
name: actionPage
required: false
type: TEXT
- description: Action Page Transition
label: Action Page Transition
name: actionPageTransition
required: false
type: TEXT
- description: Action Modal
label: Action Modal
name: actionModal
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 9, 2023, 2:43:39 PM
component: oh-button
config:
action: =props.action
actionCommand: =props.actionCommand
actionCommandAlt: =props.actionCommandAlt
actionItem: =props.actionItem
actionModal: = props.actionModal
actionPage: =props.actionPage
actionPageTransition: =props.actionPageTransition
style:
--f7-button-bg-color: =props.bgcolor
--f7-button-hover-bg-color: =props.bgcolor
--f7-button-text-transform: none
border-radius: 0px
height: 80px
margin-bottom: 8px
margin-top: 8px
width: 95%
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
margin-left: 5px
margin-top: 5px
width: 50%
slots:
default:
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
opacity: 50%
text-align: left
text: =props.textHeader
- component: Label
config:
style:
color: =props.textColor
font-size: 20px
font-weight: normal
text-align: left
text: =props.text
- component: f7-col
config:
class:
- align-items-center
- justify-content-left
style:
height: 100%
margin-top: 5px
width: 30%
slots:
default:
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
height: 18px
text-align: right
text: '=items[props.item1State].state + " " + (props.item1Unit !== undefined ? props.item1Unit : "")'
visible: =items[props.item1State].state !== '-'
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
height: 18px
text-align: right
text: '=items[props.item2State].state + " " + (props.item2Unit !== undefined ? props.item2Unit : "")'
visible: =items[props.item2State].state !== '-'
- component: Label
config:
style:
color: =props.textColor
font-size: 12px
font-weight: normal
height: 18px
text-align: right
text: '=items[props.item3State].state + " " + (props.item3Unit !== undefined ? props.item3Unit : "")'
visible: =items[props.item3State].state !== '-'
- component: f7-col
config:
class:
- align-items-center
- justify-content-left
style:
height: 100%
width: 10%
visible: =items[props.itemForState].state == 'ON' || props.iconHeader != null
slots:
default:
- component: f7-icon
config:
f7: circle_fill
style:
color: =props.textColor
float: right
font-size: 20px
height: 25px
margin-top: 10px
width: 100%
visible: =items[props.itemForState].state == 'ON'
- component: f7-icon
config:
f7: =props.iconHeader
style:
color: =props.textColor
float: right
font-size: 20px
height: 25px
margin-top: 10px
width: 100%
visible: =props.iconHeader != null
Here’s an exemple of the popup (basically another Page) that show on a button click :
Here is the code of the main page (that’s involve some custom CSS) :
config:
label: Home
order: "2"
sidebar: true
style:
--f7-card-bg-color: rgba(23,23,23,0.5)
--f7-card-header-border-color: rgba(23, 23, 23, 0.5)
--f7-list-item-border-color: rgba(23, 23, 23, 0.5)
background: url("http://[SERVER_URL]:8080/static/background.jpg") no-repeat 0 50%
background-size: 100%
stylesheet: |
.label-card-content {
padding-top: 0px;
padding-bottom: 0px
}
.button{
--f7-button-bg-color: none
}
.button-col-navigate{
background: rgba(71, 71, 71, 0.5)
}
.button-col-flag{
background: rgba(128,128,128, 0.5)
}
.label-card-content .item-inner {
--f7-list-item-media-margin: 20px;
}
:root {
--f7-popup-tablet-width: 90%;
}
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-card
config:
stylesheet: |
.card {
background: transparent;
box-shadow: none;
}
slots:
default:
- component: oh-grid-row
slots:
default:
- component: oh-grid-col
config:
stylesheet: |
.card {
background: transparent;
box-shadow: none;
margin-top: 15px;
}
width: "100"
slots:
default:
- component: oh-label-card
config:
action: popup
actionModal: page:page_c1e70f191b
background: '=(items.presence.state == "ON" ? "rgba(45,141,36,0.5)" :
"rgba(196,0,0,0.5)")'
fontSize: 24px
fontWeight: bold
icon: f7:person_3_fill
item: Presence
label: '=(items.presence.state == "ON" ? "HOME" : "AWAY")'
stylesheet: >
.item-inner{
padding-bottom: var(--f7-list-item-padding-vertical) !important;
padding-top: var(--f7-list-item-padding-vertical) !important;
height: 100% !important;
justify-content: left!important;
width: 100% !important;
}
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
style:
margin-left: 0px
margin-right: 0px
width: "35"
slots:
default:
- component: widget:weatherCard_small
config:
itemPrefix: One_Call_API_Weather_and_Forecast_
locationTitle: [CITY]
sunIndicator: true
widget_action: popup
widget_actionModal: widget:weatherCard
widget_actionModalConfig: {}
- component: oh-grid-col
config:
width: "35"
slots:
default:
- component: f7-card
config:
stylesheet: |
.card {
background: transparent;
box-shadow: none;
}
.card-content {
min-height: 42px;
}
slots:
default:
- component: widget:multiroom_audio_control
config:
activeDeviceShuffle: Spotify_Player_Bridge_Active_Device_Shuffle
albumArtItem: Spotify_Player_Bridge_AlbumImage
artistItem: Spotify_Player_Bridge_Media_Artist
darkTheme: true
multiroomControlItem: Spotify_Player_Bridge_Active_Devices
playerControlItem: Spotify_Player_Bridge_Media_Control
repeatMode: Spotify_Player_Bridge_Repeat_Mode
trackItem: Spotify_Player_Bridge_Media_Title
trackProgressItem: Spotify_Player_Bridge_Track_Progress_mss
trackTimeItem: Spotify_Player_Bridge_Track_Duration_mss
volumeControlItem: Spotify_Player_Bridge_Volume
- component: oh-grid-col
config:
style:
margin-left: 0px
margin-right: 0px
width: "30"
slots:
default:
- component: widget:CalendarEventList
- component: oh-grid-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_890d955693
actionPageTransition: f7-dive
item1State: Sensibo_Sky_Current_Temperature
item2State: Sensibo_Sky_Current_Humidity
item2Unit: "%"
item3State: Living_Room_Aqara_Illuminance
itemForState: Living_Room_Aqara_Occupancy
text: Open Area
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_989c3b7577
actionPageTransition: f7-dive
item1State: Bathroom_Aqara_Temperature
item2State: Bathroom_Aqara_Illuminance
itemForState: Bathroom_Aqara_Occupancy
text: Bathroom
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_99615e72a6
actionPageTransition: f7-dive
item1State: Bedroom_Aqara_Temperature
item1Unit: °C
item2State: Bedroom_Aqara_Illuminance
item2Unit: lx
itemForState: Bedroom_Aqara_Occupancy
text: Bedroom
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_5de8c2b57d
actionPageTransition: f7-dive
item1State: One_Call_API_Weather_and_Forecast_Current_Temperature
item2State: One_Call_API_Weather_and_Forecast_Current_Humidity
item3State: One_Call_API_Weather_and_Forecast_Current_Windspeed
text: Outside
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_4bceabf774
actionPageTransition: f7-dive
text: Entry
textColor: white
textHeader: Navigate
- component: oh-grid-col
config:
class: button-col-navigate
slots:
default:
- component: widget:widget_cell
config:
action: popup
actionModal: page:page_fc65b68977
actionPageTransition: f7-dive
text: Flags
textColor: white
textHeader: Navigate
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
style:
background-color: Rgba(255,0,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Bedtime
itemForState: TRIG_Bedtime
text: Bed
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(30,144,255,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_BathTime
itemForState: TRIG_BathTime
text: Bath
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(0,128,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Wakeup
itemForState: TRIG_Wakeup
text: Wake Up
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(255,204,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_MovieTime
itemForState: TRIG_MovieTime
text: Movie
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(255,165,0,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Evening
itemForState: TRIG_Evening
text: Sunset
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
style:
background-color: Rgba(184,0,28,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_Working
itemForState: TRIG_Working
text: At Work
textColor: white
textHeader: Activate Scene
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
style:
background-color: Rgba(170,170,170,.5)
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_CloseAllLights
itemForState: TRIG_CloseAllLights
text: Close Lights
textColor: white
textHeader: Activate Scene
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_OutForAWalk
itemForState: TRIG_OutForAWalk
text: Coming Back
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_DogAloneAtHome
itemForState: TRIG_DogAloneAtHome
text: Dog At Home
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_LivingRoomLight_TurnOnAuto
itemForState: TRIG_LivingRoomLight_TurnOnAuto
text: Lights Auto
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_AC_TurnOnAuto
itemForState: TRIG_AC_TurnOnAuto
text: AC Auto
textColor: Black
textHeader: Flag
- component: oh-grid-col
config:
class: button-col-flag
slots:
default:
- component: widget:widget_cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: TRIG_WarningTempOutdoorReachIndoor
itemForState: TRIG_WarningTempOutdoorReachIndoor
text: Temp. In/Out
textColor: Black
textHeader: Flag
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: "30"
slots:
default: []
- component: oh-grid-col
config: {}
slots:
default: []
masonry: null
grid: null
canvas: []
I like the “Dog at home” 
@Integer
It would be nice to have some kind of git repository or central storage for all of your ui examples and widgets, as they could be accessed by everyone and always have the latest version of the widgets. Would be nice to hear from you.
Easiest would be to publish widgets on the marketplace and link to the yaml file hosted e.g. on github.
That’s what I do with the semanticHomeMenu widgets.
Doing this, widgets can be installed easily via MainUI.
Yes, that would be an idea. My thought was only, that here it is almost impossible to get any info about the state of dev of a single widget, because there are so many messages in this thread. So I thought it would be nice, to have some overall storage for the widgets, so if someone is updating or forking it, you can easily see and get updates.
Hello,
@Integer nice work. Are this the latest versions or could you please share them with us ?
Thank you
that looks good, can you please share the code for the two with us?
This is currently my dashboard, it is optimized for the 16” touch display that we use as the central operating interface.
Hi Alex,
Can you share the widgets code used in this dashboard ?
Thanks
Artur
Hi Alex.
Looks nice.
What is “behind” the ‘system status’ icon at the bottom?
This is a simple group that contains several other switch items belonging to the system, e.g. whether all bridges (Velux, Tibber etc.) can be reached etc.
label: Globaler System Status
type: Group
category: ""
groupNames: []
tags: []
groupType: Switch
function:
name: AND
params:
- ON
- OFF
I am not a designer, sorry, but I have optimized the widget only for my 16” touch displays, on larger displays it may not be quite correct with the display of one or the other widget.
I first created a template (_DRAFT_Card) for the general display and then only add the appropriate additional content.
uid: _DRAFT_Card
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
timestamp: Jul 1, 2024, 9:50:18 AM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
slots:
default:
- component: Label
config:
text: The status or other things are displayed here later
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
margin-bottom: 5px
margin-top: 5px
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_State_Room
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- label: Content Icon Color
name: contentIconColor
required: false
- label: Content Icon Size
name: contentIconSize
required: false
- context: item
description: Gruppe für die Anzahl der Lichter
label: Item
name: lights
required: false
type: TEXT
- context: item
description: IST Temperatur
label: Item
name: temp
required: false
type: TEXT
- context: item
description: SOLL Temperatur
label: Item
name: settemp
required: false
type: TEXT
- context: item
description: Luftfeuchtigkeit
label: Item
name: humidity
required: false
type: TEXT
- description: Page which will be opened as popup
label: pageClima
name: pageClima
required: false
- context: item
description: Fenster Status
label: Item
name: windows
required: false
type: TEXT
- context: item
description: Gruppe für die Anzahl der Fenster
label: Item
name: windows_numbers
required: false
type: TEXT
- context: item
description: Tür Status
label: Item
name: door_state
required: false
type: TEXT
- context: item
description: Tor Status
label: Item
name: gate_state
required: false
type: TEXT
timestamp: Jul 16, 2024, 6:21:15 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
slots:
default:
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 0px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.pageClima
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: iconify:material-symbols:humidity-percentage-outline-rounded
visible: "=props.humidity ? true : false"
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
slots:
default:
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.pageClima
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: iconify:oui:temperature
visible: "=props.temp ? true : false"
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.humidity].displayState
visible: "=props.humidity ? true : false"
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: "=(items[props.temp].displayState ? items[props.temp].displayState :
items[props.temp].state) + (props.settemp ? '
(' + items[props.settemp].state + ')' : '')"
visible: "=props.temp ? true : false"
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 5px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-icon
config:
color: "=(Number(items[props.lights].state) > 0) ? '#f0ca59' :
(props.contentIconColor ?
props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black'))"
icon: iconify:tabler:bulb-filled
visible: "=props.lights ? true : false"
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
slots:
default:
- component: oh-icon
config:
color: "=(Number(items[props.windows_numbers].state) > 0) ? '#6dacfc' :
(props.contentIconColor ?
props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black'))"
icon: "=items[props.windows_numbers].state > 0 ?
'iconify:mdi:window-open-variant' :
'iconify:mdi:window-closed-variant'"
visible: "=props.windows ? true : false"
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
slots:
default:
- component: oh-icon
config:
color: "=(items[props.door_state].state === 'OPEN' ? '#9e7157' :
(props.contentIconColor ?
props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')))"
icon: "=items[props.door_state].state === 'OPEN' ? 'iconify:mdi:door-open' :
'iconify:mdi:door'"
visible: "=props.door_state ? true : false"
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
slots:
default:
- component: oh-icon
config:
color: "=(items[props.gate_state].state === 'OPEN' ? '#9e7157' :
(props.contentIconColor ?
props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')))"
icon: "=items[props.gate_state].state === 'OPEN' ?
'iconify:mdi:garage-open-variant' :
'iconify:mdi:garage-variant-lock'"
visible: "=props.gate_state ? true : false"
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: "=(Number(items[props.lights].state) > 0) ? items[props.lights].state :
''"
visible: "=props.lights ? true : false"
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: "=items[props.windows_numbers].state > 0 ?
items[props.windows_numbers].state : ''"
visible: "=props.windows ? true : false"
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: "=items[props.door_state].state === 'OPEN' ? 'OPEN' : ''"
visible: "=props.door_state ? true : false"
- component: f7-col
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: "=items[props.gate_state].state === 'OPEN' ? 'OPEN' : ''"
visible: "=props.gate_state ? true : false"
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_EnergySummary
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- context: item
description: Production to Grid
label: Production to Grid Item
name: itemProductionToGrid
required: false
type: TEXT
- context: item
description: Production to Grid 2
label: Production to Grid Item 2
name: itemProductionToGrid2
required: false
type: TEXT
- context: item
description: Consumption From Grid
label: Consumption From Grid Item
name: itemConsumptionFromGrid
required: true
type: TEXT
- context: item
description: Consumption From Grid 2
label: Consumption From Grid Item 2
name: itemConsumptionFromGrid2
required: true
type: TEXT
- context: item
description: Item Solar Production (first)
label: Solar Production Item (first)
name: itemSolar
required: false
type: TEXT
- context: item
description: Item Solar Production (second)
label: Solar Production Item (second)
name: itemSolar2
required: false
type: TEXT
- context: item
description: Item Solar Production (third)
label: Solar Production Item (third)
name: itemSolar3
required: false
type: TEXT
- context: item
description: Home Consumption (first)
label: Home Consumption Item (first)
name: itemHomeConsumption
required: true
type: TEXT
- context: item
description: Home Consumption (second)
label: Home Consumption Item (second)
name: itemHomeConsumption2
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (first)
label: Item Battery Load/Decharge (first)
name: itemBattery
required: false
type: TEXT
- context: item
description: Battery Load/Decharge Item (second)
label: Item Battery Load/Decharge (second)
name: itemBattery2
required: false
type: TEXT
- context: item
description: Gas Value Item
label: Non Gas Item
name: itemGas
required: false
type: TEXT
- context: item
description: Water Load Item
label: Item Water Load
name: itemWater
required: false
type: TEXT
- context: item
description: Water Load Garden Item
label: Item Water Load Garten
name: itemWaterGarden
required: false
type: TEXT
- context: item
description: Garden Cisterne Item
label: Garden Cisterne Item
name: itemGardenCisterne
required: false
type: TEXT
- context: item
description: Garden Cisterne Item 2
label: Garden Cisterne Item 2
name: itemGardenCisterne2
required: false
type: TEXT
timestamp: Jul 16, 2024, 5:53:34 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin: 0
margin-top: 10px
padding: 0
slots:
default:
- component: f7-block
config:
style:
--f7-block-font-size: 20px
--f7-theme-color: var(--f7-text-color)
display: flex
justify-content: space-between
margin: 0
padding: 0
top: -25px
slots:
default:
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 0
slots:
default:
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(145, 153, 173)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'180px'"
justify-content: center
margin-top: 170px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemConsumptionFromGrid) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(145, 153, 173)
height: 40px
icon: if:mdi:transmission-tower
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemProductionToGrid) ? 'arrow_left' : ''"
iconSize: 20px
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: "=((Number.parseFloat(@props.itemProductionToGrid) > 0) ? '' : '') +
@props.itemProductionToGrid"
visible: "=(props.itemProductionToGrid) ? true : false"
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemProductionToGrid2
visible: "=(props.itemProductionToGrid2) ? true : false"
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemConsumptionFromGrid) ? 'arrow_right' : ''"
iconSize: 20px
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemConsumptionFromGrid
visible: "=(props.itemConsumptionFromGrid) ? true : false"
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemConsumptionFromGrid2
visible: "=(props.itemConsumptionFromGrid2) ? true : false"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 1
margin-left: 8px
slots:
default:
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(177, 199, 95)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemSolar) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(177, 199, 95)
height: 40px
icon: if:mdi:solar-power
- component: oh-link
config:
iconColor: blue
iconF7: "=(props.itemProductionToGrid) ? 'arrow_down' : ''"
iconSize: 20px
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemSolar
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemSolar2
visible: "=(props.itemSolar2) ? true : false"
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemSolar3
visible: "=(props.itemSolar3) ? true : false"
- component: f7-block
config:
style:
display: flex
height: "=(props.itemSolar) ? '145px' : (((props.itemGas) || (props.itemCar)) ?
'320px' : '145px')"
justify-content: center
margin: 0
padding: 0
width: 100%
visible: true
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: 195
width: 100%
tag: svg
viewBox: "=((props.itemGas) || (props.itemSolar) || (props.itemCar)) ? '0 0 100
100' : '0 8 100 100'"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M53,0 v15 c0,27 10,32 30,32 h20
fill: none
id: path1
stroke: rgb(177, 199, 95)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: rgb(177, 199, 95)
r: 2
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemSolar) > 0)) ?
true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M47,0 v15 c0,27 -10,32 -30,32 h-20
fill: none
id: path2
stroke: rgb(177, 199, 95)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemSolar) ? true : false"
- component: f7-row
config:
fill: rgb(177, 199, 95)
r: 2
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=((props.itemSolar) && (Number.parseFloat(@props.itemProductionToGrid)
> 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path2"
- component: f7-row
config:
d: M0,50 H100
fill: none
id: path3
stroke: rgb(145, 153, 173)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemProductionFromGrid) ? true : true"
- component: f7-row
config:
fill: rgb(145, 153, 173)
r: 2
strokeWidth: 10
tag: circle
vectorEffect: non-scaling-stroke
visible: "=(Number.parseFloat(@props.itemProductionFromGrid) = 0) ? true :
false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 3s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path3"
- component: f7-row
config:
d: M50,0 v100
fill: none
id: path4
stroke: rgb(177, 199, 95)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (props.itemSolar)) ? true : false"
- component: f7-row
config:
fill: rgb(177, 199, 95)
r: 2
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (props.itemSolar) &&
(Number.parseFloat(@props.itemBat\
tery) > 0)) ? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path4"
- component: f7-row
config:
d: M55,100 v-15 c0,-27 10,-32 30,-32 h20
fill: none
id: path5
stroke: rgb(177, 199, 95)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemBattery) ? true : false"
- component: f7-row
config:
fill: rgb(177, 199, 95)
r: 2
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemBattery) && (Number.parseFloat(@props.itemBattery) < 0))
? true : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path5"
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(177, 199, 95)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
margin-top: 50px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemBattery) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(177, 199, 95)
height: 40px
icon: if:mdi:battery-charging
- component: oh-link
config:
iconColor: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0)
? 'purple' : 'blue') : ''"
iconF7: "=(props.itemBattery) ? ((Number.parseFloat(@props.itemBattery) < 0) ?
'arrow_up' : 'arrow_down') : ''"
iconSize: 20px
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemBattery
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemBattery2
visible: "=(props.itemBattery2) ? true : false"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 0
margin-left: 8px
margin-top: 0px
slots:
default:
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(145, 77, 64)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemGas) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(145, 77, 64)
height: 40px
icon: "=(props.itemGas) ? 'if:mdi:fire' : ''"
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemGas
- component: f7-block
config:
bgColor: white
style:
align-items: center
border: 1px solid rgb(145, 77, 64)
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
padding: 0
width: 1px
visible: "=(props.itemGas) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(237, 221, 212)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
margin-top: "=(props.itemWater) ? '0px' : (((props.itemSolar) ||
(props.itemGas)) ? '0px' : '0px')"
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemHomeConsumption) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(237, 221, 212)
height: 40px
icon: if:mdi:home
- component: oh-link
config:
iconColor: purple
iconF7: "=(props.itemHomeConsumption) ? 'arrow_right' : ''"
iconSize: 20px
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: "=((Number.parseFloat(@props.itemHomeConsumption) > 0) ? '' : '') +
@props.itemHomeConsumption"
visible: "=(props.itemHomeConsumption) ? true : false"
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemHomeConsumption2
visible: "=(props.itemHomeConsumption2) ? true : false"
- component: f7-block
config:
bgColor: white
style:
align-items: center
border: 1px solid rgb(109, 172, 252)
display: flex
flex-direction: column
height: 22px
justify-content: center
margin: 0
margin-top: 0px
padding: 0
width: 1px
visible: "=(props.itemWater) ? true : false"
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(109, 172, 252)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
margin-top: 0px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemWater) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(109, 172, 252)
height: 40px
icon: if:mdi:water
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemWater
visible: "=(props.itemWater) ? true : false"
- component: f7-col
config:
style:
align-items: center
display: flex
flex-direction: column
flex-grow: 0
margin-left: 8px
margin-top: 0px
slots:
default:
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(109, 172, 252)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemGardenCisterne) ? true : false"
slots:
default:
- component: oh-icon
config:
color: "#6dacfc"
height: 40px
icon: "=(props.itemGardenCisterne) ? 'if:game-icons:water-tank' : ''"
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemGardenCisterne
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemGardenCisterne2
- component: f7-block
config:
style:
display: flex
height: "=(props.itemSolar) ? '145px' : (((props.itemGas) || (props.itemCar)) ?
'320px' : '145px')"
justify-content: center
margin: 0
padding: 0
width: 100%
visible: true
slots:
default:
- component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
height: 195
width: 100%
tag: svg
viewBox: "=((props.itemGas) || (props.itemSolar) || (props.itemCar)) ? '0 0 100
100' : '0 8 100 100'"
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
d: M50,0 v100
fill: none
id: path6
stroke: rgb(109, 172, 252)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemGardenCisterne) ? true : false"
- component: f7-row
config:
fill: rgb(109, 172, 252)
r: 2
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=(props.itemGardenCisterne) ? false : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path6"
- component: f7-row
config:
d: M45,105 v-26 c0,-32 -60,-32 -50,-0 h0
fill: none
id: path7
stroke: rgb(109, 172, 252)
stroke-width: 2
tag: path
vector-effect: non-scaling-stroke
visible: "=(props.itemWaterGarden) ? true : false"
- component: f7-row
config:
fill: rgb(109, 172, 252)
r: 2
style:
stroke-width: 4
tag: circle
vector-effect: non-scaling-stroke
visible: "=((props.itemWaterGarden)) ? false : false"
slots:
default:
- component: f7-row
config:
calcMode: linear
dur: 5s
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path7"
- component: f7-block
config:
style:
align-items: center
border: 2px solid rgb(109, 172, 252)
border-radius: "=(props.borderRadius) ? Number.parseInt(props.borderRadius) +
'px' : '0px'"
display: flex
flex-direction: column
height: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
justify-content: center
margin-top: 50px
width: "=(props.iconDimension) ? Number.parseInt(props.iconDimension) + 'px' :
'150px'"
visible: "=(props.itemWaterGarden) ? true : false"
slots:
default:
- component: oh-icon
config:
color: rgb(109, 172, 252)
height: 40px
icon: if:mdi:flower
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
white-space: nowrap
text: = @props.itemWaterGarden
visible: "=(props.itemWaterGarden) ? true : false"
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Button_GlobelMode
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- label: Button Border Color
name: buttonBorderColor
required: false
type: TEXT
- label: Button Background Color (inactive)
name: buttonColorInactive
required: false
type: TEXT
- label: Button Background Color (activ/fill)
name: buttonColorActive
required: false
type: TEXT
- label: Button Background Color (hover)
name: buttonColorHover
required: false
type: TEXT
- label: Button Background Color (pressed)
name: buttonColorPressed
required: false
type: TEXT
- label: Button Icon Color
name: buttonIconColor
required: false
type: TEXT
- label: Button Icon Size
name: buttonIconSize
required: false
type: TEXT
- label: Button Height
name: buttonHeight
required: false
type: TEXT
- context: item
label: Button 1+2 Item
name: button1Item
required: false
type: TEXT
- context: item
label: Button 2+3 Item
name: button2Item
required: false
type: TEXT
timestamp: Jun 6, 2024, 12:40:36 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-segmented
config:
style:
--f7-button-bg-color: "=props.buttonColorInactive ? props.buttonColorInactive :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
--f7-button-fill-bg-color: "=props.buttonColorActive ?
props.buttonColorActive : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-fill-hover-bg-color: "=props.buttonColorHover ?
props.buttonColorHover : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-fill-pressed-bg-color: "=props.buttonColorPressed ?
props.buttonColorPressed : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-height: "=props.buttonHeight ? (props.buttonHeight) + 'px' : '50px'"
--f7-button-hover-bg-color: "=props.buttonColorHover ? props.buttonColorHover :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
--f7-button-outline-border-color: "=props.buttonBorderColor ?
props.buttonBorderColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-pressed-bg-color: "=props.buttonColorPressed ?
props.buttonColorPressed : (themeOptions.dark === 'dark' ?
'white' : 'black')"
box-shadow: 0px 0px rgb(150,150,150)
vertical-align: middle
slots:
default:
- component: oh-button
config:
action: command
actionCommand: OFF
actionItem: =(props.button1Item)
active: "=(items[props.button1Item].state === 'OFF') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconF7: sun_max_fill
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: oh-button
config:
action: command
actionCommand: ON
actionItem: =(props.button1Item)
active: "=(items[props.button1Item].state === 'ON') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconF7: snow
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: oh-button
config:
action: command
actionCommand: OFF
actionItem: =(props.button2Item)
active: "=(items[props.button2Item].state === 'OFF') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconF7: person_3_fill
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: oh-button
config:
action: command
actionCommand: ON
actionItem: =(props.button2Item)
active: "=(items[props.button2Item].state === 'ON') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconF7: bag_fill
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Button_Garage
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- label: Button Border Color
name: buttonBorderColor
required: false
type: TEXT
- label: Button Background Color (inactive)
name: buttonColorInactive
required: false
type: TEXT
- label: Button Background Color (activ/fill)
name: buttonColorActive
required: false
type: TEXT
- label: Button Background Color (hover)
name: buttonColorHover
required: false
type: TEXT
- label: Button Background Color (pressed)
name: buttonColorPressed
required: false
type: TEXT
- label: Button Icon Color
name: buttonIconColor
required: false
type: TEXT
- label: Button Icon Size
name: buttonIconSize
required: false
type: TEXT
- label: Button Height
name: buttonHeight
required: false
type: TEXT
- context: item
label: Button 1+2 Item
name: button1Item
required: false
type: TEXT
- context: item
label: Button 2+3 Item
name: button2Item
required: false
type: TEXT
timestamp: Jul 1, 2024, 11:31:32 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-segmented
config:
style:
--f7-button-bg-color: "=props.buttonColorInactive ? props.buttonColorInactive :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
--f7-button-fill-bg-color: "=props.buttonColorActive ?
props.buttonColorActive : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-fill-hover-bg-color: "=props.buttonColorHover ?
props.buttonColorHover : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-fill-pressed-bg-color: "=props.buttonColorPressed ?
props.buttonColorPressed : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-height: "=props.buttonHeight ? (props.buttonHeight) + 'px' : '50px'"
--f7-button-hover-bg-color: "=props.buttonColorHover ? props.buttonColorHover :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
--f7-button-outline-border-color: "=props.buttonBorderColor ?
props.buttonBorderColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
--f7-button-pressed-bg-color: "=props.buttonColorPressed ?
props.buttonColorPressed : (themeOptions.dark === 'dark' ?
'white' : 'black')"
box-shadow: 0px 0px rgb(150,150,150)
vertical-align: middle
slots:
default:
- component: oh-button
config:
action: command
actionCommand: OFF
actionItem: =(props.button1Item)
active: "=(items[props.button1Item].state === 'OFF') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconMaterial: lock
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: oh-button
config:
action: command
actionCommand: ON
actionItem: =(props.button1Item)
active: "=(items[props.button1Item].state === 'ON') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconMaterial: lock_open
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: oh-button
config:
action: command
actionCommand: LOCKED
actionItem: =(props.button2Item)
active: "=(items[props.button2Item].state === 'LOCKED') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconMaterial: lock
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: oh-button
config:
action: command
actionCommand: OPEN
actionItem: =(props.button2Item)
active: "=(items[props.button2Item].state === 'OPEN') ? true : false"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconMaterial: lock_open
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Device_Dishwasher
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- description: Expression that evaluates to minutes since the begin of washing
label: Minutes running
name: runtime
required: true
type: TEXT
- context: item
description: Expression that evaluates to OFF, RUNNING or FINISHED
label: State
name: state
required: true
type: TEXT
timestamp: Jul 1, 2024, 10:10:12 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
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-header
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
font-weight: 400
text: =items[props.state].state
- 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: 80px
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: 10px
width: 75px
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: '=items[props.state].state == "AUS" ? "circle_fill" : "sun_min"'
size: 10
style:
color: '=items[props.state].state == "Aus" ? "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: '=items[props.state].state == "FERTIG" ? "translate(-50%, -45px)" :
"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: '=items[props.state].state == "FERTIG" ? "translate(-50%, -47px)" :
"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: '=items[props.state].state == "FERTIG" ? "translate(-50%, -49px)" :
"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: '=items[props.state].statee == "LÄUFT" ? "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: '=items[props.state].state != "LÄUFT" ? "perspective(600px)
rotateX(-55deg)" :
"perspective(0px)
rotateX(0deg)"'
transform-origin: bottom center
transition: transform 0.6s
width: 80px
slots:
default:
- component: f7-block
config:
style:
backgroundColor: white
border-radius: 2px 2px 0px 0px
height: 10px
margin-top: -10px
position: absolute
transform: '=items[props.state].state != "LÄUFT" ? "perspective(600px)
rotateX(35deg)" :
"perspective(600px)
rotateX(90deg)"'
transform-origin: bottom center
transition: transform 0.6s
width: 80px
- component: f7-block
config:
style:
backgroundColor: gray
border-radius: 2px 2px 0px 0px
height: 5px
margin-top: 10px
width: 5px
- 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: '=items[props.state].state == "LÄUFT" ? "" : "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: '=items[props.state].state == "LÄUFT" ? "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 / 60) + ":" + ((props.runtime % 60) < 10 ? ("0"
+ props.runtime %
60) : (props.runtime
% 60))'
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Device_Dryer
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- context: item
label: Dryer State
name: dryerState
required: true
type: TEXT
- context: item
label: Dryer Remaining Time
name: dryerRemTime
required: true
type: TEXT
timestamp: Jul 1, 2024, 10:05:37 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
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: 90px
slots:
default:
- component: f7-block-header
slots:
default:
- component: Label
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
font-weight: 400
text: =items[props.dryerState].state
- 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: 80px
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: 10px
width: 65px
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: '=items[props.dryerState].state == "AUS" ? "circle_fill" : "sun_min"'
size: 10
style:
color: '=items[props.dryerState].state == "AUS" ? "gray" : "red"'
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
border: 5pt solid lightgray
border-radius: 50%
height: 60px
margin-top: 7px
width: 60px
slots:
default:
- component: f7-block
config:
class: custom-preloader-container-dummy
colorTheme: red
style:
--f7-preloader-color: var(--f7-theme-color)
--f7-preloader-size: 50px
display: '=items[props.dryerState].state == "LÄUFT" ? "" : "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: '=items[props.dryerState].state == "FERTIG" ? "circle_bottomthird_split" :
"circle"'
size: 50
style:
border-radius: 50%
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.25) inset
color: '=items[props.dryerState].state == "Aus" ? "lightgray" : (props.dryer ==
"ON" ? "orange" : "lightblue")'
- component: f7-block-header
config:
class:
- no-margin
style:
position: absolute
visible: =items[props.dryerState].state == "LÄUFT"
slots:
default:
- component: Label
config:
style:
color: black
text: =items[props.dryerRemTime].displayState
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Device_Washer
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- description: Expression that evaluates to minutes since the begin of washing
label: Minutes running
name: runtime
required: true
type: TEXT
- context: item
description: Expression that evaluates to OFF, RUNNING or FINISHED
label: State
name: state
required: true
type: TEXT
- description: "Dryer mode: Set this to ON for a red dryer color scheme"
label: Dryer Mode
name: dryer
required: false
timestamp: Jul 1, 2024, 10:12:10 PM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
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: 90px
slots:
default:
- component: f7-block-header
slots:
default:
- component: Label
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
font-weight: 400
text: =items[props.state].state
- 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: 80px
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: 10px
width: 65px
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: '=items[props.state].state == "AUS" ? "circle_fill" : "sun_min"'
size: 10
style:
color: '=items[props.state].state == "AUS" ? "gray" : "red"'
- component: f7-block
config:
class:
- display-flex
- justify-content-center
- align-items-center
style:
border: 5pt solid lightgray
border-radius: 50%
height: 60px
margin-top: 7px
width: 60px
slots:
default:
- component: f7-block
config:
class: custom-preloader-container-dummy
colorTheme: '=props.dryer == "AN" ? "red" : "lightblue"'
style:
--f7-preloader-color: var(--f7-theme-color)
--f7-preloader-size: 50px
display: '=items[props.state].state == "LÄUFT" ? "" : "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: '=items[props.state].state == "FERTIG" ? "circle_bottomthird_split" :
"circle"'
size: 50
style:
border-radius: 50%
box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.25) inset
color: '=items[props.state].state == "AUS" ? "white" : (props.dryer == "ON" ?
"orange" : "lightblue")'
- component: f7-block-header
config:
class:
- no-margin
style:
position: absolute
visible: =items[props.state].state == "LÄUFT"
slots:
default:
- component: Label
config:
style:
color: black
text: '=Math.floor(props.runtime / 60) + ":" + ((props.runtime % 60) < 10 ? ("0"
+ props.runtime % 60) :
(props.runtime % 60))'
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Presence
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Höhe
name: iconSize
required: false
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
- label: Content Icon Size
name: contentIconSize
required: false
type: TEXT
- context: item
description: Anwesenheit Vater
label: Item
name: vater
required: false
type: TEXT
- context: item
description: Anwesenheit Vater - Last Update
label: Item
name: vaterlastupdate
required: false
type: TEXT
- context: item
description: Anwesenheit Mutter
label: Item
name: mutter
required: false
type: TEXT
- context: item
description: Anwesenheit Mutter - Last Update
label: Item
name: mutterlastupdate
required: false
type: TEXT
- context: item
description: Anwesenheit Sohn
label: Item
name: sohn
required: false
type: TEXT
- context: item
description: Anwesenheit Sohn - Last Update
label: Item
name: sohnlastupdate
required: false
type: TEXT
- context: item
description: Anwesenheit Tochter
label: Item
name: tochter
required: false
type: TEXT
- context: item
description: Anwesenheit Tochter - Last Update
label: Item
name: tochterlastupdate
required: false
type: TEXT
timestamp: Jul 1, 2024, 11:35:50 AM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
slots:
default:
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Vater
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Mutter
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Sohn
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
text: Tochter
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 0px
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
style:
margin-top: 10px
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
url: /icon/classic/vater.png
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
style:
margin-top: 10px
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
url: /icon/classic/mutter.png
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
action: popup
actionModal: page:owntracksPerson3
actionModalTransition: f7-dive
style:
margin-top: 10px
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
url: /icon/classic/sohn.png
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-image
config:
style:
margin-top: 10px
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
url: /icon/classic/tochter.png
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
style:
margin-top: 10px
text: "=items[props.vater].state == 'ON' ? 'Anwesend' :
items[props.vaterlastupdate].state"
- component: f7-col
slots:
default:
- component: Label
config:
style:
margin-top: 10px
text: "=items[props.mutter].state == 'ON' ? 'Anwesend' :
items[props.mutterlastupdate].state"
- component: f7-col
slots:
default:
- component: Label
config:
style:
margin-top: 10px
text: "=items[props.sohn].state == 'ON' ? 'Anwesend' :
items[props.sohnlastupdate].state"
- component: f7-col
slots:
default:
- component: Label
config:
style:
margin-top: 10px
text: "=items[props.tochter].state == 'ON' ? 'Anwesend' :
items[props.tochterlastupdate].state"
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
margin-bottom: 5px
margin-top: 5px
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Weather
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- label: Content Icon Color
name: contentIconColor
required: false
- label: Content Icon Size
name: contentIconSize
required: false
- context: item
description: Item of Wetterlage
label: Wetterlage
name: item_wetterlage
required: false
type: TEXT
- context: item
description: Item of Outsidetemp
label: Outsidetemperature
name: item_temp
required: false
type: TEXT
- context: item
description: Item of Outsidehumidity
label: Humidity
name: item_hum
required: false
type: TEXT
- context: item
description: Item of Rain Today
label: Rain
name: item_rain
required: false
type: TEXT
- context: item
description: Item of Illuminance
label: Illuminance
name: item_ill
required: false
type: TEXT
- context: item
description: Item of Wind Avg
label: Wind
name: item_wind
required: false
type: TEXT
- context: item
description: Item of Wind Direction
label: Wind Dir
name: item_wind_dir
required: false
type: TEXT
- context: item
description: Item of Air Quality
label: Air Quality
name: item_air_Quality
required: false
type: TEXT
- context: item
description: Item of Sunrise
label: Sunrise
name: item_sunrise
required: false
type: TEXT
- context: item
description: Item of Sunset
label: Sunset
name: item_sunset
required: false
type: TEXT
timestamp: Jul 1, 2024, 11:30:01 AM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-block
config:
style:
margin-top: -10px
slots:
default:
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 0px
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:cloud_sun_rain_fill
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:sunrise_fill
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:sunset_fill
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_wetterlage].state
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_sunrise].displayState
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_sunset].displayState
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 5px
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:wind
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:compass
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:tropicalstorm
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_wind].displayState
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_wind_dir].state
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_air_Quality].displayState
- component: f7-row
config:
class:
- text-align-center
style:
margin-top: 5px
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:thermometer
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:drop
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: oh-icon
config:
color: "=props.contentIconColor ? props.contentIconColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
icon: f7:sun_min
width: "=props.contentIconSize ? (props.contentIconSize) + 'px' : '40px'"
- component: f7-row
config:
class:
- text-align-center
slots:
default:
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_temp].state
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_hum].displayState
- component: f7-col
config:
style:
background: rgba(233, 196, 106, 0)
slots:
default:
- component: Label
config:
style:
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
text: =items[props.item_ill].state
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
margin-bottom: 5px
margin-top: 5px
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
uid: Card_Button_Toggle
tags: []
props:
parameters:
- label: Card Border Radius
name: cardBorderRadius
required: false
type: TEXT
- label: Card Border Color
name: cardBorderColor
required: false
type: TEXT
- label: Card Background Color
name: cardBgColor
required: false
type: TEXT
- default: "false"
label: Icon - Show on Card
name: iconShow
required: false
type: BOOLEAN
- label: Icon
name: iconName
required: false
type: TEXT
- label: Icon Color
name: iconColor
required: false
type: TEXT
- label: Icon Size
name: iconSize
required: false
type: TEXT
- default: "false"
label: Header - Show on Card
name: headerShow
required: false
type: BOOLEAN
- label: Header
name: headerText
required: false
type: TEXT
- label: Header Text Color
name: headerTextColor
required: false
type: TEXT
- label: Header Text Size
name: headerTextSize
required: false
type: TEXT
- default: "false"
label: Footer - Show on Card
name: footerShow
required: false
type: BOOLEAN
- label: Footer
name: footerText
required: false
type: TEXT
- label: Footer Text Color
name: footerTextColor
required: false
type: TEXT
- label: Footer Text Size
name: footerTextSize
required: false
type: TEXT
- label: Content Text Color
name: contentTextColor
required: false
type: TEXT
- label: Content Text Size
name: contentTextSize
required: false
type: TEXT
- context: item
label: item
name: item
required: true
type: TEXT
- label: Button Name
name: buttonName
required: false
type: TEXT
- label: Button Command
name: buttonCommand
required: false
type: TEXT
- label: Button Command Alt
name: buttonCommand
required: false
type: TEXT
- label: Button Text Color
name: buttonTextColor
required: false
type: TEXT
- label: Button Text Size
name: buttonTextSize
required: false
type: TEXT
- label: Button Border Color
name: buttonBorderColor
required: false
type: TEXT
- label: Button Background Color (inactive)
name: buttonColorInactive
required: false
type: TEXT
- label: Button Background Color (activ/fill)
name: buttonColorActive
required: false
type: TEXT
- label: Button Background Color (hover)
name: buttonColorHover
required: false
type: TEXT
- label: Button Background Color (pressed)
name: buttonColorPressed
required: false
type: TEXT
- label: Button Icon Color
name: buttonIconColor
required: false
type: TEXT
- label: Button Icon Size
name: buttonIconSize
required: false
type: TEXT
- label: Button Height
name: buttonHeight
required: false
type: TEXT
timestamp: Jul 2, 2024, 9:33:16 AM
component: f7-card
config:
style:
--f7-card-bg-color: "=props.cardBgColor ? props.cardBgColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
--f7-card-border-radius: "=props.cardBorderRadius ? (props.cardBorderRadius) + 'px' : '0px'"
--f7-card-margin-horizontal: 0px
--f7-card-margin-vertical: 0px
--f7-card-outline-border-color: "=props.cardBorderColor ? props.cardBorderColor
: (themeOptions.dark === 'dark' ? 'white' : 'black')"
background-color: var(--f7-card-bg-color)
border: 2px solid var(--f7-card-outline-border-color)
color: "=props.contentTextColor ? props.contentTextColor : (themeOptions.dark
=== 'dark' ? 'white' : 'black')"
font-size: "=props.contentTextSize ? (props.contentTextSize)+'px' : '14px'"
slots:
default:
- component: f7-card-header
config:
style:
--f7-card-header-border-color: transparent
--f7-card-header-font-size: "=props.headerTextSize ? (props.headerTextSize) + 'px' : '14px'"
--f7-card-header-font-weight: 800
--f7-card-header-min-height: "=props.headerShow == 'true' ? '50px' : '15px'"
--f7-card-header-text-color: "=props.headerTextColor ? props.headerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
justify-content: flex-start
slots:
default:
- component: oh-icon
config:
icon: "=props.iconName ? props.iconName : 'f7:house'"
style:
color: "=props.iconColor ? props.iconColor : (themeOptions.dark === 'dark' ?
'white' : 'black')"
padding-right: 10px
visible: "=props.iconShow ? props.iconShow : props.iconShow"
width: "=props.iconSize ? (props.iconSize) + 'px' : '25px'"
- component: Label
config:
text: "=props.headerText ? props.headerText : 'Header'"
visible: "=props.headerShow ? props.headerShow : props.headerShow"
- component: f7-card-content
slots:
default:
- component: f7-segmented
config:
strong: true
style:
box-shadow: 0px 0px rgb(150,150,150)
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: "=(props.buttonCommand) ? props.buttonCommand : 'ON'"
actionCommandAlt: "=(props.buttonCommandAlt) ? props.buttonCommandAlt : 'OFF'"
actionItem: =(props.item)
active: "=(items[props.item].state == 'props.buttonCommand') ?
props.buttonCommand : ''"
iconColor: "=props.buttonIconColor ? props.buttonIconColor : (themeOptions.dark
=== 'dark' ? 'black' : 'white')"
iconMaterial: "=props.buttonIconName ? props.buttonIconName : 'door_back'"
iconSize: "=props.buttonIconSize ? (props.buttonIconSize) + 'px' : '25px'"
outline: true
style:
--f7-button-bg-color: "=props.buttonColorInactive ? props.buttonColorInactive :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
--f7-button-fill-bg-color: "=props.buttonColorActive ?
props.buttonColorActive : (themeOptions.dark === 'dark'
? 'white' : 'black')"
--f7-button-fill-hover-bg-color: "=props.buttonColorHover ?
props.buttonColorHover : (themeOptions.dark === 'dark'
? 'white' : 'black')"
--f7-button-fill-pressed-bg-color: "=props.buttonColorPressed ?
props.buttonColorPressed : (themeOptions.dark ===
'dark' ? 'white' : 'black')"
--f7-button-height: "=props.buttonHeight ? (props.buttonHeight) + 'px' : '50px'"
--f7-button-hover-bg-color: "=props.buttonColorHover ? props.buttonColorHover :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
--f7-button-outline-border-color: "=props.buttonBorderColor ?
props.buttonBorderColor : (themeOptions.dark === 'dark'
? 'white' : 'black')"
--f7-button-pressed-bg-color: "=props.buttonColorPressed ?
props.buttonColorPressed : (themeOptions.dark ===
'dark' ? 'white' : 'black')"
color: "=props.buttonTextColor ? props.buttonTextColor : (themeOptions.dark ===
'dark' ? 'black' : 'dark')"
text: "=props.buttonName ? props.buttonName : 'PUSH'"
- component: f7-card-footer
config:
style:
--f7-card-footer-border-color: transparent
--f7-card-footer-font-size: "=props.footerTextSize ? (props.footerTextSize) + 'px' : '14px'"
--f7-card-footer-font-weight: 500
--f7-card-footer-min-height: "=props.footerShow == 'true' ? '25px' : '20px'"
--f7-card-footer-text-color: "=props.footerTextColor ? props.footerTextColor :
(themeOptions.dark === 'dark' ? 'white' : 'black')"
slots:
default:
- component: Label
config:
text: "=props.footerText ? props.footerText : 'Footer'"
visible: "=props.footerShow ? props.footerShow : props.footerShow"
hello @Integer i love your widget. very fantastic and simple design.
can i ask you to help to modify?
i have a item that show the mode of thermostat.
0 = OFF
1= AUTO
2= Manual
i have some rules, to mangae the thermostat and working very well with my sytem (TVR + TH sensor + boiler)
in Auto there is the temperature setted by icalendar
in manual i should able to modify the termperature…
i start just now to work with UI…i’m try to convert my siteman in more modern UI.
i want to add 3 buttom to select the mode and show the mde selected.
when auto the arrow disapper…
when manual the arrows is working…
could you help me?