Change Windows Size in Electron

Question

i'm very new to electron, but loving it. However, i am stuck on one thing, so after some guidance if possible.

i have a small test app, that i will be using for users to login in to a page.

in my main.js file i set the mainWindow properties as below:

function createWindow() {

  mainWindow = new BrowserWindow({frame:false,
    width: 1024,
    height: 565,
    minWidth: 1024,
    minHeight: 565,
    frame: false,
    resizable: false,
    show: false,
    center: true,
    backgroundColor: '#312450',
    icon: path.join(__dirname, 'assets/icons/png/64x64.png')
  })

  mainWindow.loadURL(`file://${__dirname}/login.html`)

    mainWindow.once('ready-to-show', () => {
      mainWindow.show()
    })

    //mainWindow.webContents.openDevTools({detach: true})

    mainWindow.on('closed', function() {
      mainWindow = null
    })
  }

and then launch this in the app.on event.

This is all good so far.

I also add an eventlistener to a button in the login.html page as follows:

btnSignIn.addEventListener('click', function(){

const email = txtEmail.value;
const pass = txtPassword.value;

firebase.auth().signInWithEmailAndPassword(email, pass).then(function(){
    document.location.href = 'loggedin.html';
}).catch(function(error){
    if(error != null){
        alert(error.message);
        return;
    }
})

},false);

This is all working perfectly well. The only issue i have is that i'd like the second page (loggedin.html) to be a different size.

I presume i have to change the mainWindow options specified previously, but i am unable to acheive it.

any pointers are greatly appreciated.

Regards

J

Solution 1

In your renderer process (js script loaded from login.html) you should be able to load Electron and Node modules.

const {ipcRenderer} = require('electron');

// Right after the line where you changed the document.location
ipcRenderer.send('resize-me-please')

In main.js

const {ipcMain} = require('electron')
ipcMain.on('resize-me-please', (event, arg) => {
  mainWindow.setSize(width,height)
})

Solution 2

To add to Leonardo's answer, if your application may have multiple windows, you can resolve the sender window by pulling that from the IPC event, like so:

main.js

const {ipcMain} = require('electron')

ipcMain.on('resize-window', (event, width, height) => {
    let browserWindow = BrowserWindow.fromWebContents(event.sender)
    browserWindow.setSize(width,height)
})

Renderer

const {ipcRenderer} = require('electron');

// ...
ipcRenderer.send('resize-window', 1280, 720)

Comments

[user1176737]

Worked perfectly - thanks for that Leonardo, ilearn something new every day!!.

[user1176737]

Hi Leonardo, just one more question on this if i may. In the main.js i have the option center set to true for the mainWindow, which is fine. However, when i launch the resized second window - it is off to the side (i presume this is centered to the main window. Is there an easy way to have it centereed to the screen not the mainWindow? Jason

[user1176737]

Hi not to worry, found the window.center() . thanks all