Analog Clock for Lovelace

Andy_Wismer · March 2, 2020, 8:57pm

Hi

For all who’d like to have a large analog clock somewhere on their Lovelace Interface (Kiosk, mode, “Houston Control” style screens…) how’s this for a first work:

Plain Version:

Swiss Railway Clock (SBB) inspired:

The second hand actually moves like the real one, stopping at 12 for 1.5 seconds, before moving on…
The clock itself is animated SVG, using embedded JS. Due to being SVG, it can scale to any size without pixeling… The Background image isn’t SVG, but can be adapted in the calling index.html.

At the moment this needs:

Lovelace side:
An iFrame Tile:

Server side:
A folder on any webserver containing code from here:

http://www.3quarks.com/en/SVGClock/index.html

and a packaging index.html file, with a CSS Background Image representing the clock background.

All in all, only 3 files needed on the web server!
I can provide these files, but I have no idea how or where to post them.
Also someone might provide me with some tips, how i could place this stuff in /local/analog-clock (CONFIG/www/analog-clock) instead of using an external web-server - making this simple clock self-contained…

Thanks for any tips…
Andy

DennisB66 · March 6, 2020, 11:05am

Hi Andy,

Nice widget.

Not sure if this is the proper way but I created a folder ‘clock’ in ‘/config/www/community/’ and then placed two files (not using a CSS background yet) in this folder: german-clock.svg + clock.html (as generated by the 3quarks site).

After that I created an iFrame tile with the following script:

type: iframe
url: /local/community/clock/german-clock.svg
aspect_ratio: 30%

Seems to work well so far in my setup.

Thanks, Dennis

DennisB66 · March 6, 2020, 11:50am

Small correction.

The iFrame tile configuration should look like something as (which in case uses index.html instead of clock.html):

type: iframe
url: /local/community/clock/index.html
aspect_ratio: 44%

Only for some reason changing the settings in my html file does not change the clock view. Not sure why. For the moment I stick with the preconfigured german-clock.svg. In that case the index.html file is not even required.

Andy_Wismer · March 6, 2020, 12:04pm

Hi

Cool that you managed to get it running.

If you want, PM and I’ll send you the full configured Swiss Railway Clock…
Can’t place it here, as only pics are allowed (it seems).

Andy

DennisB66 · March 6, 2020, 4:42pm

Tried the config that you send me. Works as well, but still with the same problem: the settings in the html are not executed. Whatever I change, the behavior of the clock stay the same. All parameter settings in the index.html are ignored.

Current iFrame settings:

type: iframe
url: /local/community/analog_clock/index.html
aspect_ratio: 63%

Strange thing is that if I open the index.html file directly in firefox (bypassing lovelace) the clock shows according the settings in the html file.

Not sure why. Perhaps somebody else knows the answer on this…

Andy_Wismer · March 6, 2020, 4:45pm

OK, I’ll have to wait 'til later to try this out…

I’ll give feedback here…
I may make a custom add-on out of this.

What happens if you leave out the index.html in the iFrame settings?

Andy

DennisB66 · March 6, 2020, 5:09pm

Leaving out index.html leads to a 403: Forbidden

type: iframe
url: /local/community/analog_clock
aspect_ratio: 63%

Andy_Wismer · March 6, 2020, 5:12pm

Ok

Maybe another docker or whatever could provide a non lovelane webserver…
Like the plug-ins for PI-Hole, Traccar and plenty of others use (nginx webserver is pretty lean…).

I intend to look into this, but that has to wait 'til I’m home…

Andy

DennisB66 · March 6, 2020, 5:14pm

A dedicated webserver feels like an overkill for this. There must be a more simple approach we are currently overlooking.

Andy_Wismer · March 6, 2020, 5:21pm

I quite agree that a dedicated webserver maybe overkill. But I have a few other tricks up my sleeve in petto, they could use a webserver too…

Like a card displaying the next five public holidays (from NethServer, Google Calender or any other CalDAV compatible calender. Same for an Agenda Tile, displaying your next appointments.

Or a card displaying german pollen for 15 “gras/pollen” sorts…

Another one displaying the next five busses leaving, another for trains. I live exactly opposite from a train station here in Switzerland, and the public transport services here are excellent!

This shows either exact departure times, or leaving in xxx minutes…

Andy

DennisB66 · March 6, 2020, 5:25pm

Ok, sounds interesting all together, keep us updated

Dennis

riemers · March 20, 2020, 3:44pm

Don’t know about copyrights, just mentioning it

Andy_Wismer · March 20, 2020, 4:07pm

@riemers

As long as you’re using it for private purposes, it’s actually legal in Switzerland.
And I DO hope that your home control is not available to public view of anyone!

Swiss copyright law is fairly liberal so far. It’s actually legal to download even copyrighted stuff, just not to further “share” it. Bittorrent shares at the same time as downloading, so that doesn’t count as legal here, at least not for copyrighted stuff.

The website which created the SVG clock has been informed by the Swiss Federal Railways, the swiss design isn’t available online.

Besides which, I am Swiss, live in Switzerland, and my grandfather worked for the Swiss Federal Railways. I PAID my part, with tax money, among others!

AND: I don’t provide any code or whatever, just an idea and a static image. This image can be considered as free marketing for that clock, the Image shown is from their online store. The clocks available at the SVG Analog Clocks author site are - like mentionned above - NOT of SBB / Hilfiker Design. The German Railways clock is NOT copyrighted, as they themselves used the Swiss design even down to the Second Stop. They just changed the second hand, using one with a hole.
And they DIN-normed the whole thing with german thouroughness.

I support and adhere to European Copyright standards - NOT to american notions of interlectual property.

My 2 cents
Andy Wismer

riemers · March 22, 2020, 11:55am

Hence, like i said, i know nothing about copyright just wanted to be sure that your “ok” since it is a nice analog lovelace card

Andy_Wismer · March 22, 2020, 12:12pm

@riemers

A nice analog Clock is something I was missing in HA. And I’ve always liked the Swiss Railway Clock best as a wall clock, it’s really well readible even at a distance.
I’m not new to Home Automation, just new to HA.
I can handle Linux, been doing so for the past 20 years as a vocation. So I just tried the easiest way to reimplement what I found missing…

If you want it, send me a PM with your mail, I’ll send it back there.
If I’m mailing it individuelly, it can’t be constituted as mass, anonymous distribution…

Besides which, I don’t like the idea of anyone outside seeing my home control, even less Using it!

Andy

riemers · March 22, 2020, 12:18pm

Well a good start would be to place them on github. If you look at other lovelace cards you can just copy paste how they did it.

Andy_Wismer · March 22, 2020, 12:24pm

I’d first need to make a lovelace card, with the necessary “backend” bit, which CAN be run from CONFIG/www. But there are still a few glitches…

Grabing the iFrame from any other webserver works perfectly.
Using CONFIG/www works, but any background image isn’t respected or shown. Just the bare SVG Analog clock.

That IS nice, especially on BIG screens, as it’s a SVG Vector, no pixalations…

But I still like having the Backgrounds for smaller Images. Unless I can get that into the SVG too, but that will take a bit more work, vectorizing an Image in decent enough quality…

Once I get the glitches straightened out, and played around with the “sample” Module/Card, I’ll open up my GitHub account…

Andy

Mike_M · June 23, 2020, 8:35am

Update:

in short you don’t need the HTML wrapper

I am really liking the look of this, thanks for showing us!

I am having an issue with centering the clock in the Webpage Card?
Whatever I try it seems to keep to the left:

analog-clock

<html>
<title>Analog clock</title>

<head>
  <style>
    .content {
      height: 100%;
      width: 100%;
      padding: 16px;
      display: flex;
      flex-direction: column;
      position: relative;
      justify-content: center;
      border: 5px outset red;
    }
  </style>
</head>
<div class="content">
  <object id="station-clock" data="station-clock.svg" type="image/svg+xml" width="200" height="200">
    <param name="dial" value="din 41091.1" />
    <param name="hourHand" value="german" />
    <param name="minuteHand" value="german" />
    <param name="secondHand" value="german" />
    <param name="minuteHandBehavior" value="stepping" />
    <param name="secondHandBehavior" value="swinging" />
    <param name="secondHandStopToGo" value="yes" />
    <param name="secondHandStopTime" value="1.5" />
    <param name="backgroundColor" value="rgba(0,0,0,0)" />
    <param name="dialColor" value="rgb(40,40,40)" />
    <param name="hourHandColor" value="rgb(20,20,20)" />
    <param name="minuteHandColor" value="rgb(20,20,20)" />
    <param name="secondHandColor" value="rgb(160,50,40)" />
    <param name="axisCoverColor" value="rgb(20,20,20)" />
    <param name="axisCoverRadius" value="0" />
    <param name="updateInterval" value="50" />
  </object>
</div>

</html>

Does anybody have some code that works?

Mike

Andy_Wismer · June 23, 2020, 8:59am

Hi Mike

Aus Deutschland? (Anhand der Uhr…

I do not use ANY positioning in the Webcard nor in the index.html (Somtimes I use that).
The only positioning I use is the sizing, to keep the background image centric.

Webpage Card configuration:

Shown in Lovelace:

The shown Link (Url) to the clock is publicly accessible, you can try with that as shown…

Andy

Mike_M · June 23, 2020, 9:14am

Thanks, not German, just like the look

I pasted the analog_clock url into another Webpage card, and you’re right, it is centered. When copying and pasting the code from view source into my local file the clock is left-aligned again, very strange.

You mentioned above you might make a custom card, do you think this is possible? I would like to customize the clock a little (remove background…)

Thanks!