2021年2月 – てまりのユニバーサルデザイン

2021年2月28日2021年2月27日

ブログの習慣化で心穏やかに過ごす

公開中のブログが500件を越えました。最近は自分の習慣としてブログを書くことが根付いてきたような気がします。ブログを続けて特に良かったことは、心穏やかに過ごせるようになったことです。

ブログを書く３つの目的

私がブログを書く目的です。

情報発信
技術・デザインのスキルアップ
心穏やかに過ごす

情報発信

昔働いていた会社の上司から情報発信の大切さを教えられ、このブログを始めました。

役立ちそうな情報は、個人や会社にとどめるよりも、社会で共有したほうが良いと言われます。

実際自分もGoogle検索に引っ掛かる多くの情報に助けられ、仕事をしてきました。自分も社会に情報を還元しましょう。

記事を書いていると、年間1万ビューを越えて利用される記事もあれば、3ビューしかないような記事もあります。

ただ、ほとんど見られない記事でもピンポイントで役立つこともあり、コメントが書き込まれる場合もあります。

「社会に役立つ情報」と自分が考えても、意外と何が役立つか分からないし、ページビューが少なくても役立つことはあります。

とにかく質より量を出すことが大事かと思います。

技術・デザインのスキルアップ

発信と同時に、自分のスキルアップも目的としていました。

技術やデザインの記事を書くことで、時代に取り残されないようにします。

ブログに書くために技術を学び、忙しくても強制的に技術を学ぶ仕組みとなります。

時間が無くなりそうに見えて、逆に時間の余裕ができます。

忙しくて技術やデザインを学ぶ時間を後回しにすると、より仕事の効率が悪くなります。逆に前もって知識を蓄積したほうが、時間を作れます。

その時間でブログを書く時間も捻出できるでしょう。

また、ありがたいことに技術レベルの低い記事を書くと、「こうした方が良いんじゃない？」といった指摘を頂くこともあります。

自分だけではハマる問題を、解決してもらえることもあります。

しかし・・・やはり途中でブログが続かなくなり、更新頻度が落ることもありました。

心穏やかに過ごす

ブログが習慣化したのは最近です。237日前から、236日更新しています。（微妙に毎日更新ではありません。）

ブログ継続を始めたのは、妻が入院してから。心穏やかに過ごすことが目的になってからです。

妻が1か月いない状況で4人の子供を育てながら、長時間労働になりがちなWeb業界で働いていると、イライラしてしまうだろうと予想しました。

解決方法として、日々の出来事を文書化し、客観的に見ることで、イライラを他人事にしようと考えました。その手段としてブログ更新は最適です。

子供がふざけて物を壊しても、プログラミングでハマって頭を抱えても、デザインがうまく決まらず壁にぶつかっても・・・ブログのネタになると思えば気が楽になります。

ネタに困らないことに気づく

子育ても技術もめまぐるしい変化の連続なので、ネタに困ることはありません。（デザインは比較的変化が緩やかです。）

ブログを書くことを前提に生活していると、ネタ探しをするようになり、結果的に子供や技術にアンテナが向くようになります。

前述のように、技術は先回りして知識があったほうが時間の余裕ができ、より心穏やかに過ごせる時間が長くなるでしょう。

心穏やかに過ごす時間を増やすことが、ブログ継続の目的になっている気がします。

ただ習慣化してくると、目的意識自体がなくなってきて、ただなんとなくブログを更新している感じになります。

それが習慣というものなので、良い状態だと思います。

2021年2月27日2021年2月26日

親切！ラズパイ用7インチタッチディスプレイケース

ラズパイ用の7インチタッチディスプレイケースがあります。組み立ててみると、非常に親切にできていることに驚きました。

ラズパイ4とタッチディスプレイケース

ラズパイ4を購入しました。合わせてケースとディスプレイと冷却ファンが欲しいと思ったとき、良い商品がありました。

7インチタッチパネルディスプレイと冷却ファンの一体型ケースです。ラズパイ4だけでなく、3でも利用できます。

UPERFECTという中国のブランドで、説明書は若干分かりにくいところもありますが、それでも親切にできています。

組み立ては簡単なので、説明書なしでも組み立てられます。

フタを開ける

ねじ止めされたケースのふたを開けます。ドライバーが付属しており、すぐに開けられます。

USBとHDMIにコネクタを挿す

タッチパネルはUSB接続か、はんだ付けを選べます。

手軽なUSB接続と、配線をスッキリさせるはんだ付けを選べるところが良いです。

今回は簡単にUSBに挿しました。USBを抜けばタッチ不要なときに消費電力を抑えられるかもしれません。

電源用Type-Cコネクタと、HDMI-Dコネクタもそれぞれ挿します。

コネクタに分かりやすく「Type-C」と書いてあるのが親切です。

ラズパイをケースに取り付ける

最後にラズパイをケースにねじ止めする作業です。

ここで注意があります。

ラズパイをねじ止めしてしまうと、SDカードを入れることが非常に困難になります。

ケースとラズパイ同時購入の場合、ねじ止め前にOSをインストールしたSDカードを挿しましょう。

あと個人的なミスですが、タッチパネルのコネクタをケース側につなぐ前に、側面のボードを付けるのを忘れました。

側面ボードは2つあり、ラズパイ4用は「PI4」と書かれています。

このブランド、かなり親切です。

ACアダプターを挿すと起動

トラブルなくラズパイ4が起動し、ディスプレイが映りました。

思ったよりファンの音が大きいです。

説明書を改めて読むと、ファンはディスプレイ上にある設定ボタンから、ON／OFFを切り替えられるようです。

軽い処理をするときや、部屋が寒い時は、OFFでも良いかもしれません。

組み立てのしやすさ、程よい選択肢。

とても親切なタッチディスプレイケースだと思います。

2021年2月26日2021年2月25日

ホットカーペットの修理※消費電力の小さいもの

1人用ホットカーペットが壊れました。スイッチを入れても温かくなりません。昔なら捨てていますが、電子工作を学んだおかげで、修理して使うことができるようになりました。

2か月前に買ったばかり

Amazonで「アイリスオーヤマホットマット 60×60cm ブラウン HCM-60S-T」を2か月前買いました。

すぐに壊れたのは製品の問題でなく、うちの家庭の問題です。

男の子４人、ガサツであらゆるものが壊れていきます。

たぶん、カーペットを無理に引き延ばしたとかで、断線したのだと思います。

スイッチ部分のネジを外して、分解しましょう。

※分解する前に電源コードを抜いていることを確認しています

消費電力に注意

ホットカーペットの修理は、基本的に素人が手を出してはいけません。

私も電子工作独学の素人同然なのですが、消費電力で判断して修理します。※自己責任で

3畳用の1000Wホットカーペットは絶対に手を出してはいけません。

しかし今回の72Wのホットカーペット（ホットマット）であれば、家電としても消費電力が低い方です。

100W以下なら火災リスクが限りなく低いと判断しましたが、あくまで感覚知です。

万全を期するなら防炎スプレーをカーペットに噴射してもよいかもしれません。

断線していた

分解して基板を確認したところ、配線の一部が断線していました。

はんだ付けで直せそうです。

はんだで断線したコードをつなぎました。

修理完了

電源を入れてみると、ホットカーペットが温かくなりました。修理完了です。

子供がいる家庭だと、家電やオモチャが高確率で壊れると思います。

何度も自分で修理する機会があれば節約になります。また、修理して物を長く扱えることを子供に伝えられます。

そもそも物を壊さないよう、大切に扱うことを、子供たちに伝える必要があるでしょう・・・。

ただ、親が修理できるスキルを持つと、感情的に子供を怒る確率は減るのが良いところです。

「壊した！？買ったばかりでOOOO円もしたんだぞ！弁償だぁ！」
↓
「壊した？直そうか。壊れた原因は無理に基板付近のカーペットを引っ張ったこと。中で断線が起こったんだ。修理を手伝って。」

と、変わります。

2021年2月25日2021年2月22日

Node.jsとブラウザでWebカメラの写真をローカルに保存

ブラウザで動くWebカメラアプリを作ります。撮影した写真をNode.jsでローカルサーバーに保存していきます。

開発環境

OS：raspbian 10.7（WindowsやMacでも問題ないと思います）
Node.js 10.21.0

Node.js モジュール

fs
Express
Socket.IO

撮影から保存までの流れ

Webカメラで撮影
↓
カメラ映像をcanvasに転写
↓
保存ボタンが押されたら、canvas画像をbase64にエンコード
↓
base64（画像をテキスト化したもの）をWebSocketでNode.jsサーバーに送信
↓
Node.jsサーバーで受信したbase64データをデコード
↓
デコードした画像を任意の場所に保存

まずはWebカメラ設置

最初にWebカメラの設置します。（もちろん端末内臓カメラでもOKです）

画質やフォーカス性能は、Webカメラの性能次第になります。

今回はモルモットのケージにカメラを取り付けました。

Node.jsのコード

Node.jsでExpressを使い、Webサーバーにしています。

Socket.IO（WebSocket）で受信したbase64データをデコードし、「record」ディレクトリに画像の保存します。

const express  = require('express');
const app  = express();
const http = require('http').createServer(app);
const io   = require('socket.io')(http);
const PORT = 3000;
const fs = require('fs');

const init = () => {
  app.use(express.static('htdocs'));

  io.on('connection', (socket) => {
    socket.on('recImg', (data) => {
      saveImg(data);
    });
  });

  http.listen(PORT, () => {
    console.log(`接続ポート ${ PORT }`);
  });
};

const saveImg = (data) => {
  const base64 = data.img.split(",")[1];
  const decode = new Buffer.from(base64,'base64');
  fs.writeFile(`record/${data.date}.jpg`, decode, (err) => {
    if(err){
      console.log(err);
      io.emit('msg', '保存失敗');
    }else{
      console.log(`${data.date}.jpgで保存`);
      io.emit('msg', '保存完了');
    }
  });
};

init();

const express = require('express');

const app = express();

const http = require('http').createServer(app);

const io = require('socket.io')(http);

const PORT = 3000;

const fs = require('fs');

const init = () => {

app.use(express.static('htdocs'));

io.on('connection', (socket) => {

socket.on('recImg', (data) => {

saveImg(data);

});

http.listen(PORT, () => {

console.log(`接続ポート ${ PORT }`);

});

};

const saveImg = (data) => {

const base64 = data.img.split(",")[1];

const decode = new Buffer.from(base64,'base64');

fs.writeFile(`record/${data.date}.jpg`, decode, (err) => {

if(err){

console.log(err);

io.emit('msg', '保存失敗');

}else{

console.log(`${data.date}.jpgで保存`);

io.emit('msg', '保存完了');

}

});

};

init();

「htdocs」ディレクトリ内にindex.htmlを置くと、http://localhost:3000/でアクセスできます。

このindex.htmlにカメラアプリのフロント側コードを書きます。

フロント側のHTMLコード

Webカメラ映像をcanvasに転写します。そしてページ上の保存ボタンが押されたら、canvas画像をbase64にエンコードします。

次に、base64画像をWebSocketでNode.jsサーバーに送信しています。その時あわせて撮影日時を「年-月-日T時分秒」で送信します。

撮影日時をファイル名に使えば、保存した画像の上書きは防げます。（1秒以内に連写しなければ）

<html>
<head>
  <title>Node.jsで画像を保存</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js"></script>
</head>
<body>
<main>
  <canvas id="canvas" width="1280px" height="720px"></canvas>
  <video id="camera" width="1280px" height="720px" style="display:none;"></video>
  <!--低解像度-->
  <!--
    <canvas id="canvas" width="640px" height="480px" style="display:none;"></canvas>
    <video id="camera" width="640px" height="480px"></video>
  -->
  <button type="button" id="btn">保存</button>
</main>
<script>
  const socket = io();
  const $btn = $('#btn');
  const camera = document.getElementById('camera');
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  const init = () => {
    setCamera();
    setSocket();
    setBtn();
  };

  const setCamera = () => {
    // カメラ起動
    const constrains = { video: {width: 1280, height: 720}, audio: false };
    navigator.mediaDevices.getUserMedia(constrains)
    .then((stream) => {
      camera.srcObject = stream;
      camera.play();
      drawCanvas();
    });
  };

  const drawCanvas = () => {
    const draw = function(){
      ctx.drawImage(camera, 0, 0);
    }
    setInterval(draw, 100);
  };

  const setSocket = () => {
    socket.on('msg', (val) => {
      $btn.text(val);
    });
  };

  const setBtn = () => {

    const getNow = () => {
      let dt = new Date(),
          y = dt.getFullYear(),
          m = ('00' + (dt.getMonth()+1)).slice(-2),
          d = ('00' + dt.getDate()).slice(-2),
          h = ('00' + dt.getHours()).slice(-2),
          min = ('00' + dt.getMinutes()).slice(-2),
          s = ('00' + dt.getSeconds()).slice(-2);
      return `${y}-${m}-${d}T${h}${min}${s}`;
    };

    $btn.on('click', function(){
      $btn.text('保存中…');
      let data = {
        "date": getNow(),
        "img": canvas.toDataURL("image/jpeg")
      };
      socket.emit('recImg', data);
    });
  };

  init();
</script>
</body>
</html>

<html>

<head>

<title>Node.jsで画像を保存</title>

</head>

<body>

<main>

<!--

-->

</main>

const socket = io();

const $btn = $('#btn');

const camera = document.getElementById('camera');

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const init = () => {

setCamera();

setSocket();

setBtn();

};

const setCamera = () => {

// カメラ起動

const constrains = { video: {width: 1280, height: 720}, audio: false };

navigator.mediaDevices.getUserMedia(constrains)

.then((stream) => {

camera.srcObject = stream;

camera.play();

drawCanvas();

});

};

const drawCanvas = () => {

const draw = function(){

ctx.drawImage(camera, 0, 0);

}

setInterval(draw, 100);

};

const setSocket = () => {

socket.on('msg', (val) => {

$btn.text(val);

});

};

const setBtn = () => {

const getNow = () => {

let dt = new Date(),

y = dt.getFullYear(),

m = ('00' + (dt.getMonth()+1)).slice(-2),

d = ('00' + dt.getDate()).slice(-2),

h = ('00' + dt.getHours()).slice(-2),

min = ('00' + dt.getMinutes()).slice(-2),

s = ('00' + dt.getSeconds()).slice(-2);

return `${y}-${m}-${d}T${h}${min}${s}`;

};

$btn.on('click', function(){

$btn.text('保存中…');

let data = {

"date": getNow(),

"img": canvas.toDataURL("image/jpeg")

};

socket.emit('recImg', data);

});

};

init();

</script>

</body>

</html>

Webカメラの解像度は、端末スペックにより調整してください。

ラズパイ３で720p画像だと、処理が追い付かないのか、たまに荒れます。

あまり動きのないものを撮影する場合は、フレームレート（canvas転写頻度）を落としても良いでしょう。

setInterval(draw, 100);の数字を変更すると、撮影間隔が変わります。

実際に保存された写真

「2021-02-22T085213.jpg」という名前で保存されました。

余談ですが、モルモットが寝ているところを初めてみました。近づくと目を開けるため、いつ寝ているか分かりませんでした。

タイムラプスや防犯カメラ、機械学習に

今回、写真撮影のトリガーは「保存」ボタンでした。

ラズパイを常時稼働させている場合、トリガーを変えれば、さまざまな使い方ができるでしょう。

例えば植物の成長記録。タイマーをトリガーにして毎時間経過を撮影し、写真をつなげてタイムラプスにもできます。

人感センサーと組み合わせれば、防犯カメラにもなるでしょう。

タイマーやセンサーと組み合わせ、機械学習用の画像を蓄積していくのにも向いていると思います。

私の場合はラズパイのサーマルカメラで体温を毎朝測るので、その際顔の写真を保存して、健康状態（目の下のクマの様子など）を検証しようと思います。

2021年2月24日2021年2月21日

ラズパイディスプレイをNode.jsでON／OFF

常時稼働中のラズパイで、Node.jsを使ってディスプレイのON／OFFを制御します。ディスプレイを見ることがない夜間は電源OFFにするなど、節電に利用できます。

開発環境

Raspberry Pi 3 Model B+
OS：raspbian 10.7
Node.js 10.21.0

Node.js モジュール

child_process

シェルコマンドでディスプレイ制御

ラズパイのディスプレイは、シェルコマンドでON／OFFを切り替えられます。

ディスプレイON

tvservice -p && fbset -depth 8 && fbset -depth 32 && xrefresh -d :0.0

1	tvservice -p && fbset -depth 8 && fbset -depth 32 && xrefresh -d :0.0

ティスプレイOFF

tvservice -o

1	tvservice -o

シェルコマンドをNode.jsから実行できれば、任意のタイミングでディスプレイのON／OFFを切り替えられるようになります。

シェルコマンドをNode.jsで実行

child_processモジュールを使うことで、Node.jsからディスプレイ制御ができるようになります。

ディスプレイの電源をOFFにして、3秒後にONにするコードは下記です。

const execSync = require('child_process').execSync;

execSync('tvservice -o').toString();

function displayON() {
  execSync('tvservice -p && fbset -depth 8 && fbset -depth 32 && xrefresh -d :0.0').toString();
}

setTimeout(displayON, 3000);

const execSync = require('child_process').execSync;

execSync('tvservice -o').toString();

function displayON() {

execSync('tvservice -p && fbset -depth 8 && fbset -depth 32 && xrefresh -d :0.0').toString();

}

setTimeout(displayON, 3000);

これで動作確認ができると思います。

実用では、Node Cronを使って〇時にディスプレイONや、光センサーで暗くなったらディスプレイOFFなど、タイマーやセンサーと組み合わせて使うと良いでしょう。

2021年2月24日2021年2月22日

Node.jsでブラウザからCSVを保存する

ブラウザのHTMLに入力した値を、Node.js経由でCSVに記録します。Webページの「記録」ボタンを押すと、現在時刻と温度が記録されるサンプルを作りました。Node.jsモジュール「CSV Writer」を使うと簡単に実現できます。

開発環境

OS：raspbian 10.7（WindowsやMacでも問題ないと思います）
Node.js 10.21.0

Node.js モジュール

CSV Writer
Express
Socket.IO

Node.jsのコード

事前に上記３つのモジュールをインストールします。

「CSV Writer」はnpmのサイトにインストール方法やサンプルコードがあるので参考にしました。

Node.jsのコードです。

const express  = require('express');
const app  = express();
const http = require('http').createServer(app);
const io   = require('socket.io')(http);
const PORT = 3000;
const {createObjectCsvWriter} = require('csv-writer');
const csvfilepath =  __dirname+'/record/data.csv'

const init = () => {
  app.use(express.static('htdocs'));

  io.on('connection', (socket) => {
    socket.on('rec', (data) => {
      console.log(data);
      writeCSV(data);
    });
  });

  http.listen(PORT, () => {
    console.log(`接続ポート ${ PORT }`);
  });
};

const writeCSV = (data) => {
  const csvWriter = createObjectCsvWriter({
      path: csvfilepath,
      header: [
        'date','temp'
      ],
      encoding:'utf8',
      append : true, // CSVに追記していく
  });
  csvWriter.writeRecords(data)
  .then(() => {
    io.emit('recorded', true);
  });
};

init();

const express = require('express');

const app = express();

const http = require('http').createServer(app);

const io = require('socket.io')(http);

const PORT = 3000;

const {createObjectCsvWriter} = require('csv-writer');

const csvfilepath = __dirname+'/record/data.csv'

const init = () => {

app.use(express.static('htdocs'));

io.on('connection', (socket) => {

socket.on('rec', (data) => {

console.log(data);

writeCSV(data);

});

http.listen(PORT, () => {

console.log(`接続ポート ${ PORT }`);

});

};

const writeCSV = (data) => {

const csvWriter = createObjectCsvWriter({

path: csvfilepath,

header: [

'date','temp'

encoding:'utf8',

append : true, // CSVに追記していく

});

csvWriter.writeRecords(data)

.then(() => {

io.emit('recorded', true);

});

};

init();

ブラウザからSocket.IOで受け取ったデータを、CSV Writerで書き込みます。

書き込み終わったらまた、ブラウザに(‘recorded’, true)と戻しています。

ブラウザ側のHTMLコード

データ送信画面のHTMLを作ります。

「記録」ボタンを押すと、テキスト入力欄の値がSocket.IOでNode.jsサーバーに渡ります。

CSVで保存用に、[{“date”: 日付, “temp”: 値}]という配列でデータは渡します。

<html>
<head>
  <title>Node.jsでCSV記録</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js"></script>
</head>
<body>
<main>
  <input type="text" id="temp" value="20">℃ <button type="button" id="btn">記録</button>
</main>
<script>
  const socket = io();
  const $btn = $('#btn');
  const $temp = $('#temp');

  const init = () => {
    setSocket();
    setBtn();
  };

  const setSocket = () => {
    socket.on('recorded', (data) => {
      if(data){
        $btn.text('記録完了')
      }
    });
  };

  const setBtn = () => {

    const getToday = () => {
      let dt = new Date();
      let y = dt.getFullYear();
      let m = ('00' + (dt.getMonth()+1)).slice(-2);
      let d = ('00' + dt.getDate()).slice(-2);
      return `${y}-${m}-${d}`;
    }

    $btn.on('click', function(){
      $btn.text('記録中…');
      let data = [{
        "date": getToday(),
        "temp": $temp.val()
      }];
      socket.emit('rec', data);
    });
  };

  init();
</script>
</body>
</html>

<html>

<head>

<title>Node.jsでCSV記録</title>

</head>

<body>

<main>

</main>

const socket = io();

const $btn = $('#btn');

const $temp = $('#temp');

const init = () => {

setSocket();

setBtn();

};

const setSocket = () => {

socket.on('recorded', (data) => {

if(data){

$btn.text('記録完了')

}

});

};

const setBtn = () => {

const getToday = () => {

let dt = new Date();

let y = dt.getFullYear();

let m = ('00' + (dt.getMonth()+1)).slice(-2);

let d = ('00' + dt.getDate()).slice(-2);

return `${y}-${m}-${d}`;

}

$btn.on('click', function(){

$btn.text('記録中…');

let data = [{

"date": getToday(),

"temp": $temp.val()

}];

socket.emit('rec', data);

});

};

init();

</script>

</body>

</html>

Expressで指定した場所（htdocs）に、このHTMLを配置します。

「記録」ボタンでCSVに保存

Node.jsでhttp://localhost:3000を立ち上げ、制作したHTMLをブラウザで開きます。

「記録」ボタンを押してみましょう。

正常に動けば、「記録中…」と一瞬ボタンが変わって、CSV書き込み完了後に「記録完了」という表示になります。

「記録」ボタンを押すたびに、データがCSVに追記されていきます。

記録されたCSVファイルは、「[Node.jsを置いたディレクトリ]/record/data.csv」に保存されます。

エクセルやメモ帳でCSVを開き、送信データが正しく書き込まれていれば成功です。

2021年2月22日2021年2月21日

「AMG8833」は最高温度でノイズ発生

サーモグラフィー「AMG8833」で体温を検温している時、最高温度に大きなノイズがあることに気づきました。ノイズを除去して一定温度で検温できるように調整しましょう。

最高温度で大きなノイズ

AMG8833で非接触検温を試みています。

検温ではサーモグラフィー上の一番高い温度が人間の体温と仮定します。通常室温が36℃を超えることがないためです。

しかし、そのサーモグラフィー上の最高温度が安定しません。

状況を把握するため、壁に向かって検温し、最高温度をグラフ化して見ます。

120秒間、0.5秒間隔で計測しました。

ただの壁なので温度は一定のはずです。しかし17℃くらいをベースに、頻繁に6℃～8℃くらい温度が高くなるようです。

0℃の時もありますが、これは温度が全く取得できなかった場合で、別の問題です。

サーモグラフィー（色）で温度を確認すると、謎の高温のドットが時々現れています。

どうやらノイズがあるようです。

2番目に高い温度でノイズ低減

今度はAMG8833の64pxの中で2番めに高い温度を取得してみます。

最高温度に比べ、ノイズが小さくなるのが分かります。

この調査時の室温はだいたい20℃です。

10回中央値で温度安定

同じデータを使って、10回計測の中央値でグラフを作成します。

中央値を使えば、突発的な高温や、0℃といった異常値も除外できます。

120秒間、240回測り、最大温度が20.25℃。最小温度が19.5℃。±0.375℃の誤差です。

検温するには許せる誤差範囲でした。

2021年2月21日2021年2月19日

サーモグラフィー「AMG8833」の温度揺らぎをグラフ化

サーモグラフィー「AMG8833」を使って検温できるシステムを作っています。計測すると温度の揺らぎがあり、センサーの特性を理解するため温度データをグラフ化することにしました。

サーモグラフィーの揺らぎを観察

「AMG8833」は、8×8の解像度で温度を取得できます。

ただし、温度の揺らぎが大きいので、キャリブレーションは必要です。

どれくらいの温度範囲で揺らぐか、試しに左上１pxの温度を取得してグラフ化して見ます。

120秒間、0.5秒間隔で計測してみました。

温度が一定の物体を計測しており、理論上はグラフの線が水平になります。

結果を見ると・・・ギザギザ。

まず、温度を取得できず0℃になっていることに気が付きます。

サーモグラフィー（色）で確認しても、上部で温度を取得できないことが、たまにあります。

この0℃については除外する必要があります。

温度の揺らぎは±1℃

240回の取得した温度データの分布を確認します。

15.5℃～17.5からの間、±1℃で、良い形で分布しています。

これなら温度を連続で取得した後、0℃を除外した平均値か、中央値を取得すればよさそうです。

固定の温度計測であれば可能

AMG8833と、計測する物体を動かさないという条件であれば、温度の揺らぎを調整して検温できます。

人間の位置を固定できれば、体温の検温としても使えそうです。

2021年2月20日2021年2月19日

ラズパイ3でも動く顔認識「pico.js」

ラズパイ３のスペックでは、ブラウザのJavaScriptを使って顔認識をすることは難しいです。方法を探ったところ、超軽量の「pico.js」を使えば実現可能でした。

超軽量の顔認識「pico.js」

雑誌の柳井さんでテストしています。0.5秒間隔で顔認識しており、若干追従は遅れますが、ほぼリアルタイムで認識できています。

使っているのは200行のJavaScriptの顔検出ライブラリ「pico.js」です。

200行のコードの中には丁寧なコメントがあり、見やすい改行まであります。実際のコードはもっと短いです。

コードが分かりやすいので、自分の使っているプロダクトに合わせて、組み込んだり、カスタマイズできます。

そして軽量なため、スペックの低いラズパイ３で利用するには最適でした。

サーマルカメラ+顔認識で出来そうなこと

サーマルカメラ開発で顔認識を実装できると、カメラと顔の距離がだいたい分かります。

非接触温度センサーは物体との距離によって計測温度が変わるため、顔との距離が分かればキャリブレーションできます。

他にも、顔の部分だけ温度を取得したり、顔を認識していない間は処理をセーブして節電したりするなど、サーマルカメラをバージョンアップさせられそうです。

引き続き、サーマルカメラのキャリブレーションを行い、ひと段落したところでコードを掲載します。

2021年2月19日2021年2月19日

ラズパイ3のブラウザでface-api.jsは無茶です

ラズパイ3（Model B+）でサーマルカメラを作っていました。カメラで顔を認識する機能を追加しようと思い、face-api.jsを組み込んでみます。しかし、ブラウザが重くなり、操作不能になりました。

ラズパイ3のブラウザでface-api.js顔認識

ラズパイを使って、ブラウザ側のJavaScript主体で開発する人は少ないと思います。しかし、もし同じようなことを試みている人がいれば伝えます。

ラズパイ3でface-api.jsを使うのは無茶です。

近くにあった雑誌に、柳井さんの顔があったので認識してみました。

雑誌なので体温は低いです。

カメラが起動してから1分くらい待てば顔認識できました。しかし、ブラウザがもう反応しなくなるくらい、処理が重くなってしまいます。

45px×30pxの小さな画像で試しても処理は重いため、解像度を低くして解決できる問題ではなさそうです。

ラズパイ3のスペックで、face-api.jsのブラウザ利用は無茶です。無理ではないですが、実用的ではありません。

サーバー側のNode.jsか、Pythonで顔認識は処理したほうが良いと思われます。

しかし、それでもフロント側でやるならば、もっと軽量のJavaScriptを使うと良いでしょう。