Graphical Roulette With Obniz

Introduction: Graphical Roulette With Obniz

About: DIY electronics, javascript, IoT, obniz, programming, raspberrypi, arduino

I have made a graphical roulette. If you press the button, the roulette starts rotating. If you press again, the roulette stops rotating and beeps!

Step 1: Circuit

We use only a wired speaker and a button.

The pin numbers of wired are written on the program.

<p>button = obniz.wired("Button", {signal:6 , gnd:7 });<br>speaker = obniz.wired("Speaker", {signal:0 , gnd: 1});</p>

Step 2: Rotate Rulette Image

In HTML, you can use "CSS transform". For example, this is the code of rotate image 90 degree.

document.getElementById("roulette").style = "transform:rotate(90deg);";

To start and stop rotate slowly, add a var speed for rotate degree per frame.

let speed = 0;
let deg = 0; function rotate(){ deg += speed; document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";

} setInterval(rotate,10);

Step 3: Beep

Do you want to beep on the roulette no change? With this, you can beep on 440Hz 10ms.

<p>;<br>      await obniz.wait(10);

This is how to know on change of roulette no.

<p>if( Math.floor((deg + speed) / (360/7.0)) -  Math.floor(deg / (360/7.0)) >= 1){<br>      onRouletteChange();

So, this is the code of rotate and beep.

<p>let speed = 0;<br>  let deg = 0;
  function rotate(){
    //on change value
    if( Math.floor((deg + speed) / (360/7.0)) -  Math.floor(deg / (360/7.0)) >= 1){
    deg += speed;
      document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";</p><p>  }
  setInterval(rotate,10);</p><p>  async function onRouletteChange(){
      await obniz.wait(10);

Step 4: Start on Button Pushed.

To know button state, add var buttonStateand set value of current button state.

<p>button.onchange = function(pressed){<br>    buttonState = pressed;

And also add var phase for current state of roulette.
phase is setted one of this.

<p>const PHASE_WAIT_FOR_START = 0; <br>const PHASE_ROTATE = 1;
const PHASE_STOPPED = 3;</p>

For example, when phase is PHASE_WAIT_FOR_START and you want to next phase.

<p>if(phase == PHASE_WAIT_FOR_START){<br>    speed = 0;
       phase = PHASE_ROTATE;

To speed up rulette, change var speed .

<p>if(phase == PHASE_ROTATE){<br>    speed = speed+0.5;

To speed down rulette, change var speed .


<p>if(phase == PHASE_STOPPING){    <br>    speed = speed-0.2;

Those are component of roulette. Let's make it!

Step 5: Program

Please refer here for the program

Game Life Contest

This is an entry in the
Game Life Contest



    • Tiny Home Contest

      Tiny Home Contest
    • Water Contest

      Water Contest
    • Creative Misuse Contest

      Creative Misuse Contest