Electron Modify Options without recreating the window

Question

I'got an issue with my application. I've created a nice looking Login-Window which is a window with the options {transparent: true, frame: false}.

After the user has logged in. I want to "redirect" to the Dashboard where I need to set the option "transparent" back to false because the background of the Dashboard is white and Im only able to the printed font on a fully transparent window.

Is there any workaround to get the Electronwindow back to none transparent without recreating it.

app.js:

const electron = require('electron');
const { BrowserWindow } = electron;
const { app } = electron;
const window = require('electron-window');

const { MainProcess } = require("./modules/ipcHelper.js");

const io = require('socket.io-client');
const port = 8888;
let socket;

require('electron-reload')(__dirname)

let mainWindow;

app.on('ready', () => {
    mainWindow = window.createWindow({
        width: 835,
        height: 750,
        frame: false,
        transparent: true,
    });

  let testwindow = new BrowserWindow({
        width: 835,
        height: 750,
        frame: false,
        transparent: true,
    });

    mainWindow.showUrl(`./app/index.html`, () => {

    });

    let mainProcess = MainProcess(mainWindow);

    mainProcess.onReady(() => {
        mainProcess.on('auth', (arg, callback) => {
            socket = io('http://' + arg.servername + ':' + port);

            socket.on("connect", () => {
                socket.emit('auth', { username: arg.username, password: arg.password }, (response) => {
                    if (response.success === true){
                        callback({ success: true });
                    //Here i want to set transparenty back to false
                    }
                    else
                        callback({ success: false, code: response.code });
                });
            });

            socket.on("connect_error",() => {
                callback({ success: false, code: 3 });
            });


        });
    });
})

score 2 · Answer 1 · answered Dec 28 '17 at 23:53

2

The BrowserWindow has a bunch of methods you can use to change properties like that on the fly. I think the one you're looking for is win.setOpacity()

https://github.com/electron/electron/blob/master/docs/api/browser-window.md#winsetopacityopacity-windows-macos

If you're doing this in the renderer process, you'll have to get access to it using remote

https://github.com/electron/electron/blob/master/docs/api/remote.md

answered Dec 28 '17 at 23:53

Chris Riebschlager

1,323
1
8
12

1

getOpacity and/or setOpacity is not even working. Im getting the error that it is not a function. – Koslov Dec 29 '17 at 00:13
You want to make sure that `win` in that case is a reference to the window you're trying to change. For instance, if it's the main window: `remote.getCurrentWindow()` – Chris Riebschlager Dec 29 '17 at 00:15
Im working in the mainprocess so Im working with the global declared var mainWindow – Koslov Dec 29 '17 at 00:17
If it's an instance of `BrowserWindow` it should definitely have those methods. Are you maybe trying to call them before the window is instantiated? – Chris Riebschlager Dec 29 '17 at 00:19
definitely not. I can access all other window methods except opacity... – Koslov Dec 29 '17 at 00:22
Can you edit your question to include your `index.js`? – Chris Riebschlager Dec 29 '17 at 00:28
Ah, ok. Well, I'd bet you $5 your issue results from using `electron-window` instead of the native `BrowserWindow`. I don't know much about `electron-window` but does it not truly "extend" `BrowserWindow`? – Chris Riebschlager Dec 29 '17 at 00:40
Hm I was thinking about that aswell, but Ive tested it already with the original "new BrowserWindow(opts)" it doesnt work too. Ive added the part to the app.js in my question. I looked into the code of electron-window it is only extending the original object of Browserwindow – Koslov Dec 29 '17 at 00:43

Electron Modify Options without recreating the window

1 Answers1