Lovelace: Wizarding Clock Card

A fairly basic but functional “clock” along the lines of the one the Weasley family own in HP.

example

https://github.com/malcolmrigg/WizardClock

I was looking for something like this that somebody had already made (I’m lazy), but failed to find one so eventually had to try making my own. It’s not the prettiest but it works! See the readme in github for instructions if you want to use it.

22 Likes

I’m don’t know if I will use this but I absolutely love it. And I’m not even a Harry Potter fan!

This makes me think… There are some brilliant custom cards out there but perhaps Lovelace could do with a few more frivolous ones!

Edit: Yeah that lasted 5 minutes… I couldn’t resist at least trying it (oh the beauty of instantaneous changes in Lovelace!)

Is there any chance of having the white background transparent? It looks a bit ugly for anyone not using the default theme.

Thanks :slight_smile:

Yes, I can probably make it transparent, I was about to start looking at using a theme anyway so I’ll see what I can do. I’m a beginner at HTML Canvas stuff though so might take me a wee while to figure out!

Well that was as tricky as removing the line where I set the background colour to white :man_facepalming:

Background is now transparent :heavy_check_mark:

1 Like

Just updated this with some basic animation for the clock hands - they should smoothly move to their new locations over a couple of seconds.

Hey Man this looks amazing! Im a huge Potterhead.

I was just wondering if you could extend the tracering functionality to other device trackers. Im using Life360 and it doesnt seem to work!

Let me know if there is anything i can do to help.

Hi, yes probably - in theory it should work with any entity whose state is set to the name of a zone, though you need to have the zones set up too obviously.

I know nothing about Life360 though, so if you’ve got the above and it’s still not working you’ll need to give me some details - which component does it use? Also if you can send me an example of the entity state attributes that would be useful - you can get that from the dev-state page, find and click on your entity then copy the state attributes JSON (obscure anything sensitive!)

I didn’t know about this project so I made my own :see_no_evil: it’s at https://hass-harry-potter-clock.glitch.me/ but yours is better so I’m going to use that :dancer:

1 Like

So now that @balloob is on board with this :grin: perhaps you’d look into @jeffrey.brits comment about making ‘Travelling’ work with Life360.

Life360 has an attribute moving which could be used.
It also has raw_speed and speed but no-one seems entirely sure what they are actually reporting :roll_eyes:

I like having the profile pictures on your version! That’s on my to-do list, unfortunately house renovations are at the top of that list at the moment :joy:

@klogg can you give me a couple of examples of what the “moving” attribute contains? Shouldn’t be difficult to add a check for it.

That’s simple, I can do that!
It is either moving: true or moving: false

Both speeds are (I believe) integers but I am not at all sure if they are reliable.

Another possibility of course is the proximity component which has a direction_of_travel attribute which can be [https://www.home-assistant.io/components/proximity/],

  • ‘not set’
  • ‘arrived’
  • ‘towards’
  • ‘away_from’
  • ‘unknown’
  • ‘stationary’

So I guess only towards and away_from would make sense. But, can your card deal with more than one entity per wizard?

(Sorry if I’m overcomplicating things! :wink: )

Thanks for the info!

I’ve had a shot at adding support for the “moving” attribute - if it’s set to true then it should trigger the “Travelling” state. If you’re able to give it a go then let me know if it works :crossed_fingers:

I’ve not seen the proximity component before, that could be useful and I’ll have a look at how it could be used - like you say though, it would have to be added as an additional entity and the card doesn’t currently work with more than one entity per wizard. I’ll have a think about how it could be configured…

1 Like

Somebody asked on github about customising the “Lost” and “Travelling” text, so I’ve added a couple of config options for that. See the readme file on github for an example.

1 Like

@malcolmrigg
Any chance of getting this added to the Custom Updater?

1 Like

Oh, that’s cool, not seen that before. I’ve added a JSON file as per the instructions, not sure if that’s all I need to do though? I’ll have a closer look and maybe try setting it up on my own HA at some point when I get the time.

1 Like

I’m having a problem with the arms of the clock not showing up. The zones around the outside appear as they should, but no people. Here’s my config and I have confirmed the spelling of the device trackers.


###############  WEASLEY CLOCK  ##################

icon: mdi:clock
title: Weasley clock
path: clock
# theme: Clear_Nightz
# background: center / cover no-repeat url("/local/galaxy-wallpaper-21.jpg") fixed
panel: true
cards:
    - type: horizontal-stack
      cards:
        - type: custom:weasley-card
          locations:
            - Home
            - 430
            - 510
            - GGs
            - SST
          wizards:
            - entity: device_tracker.glenn_morrison
              name: Glenn
            - entity: device_tracker.eryin_morrison
              name: Eryin
            - entity: device_tracker.emmy_morrison
              name: Emmy
            - entity: device_tracker.lola
              name: Lola
            - entity: device_tracker.mary_glyn
              name: GG
          fontname: itcblkad_font
          fontface: >-
            font-family: itcblkad_font;    src: local(itcblkad_font),
            url('/local/custom-lovelace/ITCBLKAD.TTF') format('opentype');
            
        - type: custom:compact-custom-header

Hmm, not sure what’s happening here, I can’t see anything obvious wrong with your config. I’ve not tried it with 5 wizards before, but can’t think of any reason why it wouldn’t work.

Can you try simplifying the config down to just one wizard? If that works then add the others back one at a time to see which one is causing the problem.

If that still doesn’t work then you might need to have a look in the javascript console for error messages…

This helped… I now have 4 of them working. Initially using this I was able to narrow the problem down to the last 2 wizards. I noticed that the entity picture in known devices were all local for the first 3, but remote for the last 2. I changed them to local and #4 is now working, but #5 still crashes it. So, I don’t know if that was the actual problem or if it is something else I have yet to discover.

It doesn’t use entity pictures at all at the moment so I doubt that’s the problem. It’s more likely something to do with the state of the entity - I’m not really sure how though, as if there is something it can’t deal with it should just lump it in the “Lost” category.

I’ve also done a bit of testing with more than four entities now and it seems to work fine.

Can you have a look at the entity state (https://your-home-assistant-address/dev-state - find it in the list and click on it, then go back up to the top of the page and the state will be shown), and let me know what the actual state as well as the attributes JSON are? Obviously don’t post any personal info/actual locations here…