Per-Room Humidity & Temperature Card

Ltty · August 19, 2026, 10:36am

A compact card showing a room’s current humidity with a colour-coded status badge, a zone bar visualising the safe/elevated/critical thresholds, and the current temperature and thermostat setpoint.

Features:

OK / Elevated / Critical badge — colour-coded green/amber/red based on configurable thresholds
Large humidity value — colour matches the badge
Zone bar — CSS gradient bar with a live position indicator showing where the current reading falls
Three-row legend — Safe · Elevated · Critical with the configured percentage ranges
Temperature + setpoint — shown below a divider; tap the card opens the Analyzer for both items

Thresholds are fully configurable via props (default: safe < 60 %, elevated 60–70 %, critical > 70 %).

Note on temperature items: the widget derives the temperature and setpoint item names from the humidity item by replacing _Humidity with _ActualTemperature / _SetPointTemperature. This matches the default naming of HomeMatic/piVCCU combined climate sensors. If your items follow a different convention, the temperature row will show –.

Screenshots

Changelog

Version 1.0.4

Fix: zone bar still not rendering when orange/red props were undefined on existing widget instances — gradient expression now uses (props.orange||60) / (props.red||70) defensive defaults so the CSS is always valid
Fix: YAML parse error in setpointItem description (: inside an unquoted scalar misread as a YAML mapping separator) — description now single-quoted
Use text: " " (non-breaking space) on the zone bar Label to prevent silent suppression in OH releases that skip empty-text Labels

Version 1.03

Fixed min prop label: “Safe max (%)” → “Safe Min (%)” — it is the lower bound of the safe zone, not the upper
Added descriptions to Humidity Item, Temperature Item, and Setpoint Item props

Version 1.0.2

Fix: zone bar not rendering in some Main UI versions — replaced empty Label with f7-block (empty-text Labels are silently suppressed in certain OH releases)
Improvement: props reorganised into Sensor Items / Appearance / Thresholds groups; threshold labels clarified (Safe max / Elevated max / Critical from)

Version 1.0.1

Explicit tempItem and setpointItem props — no more implicit _Humidity → _ActualTemperature name derivation
Props grouped under “Sensor Items” (temperature, setpoint, humidity) at the top of the settings panel
Humidity normalization: accepts both 0–100 % and 0–1 dimensionless ratio sensors
Bar indicator position uses parseFloat(state) instead of numericState for consistent behaviour across item types

Version 1.0.0

initial release

Resources

widget.yaml — paste into Developer Tools → Widgets
Full setup guide

ricardoj · August 19, 2026, 5:34pm

Hi @Ltty !

I really liked your widget.

Would it be possible to have two zones for critical values?

One for very low humidity and another for very high humidity?

Thanks.

Ltty · August 20, 2026, 5:27am

Thanks for the feedback and great suggestion.

Since in my case humidity is always too high, I didn’t consider it can become too low too.

Will add it as an improvement.

Cheers,
Flo

ricardoj · August 20, 2026, 11:48am

Thanks for getting back to me.

Humidity varies a lot here.

The bar chart isn’t showing up in my setup.

I’m using OH 5.2.1 and selected the humidity from some of my sensors, but none of them display the chart.

The humidity values themselves are displayed normally.

Thanks.

Ltty · August 20, 2026, 12:11pm

Which humidity sensor are you using?

Also, do you have a screenshot of what is showing?

Are there any errors in the logs?

ricardoj · August 20, 2026, 1:28pm

I see no errors in my LOG.

component: widget:humidity_room_card
config:
  title: LAB
  item: ZTH05_LAB_Umidade_LAB
  icon: f7:wrench

Ltty · August 20, 2026, 1:59pm

Made some updates, can you please try it with the updated version?

ricardoj · August 20, 2026, 2:46pm

Widget updated but there is no bar graph.

component: widget:humidity_room_card
config:
title: LAB
item: ZTH05_LAB_Umidade_LAB
icon: f7:wrench
tempItem: ZTH05_LAB_Temperatura_LAB
setpointItem: ZTH05_LAB_Temperatura_LAB

Ltty · August 20, 2026, 2:54pm

What does this item return? Is it a string item, number, which range?

ricardoj · August 20, 2026, 3:04pm

ricardoj · August 20, 2026, 3:09pm

I made a small change to the original widget and managed to add a bar.

It was just for testing purposes.

I appreciate all your help.

                    - component: Label
                      config:
                        style:
                          color: "=((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ? items[props.item].state : '50')) > props.red) ? '#d03b3b' : ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ? items[props.item].state : '50')) > props.orange) ? '#fab219' : '#0ca30c'"
                          display: block
                          font-size: 28px
                          font-weight: "600"
                          line-height: "1.1"
                          margin: 0 0 8px
                        text: "=items[props.item] ? ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item].state))).toFixed(0) + ' %' : '–'"
                    - component: f7-block
                      config:
                        style:
                          width: "=(items[props.item].numericState !== 'NULL') ? items[props.item].numericState + '%' : '0%'"
                          border-radius: 8px
                          background: "linear-gradient(to right, #FF0037, #C3FF00, #FFDD00, #FF0037)"
                          height: 10px
                          margin: 0 0 8px

Ltty · August 20, 2026, 5:43pm

Which browser are you using?

ricardoj · August 20, 2026, 6:52pm

I tested on Brave, Chrome and FF on Linux.

I also tested on my Acer Chromebook.

Ltty · August 21, 2026, 6:04am

Can you retry with the updated widget?

ricardoj · August 21, 2026, 12:53pm

To clear this error message:

Even so, there is no Bar Graph.

Ltty · August 21, 2026, 3:00pm

Ok, found the issues. Can you retry one more time?

ricardoj · August 21, 2026, 4:18pm

It’s working now!

Many thanks.

ricardoj · August 21, 2026, 4:26pm

Outdoor humidity levels can vary significantly across different parts of the world.

Below is an example (from August 20th) of the outdoor humidity levels in my area.

That is why I mentioned having four alert bands.

I really appreciate all your work in creating this widget.

Ltty · August 21, 2026, 4:31pm

I will add the lower level bands early next week.

ricardoj · August 21, 2026, 5:00pm

A variation of this widget could be for measuring gases like CO2, for example.

I don’t currently have a CO2 meter, but I’m thinking about building one using MQ sensors.

Instead of humidity, the indicator would show the measured gas level.

And instead of the temperature indicator, it would show humidity, since these two metrics, humidity and gas level, are often used together to determine indoor air quality.

Just an idea!

Once again, thank you very much for all your work in creating this widget.