Temperature and Humidity Display Widget

the-ninth · January 21, 2023, 5:55am

Widget - Long and Short

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:

Widget - Long

Example configuration with short labels:

Widget - Short

Configuration:

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

Changelog

Version 0.1

initial release

Resources

The YAML code for the widget:

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
timestamp: Jan 21, 2023, 5:07:58 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'
  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

hmerk · January 21, 2023, 7:49am

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

the-ninth · January 21, 2023, 7:50am

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 · January 21, 2023, 7:58am

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

ThaDaVos · September 26, 2023, 5:03pm

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 · September 26, 2023, 5:21pm

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 · January 20, 2024, 2:24am

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

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

the-ninth · January 20, 2024, 2:15pm

Thanks, just made the change, hope it works.

matt1 · January 20, 2024, 2:24pm

works for me to install it, thanks.

kdb · February 23, 2024, 1:06pm

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 · March 8, 2024, 8:58am

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

the-ninth · March 15, 2024, 8:57am

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 · March 15, 2024, 9:01am

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: