Properties and Icon's are not shown in Widget

Hello there,

openhabian 5.10.17-v7+ #1421
Release = Raspbian GNU/Linux 10 (buster)
Kernel = Linux 5.10.17-v7+
Platform = Raspberry Pi 3 Model B Rev 1.2
Openhab 3.1.0

I’ve switched to OH3 a few days ago, I found a lot of tutorials and Widgets from other persons.
So I decided to try and error with some.

anyways, I can’t figure out why I can’t change the icon’s
the path telling me its located under /static
So in HTML, there is a Readme.txt which explains, if I can enter my IP/static/picture.png it should be displayed in the browser → that works for me.
So why the icon is not shown up ? it’s a normal .png icon.


Widget:

uid: Cell_Light_Color_Card_2
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: icon name without ".png", located in static/icons/ folder
      label: Icon
      name: iconimage
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item ON OFF
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control color
      label: Item light color
      name: item_color
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jul 1, 2021, 7:45:18 PM
component: f7-card
config:
  style:
    noShadow: false
    padding: 0px
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    height: 165px
    margin-left: 5px
    margin-right: 5px
slots:
  default:
    - component: f7-card-content
      config:
        class:
          - display-flex
          - flex-direction-column
          - justify-content-flex-start
          - align-items-left
        style:
          --f7-color-picker-slider-size: 18px
          --f7-color-picker-slider-knob-size: 20px
      slots:
        default:
          - component: f7-row
            config:
              style:
                position: absolute
                top: 10px
                left: 40px
                flex-direction: row
                display: flex
            slots:
              default:
                - component: Label
                  config:
                    text: "=props.title ? props.title : ''"
                    style:
                      font-size: 12px
                      margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 40px
          left: 10px
          flex-direction: row
      slots:
        default:
          - component: Label
            config:
              text: "=props.header ? props.header : 'Set Props'"
              style:
                font-size: 17px
                font-weight: 600
                margin-left: 0px
                margin-top: 0px
    - component: f7-block
      config:
        class:
          - no-padding
        style:
          position: absolute
          top: 70px
          left: 10px
          flex-direction: row
          width: calc(100% - 100px)
          margin-top: 7px
          --f7-range-bar-size: 12px
          --f7-range-bar-border-radius: 10px
          --f7-range-knob-size: 20px
          --f7-range-bar-active-bg-color: transparent
          --f7-range-bar-bg-color: linear-gradient(to right, rgba(246,158,81,0.8), rgba(246,158,81,0))
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-label-text-color: black
          --f7-color-picker-slider-size: 12px
          --f7-color-picker-slider-knob-size: 20px
          z-index: 99 !important
      slots:
        default:
          - component: oh-colorpicker
            config:
              color: red
              label: true
              item: =props.item_color
              modules:
                - hsb-sliders
    - component: oh-toggle
      config:
        item: =props.item_color
        style:
          position: absolute
          top: 15px
          right: 90px
    - component: oh-button
      config:
        iconColor: red
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 0,100,100
        style:
          position: absolute
          top: 10px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: deeporange
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 15,100,100
        style:
          position: absolute
          top: 45px
          right: 35px
          height: 34px
          background: transparent
    - component: oh-button
      config:
        iconColor: orange
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 30,100,100
        style:
          position: absolute
          top: 80px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: yellow
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 60,100,100
        style:
          position: absolute
          top: 115px
          right: 35px
          height: 35px
          background: transparent
    - component: oh-button
      config:
        iconColor: purple
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 300,100,100
        style:
          position: absolute
          top: 10px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: blue
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 240,100,100
        style:
          position: absolute
          top: 45px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: lightblue
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 180,100,100
        style:
          position: absolute
          top: 80px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-button
      config:
        iconColor: green
        iconF7: app_fill
        iconSize: 34
        action: command
        actionItem: =props.item_color
        actionCommand: 120,100,100
        style:
          position: absolute
          top: 115px
          right: 0px
          height: 33px
          background: transparent
    - component: oh-image
      config:
        url: ='static/icons/' + props.iconimage + '.png'
        style:
          position: absolute
          left: 10px
          top: 10px
          height: 25px
          opacity: 0.7
        visible: "=props.iconimage ? true : false"

Config Widget

component: widget:Cell_Light_Color_Card_2
config:
  title: Licht
  header: Stehlampe
  iconimage: idea
  item_schalter: TRADFRIGluehlampeWhz_Farbe
  item_color: TRADFRIGluehlampeWhz_Farbe

My second Problem is the understanding of the new concept.
I can’t figure out how the Properties inside a widget is created ?
My Concept of the Model is:
→ Floor → room → Sensor → Values is that correct ?
I displayed it here:


summarized:
I can’t figure out, how to get Icons into place

And I can’t figure out, why the properties are not created for the rooms.

If someone can help me with this, I would be thankful

There are three sets of icons supported by MainUI: the old OH icons, the F7 icons, and Material icons.

OH icons and custom icons work the same way they always have since OH 2.0 but in OH 3 you have to tell MainUI that you are using an OH icon, not one of the other two sets.

Therefore, if you want to use your own custom icons you need to store them and create them just as has always been the case and is documented at https://www.openhab.org/docs/configuration/items.html#icons. Note the files are stored in $OH_CONF/icons/classic, not $OH_CONF/html. And you need to tell the MainUI widget which icon set you want to use so you need to prepend the icon name with oh:. Finally, there is a flag you need to set to tell MainUI that you are using a dynamic icon.

So if you have a custom icon /etc/openhab/icons/classic/foo.png with a corresponding foo-on.png and foo-off.png as a dynamic icon for a Switch you would have two properties in the config along the lines of

value: ""
config:
  icon: oh:foo
  iconUseState: true

I don’t see you using these properties anywhere.

It’s hard to say what you are doing though as none of your images are showing up.

There are three types of Items in the Model:

  • locations
  • equipment
  • points

An Item can only be of one of these three types. The type is determined by the tag(s) applied to the Item.

Locations are always a Group Item.
Equipment are almost always a Group Item.
Points are almost always a non-Group Item.

Point Items also support an optional Properties tag. The Point tag says what the Item does and the Property says what it does it to. For example, a thermometer reading Item would have a Measurement Point tag and Temperature Properties tag. The setpoint for a thermostat would have a Setpoint Point tag and a Temperature Properties tag.

The Locations tab of the overview page will show one card for each location. In that card there will be potentially two tabs. One showing the equipment that is in that location and another showing the Items that have both a Point and Properties tag that are direct members of that location and not a member of an equipment.

The Equipment tab of the overview page will show one card for each type of Equipment (based on the Equipment tag) and show each of the Point Items that are members of that type of Equipment inside the card.

The Properties tab will show one card for each type of Property used (e.g. Temperature) listing all the point Items that have that property type inside the card grouped by their Point tag.

All of this is discussed in the Getting Started Tutorial.

When they should work as they do in OH2 then I am totally confused.
So I got my custom Widget (copied it for try and error) https://community.openhab.org/t/oh3-main-ui-examples/117928/44

If I click on “Configure Widget” it tells me

“located in static/icons” that’s the reason why I tried to configure it with the HTML/static → may be totally wrong.

My Icons are all available as in OH2 at → \192.168.178.50\openHAB-conf\icons\classic
I tried to configure it with oh: icon name

component: widget:Card_room_12
config:
  text_header: Wohnzimmer
  temp: ThermostatThermostatWohnzimmer_Temperatur
  settemp: ThermostatThermostatWohnzimmer_Solltemperatur
  humidity: WhzLuftfeuchtigkeit
  page: page_77e9583731
  iconimage: oh:idea
  status: Switch_Lampen_Whz
slots: null


That won’t work as well for me.
I read the introduction again, but I can’t find my fault in this case.
I’ve also tried to edit the custom widget code as well and change those lines u posted.

second problem:
I’ve read it so much, but I think I am too stupid to understand this.
My mind thinks: yeah it’s clear, sounds logical.
But I can’t apply it to my page…

I try it again:
So my location “Erdgeschoss” is a Group → correct
My Location inside “Erdgeschoss” is a Group called “Wohzimmer” and got the semantic class “living room” ← for what I define this ?
Inside my Group “Wohnzimmer” I have the type of Equipment that sorts my devices.
Lets go ahead with “Sensoren Wohnzimmer”.
“Sensoren Wohnzimmer” has 2 points
→ 1. “Luftfeuchtigkeit” semantic class: Point_Measurement and is a direct parent group to “Sensoren Wohnzimmer”
→ 2. “Temperatur” semantic class: Point and is also direct grouped with “Sensoren Wohnzimmer”

I guess my whole construction is wrong correct?
I think the group “Sensoren Wohnzimmer” should also display the points ?
For me I only get NULL so there’s something wrong I think.
I could change that by changing the members base type → but there I got 2 different measurements that can’t be displayed as one.


I am sorry, but my mind is a blockade… maybe I should have used the model construction in OH2 as well… I’ve never gave that attention.

I would be glad, if u can help me a second time in this case

For the icons all I can recommend it to review the Dynamic Icons section of the docs and make sure you are following the proper naming convention and that if you are using dynamic icons that there is a default icon file. I know if you don’t get that part right the icons won’t show up.

I know that custom icons have worked in the past but I’ve since switched to using F7 and material icons as they can be even more dynamic than OH icons. Something might have changed since I was using them.

Again, none of your screen shots are showing up for me so I can’t see anything in the posted screenshots that might help.

If all you care about is the Overview Page that tag isn’t used for much beyond helping you add more context and meaning to the model for your own sanity or for use in Rules (you can get the parent Location and Equipment a given Item belongs to in a rule). But in the future and today using HABot that is how you distinguish between location types. That’s what lets you issue commands to HABot like “turn off all the lights in all the bedrooms”.

And the Property tag? As I said above, an Item with a Point Tag can have an optional Properties tag. So what is the Luftfeuchtigkeit Item measuring? That is the Properties tag. So if it’s measuring light levels, for example you’d use a Point tag of “Measurement” and an additional Properties tag of “Light”.

For the Temperatur Item you haven’t applied a Point tag at all. Temperature is a Properties tag and a Properties tag is meaningless without a Point tag.

On the Locations tab you should have a gray line with “Sensoren Wohnzimmer” in the “Wohzimmer” card. Under that gray line will be the two sensor Items listed, one per line. However because Temperatur doesn’t have a Point tag it won’t be shown because it’s not a Point.

On the Equipment Tab you should see a card for each of your Equipment Tags. Inside that card you will see a gray line for each Group Item tagged with that Equipment tag. Under that gray line you will see the points that are a part of that specific instance of the Equipment.

On the Properties tab you will see a card for each Properties tag in use. Remember, a Properties tag cannot exist on its own, it must be paired with a Point tag. The way it looks was posted and described above.

Notice in the above description the neither the state of the Location or Equipment Item is never mentioned. That’s because it’s never used anywhere on the Overview Pages. The states of these Group Items do not matter and are not used anywhere.

Thank you for the detailed description.
That helped a lot with the “Equipment / Properties”
I finally got it to work.

My Mistake was to create the point inside a Equipment and I was to expect the Properties field after that.
I have to create the Point inside the Group → then I get the properties.
Now it makes more sense for me.

I’ve only got the Icon problem left.
It’s not a dynamic icon. → it’s a normal icon as usual in OH2.
It works sporadically… its a bit confusing…

So my problem was, I didn’t create the ICONS folder inside HTML → I created at first a static folder ← that was wrong…

After creating the Icons folder inside

\\192.168.178.50\openHAB-conf\html

I can see “sometimes” the icons…
Hopefully, u can see my screenshots now.

As I said, I’ve created the Icons folder inside HTML now my icons work for the overview page if I tab on the “Openhab logo” in the uppfer left → starscreen

You can see, that my icons pop up correctly.

BUT If I click on the “Tab” of the SAME page which is named “Mein Zuhause” on the left → the Icons won’t show up…

How is that possible ? cause it is on the same page. I only got one overview page.

Same for the PopUp widgets → I configured the same icons → which works fine on the overview page.

I think I am running in a circle… cause I can’t find the error for this

topic will be followed up at
openHAB 3.1 Release discussion - #76 by Integer](openHAB 3.1 Release discussion - #76 by Integer)