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: