Since modern LCD displays aren't subject to burn-in, screen savers are a thing of the past... right?
Not if you have your HTPC hooked up to a plasma TV; plasma still has a big problem with burn-in. Finding myself in that situation, I needed a screen saver that would protect the screen while a movie is paused. I also wanted it to look great — it's in my living room, after all — but every screen saver I tried looked like it was written decades ago. (Most of them were.)
Modern web technologies make it incredibly easy to create engaging animations. All I needed was a way to marry the web tools we know and love to the Windows screen saver framework. That's where Electron comes in.
Please note: This is currently a Windows-specific project. You can run the code in Electron on other platforms, but you won't get the screen saver integration with the OS.
Before You Build
This screen saver displays a photo slideshow with a simple "Ken Burns" effect. It supports three photo sources:
- Unsplash: Photos tagged
- Flickr: Photos from the group "Flickr's Best Landscape Photographers (Post 1 Award 2)"
- A local folder on your computer
Since I didn't feel like implementing a Settings window, you'll need to make some simple code
changes to set up a source. If you take a look at the top of
src/photoSlideshow.tsx, you'll find
the following line of code. Set
const GET_PHOTOS: GetPhotosFn = getUnsplashPhotos
Then do one of the following:
Unsplash: Get an Unsplash API key and put it in
export const UNSPLASH_API_KEY = "<your API key goes here>";
Flickr: Get a Flickr API key and put it in
export const FLICKR_API_KEY = "<your API key goes here>";
src/constants.tsand set LOCAL_FOLDER_PATH to point to your image folder:
export const LOCAL_FOLDER_PATH = "<your path goes here>";
A quick warning: When you display random photos from the web, there's always a chance you'll get something you wouldn't want your kids, your grandma, or your boss to see. The API calls are set up to avoid anything NSFW, but photos do end up in the wrong category from time to time — don't say I didn't warn you. If you want to stay on the safe side, you can always use your own local folder of photos.
How to Build
(This project requires Node.js — if you're reading this, you probably already have it.)
Install: Go to the project folder and run the following command:
Build: Go to the project folder and run the following command:
npm run build-electron
Run: Once the build is complete, you have a couple of options. If you want to quickly fire it up and see what it does, go to the project folder and run:
npm run start-electron
Screen Saver: If you want to install the screen saver, look in the
package/photo-screen-saver-win32-x64 subfolder and find the file
Right-click the file and choose
Install. When the Windows screen saver settings appear, you'll see
photo-screen-saver is now your selected screen saver.
Development: If you want to work on the React part of the project, you can run
npm start to
launch it in the browser. Since it's built on
create-react-app, you get all the benefits of
webpack-dev-server including hot module reloading. Note: In this mode you won't be able to use any
features that depend on Electron, such as loading photos from a local folder.
Behind the Scenes
It's a lot easier than I thought to create a screen saver for Windows — it's just a normal executable with a .scr extension. The program just needs to display a topmost full-screen window and exit on mouse or keyboard activity. These requirements are really easy to meet in Electron!
Note: This project is the bare minimum and won't give you the mini-preview or Settings features. The mini-preview is a pain to implement, and IMO not worth the effort. To support Settings you just need to handle the /S command line argument and display an appropriate UI. (I was too lazy to implement a Settings UI, but you might feel differently!)
This project makes a good starting point for any screen saver you want to create. You could start by changing the Unsplash API call to get different types of photos. If photos aren't your cup of tea, there are a lot of cool animations on CodePen and ShaderToy. To get you started, there are four ready-to-run animation components included in this project, each one with a great-looking demo and each one illustrating a different basic approach to animation:
- DemoCanvas: writes directly to an HTML5 Canvas
- DemoCss: uses pure SCSS
- DemoShader: implemented as a WebGL fragment shader
- DemoThreeJs: uses Three.js to create a 3D animation
At the top of
src/app.tsx you'll find the following line of code. Set
SHOW_COMPONENT to the
component you want to see:
const SHOW_COMPONENT: ShowComponent = PhotoSlideshow
You can create your own components using the demos as a template. Use your own code or examples you find on the web. Whatever you use, be sure to comply with the license terms!
The MIT License
Copyright (c) 2016 Rand Scullard