12. Electron.js – Основы. Electron API – process, screen

30 января, 2019 в 12:40

Категория: Electron.js / JavaScript

Продолжим рассматривать объекты и методы фреймворка 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 .

Теги :