This tutorial deals with the creation of floating screens using Electron, specifically a Discord / Slack / GitKraken like loading screen.
Electron is an innovative system that allows you to create desktop / mobile applications taking advantage of all the power, comfort and quality of a web application.
To begin, following the official guide of Electron, we are advised to start from their boilerplate:
- Let's clone and build the basic Electron project:
git clone https://github.com/electron/electron-quick-start- Move to the root directory:
cd electron-quick-start- Install dependencies
npm install- Launch the project
npm startIf everything is successful, a Hello World by electron window will open!
Now that we have started everything successfully, we just have to proceed with the creation of the loading screen.
In the project folder, inside the file main.js, you will find a method createWindow, which takes care of creating the main BrowserWindow by loading the index.html file of the project.
The process to create a loading screen is very simple, in practice it's necessary to create a second BrowserWindow, which loads a separate html file, which we will call for convenience loading.html.
Let's proceed with the creation of this screen:
- Create a separate directory for our loading screen:
mkdir windows/loading
cd windows/loading- Create the html file for the loading screen:
echo >> loading.html- We can copy and paste what is present in the index.html file or create an html document according with our needs. For this first step we copy the contents of the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Loading World!</title>
</head>
<body>
<h1>Hello Loading World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js
<script>
document.write(process.versions.node);</script
>, Chromium
<script>
document.write(process.versions.chrome);</script
>, and Electron
<script>
document.write(process.versions.electron);</script
>.
<script>
// You can also require other files to run in this process
require('./renderer.js');
</script>
</body>
</html>- Once the loading.html file has been created, we need to modify the main.js file so that it loads the loading screen first, and then the main one:
/// Before
app.on('ready', createWindow);/// After
app.on('ready', () =>
createLoadingScreen();
/// for now, let's comment this
/// createWindow();
);by this way the application, when ready, will call up the createLoadingScreen method, which will be defined later.
- Definition of the createLoadingScreen method. This method allows us to instantiate a secondary window, used for loading:
/// create a global var, wich will keep a reference to out loadingScreen window
let loadingScreen;
const createLoadingScreen = () => {
/// create a browser window
loadingScreen = new BrowserWindow(
Object.assign({
/// define width and height for the window
width: 200,
height: 400,
/// remove the window frame, so it will become a frameless window
frame: false,
/// and set the transparency, to remove any window background color
transparent: true
})
);
loadingScreen.setResizable(false);
loadingScreen.loadURL(
'file://' + __dirname + '/windows/loading/loading.html'
);
loadingScreen.on('closed', () => (loadingScreen = null));
loadingScreen.webContents.on('did-finish-load', () => {
loadingScreen.show();
});
};In the main directory (electron-quick-start) if we launch the command npm start the application will be rendered starting from the loading screen, which at present has no style, so you will only see the strings of the html file. Let's proceed with the most creative part of our tutorial, the creation of the floating loading screen!
At this point we just have to create a respectable loading screen.
- Open the file loading.html, and define layouts, styles and more for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FLOATING LOADING SCREEN</title>
<style>
/* Define the main wrapper style */
.LoaderWrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
box-sizing: border-box;
background-color: black;
}
.LoaderContent {
color: white;
}
</style>
</head>
<body>
<div class="LoaderWrapper">
<div class="LoaderContent">
FLOATING SCREEN!
</div>
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js');
</script>
</body>
</html>Obviously this is an example, you can separate styles and logic in different files, for simplicity we keep everything in one file for the moment.
PLUS I strongly recommend using the unit rem (Responsive em), to manage any responsive behavior in relation to the font-size of the element root;
- Once we have created our loading screen (think of it as an html page, you can do whatever you want, add preloaders, images, svg, webgl and much more), we need to manage the dispose event of the window, where the main window will show up.
Return to the file main.js, inside the function createWindow and add the following:
[...]
/// keep listening on the did-finish-load event, when the mainWindow content has loaded
mainWindow.webContents.on('did-finish-load', () => {
/// then close the loading screen window and show the main window
if (loadingScreen) {
loadingScreen.close();
}
mainWindow.show();
});To ensure that the window is not shown as long as it is loaded, we need to review the way it is instantiated:
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
/// show to false mean than the window will proceed with its lifecycle, but will not render until we will show it up
show: false
})
[...]- Once we have defined the creation and dispose of the loading screen and the mainWindow, we need to restore the call to the createWindow function:
[...]
app.on('ready', () => {
createLoadingScreen();
/// add a little bit of delay for tutorial purposes, remove when not needed
setTimeout(() => {
createWindow();
}, 2000);
})
[...]By running the npm start command again, you can check the loading screen operation, it remains visible for about 2 seconds and then it's destroyed, to show up the main window.