Icons for custom categories

Setup, Configuration and Use Beginners
,
1

Hi,
I try to write a widget that shows all items of a thing via the oh-repeater:

image
image944Ɨ291 6.8 KB

But some of the items do not have a category, thus there is no icon shown:
image
For the others it is working pretty cool :wink:.

I tried to assign a customized category and saved an icon with the same name in the icon folder (svg+png). But this is not working.

Does anyone know how to link an icon file to a customized category? (I searched for this topic but did not find any working solution up to now.)

Many thanks in advance! :slightly_smiling_face:

2

No ideas for this topic? I continue to try to find a solution, but so far to no avail.

3

What is the exact folder that you put the icon in? The docs are quite specific about where the custom icon files need to be placed:

If you have the icon files in the correct directory then this should work with no additional steps.

4

I am using OpenHab 4.0.3 on a Synology docker. I placed the icons here:
grafik
(I am already using dynamic customized items for widgets -e.g. roller shutters-, but not for custom categories.)

5

Yep, so thatā€™s all correct. What you are trying to do definitely works; I do it myself.

Do you see the icon popup when you enter the category in the model editing page?
image

Also, I would suggest that you check the API explorer to make sure that the items API actually returns the value you are expecting for category:

  "name": "Speaker_SonosRoam",
  "label": "Sonos Roam",
  "category": "sonosroamflat",
6

No, I donā€™t see the icon popup.

The files for the category in the mentioned directory:
image

And here what the API explorer says:
image

7

Oh man, I found my mistake: the capital letters. I changed them to lowercase and it works :crazy_face:.

Nevertheless many thanks!! :blush:

8

One additional question: is there any possibility for different icons in relation to the value of the item (like for QualityOfService)?

9

Yes, a little further down in the doc linked above there is a section on how to create custom dynamic icons.

Short-short version: add -statevalue to the base icon name (all lowercase still).

10

Itā€™s working under settings/items:
grafik
grafik

But in the widget it is shown like this:
grafik
grafik

That is the code of the test widget:

uid: Test_Code
tags: []
props:
  parameters:
    - default: Header text
      description: Header text shown on top the widget
      label: Header
      name: header
      required: false
      type: TEXT
    - context: item
      default: ShellyPlus2PM_001
      description: related item to displayed data
      label: Item
      name: item
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Dec 25, 2023, 8:34:52 AM
component: f7-card
config:
  title: '= (props.header != "Header text") ? props.header : props.item'
slots:
  default:
    - component: oh-list
      config:
        title: Alle Daten
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              groupItem: = props.item
              sourceType: itemsInGroup
              fragment: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    icon: = loop.item.category
                    iconUseState: true
                    title: =loop.item.label + ":"
                    badge: =items[loop.item.name].displayState || items[loop.item.name].state

And to complete all information :wink:, here are the corresponding file names:
grafik

In the widget it is only showing the ā€œbaseā€ icon, both for standard and for custom icons!?

11

There is no item actually configured with your list item. Just because the component is being rendered as the child of a repeater doesnā€™t mean there is any automatic addition of the repeater array to the componentā€™s configuration, so, it has no way of knowing which item is supposed to be used to get the state which should used to modify the icon.

You also need to add:

item: =loop.item.name
12

Great, many thanks & Merry XMas :wink:!