ysc
(Yannick Schaus)
November 11, 2020, 10:19am
21
That’s how the yaml deserializer works by default, and it seems the editor syntax highlighting doesn’t like it, but it shouldn’t have any influence on the expression itself. I think that’s more because the result should be a string instead of a number, so try:
"=((items... ? 1 : 0) + (items... ? 1 : 0)).toString()
hmerk
(Hans-Jörg Merk)
November 11, 2020, 10:54am
22
Thanks @ysc , that was the missing link. Now it is working, even with line wrapping :
- component: oh-label-item
config:
title: offene Türen
item: gDoors
icon: oh:door
badgeColor: '=(items.gDoors.state === "CLOSED") ? "green" : "red"'
badge: '=((items.ContactFrontDoor.state === "CLOSED" ? 0 : 1) +
(items.ContactTerraceDoor.state === "CLOSED" ? 0 :
1)).toString()'
iconUseState: true
ysc
(Yannick Schaus)
November 11, 2020, 11:55am
23
Cool, note that you can be even more creative, since you can customize the rendering of most parts of a list item or even the cell header/background:
component: oh-cell
config:
title: Doors & Windows
slots:
header:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: f7-list-item
config:
title: Doors & Windows
slots:
title:
- component: f7-chip
config:
text: "=((items.FGDW002WindowSensor_Open.state === 'OPEN' ? 1 : 0) +
(items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN' ? 1 :
0)).toString()"
- component: Label
config:
text: Front Door open!
style:
color: red
visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN'
- component: Label
config:
text: Living Room Window open!
style:
color: red
visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'
Another version:
component: oh-cell
config:
title: Doors & Windows
slots:
background:
- component: f7-block
config:
class:
- card-opened-fade-out
style:
position: absolute
right: 10px
bottom: 10px
slots:
default:
- component: f7-chip
config:
class:
- margin-left
iconF7: exclamationmark_triangle
iconColor: red
text: Front Door
visible: =items.HS1DSZDoorSensor_DoorSensor.state === 'OPEN'
- component: f7-chip
config:
class:
- margin-left
iconF7: exclamationmark_triangle
iconColor: red
text: Living Room Window
visible: =items.FGDW002WindowSensor_Open.state === 'OPEN'
Be aware though that visible
attributes are not taken into account when editing (this is by design), so you might think it doesn’t work, switch to Run mode to see the final result with the visibility conditions applied.
1 Like
hmerk
(Hans-Jörg Merk)
November 11, 2020, 11:57am
24
Thanks Yannick, cool stuff. I will give it a try later on
curlyel
(Curlyel)
February 22, 2021, 8:51am
25
Hi guys,
could you point me in the right direction, how to make a oh-cell content (meaning the header:
slot) spanning the whole widht of the cell?
The intention is to align some element (e.g. a badge) next to the right border or to have the oh-trend element span the full width.
Currently the content’s width is derived from the widest flex element:
Notice the trendline ending at the right end of the title label…
That’s the beginning my current widget code:
component: oh-cell
config:
expandable: false
color: '=(items[props.mainItem+"_Fail"].state > 0) ? "red" : items[props.mainItem+"_Warn"].state > 0 : "orange" : ""'
on: true
action: popup
actionModal: widget:Popup_Timestamp
actionModalConfig:
title: =props.title
icon: =props.icon
mainItem: =props.mainItem
secItem: =props.secItem
delimiter: =props.delimiter
footerOk: =props.footerOk
footerBad: =props.footerBad
slots:
default:
- component: oh-label-card
slots:
default:
- component: oh-list
header:
- component: oh-trend
config:
trendItem: =props.mainItem+"_Warn"
trendGradient:
- red
- orange
- green
- component: f7-col
slots:
default:
EDIT:
for the OH-trend try:
style:
position: absolute
width: 100%
height: 100%
top: 0
left: 0
z-index: 1
curlyel
(Curlyel)
February 22, 2021, 11:00am
27
Unfortunately, that width: 100%
does not derive the width of the whole cell, it just gives the width of the flex content in the header: -slot
That’s why I’m asking
I can increase the width, e.g. to 280px by spreading some content:
header:
- component: oh-trend
config:
trendItem: =props.mainItem+"_Warn"
- component: f7-col
slots:
default:
- component: f7-row
config:
class:
- align-items-center
- justify-content-flex-start
style:
font-weight: 400
width: 280px
Which gives:
But - of course - I can’t used fixed values here
So I’m almost done, just missing the value of the variable width of the cell…
Question remains:
Where to derive/how to calculate the width of the parent cell from?
ok, got it. Did you try the z-index?
Another workaround is to move away from the oh cell and oh label card to an f7 card. You are fully flexible to put the content of the widget where you want it to be, have more flexibility on the background like color etc… and e.g. the trend line goes like the screenshot i sent.
can you add the trend line not into the header but as additional component:
- component: oh-trend
config:
trendItem: =[props.itemCo2]
trendGradient:
- green
- orange
- red
style:
--f7-theme-color-bg-color: transparent
background: transparent
filter: opacity(30%)
position: absolute
width: 100%
height: 100%
top: 0
left: 2
z-index: 1
curlyel
(Curlyel)
February 22, 2021, 11:18am
30
muelli1967:
Did you try the z-index
Yes.
I know, but I’m almost happy with the customization/style options.
AND: I’m quite sure, that there is a way to get the actual width of the parent cell.
I’m just lacking some CSS/f7/… experience here …
curlyel
(Curlyel)
February 22, 2021, 11:23am
31
muelli1967:
not into the header
Not sure I understand …
I thought, that the content of a oh-cell
which should be shown when not-expanded has to go into the header:
slot.
The content of the expanded cell goes then into slot default:
Means: If I move the trend component from header:
to default:
it will appear only if the cell got expandend - right?
And: I’m not just after the trendline. As I wrote, this is just an example . I’m more after getting the actual width of the cell
you are right, i just did a test. The oh-cell does not allow this as far as i can see
you then might want to look to switch to f7 as you anyway already create your own widget. have fun!
curlyel
(Curlyel)
February 22, 2021, 11:45am
33
Thanks a lot for your input!
Still hoping, that I’m just lacking some information.
I’m convinced, that there must be way to inherit the width …
Not giving up that quickly
curlyel
(Curlyel)
February 22, 2021, 2:35pm
34
@ysc , I’ve had a look into …
org.openhab.ui/web/src/components/widgets/layout/oh-grid-cells.vue :
.cell-placeholder
margin-top calc(var(--f7-menu-item-height) + var(--f7-card-expandable-margin-vertical)) !important
height 120px
margin-left 3px
margin-right 3px
width calc(100% - 6px)
.button
height 120px
padding 35px
If I understand correctly, the width of the placeholder is what I’m after
Any hint, how I can access the resulting/computed width of the placeholder in my header:
-slot of the oh-cell
?
EDIT:
… or some other idea how to stretch the header-elements to the width of the “parent” cell?
ysc
(Yannick Schaus)
February 22, 2021, 3:52pm
35
The background
slot will have the width of the cell (so you can set width: 100%
to elements in that slot) while the header
slot will have the width of the expanded cell (even when it’s not expanded).
Normally the background
slot is only used for non-interactive elements to put behind the elements in header
but you probably still can add interactive stuff anyway.
See [Main UI] Cell Widgets by ghys · Pull Request #317 · openhab/openhab-webui · GitHub
1 Like
curlyel
(Curlyel)
February 22, 2021, 5:57pm
36
Excellent! That was the missing link:
Many thanks Yannick!
1 Like