OH3 UI show clock

,

Hi,
is it possible to display a clock (digital version) with the new UI?

thanks!

If you mean a clock who counts the seconds/minutes in realtime without any interaction - currently not. But I can’t say anything on the exact (auto)refresh mechanisms.

A clock which shows the current timestamp of the time of your last interaction / load / the last autorefresh is of course possible. The simplest would be an expression like this inside a widget:

=dayjs().format('HH:mm')
2 Likes

Right, probably could be added as a new system widget, with styling options so you can put it wherever you want.

That would be a good idea and certainly helpful.

For those that can’t wait (like me) and those that have the possibility to somehow load extra Javascript code to a site (e.g. the Android app “Fully” I’m using can do that):

What I did is I created a simple label widget with a unique class name, like this:

uid: clock
component: f7-card
config:
  content: clock
  class: myclock
  style:
    font-size: 4vw

and a javascript file:

setInterval(function() {
  document.querySelector(".myclock .card-content").innerHTML = new Date().toLocaleTimeString();
}, 1000);

Then put that file as static file on the openHAB server, have it loaded alongside your openHAB UI and you’ll have a clock.

But I’m sure a clock system widget will be available soon :wink: .

Interesting.
Also another way of doing this - maybe quite whacky.

  1. Create a string item
  2. Create a rule based on cron trigger, to send it the string item an update of now().toString (or something similar). Ideally, the cron trigger could be every second, but well yeah… it could be a minute to if the display is only HH:MM.
  3. in the OH3 UI, use the dayjs library to display the state of the item in HH:MM state.

system load is obviously not a consideration here :slight_smile:

A small correction, the format is
=dayjs().format(‘HH:mm’) not
=dayjs().format(‘HH:MM’), because MM gives you the month…

Thx :slight_smile: - corrected it!

Here are some more infos on the format…

Here is a working version.
item: (the state value is manually set to any time stamp. setting it to a valid time stamp is important. can be set by rule upon system startup)

{
  "link": "http://192.168.1.XXX:8080/rest/items/test3",
  "state": "2020-12-17T12:00:00.000Z",
  "editable": true,
  "type": "String",
  "name": "test3",
  "label": "test3",
  "category": "",
  "tags": [],
  "groupNames": []
}

Rule (execute at 2sec mark of every min… can be 0 sec mark):

triggers:
  - id: "1"
    configuration:
      cronExpression: 2 * * * * ? *
    type: timer.GenericCronTrigger
    conditions: []
actions:
  - inputs: {}
    id: "2"
    configuration:
      considerConditions: false
      ruleUIDs:
        - Refresh_Clock
    type: core.RunRuleAction

script (Refresh_Clock):

value = itemRegistry.getItem('test3').getState();
events.postUpdate('test3', NULL);
events.sendCommand('test3', value);

widget:

uid: clock
props:
tags: []
component: f7-card
config:
  title: =dayjs(items.test3.state).add(-1*dayjs(items.test3.state).diff(dayjs()),ms).format("hh:mm A")

Can’t record a screen video. but here are a couple of screen shots 1 min apart with reference to my laptop system clock
image
image

This workaround basically uses a timestamp state from an item to calculate the current time in the widget. The rule constantly updates the item state from current state to null to current state value. Thus the widget keeps refreshing because of the change in item state :slight_smile:

1 Like

FYI:

openHAB 3 now (next release) includes a standard clock widget card (https://github.com/openhab/openhab-webui/issues/669).

4 Likes

I’m using the NTP binding to have a DateTime called “Date” item with the current date which is updated every minute / 60 seconds.

Then in OH3 UI this works:

text: =dayjs(items.Date.state).format('hh:mm')

Just works!

I wish there’s a clock system widget, not a card, so I can have a bit more freedom in styling / spacing it.

Ah, and here it is, the request for a system widget. @ysc saw that coming when I contributed the clock card :smiley:.
@JimT: I think you’ll get it in the next days :wink:.

1 Like

Thank you! @hubsif please ping me once you’ve got a PR going for it. Please let us customise the class and style thanks!

1 Like

Hi @JimT,

I just created that PR. Thanks for the hint about custom styling, though it’s not that easy, as the clock itself consists of two rows (for each time and date). So, I applied the custom stylings to the surrounding div.

Since you asked to be informed about the PR: Do you happen to run a mainUI dev environment, so you can check if the custom styling is ok like that?

How about the component to have just one element, since you can set whether it’s a date or a time or a combination thereof just by using the format string? That way there’s complete freedom as to the spacing / margins / padding etc. If someone wants date on one line and time on the next line, they can just insert two components.

Yes I’ve recently built the org.openhab.ui bundle from openhab-webui and run it on top of openhab-core M2. I would like to use oh-snapshot but it’s too buggy for me.

I also think this would be a good addition to the current functionality with regard to the points mentioned.

fully agreed. Wondering why I couldn’t think of this… :smiley:

Pull Request updated

3 Likes

I had a look at the PR. Perfect! Thank you so much!