openHAB widget - Component 'label' round decimal number

Setup, Configuration and Use Beginners
1

Hi,

it’s my first attempt to create a widget with the new openHAB toolset and I’m using this widget from the community as template: Multi Sensor (Fibaro/Aeon/Philio/Aeotec) - Add-on Marketplace / UI Widgets - openHAB Community

The component “label” is responsible for displaying the value of an item:

  - component: Label
	config:
	  text: =items[(props.item2)].state + " Watt"
	  style:
		font-size: 18px
		font-weight: 400

Is it possible to round a large decimal number here and if yes, how?
Thanks in advance!

1 Like
2

In the widget code you have access to the js Math object and Number object. This gives you several different choices here. The easiest is probably just to parse the state string directly into an integer:

text: =Number.parseInt(items[(props.item2)].state) + " Watt"

That will always just truncate the string at the the decimal point (i.e., even 3.999 will become 3). If you would prefer actual up and down rounding of the number then you can use:

text: =Math.round(items[(props.item2)].state) + " Watt"

and if you would always like the number rounded up to the next higher integer:

text: =Math.ceil(items[(props.item2)].state) + " Watt"
2 Likes
3

Great, thank you very much! Works as expected.

4

Hi @JustinG,

I am struggling with the same issue. I have a temperature setpoint widget in which I would like to set setpoint with one decimal precision. The following code tend to generate large decimal numbers. Could you please help me to round it to one decimal precision?

actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.1

Thank you,

5

Numbers in the widget expressions have access to javascript methods such as toFixed:

1 Like
6

Thank you, I haven’t realised that is JS. :+1:

7

It is not a full JS implementation. It is just an js-like expression parser. This means there are a lot of things you can’t do, but many of the base js methods are available to you.

2 Likes
8

I ended up solving this with (note: edited to include @JustinG suggestion in his reply right below):

  • In item definitions, change the item state presentations to always be floats, with 0 decimals when I want to see an integer without decimals. For instance: "Inverter Total Output Power Sunsynk [%.0f W]".
    Important note: setting it to %d feels more natural, but for some reason it doesn’t work!
  • in my Main UI widget, use the @"item" shortcut to use displayState if defined, otherwise fall back to state.
    For instance:
    text: =@"solar_total_power"
    This is because displayState is only defined if it defers from state. For instance in my case displayState only gets defined if the underlying item value isn’t a round integer.

With this I do get the expected format, and the UI code then makes no assumption on what unit is exported by the underlying item, so no risk of mismatch.

9

This is general best practice anyway. In fact, it’s important enough that it has it’s own shortcut in the widget expressions:

@"solar_total_power"
10

Indeed, I wasn’t aware of that one, thanks for pointing it out! That doc page does mention displayState is not always defined but unless I missed it it doesn’t say when/why.

I updated my post above to use the @"item" shortcut. Hopefully some people will find it useful to piece everything together.