11chのA/DをモニターするWebAppです。
バーと線グラフでobnizにある11のioの電圧を表示します。
<!-- 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>
HTMLがブラウザで開かれて実行されます。
