Overriding the model State Description in an OH standard widget

Setup, Configuration and Use Beginners
1

For example, I have a CO2 sensor and I have set the State Description in the model to “%.0f ppm”.

Now I have parts of the UI with little space and I just want to have the number alone ("%.0f") there. Same with temperatures, sometimes I want “20°C” and sometimes I only want “20°”.

I have tried setting the pattern in the widget yaml but it does not work:

component: oh-label-card
config:
  item: CO2
  pattern: "%.0f"

I only found some examples in the forum with date/time formatting but they are suggesting that setting the pattern in the yaml should work.

2

The trouble is your raw Item state will be something like “20°C”, the units are part of it. You cannot format that text string using pattern %.0f in the UI because the source is not a simple decimal number. (The OH server does jiggery-pokery behind the scenes at the server end when you use pattern at the actual Item)

You’ll have to have more complex UI code to strip or replace units, parse the string to numeric, and format with decimal places.

3

Hm, but the UI has “state” and “displayState” from the item, right?

4

Yes. For a Number:Temperature type Item the raw state is like “20.137 °C” and display state like “20.1 °C” using server-side pattern.

5

You are right for Temperature items. They include the unit in the “state” already.

My CO2 sensor has only the number in “state”. In “displayState” I have the formatted number by the pattern from the model state description.

So, there is no easy way to override the pattern in the UI? Why am I seeing posts with a property “pattern” in widgets (all are setting this for Date/Time)?

Or do I really have to use the (ugly) old HAB Panel trick again?

component: oh-label-card
config:
  label: =items["ActualTemperature"].state.split(' ')[0] + "°"
slots: null
6

I don’t know, where are you looking?

You get what you get from the server, then if you want to process it in some way then you have to process it in some way.

I think what you are asking for is the GUI f7 code to be Quantity-aware, which it isn’t at the moment.

7

I have seen for example this: Squeeze Control Custom Widget

But it is using a component of type “Label”.

Some code from the widget:

          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    pattern: %1$tM:%1$tS
                    class:
                      - text-align-right
                      - margin-right
                    text: =items[props.prefix+items[props.selected].state+props.duration].displayState
8

I can’t really help you… but shouldn’t it be

  pattern: %.0f

instead of

  pattern: "%.0f"
9

This shouldn’t work, and probably only does because the item being used in the label has the correct formatting on its displayState. If you take a look at where the label is defined in the vue code:

you can see that when a component is a label and is visible all that is done is that a div is created, the class and style configs are applied to it and then the text config is directly inserted into the the div. That’s it. There’s nothing that alters the text.

As rossko has said, if you want to pattern the text that you are displaying, you have to do it in the expression yourself.

10

OK, thank you all. I’ll try to implement necessary workarounds.