electronでRaspberryPiのGPIOを操作する

日付:


electronでRaspiのGPIOを操作する

前回はraspberry piでelectronを構築しました。

今回はgpioを操作とビルドを行います。

onoffとelectron-rebuildをインストール

npm install onoff
npm install --save-dev electron-rebuild

main.jsを書き換えます。

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

var Gpio = require('onoff').Gpio;
const output_gpio24 = new Gpio(24, 'out');
let input_gpio11 = new Gpio(11, 'in', 'both');


//input gpio
ipcMain.on('input-tomain', () => {
    input_gpio11.watch(function (err, value) {
        if (err) {
            console.log('There was an error' + err);
            throw err;
        }
        console.log('input : ' + value);
        mainWindow.webContents.send('input-torenderer', value)
    });
});

process.on('SIGINT', function () {
    console.log('Finished process');
    input_gpio11.unexport();
});



// output gpio
ipcMain.handle('output_gpio', (event, arg) => {
    console.log("output_gpio", arg);
    if (arg === 'ON') {
        output_gpio24.write(1);
        return 'output_gpio ON'
    }
    output_gpio24.write(0)
    return 'output_gpio OFF'
});



let mainWindow = null;
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        fullscreen: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        },
    })
    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()
    }
})

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>
    <button onclick="click_button()">button</button>
    <script src="./renderer.js"></script>
</body>
</html>

renderer.jsを作成します

const { ipcRenderer } = require('electron')

let button_status = false
function click_button() {
    if (button_status) {
        button_status = 0;
        gpio_invoke(24, 'OFF')
        return;
    }
    button_status = 1;
    gpio_invoke(24, 'ON')
    return;
}

//gpio ipc invoke main.jsへ送信
// level="ON" or "OFF"
function gpio_invoke(pin, level) {
    let returnval = ipcRenderer.invoke('output_gpio', level)
    //console.log("returnval = " + returnval)
    return;
}

let error_flug = false;
//main.jsからピン状態を受け取る
ipcRenderer.on('input-torenderer', (event, arg) => {
    //console.log(arg);
    if (arg == '1') {
        error_flug = true;
        return;
    } 
    error_flug = false;
    return;
});

node modeleをリビルドします。

npm install をするたびに行ってください。

./node_modules/.bin/electron-rebuild

起動させます。

npm start


ボタンのクリックによって、gpioがONOFFすることを確認できれば、完了です。



ビルドする

npm run build:raspi

ディレクトリを移動して、起動させます。

cd electron_gpio/electron_gpio-linux-armv7l
./electron_gpio

もし権限が足りていなければ、権限を与えます。

chmod +x electron_gpio

以上でGPIO操作とビルドは終了です。

今回の内容は

githubで公開してあります。ご参照ください。

https://github.com/HelloSmartFactory/electron_gpio

コメント

コメントを投稿