11ch A/D モニター

このエントリーをはてなブックマークに追加

What's this

11chのA/DをモニターするWebAppです。
バーと線グラフでobnizにある11のioの電圧を表示します。

Program

<!-- HTML Example -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WebApp Tap to IO ON/OFF - obniz</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
          integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
  <script src="https://unpkg.com/obniz@1.9.1/obniz.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  <style>
    .vertical-skills {
      margin-top: 60px;
      text-align: center;
    }

    .vertical-skills li {
      display: inline-block;
      position: relative;
      width: 50px;
      height: 200px;
      background: #f0f0f0;
      margin: 0 10px 50px 10px;
    }

    .vertical-skills li#bar0 {
      background: #FFFFFF;
    }

    .vertical-skills li span.vbar {
      position: absolute;
      animation-duration: 3s;
      animation-name: height;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .vertical-skills li span.title {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      bottom: -20px;
    }

    .vertical-skills li span.no {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      bottom: -40px;
    }

    @media (max-width: 575.98px) {
      .vertical-skills li {
        width: 24px;
      }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {

    }

    @media (min-width: 768px) and (max-width: 991.98px) {
    }

    @media (min-width: 992px)  {
      .first-block{
        text-align:right;
        padding-right: 2px;
      }
      .second-block{
        text-align:left;
        padding-left: 2px;
      }
    }

  </style>
</head>

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

<div class="text-center">
  <h1>11 ch Voltage Meter</h1>
  <h3>io0 = always GND</h3>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12 col-lg-6 vertical-skills pull-right  xs-center first-block">
      <ul class="list-inline">
        <li id="bar0">
          <span class="vbar" style="background:#ff0000;"></span>
          <span class="title">GND</span>
          <span class="no">io0</span>
        </li>
        <li id="bar1">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io1</span>
        </li>
        <li id="bar2">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io2</span>
        </li>
        <li id="bar3">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io3</span>
        </li>
        <li id="bar4">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io4</span>
        </li>
        <li id="bar5">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io5</span>
        </li>
      </ul>
    </div>

      <div class="col-md-12 col-lg-6 vertical-skills pull-right xs-center second-block">
        <ul class="list-inline">
        <li id="bar6">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io6</span>
        </li>
        <li id="bar7">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io7</span>
        </li>
        <li id="bar8">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io8</span>
        </li>
        <li id="bar9">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io9</span>
        </li>
        <li id="bar10">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io10</span></li>
        <li id="bar11">
          <span class="vbar" style="background:#ff0000;"></span><span class="title"></span>
          <span class="no">io11</span></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-12">

      <canvas id="myChart" style="width:100%;height:400px"></canvas>
    </div>
  </div>
</div>


<script>

  /* This will be over written on obniz.io webapp page */
  let obniz = new Obniz("OBNIZ_ID_HERE");

  obniz.onconnect = function () {
    $("#online-status").text("online: " + obniz.id);
    obniz.io0.output(false);

    for (var i = 1; i < 12; i++) {
      obniz.getAD(i).start(function (val) {
        for (var i = 1; i < 12; i++) {
          var voltage = obniz.getAD(i).value;
          $("#bar" + i + " .vbar").css("height", voltage / 5 * 100 + "%");
          $("#bar" + i + " .title").text(voltage.toFixed(2) + "V")
        }
      })
    }
    setInterval(addChart, 100);
  };


  function addChart() {
    for (let i = 1; i < 12; i++) {
      myChart.data.datasets[i - 1].data.push({x: new Date(), y: obniz.getAD(i).value})
    }
    let now = new Date();
    myChart.options.scales.xAxes[0].time.max = now;
    myChart.options.scales.xAxes[0].time.min = new Date(now.getTime() - 10 * 1000);
    for (let i = 1; i < 12; i++) {
      myChart.data.datasets[i - 1].data = myChart.data.datasets[i - 1].data.filter((elm) => {
        return elm.x.getTime() > myChart.options.scales.xAxes[0].time.min;
      })
    }
    myChart.update();
  }


  let date = new Date();

  function countup() {
    let unixtime = date.getTime();
    date = new Date(unixtime + 100);
    return date;
  }

  let dataSet = [];
  let colors = [
    '#FAC9CC',
    '#F37670',
    '#8AACD2',
    '#225D8B',
    '#FFE03A',
    '#80CFD4',
    '#9B9AA8',
    '#EF4A44',
    '#C0926E',
    '#51B958',
    '#000000',
  ];
  for (let i = 0; i < 11; i++) {
    dataSet.push({
      label: 'io' + (i + 1),
      data: [],
      borderWidth: 1,
      fill: false,
      lineTension: 0,
      borderColor: colors[i],
      backgroundColor: colors[i]
    })
  }

  let ctx = document.getElementById("myChart").getContext('2d');
  let myChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: dataSet
    },
    options: {
      animation:{
        duration: 0,
      },
      scales: {
        xAxes: [{
          type: "time",
          time: {},
          scaleLabel: {
            display: true,
            labelString: 'Time'
          }
        },],
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'V'
          },
          ticks: {
            beginAtZero: true,
            max: 5
          }
        }]
      }
    }
  });

</script>
</body>
</html>

今すぐ実行

HTMLがブラウザで開かれて実行されます。