Number:Time Item value to HH:MM:SS format

[wiewior (Jacek)]

In this post I was trying to resolve the formatting of the Number:Time Item. It was successful but I can not get it displayed in the same format in HABPanel widget. I decided to come to create this post because the previous one was actually closed.

What do I do wrong? How to format Number:Time item to the HH:mm:SS format?

This is a div section and its widget formating:

<style>
  .section_countdown {
  margin: 10px;
  }
  
  .countdown {
  border: 1px solid;
  border-radius: 10px; 
  margin: auto;
  padding:10px;
  width: 100%;
 	font-size: 20px;
  }
  
</style>
	<div class="section_countdown">
		<div class="countdown">{{itemValue('timerOfficeLight') | date:'HH:mm:SS'}}</div>`
	</div>

[JimT (jimtng)]

Please bear in mind that I have absolutely zero clue in this because I have never used habpanel and never looked into it, never tried to learn about it.

Nevertheless, I did some looking around

HABPanel Development & Advanced Features: Start Here!

This Wiki post aims to be a centralized resource to help new users (and experienced users alike!) with the advanced features in HABPanel. It will contain relevant examples and links to help you with common issues and getting the most out of these features! Users with the “Member” badge (and levels above) can edit this post, don’t hesitate to do so if you deem it appropriate Templates & Custom Widgets What are templates? If the standard widgets don’t fit your needs or your taste, HAB…

Among other things I learned from glancing at that:

• itemValue is the old name, kept for compatibility reasons. You should use itemState
• It returns the formatted value of the item, so maybe have you tried doing it without adding the |date:xxxxx and just use itemValue / itemState ?

[wiewior (Jacek)]

Thank you again for the support. I read this article and also this one I am going through several posts with similar issues. This one for example.
Since I am not a developer many times it is change and try in my case. But… I am learning.

@JimT

so maybe have you tried doing it without adding the |date:xxxxx and just use itemValue / itemState ?

No this is not the case. I use in other widgets itemValue and it works perfectly. It has sth with the original Item format. Since it is the Number:Time not the Date:Time it might cause issues. I will figure it out. need time an a little bit of experts support.

[JimT (jimtng)]

Number:Time is essentially just a number (like an integer) that stores (possibly) the number of seconds (sub seconds are stored as decimal points). So I’m guessing you can’t treat it as a date.

[wiewior (Jacek)]

What is confusing me it the pattern ‘%tT’ used in the UI widget works perfectly

So it handles the int value somehow.
Or maybe I am just too much focused on this what the widget is displaying…
At the logfile I still see the number…

2023-03-29 12:31:34.024 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 136 s to 135 s
2023-03-29 12:31:35.026 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 135 s to 134 s
2023-03-29 12:31:36.029 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 134 s to 133 s
2023-03-29 12:31:37.032 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 133 s to 132 s
2023-03-29 12:31:38.036 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 132 s to 131 s
2023-03-29 12:31:39.039 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 131 s to 130 s
2023-03-29 12:31:40.043 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 130 s to 129 s
2023-03-29 12:31:41.047 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 129 s to 128 s

[JimT (jimtng)]

Yes, but javascript / vue in habpanel doesn’t use the same code to format things

[wiewior (Jacek)]

and here comes my programming weakness out. I do not know javascript. In the worst case I will have to follow the solution from @shmilgan from here or deal with the item format.

[wiewior (Jacek)]

Finally I went with @shmilgan suggestion and convert the value to string.
This is my rule slightly changed to @shmilgan suggestion.

rule "Countdown format"
when
    Item timerOfficeLight changed
then
    
    var val_now = (timerOfficeLight.state as Number).intValue
    
    var sec = val_now % 60
    var min = (val_now / 60) % 60
    var hrs = (val_now / (60*60)) % 24
    var day = val_now / (60*60*24)

    var String str 
        
    if ( day > 0 ) {
        str = String::format("%1$02d days, %2$02d:%3$02d:%4$02d", day, hrs, min, sec)
    }

    if ((day == 0) && (hrs == 0)) {
        str = String::format("%1$02d:%2$02d", min, sec)
    }
    else 
        str = String::format("%1$02d:%2$02d:%3$02d", hrs, min, sec)
        
    Office_CountdownString.postUpdate(str)        
end

Thanks all for the support.

[JimT (jimtng)]

Here’s a shorter rule.

rule "Countdown format"
when
    Item timerOfficeLight changed
then
    var fmt = "%tT"
    if ((timerOfficeLight.state as Number).intValue < 3600) {
      fmt = "%M:%1$tS"
    }
            
    Office_CountdownString.postUpdate(timerOfficeLight.state.format(fmt))        
end

It doesn’t handle “days”, but I don’t think you need it.

It’s still not ideal. You need to find out how to display formatted items in habpanel then you won’t need this rule and the extra item at all.

[wiewior (Jacek)]

Thanks. Indeed. It is shorter but I had to change the formatting to:

fmt = "%1$tM:%1$tS"

@JimT

you won’t need this rule and the extra item at all.

right. this was my goal. So let me keep the post open for a while. Maybe someone more experience will help

[JimT (jimtng)]

@wiewior

Thanks. Indeed. It is shorter but I had to change the formatting to:

fmt = "%1$tM:%1$tS"

I was testing you!

It could also be fmt = "%tM:%1$tS" but what you’ve got is fine too.

[wiewior (Jacek)]

@JimT

I was testing you!

thank you