CODEWITHSUNDEEP
jquerynode.jselectron
LUX
LUX

Reputation: 97

Resize electron window through function

I've been trying to find an answer to this for a couple of days, but can't seem to find a good solution.

I am fairly new to Eelectron, but I am trying to create an application where I could call a function after an event to then resize the window.

What I've seen so far, I have to the the icpMain and icpRender, but whenever I try to execute the suggested code, i would either have a problem loading in my script or get a "not defined" error.

main.js:

const electron  = require('electron');
const {ipcMain} = require('electron');
const url       = require('url');
const path      = require('path');
const {app, BrowserWindow} = electron;
let mainWindow;
app.on('ready',function(){
    mainWindow = new BrowserWindow({
        transparent:    true,
        frame:          false,
        width:          500,
        height:         500,
        webPreferences: {
            preload: path.join(__dirname,'js/login.js')
        }
    });
    //mainWindow.removeMenu();
    mainWindow.loadURL(url.format({
        pathname:   path.join(__dirname,'html/login.html'),
        protocol:   'file:',
        slashes:    true
    }))
    ipcMain.on('resize-me-please', (event, arg) => {
        mainWindow.setSize(300,300)
    })
});

Upvotes: 1

Views: 84

Answers (1)

LUX
LUX

Reputation: 97

I finally figured it out.

in your main.js make sure you set the following inside the app object:

webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true,
}

full example:

const electron  = require('electron');
const url       = require('url');
const path      = require('path');
const {app, BrowserWindow} = electron;
let mainWindow;
app.on('ready',function(){
    mainWindow = new BrowserWindow({
        transparent:    true,
        frame:          false,
        width:          500,
        height:         500,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true,
        }
    });
    //mainWindow.removeMenu();
    mainWindow.loadURL(url.format({
        pathname:   path.join(__dirname,'html/login.html'),
        protocol:   'file:',
        slashes:    true
    }))
});

then if you use a library like jquery and jquery-UI make sure to install it with the following command:

  • npm install jquery --save
  • npm install jquery-ui --save

then in your index.html you need to require the jquery, this can also be done by file with the command you do this by:

<script>window.$ = window.jQuery = require('jquery');</script>

now you can execute the remote functions to with your js by using this in your js file:

const {BrowserWindow} = require('electron').remote;
var theWindow = BrowserWindow.getFocusedWindow();

now you can set, get maximize, minimize and close the app with the following command:

theWindow.close();

Upvotes: 2

Related Questions