Project Example 9: Button Switch

Switches are common electronic components in our daily life. Using an on / off signal, we control different house appliances. This project example will show how to read the signal from a button switch and control an image on screen or turn on/off an LED.

Video Tutorial

Check the video tutorial here:

Wiring and Practice

The Button Switch is a common component. When we press it, all 4 legs connect on the switch. To prevent shorting the circuit, connect a resistor to the circuit. Below we have a simple diagram showing how a button switch works.

We can use the middle of a breadboard to connect our button switch. Place two legs on each side of the bread board. Then, connect a resistor on the side that connects to GND. This setup is called a pull-down resistor. If it is connected on the other side it’s a pull-up resistor.

Webduino Mark 1 Circuit diagram:

Webduino Fly Circuit diagram:

Reference image:

Instructions for using the Webduino Blockly

Open the Webduino Blockly editor. We will use "Show Text" to display text when the switch button is on and off. So, click on "Web Demo Area" and choose "Show Text" from the drop-down menu.

Place a "Board" block onto the workspace and fill in the name of your Webduino board. Place a "Button Switch" block in the stack, set name to button, and the pin to 11. Then place three "When Button Is Pressed" blocks inside that. Set one to "Pressed", another to "Released", and the last one to "Long Pressed", this allows different actions to show different text.

After you are done setting up the stack, check if the board is online (click "Check Device Status") and click on the red execution button "Run Blocks" and see the text on the screen change! (Solution: https://blockly.webduino.io/?lang=en#-KZttZvcooB45E405Uyy)

Code Explanation (Check Webduino Bin, Check Device Status)

Include webduino-all.min.js in the header of your html files in order to support all of the Webduino's components. If the codes are generated by Webduino Blockly, you also have to include webduino-blockly.js in your files.

<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>

In our HTML file the span controls the display of text.

<span id="demo-area-01-show">123</span>

In our JavaScript code we can see an "on" event for "button". The first parameter is the action of a button, pressed, released and long pressed. The second parameter is a call function, write the actions you wish to perform inside this.

var button;

boardReady('', function (board) {
  board.samplingInterval = 20;
  button = getButton(board, 11);
  button.on("pressed",function(){
    console.log("pressed");
      window.alert('AAA');
  });
  button.on("released",function(){
    console.log("released");
      window.alert('BBB');
  });
  button.on("longPress",function(){
    console.log("longPress");
      window.alert('CCC');
  });
});

Now, this is how you change the text on screen by pressing, releasing, and long pressing a switch button.
Webduino Bin: http://bin.webduino.io/gujoy/edit?html,css,js,output
Stack setup: https://blockly.webduino.io/?lang=en#-KZtu6biVaOMkVAXRzTt