Sind es selbst entwickelte Widgets, oder solche "von der Stange"?
Ich würde sagen selbst entwickelt - natürlich zu Beginn gesucht kopiert/ ausprobiert, das behalten und verändert was gefallen und funktioniert hat. Inzwischen denke ich, ich weiß so ungefähr was ich tue...

aber mehr auch nicht. Habe dir unten mal das letzte Widget angehängt... wenn du Lust hat schau es dir mal an... Kritik erwünscht...
Chromium nicht auch ein Monitoring für Web Entwickler
Das ist ein guter Hinweis, werde ich in den nächsten Abenden mal machen und berichten...
Code: Alles auswählen
uid: label_bewaesserung_test
tags: []
props:
parameters:
- context: item
description: item zonenname
label: item_zone
name: item_zone
required: true
type: TEXT
- context: item
description: item run
label: item_run
name: item_run
required: true
type: TEXT
- label: Item Command run
name: item_command_run
required: false
type: TEXT
- label: Item Command Alternativ run
name: item_command_alt_run
required: false
type: TEXT
- context: item
description: item nextruntime
label: item_nextruntime
name: item_nextruntime
required: true
type: TEXT
- context: item
description: item aussetzen
label: item_aussetzen
name: item_aussetzen
required: true
type: TEXT
- label: Item Command aussetzen
name: item_command_aussetzen
required: false
type: TEXT
- label: Item Command Alternativ aussetzen
name: item_command_alt_aussetzen
required: false
type: TEXT
- context: item
description: item ausgesetzt bis
label: item_aussetzen_bis
name: item_aussetzen_bis
required: true
type: TEXT
- context: item
description: item restzeit
label: item_restzeit
name: item_restzeit
required: true
type: TEXT
- context: item
description: item summery
label: item_summery
name: item_summery
required: true
type: TEXT
parameterGroups: []
timestamp: Aug 6, 2024, 8:41:07 AM
component: f7-card
config:
outline: false
style:
background: transparent
border: 3px solid
border-color: rgba(255, 255, 255, 0.5)
border-radius: 15px
margin-bottom: 10px
margin-left: 10px
margin-right: 10px
margin-top: 10px
slots:
default:
- component: f7-row
config:
class:
- margin-top-half
- margin-left-half
- margin-right-half
- margin-bottom half
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- display-flex
- flex-direction-column
style:
--f7-button-bg-color: rgba(0,191,255, 0.4)
--f7-button-border-color: rgba(255, 255, 255, 0.5)
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-bg-color: rgba(173, 255, 47, 0.30)
--f7-button-fill-hover-bg-color: transparent
--f7-button-fill-pressed-bg-color: rgba(173, 255, 47, 0.30)
--f7-button-hover-bg-color: rgba(0,191,255, 0.4)
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: rgba(0,191,255, 0.4)
--f7-button-text-color: white
font-size: 20px
height: 80px
padding-bottom: 10px
padding-top: 10px
text: =(items[props.item_zone].state)
- component: f7-row
config:
class:
- margin-top-half
- margin-left-half
- margin-right-half
- margin-bottom half
style:
border: 3px solid
border-color: rgba(255, 255, 255, 0.5)
border-radius: 15px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: =props.item_command_run
actionCommandAlt: =props.item_command_alt_run
actionItem: =props.item_run
class:
- display-flex
- flex-direction-column
icon-f7: '=(items[props.item_run].state == "ON") ? "drop_fill" : "drop"'
iconColor: '=(items[props.item_run].state == "ON") ? "yellow" : "white"'
iconSize: 30px
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: =(props.fontsize + "px")
height: 45px
padding-bottom: 20px
padding-top: 20px
- component: oh-button
config:
action: toggle
actionCommand: =props.item_command_run
actionCommandAlt: =props.item_command_alt_run
actionItem: =props.item_run
class:
- display-flex
- flex-direction-column
fill: '=(items[props.item_run].state == "ON") ? true : false'
style:
--f7-button-border-color: rgba(255, 255, 255, 0.5)
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-bg-color: rgba(173, 255, 47, 0.30)
--f7-button-fill-hover-bg-color: transparent
--f7-button-fill-pressed-bg-color: rgba(173, 255, 47, 0.30)
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: white
font-size: 30px
height: 50px
margin-bottom: 10px
margin-left: 10px
margin-right: 10px
margin-top: 10ßx
padding-bottom: 10px
padding-top: 10px
text: RUN
- component: oh-button
config:
visible: '=items[props.item_restzeit].displayState == "0" ? false : true'
action: toggle
actionCommand: =props.item_command_run
actionCommandAlt: =props.item_command_alt_run
actionItem: =props.item_run
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: 20px
height: 30px
padding-bottom: 10px
padding-top: 0px
text: =(items[props.item_restzeit].state)
- component: f7-row
config:
class:
- margin-top-half
- margin-left-half
- margin-right-half
- margin-bottom half
style:
border: 3px solid
border-color: rgba(255, 255, 255, 0.5)
border-radius: 15px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- display-flex
- flex-direction-column
icon-f7: alarm_fill
iconColor: green
iconSize: 30px
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: =(props.fontsize + "px")
height: 40px
padding-bottom: 10px
padding-top: 20px
- component: oh-button
config:
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: 20px
height: 50px
padding-bottom: 10px
padding-top: 0px
text: =(items[props.item_nextruntime].displayState)
- component: f7-row
config:
class:
- margin-top-half
- margin-left-half
- margin-right-half
- margin-bottom half
style:
border: 3px solid
border-color: rgba(255, 255, 255, 0.5)
border-radius: 15px
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
action: toggle
actionCommand: =props.item_command_aussetzen
actionCommandAlt: =props.item_command_alt_aussetzen
actionItem: =props.item_aussetzen
class:
- display-flex
- flex-direction-column
fill: '=(items[props.item_aussetzen].state == "ON") ? true : false'
icon-f7: '=(items[props.item_aussetzen].state == "ON") ? "clear_fill" : "clear"'
iconColor: '=(items[props.item_aussetzen].state == "ON") ? "red" : "green"'
iconSize: 30px
style:
--f7-button-border-color: rgba(255, 255, 255, 0.5)
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-bg-color: rgba(173, 255, 47, 0.30)
--f7-button-fill-hover-bg-color: transparent
--f7-button-fill-pressed-bg-color: rgba(173, 255, 47, 0.30)
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: white
font-size: 20px
height: auto
margin-left: 10px
margin-right: 10px
margin-top: 10px
margin-bottom: 10px
padding-bottom: 10px
padding-top: 10px
text: aussetzen
- component: oh-button
config:
visible: '=items[props.item_aussetzen_bis].state == "UNDEF" ? false : true'
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: 20px
height: 40px
padding-bottom: 10px
padding-top: 10px
text: bis
- component: oh-button
config:
visible: '=items[props.item_aussetzen_bis].state == "UNDEF" ? false : true'
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: 20px
height: 50px
padding-bottom: 10px
padding-top: 0px
text: =(items[props.item_aussetzen_bis].displayState)
- component: f7-row
config:
class:
- margin-top-half
- margin-left-half
- margin-right-half
- margin-bottom half
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
class:
- display-flex
- flex-direction-column
style:
--f7-button-border-color: transparent
--f7-button-border-radius: 15px
--f7-button-border-width: 3px
--f7-button-fill-hover-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-pressed-bg-color: transparent
--f7-button-text-color: white
font-size: 20px
height: 200px
padding-bottom: 10px
padding-top: 10px
text-align: justify
white-space: wrap
text: =(items[props.item_summery].state)