Customization of locations-tab -- icons

Add-ons UIs
1

Hello,
Is it possible to customize the ‘locations-tab’ widget by:

  1. including static icons in the card title / subtitle (e.g. a ‘kitchen’ icon for the Kitchen tab)
  2. replacing the badge icons on the cards by icons from a different iconset (e.g. for example: iconify:ic:round-lightbulb)
  3. replacing the status icons in the detailed card view (other than by replacing the model category-related icon files one by one)

Many thanks

2

The answer to all these questions is yes (mostly), although some of these features are less well-documented than others.

  1. The header of the location cards can be completely customized with whatever components you like by adding a header slot to the card definition. (Note this will override the default title so you will have to provide your own text as well.) Something like this:
loc_Garage:
    - component: oh-location-card
      slots:
        header:
          - component: oh-link
            config:
              iconF7: car_fill
              text: Garage
  1. There’s a somewhat complex method for customizing the badge icons. In the location card config you can put a badges section that subsections for each badge type you want to change and what you want the new icon to be. The caveat here is that these icon options are restricted to oh and f7 icons, at the moment, I don’t believe the iconify icons apply here.
loc_Greenhouse:
  - component: oh-location-card
    config:
      badges:
        lights:
          badge:
            icon: f7:sun_max_fill
  1. There’s no setting that changes the default type icons for the items in the list views. However, you can define you own default list widgets that can then have whatever icons you want (including the iconify sets). This process is well-documented in the docs and several forum posts.
3

Thanks for the reply.

On 1. Is there a documentation, which slots can be created? how would I find the basic structure of the oh-location-card widget?
I see, you used the oh-link component for the title icon/text. Is that compulsory, as this changes the text color to (link/orange) for me.
Can I use icon: with the iconify… syntax instead of iconF7 as well?

Many thanks?

4

Not really. For basic oh components that are based directly on f7 components the slots are covered in the f7 docs. For the more custom oh components (cards and cells etc.) you have to look into the vue files that define how that component is created. For example, all the oh cards are based on an f7 card which does have a header slot. However, some of those oh cards allow you to put other widgets in the header slot and some just do their own thing in the head slot. In the oh-location-card vue file you see that it is based on the more generic model-card template. Looking at the model-card vue file you find this:

What this says is that if the card yaml definition includes a slots section and that slots section includes a header section then it should go through that header definition and render all the components defined there. So, this location card header is one place where you can put any other combination of component that you want (I just used the link in the demo above because it was quick and easy to type up).

The generic-widget-component element of that vue file means that there is nothing special about components that you put there. If you can create and use that component with the yaml editor in any other context, you can use it.

5

hi, i’m trying to customize the badge in the location card.

it seems to work with f7 icons, but not with iconify:

works:

        - component: oh-location-card
          config:
            badges:
              projectors:
                badge:
                  icon: f7:wind

don’t work:

        - component: oh-location-card
          config:
            badges:
              projectors:
                badge:
                  icon: if:mdi:fan
6

That is still true. If you want iconfiy support for the badges, you are going to have to put in a feature request in the UI repository.