OpenHAB3 / Dynamic Icon Color / How to re-use the current LED stripe color on the marker icon

ringbuchblock · January 3, 2021, 4:32pm

Hi,

I am new to OpenHAB and started to work with version 3.

I struggle with a few things and unfortunately I am a bit confused on which instructions still work for OH3 and which don’t. I’ll post separate questions for each of my problems.

This question is about Dynamic Icon Colors.

Problem / Goal:

I am currently working with marker icons on a page of type floor plan.
I have a colored LED stripe and I want to change the color of the corresponding marker icon according to the current color of the stripe.

As far as I know the color of the built-in F7 icons (e.g. f7:lightbulb) can be changed.
I already tried that with static values (e.g. iconColor: green).

markers:
  - component: oh-plan-marker
    config:
      name: LED
      item: i_led_color
      icon: f7:lightbulb
      coords: 702.011617961272,752.3849707004778
      useTooltipAsLabel: false
      action: command
      actionItem: i_led_color
      actionCommand: TOGGLE
      iconColor: <what to put here??>
    slots:
      default: []

However, I rather want the icon to reflect the color of the LED stripe it represents.
The thing is that this color is returned as HSB value and I have no clue how I could translate that into something which the iconColor property understands.

This brings me to some general questions:

a) What are the supported values of iconColor?
b) Do all color picker things work with HSB values? Is it somehow possible to switch to e.g. RGB? Right now I am working with a Shelly RGB.
c) Is there some built-in transformer for HSB to iconColor values? If not, how can i build one?

Posts I read so far:

Platform information:

OS: ArchLinux
openHAB version: 3.0.0-2

RGroll · January 3, 2021, 4:49pm

Every f7-themeColor is supported - they are listed here

Don’t know exactly - but generally it would be possible to work with hsl values in css, which should be identical with the hsb ones, I think?!

You can’t overwrite the iconColor with css values currently, as they gets overwritten with the standard style.

No, it isn’t afaik - It might be possible to recreate something like that in YAML, but not without a lot of YAML markup, I think. Another soloution would be to make a change to the source code - which I don’t know if its worth the effort.

ringbuchblock · January 3, 2021, 4:59pm

Thx. Is this only the case if I use an F7 icon or in general?
Or put differently: Are there different values valid depending on the type of the chosen icon?

So far I have not stumbled upon anything allowing me to adjust the used CSS.
Is there some convenient way to create/modify/adjust/pin a CSS to the icon?

Right now I don’t think that I am up to that job yet. Let’s see if this changes in some days.

RGroll · January 3, 2021, 6:14pm

This should be valid for the f7-icon as well as for the oh-icon component as both of them using the f7-theme-color in their config parameter (iconColor/color) - but if you use the f7-/oh-icon as a standalone component you should be able to assign a css color-style to them, which should accept every color. (but this won’t work with the ‘oh-plan-marker’ component)

So for example, this would work:

component: f7-icon
config:
  f7: lightbulb_fill
  size: 60
  style:
    color: hsl(190, 59%, 50%)

As mentioned above, css styles of the ‘oh-plan-marker’ gets overwritten so it won’t work in that case.

Don’t hesitate to ask, if you have further questions then. I’m not realy familiar with the hsb-color scheme - but it should be possible to find a way with some fiddling.

ringbuchblock · January 3, 2021, 7:53pm

Unfortunately, this also doesn’t seem to work.

It seems that the value provided for iconColor is transformed to an HTML class which is prefixed with color- and the CSS color property is set to var(--f7-theme-color).

For example

the iconColor value green is transformed to HTML class color-green and the used CSS color is indeed green (#4cd964),
the iconColor value hsl(190, 59%, 50%) is transformed to HMTL class color-hsl(190, 59%, 50%) but the used CSS color is red (#e64a19).

I tried for both component: oh-plan-marker and component: f7-icon.

The red color seem to be some kind of default when the given color property is not understood.

edit:
Sorry I overlooked that you switched to style > color (I still tried with iconColor).
I just re-tried with

  - component: f7-icon
    config:
      icon: f7:lightbulb_fill
      coords: 698.6744545732399,769.4652583405726
      size: 60
      style:
        color: green

and various different color values like green, hsl(190, 59%, 50%) and now the result is that the color- CSS class is gone and the icon becomes white.

RGroll · January 3, 2021, 8:55pm

I may’ve been unclear here - The css only works on the standalone f7-/oh-icon component and not on the oh-plan-marker - there is no way to change the color of this (the marker on the image) component yet (besides the f7-theme-colors I linked above).

As you already found out, the reason for this is the --f7-theme-color css-variable - it gets set by the component itself and will overwrite every color-style which is set via css.

I was refering to the general possibility to change the color of an f7-/oh-icon component in my answer (without the context of the map-usage).

So you can’t use the f7-icon as a replacement for the oh-plan-marker as its a special component with coordinates and stuff which f7-/oh-icon components won’t accept.

Sry, if my crude answer made you false hopes here.

ringbuchblock · January 3, 2021, 10:16pm

Oh. Yes, I misunderstood that.
Thank you for the detailed explanation!

I guess in that case I will leave that topic for now.

Maybe I will invest some time at a later point to think about some component transforming HSB/HSL values to F7 color groups.