Coder Social home page Coder Social logo

brianfit / xkcd-card-ha Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 228 KB

A Home Assistant HACS card to display a new XKCD comic every day

Home Page: https://www.buymeacoffee.com/brianfit/

License: Other

fun geek hacs-plugin home-assistant nerd xkcd xkcd-comics lovelace lovelace-custom-card

xkcd-card-ha's Introduction

xkcd-card hacs_badge Buy Me A Coffee

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.

"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 = `<img src="${imageUrl}" style="width: 100%;">`;

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

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!

Good news is it's easy. When the card installs, it creates a file called xkcd.sh

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

Set up your automation

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.

Every day at the time you specify, the image xkcd.png and json data of the alt text and title 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.

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

After reading Slashdot and BoingBoing, sometimes I just have to go outside

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.

License: CC BY-NC 4.0

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.

Buy Me A Coffee

xkcd-card-ha's People

Contributors

brianfit avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.