obniz developer team
Created March 19, 2020

Tilt web screen with accelerometer

Tilting accelerometer, tilt web screen's components like buttons or letters.

BeginnerFull instructions provided1 hour1

Things used in this project

Hardware components

accelometer KXR94-2050
×1
obniz
Cambrian Robotics obniz
×1
Mobile battery
×1
PC or Smartphone
×1

Story

Read more

Code

Untitled file

HTML
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/obniz@3.0.0/obniz.js" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Tilt Contents by an Accelaration Sensor</title>
  <style>
    #button-1{
      transform: rotate(0deg);
      transition: transform 0.3s;
    }
    #button-2{
      transform: rotate(0deg);
      transition: transform 0.3s;
    }
  
  </style>
</head>

<body>
  <div class="container">
    <h2 class="text-center m-4">Tilt Contents by an Accelaration Sensor</h2>
    <div class="row text-center">
      <div class="col-md-6 col-sm-12" id="contents-1">
        <img id="img-1" class="img-thumbnail mx-auto mt-2 mb-4" src="img1.jpg" alt="temp img1">
        <p id="sentence-1"> First Content <br>tilts by accelometer</p>
        <button id="button-1" class="text-center btn-primary btn-lg mb-4">ボタン1</button>
      </div>
      <div class="col-md-6 col-sm-12" id="contents-2">
        <img id="img-2" class="img-thumbnail mx-auto mt-2 mb-4" src="img2.jpg" alt="temp img2">
        <p id="sentence-2"> Second Content <br>tilts by accelometer as well</p>
        <button id="button-2" class="text-center btn-secondary btn-lg">ボタン2</button>
      </div>
    </div>
  </div>
  
<script>
  $(() => {
    let obniz = new Obniz('OBNIZ_ID_HERE');
    
    obniz.onconnect = async () => {
      let sensor = obniz.wired("KXR94-2050", {vcc:0, gnd:1, x:2, y:3, z:4, enable:5, self_test:6});
      
      let initAccelVals;
      
      for(let i=0; i<5; i++){
        initAccelVals = await sensor.getWait();
      }
      await console.log(initAccelVals);
      
      obniz.repeat(async () => {
        let currentAccelVals = await sensor.getWait();
        
        if(Math.abs(currentAccelVals.y - initAccelVals.y) > 0.7){
          //Tilt Strongly
          if(currentAccelVals.y > initAccelVals.y){
            //Tilt Left
            tilt(-70);
          }else{
            //Tilt Right
            tilt(70);
          }
        }else if(Math.abs(currentAccelVals.y - initAccelVals.y) > 0.5){
          //Tilt mildly
          if(currentAccelVals.y > initAccelVals.y){
            //Tilt Left
            tilt(-40);
          }else{
            //Tilt Right
            tilt(40);
          }
        }else if(Math.abs(currentAccelVals.y - initAccelVals.y) > 0.3){
          //Tilt a little
          if(currentAccelVals.y > initAccelVals.y){
            //左に傾ける
            tilt(-15);
          }else{
            //右に傾ける
            tilt(15);
          }
        }else{
          //Reset to 0
          tilt(0);
        }
      } ,300);
    }
    
    function tilt(angle){
      $('#img-1').css({transform: 'rotate(' + angle + 'deg)'});
      $('#button-1').css({transform: 'rotate(' + angle + 'deg)'});
      $('#sentence-1').css({transform: 'rotate(' + angle + 'deg)'});
      $('#img-2').css({transform: 'rotate(' + angle + 'deg)'});
      $('#button-2').css({transform: 'rotate(' + angle + 'deg)'});
      $('#sentence-2').css({transform: 'rotate(' + angle + 'deg)'});
    }
  });
  
</script>
  
</body>
</html>

Credits

obniz developer team

obniz developer team

59 projects • 24 followers
Development board "obniz" is controlled via the internet.

Comments