Is it possible to us an expression to change the background colour based on an item state?
I tried this YAML code I know how to do, but it didn’t work
’ =(items.XXX.state == “ON”) ? “colour 1”: “colour 2” ’
And it is possible to use both colour AND image, then make the image transparent?
I’m trying to colourise a jpeg image with a conditional colour.
setting opacity: 50% will make the entire page transparent.
style:
background: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")
background-color: red
background-opacity: 50%
try with additional space character and different " and ’
' =(items.XXX.state == "ON") ? "colour 1" : "colour 2"'
No, doesn’t work
'=(items.XXX.state == "ON") ? "colour 1" : "colour 2"'
No. Still doesn’t work. Maybe something to do with the Page not accepting an expression?
I am trying to put this in the config of the page. I know I have it in the right place, because if I just choose a static colour without an expression it works.
can you post a little bit more of your code?
All of the below comes frome the Code tab of the page I am editing:
config:
label: Heating Controls
sidebar: true
style:
background: '=(items.TadoHeating_AtHome.state == "ON") ? "red": "blue"'
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:HeatingControlsCell
config:
item: TadoHeating_AtHome
- component: oh-block
config:
title: Stats
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:widget_TadoHeatingPower
config: {}
- component: widget:widget_RoomTemperatures
config: {}
- component: oh-label-cell
config:
subtitle: Water tank
footer: '=(items.WaterTankSensor_Temperature.state >= "70") ? "Good for a bath": (items.WaterTankSensor_Temperature.state >= "66") ? "Ok for a bath": (items.WaterTankSensor_Temperature.state >= "60") ? "Ok for dishes": " "'
item: WaterTankSensor_Temperature
icon: '=(items.WaterTankSensor_Temperature.state < "50") ? "oh:temperature_cold": (items.WaterTankSensor_Temperature.state >= "50" && items.WaterTankSensor_Temperature.state < "70") ? "oh:temperature": "oh:temperature_hot"'
on: true
color: '=(items.WaterTankSensor_Temperature.state < "50") ? "blue": (items.WaterTankSensor_Temperature.state >= "50" & items.WaterTankSensor_Temperature.state < "66") ? "yellow": (items.WaterTankSensor_Temperature.state >= "66" & items.WaterTankSensor_Temperature.state < "68") ? "orange": (items.WaterTankSensor_Temperature.state >= "68" & items.WaterTankSensor_Temperature.state < "70") ? "deeporange": (items.WaterTankSensor_Temperature.state >= "70" & items.WaterTankSensor_Temperature.state < "72") ? "pink": (items.WaterTankSensor_Temperature.state >= "72") ? "red": "white"'
action: analyzer
actionAnalyzerItems:
- WaterTankSensor_Temperature
actionAnalyzerCoordSystem: time
expandable: false
- component: widget:widget-cell-Outside
config: {}
- component: oh-block
config:
title: TRVs
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:Temperature Cell
config:
location: Sitting room
temperature: SittingRoomTRV_Temperature
target: SittingRoomTRV_TargetTemperature
heatp: SittingRoomTRV_HeatingPower
open: WindowSensorSittingroom_OpenClose
hvac: SittingRoomTRV_HVACMode
- component: widget:Temperature Cell
config:
location: Kitchen
temperature: KitchenTRV_Temperature
target: KitchenTRV_TargetTemperature
heatp: KitchenTRV_HeatingPower
open: DoorSensorFrontdoor_OpenClose
hvac: KitchenTRV_HVACMode
open2: DoorSensorBackDoor_OpenClose
- component: widget:Temperature Cell
config:
location: Hall
temperature: HallTRV_Temperature
target: HallTRV_TargetTemperature
heatp: HallTRV_HeatingPower
open: DoorSensorFrontdoor_OpenClose
hvac: HallTRV_HVACMode
- component: widget:Temperature Cell
config:
location: Bath room
temperature: BathroomTRV_Temperature
target: BathroomTRV_TargetTemperature
heatp: BathroomTRV_HeatingPower
hvac: BathroomTRV_HVACMode
open: DoorSensorBackDoor_OpenClose
- component: widget:Temperature Cell
config:
location: Back room
temperature: BackRoomTRV_Temperature
target: BackRoomTRV_TargetTemperature
heatp: BackRoomTRV_HeatingPower
open: WindowSensorBackroom_OpenClose
hvac: BackRoomTRV_HVACMode
- component: widget:Temperature Cell
config:
location: Long bedroom
temperature: LongBedRoomTRV_Temperature
target: LongBedRoomTRV_TargetTemperature
heatp: LongBedRoomTRV_HeatingPower
hvac: LongBedRoomTRV_HVACMode
- component: oh-block
config:
title: Automations
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: oh-label-cell
config:
label: 1hr Boost
action: rule
actionRule: 3ed8fa18ff
icon: f7:flame
color: red
on: red
- component: oh-label-cell
config:
label: Dry clothes
action: rule
actionRule: c8f8f2fb81
icon: f7:flame
color: red
on: red
- component: oh-label-cell
config:
icon: f7:snow
color: lightblue
label: Cool down
action: rule
on: "true"
actionRule: 7ddeffbb40
- component: oh-label-cell
config:
color: orange
label: Run schedule
action: rule
actionRule: 33e1fa3804
on: "true"
icon: F7:calendar
- component: oh-block
config:
title: Operation Mode and Timers
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:widget_TRVTimer
config:
location: Sitting Room
duration: SittingRoomTRV_TimerDuration
endtime: SittingRoomTRV_OverlayEndTime
zoneop: SittingRoomTRV_ZoneOperationMode
- component: widget:widget_TRVTimer
config:
location: Kitchen
duration: KitchenTRV_TimerDuration
endtime: KitchenTRV_OverlayEndTime
zoneop: KitchenTRV_ZoneOperationMode
- component: widget:widget_TRVTimer
config:
location: Bath room
duration: BathroomTRV_TimerDuration
endtime: BathroomTRV_OverlayEndTime
zoneop: BathroomTRV_ZoneOperationMode
- component: widget:widget_TRVTimer
config:
location: Hall
duration: HallTRV_TimerDuration
endtime: HallTRV_OverlayEndTime
zoneop: HallTRV_ZoneOperationMode
- component: widget:widget_TRVTimer
config:
location: Back room
duration: BackRoomTRV_TimerDuration
endtime: BackRoomTRV_OverlayEndTime
zoneop: BackRoomTRV_ZoneOperationMode
- component: widget:widget_TRVTimer
config:
location: Long bedroom
duration: LongBedRoomTRV_TimerDuration
endtime: LongBedRoomTRV_OverlayEndTime
zoneop: LongBedRoomTRV_ZoneOperationMode
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: widget:widget_LaunchMyTado
config: {}
masonry: []
add a space character before : (should work without also, but anyway…)
just for testing purpose, replace with this line:
'=("1" == "1") ? "red" : "blue"'
background should now be red
and with this line:
'=("1" == "2") ? "red" : "blue"'
should now be blue
i don´t think this is currently possible! See a post i had about a similar request. I have added a feature request, would be great if you comment in this feature request as well. THe more people want it, the better this is for priority for the great developers. 
interesting. in that case wrap your content into an f7-block container
OK.
Here’s another one then -
Is it possible to use a url from an item state?
config:
label: Audio
style:
background: center / cover no-repeat url(IkeaSYMFONISKSpeakerZonePlayer_CurrentAlbumCoverArtURL.state)
The state in this item is
http://10.0.0.32:1400/getaa?s=1&u=x-sonos-spotify%3aspotify%253atrack%253a2fXKyAyPrEa24c6PJyqznF%3fsid%3d9%26flags%3d8224%26sn%3d2
And this works if I paste this url directly in to the background url field.
You have to use the right syntax to access it, which would be:
background: ="center / cover no-repeat url(" + items.IkeaSYMFONISKSpeakerZonePlayer_CurrentAlbumCoverArtURL.state + ")"
Thanks. This works as an expression and does give me the correct string now.
But it won’t work in the config of a page. So same problem as before for using it as a background.
Correct this refers to the issue / behaviour that Jan mentioned above.
Just following up on a question that got lost in the flurry of the last issue.
Is it possible to use both colour AND image, then make the top layer transparent?
I’d like to colourise a jpeg image with a colour or gradient (and in the future, make these colours conditional when OpenHab allows).
setting opacity: 50% will make the entire page transparent.
Using rgba for the colour might be a clue to get transparancy, but no image shows underneath with anything I have tried.
Something like this??
style:
background-image: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")
background-color: red
background-opacity: 50%
I think we`re still talking about page-settings here?!
If the top-layer is the background-color, yes - you-can set it’s transparency with the use of linear-gradient rgba-values. This does not work the other way around for pages as you can’t use the workaround with css selectors on a page-level (which is mandatory here).
But I don’t think this matters for you as both variants lead to the same look (in this case).
Page YAML
config:
layoutType: responsive
label: "# Multiple background example"
sidebar: true
style:
background: linear-gradient(rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)), center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg")
For widgets you could also use a method which involves the use of css selector :before:
Card YAML
uid: background_opacity
component: f7-block
config:
stylesheet: >
.cardBg {
position: relative;
background: red
}
.cardBg:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.6;
background: center / cover no-repeat url("https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Inntal_Desktop_1920x1080.jpg");
}
slots:
default:
- component: f7-card
config:
title: Title
content: Some content
footer: ...and a footer
class:
- cardBg
The css property opacity applies to all it’s child-elements by design.
It might be worth having a closer look at the css background-property - you can’t combine background-image with parameters like center (background-position), cover (background-size) or no-repeat (background-repeat).
→ https://developer.mozilla.org/en-US/docs/Web/CSS/background
2 Likes
Excellent! Thank you.
OpenHab is like the DaVinci code. Except actually hard to figure out.
While I have you, how do you change the colour and formatting of text in Title fields?
Again, I’m trying to style pages, so I sometimes need to change my text to white to work on dark backgrounds (and visa versa), and probably to override light and dark theme changes.
Although I’d like to know how to format all text items, I specifically want to know how to colour oh-block Titles
place the cursor to the correct position where you would add another config property and press ctrl-space. you get a dropdown menu where you find the required value.
in most cases it is either
color
fontColor
textColor