Temperature Formatting Decimal Places in Template Widget

Matt_Foreman · March 19, 2019, 12:37am

Hey Guys,

Spent last night making a nice simple weather template widget. I am happy with it but for some reason, I can’t work out how to change the temperatures to a single decimal, or even a round number. I searched the forums and am now stumped lol.

I want the temperatures shown as 20.1°C or even just 20°C instead of 20.96°C.

I added the items through paper UI

Here is my template:

<style>
.rzslider .rz-pointer {
    background: hsl(47, 100%, 50%);
}  
  
.condition {
    font-size: 32px;
    text-transform: capitalize;
    margin-top: -10px;
}  
.title {
    font-size: 14px;
    padding-top: 7px;
}

.indoor {
    border-bottom: 5px solid #243a50;
      width: 96%;
    margin-left: auto;
    margin-right: auto;
}
  
.indoortemp {
    padding-bottom:10px;
  	font-size: 32px;
}

.weather {
    border-bottom: 5px solid #243a50;
    padding-top: 10px;
      width: 96%;
    margin-left: auto;
    margin-right: auto;
}
  
.forecast {
    padding-top: 10px;
      width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.result {
    font-size: 32px;
}
  
img.icon {
    padding: 0px !important;
    margin-top: -10px;
}
</style>

<div class="row">
  <div class="indoor">
   <div class="title">INDOOR TEMP</div>
    <div class="indoortemp">{{itemValue('HueTemperatureSensor1_Temperature')}}</div> 
  </div>
    <div class="weather">
    <div class="title">WEATHER NOW</div>
    <div class="result">{{itemValue('LocalWeatherAndForecast_Current_OutdoorTemperature')}}</div>
    <div class="condition">{{itemValue('LocalWeatherAndForecast_Current_WeatherCondition')}}</div>
  <img class="icon" height="100%" ng-src="{{itemValue('LocalWeatherAndForecast_Current_Icon')}}" src="{{itemValue('LocalWeatherAndForecast_Current_Icon')}}"></img>
  </div>
    <div class="forecast">
      <div class="title">FORECAST FOR {{itemValue('LocalWeatherAndForecast_ForecastHours06_ForecastTime') | date:'h:mma'}}</div>
    <div class="result">{{itemValue('LocalWeatherAndForecast_ForecastHours06_ForecastedTemperature')}}</div>
    <div class="condition">{{itemValue('LocalWeatherAndForecast_ForecastHours06_ForecastedWeatherCondition')}}</div>
  <img class="icon" height="100%" ng-src="{{itemValue('LocalWeatherAndForecast_ForecastHours06_Icon')}}" src="{{itemValue('LocalWeatherAndForecast_ForecastHours06_Icon')}}"></img>
  </div>
</div>

NicGray · March 19, 2019, 3:21am

Does it not take it from the Item definition?

What do you have in your item file for HueTemperatureSensor1_Temperature?
You want the label to be formatted something like:

Number Hallway_Temperature "Temperature [%.1f °C]" <Temperature> {channel="zwave:device:512:node25:sensor_temperature"}

in order to show 1 decimal place, %.2f for 2 etc. Not played around with rounding…

Matt_Foreman · March 20, 2019, 4:17pm

Thanks, but I don’t have an Item file. Its all done through paper UI and Hab Panel

Dave_K · March 22, 2019, 9:11am

I’m not quite sure, since I don’t use PaperUI for this, but you can try adding “[%.1f °C]” to the label of your item. If you create an item in your items-file you would use “Temperature [%.1f °C]” as the label, so i guess this should work im PaperUI too.

Matt_Foreman · March 22, 2019, 4:18pm

Thanks Dave I will give it a try.

Matt_Foreman · March 25, 2019, 11:24pm

I put that code into the label and it just returns NULL. Shame. Thanks anyway

johntech · March 26, 2019, 3:46am

@Matt_Foreman
I think there is one of the items you fill in in Paper UI screen when you click SHOW MORE on the Configure channel screen. It’s called Outgoing value format you need it set to %.0f °C or F
I’m not sure about the [ ] as I use the items file. The “0” tells how many decimal places to display after the decimal point. ex: %.3f will give you readings like x.038

To get the ° symbol, hold down the ALT key and type 0176.

I wish they would make the color of the text a little darker so you can read it!!

John Frankforther

Matt_Foreman · March 26, 2019, 5:01am

Hi John, really appreciate your reply. I have spent 10 minutes looking for the Configure Channel section you mention in paper UI under the Item in question and the thing. Cant find it anywhere! Could you attach a screenshot or the exact location? I figured it would be PAPER UI > Configuration > Items > Temp Sensor > edit

johntech · March 26, 2019, 1:22pm

Ok
Go to Paper UI. Click on Configuration. On the left side of the screen click on Things. This will bring up a list of things you have added. Find the THING that you want to edit. (ex: I clicked on Office Comfort on my screen). Click on the pencil icon on the right. This should bring up the screen showing the channels connected for that THING. Click on the pencil icon on the right to edit the information for that channel. When the Configure channel screen pops up you will see the words SHOW MORE on the bottom left of that screen. Click on those words and it will show more as shown below by the red arrows. Mine indicates SHOW LESS because I have already clicked on SHOW MORE. Then enter your temperature format command in the Outgoing value format line.

Outgoing value format
Format a value before it is published to the MQTT broker. The default is to just pass the channel/item state. If you want to apply a prefix, say “MYCOLOR,”, you would use “MYCOLOR,%s”. If you want to adjust the precision of a number to for example 4 digits, you would use “%.4f”.

Matt_Foreman · March 26, 2019, 4:38pm

Yeah that option is definitely not there. perhaps it is something to do with the fact it is a Philips hue motion sensor (which has a temperature thing, a presence thing, and a ambient light thing.) I am obviously looking in the temperature thing.

johntech · March 27, 2019, 1:21am

Oh I thought you had a regular temperature sensor. Sorry.

Matt_Foreman · March 28, 2019, 7:36pm

Thankd for trying to help anyway

alfista2600 · August 13, 2020, 4:52pm

I’m trying to do the same thing as the OP.

My temperature items have a number format, and if I use them in a standard HABPanel dummy item, the format is properly reflected.

However, using this template code, I get 9 digits of precision.

<div 
  ng-style="{'opacity': 0.7, 
  'background-color': itemValue('C_NodeMCURecRoom_Temperature_TempDiff') > 0 ? '#0000aa' : '#aa0000'
  }"
  class="template-container"
  style="top:0;bottom:0;left:0;right:0;position:absolute">
  <div class="template-contents">
		<div class="row">
			<div class="col-xs-12"><span style="color: #FFFFFF; opacity: 1.0; font-size: 10pt; text-align:center">Rec Room Difference</span></div>
		</div>
		<div class="col-xs-12"><span style="color: #00ccff; opacity: 1.0; font-size: 24pt; text-align:center">{{itemValue('C_NodeMCURecRoom_Temperature_TempDiff')}}</span></div>
	</div>
</div>

Any thoughts?