Статьи с меткой: Electron.js

15. Electron.js – Основы. Electron API – Online/Offline Status, Battery Status

31 января, 2019 в 12:21

Это последняя заметка в которой я рассматриваю Electron API, здесь будут показана реализация отслеживания online и offline состояния сети и Battery Status – состояние батареи если приложение запускается на ноутбуке. Online и offline события состояния сети и Battery Status являются частью стандартного API в HTML5.

Online/Offline Status

main.js

const { app, BrowserWindow } = require('electron')

let onlineStatusWindow

app.on('ready', () => {
  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
  onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)
})

const { app, BrowserWindow } = require('electron')

let onlineStatusWindow

app.on('ready', () => {

onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })

onlineStatusWindow.loadURL(`file://${__dirname}/online-status.html`)

})

Узнать больше

14. Electron.js – Основы. Electron API – clipboard, Закадровый рендеринг

31 января, 2019 в 12:00

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

Продолжим рассматривать объекты Electron API, в данной заметке представлю объект clipboard и покажу как можно использовать закадровый рендеринг при реализации проектов. clipboard – выполняет копирование и вставку в буфер обмена операционной системы, на которой запущена программа. Закадровый рендеринг позволяет получить содержимое окна браузера в растровом изображении, поэтому его можно отобразить в любом месте, например, на текстуре в 3D-сцене.

clipboard

Примеры работы с буфером обмены системы

const { clipboard } = require('electron')
// Текст будет записан в clipboard
clipboard.writeText('Text from Electrom Renderer')
// Текст будет взят из clipboard
console.log(clipboard.readText())

const { clipboard } = require('electron')

// Текст будет записан в clipboard

clipboard.writeText('Text from Electrom Renderer')

// Текст будет взят из clipboard

console.log(clipboard.readText())

Узнать больше

13. Electron.js – Основы. Electron API – shell, nativeImage

30 января, 2019 в 1:05

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

В этот раз рассмотрим еще два объекта Electron API – shell и nativeImage. Объект shell обеспечивает управление файлами и URL, используя стандартные приложения для их открытия. Модуль shell предоставляет функции, относящиеся к десктопной интеграции. Объект nativeImage необходим для работы с изображениями, обеспечивает их подключение и конвертацию в различные форматы.

shell

Пример открытия ссылки в стандартном браузере пользователя:

const { shell } = require('electron')
shell.openExternal('https://github.com')

1 2	const { shell } = require('electron') shell.openExternal('https://github.com')

Узнать больше

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

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());

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

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());

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());

Узнать больше

11. Electron.js – Основы. Electron API – webFrame, тег webview

28 января, 2019 в 11:39

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

Рассмотрим еще две интересные возможности, которые нам предоставляет Electron API, это возможность загружать внутри рендерер-процесса дочерние рендерер-процессы (за это отвечает тег <webview>) и возможность управлять отображением контента в окне (за это отвечает webFrame).

webFrame

Первый пример использования webFrame
Увеличение или уменьшение размера контента в окне приложения.

<!-- Создаем разметку в index.html -->
<h1>webFrame</h1>
<img src="http://placehold.it/200x150" alt="">
<hr>
<button id="zoom_up">Увеличить</button>
<button id="zoom_down">Уменьшить</button>
<button id="zoom_reset">Вернуть</button>

<h1>webFrame</h1>

<hr>

<button id="zoom_up">Увеличить</button>

<button id="zoom_down">Уменьшить</button>

<button id="zoom_reset">Вернуть</button>

Узнать больше

10. Electron.js – Основы. Electron API – ipcMain и ipcRenderer

24 января, 2019 в 2:42

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

В прошлой заметке я рассмотрел возможность вызова методов и возможность создания дочерних окон из рендер-процесса , в этот раз опишу еще два класса ipcMain и ipcRenderer, которые используются для организации взаимодействия между программной частью приложения и функционалом Электрона. Их часто используют для создания управления функциями приложения через главное (меню в шапке) или контекстное меню.

Первый вариант
В этой реализации будет работать только один канал
Файл – main.js

// ipcMain подключаем в main.js 
const { app, BrowserWindow, ipcMain } = require('electron');

// Создаем слушателя события для получения данных из renderer
ipcMain.on('channalOne', (event, args) => { 
  console.log(args);

  // Отправляем сообщение в renderer процесс
  event.sender.send('channalOne','Message resieved on the main process')
})

// ipcMain подключаем в main.js

const { app, BrowserWindow, ipcMain } = require('electron');

// Создаем слушателя события для получения данных из renderer

ipcMain.on('channalOne', (event, args) => {

console.log(args);

// Отправляем сообщение в renderer процесс

event.sender.send('channalOne','Message resieved on the main process')

})

Узнать больше