Is there a way to come up with a simple hour:minutes clock within the template widget or I need to pull that as a variable from OH?
Maciej
<div ng-init="clockmodel={
'mode':'digital',
'font_size':16,
'digital_format':'HH:mm'
}">
<widget-clock ng-model="clockmodel" />
</div>
All model properties are optional.
1 Like
Ive copied this code into a template widget and get nothing. Am I missing something? other samples from other pages seem to work?
How old is the version of HABpanel that you are running?
I am running today’s openHAB 2 snapshot #579 and the clock works perfectly within the template widget.
sorry for the noob question but how would I find out?
This will depend on what version of openHAB 2 you are running (I am assuming you are not running OH 1). And then it will depend on whether you installed the offline or online version of openHAB.
If you installed the offline version and assuming that you installed it from the Paper UI. Try and uninstall and then reinstall HABpanel from the Paper UI.
If this does not work, then I recommend that you update to the latest snapshot of openHAB 2. Following is a link to a thread re: updating to the latest snapshot (just in case).
Ah you beat me to my own reply.
I used this method and I now see a clock!
Cool!
Now if only I could find out how ben did this:
Id be set!
I can see a clock on top of the start page, but when i select a dashboard the clock disappeared. Is it possible to add a clock+date at the top of a dashboard (so it won’t take space from the dashboard itself)?
No, you cant have it there. That panel is gone anyway if you use kiosk=on.
I have gone to do a thin template widget where I have a title of the panel a clock and a temp of the room.
I wish I could do it a little bit smaller but that is smallest possible height for a widget.
How to you manage to have te time and the temp on your status bar ?
There is a code for the clock statusbar in thermostat thread.
How can you modify the font family, background color, background icon of this widget? Can you show me how?
@Nguy_n_Phuc_Anh_D_ng I did this slightly differently and created a DateTime item in openhab which I then used in habpanel to display the current time:
item:
DateTime current_time "Current Time: [%1$tH:%1$tM]" (Weather) { channel="ntp:ntp:home:dateTime" }
Habpanel:
<div class="col-xs-6 value" style="font-size: 24px; font-size: 4vw; text-align: right; right: 2%">
<span>{{itemValue(config.datetime) | date:"H:mm"}}</span>
</div>
That way I have full control over display and format of time.
It’s a good idea but I would not prefer to use it because as you know item created from .items file often crashes down unexpectedly and I would be very disappointed if that case happened. I think the best solution is use clock-model like above. But it’d be more ideal if we can adjust the font family of it to something more “digital”. I hope the author could suggest the solution!
Thanks all of you! @ysc
To change the font-family of the clock, this should do the trick:
<style>
@import url('https://fonts.googleapis.com/css?family=Orbitron');
widget-clock .time {
font-family: 'Orbitron', sans-serif !important;
}
</style>
For backdrop icons, <widget-icon> has a backdrop attribute, e.g.
<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="80" backdrop="true" />