@PrairieSnpr @Harry_Westerman @rlongfield - and anyone else having display issues in Chrome.
This should now be fixed in the latest version on github, could you test it out and let me know if it works for you.
If it doesn’t work for you then could you let me know the exact version of the browser you’re using and I’ll see what I can do.
This is a good idea 
Could maybe add a colour option to the config for each person.
OK, adding colour was fairly easy - in the latest version there are two new attributes that you can give each person:
colour: ‘#F00’
textcolour: ‘#00F’
These change the colour of the hand and the text on that hand to be whatever you want. Note that the colour values must be in quotes (otherwise lovelace does something funny and fails to store them), and anything that works in HTML/CSS should work here.
Looks really cool, thanks for the suggestion!
Just added this to my config and was up and running in minutes, pretty sweet and nice work @malcolmrigg . However, the font doesn’t seem to be loading for some reason. I’m browsing my frontend on macOS 10.14 and Safari. Maybe it doesn’t know about the font? I don’t have the font in the folder with the .js file, but I also have the fontface: section commented out and only using fontname:.
cards:
- type: 'custom:weasley-card'
fontname: itcblkad_font
#fontface: >-
# font-family: itcblkad_font; src: local(itcblkad_font),
# url('/local/custom_ui/ITCBLKAD.TTF') format('opentype');
locations:
- Home
- Brandon Work
- Rochelle Work
- Future Home
wizards:
- entity: person.brandon
name: Brandon
- entity: person.rochelle
name: Rochelle
lost: 'Away'
travelling: 'Moving'
I’m not an expert on web fonts, but I suspect safari just can’t find the font.
You could try changing the fontname to one that you’ve got installed on your Mac (or I think generic terms like “times” or “serif” work too). Or copy a font into your HA www folder and change the fontface config to point to it.
If you google “html font face” there’s loads of info/examples out there.
that’s what I was suspecting too. I’ll try the fontface method and put a font in the www folder.
It works! Thanks
Tested and it works. Thanks!
Brilliant! Thanks for the implementation. I’m not much for complementary colors (so ignore my choice of colors), but at least now we can see at a glance who is where.
edit: Wife just veto’d my choice of color.
Is there a font size setting? My zones are overlapping.
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 
So if I use gmap location sharing there is no way to have it show “travelling”?
Is there a way to add a background image?
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:
Wish I had the programming skills to modify it myself. 
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!
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?
I have weasley-card.js and weaslyconfig.txt under /config/www/custom-lovelace.
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.
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:
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.
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
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.
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?