I want a symbol (f7: lightbulb_fill) to be gray when a Hue-lamp’s brightness is 0 (this particular lamp strangely doesn’t have an on/off-state, so I need to work with brightness instead) and yellow otherwise.
The brightness is stored in an array, which looks like this in the developer sidebar: = items.LeuchteHuegross_Farbe → { “state”: “37,85,0” }
Brightness is the third value. I can access that value in the developer sidebar with: items.LeuchteHuegross_Farbe.state.split(’,’)[2] (which would get “0” in that case)
However, if I try to access that within yaml, it doesn’t work:
It’s probably a very simple syntax-error but this is my first experience with arrays in OH.
When clicking on the above mentioned light-bulb-symbol I want to change the brightness like this: If brightness is 0 then set it to 80 else set it to 0.
Because of problem 1 I couldn’t try around with this yet, but maybe you can give me a hint how to do that. Here’s what I would imagine for the entire thing, but I’m especially unsure about action item and action command:
Theres no separate switch or dimmer channel in the hue color lights but you can create a switch / dimmer item and link the color channel here, which should be able to interprete the ON / OFF and dimmer commands just fine.
If you still want to use the hsl-values of your light, be aware of the correct syntax inside your conditional statements:
Every statement begins with only one =.
You can’t mix up the single and double quotation marks inside your conditional statement.
You need to enclose the whole statement with the single quotation marks (in your case) to make it work (like you did it with the iconColor)
The editor should throw you an error here.
You have to set the item to which the actionCommand should be applied to as actionItem, which would be LeuchteHuegross_Farbe in your case.
This item expect a value which consists of h(ue),s(aturation),l(igthness), so you need to send a command which fits that format. You can do that by taking the hue & saturation from the current state and adding your lightness value, as you see in the example below.
Further more the framework doesn’t know the grey color (as it uses fixed color themes here) - As you see here it’s spelled the US way.
the repeater-function works fine and is really helpful when I’ll add the other lamps
the lightbulb symbol acts as a switch
when clicking on a name like “EZ-W” a widget I created to change colors pops up
in the first row it tells me the number of total lights on. I did this in node-red since I don’t know how to do that in OH (or if it’s possible at all). One would probably need some kind of global variables and I wouldn’t know where to enter the (javascript?) code anyway (rule, script, how to connect it efficiently). If there are significant advantages of programming such things in OH, I’d be interested in a link to a rather simple introduction. But for now, things are fine.
Next I’ll add a button to switch off all lights; I guess I might use OH-rules for that but that shouldn’t be too difficult.
The one thing I still don’t get well is the alignment:
the vertical alignment is poor; I’d like it to be centered. At the moment the text is higher than the slider.
I don’t really understand how to best define the column widths. Should I use fixed pixels (e.g. 20px) for items with fixed lengths (the lightbulb symbol, the names which won’t be more than 4 letters). If so, what to do with the slider which I’d like to be as wide as there is room left? Or just give a % to each column so that their values add up to 100%. And I’m not sure if padding disrupts that and if so, how to best deal with it.
If you have ideas how to further improve the look and functionality, let me know. After all, it’s Corona-time so I have enough time at my hands to play around with OH
Anyway, here’s the code
You can set your column to 100% height and use flexbox to assign align-items: center which would vertically center your components inside. There are tons of possibilites with flexbox (or grid) layouts which you can use for your custom-widgets.
You could use width: fit-content on your first column for example to make it just as wide as the content. Set the other column to width: 100% would make it fill all the remaining space. Adding flex-wrap: nowrap to the outer row, would prevent the elements from breaking over multiple lines.
It might be worth investing some of that time into diggint into CSS.
Especially the mechanics of flexbox- and / or grid-layout are very usefull for the creation of custom-widgets.
… or try this (which looks very funny tbh)
Two other things:
It’ s usefull to use the rawest available variant of custom components, if they are available. oh-colorpicker-card for example is, like the name says, a colorpicker with a card around it - so a lot of ‘unnecessary’ styles (at least for the use in a custom widget) are already applied.
It would be easier to align your contents if you use oh-colorpicker.
You don’t need a third column in your widget, as you want the icon and the text next to each other. Just put the two elements into one column and assign the flex-direction-row class to it.
Now I’ve looked a bit at the flex and grid- info you recommend. The commands seem plausible but I’m not sure where to put them.
Let’s say I want to have the lightbulb-button to the left, right next to it the number of active lights right next to it and to the very right a button to switch all lights off.
First, I added a row with two columns (mostly by copying your example in the first line and then adjusting the content). In the first column I put lightbulb and number in the second column the button. That’s ok so far.
But now I need to tell the button in the second column to be aligned to the right. I guess the command “justify-content: flex-end” might be the correct one but I don’t know where to put it. Something like
“style: justify-content: flex-end” in line 63/64 doesn’t work. Wrong command, wrong position, not in “style” but elsewhere? …
Here I’am again
With your help I got things working fine. Now I’m trying to do a very similar thing; this time heater control: label - current temperature - slider for target temperature (which should get the most space).
I’ve done a row with two columns (second column for the slider; including “- justify-content-flex-end”) so it should work fine. But here’s what I get:
For testing purposes, I inserted the slider-defintion in the working lights-solution from above be replacing the colorpicker/brightness slider. And then it’s not working there either. So it seems to be the slider definition. But the slider-code inside a simple list-item works fine. So I have no explanation …
I’d like to remind you of this quote from our discussion here
There are indeed usefull scenarios where it makes sense to use other components, but these should be wisely thought out exceptions.
I’d recommend you, using already existing components wherever it’s possible, as they saves you a lot of trouble and time.
It will unnecessarly mess up your code and leads to unwanted behaviours if you try to customize things wheres no need for it.
It would be too complex, getting into the details of css here. If you’re willing to invest some time, I’d recommend you digging a bit deeper into this topic with courses or similar. You’ll find plenty of ressources for that online.
The same thing is valid for the oh-slider-item component - use oh-slider in your custom-widgets.
There are 2 solutions which I’d recommend (and there might be even more or better solutions which I don’t think of)
Thanks for your help and patience, Rainer!
Looks like I forgot your advice or at least didn’t transfer it to this situation (this didn’t even cross my mind). Might be some kind of “cognitive overload” with me learning so many new concepts more or less simultaneously. I’m a little worried that once I have my system running and won’t change it so often, I might forget a lot …
Now I’ve looked more closely at your code, it’s much nicer/more elegant…
What is “media-list” doing? The documentation only says “Use for list with rich list items with icons” …
Give yourself some time. I’m sure you’ll understand how all of this fits together at some point. After that it’s like math - you might forget some concepts of it but it’ll come back quick.
In this case it’s needed to show the subline in the list-items.
