-
-
Save ahkohd/38662d13d6a4566dc95e4cec4ac51c61 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World!</title> | |
| <link rel="stylesheet" type="text/css" href="./styles.css"> | |
| </head> | |
| <body> | |
| <h1>Fade In/Out Window Example</h1> | |
| <div> | |
| <button id="fade-in-out">Fade Out / In</button> | |
| </div> | |
| <script> | |
| // You can also require other files to run in this process | |
| require('./renderer.js') | |
| </script> | |
| </body> | |
| </html> |
| // Modules to control application life and create native browser window | |
| const {app, BrowserWindow} = require('electron') | |
| function createWindow () { | |
| // Create the browser window. | |
| const mainWindow = new BrowserWindow({ | |
| width: 800, | |
| height: 600, | |
| webPreferences: { | |
| nodeIntegration: true | |
| } | |
| }) | |
| // and load the index.html of the app. | |
| mainWindow.loadFile('index.html') | |
| // Open the DevTools. | |
| // mainWindow.webContents.openDevTools() | |
| } | |
| // This method will be called when Electron has finished | |
| // initialization and is ready to create browser windows. | |
| // Some APIs can only be used after this event occurs. | |
| app.on('ready', createWindow) | |
| // 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() | |
| } | |
| }) | |
| app.on('activate', function () { | |
| // On OS X it's common to re-create a window in the app when the | |
| // dock icon is clicked and there are no other windows open. | |
| if (BrowserWindow.getAllWindows().length === 0) { | |
| createWindow() | |
| } | |
| }) | |
| // In this file you can include the rest of your app's specific main process | |
| // code. You can also put them in separate files and require them here. |
| // Empty |
| const remote = require('electron').remote | |
| const fadeWindowOut = ( | |
| _window, | |
| step = 0.1, | |
| fadeEveryXSeconds = 10 | |
| ) => { | |
| let opacity = _window.getOpacity(); | |
| const interval = setInterval(() => { | |
| if (opacity <= 0) window.clearInterval(interval); | |
| _window.setOpacity(opacity); | |
| opacity -= step; | |
| }, fadeEveryXSeconds); | |
| return interval; | |
| } | |
| const fadeWindowIn = ( | |
| _window, | |
| step = 0.1, | |
| fadeEveryXSeconds = 10 | |
| ) => { | |
| let opacity = _window.getOpacity(); | |
| const interval = setInterval(() => { | |
| if (opacity >= 1) window.clearInterval(interval); | |
| _window.setOpacity(opacity); | |
| opacity += step; | |
| }, fadeEveryXSeconds); | |
| return interval; | |
| } | |
| document.getElementById('fade-in-out').onclick = () => { | |
| // fade out this window... | |
| fadeWindowOut(remote.getCurrentWindow(), 0.1, 2); | |
| // 1000 miliseconds later, fade it in... | |
| setTimeout(() => fadeWindowIn(remote.getCurrentWindow(), 0.1, 2), 1000) | |
| } |
| /* Empty */ |
Hi, @imansigupta this script is meant to run in the renderer process (i.e renderer.js - the js file you include inside your index.html) that is why I used the remote module.
Is it compulsory for you to do it in your main process?
Let me know so that I can write the main process equivalent of the fadeIn/Out function.
Hey,
At first, I tried Implementing this in index file only using the remote module. But This ain't working. Due to which I thought of trying it in main.js. Is there any issue related to ubuntu? because I tried running the same fiddle in another folder but still the problem is same.
It is not able to set the Opacity on the browserWindow
https://www.electronjs.org/docs/api/browser-window#winsetopacityopacity-windows-macos
After checking the docs, I realised that ElectronJS setOpacity method does not support Linux.
I guess this is due to different Linux distros using different desktop environment i.e GNOME, KDE e.t.c
You might have to write a native Node.JS module to achieve this for your desktop environment.
I guess how to fade window programmatically will vary on different desktop environments.
Any other questions or request? Let me know!
No, Thank you for helping me out.
@imansigupta You're welcome.
Hey! I tried running this on ubuntu based system. But this isn't running. I tried adding opacity property in main.js too by using mainWindow.setOpacity(0.5); but this was not working as well.
Kindly Help me with this issue