Before Dawn is a an open-source, cross-platform screensaver application using web-based technologies. You can generate screensavers with it using HTML/CSS, javascript, canvas, and any tools that rely on those technologies. In theory, generating a Before Dawn screensaver is as simple as writing an HTML page.
The project developed out of a personal project to explore the history of early screensavers. I decided that I wanted to write a framework that I could use to actually run screensavers on my computer. I wanted it to be cross-platform and easily accessible to artists and developers.
Before Dawn is definitely a bit of a experiment -- to actually use it, you need to run it as a separate application on your computer and disable whatever screensaver you have running in your OS, but it is fun and definitely works.
================================================ FILE: docs/contributing.md ================================================ --- layout: page title: Contributing permalink: /contributing.html --- Contributions and suggestions are eagerly accepted. Please read the [code of conduct](https://github.com/muffinista/before-dawn/blob/main/code_of_conduct.md) before contributing. If you find a bug or have a suggestion, you can [open an issue](https://github.com/muffinista/before-dawn/issues) or a pull request on the main repository. The screensavers for Before Dawn are in their own repository. If you would like to add a screensaver to the program, you can submit a PR to the [before-dawn-screensavers](https://github.com/muffinista/before-dawn-screensavers) repo. I will accept pretty much any pull request to the repository given that the content you are posting is legal and appropriate. If you need help or have a suggestion, please feel free to open an issue. ================================================ FILE: docs/creating.md ================================================ --- layout: page title: Adding Your Own Screensaver permalink: /creating.html --- A Before Dawn screensaver is an HTML page that runs in full screen mode. You can extend them with CSS and Javascript, and they can get very complicated, but the basics are really very simple. Before you add your own screensaver, you'll need to specify a local directory for your work in the Prefrences window. Once you've done that, click the 'Create Screensaver' button and a little form will open up where you can specify some basic information about your screensaver: - *Name:* The name of your screensaver - *Description:* A brief description of your screensaver. - *About URL:* An optional URL with more details about your work. - *Author:* The author of this screensaver. After you enter in your values and click save, Before Dawn creates a folder for you which contains an HTML file which serves as the basis of your new screensaver, and a `saver.json` file which contains the information about your screensaver. Before Dawn should display the folder for you so you can get to work building your awesome screensaver! ## Testing, Adding Options ## Any screensaver that is in your local sources directory can be edited. In the preview list, there will be an 'edit' link. Clicking that link opens a window which will allow you to update the basic information for the screensaver, add configurable options to your screensaver, view a working preview of the screensaver, debug it, etc. There are two tabs and a couple of buttons in the edit window. The Preview tab will run your screensaver. The window should auto-reload whenever you save changes to your screensaver. The Settings tab is where you can update information about your screensaver, or add configurable options (see below). Then there are four buttons: - the folder button will open the working folder for your screensaver - the save button will save any changes you've made in the settings form - the reload button will reload the preview - the bug button will open the developer tools console in case you need to debug something. ## Configurable Options ## Before Dawn has a very simple interface for adding configurable options to your screensaver. There are two kinds of inputs right now: text and sliders. You could use a text input to allow users to specify a URL or some text that will be used in your screensaver. A slider can be used to allow the user to input a number, etc. Screensavers are loaded as URLs, and any options will be passed as values to the URL. The template contains some code to parse incoming values. ================================================ FILE: docs/css/main.scss ================================================ --- # Only the main Sass file needs front matter (the dashes are enough) --- @charset "utf-8"; // Our variables $base-font-family: 'ChicagoFLFRegular', Helvetica, Arial, sans-serif; $base-font-size: 16px; $small-font-size: $base-font-size * 0.875; $base-line-height: 1.5; $spacing-unit: 30px; $text-color: #111; $background-color: #fdfdfd; $brand-color: #2a7ae2; $grey-color: #828282; $grey-color-light: lighten($grey-color, 40%); $grey-color-dark: darken($grey-color, 25%); $on-palm: 600px; $on-laptop: 800px; // Using media queries with like this: // @include media-query($palm) { // .wrapper { // padding-right: $spacing-unit / 2; // padding-left: $spacing-unit / 2; // } // } @mixin media-query($device) { @media screen and (max-width: $device) { @content; } } // Import partials from `sass_dir` (defaults to `_sass`) @import "base", "layout"; html { height: 100%; } body { display: flex; flex-direction: column; width: 100%; min-height: 100%; /* this helps with the sticky footer */ } .page-content { flex-grow: 1; flex-shrink: 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkIAIwEqFGipAiKQYGhmeEFIEtwqUIbALMKdgUoSjAZxKKf5BNwjAB3TqcCkAKAW9cBSRvYfskAAAAAElFTkSuQmCC) repeat; } footer { flex-shrink: 0; } .home { display: flex; p { padding-right: 10px; } .main, .preview { flex: 0 0 50%; } .preview { height: 500px; background-image: url(../background3.svg); background-size: contain; background-repeat: no-repeat; } img.saver { margin-top: 50px; margin-left: 32px; width:310px; height: 245px; } } @media screen and (max-width: 800px) { .home { display: block; .preview { background-image: none; img.saver { width: 100%; height: auto; margin: 0px; } } } } @include media-query($on-palm) { .site-title { max-width: $on-palm - 180px; } } ================================================ FILE: docs/index.html ================================================ --- layout: page title: Welcome! ---Welcome to the help website for Before Dawn, an open-source screensaver application. Before Dawn runs on Windows, OSX and Linux, and is powered by javascript.
Screensavers can be written in HTML and Javascript. If it works in a browser, it can be a screensaver!
You can learn more about Before Dawn, find out how to install it, and learn about writing your own screensaver.
I am located in .
Put the content of your screensaver here!
(These parameters will be sent to your screensaver when it loads)
<body>
<img id="screen" />
</body>
<script>
var img = document.getElementById("screen");
var url = unescape(decodeURIComponent(window.urlParams.screenshot));
img.src = url;
if ( typeof(window.urlParams.width) !== "undefined" ) {
img.width = window.urlParams.width;
img.height = window.urlParams.height;
}
</script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
This screensaver will pick a random screensaver and run it for you. Enjoy!
================================================ FILE: src/main/system-savers/random/saver.json ================================================ { "name": "Random", "description": "Pick a random screensaver each time", "author": "Colin Mitchell", "preload": "random", "source": "index.html" } ================================================ FILE: src/main/windows.js ================================================ "use strict"; import * as main from "./index.js"; import { BrowserWindow } from "electron"; var getSaverWindows = function() { return BrowserWindow.getAllWindows().filter((w) => { return w.isSaver === true; }); }; /** * check if the screensaver is still running */ export const screenSaverIsRunning = function() { return ( getSaverWindows().length > 0 ); }; /** * check if the specified window exists and isn't destroyed */ var activeWindowHandle = function(w) { return (typeof(w) !== "undefined" && ! w.isDestroyed()); }; /** * when the display count changes, close any running windows */ export const handleDisplayChange = function() { // main.log.info("display change, let's close running screensavers"); closeRunningScreensavers(); }; /** * close any running screensavers */ export const closeRunningScreensavers = function() { main.log.info("closeRunningScreensavers"); attemptToStopScreensavers(); // be really aggressive about closing lagging windows setTimeout(forcefullyCloseScreensavers, 2500); setTimeout(forcefullyCloseScreensavers, 5000); }; /** * iterate through our list of running screensaver windows and attempt * to close them nicely */ var attemptToStopScreensavers = function() { getSaverWindows().forEach((w) => { if ( activeWindowHandle(w) ) { w.close(); } }); }; /** * iterate through our list of running screensaver windows and close * them forcefully if needed */ var forcefullyCloseScreensavers = function() { getSaverWindows().forEach((w) => { if ( activeWindowHandle(w) ) { w.destroy(); } }); }; /** * forcefully close a screensaver window */ export const forceWindowClose = function(w) { // 100% close/kill this window if ( typeof(w) !== "undefined" ) { try { w.destroy(); } catch (e) { main.log.info(e); } } }; /** * Set full screen mode for the given window. Use OSX's * fast/simple fullscreen mode if available. * @param {BrowserWindow} w the window to apply */ export const setFullScreen = function(w) { if ( process.platform !== "darwin" ) { w.setFullScreen(true); } else { w.setSimpleFullScreen(true); } w.show(); // w.moveTop(); }; ================================================ FILE: src/renderer/AboutScreen.svelte ================================================
An open-source screensaver project.
learn more
Having trouble? please let us know!
App icon Sun by Ale Estrada from the Noun Project
Powered by Electron
Screensavers in Before Dawn are web pages, so if you can use HTML, CSS, and/or Javascript, you can make your own screensaver.
Use this form to create a new screensaver. A template will be added to the system that you can fill in with your code.
Be careful with these!
{saver.description}
{#if saver.author && saver.author !== ""} by: {saver.author} {/if} {/if}