月: 2022年4月

ラズパイ4 + Node.jsで OLEDディプレイを使う

OLEDモジュールをラズパイ4＋Node.js環境で使うための覚え書。

作業環境

作業手順

1.OLEDディプレイを繋ぐ
2.Config画面を開いて、I2Cデバイスとの通信を有効化
$ sudo raspi-config

Interfacing Options -> P5 I2C -> YES

3.ラズパイをリブート
$ sudo reboot
4.I2Cデバイスのアドレスを確認
$ i2cdetect -y 1

     0  1  2  3  4  5  6  7  8  9  a  b  c  d  e  f
00:          -- -- -- -- -- -- -- -- -- -- -- -- --
10: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
20: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
30: -- -- -- -- -- -- -- -- -- -- -- -- 3c -- -- --
40: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
50: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
60: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
70: -- -- -- -- -- -- -- --
5.モジュールをインストール

$ npm install raspi-io
$ npm install johnny-five
$ npm install oled-js
$ npm install pngparse png-to-lcd oled-font-5x7
6.スクリプトを作成
const five = require('johnny-five');
const raspi = require('raspi-io').RaspiIO;
const board = new five.Board({
	io: new raspi()
});

const Oled = require('oled-js');
const font = require('oled-font-5x7');

board.on('ready',() => {
	console.log('Connected to OLED, ready.');
	const opts = {
		width: 128,
	    height: 64, 
	    address: 0x3C
	};
	oled = new Oled(board, five, opts);
	oled.clearDisplay();
	oled.setCursor(1, 1);
	oled.writeString(font, 1,"Hello World!", 1, true, 2);
	oled.update();
});
7.スクリプトを実行
$ node ./index.js

おしまい！

参考サイト

ESP32-CAMのStream動画をA-FrameのVR空間に表示する

M5Camera Xの動画をA-FrameのVR空間内に表示させたいと思ったが、Motion JPEG stream形式だと、デフォルトの機能（image、video）では対応できなかった。

で、調べたところドンピシャのページを発見。仕組みはよく分からんけど、サンプル通りのコンポーネント作ったらすんなり表示できた！！

>> Use Motion JPEG stream as a source of 360 deg image

AFRAME.registerComponent('box', {
    schema: {
        width: { type: 'number', default: 1 },
        height: { type: 'number', default: 1 },
        depth: { type: 'number', default: 1 },
        color: { type: 'color', default: '#AAA' }
    },

    init: function () {
        var data = this.data;
        var el = this.el;

        this.loader = new THREE.TextureLoader();

        this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);
        this.material = new THREE.MeshPhongMaterial({
            map: this.getImage()
        });
        this.material.needsUpdate = true;
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        el.setObject3D('mesh', this.mesh);
    },

    tick: function (time, timeDelta) {
        this.mesh.material.map.img = this.getImage();
        this.mesh.material.map.needsUpdate = true;
    },

    getImage: function() {
        return this.loader.load("ストリーム動画のパス");
    }

サンプルでは立方体だが、下記の部分をいじれば、他のプリミティブでもいける。

this.geometry = new THREE.BoxBufferGeometry(data.width, data.height, data.depth);

synology NAS Web Stationのhtml内でphpを実行する。

完全に自分めも

1.sshでNASにログインする

2. /var/packages/Webstation/target/misc/VirtualHost-apache24.mustache を編集
<FileMatch “＼.(php[345]? | phtml|html)$”>

htmlを追加

3.php72_fpm_mustache を編集
security.limit_extension = .php .php3 .php4 .php5 .phtml .html

.htmlを追加

4. 管理画面のパッケージセンターでApacheとphpを再起動

Apache PHPともに複数バージョン入れている場合はすべて対応が必要。
新しいパッケージを追加して処置を忘れていると access denied.のエラーになる。
DSMのバージョンアップした際も同じく処理が必要。