This is my createWindow function that I pass to app.on('ready')
function createWindow () {
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '../index.html'),
protocol: 'file:',
slashes: true,
})
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
devTools: true,
preload: path.join(__dirname, 'preload.js')
},
})
mainWindow.loadURL(startUrl)
mainWindow.removeMenu() // <----------------- HERE!
mainWindow.on('closed', function () {
mainWindow = null
})
}
Pretty boiler plate the issue is that the mainWindow.removeMenu() does not work and it leaves it in places.
I've also tried setMenu(null) and the menu is still there.
Is the menu only removed in production, or am I doing something wrong?
Edit
I've also tried mainWindow.setMenuBarVisibility(false), and it does not work as well.
Chances are that you are still using an old version of Electron. There has been a bug preventing the removal of the menu bar for a long time. It has been fixed in Electron 7.1.5:
Release Notes for v7.1.5
Fixes
Fixed window menu unable to hide on startup. #21449
So, mainWindow.removeMenu() should work fine once you upgrade Electron to its latest version, or at least a version greater than or equal to 7.1.5.
Related
Problem:
I have an electron app that uses the camera.
The app already exists for a few years with no issues on this side but lately, I have had a new issue specific to Mac M1 running MacOS Ventura. It takes a long time for the camera to load (around 8-10 seconds) and sometimes it even fails to do so.
NotReadableError: Failed to allocate videosource
Stack:
Electron: 15.5.4
Electron builder: 23.1.0
MacOS: 12.6
Intel processor
My code:
In order to present the camera I'm using the following code:
const constraints = {
audio: true,
video: { width: 800, height: 600 }
};
navigator.mediaDevices.getUserMedia(constraints)
.then((mediaStream) => {
const video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = () => {
video.play();
};
})
.catch((err) => {
// always check for errors at the end.
console.error(`${err.name}: ${err.message}`);
});
And to create the browserWindow:
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
});
// and load the index.html of the app.
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
})
);
So far conclusions:
When I build my app on M1 it works flawlessly but I do want to keep building it on x86 machine and with x64 arch.
Building an arm64 arch on x86 machine doesn't solve this issue.
I made an app with camera only and it still happen.
I've an unexpected cursor helper in my electron app for input fields which I can relate to chrome and I'm searching for a way to disable/hide this "waterdrop" in the electron configuration or so.
Is there any option because I actually cannot find anything related to this?
My electron config looks like below:
[....]
createWindow() {
this.mainWindow = new BrowserWindow({
width: this.windowSizes[0].width,
height: this.windowSizes[0].height,
backgroundColor: "#041525",
frame: false,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
nodeIntegration: true,
nodeIntegrationInWorker: true,
defaultFontSize: this.fontSize,
},
});
[....]
and I start the electron app like this:
/path/to/electron --touch-events
I'm developing an app using Electron. Using win.loadFile('index.html') used to work, but from yesterday it throws an error saying: win.loadFile is not a function.
Could it be "Knex.js" which caused this error? Because I installed it recently and the problems began to appear after that. Also, I noticed that Electron icon changed from transparent to a light blue (green) circle.
In addition, Using loadURL works but it renders the html file incompletely.
This is my main.js (I removed knex.js code from main.js but didn't help):
const { app, BrowserWindow } = require('electron')
const url = require('url')
const path = require('path')
function createWindow () {
// Create the browser window.
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html');
}
app.on('ready', createWindow)
Check your Electron version. The version of Electron you want to run, install it globally. Here's the issue on GitHub:
BrowserWindow .loadFile is not a function
I'm testing on Windows.
The app sets up a Tray menu on 'ready', with an 'About' label. When clicked, it shows a BrowserWindow:
var aboutBox = new BrowserWindow({
width: 460, height: 176, useContentSize: true,
icon: iconImg,
maximizable: false, fullscreenable: false, resizable: false, minimizable: false
});
and then, when the user clicks on OK, closing it with:
const remote = require('electron').remote;
remote.getCurrentWindow().close();
causes the app to exit.
Why?
In your main.js you could have this code:
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
So because you close the unique windows this event it's emitted and app is closed.
EDIT
This behavior is also default in Electron, so to avoid closing app closing the main window add this line:
app.on('window-all-closed', e => e.preventDefault() )
I've got an electron app, below is the main.js file:
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 715,
width: 1200,
minWidth: 600,
minHeight: 200,
center: true
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
});
As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).
In simple CSS this is done by using
width:100%;
height:100%;
I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it
Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden
Can anyone help?
use this!
win = new BrowserWindow({show: false});
win.maximize();
win.show();
Call mainWindow.maximize() to maximize the window after you create it.
Use this:
const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
try this code after your mainWindow declaration
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
It worked for me
The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.
const mainWindow = new BrowserWindow({
movable: false,
resizable: false,
maximizable: false,
minimizable: false,
titleBarStyle: 'hidden', // watch this line
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
DevTools: false,
}
});
note that I only have tested on Windows OS and it can be change in other OS like Mac.