Filebased item config: Unit in stepper and valuebased icon

Hi all,

is it possible to get the unit into a stepper widget?
I have following filebased item config:

Number      ItemName  "Item Name"  <heating>  (SummaryGroup, LocationGroup)                              ["Setpoint", "Temperature"]         {widgetOrder="0", widget="oh-stepper-card"[step=0.5,max=28,min=16], stateDescription="%.0f %unit%"}

And the item on the autogenerated location card card looks like:

I would like to have the °C into the box of the stepper.

Another question would be: Can I configure a valuebased icon for this?

Number:Temperature

should do

Another question would be: Can I configure a valuebased icon for this?

Have a look on this post !

but only if he adds unit="°C" to the item metadata. :wink:
Otherwise it might work, but one can never be sure.

1 Like

I have added both, but still don’t get it into the stepper:

I tried it with unit in the widget properties and outside.
And I think I used the wrong default widget, so I changed from widget=“oh-stepper-card” to listWidget=“oh-stepper-item”

Number:Temperature ItemName "Item Name" <heating> (SummaryGroup, LocationGroup) ["Setpoint", "Temperature"] {listWidget="oh-stepper-item"[step=0.5,max=28,min=18,iconUseState=true,unit="°C"], unit="°C"}

I think the heating icon is already available in different states, but I wondering how to configure, when would icon should be used. With the value of 18 the off icon is shown, with more the cold icon is shown, but I did not get a warm icon

Number:Temperature ItemName "Item Name [%.1f °C]" ...

The “normal” heating icon has the steps “on, off, 0, 20, 40, 60, 80 and 100”. as one can see here. Therefore 18 is nil or off. There’s another post you should keep an eye on.
So if you want to have other steps for your icon, you have to create your own stepped icon.
Example-Snapshot of a Sitemap


and the code:

Frame label="Heizkörpersteuerung" icon="heating"
  {
      //Image url="http://192.168.178.76:8080/icon/heating1.svg" // Test with local images via http from the icon(s)-folder
      Group item=gRtIstI
      Group item=gRtIstA  label="Garage/Dachboden"  valuecolor=[>=30="fuchsia",>=25="red",>=18="orange",>=8="green",>=4="teal",>=1="blue",<1="silver"]
                                                    labelcolor=[>=30="fuchsia",>=25="red",>=18="orange",>=8="green",>=4="teal",>=1="blue",<1="silver"]
//      Group item=gRtSoll
      Setpoint item=radiator_valve_01_Set minValue=16.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_01_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      Setpoint item=radiator_valve_08_Set minValue=16.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_08_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      Setpoint item=radiator_valve_04_Set minValue=16.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_04_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      Setpoint item=radiator_valve_03_Set minValue=12.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_03_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      Setpoint item=radiator_valve_05_Set minValue=16.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_05_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      Setpoint item=radiator_valve_08_Set minValue=16.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_08_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      Setpoint item=radiator_valve_07_Set minValue=16.0 maxValue=25.0 step=0.5
      Selection item=radiator_valve_07_Mode mappings=["ON"="ON", "OFF"="OFF", "COMFORT"="COMFORT", "ECO"="ECO", "BOOST"="BOOST", "WINDOW_OPEN"="Fenster offen"] icon="heating2"
      
  } //  Ende "Heizkörpersteuerung"  

.items

Number:Temperature            radiator_valve_01_Set             "Solltemperatur Büro[%.1f %unit%]"                              <heating1>        (gRFritz_01,gRtSoll)                        ["Setpoint"]                          { channel="avmfritz:Comet_DECT:7590:119601003400:set_temp",listWidget="oh-stepper-item" [step=0.5, min=6, max=24], widget="oh-stepper-card" [step=0.5, min=6, max=24]}
String                        radiator_valve_01_Mode            "Heizkörper Büro Modus [%s]"                                    <heating2>        (gRFritz_01)                                ["Setpoint"]                          { channel="avmfritz:Comet_DECT:7590:119601003400:radiator_mode" }

As one can see, I used two “custom-made” icons (heating1, heating2), based on the original, but using other steps, as in the link above.
Attached you’ll find my definition of the heating-icons. Heating1 is separated in steps and heating2 is separated in functions.
As you see there’s nothing to configure in the item, but in the icon-type.
heating1-30.zip.txt (57.4 KB)

1 Like

Unfortunately still now result.
Maybe it’s just not possible?

Oh location card! - that’s mainui stuff. I originally thought it was sitemap. At a glance, it seems that it’s currently not supported. It only shows a number in there. Not a bad idea to add units in there, or just use the state description’s format.

@japhias please open a github issue / feature request here: https://github.com/openhab/openhab-webui/issues

Never mind, there’s already a similar issue 'displayState' equivalent for 'oh-stepper-card' · Issue #2875 · openhab/openhab-webui · GitHub

No, not in sitemaps, they’re using standard widgets which do not support applying display patterns.
Attempting so is a bad idea in principle because variable-length display data very easily messes up the whole design.

In main UI you can design your own custom widgets. It’s probably not worth the hassle, though.

I think adding a unit makes a lot of sense and it would be a very nice thing to have.

I would argue that it is an important option to add, but that if it were the only setting or even on by default it could be pretty disruptive to a lot of pre-existing configurations.

I don’t disagree, I have been wanting to see that feature in the past, too.
But it’s a real challenge to any developer as to be consistent, you would need to be providing an optically satisfying solution that will not break design and work for all units, as lengthy as they can be. Tricky. But if you want to give it a shot, please do. As Justin responded, it should be an option.

In fact, I should have pointed out that this is already possible with css:

component: oh-stepper-card
config:
  title: Stepper with unit
  stylesheet: >
    .stepper-value::after {
     content: "°C";
     margin-left: 4px;
    }

image

So really, the only reason to add the option is to make such a configuration more accessible without resorting to custom widget creation.

I was thinking that it would automatically pick up the state description or label format (I still don’t fully understand the difference / relationship between the two!) of the linked item.

Yes, doing this would automatically change pre-existing config, most likely, but would it really be a bad thing though?

Alternatively, we could have a config on the oh-stepper called withUnit (or something), but that wouldn’t change the automatically generated stuff

In my opinion, yes. But that is just my opinion.

This is exactly what I was thinking. And while it wouldn’t change the autogenerated list items by default, a user could go through the UI via the defaultListItem metadata to enable the option for any item that they felt needed it.

So withUnit: true uses statedescription (a whole lot of code is needed to achieve this), or withUnit: " °C" (super simple to add). I’d probably start with the latter.

Or

valueFormat: "%.1f %unit%"

note the OP wants this in sitemaps, so custom widget design and CSS aren’t options.