Formatting issues in display page

Setup, Configuration and Use Items & Sitemaps
1
  • Platform information:
    • Hardware: Raspberry Pi 4
    • OS: Raspberry Pi OS / x64 / 11 (bullseye)
    • Java Runtime Environment: 11.0.15 (Temurin-11.0.15+10) (running in Docker)
    • openHAB version: 3.3.0 (running in Docker)
    • ConBee 2 USB stick

Dear community,

I bought a couple of Aqara temperature and humidity sensors, successfully added them to openHAB and display both temperature and humidity values on a layout page.
This is the current code I use:

component: oh-label-card
config:
  footer: ="🕐" + dayjs(items['Multisensor6Temperature_LastUpdated'].state).format('HH:mm') + " |💧" + items['Multisensor6Humidity_Humidity'].state + " |🔋" + items['Multisensor6Temperature_BatteryLevel'].state + " %"
  item: Multisensor6Temperature_Temperature
  title: Bathroom
  trendItem: Multisensor6Temperature_Temperature

I simply copy and pasted this code for the other sensors, only with a different ID (Multisensor1, …, Multisensor6).

Now I have some questions regarding the layout/formatting:

  1. I’d like to display the humidity without decimals (e. g. :clock1:16:50 |:droplet:61 % |:battery:95 %), so I tried items['Multisensor6Humidity_Humidity'].state.format("%.0f"). This fails (returning undefined) because items['Multisensor6Humidity_Humidity'].state already contains the suffix %, thereby treating it as a string rather than a number (at least that’s what I assume).
    Do I have to apply string functions to solve this, e. g. items['Multisensor6Humidity_Humidity'].state.replace(" %", "").toNumber().format("%.0f") (pseudo code)? Or is there a more elegant solution?
  2. The battery level items['Multisensor6Temperature_BatteryLevel'].state sometimes returns NULL and I like to catch this in the display expression, replacing it with a placeholder (e. g. :clock1:16:50 |:droplet:61 % |:battery:-).
    How can I do that?
  3. As title (["config"].["title"]) I’d like to use the location of the associated thing rather than hard-coding it into the layout page, e. g.:
    image
    image1527×378 22.9 KB

    How can I do that?

Thx again!

2

Easiest solution here is just to convert it to a number and then add the "%" back in yourself. If you want the decimals truncated you can use:

Number.parseInt(items['Multisensor6Humidity_Humidity'].state) + " %"

If you want the decimals rounded to the nearest integer then you should use

Number.parseFloat(items['Multisensor6Humidity_Humidity'].state).toFixed(0) + " %"

You could certainly use a ternary expression, but in this case, I think I’d just cheat a little. Unless it returns the complete string"NULL" your battery state is never going to have NULL in it so just use replace:

items['Multisensor6Temperature_BatteryLevel'].state.replace("NULL","-")

No, not trivially. The location of the item is stored in a metadata value. This information is not included in the items dictionary for the widgets. The only way to access an items metadata is if that item is fetched directly from the API using an oh-repeater. You would have to reconfigure the entire widget to run a repeater that just returned the one item and then have it also return the semantic metatadata. 99 times out of 100, it’s easier just to code the location in.

1 Like
3

Thank you!

Regarding question 1, can I avoid rounding and use a format string instead?

4

You could use an item‘s state description and write the formatting string into the pattern:

%.0f%%

In your widget you need to change it to .displayState instead of .state.
Or better use

@'Multisensor6Humidity_Humidity'
1 Like
5

Not sure what additional information you are seeking here. I’m pretty sure that the first example (with the parseInt) doesn’t round the values; it truncates. What additional formatting are you thinking beyond that?

6

Usually parsing and rounding are compute intensive operations, whereas using a formatting string is much cheaper. That’s why I tend to use them if available and feasible.