Ive searched everywhere on how to make the corners rounded of my browserWindow.
How can I achieve rounded corners?
I've tried making it transparent. But nothing works.
Hers my code:
/**
* we need to keep a global reference of the window object. If we don't, the
* window will be closed automatically when the js object is garbage collected
*/
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1800,
height: 1000,
frame: false,
transparent: true,
icon: __dirname + 'icon.png'
})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', function () {
/**
* Dereference the window object, usually you would store windows in an
* array if your app supports multi windows, this is the time when you
* should delete the corresponding element.
*/
win = null
})
}
For transparency try using the opacity property. The range is from 0 to 1
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 1800,
height: 1000,
frame: false,
radii: [5,5,5,5],
transparent: true,
icon: __dirname + 'icon.png'
})
Related
Currently with my BSP based WM electron window resizes to accommodate the screen, according to browserWindow options focusable tag should prevent it, bug when I tap on my app, the window isn't focused and doesn't listen for inputs.
What other flag would me have my window not affected by BSP based WM
My current flags for browserWindow with gets affected by WMs
const mainWindow = new BrowserWindow({
width: 650,
height: 400,
center: true,
frame: false,
resizable:false,
alwaysOnTop: true,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
I have a menu in my application that when you click on document properties another window pops up, but the application menu is also being inherited by this window, so you can open the document properties window from the document properties window. I just want to disable the menu for the document properties window,the only way I've been able to achieve this was by making the window frameless, but I still want the title bar to show, so that's not the solution I'm looking for.
I've tried using docProps.removeMenu(), docProps.setMenu(null), and even docProps.setApplicationMenu(null). I've moved it around, tried making docProps a global variable, nothing has worked.
This is my code:
//Create references for modules that require electron
const { app, BrowserWindow, Menu } = require('electron')
//Create a global reference for the main window
let mainWindow
function createWindow () {
//Create the browser window
mainWindow = new BrowserWindow({
minWidth: 300,
minHeight: 300,
backgroundColor: '#888888'
})
//Load the index.html file
mainWindow.loadFile('index.html')
//Reload the main window on resize
mainWindow.on('resize', function () {
mainWindow.reload()
})
}
function createAppMenu () {
//Create application menu template
const template = [
{
label: 'File',
submenu: [
{
label: 'Document Properties...',
click: function () {
docProps = new BrowserWindow({
width: 250,
height: 300,
resizable: false,
title: 'Document Properties'
})
//This isn't working and I'm not sure why
docProps.removeMenu()
}
}
]
},
{
label: 'Edit'
},
{
label: 'View'
},
{
label: 'Window'
},
{
label: 'Help'
}
]
//Build app menu from template
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
//Call the createWindow function once electron has finished initializing
app.on('ready', function () {
createWindow()
mainWindow.maximize()
createAppMenu()
})
You can see the entire project at https://github.com/Leglaine/ElectroText
The only error message I get is when I try to call docProps.setApplicationMenu(null), it says that setApplicationMenu cannot be called on docProps, but I didn't really expect that to work anyway. Thanks in advance for your help!
win.removeMenu() and win.setMenu(null) seem to be currently broken in Electron when you have already set an application menu via Menu.setApplicationMenu()
Try setting an empty menu like this
docProps.setMenu(Menu.buildFromTemplate([]))
I'm having a problem changing scenes when I reach the area that should trigger the second level in the game I'm developing. For some reasons instead of showing the second level the game shows a black screen and no errors on the console. I think that the answer to my question is here (http://www.html5gamedevs.com/topic/37617-trouble-changing-scenes-in-phaser-3/) as the guy who asked the question had my problem and managed to resolve it, but I don't understand his last post.
the way I call the second scene in my first scene is the function:
PassaggioLivello() {
if(this.player.sprite.x > 15400){
this.scene.start(MainScene2);
}
}
And both scenes are included in the config file:
import {MainScene} from "./main-scene.js";
import {MainScene2} from "./main-scene.js";
let config = {
type: Phaser.AUTO,
width: 1280,
height: 720,
backgroundColor: "#000c1f",
parent: "game-container",
scene: [MainScene, MainScene2],
pixelArt: true,
physics: { default: "matter" },
plugins: {
scene: [
{
plugin: PhaserMatterCollisionPlugin, // The plugin class
key: "matterCollision", // Where to store in Scene.Systems, e.g.
scene.sys.matterCollision
mapping: "matterCollision" // Where to store in the Scene, e.g. scene.matterCollision
}
]
}
};
let game = new Phaser.Game(config);
Can you please help me? I don't understand my error.
The this.scene.start() method requires the identifying key of the scene you want to start--not the scene object itself.
Each scene being imported should have a key declared in the constructor method, like this:
constructor() {
super({ key: 'game' });
}
Then, you should be able to start the scene you want by calling this.scene.start('game');
I am using pusher and xtermjs. For small outputs for commands like w or free -m it works fine. For large outputs for commands ps -aux it doesnt work. The output is shown in the browser console but not in xtermjs output div.
Here is my pusher event handler.
this.term = new Terminal({
debug: true,
allowTransparency: true,
applicationCursor: true,
applicationKeypad: true,
normalFontWeight: 100,
fontSize: 14,
cursorBlink: true,
cursorStyle: 'block', // “block” | “underline” | “bar” *
})
this.term.open(document.getElementById(this.outputDiv))
this.term.fit()
let screenObject = this
let terminalObj = this.term
window.UserChannel.bind('com.testing.command.result', function (data) {
// console.log(data)
let text = data.payload.replace(/\n/g, '\r\n')
terminalObj.writeln(text)
// terminalObj.fit()
// screenObject.hideHelpers()
})
The issue was with xterm-scroll-area. It was hiding data behind it. I had set style options as postion:absolute; z-index:0; and it worked.
How to implement background service using electron.
i'm having a trouble can anyone tell me how to start a background
service using electron which runs even after closing the app. i have
tried many solutions but all of them stop the service after closing
the app.
You can use tray. here is an example (source):
"use strict";
// [run the app]
// $ npm install electron
// $ ./node_modules/.bin/electron .
const {app, nativeImage, Tray, Menu, BrowserWindow} = require("electron");
let top = {}; // prevent gc to keep windows
app.once("ready", ev => {
top.win = new BrowserWindow({
width: 800, height: 600, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
top.win.loadURL("https://google.com/");
top.win.on("close", ev => {
//console.log(ev);
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
// empty image as transparent icon: it can click
// see: https://electron.atom.io/docs/api/tray/
top.tray = new Tray(nativeImage.createEmpty());
const menu = Menu.buildFromTemplate([
{label: "Actions", submenu: [
{label: "Open Google", click: (item, window, event) => {
//console.log(item, event);
top.win.show();
}},
]},
{type: "separator"},
{role: "quit"}, // "role": system prepared action menu
]);
top.tray.setToolTip("hello electrol");
//top.tray.setTitle("Tray Example"); // macOS only
top.tray.setContextMenu(menu);
// Option: some animated web site to tray icon image
// see: https://electron.atom.io/docs/tutorial/offscreen-rendering/
top.icons = new BrowserWindow({
show: false, webPreferences: {offscreen: true}});
top.icons.loadURL("https://trends.google.com/trends/hottrends/visualize");
top.icons.webContents.on("paint", (event, dirty, image) => {
if (top.tray) top.tray.setImage(image.resize({width: 16, height: 16}));
});
});
app.on("before-quit", ev => {
// BrowserWindow "close" event spawn after quit operation,
// it requires to clean up listeners for "close" event
top.win.removeAllListeners("close");
// release windows
top = null;
});
Yes, it is possible by using electron-process npm library.
ref :- https://www.npmjs.com/package/electron-process
First you will have to register the module which you want to run in background, just create simple background.html,
--background.html--
add below lines in script tag,
const background = require('electron-process').background;
background.registerModule(require('../main/snippets/SnippetsManager'));
In main process just create one browser window in which your background.html will run and keep it as hidden window,
--main.js--
app.once("ready", ev => {
service = new BrowserWindow({
width: 80, height: 60, center: true, minimizable: false, show: false,
webPreferences: {
nodeIntegration: false,
webSecurity: true,
sandbox: true,
},
});
service.loadURL("file://' + __dirname + '/background.html");
service.on("close", ev => {
ev.sender.hide();
ev.preventDefault(); // prevent quit process
});
});
Hope it helped,
Regards.
Electron is not designed to run in background. If you are closing
application then it will terminate all processes related with it.
Electron is only used to provide GUI layer. After all it is hybrid application and it doesn't interact with core OS services to live
itself like background service.
Apart from this there are two options:
If you write a service with something else, say a node or .net application, then you probably could use Electron to interact with that service (via bundled Node accessing Windows APIs).
Create feature like system tray. Minimise application to system tray.
Ref Link