Colorful Roulette Game with obniz

A graphical roulette game with obniz. When you press the button, the roulette wheel starts rotating. When you press the button again, the roulette wheel stops rotating and beeps!

Step 1: Setting Up obniz

To set up obniz, all you need to do is to follow three steps.

• Connect obniz to WiFi.

• Connect devices like LED or motors to obniz.

• Scan QR code of obniz and start programming. You do not need to install any software.

Step 2: Circuit

We only use 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 3: Rotate Roulette Image

In HTML, you can use "CSS transform". For example, this is the code of rotating image by 90 degrees.

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

To start and stop rotating slowly, add a var speed for degree of rotation per frame.

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

Step 4: Beep

If you want to beep when the number of the roulette changes, 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 when the number of roulette changes.

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

So, this is the code to 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 5: Start When You Press the Button

To know when the button was pressed, add var buttonState and 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 set 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 the roulette, change var speed.

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

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

What Is obniz?

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

obniz has 12 IO and WiFi-BLE module. It can be controlled through the APIs – REST or WebSocket API – on obniz cloud. Not only simple IO on/off but also UART, I2C, BLE etc can be used by remotely controlling obniz via internet. All you need to do to connect obniz is to input unique ID by scanning QR code. Complicated processes are done by obniz and its cloud. You can just start programming in HTML, browser and circuit have already been integrated. If you write a program to collect sensor values, you can make a chart of the values easily.

In terms of hardware, every IO can drive up to 1A with overcorrect protection, therefore high current demanding devices such as motors can be directly connected to obniz IO. GPIO and AD can be used on every IO. UART, SPI etc peripherals can be assigned to every IO.Even output voltage 3v/5v can be changed by software. Most electrical parts can be connected directly. Embedded parts such as switch, OLED display, and BLE are ready for use on program.