Temperature and Humidity Display Widget

[the-ninth (Robert)]

This widget is derived from the Temperature and humidity widget created by @debacher and adds additional configuration options. You can choose two separate items for temperature and humidity and optionally a third item for the last update timestamp. Labels and suffixes can be configured to adapt the widget to different languages or use none or shorter descriptions for better display on small mobile screens.

The full list of customization options is:

• Title: title of the cell.
• Temperature item: the state of this item will be displayed as temperature.
• Humidity item: the state of this item will be displayed as humidity.
• Last update item: the display state of this item will be displayed as last update timestamp. Use an item with the timestamp as state and set the pattern of the “State Description” metadata to format the timestamp.
• Temperature Label: label to be displayed in front of the temperature.
• Temperature Suffix: suffix to be displayed after the temperature.
• Humidity Label: label to be displayed in front of the humidity.
• Humidity Suffix: suffix to be displayed after the humidity.
• Last Update Label: label to be displayed in front of the last update timestamp.

Screenshots

Example configuration with long labels:

Example configuration with short labels:

Configuration:

Clicking on the widget opens the analyzer displaying both the temperature and the humidity:

Changelog

Version 0.2

• added properties to define custom actions

Version 0.1

• initial release

Resources

The YAML code for the widget:

uid: TemperatureHumidity
tags:
  - humidity
  - standalone
  - temperature
props:
  parameters:
    - description: Title of the cell.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: title
    - context: item
      description: The state of this item will be displayed as temperature.
      label: Temperature item
      name: tmp_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The state of this item will be displayed as humidity.
      label: Humidity item
      name: hum_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The display state of this item will be displayed as last update
        timestamp. Use an item with the timestamp as state and set the pattern
        of the "State Description" metadata to format the timestamp.
      label: Last update item
      name: update_item
      required: false
      type: TEXT
      groupName: items
    - description: Label to be displayed in front of the temperature.
      label: Temperature Label
      name: tmp_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the temperature.
      label: Temperature Suffix
      name: tmp_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the humidity.
      label: Humidity Label
      name: hum_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the humidity.
      label: Humidity Suffix
      name: hum_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the last update timestamp.
      label: Last Update Label
      name: update_label
      required: false
      type: TEXT
      groupName: labels
  parameterGroups:
    - name: title
      label: Title
    - name: items
      label: Items
    - name: labels
      label: Labels
    - name: customAct
      context: action
      label: Action
timestamp: Feb 9, 2025, 7:10:06 PM
component: oh-label-cell
config:
  actionPropsParameterGroup: '= props.customAct_action ? "customAct" : ""'
  action: analyzer
  actionAnalyzerItems: =[props.hum_item, props.tmp_item]
  expandable: false
  footer: '= (props.update_item ? (props.update_label ? props.update_label :
    "")  + " " + items[props.update_item].displayState : "")'
  header: = props.title
  icon: oh:temperature
  label: '= (props.tmp_label ? props.tmp_label + " " : "") +
    items[props.tmp_item].state + (props.tmp_suffix ? " " + props.tmp_suffix :
    "")'
  subtitle: '= (props.hum_label ? props.hum_label + " " : "") +
    items[props.hum_item].state + (props.hum_suffix ? " " + props.hum_suffix :
    "")'
  trendItem: = props.tmp_item

[hmerk (Hans-Jörg Merk)]

If you want it to be installable from the marketplace, you should add the pulished tag.

[the-ninth (Robert)]

Oh, thanks, did that now. I thought from the description in the template that first the post will be reviewed and then the published tag will be added by admins/moderators.

[hmerk (Hans-Jörg Merk)]

Indeed, that‘s what the template says.
We need to clarify that, but for now leave it as published.

[ThaDaVos (Dylan Vos)]

For some reason I cannot install this widget into my Openhab 4 installation, it shows the following error in the log:

[ERROR] [munity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Couldn't find the widget in the add-on entry

[ThaDaVos (Dylan Vos)]

I manually added it to my instance and also made the hum_item optional (I had a few locations which do not have a humidity sensor but I want to keep the look and feel the same). you can find the adapted code below:

uid: TemperatureHumidity
tags:
  - temperature
  - humidity
  - standalone
props:
  parameters:
    - description: Title of the cell.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: title
    - context: item
      description: The state of this item will be displayed as temperature.
      label: Temperature item
      name: tmp_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The state of this item will be displayed as humidity.
      label: Humidity item
      name: hum_item
      required: false
      type: TEXT
      groupName: items
    - context: item
      description: The display state of this item will be displayed as last update timestamp. Use an item with the timestamp as state and set the pattern of the "State Description" metadata to format the timestamp.
      label: Last update item
      name: update_item
      required: false
      type: TEXT
      groupName: items
    - description: Label to be displayed in front of the temperature.
      label: Temperature Label
      name: tmp_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the temperature.
      label: Temperature Suffix
      name: tmp_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the humidity.
      label: Humidity Label
      name: hum_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the humidity.
      label: Humidity Suffix
      name: hum_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the last update timestamp.
      label: Last Update Label
      name: update_label
      required: false
      type: TEXT
      groupName: labels
  parameterGroups:
    - name: title
      label: Title
    - name: items
      label: Items
    - name: labels
      label: Labels
timestamp: Sep 26, 2023, 7:19:38 PM
component: oh-label-cell
config:
  header: = props.title
  label: '= (props.tmp_label ? props.tmp_label + " " : "") + items[props.tmp_item].state + (props.tmp_suffix ? " " + props.tmp_suffix : "")'
  trendItem: = props.tmp_item
  action: analyzer
  actionAnalyzerItems: "=props.hum_item ? [props.hum_item, props.tmp_item] : [props.tmp_item]"
  icon: oh:temperature
  subtitle: '= (props.hum_label ? props.hum_label + " " : "") + (props.hum_item ? items[props.hum_item].state : " ") + (props.hum_suffix ? " " + props.hum_suffix : "")'
  footer: '= (props.update_item ? (props.update_label ? props.update_label : "")  + " " + items[props.update_item].displayState : "")'
  expandable: false

I used the Em Space from https://emptycharacter.com/ to make Openhab think there’s still something to display for the subtitle - this way the temperatures stays aligned

[matt1 (Skinah)]

@the-ninth
Your widget may need this to be installable.

FIXED/SOLUTION Installing from marketplace gives Couldn't find the widget in the add-on entry

If you are getting this error in the openhab.log [ERROR] [munity.CommunityUIWidgetAddonHandler] - Widget from marketplace is invalid: Couldn't find the widget in the add-on entry Then please give this post to the person that created the widget entry so they know the fix… The solution for me was to edit the post that enters the widget into the marketplace and to add the word yaml after the start of the code fence to supply the widget code. It should be ```yaml Widget code goes here ``` I wo…

work around until this is done, is to create the widget by cut and pasting the code into the developers tools yourself.

[the-ninth (Robert)]

@matt1

Your widget may need this to be installable.

Thanks, just made the change, hope it works.

[matt1 (Skinah)]

works for me to install it, thanks.

[kdb (Klaus-Dieter Brinkmann, Dr.)]

Hello !
I get lastupdate item as string hhh:mm:ss from a sensor as json data.
How can I display it in your widget ?
Thank you

[kdb (Klaus-Dieter Brinkmann, Dr.)]

Hey, is there any possibility to change format of text ( size, color, font )
Thank you

[the-ninth (Robert)]

@kdb

I get lastupdate item as string hhh:mm:ss from a sensor as json data.

You can use any item that contains the last update time. Formatting is done via the state description of the item, the widget just takes what it gets from there.

[the-ninth (Robert)]

@kdb

Hey, is there any possibility to change format of text ( size, color, font )

I am afraid not - the widget is based on the oh-label-cell, and I do not see any options there to customize the text formatting:

oh-label-cell - Label Cell

[Boby (Robert K.)]

Hi @the-ninth , would it be possible to add an action? I have currently a simple label cell and when I click on it, I can navigate to a separate page with details. Not possbile with your widget

[the-ninth (Robert)]

Hi @Boby, so currently the action is hardwired to “analyze”, a click on the widget shows the diagram with temperature and humidity. The possible configurations for actions are quite complex, so it would be create a lot of additional parameters to add all of them to the widget configuration. An easier way would be to be able to override the default configuration in the widget YAML, however it seems OH does not support that. At least I failed when I tried. I will post a question in the forum, maybe someone else knows how to do this.

[djal (Dusan Jaluvka)]

Actually it is very easy to adapt using actionPropsParameterGroup property + action parameters group:

uid: TemperatureHumidity
tags:
  - temperature
  - humidity
  - standalone
props:
  parameters:
    - description: Title of the cell.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: title
    - context: item
      description: The state of this item will be displayed as temperature.
      label: Temperature item
      name: tmp_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The state of this item will be displayed as humidity.
      label: Humidity item
      name: hum_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The display state of this item will be displayed as last update
        timestamp. Use an item with the timestamp as state and set the pattern
        of the "State Description" metadata to format the timestamp.
      label: Last update item
      name: update_item
      required: false
      type: TEXT
      groupName: items
    - description: Label to be displayed in front of the temperature.
      label: Temperature Label
      name: tmp_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the temperature.
      label: Temperature Suffix
      name: tmp_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the humidity.
      label: Humidity Label
      name: hum_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the humidity.
      label: Humidity Suffix
      name: hum_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the last update timestamp.
      label: Last Update Label
      name: update_label
      required: false
      type: TEXT
      groupName: labels
  parameterGroups:
    - name: title
      label: Title
    - name: items
      label: Items
    - name: labels
      label: Labels
    - name: myAction
      context: action
      label: Click action
timestamp: Feb 7, 2025, 10:56:07 AM
component: oh-label-cell
config:
  header: = props.title
  label: '= (props.tmp_label ? props.tmp_label + " " : "") +
    items[props.tmp_item].state + (props.tmp_suffix ? " " + props.tmp_suffix :
    "")'
  trendItem: = props.tmp_item
  actionPropsParameterGroup: myAction
  icon: oh:temperature
  subtitle: '= (props.hum_label ? props.hum_label + " " : "") +
    items[props.hum_item].state + (props.hum_suffix ? " " + props.hum_suffix :
    "")'
  footer: '= (props.update_item ? (props.update_label ? props.update_label :
    "")  + " " + items[props.update_item].displayState : "")'
  expandable: false

[the-ninth (Robert)]

@djal

Actually it is very easy to adapt using actionPropsParameterGroup property + action parameters group:

Thank you, that is a great solution! Is there a way to set default values to the analyze action?

[djal (Dusan Jaluvka)]

I’m not sure if there is any clever way how to combine the actionPropsParameterGroup with standard action parameters.
One possibility is to add switch to properties that allows you to override default action. If it is false then the widget uses default “hardcoded” action. If true then it uses the action defined in properties.

I tested it and it works like that:

uid: TemperatureHumidity
tags:
  - temperature
  - humidity
  - standalone
props:
  parameters:
    - description: Title of the cell.
      label: Title
      name: title
      required: true
      type: TEXT
      groupName: title
    - context: item
      description: The state of this item will be displayed as temperature.
      label: Temperature item
      name: tmp_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The state of this item will be displayed as humidity.
      label: Humidity item
      name: hum_item
      required: true
      type: TEXT
      groupName: items
    - context: item
      description: The display state of this item will be displayed as last update
        timestamp. Use an item with the timestamp as state and set the pattern
        of the "State Description" metadata to format the timestamp.
      label: Last update item
      name: update_item
      required: false
      type: TEXT
      groupName: items
    - description: Label to be displayed in front of the temperature.
      label: Temperature Label
      name: tmp_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the temperature.
      label: Temperature Suffix
      name: tmp_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the humidity.
      label: Humidity Label
      name: hum_label
      required: false
      type: TEXT
      groupName: labels
    - description: Suffix to be displayed after the humidity.
      label: Humidity Suffix
      name: hum_suffix
      required: false
      type: TEXT
      groupName: labels
    - description: Label to be displayed in front of the last update timestamp.
      label: Last Update Label
      name: update_label
      required: false
      type: TEXT
      groupName: labels
    - description: Allows to override default
      label: Override action
      name: actionOverride
      required: false
      default: 'false'
      type: BOOLEAN
      groupName: myAction
  parameterGroups:
    - name: title
      label: Title
    - name: items
      label: Items
    - name: labels
      label: Labels
    - name: myAction
      context: action
      label: Click action
timestamp: Feb 8, 2025, 1:54:19 PM
component: oh-label-cell
config:
  header: = props.title
  label: '= (props.tmp_label ? props.tmp_label + " " : "") +
    items[props.tmp_item].state + (props.tmp_suffix ? " " + props.tmp_suffix :
    "")'
  trendItem: = props.tmp_item
  actionPropsParameterGroup: =props.actionOverride?'myAction':''
  action: analyzer
  actionAnalyzerItems: =[props.hum_item, props.tmp_item]
  icon: oh:temperature
  subtitle: '= (props.hum_label ? props.hum_label + " " : "") +
    items[props.hum_item].state + (props.hum_suffix ? " " + props.hum_suffix :
    "")'
  footer: '= (props.update_item ? (props.update_label ? props.update_label :
    "")  + " " + items[props.update_item].displayState : "")'
  expandable: false

[djal (Dusan Jaluvka)]

Anyway I would stick with standard oh-label-cell as with that you still can define the expanded cell content for each use, which is not much possible when you wrap it inside a widget.

I also had similar widget, but I stopped to use it as I wanted to display additional info for each cell. So now I use standard label cell with expressions that gives me much flexibility.

component: oh-label-cell
config:
  title: Temperature
  icon: oh:temperature
  item: VenkuTeplota
  trendItem: VenkuTeplota
  subtitle: =@'VenkuVlhkost'
  footer: =dayjs(@@'VenkuTeplotaLastUpdateTime').format('dd H:mm')
  action: popup
  actionModal: page:grafVenkovniTeplotaVlhkost
slots:
  default:
    - component: f7-col
      slots:
        default:
          - component: Label
            config:
              text: "='Min today: '+@'VenkuTeplotaMin'"
          - component: Label
            config:
              text: "='Max today: '+@'VenkuTeplotaMax'"
          - component: Label
            config:
              text: "='Avg today: '+@'VenkuTeplotaAvg'"

[the-ninth (Robert)]

@djal

One possibility is to add switch to properties that allows you to override default action.

I used your approach now, but based on a hint from @JustinG I went without a dedicated switch and just used the action itself. If it is not set, the actionPropsParameterGroup won’t be filled and therefore the analyzer I configured will be used.

Updated code is in the intial post. I think that should also do the trick for publishing the update on the market place, or do I need to do anything else?