Showing the mirror in a window

Changing the smart mirror software to run in a window instead of full screen.

Advertisements

So we’ve started off the development in Atom.  The first thing we come across is the fact that, when the mirror software starts, it immediately changes to full screen.  Cool in a production environment (when we’re going to actually use the mirror), but when debugging it’s not handy at all.  That’s why I invested some time in searching how to prevent it from going to full screen immediately.

Turns out this is controlled in the file “electron.js”.

If you navigate to it in Atom, there some lines of code I’ve commented out, and changed to be able to debug the application better.  Below, you can find what I did.

First, I changed the width and the height of the window to have some more screen real-estate on the application.  1280×1024 should do.

function createWindow() {

var electronOptionsDefaults = {
//width: 800,
width:1280,
//height: 600,
height:1024,
x: 0,
y: 0,
darkTheme: true,
webPreferences: {
nodeIntegration: false,
zoomFactor: config.zoom
}
}

 

I also removed some deprecated code, to avoid it from being executed.

/*
// DEPRECATED: "kioskmode" backwards compatibility, to be removed
// settings these options directly instead provides cleaner interface
if (config.kioskmode) {
electronOptionsDefaults.kiosk = true;
} else {
electronOptionsDefaults.fullscreen = true;
electronOptionsDefaults.autoHideMenuBar = true;
}
*/

And lastly, I disabled an event handler that sets the window to full screen again whenever it leaves full screen.

/*
mainWindow.on("leave-full-screen", function() {
mainWindow.setFullScreen(true);
});
*/

That did the trick.  As you can see below, the mirror software now runs in a window, allowing me to see the code and use other applications when the mirror software runs.

Schermafbeelding 2017-01-16 om 23.37.04.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s