Lovelace: Wizarding Clock Card

malcolmrigg · December 10, 2019, 4:41pm

Not at the moment… You might be able to set it in the fontface setting, but I’m not sure. If you can’t then I’ll have a look at adding a setting

teitelbot · December 25, 2019, 2:41am

So if I use gmap location sharing there is no way to have it show “travelling”?

garywilson4 · April 12, 2020, 2:54pm

Is there a way to add a background image?

realcanadrian · April 28, 2022, 10:39pm

Just installed this, and generally loving it. It’s a shame it seems to have gone dark a couple years ago. To echo a couple others, my wishlist would include:

Background image
Fullscreen version
Entity pictures
HACS integration

Wish I had the programming skills to modify it myself.

malcolmrigg · April 29, 2022, 5:48am

Yes, me too! JavaScript is horrible and it took me a lot of effort to get this working, the code is not exactly elegant

I might have another look at it at some point as most of those things are on my wish list too (I’m still using it), but if anyone with superior JavaScript skills wants to improve it feel free!

Wickydude · September 25, 2023, 7:59pm

I’m probably just a thick n00b, but….
It seems custom-updater is deprecated.
I just can’t figure out where to put the weasley card now and how to add it to a dashboard.
I found some reference to ui-lovelace-card.yaml and ui-lovelace.yaml but those do not exist on my HA yellow
Can anyone point me in the right direction?

GaryK · September 25, 2023, 9:01pm

I have weasley-card.js and weaslyconfig.txt under /config/www/custom-lovelace.

Whoarewe · January 31, 2024, 5:56pm

I created the “custom-lovelace” folder myself under www and put the font and js file in there. I needed to ensure I set it to truetype rather than opentype because that was the only downloadable Blackadder font I could find. The way to add the resources has changed in HA, which means instead of performing step 2 in the installation you need to go to Settings->Dashboards and then click the vertical ellipsis in the top right corner where you’ll find “resources” an option - go in there and add the URL from step 2 as a Javascript module.

Credo102 · September 24, 2024, 6:55pm

Thought I would add my solution to this as I never got this version to work.
Mine is a bit hacky but it works. NB If the “hand” is outside the clock face then they are in a place i have not set up a condition for.

Using a little MS paint and PowerPoint I made three pictures. The clock face (Weasley clock.png), and 2 Clock hands with Cartonified faces as png files (E%20clock%20hand3.png and A%20clock%20hand3.png) and uploaded them to the “/local/images/” folder.

Then using a combination of:

Picture Element card
card_mod from hacs (🔹 Card-mod - Super-charge your themes!)
Template sensor - helper
Lots of Zones

I made my version which, while a work in progress, does work.
It rotates the “hands” of the “clock” to pont at a location name based off the zones i have set up in home assistant.

Picture Element Card (with CardMods applied)
The code below contains 2 sensors which modify the location of the hands. How this done is shown in the next section of code.

type: picture-elements
card_mod:
  style: |
    ha-card {
     --my-transform-style: {{states('sensor.locationclocka')}};
     --my-transform-style2: {{states('sensor.locationclocke')}};
      } 
elements:
  - type: image
    image: /local/images/A%20clock%20hand3.png
    style:
      top: 100%
      left: 85%
      transform: var(--my-transform-style)
  - type: image
    image: /local/images/E%20clock%20hand3.png
    style:
      top: 100%
      left: 85%
      transform: var(--my-transform-style2)
image: /local/images/Weasley clock.png

Template sensor - helper
Is a sensor which output contains text detailing how i want the position of the “clock hand” to be changed in the picture element card.
Each Person has their own “hand”, and because i don’t want them to overlap when people are in the same position each.
These Translations and rotations are specific to the pictures I used so will have to be tweaked, at laborious extent, for ech individual and picture.
(i have edited the below slightly to anonymize this as much as possible)

Person 1 ‘sensor.locationclocka’

translate(-280%,-105%) rotate(-0.03turn)
{% elif states('person.person1') == 'Town centre'   %}
translate(-280%,-105%) rotate(0.14turn)
{% elif states('person.person1') == 'Work'   %}
translate(-280%,-105%) rotate(0.3turn)
{% elif states('person.person1') == 'not_home'   %}
 {% if states('sensor.home_aperson1_direction_of_travel') == 'stationary' %}
    translate(100%,-120%) rotate(-0.1turn)
 {% else %}
    translate(-280%,-105%) rotate(0.47turn)
 {% endif %}
{% elif states('person.person1') == 'Sister in laws house'   %}
translate(-280%,-105%) rotate(0.64turn)
{% elif states('person.person1') == 'Mother in laws house'   %}
translate(-280%,-105%) rotate(0.80turn)
{% endif %}

person 2 ‘sensor.locationclocke’

{% if states('person.Person2') == 'home'  %}
translate(-278%,-110%)rotate(0.03turn)
{% elif states('person.Person2') == 'Town centre'   %}
translate(-278%,-110%) rotate(0.20turn)
{% elif states('person.Person2') == 'word'   %}
translate(-278%,-110%) rotate(0.36turn)
{% elif states('person.Person2') == 'not_home'   %}
 {% if states('sensor.home_Person2_direction_of_travel') == 'stationary' %}
    translate(-650%,-130%) rotate(0.1turn)
 {% else %}
    translate(-278%,-110%) rotate(0.53turn)
 {% endif %}
{% elif states('person.Person2') == 'Sisters House'   %}
translate(-278%,-110%) rotate(0.70turn)
{% elif states('person.Person2') == 'Mothers house'   %}
translate(-278%,-110%) rotate(0.86turn)
{% endif %}

Hope this helps/inspires someone.

baruchiro · November 12, 2024, 3:13pm

I didn’t understand what’s the Travelling state. For me, when I’m not in any Zone, I’m always at Lost.

How can I make the Travelling to work?

malcolmrigg · November 22, 2024, 6:58pm

Hi, the “travelling” status is broken at the moment - it was written specifically for the location tracker that I was using at the time, and doesn’t really work with anything else.

I’m planning on rewriting it to work with the “Person” entities instead, which should work whatever location tracker you use, but I haven’t started that yet.

baruchiro · November 26, 2024, 5:37am

Can you explain the logic for traveling? I don’t think the Person have a travelling attribute…

malcolmrigg · November 26, 2024, 4:48pm

I’ve not looked that closely at it yet.

However someone else posted a possible solution:

github.com/malcolmrigg/wizard-clock-card

Better support for "speed" attributes, including for person entities looking up the speed from their current device tracker source

opened 01:28PM - 24 Nov 24 UTC

HecktorX

Hey there, I hope my code help you to solve this point from your bucket list:… Better support for "speed" attributes, including for person entities looking up the speed from their current device tracker source (all files in Zip-Attachment) Changes (Based on V1 from 06.2024): - Pointer goes to Travelling when: - If you are at a station that is named as a trainstation in the zones - If the speed is more than 0.5, then the pointer goes to traveling (see this.travelingState && stateVelo > 0.5 in the file “weasley-card.js”) - Another parameter Speed was introduced The problem was that the “velocity” attribute is read from the mobile phone. However, this parameter only appears when the navigation is on (e.g. Google Maps route guidance). However, the location is updated automatically without the need to run other apps. Therefore, the python script “update_custom_sensor_attribute.py” adds another attribute “Speed” to the cell phone entity. The speed parameter is calculated in the “Geotracking_updateVel” automation. It compares the coordinates of the last known location with the current location. The speed is calculated using the elapsed time. 1) Install HACS: pyscript 2) Store “update_custom_sensor_attribute.py” under /homeassistant/python_scripts/update_custom_sensor_attribute.py 3) Create a new automation. Code as a template in “Geotracking_updateVel.txt” 4) Upload the file “weasley-card.js” under /homeassistant/www/custom-lovelace/weasley-card.js 5) Under Settings/Areas, Labels & Zones/Zones, mark the stations that you may visit frequently as train stations 6) Activate all settings in connection with the location in the mobile app Translated with DeepL.com (free version) ____________________________________________ Erstellung Card mit zwei Zeigern Änderungen (Basierend auf V1 vom 06.2024): - Zeiger geht auf Travelling wenn: - Wenn man an einem Bahnhof ist, der in den Zonen als trainstation benannt ist - Wenn die geschwindigekt mehr als 0,5 ist, dann geht der Zeiger auf Travelling (siehe this.travellingState && stateVelo > 0.5 in der datei "weasley-card.js") - Es wurde ein weiterer Parameter Speed eingeführt Das Problem war, dass das Attribut "velocity" vom Handy ausgelesen wird. Allerings erscheint dieser Parameter erst, wenn die Navigation an ist (bspw. Google Maps Routenführung). Allerdings aktualisiert sich der Standort automatisch, ohne das weitere Apps laufen müssen. Daher fügt das Pythonsyript "update_custom_sensor_attribute.py" einen weiteres Attribut "Speed" der Handy Entität hinzu. Der Parameter Speed wird in der Autmatisierung "Geotracking_updateVel" berechnet. Es vergleicht die Kooardinaten vom letzten bekannten Standort mit dem Aktuellen. Über die vergangene Zeit wird der Speed berechnet. 1) HACS: pyscript installieren 2) "update_custom_sensor_attribute.py" unter /homeassistant/python_scripts/update_custom_sensor_attribute.py ablegen 3) Neue Automatisierung erstellen. Code als Vorlage in "Geotracking_updateVel.txt" 4) Die Datei "weasley-card.js" unter /homeassistant/www/custom-lovelace/weasley-card.js hochladen 5) Unter Einstellungen/Bereiche, Labels & Zonen/Zonen die Bahnhöfe die man möglicherweise häufig besucht als trainstation markieren 6) In der Handy App sämtliche Einstellungen in Zusammenhand mit dem Standort aktivireren [Wizard-clock-speed-support.zip](https://github.com/user-attachments/files/17893468/Wizard-clock-speed-support.zip)

Boosted7m · November 29, 2024, 9:01pm

Maybe this is for another thread, but can someone walk me through how to change the color of the clock face and/or the other colors that aren’t changed in the card editor?

malcolmrigg · February 1, 2025, 10:24am

If anybody would like to test it, I’ve released a beta version with two major changes:

Entity pictures! This is disabled by default, but there’s now a config flag to enable it - if you have pictures set for your “People” in HA then it should pick them up and render them on the end of the clock hands. I had to move the zone text out towards the edge of the clock to make a bit of room, and I’m still working on layout so let me know what you think.
Reworking of the “travelling” code to pick up e.g. the speed attribute from e.g. phone devices. This uses the location tracker that’s set as the “source” attribute for each person. Still very much a work in progress this, there seems to be an issue if you don’t have the “travelling” zone always visible on your clock at the moment. Have a play and let me know how you get on though.

You can install the beta version from HACS (you need to have added the repository as a custom repository first), then “re-download” the component and it’ll let you select which version you want.

realcanadrian · February 1, 2025, 3:12pm

Amazing! So excited for entity pictures! Is the flag in the documentation somewhere?

Edit: found it: show_images

yankeejohnboy · April 23, 2025, 9:13pm

Welcome back! I kept this project bookmarked hoping for your return from your coding sabbatical

Wife and daughter are both HP lovers, and are very much enjoying this. Thank you for making a fun thing for HA.

I can confirm that the beta8 is working with person entities and their associated pictures. Have not tested the “traveling” yet, as my setup isn’t 1-1 for person to phones, will look into passing those attributes through from their respective sources.

mn_box · November 17, 2025, 8:08am

All,

I am probably late to the game, but absolutely love this clock and are now displaying this on a seeed studio ink screen. Has somebody every consider adding the hands for minutes and hours? So besides the location it also serves as an actual clock? Not a coder myself but happy to contribute if that helps.

the_armed_programmer · November 21, 2025, 8:25pm

@malcolmrigg Is it possible to alias locations? Such that multiple locations show as one on the clock?

Example: Each person has a zone for their work, each with a unique name. I want them all to just show “Work” when at that zone rather than having a separate clock segment for each place.