Listening for events from Windows in electron – Tutorial

Electron fires a number of events around window actions. You can use these events to tell if a
window is minmized, maximized, and its position on screen. This is handy when you need to tell if
a window needs to be restored, or minimized for a sepcific applaction event.

Here are the basics, API can be found here.

With electron installed. Create a basic package.json

1
2
3
4
5
{
    "name":"window_events",
    "main":"./main.js",
    "version":"0.0.1"
}

index.html

1
2
3
4
5
<html>
    <body>
        <p>Electron window events</p>
    </body>
</html>

Electron window events

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const electron = require('electron')
const app = electron.app
 
const BrowserWindow = electron.BrowserWindow
 
var mainWindow = null;
 
app.on('ready', function(){
    mainWindow = new BrowserWindow({
        width:800,
        height:600
    });
 
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    console.log("Ready");
    mainWindow.on('move',(e) =>{
        console.log('electron move');
    });
    mainWindow.on('minimize',(e) =>{
        console.log('electron minimize');
    });
    mainWindow.on('maximize',(e) =>{
        console.log('electron maximize');
    });
    mainWindow.on('restore',(e) =>{
        console.log('electron restore');
    });
});

Running the above application

C:\yourfolder\electron .

you see the following output when you:

1. Minimize the window:

electron move
electron move
electron minimize

2. Restore the window

electron move
electron move
electron restore

3. Maximize the window

electron move
electron move
electron maximize

The confusing thing about these events is that move is called when the window has not moved. Also the minimize / restore / and maximize states are the last events called.

So if we where listening to the move event we would have to check to see if the window really did move.

Windows work around.

hookWindowsMessage allows electron to directly listen to window events.

The WM_SYSCOMMAND (0x0112) message is sent for some windows events.

Add the following listener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mainWindow.hookWindowMessage(Number.parseInt('0x0112'),(wParam,lParam)=>{// Hook WM_SYSCOMMAND
    let eventName = null;
    if (wParam.readUInt32LE(0) == 0xF060) { //SC_CLOSE
        eventName = 'close';
    } else if (wParam.readUInt32LE(0) == 0xF030) { //SC_MAXIMIZE
        eventName = 'maximize'
    }else if (wParam.readUInt32LE(0) == 0xF020) { //SC_MINIMIZE
        eventName = 'minimize'
    }else if (wParam.readUInt32LE(0) == 0xF120) { //SC_RESTORE
        eventName = 'restored'
    }
    if(eventName != null)
    {
        console.log("WINDOWS " + (eventName));
    }
});

For the moving and resizing of the window we only want to know when the move or resize is done.

1
2
3
4
// WM_EXITSIZEMOVE 0x0232
mainWindow.hookWindowMessage(Number.parseInt('0x0232'),(wParam,lParam)=>{
    console.log("Winodws move or resize complete");
});

The windows event fired first. In this last example we only see move(resize) / maximize / minimize and restore events when they are actually fired.

Final main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const electron = require('electron')
const app = electron.app
 
const BrowserWindow = electron.BrowserWindow
 
var mainWindow = null;
 
app.on('ready', function(){
    mainWindow = new BrowserWindow({
        width:800,
        height:600
    });
 
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    console.log("Ready");
 
    // Hook WM_SYSCOMMAND
    mainWindow.hookWindowMessage(Number.parseInt('0x0112'),(wParam,lParam)=>{
        let eventName = null;
        if (wParam.readUInt32LE(0) == 0xF060) { //SC_CLOSE
            eventName = 'close';
        } else if (wParam.readUInt32LE(0) == 0xF030) { //SC_MAXIMIZE
            eventName = 'maximize'
        }else if (wParam.readUInt32LE(0) == 0xF020) { //SC_MINIMIZE
            eventName = 'minimize'
        }else if (wParam.readUInt32LE(0) == 0xF120) { //SC_RESTORE
            eventName = 'restored'
        }
        if(eventName != null)
        {
            console.log("WINDOWS " + (eventName));
        }
    });
 
    // WM_EXITSIZEMOVE
    mainWindow.hookWindowMessage(Number.parseInt('0x0232'),(wParam,lParam)=>{
        console.log("Winodws move or resize complete");
    });
 
});
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *