Published March 19, 2020

Tilt web screen with accelerometer

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

BeginnerFull instructions provided1 hour466

Things used in this project

Hardware components

accelometer KXR94-2050

Cambrian Robotics obniz

Mobile battery

PC or Smartphone

Story

Background

Let's tilt web screen's components like buttons and letters tilting an accelerometer. It can be also used for children's museum or tricky house looking abnormal at the amusement park. By adding your own design, You can make full use of this technology and create things you've imagined so far.

Hardware Connection

[obniz] - [Accelerometer KXR94-2050]

0 - Vdd(1)

1 - GND(3)

2 - X axis(6)

3 - Y axis(7)

4 - Z axis(8)

5 - Enable(2)

6 - Self Test(5)

Coding

Code sourse is attached below.

Insert your obniz ID into "OBNIZ_ID_HERE" of let obniz = new Obniz('OBNIZ_ID_HERE');

Prepare 2 images ("image1.jpg", "image2.jpg") and put it on the same folder with code's.

Move

When you rotate Y axis like the image above, components of the web screen tilts following your movement.

What is obniz?

Before we get into the project, let's look into obniz.

Here → obniz for DIY electronics

obniz is a cloud-connected IoT development board. You can program on the web browser of any smartphone or computer and the command is sent to obniz through the internet via obniz cloud. By connecting the obniz to the cloud through wifi, users can remotely control devices that are physically connected to obniz.

Thanks to this cloud based approach, you can program with Python, Javascript, or other languages you prefer and control hardware directly. You don't need to integrate firmware into the device side. Recording and analyzing data is also easy with obniz cloud service.

Want to control hardware things with your current Python or Javascript skill? Want to start IoT project but don't know where to start? Want to learn programming with languages you prefer?

obniz will help you broaden your viewpoint and develop both your SW and HW skills.

For more information, please visit our official website → Official Website

Where to get obniz board? → Amazon / Official Store

Untitled file

<!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

80 projects • 32 followers

Development board "obniz" is controlled via the internet.

Embed the widget on your own site

Tilt web screen with accelerometer

Tilt web screen with accelerometer

Things used in this project

Hardware components

Story

Background

Hardware Connection

Coding

Move

What is obniz?

Code

Untitled file

Credits

obniz developer team

Comments

Related channels and tags