Change Windows Size in Electron

user_1176737 0
Viewed 24923

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

electron
2 Answers

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)
})
user_54237420

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)
user_55787730
Related