A 2d or webgl canvas rendered using OffscreenCanvas could have some interesting performance benefits. I'm wondering if there is a way to enable it in the latest electron.
Setting the experimentalFeatures flag as discussed in this thread did not work.
The following console logs:
console.log('canvasNode', canvasNode)
console.log('transferControlToOffscreen', canvasNode.transferControlToOffscreen)
console.log('OffscreenCanvas', window.OffscreenCanvas)
Output this results:
And the way I am instantiating the browser window which logs this is:
win = new BrowserWindow({
width: 1200,
height: 700,
webPreferences: { experimentalFeatures: true }
})
Two links and a google later I found the answer on this github doc page
Since the offscreencanvas is a canvas related feature it is under a different flag called experimentalCanvasFeatures
In order to enable it I had to instantiate my browser window like so:
win = new BrowserWindow({
width: 1200,
height: 700,
webPreferences: { experimentalCanvasFeatures: true }
})
With experimentalCanvasFeatures instead of experimentalFeatures.
This resulted in the following console output:
Related
Is it possible to take a screenshot by passing coordinates and dimensions (like the output of getBoundingClientRect()) via Playwright?
Looking at their screenshots API, it seems I need to select a locator first, but the locator API doesn't seem to accept coordinates as arguments.
await page.locator('.header').screenshot({ path: 'screenshot.png' });
I believe the ability to screenshot specific co-ordinates are only available at page level by passing in the PageScreenshotOptions as an option:
await page.screenshot({ clip: {height: 100, width: 100, x: 0, y: 0 } });
I have a basic Electron/Svelte app and I'm trying to add database functionality using nedb. If I use let Datastore = require("nedb") I get an error, "Uncaught ReferenceError: require is not defined". The best advice I could find was to use import but using import Datastore from 'nedb' I get the error "Uncaught ReferenceError: util is not defined at main.js:6". thoughts?
Found it. nodeIntegration needed to be set to true in the parameters for new BrowserWindow()
mainWindow = new BrowserWindow({
width: 900,
height: 680,
webPreferences: {
nodeIntegration: true
}
});
I have an electron-application that is used to show webpages which I have no control over.
The app is used so a different page can be shown every few seconds.
One of the pages shown attaches an 'beforeunload' listener like so
window.addEventListener('beforeunload', function(event) {
event.returnValue="test";
});
This causes electron to fail when loading a new url, so the switching does not work anymore.
This is a known issue: https://github.com/electron/electron/issues/9966
Even worse, is also prevents the whole application from being closed.
Is there anything that can be done from the main process that removes/disables the beforeunload listener, so the switching works again?
To test this, I have a fiddle that shows this behavior:
https://gist.github.com/9a8acc3bf5dface09d46aae36807f6f9
You can simply prevent this event:
const { BrowserWindow, dialog } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
win.webContents.on('will-prevent-unload', (event) => {
event.preventDefault()
})
See Electron docs for details
I want to simulate a mobile device in desktop environment. I can't find a argument to transform mouse event to touch event.
How can I approach this job? Any hint will be great. Thank you so much.
I think I figured it out. Dev environment:
node 7.4.0
Chromium 54.0.2840.101
Electron 1.5.1
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
frame: false,
x: -1920,
y: 0,
autoHideMenuBar: true,
icon: 'assets/icons/win/app-win-icon.ico'
});
try {
// works with 1.1 too
mainWindow.webContents.debugger.attach('1.2')
} catch (err) {
console.log('Debugger attach failed: ', err)
}
const isDebuggerAttached = mainWindow.webContents.debugger.isAttached()
console.log('debugger attached? ', isDebuggerAttached)
mainWindow.webContents.debugger.on('detach', (event, reason) => {
console.log('Debugger detached due to: ', reason)
});
// This is where the magic happens!
mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
enabled: true,
configuration: 'mobile',
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
show: false,
backgroundColor: '#8e24aa ',
}));
// Show the mainwindow when it is loaded and ready to show
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
}
// Listen for app to be ready
app.on('ready', createWindow);
Take a look at this Electron github issue or this Atom Discussion for ideas on how to get the touch working with Electron.
As far as how to approach it, I would look through the mouse events and touch events and just wire up a function that combines the Electron api and the relevant web api for mouse/touch.
Looking at the web-contents API, the only thing you can do is to open the dev tools with:
// win being a BrowserWindow object
win.webContents.openDevTools();
Then you will have to manually click on the responsive tools (the smartphone icon), and you will get into the mode you want.
But I am afraid there is no way to do it programatically. Mostly because it is considered as a development tool, and not a browser feature, so you will have the toolbar at the top and all these things. Not really something you want on Production.
You can try to use Microsoft Windows Simulator. You need to install Visual Studio 2019 with Universal Windows Platform development then run the simulator through:
C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\16.0\Microsoft.Windows.Simulator.exe
I tested my electron app that also needs to run well both on touchscreen devices and devices without touch screen using this and it works really well to simulate touchscreen devices.
Do not forget to switch to touchscreen input on the right side of the panel, otherwise, the default input will simulate a mouse pointer.
I have integrated a tinymce editor in a rails project with active admin.
I spent almost a couple of hours looking for a way to align the editor to the right of my available space, as currently it's hiding the labels for it.
I have the following init js:
$(document).ready(function() {
tinyMCE.init({
mode: 'textareas',
align: 'right',
width: '80%',
height: 200,
autoresize_min_height: 200,
autoresize_max_height: 400,
resize: 'both',
plugins : 'advlist autolink link image lists charmap print preview'
});
});
Read much of the TinyMCE4 documentation and couldn't find a way to align the window to the right. My attempts to override the css class for this are as well no successful.
Could you please give me an advice. Does someone know how to deal with the alignment via the js init?
Here's the screenshot: http://betasve.com/wp-content/uploads/2014/09/TinymceProblemAA.png
Thank you in advance.
Try this in active_admin.css.scss:
.mce-tinymce {
margin-left: 215px !important;
+
Complementing the answer make by nistvan, works better with:
.mce-tinymce { margin-left: 20% !important;}