Lovelace: Wizarding Clock Card

Hey @malcolmrigg, I think you mentioned somewhere that the “Travelling” state is only available using a certain type of GPS integration, right? (Was it OwnTracks maybe?)

Anyway, I wanted to give you a head’s up - the new iOS beta app includes a new sensor for “Activity” - one of which includes a state called “Automotive”. In theory, if it’s not too difficult, you could read this state and mark someone as “Travelling” if they have an automotive activity state.

image

The config might look something like this:

image

Would be a nice-to-have once the new iOS app is released!

Yes, owntracks or any component that uses the same attributes. Thanks for the heads up, I’ll take a look when I get a chance. I’ve recently acquired an iOS device so will find it useful myself :+1:t2:

I was hoping that the “person” entities would support some sort of travelling attribute, and standardise things a bit so we don’t have to add code for each different tracker etc, but no such luck so far!

1 Like

This seems to be broken in Chrome 78. It could have broken prior to that. The last known version of Chrome that this worked for me was 71. I updated from 71 to 78 and it stopped working.
The card still appears (about 1cm in height) but it is a blank 1cm.

The card appears in Firefox 69.03 and 70 but only half (horizontal) of the clock face is visible.

Same here. Works when I cast it to my Google Nest hub though :slight_smile:

Can also confirm this no longer works with Chrome 78. No errors in the console, but an empty card is displayed.

Yes, I’m getting this too, I’ll take a look at the problem at some point when I get time.

Could someone please help me with changing the font.
I’ve changed the font details in the card but it’s not working. What’s really confusing though is that I have tried a randomly gotten the Blackadder one, and one other to work, but now I can’t get the font to change at all. I’ve tried both locally saved and url fonts; tff, etc & ttc. I even tried just renaming the poppins.tff file to the default. Have I got something wrong in the card:

            - type: 'custom:weasley-card'
              locations:
                - Home
                - Medical
                - Work
                - Shopping
                - Family
              wizards:
                - entity: device_tracker.kbi
                  name: Me
              fontname: poppins
              fontface: >-
                font-family: poppins; src: local(poppins-font),
                url('/local/custom-lovelace/Poppins-Regular.ttf') format('woff2');
              lost: 'Away'
              travelling: 'Moving'

Working like a champ, and my wife (diehard HP fan) loves it. I was wondering if there’s a way to set a custom color for a person’s arm. It’s getting a bit crowded with 4 of us, and different colors could help to differentiate it.

Could it be the order? Here’s how I have mine setup.

  - badges: []
    cards:
      - fontface: >-
          font-family: itcblkad_font;    src: local(itcblkad_font),
          url('/local/custom-lovelace/ITCBLKAD.TTF') format('opentype');
        fontname: itcblkad_font
        locations:
          - Home
          - Work
          - School
          - DSTp
          - DSTn
          - Tutor
          - Beach
          - XC
        lost: Traveling
        type: 'custom:weasley-card'
        wizards:
          - entity: device_tracker.iphone
            name: Me
          - entity: device_tracker.wife_iphone_2
            name: Wife
          - entity: device_tracker.kid1_iphone
            name: Kid1
          - entity: device_tracker.kid2_iphone
            name: Kid2
    icon: 'mdi:deathly-hallows'
    title: Clock

I was able to get it to show by adding the following lines in the hass function in weasley-card.js

 this.canvas.style.width = "500px"; 
 this.canvas.style.height = "500px";
 card.style.height = "500px"

It’s not the right fix, it renders in chrome on the pc now, but mobile is stretched, but it’s at least functional for me.

@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 :+1:

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


Lovelace config:

    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 :+1:

1 Like

Tested and it works. Thanks!

1 Like

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.