感圧センサーを使った着席状態の記録

椅子に感圧センサーを取り付け、その値をObnizを通してAmbientへ記録するシステムです。
感圧センサーの値から着席有無や着席時にどれくらい動いているかを記録することで、ディスクワークをしていた時間がわかり、間接的にどれくらいじっと机に向かって集中できていたか推測することができます。

ここに動画が表示されます

Obnizのpin0, 1に感圧センサーを接続します。
感圧センサがそれほど大きくないので、椅子へのセッティング時は感圧センサーを少し硬めのダンボールなどで挟むことで小さな感圧センサまで力が加わるように工夫します。


<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <title>Pressure Chart | obniz App</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
  <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" crossorigin="anonymous"/>
  <link rel="stylesheet" type="text/css" href="https://obniz.com/css/app-common.css"/>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://obniz.com/js/popper-1.12.9/popper.min.js"></script>
  <script src="https://obniz.com/js/bootstrap-4.0.0/bootstrap.min.js"></script>

</head>

<body>
  <script src="https://unpkg.com/obniz@3.x/obniz.js" crossorigin="anonymous" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js" integrity="sha512-aTKlYRb1QfU1jlF3k+aS4AqTpnTXci4R79mkdie/bp6Xm51O5O3ESAYhvg6zoicj/PD6VYY0XrYwsWLcvGiKZQ==" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/ambient-lib@1.0.3/lib/ambient-lib.js"></script>

  <style>
  .chart-container {
    position: relative;
    margin: 20px auto;
    max-height: 500px;
    height: 50vh;
    width: 100%;
  }
  </style>

  <div id="obniz-debug"></div>

  <!-- Chart -->
  <div class="container app-content">
    <div class="app-content_head">
      <h1> Pressure Logger </h1>
    </div>
    <div class="app-content_body">
      <div class="bg-white app-content_body-inner">
        <div class="chart-container">
          <div class="chartjs-size-monitor"
          style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
          <div class="chartjs-size-monitor-expand"
          style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
          <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
        </div>
        <div class="chartjs-size-monitor-shrink"
        style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
      </div>
    </div>
    <canvas id="myChart" style="width: 100%; height: 100%; display: block;"
    class="chartjs-render-monitor"></canvas>
  </div>

  <script>

  let myChart;

  // OBNIZ_ID_HERE will be replaced at run.
  // インストールされたデバイス情報に書き換わる
  var channelId = CHANNEL_ID;
  var writeKey = "WRITE_KEY";
  var obniz = new Obniz("OBNIZ_ID_HERE");
  var ambient = new Ambient(channelId, writeKey);
  var pressSensor;

  var sendData = async (press) => {
    ambient.send({d1: press}, (err, res, body) => {
      if (err) {
        console.log(err);
      }
      console.log(res.statusCode);
    });
  }

  // Called on Online
  // 接続時に呼ばれる。
  obniz.onconnect = async function () {

    // 感圧センサーをobnizに接続
    pressSensor = obniz.wired("FSR40X", {pin0:0, pin1:1});
  }

  // Called on Offline
  // 切断時に呼ばれる
  obniz.onclose = async function () {
    pressSensor = null;
  }

  // Called repeatedly while online
  // obnizがオンラインである限り繰り返し呼ばれる。
  obniz.onloop = async function() {
  
    // Getting a Temperature
    // 感圧センサーで圧力を取得
    var pressSensor = obniz.wired("FSR40X", {pin0:0, pin1:1});
    var press = await pressSensor.getWait();

    sendData(press);

    // Draw it on chart
    // グラフに圧力を描画
    addChart(press);
    scrollToRight();
    myChart.update();

    await obniz.wait(10 * 1000);
  }

  // drawing function.
  // 圧力グラフの描画関数
  function setupCharts() {
    let ctx = document.getElementById("myChart").getContext('2d');

    let dataSet = [{
        label: 'pressure',
        data: [],
        borderWidth: 2,
        fill: false,
        lineTension: 0,
        borderColor: "rgb(252,109,83)",
        backgroundColor: "rgb(252,109,83)",
      },
    ];

    myChart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: dataSet
      },
      options: {
        animation: {
          duration: 0,
        },
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            type: "time",
            time: {},
            scaleLabel: {
              display: true,
              position: 'left',
              labelString: 'Time'
            }
          },],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Pressure (p)',
              fontColor: 'rgb(252,109,83)'
            },
            ticks: {
              suggestedMin: 20,
              suggestedMax: 36
            },
          },
        ]
      }
    }
  });
}

function addChart(press) {
  myChart.data.datasets[0].data.push({ x: new Date(), y: press });
}

function scrollToRight() {
  let now = new Date();
  myChart.options.scales.xAxes[0].time.max = now;
  myChart.options.scales.xAxes[0].time.min = new Date(now.getTime() - 60 * 1000);
  for (let i = 0; i < myChart.data.datasets.length; i++) {
    myChart.data.datasets[i].data = myChart.data.datasets[i].data.filter((elm) => {
      return elm.x.getTime() > myChart.options.scales.xAxes[0].time.min;
    })
  }
}

setupCharts();

</script>

</div>
</div>
</div>
</body>

obniz
ALPHA-MF02-N-221-A01
ジャンプワイヤー

時間切れで実装できませんでしたが、椅子に座っている時の圧力を定期ログできるようになったので、このデータを元に一日の座っている時間や時間帯、座っている時の動きがどれくらいなのかを可視化して見やすい形に変えていきたいと思います。
また、感圧センサーの位置次第かかる圧力に差が出てしまうので、均一に圧力が分散するような座面を検討したいです。

tornoki

tornoki さんが 2021/05/16 に編集をしました。 (メッセージ: 初版)
tornoki さんが 2021/05/16 に編集をしました。
tornoki さんが 2021/05/16 に編集をしました。

ログインしてコメントを投稿する

感圧センサーを使った着席状態の記録

概要

作成方法

設計図

ソースコード

必要な部品

今後の改良