I'm developing a dashboard application, my intention is to have multiple windows that can be customized by selecting pre-defined window layouts. An illustrated layout would be something like this:
I'm currently shooting for Electron framework. The way I'm doing it is by creating multiple BrowserWindow by capturing the screen size and calculating the windows sizes and positions. This is how I'm writing it:
// app/main.js
// Module to control application life.
var app = require('electron').app;
// Module to create native browser window.
var BrowserWindow = require('electron').BrowserWindow;
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function () {
app.quit();
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function () {
var screenElectron = require('electron').screen;
var mainScreen = screenElectron.getPrimaryDisplay();
var extScreen = null;
var allScreens = screenElectron.getAllDisplays();
var screenWidth = mainScreen.workArea.width;
var screenHeight = mainScreen.workArea.height;
var screenX = mainScreen.workArea.x;
var screenY = mainScreen.workArea.y;
console.log("Number of screens: " + allScreens.length);
console.log("Main screen: " + JSON.stringify(screenElectron.getPrimaryDisplay()));
console.log("All screen: " + JSON.stringify(screenElectron.getAllDisplays()));
console.log("Current display: " + Math.floor(screenWidth / 4) + " ; " + Math.floor(screenHeight / 4) + " ; " + screenX + " ; " + (screenY + Math.floor(screenHeight * 1 / 4)));
// Create the browser window.
mainWindow = new BrowserWindow({
width: Math.floor(screenWidth * 50 / 100),
height: Math.floor(screenHeight * 50 / 100)
});
var win1 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win2 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY + Math.floor(screenHeight * 1 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win3 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY + Math.floor(screenHeight * 2 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win4 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight / 4),
x: screenX,
y: screenY + Math.floor(screenHeight * 3 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win5 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight * 3 / 4),
x: screenX + Math.floor(screenWidth * 3 / 4),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win6 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 4),
height: Math.floor(screenHeight * 1 / 4),
x: screenX + Math.floor(screenWidth * 3 / 4),
y: screenY + Math.floor(screenHeight * 3 / 4),
resizable: false,
backgroundColor: '#2e2c29'
})
var win7 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 2 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win8 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 3 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win9 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 4 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var win10 = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth / 8),
height: Math.floor(screenHeight * 1 / 6),
x: screenX + Math.floor(screenWidth * 5 / 8),
y: screenY,
resizable: false,
backgroundColor: '#2e2c29'
})
var focusWin = new BrowserWindow({
parent: mainWindow,
frame: false,
width: Math.floor(screenWidth * 50 / 100),
height: Math.floor(screenHeight * 5 / 6),
x: screenX + Math.floor(screenWidth / 4),
y: screenY + Math.floor(screenHeight * 1 / 6),
resizable: false,
backgroundColor: '#2e2c29'
})
// Load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html');
win1.loadURL('file://' + __dirname + '/index.html');
win2.loadURL('file://' + __dirname + '/index.html');
win3.loadURL('file://' + __dirname + '/index.html');
win4.loadURL('file://' + __dirname + '/index.html');
win5.loadURL('file://' + __dirname + '/index.html');
win6.loadURL('file://' + __dirname + '/index.html');
win7.loadURL('file://' + __dirname + '/index.html');
win8.loadURL('file://' + __dirname + '/index.html');
win9.loadURL('file://' + __dirname + '/index.html');
win10.loadURL('file://' + __dirname + '/index.html');
focusWin.loadURL('file://' + __dirname + '/index.html');
});
Can anyone advise if this is a good structure/strategy, as I'm making all the windows independent of each other instead of the normal web app where everything is contained within one window? My greatest worry is the responsiveness of these windows and the content of each window. Appreciate any advice here...
