Lovelace: Wizarding Clock Card

Share your Projects! Dashboards & Frontend
61

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

62

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

63

Is there a way to add a background image?

1 Like
64

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. :slightly_frowning_face:

65

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

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!

1 Like
66

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?

67

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

1 Like
68

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.

69

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.

image
image605×849 73.7 KB

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.

  1. 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
  1. 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.

1 Like
70

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?

71

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.

1 Like
72

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