Tap to on/off IO

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

What's this

Simply, tap buttons on web, then referenced io will output 5v.

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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/obniz@2.0.2/obniz.js"></script>
  <style>
     .io {
       height:150px;
       line-height: 150px;
       text-align: center;
       font-size: 40px;
     }
     .io-on {
      background-color:#d9534f;
      color:#FFF;
     }
     .io-off {
      background-color:#449d44;
      color:#FFF;
     }
  </style>
</head>

<body>
<div id="obniz-debug"></div>
<br>
<div class="text-center">
  <h1> Tap to IO ON/OFF </h1>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-1 col-sm-2 col-3 io">0</div>
    <div class="col-md-1 col-sm-2 col-3 io">1</div>
    <div class="col-md-1 col-sm-2 col-3 io">2</div>
    <div class="col-md-1 col-sm-2 col-3 io">3</div>
    <div class="col-md-1 col-sm-2 col-3 io">4</div>
    <div class="col-md-1 col-sm-2 col-3 io">5</div>
    <div class="col-md-1 col-sm-2 col-3 io">6</div>
    <div class="col-md-1 col-sm-2 col-3 io">7</div>
    <div class="col-md-1 col-sm-2 col-3 io">8</div>
    <div class="col-md-1 col-sm-2 col-3 io">9</div>
    <div class="col-md-1 col-sm-2 col-3 io">10</div>
    <div class="col-md-1 col-sm-2 col-3 io">11</div>
  </div> <!-- row -->
</div> <!-- container -->

<script>
var leftButtonDown = false;
$(document).mousedown(function(e){
    if(e.which === 1) leftButtonDown = true;
});
$(document).mouseup(function(e){
    if(e.which === 1) leftButtonDown = false;
});

$(".io").addClass('io-off');
$(".io").mouseenter(function() {
  if (leftButtonDown) {
    $(this).removeClass('io-off');
    $(this).addClass('io-on');
    var io = $(this).index();
    obniz.getIO(io).output(true);
  }
})
$(".io").mouseout(function() {
  $(this).removeClass('io-on');
  $(this).addClass('io-off');
  var io = $(this).index();
  obniz.getIO(io).output(false);
});
$(".io").mousedown(function() {
  $(this).removeClass('io-off');
  $(this).addClass('io-on');
  var io = $(this).index();
  obniz.getIO(io).output(true);
})
$(".io").mouseup(function() {
  $(this).removeClass('io-on');
  $(this).addClass('io-off');
  var io = $(this).index();
  obniz.getIO(io).output(false);
})


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

obniz.onconnect = function () {
  for (var i=0; i<12;i++) {
    obniz.getIO(i).output(false);
  }
}
    
</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