We add additional buttons in the html part of the code in the file example05.html:
<button id="buttonOn1" onClick="on1()">On 1</button>
<button id="buttonOff1" onClick="off1()">Off 1</button>
<br>
<button id="buttonOn2" onClick="on2()">On 2</button>
<button id="buttonOff2" onClick="off2()">Off 2</button>
In html file we rename and add additional functions:
function on1() { // when button "on" is pressed we
ws.send("1"); // send number 1 via websocket
}
function off1() { // when button "off" is pressed we
ws.send("0"); // send number 0 via websocket
}
function on2() { // when button "on" is pressed we
ws.send("3"); // send number 3 via websocket
}
function off2() { // when button "off" is pressed we
ws.send("2"); // send number 2 via websocket
}
In the javascript file example05.js we should consider additional parameters. In this case we will use the JavaScript Switch Statement:
switch (value) {
case "1":
board.digitalWrite(13, board.HIGH); // write high on pin 13
break;
case "0":
board.digitalWrite(13, board.LOW); // write low on pin 13
break;
case "3":
board.digitalWrite(8, board.HIGH); // write high on pin 8
break;
case "2":
board.digitalWrite(8, board.LOW); // write low on pin 8
break;
}
The final view of the GUI with four buttons: