Oh-icon + f7-badge not working

[JimT (jimtng)]

It seems that an oh-icon+f7-badge+Label combination doesn’t work.

                - component: oh-icon
                  config:
                    icon: xxxx
                  slots:
                    default:
                      - component: f7-badge
                        slots:
                          default:
                            - component: Label
                              config:
                                text: 1

It works when I used f7-icon instead of oh-icon

[JustinG]

Correct. The oh-icon does not have any accessible slots. Most of the oh- type widgets have reduced functionality with regards to the f7- counterparts for ease of configuration.

Putting additional elements inside the slots of an icon seems a little unusual though (one reason why that functionality was probably not included in the oh-icon to begin with). If you explain a little more what you are trying to achieve, someone here might be able to suggest a more robust solution.

[JimT (jimtng)]

@JustinG

If you explain a little more what you are trying to achieve, someone here might be able to suggest a more robust solution.

I want to add a badge to an openhab icon (a custom icon)

[JustinG]

What version of OH3 are you on?

[JimT (jimtng)]

Currently using core 3.1M2 but I built the openhab-webui about a week ago because I need the grid layout and the oh-clock (as opposed to oh-clock-card) component that was recently merged. Haven’t yet updated to 3.1M3.

[JimT (jimtng)]

OK, a trick - just add the f7-badge component on the same level as the oh-icon and use style left: -somethingpx. Not ideal, because the badge doesn’t respond to action, but I can move on.

[JimT (jimtng)]

@ysc would you consider allowing slots for oh-icon so we can add an icon badge please?

[RGroll (Rainer)]

Why not using the already available methods from the docs?

- component: oh-link
  config:
    iconF7: ant_fill
    iconSize: 40
    iconBadge: 420

What isn’t possible with this right now is the use of oh-icons as it only supports the f7- & material iconset. You could open an issue for that on github. The forum isn’t the ideal place to submit feature requests or report bugs.

[JustinG]

@RGroll

Why not using the already available methods from the [docs]

That still doesn’t give him the ability to to use a custom icon does it?

@JimT

Currently using core 3.1M2 but I built the openhab-webui about a week ago because I need the grid layout and the oh-clock (as opposed to oh-clock-card) component that was recently merged. Haven’t yet updated to 3.1M3.

If you upgrade to the 3.1M3, you can take advantage of the awesome new stylesheets feature to get custom icons into the f7-icon

component: f7-card
config:
  title: Custom Icon With Stylesheet
  stylesheet: >
    i.icon.customicon {
      background: url("/static/nest-off.png") no-repeat center;
      background-size: cover;
      height: 48px;
      width: 48px;
    }
slots:
  default:
    - component: f7-icon
      config:
        icon: customicon
      slots:
        default:
          - component: f7-badge
            config:
              color: red
              textColor: white
            slots:
              default:
                - component: Label
                  config:
                    text: Badge!

[RGroll (Rainer)]

@JustinG

That still doesn’t give him the ability to to use a custom icon does it?

Not in the curent state of that component, no - it’s a bug IMO.

The benefits of the approach with the oh-link component are:

• less code
• the whole element is clickable without any extra effort (wrapping both components or sth.)
• you can use action parameters

So maybe the “best” way currently would be to combine both of these approaches:

uid: icon_badge
component: f7-card
config:
  stylesheet: >
    .customicon {
      background: url("/static/yourImage.png") no-repeat center/contain;
    }
slots:
  default:
    - component: oh-link
      config:
        icon: customicon
        iconSize: 40
        iconBadge: 420

Thx Justin for the clarification

[JustinG]

@RGroll

So maybe the “best” way currently would be to combine both of these approaches:

Oh, that’s nice!

[ysc (Yannick Schaus)]

The problem with this, basically, is that f7/material icons and OH icons are quite different i.e. to render them the component accepting both will either make a f7-icon or a oh-icon, the latter being basically a plain img (openhab-webui/oh-icon.vue at main · openhab/openhab-webui · GitHub) - and therefore the features around them differ.

[JimT (jimtng)]

@JustinG

If you upgrade to the 3.1M3, you can take advantage of the awesome new stylesheets feature

This is awesome! Is there an equivalent feature to insert a custom script? That would be super awesome

[Mohamed_Negm (Negm)]

That is really cool!! Thanks alot…
Is it possible to have the background URL value to be dynamically assigned based on the props?

I’m not an expert with stylesheets and CSS configs.

[JustinG]

@Mohamed_Negm

Is it possible to have the background URL value to be dynamically assigned based on the props?

Yes, but not directly. See here for an example:

Change Label Card Text Color

You can achieve the effect by using the style property to set a css variable from the props, and then use that variable in the stylesheet. Something like this: - component: oh-label-card config: noShadow: true item: =props.item fontSize: =props.fontSize style: --widget-line-height: =props.lineHeight || 1 stylesheet: > .item-content { padding: 0; line-height: var(--widget-line-height); }

[Mohamed_Negm (Negm)]

Many thanks!
Works like a charm

For the URL part, how to test if the URL is valid one before using it?
i’m trying to fetch an image to be used as the icon based on the item name, but i want to have a default image if the item name doesn’t have a valid image.
As i’m passing this within the url(xxxxx) section, how can i test it first that the image exists in the style section before using the variable?
currently i have it like this:

- component: f7-col
  config:
    style:
      --background-img: ='url(' + "/static/icons/" + props.imageName +"."+props.extension + ')'
    stylesheet: >
      .customicon {
        background: var(--background-img) no-repeat center/contain;
      }