Well… it doesn’t exist. Neither in Openhab nor in Framework 7 
A tank is a visual representation of a container containing a fluid. It could be used for a rainwater tank or more commonly for the ink levels in printer cartridges or tanks (e.g. Epson).
I have seen some widgets that use F7 progressbars for this. I even made one:
This looks nice, but it is not a correct representation of the real world: the ink leaks if the tanks are horizontal.
With some CSS learning, I made a more correct widget:
uid: Tank
tags: []
props:
parameters:
- default: Epson Printer
description: Title
name: title
required: false
type: TEXT
- context: item
default: EpsonStatus
description: Printer Status item
label: Item
name: EpsonStatus
required: false
type: TEXT
- context: item
default: EpsonPaginas
description: Totaal aantal afgedrukte pagina's
label: Item
name: EpsonPaginas
required: false
type: TEXT
groupName: header
- context: item
default: EpsonZwart
description: Epson inkt
label: Item
name: EpsonZwart
required: false
type: TEXT
- context: item
default: EpsonFotoZwart
description: Epson inkt
label: Item
name: EpsonFotoZwart
required: false
type: TEXT
- context: item
default: EpsonCyaan
description: Cyan Toner Level Item
label: Item
name: EpsonCyaan
required: true
type: TEXT
- context: item
default: EpsonMagenta
description: Magenta Toner Level Item
label: Item
name: EpsonMagenta
required: true
type: TEXT
- context: item
default: EpsonGeel
description: Yellow Toner Level Item
label: Item
name: EpsonGeel
required: true
type: TEXT
- context: item
default: EpsonGrijs
description: Grey Toner Level Item
label: Item
name: EpsonGrijs
required: true
type: TEXT
- context: item
default: EpsonAfval
description: Waste Level Item
label: Item
name: EpsonAfval
required: true
type: TEXT
timestamp: Feb 22, 2024, 7:36:49 PM
component: f7-card
config:
noShadow: true
outline: true
title: =props.title
slots:
content:
- component: f7-block
config:
style:
background-color: =themeOptions.dark=='dark'?'rgb(50,50,50)':'rgb(220,220,220)'
display: grid
grid-template-columns: repeat(7, 1fr)
grid-template-rows: 5fr 1fr
height: 200px
margin: -10px
padding-top: 15px
stylesheet: >
.level {
align-self: end;
justify-self: center;
text-align: center;
width: 60%;
} .recipient {
height: 100%;
width: 60%;
align-self: end;
justify-self: center;
border-style: solid;
border-width: 2px;
border-radius: 5px;
color: =themeOptions.dark=='dark'?'white':'black';
} .label {
text-align: center;
}
slots:
default:
- component: Label
config:
class: ='level'
style:
background: black
color: white
grid-area: 1/1
height: =Number.parseInt(items[props.EpsonZwart].state)+'%'
text: =Number.parseInt(items[props.EpsonZwart].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/1
- component: Label
config:
class: ='label'
text: Zwart
- component: Label
config:
class: ='level'
style:
background: rgb(20, 20, 20)
color: white
grid-area: 1/2
height: =Number.parseInt(items[props.EpsonFotoZwart].state)+'%'
text: =Number.parseInt(items[props.EpsonFotoZwart].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/2
- component: Label
config:
class: ='label'
text: FotoZwart
- component: Label
config:
class: ='level'
style:
background: cyan
color: black
grid-area: 1/3
height: =Number.parseInt(items[props.EpsonCyaan].state)+'%'
text: =Number.parseInt(items[props.EpsonCyaan].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/3
- component: Label
config:
class: ='label'
text: Cyaan
- component: Label
config:
class: ='level'
style:
background: yellow
color: black
grid-area: 1/4
height: =Number.parseInt(items[props.EpsonGeel].state)+'%'
text: =Number.parseInt(items[props.EpsonGeel].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/4
- component: Label
config:
class: ='label'
text: Geel
- component: Label
config:
class: ='level'
style:
background: magenta
color: black
grid-area: 1/5
height: =Number.parseInt(items[props.EpsonMagenta].state)+'%'
text: =Number.parseInt(items[props.EpsonMagenta].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/5
- component: Label
config:
class: ='label'
text: Magenta
- component: Label
config:
class: ='level'
style:
background: rgb(20, 20, 20)
color: white
grid-area: 1/6
height: =Number.parseInt(items[props.EpsonGrijs].state)+'%'
text: =Number.parseInt(items[props.EpsonGrijs].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/6
- component: Label
config:
class: ='label'
text: Grijs
- component: Label
config:
class: ='level'
style:
background: black
color: white
grid-area: 1/7
height: =Number.parseInt(items[props.EpsonAfval].state)+'%'
text: =Number.parseInt(items[props.EpsonAfval].state)+'%'
- component: Label
config:
class: ='recipient'
style:
grid-area: 1/7
- component: Label
config:
class: ='label'
text: Afval
- component: f7-block
config:
outline: false
style:
display: flex
gap: 10px
height: 30px
justify-content: center
margin-top: 10px
padding: 20px
slots:
default:
- component: Label
config:
style:
text-align: left
width: 20%
text: "Totale pagina's:"
- component: Label
config:
style:
text-align: left
width: 20%
text: =items[props.EpsonPaginas].state
- component: f7-block
config:
outline: false
style:
display: flex
gap: 10px
justify-content: center
padding: 20px
slots:
default:
- component: Label
config:
style:
text-align: left
width: 20%
text: "Status:"
- component: Label
config:
style:
text-align: left
width: 20%
text: =items[props.EpsonStatus].state
The ink levels are visualized in Label components. The tanks are also Label components. Both are positioned over each other with css-grid (explanation can be found in https://www.w3schools.com/css/css_grid.asp) .
Some other techniques can be used.
Sliders
They can be positioned vertically. But they are not really made to represent a tank.
Icons
I once made one for a vertical battery. Basically you make a svg file (e.g. with Inkscape). Then you make say 10 versions of the same, but with increasing fill levels.
The icons come in the icons/classic directory. They can be used in a component with ‘iconUseState: true’. The disadvantage is that there is a 10% gap between two levels. Not a problem for a single tank, but for a printer with a couple of tanks or cartridges, you would not see the difference between 61% and 69%.
Does anyone have better idea’s?
Edit: the widget has been reworked on 23 feb 2024:
• Positioning is now done with CSS-grid, which is a good technique to superpose the two components: tank and ink level.
• Stylesheets are used to minimize the repetitive typing of styles.
• The components for tank and ink level are now Label components instead of Buttons.
