i am new to Openhab 3 and and try to “create my first Dashboard”.
Is there a way to add a “second Stat” to a cell?
for example:
I add a cell “from a think” → my Socket for my Server so I can see if the socket is on oder off, i can add trendline that all works.
Now a want to add to this cell a second value → the power consumption i want this on right side of this cell.
Is the only way here to create a custom widget? I tried but i am really really bad here.
here is a pic “in basic” i want “these both cells in one cell”.
it just looks complex, but additionally to the page that Rich pointed you to, there are good examples out there in the community with similar widgets you want where you can learn from… just give it a go… last but not least I have perceived this community as very helpful in case of questions if you get stuck.
Hallo,
I have started “tinkering”. At least I get the consumption and a PowerButton displayed.
What I can not manage:
Is there a possibility “that the whole button is an ON/OFF switch” or how do I define the size of the button.
Wie gesagt das ist für mich alles Absolut neu, gibt es irgendwo eine Verständlich “Befehlsübersicht”?
Ich sehe ja z.b. action: toggle aber was kann Ich bei Action Command reinschreiben z.b. ?
uid: testwidget
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item to Power On/Off
label: Power
name: itemPower
required: false
type: TEXT
- context: item
label: Item to Show consumption
name: showconsumption
required: false
type: TEXT
parameterGroups: []
timestamp: May 4, 2021, 10:31:09 AM
component: f7-card
config:
style:
border-radius: 15px
height: 120px
margin-left: 5px
margin-right: 5px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 16px
margin-top: 0x
- component: f7-block
config:
style:
position: absolute
bottom: -20px
left: 16px
flex-direction: row
slots:
default:
- component: Label
config:
text: "=items[props.showconsumption].displayState"
style:
font-size: 22px
font-weight: 400
margin-left: 0px
margin-top: 0px
- component: f7-col
slots:
default:
- component: oh-button
config:
actionItem: =props.itemPower
action: toggle
actionCommand: ON
actionCommandAlt: OFF
iconF7: power
iconColor: white
Thanks again for your help.
Here is my result and code, maybe something can improved here.
I have a Problem, i tested my widget, the Problem is the second stat (in the picture 27W) is not show with all items.
I tested it with my air Purifier and set the second stat to Humidty then only the graf is shown but no the value.
Can i somewhere find “a code reference”?
uid: Power+Display_Second_Stat
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon bevor Title (f7 without :f7)
label: Icon
name: icon
required: false
type: TEXT
- context: item
description: Item to Power On/Off
label: Power
name: itemPower
required: false
type: TEXT
- context: item
label: Item to Show consumption
name: showconsumption
required: false
type: TEXT
parameterGroups: []
timestamp: May 4, 2021, 5:28:30 PM
component: f7-card
config:
noShadow: false
style:
border-radius: 15px
height: 120px
margin-left: 5px
margin-right: 5px
min-width: 110px
max-width: 400px
slots:
content:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 22
style:
margin-right: 10px
margin-top: 7px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 14px
margin-top: 8px
margin-left: -2px
- component: Label
config:
text: =items[props.itemPower].state
style:
font-size: 14px
margin-left: 5px
margin-top: 8px
- component: Label
config:
text: =items[props.showconsumption].displayState
style:
font-size: 20px
margin-left: 2px
margin-top: 30px
- component: oh-trend
config:
trendItem: =[props.showconsumption]
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(35%)
position: absolute
width: 95%
height: 100%
top: 30px
left: 10px
- component: oh-link
config:
action: toggle
actionItem: =props.itemPower
actionCommand: ON
actionCommandAlt: OFF
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
z-index: 0
i don’t think that the z-index makes a difference here, but I noticed if I change from slots: content: to slots: default: the full box is the link. With slots: content: this breaks up if you hoover over.
uid: Power+Display_Second_Stat
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon bevor Title (f7 without :f7)
label: Icon
name: icon
required: false
type: TEXT
- context: item
description: Item to Power On/Off
label: Power
name: itemPower
required: false
type: TEXT
- context: item
label: Item to Show consumption
name: showconsumption
required: false
type: TEXT
parameterGroups: []
timestamp: May 4, 2021, 5:28:30 PM
component: f7-card
config:
noShadow: false
style:
border-radius: 15px
height: 120px
margin-left: 5px
margin-right: 5px
min-width: 110px
max-width: 400px
slots:
default:
- component: f7-block
config:
style:
position: absolute
top: -5px
left: 16px
flex-direction: row
display: flex
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 22
style:
margin-right: 10px
margin-top: 7px
visible: "=props.icon ? true : false"
- component: Label
config:
text: "=props.title ? props.title : ''"
style:
font-size: 14px
margin-top: 8px
margin-left: -2px
- component: Label
config:
text: =items[props.itemPower].state
style:
font-size: 14px
margin-left: 5px
margin-top: 8px
- component: Label
config:
text: =items[props.showconsumption].displayState
style:
font-size: 20px
margin-left: 2px
margin-top: 30px
- component: oh-trend
config:
trendItem: =[props.showconsumption]
style:
--f7-theme-color-bg-color: transparent
background: var(--f7-theme-color-bg-color)
filter: opacity(35%)
position: absolute
width: 95%
height: 100%
top: 30px
left: 10px
- component: oh-link
config:
action: toggle
actionItem: =props.itemPower
actionCommand: ON
actionCommandAlt: OFF
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
z-index: 0
The problem is likely using only the display state. Not every item has a display state, this is only available if the state description pattern has been set, I believe. So this value will be blank in the items dict for items without a set pattern. This is why, for example the default code that comes up with a new widget has:
This uses the displayState unless there isn’t one at which point it falls back to the basic state. Try replicating that statement in your label’s text.
