Analog Clock for Lovelace

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… :slight_smile:

Andy

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

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

Ok, sounds interesting all together, keep us updated :slight_smile:

Dennis

Don’t know about copyrights, just mentioning it :wink:

@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!

:slight_smile:

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

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 :slight_smile:

1 Like

@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… :slight_smile:

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… :slight_smile:

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

Andy

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.

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…

:slight_smile:

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

Andy

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

Hi Mike

Aus Deutschland? (Anhand der Uhr… :slight_smile:

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

Thanks, not German, just like the look :slight_smile:

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!

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

That looks nice, one caveat…

analog-clock2

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

1 Like

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!

2 Likes

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

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

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%