I'm creating a 600 x 300 window in Electronjs and I want to get the cursor position all over the screen, even if the cursor is outside the window. How can I do this?
My window:
let win = new BrowserWindow({
width: 600,
height: 300,
transparent: true,
show: false,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
nodeIntegrationInWorker: true,
},
})
I am getting the position this way, but if I move the cursor outside the window it stops working (The windows is focused).
ipcMain.handle('getPoint', async(event, someArgument) => {
const point = screen.getCursorScreenPoint()
return point
})
Related
I am trying to make a window application in Electron.js. When I run it, it makes preload.js script:
const mainWindow = new BrowserWindow({
width: 500,
height: 500,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
});
I want a new window with a loading indicator to appear till preload.js not finish. How can I reach it?
create first the loading window like this:
loadingWindow = new BrowserWindow({
width: 512,
height: 384,
resizable: false,
transparent: true,
frame: false,
})
loadingWindow.loadFile('views/loading.html')
make shure that you clear this window if you close it
loadingWindow.on('closed', function () {
loadingWindow = null
});
than create your main window but hide it
const mainWindow = new BrowserWindow({
width: 500,
height: 500,
show: false, // hide this window
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
});
mainWindow.loadFile('yourFile.html');
than get the did-finish-load event to close the loading window and show the mainWindow
mainWindow.webContents.on('did-finish-load', () => {
if (loadingWindow) loadingWindow.close();
mainWindow.show();
})
so I'm writing on a electron application at the moment.
To make my application a bit smoother I created a BrowserWindow and loaded just the menubar and the background.
After that I added a BrowserView to show the acutal content.
Code for my BrowserWindow:
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
show: false,
frame: false,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile(path.join(__dirname, 'views/index.pug'));
win.on('closed', () => {
win = null;
})
win.once('ready-to-show', () => {
win.show();
})
}
Code for my BrowserView:
function createViews() {
contentView = new BrowserView({ webPreferences: { nodeIntegration: true } });
win.addBrowserView(contentView);
contentView.setBounds({ x: 0, y: 23, width: win.getBounds().width, height: win.getBounds().height - 23 });
contentView.setAutoResize({ width: true, height: true });
contentView.webContents.loadFile(path.join(__dirname, 'views/imageGallery.pug'));
}
(If there is a spoiler function to hide the code: I'm sorry, I didn't find any)
Once I create the window it works like intended, also the normal resize via mouse-drag works perfectly.
Now my problem is, as soon as I maximize or unmaximize my window with the functions win.maximize() and win.unmaximize() my BrowserView gets resized. But the resize doesn't fit the BrowserWindow anymore. The content of the BrowserView is being cutted on the right side.
Window after being maximized:
Window after being unmaximized:
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({ useContentSize: true });
const view = new BrowserView();
mainWindow.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 800, height: 600 });
view.setAutoResize({ width: true, height: true });
view.webContents.loadURL("https://youtube.com");
}
I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......
I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin
For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.
I am trying to show the window after the URL and everything inside that page is loaded. This is the script:
var loadWindow = new BrowserWindow({
width: 500,
height: 300,
frame: false,
resizable: false,
fullscreen: false,
scrollbars: false,
show: false
})
loadWindow.loadUrl('file://' + __dirname + '/index.html')
What I tried:
loadWindow.on('ready', function(){
loadWindow.show()
})
I also tried to on('loaded'), but none of these is working. What is the best solution to load a URL inside a page and display it only after everything is loaded?
I have a dialogbox that shows the contents of an HTML file.
In this file there is a href link at the bottom.
Now everytime the dialog is shown, it automatically scrolls to that link and sets focus to it.
How can I set the scroll position back to the top after the dialog shows?
Here is the jquery code:
<script type="text/javascript">
$(function()
{
$('#faq1_pnM').dialog(
{
title: 'Frequently asked questions',
autoOpen: false,
modal: true,
show: 'puff',
hide: 'puff',
open: function() {
var e1 = $(this);
var scrollY = this.scrollHeight;
e1.scrollTop(scrollY);
e1.parent().queue(function(next) {
e1.scrollTop(scrollY);
next();
});
},
resizable: false,
closeOnEscape: true,
width: '650',
height: '500',
minWidth: '500',
minHeight: '500'
}).dialog('open');
});
</script>
As you can see, I tried with the open: function... stuff, but that doesn't do the trick.
Did I miss something?
Found the solution:
I removed the scrollY variable and replaced it for 0 (zero).