I want the splash screen to stay on the screen for 3 seconds but electron loads the application way faster than that and so it stays on for barely a split second.
I'm using Angular to make the SPA.
This is the electron function for the splashscreen and the main window
app.on("ready", () => {
// create main browser window
mainWindow = new BrowserWindow({
titleBarStyle: "hidden",
width: 1920,
height: 1080,
show: false, // don't show the main window
});
// create a new `splash`-Window
splash = new BrowserWindow({
width: 800,
height: 450,
transparent: true,
frame: false,
alwaysOnTop: true,
});
splash.loadURL(`file://${__dirname}/splash.html`);
mainWindow.loadURL(`file://${__dirname}/dist/MedalFrontEnd/index.html`);
// if main window is ready to show, then destroy the splash window and show up the main window
function showFunc() {
mainWindow.once("ready-to-show", () => {
splash.destroy();
mainWindow.show();
});
}
showFunc();
});
You can use setTimeout in your function to wait for 3 seconds. Something like below should work -
function showFunc() {
mainWindow.once("ready-to-show", () => {
setTimeout(function(){
splash.destroy();
mainWindow.show();
}, 3000);
});
}
Related
I have a problem, the following code (simple as it looks) does not allow me to open more than three windows (not counting the parent). The children work correctly, but the father crashes and doesn't let me continue. What I can do?
ipcMain.on('openNewWindow', function(event, arg) {
windowEEE = new BrowserWindow({
center: true,
width: 1024,
height: 720,
minWidth: 1024,
minHeight: 720,
// show: false,
icon: __dirname + '/resources/iconos/support.png',
webPreferences: {
nodeIntegration: true, // is default value after Electron v5
contextIsolation: false, // protect against prototype pollution
enableRemoteModule: true // turn off remote
}
})
// windowEEE.setResizable(true);
// windowEEE.setMenuBarVisibility(false)
// windowEEE.once('ready-to-show', () => {
// windowEEE.show()
// })
windowEEE.loadFile(arg.html, {query: arg.query})
});
The logical thing is to open as many windows as one would like without any limit, but for some reason electronjs is hanging the parent process.
the function of call to ipcMain is
var openClient = (id) =>{
ipcRenderer.sendSync('openNewWindow', {
html:"./elements/components/equipo.html",
query: { id : id }
})
}
Ok, sorry for asking. But the answer is that the ipc function had no return. Adding to it, event.returnValue = true worked.
There is no explicit example of how to position your ELECTRON JS app to a specific area. The only syntax is available on GitHub, and it does not describe it well.
It's quite straight forward. Consider this code that positions the mainWindow once the ready event fires. You should be able to drop in the 'ready' event below to demonstrate the positioner.
// load the module
const Positioner = require('electron-positioner');
let mainWindow = null;
// create the main window
async function createWindow () {
mainWindow = new BrowserWindow({
height: 420,
width: 600,
x: 0, // default position left
y: 0, // default position top
show: false,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'node_modules', 'electron', 'dist', 'electron-bridge.js')
}
});
// reposition after creating the window.
app.on('ready', async () => {
await createWindow();
let positioner = new Positioner(mainWindow);
positioner.move('bottomRight');
});
Of course this affect may be achieved with the x and y values via the BrowserWindow constructor, but it is quite handy to have canned positions provided by the module.
I create my project with create-react-app. I use react-router-dom for router and electron-builder to package my app.
When I first run my application, it works normally but once I reload the page all becomes white. If I don't navigate to other routes, the app still works after reloading.
Below is my electron/index.js code
function createWindow() {
mainWindow = new BrowserWindow({
width: 1280,
height: 600,
minWidth: 800,
minHeight: 200,
autoHideMenuBar: true,
useContentSize: true,
resizable: true,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadURL(isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.focus();
mainWindow.on('close', (e) => {
if (willQuitApp) {
/* the user tried to quit the app */
mainWindow = null;
} else {
/* the user only tried to close the window */
e.preventDefault();
mainWindow.hide();
}
});
}
app.on('ready', createWindow);
I found the answer. I only need to use <HashRouter> instead of <BrowserRouter>
You got empty page after reloading because when you navigate to another page, you change the url. So when you reload, electron will load that url instead of index.html file
I'd like to have one single Electron window, split in two parts:
the left part is a BrowserWindow loading https://gmail.com
the right part is another BrowserWindow loading Gmail too, but I'd like these two browsers to be "independent", i.e. the cookies/LocalStorage/etc. should be independent (like if we have a normal Chrome window vs. a incognito window) ; thus allowing to have one Gmail account on left / another account connected on the right part
some other UI buttons on top of the single Electron window.
This code works, but it creates 2 windows instead of one:
const { app, BrowserWindow } = require('electron')
const path = require('path')
app.once('ready', () => {
let win = new BrowserWindow({show: false})
win.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
win.loadURL('https://www.gmail.com')
win.show()
let win2 = new BrowserWindow({show: false})
win2.once('show', () => { win.webContents.executeJavaScript('validateFlights()') })
win2.loadURL('https://www.gmail.com')
win2.show()
})
How to have them in one window?
A little late, but to add two browsers within one window you have to use BrowserWindow.addBrowserView instead of BrowserWindow.setBrowserView. You'll get the following:
const { BrowserView, BrowserWindow, app } = require('electron')
function twoViews () {
const win = new BrowserWindow({ width: 800, height: 600 })
const view = new BrowserView()
win.addBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 400, height: 300 })
view.webContents.loadURL('https://electronjs.org')
const secondView = new BrowserView()
win.addBrowserView(secondView)
secondView.setBounds({ x: 400, y: 0, width: 400, height: 300 })
secondView.webContents.loadURL('https://electronjs.org')
app.on('window-all-closed', () => {
win.removeBrowserView(secondView)
win.removeBrowserView(view)
app.quit()
})
}
app.whenReady().then(twoViews)
Once you create two BrowserView objects, you just add them to the window. You'll also want to remove the views when tearing down the application. If you don't you might get a segmentation fault.
What you are looking for is BrowserView
From the docs:
A BrowserView can be used to embed additional web content into a BrowserWindow. It is like a child window, except that it is positioned relative to its owning window. It is meant to be an alternative to the webview tag.
It looks like this is what you want, the views can render separate HTML pages and position them relatively inside the same browser window.
// In the main process.
const { BrowserView, BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
win = null
})
let view = new BrowserView({
webPreferences: {
nodeIntegration: false
}
})
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://electronjs.org')
I am writing an Eletron program. In the program there is one index-window which is created by the main process (main.js). In this window there is a list of files (images). When I click on one of the files in that list I want to start a second window that displays that file.
That second window is started by the renderer process of the index-window (index.js). How can I communicate between the renderer process of the index-window and the renderer process of the second window?
Code:
Creating the index-window from the main process in main.js:
let win;
function createWindow(){
// Create the browser window.
win = new BrowserWindow({width: 1024, height: 768, minWidth: 800, minHeight: 600, show: false, icon: 'files/images/icon.png'});
win.loadURL(`file://${__dirname}/files/html/index.html`);
win.once('ready-to-show', () => {
win.show()
})
// Emitted when the window is closed.
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
In the index.html index.js (renderer process) is started:
<script src="../javascript/index.js"></script>
In index.js the function create_sprite_window() is called which creates a child window:
const fs = require('fs');
const path = require('path');
const {BrowserWindow} = require('electron').remote
let child_windows = [];
function create_child_window(URL, width, height){
let rem_win = require('electron').remote.getCurrentWindow();
let new_win = new BrowserWindow({width: width, height: height, minWidth: 400, minHeight: 300, show: false, parent: rem_win, minimizable: true, maximizable: true, skipTaskbar: true});
child_windows[child_windows.length] = new_win;
console.log(child_windows);
new_win.loadURL(URL);
new_win.once('ready-to-show', () => {
new_win.show()
})
return new_win;
}
function create_sprite_window(){
new_win = create_child_window(`file://${__dirname}/../html/sprite_manager.html`, 800, 400);
}
The child windows are stored in the array child_windows.
Is it possible to then send the path of the image to the second window or, alternatively, edit the <img> tag of the second window (setting the source of the <img> tag in the second window to the image with getElementById.src = path;) from the index-window?.
I have found the answer by myself.
To show the correct image in the second renderer window, I add a GET parameter to the URL which contains the path of the image.