xkcd-card

This pulls the latest awesome xkcd comic into your Home Assistant dashboard. New comics are published every Monday, Wednesday, and Friday. On other days, the card pulls a random comic from the archive.

Version 2.0 adds a caption box with Title, comic number and date, and alt-text (tx, @jonathan-chin!), plus an "Embiggen" link for those days when Randall goes multi-panel. Squints should not have to squint. There's also an "Explain" link which takes you to the relevant "Explain xkcd" wiki entry for when he wanders out of your wheelhouse.

Important

If you just install the card, you'll only see the default comic. Every day. I mean it's a good one, but if you want to see it refresh, you need to create an automation! (It's easy though! See 🦶step by 🦶 step below ⬇️)

"Why can't I just grab the image in a picture entity from the RSS feed" you ask? Because browsers cache images, m'geek. It's normally a feature, but when you want to point to a file that gets refreshed regularly, it's a bug. We need to trick the browser into thinking it hasn't seen the url it's fetching the comic from, and we do that with this nifty trick, built right into the card:

    const imageUrl = `/local/community/xkcd-card-ha/xkcd.png?_ts=${new Date()}`;
    this.content.innerHTML = `<a href="#"><img src="${imageUrl}" style="width: 100%;"></a>`;

Get it? If you read XKCD, you probably do. If not, it doesn't matter. Just imagine a stick figure in a wizard's hat chanting a magic spell in the middle of the night to summon your next dose of nerdy goodness.

Installation

Ensure HACS is Installed: If you haven’t already installed HACS (Home Assistant Community Store), you’ll need to do that first. But I’m assuming you’re good to go here.

Add the Repository: Go to HACS, search on "xkcd' and click on the xkcd-card-ha plugin. Hit that download button:

Boom. The card has now been quantum transported into your instance of Home Assistant.

Edit your dashboard (Three dots upper right > Edit Dashboard) Click Add Card +

Way down at the bottom of the card options, you'll see this:

Click on it. Click Done and you are. Kinda. See steps below to set up your automation.

If you prefer to roll your own, you can use the following YAML to add and configure the card to your liking:

type: 'custom:xkcd-card'

Set up your automation

When the card installs, it creates a bash file called xkcd.sh to fetch a new comic & alt text.

You'll want to run that every 24 hours to get the latest comic. First, open up your configuration.yaml and add the following code:

shell_command:
  run_xkcd: "sh /config/www/community/xkcd-card-ha/xkcd.sh"

Important

Go to the Developers menu, click on "Check Configuration" and "Restart Home Assistant" (Really restart it, don't just reload the YAML. You're creating a new entity, and you won't have access to it until you restart Home Assistant. If you're 👻 superstitious 👻, go ahead and reboot, you'll feel better.)

Got to the Settings Menu and choose "Automations and Scenes"

Click on the "Create Automation" button lower right.

Click "Create New Automation"

Choose "Time"

And set it up to run shell_command.run_xkcd once a day at 11:57 p.m. -- or any time just before midnight when the date changes.

If you've properly set up your shell command in configuration.yaml AND restarted HA (you really restarted, didn't just reload the yaml, right?) you should see an autocomplete when you type "shell". In the example above, which has multiple shell commands, my configuration.yaml looked like this:

NB: If you have more than one shell command, they need to be gathered under one header like the above. If you scatter them in your yaml only one will be loaded.

Every day at the time you specify, the image xkcd.png and a json data file of the alt text, the title, the safe title, and the comic date will download to the /config/local/commmunity/xkcd-card-ha/ directory

And at midnight, since the date changes, the url of the image changes. And voila! A fresh giggle. Mouseover or touch/click the image to see the alt text in version 1. In version 2, it's pulled into the caption box for easier reading.

And, if automations written in yaml are how you roll, here's another way to do all that (tx, @Andurilll!):

alias: load new xkcd Comic
description: ""
triggers:
  - trigger: time
    at: "23:57:00"
conditions: []
actions:
  - action: shell_command.run_xkcd
    metadata: {}
    data: {}
mode: single

Credits

xkcd is created by Randall Munroe, and like this HACS Card the comic carries a Creative Commons BY NC license - meaning you are free to share provided attribution is made and the work is not used for commercial purposes.

Thanks also to u/lau1406 and the guys and gals in this Reddit thread who created a card as camera element before HA changed the way that element works and broke it.

License

This card was made by Brian Fitzgerald under a Creative Commons BY-NC license. You are free to use or modify the code under two conditions: you don't sell it and you mention I made it. This card delivers content made by Randall Munroe and published at xkcd.com under the same conditions.

Say Thanks

This is one of many open source projects I create or contribute to. I buy coffee for folks who do stuff for free that I love, and I love it when people show appreciation to me for doing stuff I love. If more of the world worked like the buy-me-a-coffee economy of generosity and appreciation and work for the love of creating something, well we'd all make Kurt Vonnegut proud.