Продолжим рассматривать объекты и методы фреймворка Electron. В этот раз изучим возможности, которые предоставляют такие объекты как process и screen. Объект process является расширенной версией объекта Node.js process , его можно вызывать как в главном так и в renderer процессах. Объект screen предоставляет информацию о размере экрана, дисплеях, позиции курсора.
process
Примеры использования – process
main.js
1 2 3 4 5 | console.log('Process Type - ', process.type); console.log('Electron Version - ', process.versions.electron); console.log('Chrome (Chromium) Version - ', process.versions.chrome); console.log('Resource Path - ', process.resourcesPath); console.log(process.getSystemMemoryInfo()); |
renderer.js
1 2 3 4 5 | console.log('Process Type - ', process.type); console.log('Electron Version - ', process.versions.electron); console.log('Chrome (Chromium) Version - ', process.versions.chrome); console.log('Resource Path - ', process.resourcesPath); console.log(process.getSystemMemoryInfo()); |
Подключаем слушатель на событие ‘сrashed’, если оно происходит приложение перезагрузится
1 2 3 4 5 6 7 8 | // main.js mainWindow.on('crashed', () => { console.log('MainWindow Renderer Process Crashed. Reloading'); mainWindow.reload(); }) // renderer.js setTimeout(process.crash, 5000) |
Устанавливаем кнопку в index.html, по клику будет появляться сообщение “Hello”, но через 5 секунд кнопка теряет свою работоспособность.
1 2 3 4 5 6 7 8 | // index.html <button onclick="alert('Hello!')">Greet</button> // renderer.js setTimeout(() => { console.log('hanging'); process.hang(); }, 5000) |
screen
Пример получения информации о мониторе, где запущена программа
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const electron = require('electron') const displays = electron.screen.getAllDisplays(); // Выведет информацию о разрешении монитора console.log(displays[0].size.width, displays[0].size.height); // Для отображения нужен второй монитор // console.log(displays[1].size.width, displays[1].size.height); console.log(displays[0].bounds.x, displays[0].bounds.y); // Для отображения нужен второй монитор // console.log(displays[1].bounds.x, displays[1].bounds.y); // Сработает при изменении размеров монитора electron.screen.on('display-metrics-changed', (event, display, changeMetrics) => { console.log(display); console.log(changeMetrics); }) |
Пример получения координат при клике курсором мыши
1 2 3 4 5 6 7 8 9 10 11 12 | // index.html <body onclick="showClickPoint()"> <!-- Контент --> </body> <script> const electron = require('electron'); function showClickPoint() { // Выведет в консоли объект с координатами, где кликнули курсором console.log(electron.screen.getCursorScreenPoint()); } </script> </body> |
Пример настроек для открытия окна на ширину и высоту монитора
1 2 3 4 5 6 7 8 9 10 11 | const electron = require('electron'); // Получаем размеры и координаты монитора const display = electron.screen.getPrimaryDisplay(); // Создаем окно браузера. mainWindow = new BrowserWindow({ width: display.size.width, height: display.size.height, x: display.bounds.x, y: display.bounds.y, }) |
Методов и параметров значительно больше чем рассмотрено здесь, для поиска необходимого решения лучше всего обратиться к документации – process и screen.
Здесь можно более детально рассмотреть проект на GitHub с установленными настройкам и дополнениями – https://github.com/NetWorkRoom/electron-start/tree/process .