Hi,
is it possible to display a clock (digital version) with the new UI?
thanks!
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')
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 .
Interesting.
Also another way of doing this - maybe quite whacky.
system load is obviously not a consideration here
A small correction, the format is
=dayjs().format(āHH:mmā) not
=dayjs().format(āHH:MMā), because MM gives you the monthā¦
Thx - 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
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
FYI:
openHAB 3 now (next release) includes a standard clock widget card (https://github.com/openhab/openhab-webui/issues/669).
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 .
@JimT: I think youāll get it in the next days .
Thank you! @hubsif please ping me once youāve got a PR going for it. Please let us customise the class and style thanks!
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.
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.
fully agreed. Wondering why I couldnāt think of thisā¦
Pull Request updated
I had a look at the PR. Perfect! Thank you so much!