Raspberry piにelectonをインストール

日付:

Raspberry piにelectonをインストール

1. nodeのバージョン

npm -v

6.14.17

node -v

v14.19.3

2. electronインストール

作業場所を作成して、移動します。

mkdir electron_gpio
cd electron_gpio

npm init -y
npm install --arch=armv7l --save-dev electron@latest
npm install electron-packager

electronのバージョンを確認します。

npx electron -v

v19.05

3. 初期設定をします。

package.jsonを書き換えます

electronのバージョンはご自身のバージョンに書き換えてください。
※testなんちゃらは削除して大丈夫です。

  "scripts": {
    "start": "electron .",
    "build:raspi": "electron-packager ./ electron_gpio --platform=linux --arch=armv7l --electron-version=19.0.5 --overwrite"
  },

package.jsonの ``` "main": "index.js", ```` を ``` "main": "main.js", ``` にします。

index.htmlを作成します。

sudo nano index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello Electron!</h1>
</body>
</html>

main.jsを作成します。

sudo nano main.js

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

let mainWindow = null;
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        fullscreen: true,
        webPreferences: {
        },
    })
    mainWindow.loadFile('index.html')
    //開発者ツールを表示
    mainWindow.webContents.openDevTools()
}

// 初期化時にwindowを作成
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});
app.on('activate', () => {
    //全画面表示
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

4. 起動テスト

npm start


コメント

コメントを投稿