11ch AD Monitor

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

What's this

11ch A/D monitor Web App.
Bar and Chart display voltages on each obniz 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@2.0.2/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>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us