Analog Clock for Lovelace

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!

Andy_Wismer · June 23, 2020, 9:18am

Hi

Try this: (No Background, full SVG scalable!)

https://awr7-nethserver.r7.anwi.ch/analog_clock/index0.html

index2.html has a red clock-ring.

The “packaging” needs to be done on the Webservers side, using a simple html file.
You can grab the html file, and use that, better than copying the code from “show source”…

I will be making a custom card, however a lot of stuff planned is delayed due to Corona Lockdown…
I’m glad the lockdown here is almost over!

Andy

Mike_M · June 23, 2020, 9:26am

That looks nice, one caveat…

analog-clock2

Andy_Wismer · June 23, 2020, 9:32am

Hi

Sorry, the link mit index0.html is for other web pages (I use the clock eg in Zabbix Monitoring and several other places…

For HassIO use this:

https://awr7-nethserver.r7.anwi.ch/analog_clock/station-clock.svg

Andy

Mike_M · June 23, 2020, 9:37am

Ahh, so we don’t need HTML and can simply pass the SVG… upon testing that works great!

type: iframe
url: /local/analog-clock/analog-clock.svg
aspect_ratio: 60%

Thank you @Andy_Wismer!

marco170181 · February 27, 2024, 10:40am

Hello, I would also like to have this clock of the railway station.
i write with translator, but maybe someone can briefly explain again exactly how to integrate this clock now in the year 2024, since i am a relative newcomer. maybe a small step by step guide. thank you very much. marco

Novell1 · March 24, 2024, 2:50pm

Hello Andy,
I’m still new to HomeAssistant, how do I get the SBB clock into HomeAssistant? My HA runs in a VM and I have installed lovelace, it appears with 2 entries in the menu see printscreen. I’m not sure if this has been fully installed. Where and how do I have to do this to integrate this analog SBB clock? Is there a detailed step by step guide?
Thank you very much!
Greetings Novell1

Albert64 · September 27, 2024, 8:32am

Hi,
Hi, I didn’t get to grips with the above either.
But my clock is now running with this iframe

type: iframe
url: http://www.3quarks.com/images/svg/siemens-clock.svg
aspect_ratio: 50%

Kikeyo · January 15, 2025, 6:34pm

Hallo Andy
kannst Du mir bitte die volständige konfigurierte Schweizer Bahnhofuhr senden?
Danke im Voraus

Andy_Wismer · January 15, 2025, 10:25pm

Hi All!

I’m sorry, but it seems my PC/Mac/Firefox logged me out of this forum (sometime end of 2023), and I wasn’t getting any mails - and did not even notice at first. This is corrected now.

I will provide a new instruction here for the popular Swiss Railway Clock !!!

If anyone wants the railway clock, please drop me a PM with your Mail so I can send the code.

My 2 cents
Andy