The Openhab3 UI is still work-in-progress for me and I’m slowly working my way up the learning curve. I couldn’t find a card/widget that would display the status of my LaserJet printer so decided to have a go myself.Here’s the result so far.
I’d appreciate any feedback and suggestions for improvement. I have to admit I’m struggling a bit with the yaml coding - especially when trying to draw up a table of values. And I still haven’t really fully worked out the difference between a ‘widget’ and a ‘card’ …
uid: HP-Printer_Card_v100
tags:
- Printer
props:
parameters:
- default: M553
description: Printer Device Prefix
label: Printer Device Prefix
name: cfgDevicePrefix
required: true
type: TEXT
parameterGroups: []
timestamp: Sep 25, 2021, 9:16:56 PM
component: f7-card-content
slots:
default:
- component: f7-row
config:
class:
- display-flex
- justify-content-center
style:
width: 100%
font-weight: bold
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Name"].state
style:
font-size: large
- component: f7-row
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Status"].state
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
text: "Last Update: "
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Status2"].state
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Updated"].displayState
style:
xbackgroundColor: '=dayjs(items[props.cfgDevicePrefix + "_Updated"].state).isAfter(dayjs().add(-1,"hour")) ? "green" : dayjs(items[props.cfgDevicePrefix + "_Updated"].state).isAfter(dayjs().add(-1,"day")) ? "orange" : "red"'
color: '=dayjs(items[props.cfgDevicePrefix + "_Updated"].state).isAfter(dayjs().add(-1,"hour")) ? "green" : dayjs(items[props.cfgDevicePrefix + "_Updated"].state).isAfter(dayjs().add(-1,"day")) ? "orange" : "red"'
- component: f7-row
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Location"].displayState
- component: f7-col
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Serial_Number"].state
- 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: 50%
color: rgba(0,0,0,.5)
slots:
default:
- component: oh-gauge
config:
item: =props.cfgDevicePrefix + "_Cyan_Level"
labelText: Cyan Toner
valuetext: =items[props.cfgDevicePrefix + "_Cyan_Level"].displayState
borderColor: rgba(0,255,255,1)
valueTextColor: rgba(0,255,255,1)
min: 0
max: 100
type: semicircle
borderWidth: 20
labelFontWeight: bold
valueFontWeight: bold
- component: Label
config:
text: '="Pages Remaining : " + items[props.cfgDevicePrefix + "_Cyan_Pages_Remaining"].displayState'
- component: Label
config:
text: '="Pages Printed : " + items[props.cfgDevicePrefix + "_Cyan_Pages_Printed"].displayState'
class:
- padding-bottom
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 50%
color: rgba(0,0,0,.5)
slots:
default:
- component: oh-gauge
config:
item: =props.cfgDevicePrefix + "_Magenta_Level"
labelText: Magenta Toner
valuetext: =items[props.cfgDevicePrefix + "_Magenta_Level"].displayState
borderColor: rgba(255,0,255,1)
valueTextColor: rgba(255,0,255,1)
min: 0
max: 100
type: semicircle
borderWidth: 20
labelFontWeight: bold
valueFontWeight: bold
- component: Label
config:
text: '="Pages Remaining : " + items[props.cfgDevicePrefix + "_Magenta_Pages_Remaining"].displayState'
- component: Label
config:
text: '="Pages Printed : " + items[props.cfgDevicePrefix + "_Magenta_Pages_Printed"].displayState'
class:
- padding-bottom
- 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: 50%
color: rgba(0,0,0,.5)
slots:
default:
- component: oh-gauge
config:
item: =props.cfgDevicePrefix + "_Yellow_Level"
labelText: Yellow Toner
valuetext: =items[props.cfgDevicePrefix + "_Yellow_Level"].displayState
valueTextColor: yellow
borderColor: yellow
min: 0
max: 100
type: semicircle
borderWidth: 20
labelFontWeight: bold
valueFontWeight: bold
- component: Label
config:
text: '="Pages Remaining : " + items[props.cfgDevicePrefix + "_Yellow_Pages_Remaining"].displayState'
- component: Label
config:
text: '="Pages Printed : " + items[props.cfgDevicePrefix + "_Yellow_Pages_Printed"].displayState'
class:
- padding-bottom
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 50%
color: rgba(0,0,0,.5)
slots:
default:
- component: oh-gauge
config:
item: =props.cfgDevicePrefix + "_Black_Level"
labelText: Black Toner
valuetext: =items[props.cfgDevicePrefix + "_Black_Level"].displayState
borderColor: black
min: 0
max: 100
type: semicircle
borderWidth: 20
labelFontWeight: bold
valueFontWeight: bold
- component: Label
config:
text: '="Pages Remaining : " + items[props.cfgDevicePrefix + "_Black_Pages_Remaining"].displayState'
- component: Label
config:
text: '="Pages Printed : " + items[props.cfgDevicePrefix + "_Black_Pages_Printed"].displayState'
class:
- padding-bottom
- component: f7-row
config:
class:
- display-flex
- justify-content-center
slots:
default:
- component: f7-col
config:
class:
- display-flex
- flex-direction-column
- align-items-center
- justify-content-space-evenly
style:
height: 100%
width: 50%
color: rgba(0,0,0,.5)
slots:
default:
- component: oh-gauge
config:
item: =props.cfgDevicePrefix + "_Fuser_Level"
labelText: Fuser
valuetext: =items[props.cfgDevicePrefix + "_Fuser_Level"].displayState
borderColor: gray
min: 0
max: 100
type: semicircle
borderWidth: 20
labelFontWeight: bold
valueFontWeight: bold
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Fuser_Cartridge"].displayState
class:
- padding-bottom
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
height: 100%
width: 68%
white-space: nowrap
overflow: hidden
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
text: Item
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Cyan_Cartridge"].state
style:
white-space: nowrap
overflow: hidden
color: '=(items[props.cfgDevicePrefix + "_Cyan_Status"].state == "OK") ? "green" : "red"'
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Magenta_Cartridge"].state
style:
white-space: nowrap
overflow: hidden
color: '=(items[props.cfgDevicePrefix + "_Magenta_Status"].state == "OK") ? "green" : "red"'
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Yellow_Cartridge"].state
style:
white-space: nowrap
overflow: hidden
color: '=(items[props.cfgDevicePrefix + "_Yellow_Status"].state == "OK") ? "green" : "red"'
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Black_Cartridge"].state
style:
white-space: nowrap
overflow: hidden
color: '=(items[props.cfgDevicePrefix + "_Black_Status"].state == "OK") ? "green" : "red"'
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Toner_Cartridge"].state
style:
white-space: nowrap
overflow: hidden
color: '=(items[props.cfgDevicePrefix + "_Toner_Status"].state == "OK") ? "green" : "red"'
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Fuser_Cartridge"].state
style:
white-space: nowrap
overflow: hidden
color: '=(items[props.cfgDevicePrefix + "_Fuser_Status"].state == "OK") ? "green" : "red"'
- component: f7-col
config:
style:
height: 100%
width: 30%
white-space: nowrap
overflow: hidden
slots:
default:
- component: f7-row
slots:
default:
- component: Label
config:
text: Install Date
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Cyan_Install_Date"].displayState
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Magenta_Install_Date"].displayState
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Yellow_Install_Date"].displayState
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Black_Install_Date"].displayState
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Toner_Install_Date"].displayState
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.cfgDevicePrefix + "_Fuser_Install_Date"].displayState