Graphical Roulette With Obniz

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>speaker.play(440);<br>      await obniz.wait(10);
      speaker.stop();</p>

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();
}</p>

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){
      onRouletteChange();
    }
    deg += speed;
      document.getElementById("roulette").style = "transform:rotate("+deg+"deg);";</p><p>  }
  setInterval(rotate,10);</p><p>  async function onRouletteChange(){
    if(!speaker){return;}
      speaker.play(440);
      await obniz.wait(10);
      speaker.stop(); 
  }</p>

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;
  };</p>

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_STOPPING = 2;
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;
    if(buttonState){
       phase = PHASE_ROTATE;
    }
}</p>

To speed up rulette, change var speed .

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

To speed down rulette, change var speed .

:

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

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

Step 5: Program

Please refer here for the program