Zoom Functionality in ElectronJS

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.

All traditional web Browsers have Zoom functionality built into them. The user can simply zoom in/zoom out to increase/decrease the size of the contents of the web page respectively by scrolling the mouse wheel. By default, Electron does not enable Zoom functionality for its BrowserWindow Instances. However, Electron does provide a way by which we can add Zoom functionality to the contents of the page using the Instance methods, events, and properties of the built-in BrowserWindow object and the webContents property. The webContents property provides us with certain Instance events and methods by which we can set the default zoom of the web page, the maximum and minimum zoom of the web page and zoom in/zoom the contents of the web page using the mouse scroll. This tutorial will demonstrate Zoom functionality in Electron.

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 Printing in ElectronJS to setup the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. 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 setup the Electron application remain the same. 
package.json:

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

Output: At this point, our basic Electron Application is set up. Upon launching the application, we should see the following Output: 

Zoom Functionality in Electron: The BrowserWindow Instance and webContents Property are part of the Main Process. To import and use BrowserWindow in the Renderer Process, we will be using Electron remote module.

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

html

<h3>Zoom in Electron</h3>
<div>Ctrl+Scroll for Triggering Zoom Functionality</div>

• index.js: Add the following snippet in that file.

javascript

const electron = require("electron");

// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();

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

// If reduced below Minimum value
// Error - 'zoomFactor' must be a double greater than 0.0
win.webContents.setZoomFactor(1.0);

// Upper Limit is working of 500 %
win.webContents
    .setVisualZoomLevelLimits(1, 5)
    .then(console.log("Zoom Levels Have been Set between 100% and 500%"))
    .catch((err) => console.log(err));

win.webContents.on("zoom-changed", (event, zoomDirection) => {
    console.log(zoomDirection);
    var currentZoom = win.webContents.getZoomFactor();
    console.log("Current Zoom Factor - ", currentZoom);
    // console.log('Current Zoom Level at - '
    // , win.webContents.getZoomLevel());
    console.log("Current Zoom Level at - ", win.webContents.zoomLevel);

    if (zoomDirection === "in") {

        // win.webContents.setZoomFactor(currentZoom + 0.20);
        win.webContents.zoomFactor = currentZoom + 0.2;

        console.log("Zoom Factor Increased to - "
                    , win.webContents.zoomFactor * 100, "%");
    }
    if (zoomDirection === "out") {

        // win.webContents.setZoomFactor(currentZoom - 0.20);
        win.webContents.zoomFactor = currentZoom - 0.2;

        console.log("Zoom Factor Decreased to - "
                    , win.webContents.zoomFactor * 100, "%");
    }
});

A detailed Explanation of all the Instance Events, Methods, and Properties used in the code are given below: 

• zoom-changed: Event This Instance Event of the webContents property is emitted when the user is requesting to change the Zoom level of the web page by scrolling the mouse wheel. On Windows, this is triggered by the Ctrl+Scroll key combination. By default, Electron does not have Zoom enabled and this Event needs to be explicitly added to know whether the change in Zoom level was triggered or not. This Event returns the following parameters.
  • event: The global Event object.
  • zoomDirection: String This parameter represents whether the Scroll on the mouse wheel was initiated upwards signifying Zoom-In or was initiated downwards signifying Zoom-Out. This parameter can only hold two values i.e. in or out respectively.
• webContents.setZoomFactor(factor) This Instance Method of the webContents property changes the Zoom Factor of the web page to the specified factor. This Instance method determines by what factor the web page should be zoomed in or out. Zoom factor is Zoom percent divided by 100. Hence, If Zoom Percent is 100% then Zoom Factor – 1.0. It takes in the following parameters. In the above code, we are increasing/decreasing the Zoom Factor for every zoom-changed Instance Event emitted by 0.2 which means 20% zoom-in or zoom-out.
  • factor: Double The double Zoom Factor. By default, value is set as 1.0. The factor value must always be greater than 0.0. In case during zoom operations, this value goes below 0.0, An Error is triggered and displayed in the Console and no further changes are made to the Zoom of the web page.
• webContents.getZoomFactor() This Instance method of the webContents property returns an Integer value stating the current Zoom Factor of the web page. The value returned will always be greater than 0.0.
  Note – Even though not specified in the Official Electron documentation, as of Electron 8.3.0, this method stands Deprecated. In case this method is used, it will display a warning message in the console even though it still works. We should use the webContents.zoomFactor Instance Property instead to fetch and manipulate the Zoom Factor of the web page. The same has been demonstrated in the code and explained below.
• webContents.setZoomLevel(level) This Instance method of the webContents property changes the Zoom level of the web page to the specified level. This Instance method determines by what level the web page should be zoomed in or out. According to Official Electron documentation, The original size is 0 and each increment above or below represents zooming 20% larger or smaller to default limits of 300% and 50% of original size, respectively. The formula for this is scale := 1.2 ^ level. 
  Note – This Instance method and the webContents.setZoomFactor() Instance method, both perform the same manipulations to the Zoom of the contents of the web page in Electron. These Instance methods simply take in different values based on the factor and level provided respectively. Also webContents.setZoomFactor() method is easier to manage and control. In the above code, we have displayed the Zoom Factor and the Zoom level every time the Instance Event is emitted. Also the Zoom Level of the web page can be a Negative value as well. 
  Note – Even though not specified in the Official Electron documentation, as of Electron 8.3.0, this method stands Deprecated. In case this method is used, it will display a warning message in the console even though it still works. We should use the webContents.zoomLevel Instance Property instead to fetch and manipulate the Zoom Level of the web page.
• webContents.getZoomLevel() This Instance method of the webContents property returns an Integer value stating the current Zoom Level of the web page. The value returned can also be Negative value. 
  Note – Even though not specified in the Official Electron documentation, as of Electron 8.3.0, this method stands Deprecated. In case this method is used, it will display a warning message in the console even though it still works. We should use the webContents.zoomLevel Instance Property instead to fetch and manipulate the Zoom Level of the web page.
• win.webContents.setVisualZoomLevelLimits(minimum, maximum) This Instance Method of the webContents property sets the minimum and maximum limit of the Zoom Level. As discussed above, Zoom functionality is disabled in Electron by default. To enable it, this Instance method is used. It returns a Promise and it is resolved when the minimum and the maximum Zoom for the web page have been set successfully. It takes in the following parameters.
  • minimum: Integer Sets the Minimum Zoom allowed for the web page. This value is the Zoom percent divided by 100. Hence Zoom Percent – 100% translates to 1 which is set in this parameter.
  • maximum: Integer Sets the Maximum Zoom allowed for the web page. This value is the Zoom percent divided by 100. Hence Zoom Percent – 500% translates to 5 which is set in this parameter.
• webContents.zoomFactor This Instance property of the webContents property changes the Zoom Factor of the web page to the specified factor. This Instance property determines by what factor the web page should be zoomed in or out. Zoom factor is Zoom percent divided by 100. In the above code, we are increasing/decreasing the Zoom Factor for every zoom-changed Instance Event emitted by 0.2 which means 20% zoom-in or zoom-out.
• webContents.zoomLevel This Instance property of the webContents property changes the Zoom Level of the web page to the specified level. This Instance property determines by what level the web page should be zoomed in or out. According to Official Electron documentation, The original size is 0 and each increment above or below represents zooming 20% larger or smaller to default limits of 300% and 50% of original size, respectively. The formula for this is scale := 1.2 ^ level.

To get the current BrowserWindow Instance in the Renderer Process, we can use some of the 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 in 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 using this method as shown in the code.

At this point, we should successfully be able to Zoom-In and Zoom-Out of the contents of the BrowserWindow in Electron. 
Output: