Ich habe mir hierfür ein eigenes Widget erstellt. Wenn eine Störung in einer Gruppe kommt ein Text mit Info. Sowie die Badge Störung und ein blinkendes Element
bild1.png
bild2.png
Widgetcode:
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: Nov 21, 2024, 1:55:39 PM
component: f7-card
config:
style:
--blink-color1: =props.blinkcolor1
--blink-color2: =props.bgcolor
//width: 96%
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:
margin-right: 10px
width: 20
- 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:
//visible: "=props.badge ? true : false"
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
component: widget:Kachel_Statusanzeige
config:
action: popup
actionModal: page:IT_Syteme_OnlineStatus
badgeinfo: "=(items.gOnlineMonitor.state != '0') ? 'STÖRUNG' : ''"
badgeinfocolor: "=(items.gOnlineMonitor.state != '0') ? 'red' : 'green'"
bgimage: /static/dashboard/cards/netzwerk.jpg
icon: oh:rj45_cable
label: "=items.gOnlineMonitor.state != '0' ? (items.gOnlineMonitor.state == '1'
? '1 Gerät ist offline' : items.gOnlineMonitor.state + ' Geräte sind
offline') : 'Alle Geräte sind online'"
monitor: "0"
monitoritem: gOnlineMonitor
title: Online Status
Mit einem Popup lasse ich dann details anzeigen.
oder etwas einfacher:
bild5.png
Widgetcode:
Code: Alles auswählen
uid: Universal_Toggle
tags:
- https://community.openhab.org/t/universal-toggle/115500
- lenschith
- toggle
props:
parameters:
- description: Title of the card
label: Title
name: title
required: false
type: TEXT
- description: The card footer
label: Footer
name: footer
required: false
type: TEXT
- description: Card height
label: Height
name: cardheight
required: false
type: TEXT
- description: Name of the Icon (<a class="external text-color-blue"
target="_blank" href="https://www.openhab.org/link/icons">openHAB
icon</a>), f7:iconName (<a class="external text-color-blue"
target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>)
or material:iconName (<a class="external text-color-blue"
target="_blank"
href="https://jossef.github.io/material-design-icons-iconfont/">Material
icon</a>) or iconify:iconSet:iconName (<a class="external
text-color-blue" target="_blank"
href="https://icon-sets.iconify.design/">Iconify icon</a>)
label: Icon
name: icon
required: true
type: TEXT
- default: gray
description: Color scheme for icons and toggles (see
https://framework7.io/docs/color-themes.html for available color
schemes). Default gray.
label: Color
name: color
required: true
type: TEXT
- context: item
description: Main toggle item (use for single toggle or as main switch for group)
label: Item
name: maintoggle
required: false
type: TEXT
- description: Group toggles (use as group with or without main toggle)
label: Group toggle Array
name: grouptogglearray
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 1, 2024, 5:28:03 PM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: =props.cardheight
title: =(props.title)
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-swiper
config:
init: true
pagination: "=(props.maintoggle) && (props.grouptogglearray) ? true : false"
params:
pagination:
clickable: true
slidesPerView: 1
style:
height: auto
width: 100%
slots:
default:
- component: f7-swiper-slide
config:
style:
height: 100%
width: 100%
visible: "=(props.maintoggle) ? true : false"
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 100%
slots:
default:
- component: oh-icon
config:
color: =props.color
icon: =props.icon
width: '=(props.grouptogglearray) ? "100" : "120"'
- component: oh-toggle
config:
colorTheme: =props.color
item: =props.maintoggle
- component: f7-block
config:
style:
display: '=(props.grouptogglearray) ? "block" : "none"'
height: 35px
- component: f7-swiper-slide
config:
visible: "=(props.grouptogglearray) ? true : false"
slots:
default:
- component: f7-swiper
config:
params:
direction: vertical
mousewheel: true
scrollbar:
hide: true
slidesPerView: 1
scrollbar: true
style:
height: 100%
width: 100%
slots:
default:
- component: oh-repeater
config:
for: item
fragment: true
in: =props.grouptogglearray.split("|")
slots:
default:
- component: f7-swiper-slide
config:
style:
height: 100%
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: 100%
slots:
default:
- component: f7-block-title
config:
style:
margin-bottom: -2px
margin-top: 10px
slots:
default:
- component: Label
config:
text: =loop.item.split("\"")[1]
- component: oh-icon
config:
color: '=items[loop.item.split("\"")[3]].state == "ON" ? props.color : "gray"'
icon: =props.icon
width: 70
- component: oh-toggle
config:
colorTheme: =props.color
item: =(loop.item.split("\"")[3])
- component: f7-block
config:
style:
display: '=(props.maintoggle) ? "block" : "none"'
height: 35px
- component: f7-card-footer
slots:
default:
- component: Label
config:
text: =props.footer
Code: Alles auswählen
component: widget:Universal_Toggle
config:
cardheight: 250px
color: "=(items.GaragentorStatus.state == 'geöffnet' ? 'red' :
(items.GaragentorStatus.state == 'geschlossen' ? 'blue' : 'gray'))"
footer: ='aktuell ' + items.GaragentorStatus.state
icon: f7:arrow_up_arrow_down_circle_fill
maintoggle: Garagentor_Betrieb
title: ='Garagentor ' +
(items.GaragentorStatus_AddOn.state).replace('1','öffnen').replace('0','schließen')
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
openHAB4.3.3 in einem Docker Container auf RPI5-8GB, AVM: Fritz!Box 7590 - SMART301/302 - Comet, SMART200/210, SMART440, Alexa, Shelly, Tasmota, ESP Easy, WLED
