Progress Bars in ElectronJS | Set – 1

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. 

Progress Bars are a critical part of web development. We do not need to emphasize the importance of progress bars within an application. There are already countless ways by which we can develop highly sophisticated and interactive progress bars using HTML, CSS, and JavaScript. However, in a Desktop Application, we want to display progress bars that fit well with the native System UI and corroborate the look and feel of the System OS. 

In Electron, we can display the progress bars within the taskbar/dock icon of the application. This enables the application to provide progress information to the user without the user having to switch to the application window itself. This can be achieved using the Instance method of the BrowserWindow object. Additionally, with the help of external packages, we can display attractive and customizable progress bars within the application window that also integrate well with the native system theme. In this tutorial, we will demonstrate how to create progress bars within an Electron Application. 

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

Project Structure:

Example: Follow the Steps given in Dynamic Styling in ElectronJS to set up the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. We will continue building our application using the same code base. Additionally, install electron-progressbar package using npm. This external package provides an easy and highly customizable API for controlling and displaying progress bars in Electron. Every aspect of the progress bar can be customized using CSS and values can be dynamically set as well. For more information on electron-progressbar, 

Refer to the link: https://www.npmjs.com/package/electron-progressbar. 

npm install electron-progressbar --save

Also, perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to set up the Electron application remain the same. 

package.json:

{
  "name": "electron-progress",
  "version": "1.0.0",
  "description": "Progress Bars in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0",
    "electron-progressbar": "^1.2.0"
  }
}

Output:

Progress Bars in Electron: The BrowserWindow Instance is part of the Main Process. To import and use BrowserWindow in the Renderer Process, we will be using Electron remote module. We will first demonstrate how to create a default progress bar in the taskbar/dock icon of the application using the Instance method of the BrowserWindow object. 

index.html: Add the following snippet in that file. 

html

<h3>Progress Bar in Electron</h3>
  <button id="progress">
       Click to Launch BrowserWindow Progress Bar
  </button>
<br><br>

index.js: The Click to Launch BrowserWindow Progress Bar button does not have any functionality associated with it yet. To change this, add the following code snippet in the index.js file

javascript

const electron = require('electron')
// Import BrowserWindow using Electron remote
const { getGlobal, BrowserWindow } = electron.remote

let win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];

let progress = document.getElementById('progress');
progress.addEventListener('click', () => {
    win.setProgressBar(0.5, {
        mode: "indeterminate"
    });
});

The win.setProgressBar(progress, options) Instance method of the BrowserWindow object creates a Progress Bar in the taskbar/dock icon of the application and sets the progress value in the progress bar. This Instance method is supported in all OS platforms. In Windows, the default taskbar button which is created for the application will be used to display the progress information. As mentioned before, the user does not have to switch to the application window to view the progress information. This feature is seen in many modern desktop applications such as the Google Chrome web browser. The default Windows File Explorer API also uses this same implementation when performing file operations. On macOS, the progress bar will be displayed as a part of the dock icon. On Linux, this feature is only supported in the Unity Desktop Environment. We need to specify the *.desktop filename to desktopName field in package.json file. By default, it will assume {app.name}.desktop. This method does not have a return type. It takes in the following parameters. 

• progress: Double This parameter is responsible for setting the progress value in the progress bar. Valid value range for this parameter is [0, 1.0]. For example, if we want to specify 49%, then we would call this Instance method with the progress value as 0.49. Setting this parameter to a value below 0 such as -1 removes the progress bar. This can be used to terminate an indefinite progress bar. Setting this value to above 1.0 such as 2 will change the progress bar mode to indeterminate which is covered in the next parameter.
• options: Object (Optional) This options object is supported in Windows only. It takes in the following parameters.
  • mode: String Specifies the mode for the Progress Bar. It can hold the following values.
    • none: Does not display the progress bar irrespective of the progress value set in the Instance method.
    • normal: Displays a definite progress Bar with the minimum value is 0 and maximum value as 1.0 for the progress parameter. Refer to the output below.
    • indeterminate: Displays an indefinite progress bar. The value set in the progress parameter is ignored and the progress bar keeps on displaying until it is manually terminated, for example, setting the progress parameter value as -1. Refer to the output below.
    • error: Displays an Error progress bar with the progress percentage being equal to the value of the progress parameter where the error occurred. The progress bar does not proceed further. Refer to the output below.
    • paused: Displays a Paused progress bar with the progress percentage being equal to the value of the progress parameter where the progress bar was paused. The progress bar does not proceed further. Refer to the output below.

To get the current BrowserWindow Instance in the Renderer Process, we can use some Static Methods provided by the BrowserWindow object. 

• BrowserWindow.getAllWindows(): This method returns an Array of active/opened BrowserWindow Instances. In this application, we have only one active BrowserWindow Instance and it can be directly referred from the Array as shown in the code.
• BrowserWindow.getFocusedWindow(): This method returns the BrowserWindow Instance which is focused on the Application. If no current BrowserWindow Instance is found, it returns null. In this application, we only have one active BrowserWindow Instance and it can be directly referred to using this method as shown in the code. 

At this point, upon launching the Electron application, we should be able to see an indefinite progress bar within the taskbar icon of the application. Currently, we have set the mode of the progress bar as indeterminate. 
Output: 

Definite Progress Bar, mode: ‘error’ :

Definite Progress Bar, mode: ‘pause’ :

Definite Progress Bar, mode: ‘normal’ :

Note: We will implement a Custom Progress Bar using the electron-progressbar npm package that we had installed earlier during the application setup in a separate article. 

Please Refer: Progress Bars in ElectronJS | Set – 2. This article will be a continuation, and we will continue using the same code base.