I'm developing a quick proof of concept app using Electron (formerly known as atom-shell), while trying to debug it I popped the Dev tools to a separate window and it was working for a while until today. I can see the developer tools window in the windows task bar but when I click it nothing shows up.
I've tried restarting the computer, reinstalling atom, toggling developer tools via menu and Alt+Ctrl+I but the window is nowhere to be seen.
Here's the relevant code of my app, but I've tweaked it and it doesn't help either.
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if(process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({
'width': 450,
'height': 800,
'max-width': 450,
'max-height': 800,
'min-width': 450,
'min-height': 800
});
mainWindow.loadUrl('file://' + __dirname + '/app/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
I figured out how to make it appear, and in case this happens to anyone else I fixed it by just pressing win+up.
Related
TLDR: Best way to close a renderer window from main (or the renderer itself).
I am splitting up a process between X invisible renderer windows. When a renderer finishes its work, I want it to send an event to the main process and then close. Right now I have
//invisibleRenderer.js
doStuff().then(() => {
ipcRenderer.invoke('finish');
}
What is the best way to close the window? Is it in the ipcMain.handle? I can't figure out which method to call with which id.
ipcMain.handle('finish', (event, args) => {
//do what? event.frameId, event.processId, event.sender.id...
})
You can use BrowserWindow.fromId(event.sender.id) to get a reference to the window from where the IPC call originated, as demonstrated in this question.
This works fine in the main process. The following example opens 5 windows and loads the same contents. Each renderer script invocation picks a random delay (to simulate some work) and then dispatches the finish message to the main process. There, the main process picks up the BrowserWindow reference using event.sender.id and closes the corresponding window.
app.js
const {app, BrowserWindow, ipcMain} = require("electron");
const windows = [];
app.on("ready", function() {
for (let i=0; i<5; i++) {
let win;
win = new BrowserWindow( {
width: 300,
height: 300,
x: i*100,
y: i*100,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
},
});
win.loadURL(`file://${__dirname}/index.html`);
windows.push(win);
}
});
ipcMain.handle("finish", (event, args) => {
const win = BrowserWindow.fromId(event.sender.id);
win.close();
});
index.html
<html>
<body>
Renderer
</body>
<script type="text/javascript" src="renderer.js"></script>
</html>
renderer.js
const {ipcRenderer} = require("electron");
// Simulate some work by choosing a random delay..
const delay = Math.round(Math.random()*10000);
setTimeout(() => ipcRenderer.invoke("finish"), delay);
I have tried many things and can not seem to get the robotjs code to execute even with rebuild, and other examples I've seen to try.
I still get the Loading non-context-aware native module in renderer error.
I have a button, and on click of the button I want the robotjs code to be executed.
Here is my current code :
bot.js
const robot = require('robotjs')
const electron = require('electron')
const ipc = electron.ipcRenderer
const Bot = () => {
const button = document.getElementById('start');
// button.addEventListener('click', () => console.log('Click'))
button.addEventListener('click', function (e) {
// Get mouse position.
var mouse = robot.getMousePos();
// Get pixel color in hex format.
var hex = robot.getPixelColor(mouse.x, mouse.y);
console.log("#" + hex + " at x:" + mouse.x + " y:" + mouse.y);
});
}
Bot();
My main file :
index.js
const { app, BrowserWindow, ipcMain } = require('electron');
const robot = require('robotjs')
const path = require('path');
// const Bot = require('./bot')
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
});
// and load the index.html of the app.
mainWindow.loadFile(path.join(__dirname, '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, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 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 import them here.
Here is the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="App">
<div class="Header">
<h1>Checkout-Bot</h1>
</div>
<div class="Wrapper">
<p>Click Start</p>
<button id="start">Start</button>
</div>
</div>
<script src="bot.js">
Bot();
</script>
</body>
</html>
Have you read this issue on Github?
They removed the ability to use non-NAPI and non-context aware modules.
If you're not using Electron 11 yet, you can still use those modules, if you add the following line in the main process:
app.allowRendererProcessReuse = false
As an alternative solution, Try https://www.npmjs.com/package/#nut-tree/nut-js instead of robotjs. Electron (Last checked with 18.2.0) works well with nutjs.
Please refer to https://www.npmjs.com/package/#nut-tree/nut-js & https://nutjs.dev/docs/tutorial-first_steps/get_moving to see the documentation and working samples.
I have been following through a tutorial for Electron and I am using a html document in a new BrowserWindow as a pop-up. The problem is, when I use an onclick handler on a html tag, it doesn't seem to fire. If I open the developer tools, I can type my function into the console and it behaves as expected!
Not sure if I'm missing something really obvious here but would appreciate anyone who could help me solve the issue.
Here is the body tag from the html for BrowserWindow:
<body id="page-info">
<main class="info-content">
<h3 class="page-headline">Wisdom Pet</h3>
<p>Welcome to the Wisdom Pet App.<br>
<strong>Version 1.0.0</strong><br>
<small>Built with love by Ray Villalobos</small>
</p>
<p>close window</p>
</main>
<script type="text/javascript">enter code here
var electron = require('electron');
var shell = electron.shell;
var ipc = electron.ipcRenderer;
/* Also tried using event listeners without html onclick
var closeAbout= document.getElementById("closeAbout");
closeAbout.addEventListener("click", function(){
send();
});
*/
function send(){
console.log("sending...");
ipc.sendSync('closeInfoWindow')
}
</script>
And here is the main.js file:
var Electron = require("electron");
var Menu = Electron.Menu;
var BrowserWindow = Electron.BrowserWindow;
var app = Electron.app;
var ipc = Electron.ipcMain;
var myAppMenu, menuTemplate;
app.on("ready", function(){
var appWindow = new BrowserWindow({
show: false
});
appWindow.loadURL("file://" + __dirname + "/index.html");
var infoWindow = new BrowserWindow({
show: false,
width: 400,
height: 300,
frame: false,
transparent: true,
});
infoWindow.loadURL('file://' + __dirname + '/info.html');
appWindow.once("ready-to-show", function(){
appWindow.show();
});
ipc.on("openInfoWindow", function(event, arg){
event.returnValue = "";
infoWindow.show();
})
ipc.on('closeInfoWindow', function(event, arg){
event.returnValue = '';
infoWindow.hide();
}); //closeInfoWindow
});
The ipc.on("openInfoWindow") work fine from the main window, but once the infoWindow is open, I can't close it unless I send the code directly from the developer tools.
I have created a back button to take me to the previous page. See code bellow:
var backbutton = Titanium.UI.createButton({
title:'back',
bottom: 10,
left: 10,
zIndex:2
});
win3.add(backbutton);
I add a addEventListener to backbutton. See code bellow:
backbutton.addEventListener('click',function() {
var win = Titanium.UI.createWindow({
url:'alarmgroups.js',
title:'Sensor/Larm Objekt'
});
win.open({modal:true});
win3.close();
win3.hide();
});
Know I wonder what the problem could be.
When Im using the code above It makes the Application crash.
Im using zIndex on every .js page that I have in my project, but I dont know if Its right to do so.
I use win.open({modal:true}); and after that code I run win3.close(); and win3.hide();. win3 Its my current window.
Does anyone having a solution on how to create a back button for Android?
You have two native solutions to create a back button on android, the first one is adding a back button to the action bar:
To achieve this, you have to edit the android's action bar in the window's open event.
(Note: do not use modal:true while opening the window)
var window = Ti.UI.createWindow({
title: "test",
backgroundColor: "white",
});
window.addEventListener('open', function({
window.activity.actionBar.onHomeIconItemSelected = function() { window.close(); };
window.activity.actionBar.displayHomeAsUp = true;
});
window.open();
The second way, is overriding the android's back button of the current window.
var window = Ti.UI.createWindow({
title: "test",
backgroundColor: "white",
});
window.addEventListener('androidback', function({
window.close();
});
window.open();
Try this :
var win = Ti.UI.createWindow({
title:'Hello world',
backgroundColor:'#fff',
fullscreen:false
});
win.addEventListener('androidback',function() {
// do something
});
Also,here is the link : Android Back Button in Titanium.
Thanks.
i'm using phantom js to screen shot a page
http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering
it has a feature called clipRect
http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(object)
can someone show me how i would modify the following code to us clipRect so i only get a partial screenshot and not the whole thing?
if (phantom.state.length === 0) {
if (phantom.args.length !== 2) {
console.log('Usage: rasterize.js URL filename');
phantom.exit();
} else {
var address = phantom.args[0];
phantom.state = 'rasterize';
phantom.viewportSize = { width: 600, height: 600 };
phantom.open(address);
}
} else {
var output = phantom.args[1];
phantom.sleep(200);
phantom.render(output);
phantom.exit();
}
If you are trying to get a screenshot of a particular element, you could get the necessary information for clipRect from getBoundingClientRect as per the bottom of this article:
page.clipRect = page.evaluate(function() {
return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect();
});
From the fine manual:
clipRect (object)
This property defines the rectangular area of the web page to be rasterized when render() is invoked. If no clipping rectangle is set, render() will process the entire web page.
Example: phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
So try setting clipRect right before you call render:
var output = phantom.args[1];
phantom.sleep(200);
phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
phantom.render(output);
phantom.exit();
You'd have to figure out where the upper left corner (top and left) is and how big (width and height) you want the clipping rectangle to be.
You can probably set the clipRect any time before render() is called but start with that and see what happens.
What was happening is i was using brew and it was installing v 1.0.0 where clipRect and almost every other function wasn't supported as v 1.0.0 is the oldest version.
If you follow these instructions: http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X
then right click on the complied file and click show/view contents (on mac) then copy the executable bin/phantomjs.app/Contents/MacOS/phantomjs to some directory in your PATH.
Feel free to post on here i'm monitoring this and i can help if needed.