Code: Alles auswählen
uid: Post_da2
tags: []
props:
parameters:
- context: item
label: Dummy Item
name: dummy
required: true
type: TEXT
- label: Titel
name: title
required: false
parameterGroups: []
timestamp: Mar 24, 2026, 3:21:01 PM
component: f7-card
config:
style:
background: '=(items[props.dummy].state === "ON") ? "linear-gradient(to top
right,#FA8072 30%,#00FFFF 60%)" : "linear-gradient(to bottom
right,darkcyan 0%,turquoise 60%"'
--f7-card-header-padding-horizontal: 150px
--f7-card-header-font-size: 25px
--f7-card-font-size: 20px
--f7-card-height: 80px
stylesheet: |
.blink-active {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50%
{ opacity: 0;
}
}
title: =props.title
slots:
default:
- component: oh-icon
config:
action: command
actionCommand: "false"
actionItem: =(props.dummy)
class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
icon: '=(items[props.dummy].state === "OFF") ?
"f7:exclamationmark_triangle_fill" : "f7:house"'
height: 80
style:
color: '=(items[props.dummy].state === "ON") ? "green" : "red"'
margin-left: 150px
- component: Label
config:
style:
font-weight: bold
margin-left: 150px
text: '=(items[props.dummy].state === "ON") ? "Post da" : "Keine Post"'
- component: f7-col
config: {}
slots:
default:
- component: oh-toggle
config:
color: blue
item: =(props.dummy)
style:
margin-left: 170px
Code: Alles auswählen
uid: Kachel_Statusanzeige
tags:
- action
- anzeige von infos
- badge mit infos
- blink effekt wenn swtich on
- florianh-widgetset
- lenschith
props:
parameters:
- description: kleiner Titel der Kachel
label: Title
name: title
required: false
type: TEXT
groupName: appearance
- description: Icon neben Titel, z.B. f7:thermometer
label: Icon
name: icon
required: false
type: TEXT
groupName: appearance
- description: Großes openHAB Icon, muss lokal auf dem OH Server liegen
label: Großes openHAB Icon
name: bigOhIcon
required: false
type: TEXT
groupName: appearance
- default: "0.5"
description: Transparenz großes openHAB Icon
label: Transparenz
name: opacity_ohicon
required: false
type: TEXT
groupName: appearance
- description: in rgba() oder HEX oeder empty
label: Background Color
name: bgcolor
required: false
type: TEXT
groupName: appearance
- description: path to image
label: Background Image
name: bgimage
required: false
type: TEXT
groupName: appearance
- context: item
description: Item das zu überwachen ist, wenn nicht erfüllt blinkt es
label: Monitoritem
name: monitoritem
required: false
type: TEXT
groupName: item
- description: Badge Icon
label: Icon
name: badgeicon
required: false
type: TEXT
groupName: badgesettings
- default: blue
description: Badge Icon Farbe
label: Badge Icon Farbe
name: badgeinfocolor
required: false
type: TEXT
groupName: badgesettings
- description: Info Badge, das Dauerhaft angezeigt wird mit z.B. Itemwerten
=(items.TestSwitch.state).replace('ON','Reinigung
läuft').replace('OFF','')
label: Info Badge
name: badgeinfo
required: false
type: TEXT
groupName: badgesettings
- description: Farbe für das Info Badge, das Dauerhaft angezeigt wird.
label: Info Badge Farbe
name: badgeiconcolor
required: false
type: TEXT
groupName: badgesettings
- default: red
description: Badge Blink
label: Blink Color1
name: blinkcolor1
required: false
type: TEXT
groupName: badgesettings
- description: Zu überwandender Itemwert für den Alarm, z.B. OPEN
label: Monitoring
name: monitor
required: true
type: TEXT
groupName: item
- description: Label
label: Label
name: label
required: false
type: TEXT
groupName: appearance
parameterGroups:
- name: appearance
label: Grundeinstellungen
- name: item
label: Überwachungsitem
- name: action
context: action
label: Action settings
description: Action to perform when the widget is clicked. If trendline &
analyzer are enabled, only clicks on the left third of the widget
perform the action.
- name: badgesettings
label: Badgesettings
timestamp: Feb 2, 2026, 8:21:38 PM
component: f7-card
config:
style:
--blink-color1: =props.blinkcolor1
--blink-color2: =props.bgcolor
background-color: "=props.bgcolor ? props.bgcolor : ''"
background-image: ="linear-gradient(rgba(255,255,255,0.6), rgba(0,0,0,0.2)),
url(" + props.bgimage + ")"
background-position: center
background-size: cover
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 130px
margin-left: 5px
margin-right: 5px
noShadow: false
overflow: hidden
padding: 0px
stylesheet: |
.myDIV {
animation: mymove 2s infinite;
} @keyframes mymove {
from {background-color: var(--blink-color1);}
to {background-color: var(--blink-color2);}
}
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: oh-icon
config:
icon: "=props.icon ? props.icon : 'f7:thermometer'"
style:
height: 20px
margin-right: 10px
top: -5px
width: 20px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
left: 17px
position: absolute
top: 45px
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 24px
font-weight: 400
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: "=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'"
text: "=props.item ? (props.label ? props.label + ' ' +
(items[props.item].displayState ? items[props.item].displayState
: items[props.item].state) : (items[props.item].displayState ?
items[props.item].displayState : items[props.item].state)) :
(props.label ? props.label : '')"
- component: f7-block
config:
style:
height: 120px
left: 15px
position: absolute
top: 15px
width: 100%
slots:
default:
- component: oh-icon
config:
icon: =props.bigOhIcon
style:
opacity: =props.opacity_ohicon
position: absolute
right: 10px
top: 20px
width: 80px
visible: "=(props.bigOhIcon && (props.monitor ==
items[props.monitoritem].state)) ? true : false"
- component: oh-link
config:
actionPropsParameterGroup: action
style:
height: 125px
left: 0px
position: absolute
top: 0px
width: 100%
visible: "=props.action ? true : false"
- component: f7-chip
config:
class: myDIV
iconColor: =props.badgeiconcolor
iconF7: =props.badgeicon
iconSize: 50px
style:
border-bottom-left-radius: 200px
border-bottom-right-radius: var(--f7-card-expandable-border-radius)
border-top-left-radius: 200px
border-top-right-radius: var(--f7-card-expandable-border-radius)
font-size: 16px
height: 130px
margin: 1px
opacity: 0.6
padding-left: 26%
position: absolute
right: -2px
top: 0px
width: 45%
visible: "=(props.monitor == items[props.monitoritem].state) ? false : true"
- component: f7-chip
config:
color: =props.badgeinfocolor
iconF7: info
style:
border-bottom-left-radius: 0px
border-top-left-radius: 0px
left: 0px
position: absolute
top: 280%
text: =props.badgeinfo
Code: Alles auswählen
uid: Post_da2
tags: []
props:
parameters:
- context: item
label: Dummy Item
name: dummy
required: true
type: TEXT
- label: Titel
name: title
required: false
parameterGroups: []
timestamp: Mar 25, 2026, 8:57:48 AM
component: f7-card
config:
style:
--f7-card-font-size: 20px
--f7-card-header-font-size: 25px
--f7-card-header-padding-horizontal: 150px
--f7-card-height: 80px
background: '=(items[props.dummy].state === "ON") ? "linear-gradient(to top
right,#FA8072 30%,#00FFFF 60%)" : "radial-gradient(circle, lightgreen,
yellow,#20B2AA 20%, #6fa8dc 60% ,#ffe74c 95%)"'
stylesheet: |
.blink-active {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50%
{ opacity: 0;
}
}
title: =props.title
slots:
default:
- component: div
config:
class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
slots:
default:
- component: oh-icon
config:
action: command
actionCommand: "false"
actionItem: =(props.dummy)
class: '=(items[props.dummy].state === "ON") ? "blink-active" : ""'
height: 80
icon: '=(items[props.dummy].state === "OFF") ?
"f7:exclamationmark_triangle_fill" : "f7:house"'
style:
color: '=(items[props.dummy].state === "ON") ? "green" : "red"'
margin-left: 150px
- component: Label
config:
style:
font-weight: bold
margin-left: 150px
text: '=(items[props.dummy].state === "ON") ? "Post da" : "Keine Post"'
- component: f7-col
config: {}
slots:
default:
- component: oh-toggle
config:
color: blue
item: =(props.dummy)
style:
margin-left: 170px