A wizarding/location "clock" Lovelace component for Home Assistant
I was suprised when I couldn't find something like this that somebody else had already made, so decided to give it a go myself! It took a few months due to not having much spare time, and javascript not being my first language, but I eventually got it working quite nicely for my purposes. It looks (and is) pretty basic so far.
I decided to make it public so that other (more skillful) people could make use of it and tweak it to improve it/make it look nicer - if you do use it and make any improvements please let me know so that I can incorporate them into my code!
- Shows the friendly name of the current Zone that an entity is located in (only tested using the owntracks platform)
- If an entity isn't in a Zone then it marks that entity as "Lost"
- If an entity has a velocity of greater than 15 then it marks that entity as "Travelling" (again, only tested using owntracks - and GPS must be turned on on your phone for velocity to be reported)
- Locations are added dynamically as needed, however you can configure permanently shown locations by adding them to the "locations" list in the config
- For family members without a phone (or those that don't want to be tracked with owntracks!) it can use the google calendar platform - simply create a calendar with the expected locations of that person as the name of appointments at the appropriate times
- Font face can be customised (I use "Blackadder" for a suitably wizardy look)
- Hand colour (and text colour on the hands) can be customised for each person
- Hands animate fairly smoothly between states
- "Lost" and "Travelling" state text can be customised
- Copy weasley-card.js to www/custom-lovelace/ in your home assistant folder, along with any particular font you want to use.
- Open the lovelace raw config editor and add the code below
resources:
- type: js
url: /local/custom-lovelace/weasley-card.js?v=1
- Hit save and close the raw config editor, then hit the plus button to add a new card
- Click "Skip" in the card selection screen
- Add your config, see the example below
- Copy the updated weasley-card.js over the old version
- Edit the url in the raw config editor to increment the version number, e.g:
resources:
- type: js
url: /local/custom-lovelace/weasley-card.js?v=2
- locations (optional): a list of locations that are permanently visible, others are added/removed as required
- exclude (optional): a list of locations that shall never be displayed, wizards at those locations will default to the
lost
state - wizards (required): a list of entities and display names for the device trackers/calendars used to represent your wizards. Now also supports setting individual colours for the hands/text.
- fontname (required): the name of the font you want to use in the clock
- fontface (optional): a fontface string to select a custom web-font to load
- shaft_colour (optional): the colour of the shaft
- lost (optional): text to display when an entity is lost, defaults to "Lost".
- travelling (optional): text to display when an entity is travelling, defaults to "Travelling"
type: 'custom:weasley-card'
locations:
- Home
- Work
- School
wizards:
- entity: device_tracker.harrys_phone
name: Harry
colour: '#F00'
textcolour: '#00F'
- entity: device_tracker.hermiones_phone
name: Hermione
colour: '#0F0'
- entity: calendar.ron
name: Ron
- entity: calendar.ginny
name: Ginny
fontname: itcblkad_font
fontface: >-
font-family: itcblkad_font; src: local(itcblkad_font),
url('/local/custom-lovelace/ITCBLKAD.TTF') format('opentype');
lost: 'In mortal peril'
travelling: 'Between here and there'
These are features/ideas that I'd like to add at some point, but may not happen any time soon. Feel free to add them yourself and share your code if you're able!
Animations: Changes in status produce nicely animated transitions instead of just jumping aboutBasic animations with ease-out now working, could do with ease-in too. Or possibly just going a bit mad and spinning round a couple of times before easing to the new location...- Make pretty: It looks fairly basic at the moment (I'm no artist!).
Maybe include support for themes too, if that's possible?Colours are now taken from whatever theme you are using by default. Hand/text colour for each wizard can be overridden if desired... so it's getting there. - Support for more entity types?
- Better text rendering - this goes along with making it pretty,
perhaps include drawing the text in arcs around the outside of the clock, and handling longer location/wizard names better. Arc text now done, with code nicked from somebody else :) - Pre-load custom web font before rendering - if this is even possible?