int switchButton = 2;

This code creates a variable to hold the number for the switch input into the Arduino. On the Arduino it is connected to digital pin 2.

Serial.begin(9600);

This function sets the baud rate that the data will be transferred at.

pinMode(switchButton, INPUT);

pinMode is a function that sets the mode for the pins, and INPUT is the default and sets it up to receive data. It is being passed to the switchButton variable that holds the digital pin number.

int buttonState = digitalRead(switchButton);

The variable buttonState holds the data coming from digital pin 2, which the button is connected to. It will either be high if the button is being pressed or low when it's not.

if(buttonState == HIGH){

    Serial.println("1");

}else{

    Serial.println("0") ;

}

The if statement checks if the buttonState is HIGH. If it is, the button is being pressed and Serial.println will send “1” to the serial port. If it's not it, the else statement will send “0” instead.

delay(500);and

As the code is in a loop you can delay the loop starting again. If you don't do this, code might not have finished executing before the loop starts again and you can lose data. The delay function uses milliseconds, and 500 is half a second. You need to get the balance right with the delay; you don’t want to lose data but if you make the delay too long, you might miss the button being pressed.

var SerialPort = require('serialport');

This brings the SerialPort library into the Node.js application and stores it as a variable.

var serialport = new SerialPort('<serial port>'

The code creates a new serial port object. You need to add in the serial port that your Arduino is connected to in between the < >. On a Mac it should look like /dev/tty.usbmodem<port number> and on a PC it should look like COM<port number>.

{

parser: SerialPort.parsers.readline(' ')

});

The data gets parsed using readline, the ‘ ’ creates a new line which separates each line of data.

serialport.on('open', function(){

The open event is emitted when the port is opened. You can specify events when the serial port is open, and in the code there is a console log so you know if it has opened.

serialport.on('data', function(data){

The data event starts to monitor for new data, and the function is passed to the new data.

data = data.trim();

The function gives you access to the new data, but first it needs to be trimmed of any white space before or after the character.

socket.emit('data', data);

The data is passed to the front end using the socket.io function emit; it has a reference id of ‘data’.

<svg width="120" height="120" viewBox="0 0 120 120">

This creates a scalable vector graphic (SVG) square with a width, height, and color. There will be details on SVG’s in Chapter 4.

var current = "0";

This creates a variable that holds the current value of the serial data. This variable will be used to check if the data from the serial port has changed.

var shape = document.getElementById('change-color');

Shape is a variable that holds a reference to the SVG rectangle. The variable is used to update the color of the rectangle. It finds it using the SVG’s id.

var buttonState = document.getElementById('button-state');

buttonState is a variable that holds a reference to a span element. It finds the element by its id and will update text within it.

var colorArray = ["LightSkyBlue", "LightSlateGray","DarkOliveGreen", "orange", "DarkRed", "gold", "purple"];

The variable colorArray holds an array of different color names.

socket.on("data", function(data){

The socket.on function is listening for data coming from a socket.emit with the id of ‘data’ and passes the incoming data to a function.

if(data === "1"){

The if statement checks if the new data is the string “1.” If it is, the text on the web page changes and another if statement is called.

if(data !== "current"){

This if statement checks if the new data is the not the same (!==, not equal to) the current data. If it is not the same it carries out the code within the statement.

var newColor = colorArray[Math.floor(Math.random()

*colorArray.length)];

This piece of code chooses a color from the colorArray. The JavaScript Math.random() function is used to pick a random number between 0 and the number of the elements in the array. It’s multiplied by (the * symbol) the length of the array so it only chooses a number within the array length.

shape.style.fill = newColor;

Using the variable shape, the fill style of the SVG is changed to the new color.

else{

buttonState.innerHTML = "not pressed";

}

If the value of the new data is not “1,” then the HTML of the span with the id button-state is changed to the string “not pressed.”

current = data;

The variable holding the value of the current data needs to be updated with the value of the new data.