Hello,
is it possible to change the color of a cell with an HSL value?
I would like to make an interacitve cell which changes the color of the cell depending on the color of my nanoleaf light.
In the oh cells, color is not a direct conduit to the background of the element. The value of the color property gets used by the underlying f7 components which means that it gets concatenated into a class name that is applied to the cell (e.g., bg-color-green) which then gets styled via some default f7 styling from there. So for the color property only the colors names that are listed in the f7 theme docs can be used.
To get other background colors, you have to change the background css style, but again because the oh-cells are intended to be low-code, easy-configure components this not directly accessible through the style property. The only way to get custom colors into the background of an oh-cell is to find the css selector for your cell and use the stylesheet property to set the background. In your case, there’s one more level of difficulty, stylesheet does not accept expressions. See this post for how to use css variables as a workaround to get dynamic values into the stylesheet.
1 Like
Thank you very much for your answer, the coloring of the cells worked like a charm with your description!
But I can’t figure out how to use the variable. I’ve created a variable called --hsl-color1, and I’m assigning it later on in my stylesheet, but somehow the cell still remains black. Do you know by any chance what I did wrong? The cell gets colored when I replace the variable with a number, so the stylesheet should be correct.
Later on I would like to assign an item to the variable like this: --hsl-color: =items.color.state . Is there something I need to look out for? The item is a string value in the HSL format f.ex (70, 50%, 80%).
This happens with some widgets, and I’m not 100% sure what the difference is. In some cases, such as this one, the stylesheet declaration is getting processed before the style object. So when the background-color is processed, --hsl-color1 hasn’t been defined yet. The solution is to add in an element that holds the cell without adding any additional visual changes but can define the variable before the cell.
component: f7-block
config:
style:
--hsl-color1: =40 * 1.5
slots:
default:
- component: oh-label-cell
config:
on: true
stylesheet: >
.cell-background {
background-color: hsl(var(--hsl-color1),60%,60%);
}
As long as you know exactly what the state format is and how to concatenate that into a string that matches the style setting you want then there’s no problem. If your item state is (70, 50%, 80%) then you would want something like:
style:
--hsl-color: =hsl + item.color.state #equals 'hsl(70, 50%, 80%)'
and
background-color: var(--hsl-color);
1 Like
It’s weird indeed. After applying it to everything, the block, the row, the column and the cell, it worked like expected.
Thank you very much for you help, the result is awesome!
1 Like
Hi @JustinG - does this solution still work in OpenHAB 4.1.2+?
I’ve just tried this simple test page colour does not seem to change
config:
label: ColourCellTest
blocks:
- component: oh-block
config:
style:
--hsl-color1: =40 * 1.5
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: oh-label-cell
config:
on: true
stylesheet: |
.cell-background {
background-color: hsl(var(--hsl-color1),60%,60%);
}
label: My colour test
masonry: null
grid: []
canvas: []
Welcome to the forums.
What change are you expecting? You have set the hue of your hsv value to a constant, so without manually changing that value you are not going to see any color differences. However, if you test the page and note the color
and then manually change it to something like:
--hsl-color1: =160 * 1.5
and test it again, you should see a completely different color
The code itself works just fine. Nothing has changed that I’m aware of in OH4 versions to prevent this.
Thank you! I’ve been setting up my OpenHAB install, overview page, and these forums have helped me massively 
I’m expecting the results you have above. For some reason I have no change in colour no matter what I change the constant to. My approach is to do the most simple use case (using a constant), get that concept of HSL colours working for label cells which I use a lot on my overview and detail pages, then adjust the constant to a variable.
Could it be my dark theme conflicting?
No, it works just fine with dark theme as well.
The behavior you are describing is what happens if the cell is off (no background color takes effect). Are you sure that the code you are using is consistent with what you have posted above with
on: true
for the cell you are testing?
Thanks @JustinG yes the code is an exact copy and paste of the above with “On: true”. I even copy and pasted back into my code to make sure. Still doesn’t work. I also added
color: red
The validate On is working correctly and the label background turns red (then removed color). I tried all different theme combinations in Help > About, still can’t get the results you have. Strange!
OK, that is strange. It’s time to investigate some less likely issues, it seems.
- What browser are you using?
- Do you see any errors in the browser console when you try to load this page?
- If you inspect the cell element do you see something that looks like this?
I’m using Chrome Version 124.0.6367.203 (Official Build) (x86_64). I also tried on Safari and on iOS iPhone. No colour change. Interestingly when I replace the variable with a constant the colour of the cell changes as expected, so there is something going on with my CSS variable.
This works
config:
on: true
stylesheet: |
.cell-background {
background-color: hsl(65,60%,60%);
}
label: My colour test
I also inspected the cell and see similar to what you have on your end (but I’m not sure what it’s meant to look like)
Without variable
With variable
Chrome console shows now errors.
OK, yes. You are absolutely right, I see what’s going on now. Your original question about whether anything has changed to prevent this from working in recent versions actually needs a more complicated answer.
The short version is, no function has been removed. However, I didn’t stop to think about was has been added. Better style processing has been added to the oh-block recently and it seems that was between 4.1.2 that you’re on and the 4.2 snapshot I’m running. So, my oh-block is able to set the css variable, but yours is not.
The solution then is simple (aside from upgrading which will also solve the problem). Don’t set the variable in the oh-block, but another container (e.g., f7-block or just plain div) around the cell:
config:
label: ColourCellTest
blocks:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: f7-block
config:
style:
--hsl-color1: =40 * 1.5
slots:
default:
- component: oh-label-cell
config:
on: true
stylesheet: |
.cell-background {
background-color: hsl(var(--hsl-color1),60%,60%);
}
label: My colour test
masonry: null
grid: []
canvas: []
1 Like
You are a legend @JustinG ! It works. Thank you so much for taking the time to help me on this one. Really appreciate your time. I have a chart rendering issues that is resolved by a fix in 4.2 so I might just upgrade to that milestone version so I can make use of the better style processing you mention. Thanks again.