Here’s my widget inspired on https://community.openhab.org/t/list-item-widget-for-hp-printer/135067 - an UI List Item Widget to view the HP Printer. It has couple of things fixed and simplified toner state display.
Screenshots
However, it doesn’t limit you to that particular printer binding. All you you need is:
- Items representing toner levels
- Items representing the state of the tray and pages counter
- Item representing printer state
Prerequisites:
- Use only with List Card (configured to as Accordion and Media List)
- Network binding to provide network status of the printer
Config params:
- Printer title string
- Optionally, icon representing printer
- Label for the “Total lifetype pages”
- Label for “Tray Empty/Open”
Network binding items:
- Printer network state item (online/offline)
Printer binding items:
- Printer status Item (Idle, Initializing, Online, etc.)
- Black Toner level item
- Cyan Toner level item
- Magenta Toner level item
- Yellow Toner level item
- Total lifetype pages item
- Printer jams counter item
- Printer missed picks item
Todo
- Add warnings indicator in case of low toner or tray open/empty
- Provide standalone version of the widget
Changelog
Version 0.1
- Initial release
Resources
uid: mcz_hp_printer_list_item_widget
tags:
- list
- printer
props:
parameters:
- default: HP Printer
label: Title
name: printerTitle
required: false
type: TEXT
groupName: header
- default: f7:printer_fill
description: Printer Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Icon
name: IconPrinter
required: false
type: TEXT
groupName: header
- context: item
description: Printer Network State item
label: Item
name: PrinterNetworkStateItem
required: false
type: TEXT
groupName: header
- context: item
description: Printer Status item
label: Item
name: PrinterStatusItem
required: false
type: TEXT
groupName: header
- context: item
description: Black Toner Level Item
label: Item
name: BlackLevelItem
required: true
type: TEXT
groupName: toner
- context: item
description: Cyan Toner Level Item
label: Item
name: CyanLevelItem
required: true
type: TEXT
groupName: toner
- context: item
description: Magenta Toner Level Item
label: Item
name: MagentaLevelItem
required: true
type: TEXT
groupName: toner
- context: item
description: Yellow Toner Level Item
label: Item
name: YellowLevelItem
required: true
type: TEXT
groupName: toner
- default: Total Lifetime Pages
description: Total LifeTime pages title
label: Title
name: TotalPagesTitle
required: false
type: TEXT
groupName: pages
- context: item
description: Total Lifetime Pages item
label: Item
name: TotalLifetimePagesItem
required: false
type: TEXT
groupName: pages
- default: Tray Empty/Open
description: Tray Empty/Open Title
label: Title
name: errors
required: false
type: TEXT
groupName: errors
- context: item
description: Tray Empty/Open item
label: Item
name: TrayEmtpyOpenItem
required: false
type: TEXT
groupName: errors
- context: item
description: Jams item
label: Item
name: JamsItem
required: false
type: TEXT
groupName: errors
- context: item
description: Missed Picks item
label: Item
name: MissedPicksItem
required: false
type: TEXT
groupName: errors
parameterGroups:
- name: header
label: Header
- name: toner
label: Toner Level
- name: pages
label: Pages
- name: errors
label: Tray & Missed Picks
timestamp: Sep 26, 2022, 10:14:28 AM
component: oh-list-item
config:
icon: =props.IconPrinter
iconColor: '=(items[props.PrinterNetworkStateItem].state == "OFF") ? "red" : "green"'
style:
--f7-list-item-after-font-size: 16px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
subtitle: '=((items[props.PrinterNetworkStateItem].state == "OFF") ? "Offline - " : "Online - ") + (items[props.PrinterStatusItem].displayState)'
title: =props.printerTitle
slots:
accordion:
- component: f7-list
config:
mediaList: true
style:
background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247, 247, 247)'"
slots:
default:
- component: f7-list-item
config:
class:
- black-toner-level
style:
- margin-right: -25px
slots:
content:
- component: f7-list-item-row
slots:
default:
- component: f7-list-item-cell
config:
style:
width: 10px
slots:
default:
- component: oh-icon
config:
color: "=themeOptions.dark === 'dark' ? 'gray' : 'black'"
icon: f7:drop_fill
height: 32px
width: 32px
font-size: 32px
- component: f7-list-item-cell
config:
style:
margin-left: 32px
width: 100%
slots:
default:
- component: f7-progressbar
config:
progress: =Number(items[props.BlackLevelItem].state.split(' ')[0])
style:
--f7-progressbar-height: 26px
--f7-theme-color: rgb(0, 0, 0)
- component: f7-list-item-cell
config:
style:
width: 0px
slots:
default:
- component: f7-list-item
config:
title: =items[props.BlackLevelItem].state
class:
- float-right
style:
--f7-list-item-title-font-size: 13px
margin-top: 5px
margin-right: 13px
- component: f7-list-item
config:
class:
- cyan-toner-level
style:
- margin-right: -25px
slots:
content:
- component: f7-list-item-row
slots:
default:
- component: f7-list-item-cell
config:
style:
width: 10px
slots:
default:
- component: oh-icon
config:
color: blue
icon: f7:drop_fill
height: 32px
width: 32px
font-size: 32px
- component: f7-list-item-cell
config:
style:
margin-left: 32px
slots:
default:
- component: f7-progressbar
config:
progress: =Number(items[props.CyanLevelItem].state.split(' ')[0])
style:
--f7-progressbar-height: 26px
--f7-theme-color: rgb(0, 100, 200)
- component: f7-list-item-cell
config:
style:
width: 0px
slots:
default:
- component: f7-list-item
config:
title: =items[props.CyanLevelItem].state
class:
- float-right
style:
--f7-list-item-title-font-size: 13px
margin-top: 5px
margin-right: 13px
- component: f7-list-item
config:
class:
- magenta-toner-level
style:
- margin-right: -25px
slots:
content:
- component: f7-list-item-row
slots:
default:
- component: f7-list-item-cell
config:
style:
width: 10px
slots:
default:
- component: oh-icon
config:
color: purple
icon: f7:drop_fill
height: 32px
width: 32px
font-size: 32px
- component: f7-list-item-cell
config:
style:
margin-left: 32px
slots:
default:
- component: f7-progressbar
config:
progress: =Number(items[props.MagentaLevelItem].state.split(' ')[0])
style:
--f7-progressbar-height: 26px
--f7-theme-color: rgb(255, 0, 255)
- component: f7-list-item-cell
config:
style:
width: 0px
slots:
default:
- component: f7-list-item
config:
title: =items[props.MagentaLevelItem].state
class:
- float-right
style:
--f7-list-item-title-font-size: 13px
margin-top: 5px
margin-right: 13px
- component: f7-list-item
config:
class:
- yellow-toner-level
style:
- margin-right: -25px
slots:
content:
- component: f7-list-item-row
slots:
default:
- component: f7-list-item-cell
config:
style:
width: 10px
slots:
default:
- component: oh-icon
config:
color: yellow
icon: f7:drop_fill
height: 32px
width: 32px
font-size: 32px
- component: f7-list-item-cell
config:
style:
margin-left: 32px
slots:
default:
- component: f7-progressbar
config:
progress: =Number(items[props.YellowLevelItem].state.split(' ')[0])
style:
--f7-progressbar-height: 26px
--f7-theme-color: rgb(255, 255, 0)
- component: f7-list-item-cell
config:
style:
width: 0px
slots:
default:
- component: f7-list-item
config:
title: =items[props.YellowLevelItem].state
class:
- float-right
style:
--f7-list-item-title-font-size: 13px
margin-top: 5px
margin-right: 13px
- component: oh-label-item
config:
icon: f7:doc_on_doc
iconColor: gray
item: =props.TotalLifetimePagesItem
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
title: =props.TotalPagesTitle
- component: oh-label-item
config:
icon: f7:exclamationmark_circle
iconColor: gray
item: =props.TrayEmtpyOpenItem
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-subtitle-font-size: 14px
--f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
subtitle: ="Jams:" + " " + items[props.JamsItem].state + " / " + "Missed Picks:" + " " + items[props.MissedPicksItem].state
title: =props.errors
