Seite 1 von 1
Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 12:33
von rebell21
Ich habe eine Überwachung meiner Server mit dem Network Binding erzeugt. Jetzt möchte ich den Zustand der Server (online/offline) anzeigen. Ich kriege aber standardmäßig nur ein langweilige oh-label-cell mit Texten in der page eingefügt.
Hier der Code
Code: Alles auswählen
component: oh-label-cell
config:
item: ESP32Gaszahler_Online
title: ESP32 Gaszähler
icon: network
subtitle: 192.168.2.128 Online
stateAsHeader: true
expandable: false
visibility:
- ESP32Gaszahler_Online==ON
ich würde mir gerne ein grünes icon (z. B icon:network in grün oder icon:light in grün) anzeigen lassen, wenn der Server online ist und ein rotes ICON, wenn er offline ist
Ich habe es mit einer map-Datei in /etc/openhab/transform geschafft, statt ON nunmehr "online" anzeigen zu lassen. Aber wie kann ich ein ICON dynamisch in Abhängigkeit des Zustands anzeigen oder zumindest eine andere Farbe in Abhängigkiet des item-states anzeigen
Re: Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 13:28
von peter-pan
Hier ein Beispiel:
Code: Alles auswählen
component: oh-label-cell
config:
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: Pow_02
color: '=(items.Pow_02.state == "OFF") ? "teal" : "lightblue"'
footer: "='IP: ' + items.Pow_02_IPAddress.state"
icon: '=(items.Pow_02.state == "OFF") ? "oh:standard_lamp-off" :
"oh:standard_lamp-on"'
item: Pow_02
on: "true"
stateStyle:
color: '=(items.Pow_02.state == "OFF") ? "blue" : "red"'
subtitle: Wohnzimmer
title: Stehlampe
Es ändert sich das Icon, die Textfarbe und der Hintergrund.
aus.jpg
an.jpg
Ohne die "action" sollte das auch für dich nutzbar sein.
Re: Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 17:34
von Harka
Moin,
das network-Icon kann dies eigentlich schon von Haus aus. Probiere mal "Icon depends on state" aus ( in YAML "iconUseState: true" )
Re: Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 17:57
von peter-pan
Könnte es sein, dass der "iconUseState" für das Widget "oh-label-card" gilt, nicht aber für "oh-label-cell" ?!
Code: Alles auswählen
component: oh-label-card
config:
background: linear-gradient(to top left,#B0E0E6 0%,#FFC0CB 30%,#1E90FF 100%)
class: right-label
icon: oh:window
iconSize: 50
iconUseState: true
item: HmIP_SWDO_B808_1STATECONTACT
label: ='Fenster Schlafzimmer rechts ' +
items.HmIP_SWDO_B808_1STATECONTACT.displayState
stylesheet: |
.right-label {
width: 91%;
text-align: center;
color: green
}
icon.jpg
Re: Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 19:42
von lenschith
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')
Re: Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 20:02
von Harka
peter-pan hat geschrieben: ↑27. Feb 2025 17:57
Könnte es sein, dass der "iconUseState" für das Widget "oh-label-card" gilt, nicht aber für "oh-label-cell" ?!
Upps. Nicht so genau hingeschaut
Alternativen 1.) grün/grau und 2.) mit f7-Icons
Code: Alles auswählen
component: oh-label-cell
config:
icon: =@'aaSteckdose2_Online'=='ON'?'network-on':'network-off'
item: aaSteckdose2_Online
component: oh-label-cell
config:
icon: f7:antenna_radiowaves_left_right
item: aaSteckdose2_Online
iconColor: =@'aaSteckdose2_Online'=='ON'?'green':'red'
Re: Anzeige Rechnerüberwachung
Verfasst: 27. Feb 2025 22:49
von rebell21
danke für die vielen Tipps.
ich habe es mit folgender Zeile realisiert
Code: Alles auswählen
component: oh-label-cell
config:
item:ESP32Gaszahler_Online
title: ESP32 Gaszählerr
subtitle: 192.168.2.128 Online
stateAsHeader: true
expandable: false
icon: '=(items.ESP32Gaszahler_Online.state == "ON") ? "oh:network-on" : "oh:network-off"
Ich habe gefunden dass es das ICON für on und off gibt
Re: Anzeige Rechnerüberwachung
Verfasst: 28. Feb 2025 13:43
von peter-pan
Genau. Das
Standard-Icon kennt drei Zustände(Einzel-Icons im "Kern" von OH):
network-off,
network-on und
network und kann auch jeweils direkt angesteuert werden.
Für die Benutzung mit der "Label-Card" reicht die Aktivierung, wie von @Harka beschrieben, da diese Funktion im Widget enthalten ist.
Eine Frage von mir: Wie funktioniert der Parameter
"stateAsHeader" ? Ich kann ihn in der
Doku nicht finden.
Übrigens; falls dein ESP32 mit Tasmota geflasht sein sollte, könnte es auch möglich sein, die IP-Adresse aus der Firmware auszulesen.
Re: Anzeige Rechnerüberwachung
Verfasst: 28. Feb 2025 14:58
von rebell21
ich weiß auch nicht, was stateAsHeader macht. Ist durch cut&paste dort hineingeraten. Ich habe ihn gelöscht und es funktioniert weiterhin
das ist aktuell der Code
Code: Alles auswählen
component: oh-label-cell
config:
item: ESP32Gaszahler_Online
icon: '=(items.ESP32Gaszahler_Online.state == "ON") ? "oh:network-on" : "oh:network-off"'
title: ESP32 Gaszähler
subtitle: 192.168.2.128 Online
footer: ='Last seen:' + dayjs(items.ESP32Gaszahler_Zuletzt_gesehen.state).format("YYYY.MM.DD HH:mm:ss")
expandable: false
Ich flashe nicht mir Tasmota sondern arbeite mit der arduino IDE in C++