Daniel Bark
← Back to blog

Published 2020-09-09 by Daniel Bark

0
0

Live wallpaper clock built in Node.js

Remember those Windows 7 gadgets that everyone used to love? Speaking for myself, I have only good memories of them. Back then it made you feel like you could make your desktop personal. 👨‍🎨

Windows 7 Gadgets

But let’s take a proper look at that floating clock I used to love(but not more than the CPU meter). It’s not the prettiest by today’s standards and functionality wise, the feature of having it float on top of the desktop icons does not provide much value. A well designed wallpaper clock has the potential of beating the Win 7 gadget clock in these two aspects.

In my toolbox I have Node.js, the Javascript server side runtime. Now a mature powerhouse that can solve most programming tasks you can imagine.

In order to create a live wallpaper we have three problems to solve:

  1. Creating an image with a correctly timed clock.
  2. Updating of the wallpaper programmatically from Node.
  3. Keep changing the wallpaper every minute. A timeframe longer than that is just weird for a clock.

Onwards to looking for packages that would present a feasible solution to our problems.

Npm did not disappoint. Here are my 3 findings:

  1. node-html-to-image
  2. wallpaper
  3. node-cron

Great! Node-html-to-image can take in an html string, run it in a headless browser using puppeteer and save a screenshot to disk. It can even run Javascript before taking the picture. 📸

The package wallpaper provides a really simple promise based API to set the wallpaper image. I even works cross platform. 🚀

Node-cron allows us to pass in cron syntax and a callback function. The function will then run with the given interval. Here is a good site for trying out cron syntax: https://crontab.guru/

Time to code…

Node.js code to achieve a new wallpaper clock every minute

Wow! Really few lines of code(if you leave out error checking).

The final step is to get the Node script to run on boot. The easiest way I know how is to use pm2. You can install it with npm.

npm install -g pm2

Then its just 3 commands to create the boot config.

pm2 startup
pm2 start ./index.js
pm2 save

And there we have it. A HTML and CSS customizable wallpaper clock.

The code is available here.

I also made a video tutorial on my youtube channel:

Hope you enjoyed the read. Have a nice day 👋

Written by Daniel Bark

← Back to blog

Recent Blogposts

To Blog →