Updates React App to send back a click event to socketio server to turn on LEDs on Arduino board

Author: Stewest

j5ardi/socket-io-client/src/App.css

@@ -60,7 +60,7 @@
 }
 
 .light {
-  background-color: #fff286;
+  background-color: aliceblue;
   border-radius: 50% 50% 30px 30px;
   width: 100%;
   height: 100%;
@@ -90,7 +90,7 @@
   display: block;
   position: absolute;
   width: 100%;
-  background: aliceblue;
+  background: #fff286;
   bottom: 0;
   z-index: 2;
   transition: height 0.3 ease-in-out;
@@ -107,6 +107,10 @@
   margin: 10px auto 0;
 }
 
+.toggle-led {
+  margin-top: 10px;
+}
+
 .led-red {
   border: 3px solid red;
 }

j5ardi/socket-io-client/src/components/ClientComponent.js

@@ -7,6 +7,7 @@ export default function ClientComponent() {
   const [light, setLight] = useState("");
   const [led, setLed] = useState("");
   const [temp, setTemp] = useState("");
+  const [changedLED, toggleLED] = useState("");
 
   const ENDPOINT = process.env.REACT_APP_ENDPOINT;
 
@@ -25,7 +26,9 @@ export default function ClientComponent() {
       setTemp(data);
     });
 
-  }, [ENDPOINT]);
+    socket.emit("handleLED", changedLED);
+
+  }, [ENDPOINT, changedLED]);
 
   let lightVar = 'OFF';
   let luminosity;
@@ -36,7 +39,7 @@ export default function ClientComponent() {
 
   if (light.item === 'light') {
     lightVar = light.msg;
-    lightNumb = parseFloat(lightVar / 10.24).toFixed(2);
+    lightNumb = 100 - (parseFloat(lightVar / 10.24).toFixed(0));
     luminosity = lightNumb;
   }
 
@@ -50,7 +53,11 @@ export default function ClientComponent() {
 
   if (temp.c || temp.f) {
     temperatureC = temp.c;
-    temperatureF = parseFloat((temp.c * 9 / 5) + 32).toFixed(2);
+    temperatureF = parseFloat((temp.c * 9 / 5) + 32).toFixed(1);
+  }
+
+  function handleLED() {
+    toggleLED(prevState => !prevState);
   }
 
   return (
@@ -65,7 +72,8 @@ export default function ClientComponent() {
         LEDs: {ledStatus ? 'ON':'OFF'}
         {ledStatus ? <div className="led-red is-on"></div> : <div className="led-red"></div> }
         {ledStatus ? <div className="led-green is-on"></div> : <div className="led-green"></div> }
-        {ledStatus ? <div className="led-blue is-on"></div> : <div className="led-blue"></div> }
+        {ledStatus ? <div className="led-blue is-on"></div> : <div className="led-blue"></div>}
+        <button className="toggle-led" onClick={handleLED}>Toggle LED</button>
       </div>
 
       <div className="item temp"><h3>TEMP:</h3><br />

j5ardi/socket-io-server/app.js

@@ -5,15 +5,19 @@ const socketIo = require("socket.io");
 require('dotenv').config();
 const port = process.env['PORT'];
 const local = process.env['CORSLOCAL'];
+
 const index = require("./routes/index");
 const app = express();
 
+const events = require('events');
+const eventEmitter = new events.EventEmitter();
+
 app.use(index);
 
 const server = http.createServer(app);
 const io = socketIo(server, {
   cors: {
-    // you may need to change this if the client starts on a different port
+    // You may need to change this in .ENV if the client starts on a different port.
     origin: local,
     methods: ["GET", "POST"]
   },
@@ -34,16 +38,24 @@ io.on("connection", (socket) => {
 
   interval = setInterval(() => getApiAndEmit(socket), 1000);
 
+  socket.on("handleLED", (arg) => {
+    console.log("toggleLED", arg);
+
+    // Fire the 'toggleLED' event.
+    eventEmitter.emit('toggleLED');
+  });
+
   socket.on("disconnect", () => {
     console.log("Client disconnected");
     clearInterval(interval);
-    socket.offAny();
+    socket.off();
   });
 });
 
 // https://stackabuse.com/using-global-variables-in-node-js/
 global.lightStatus = {};
 global.ledStatus = {};
+global.tempStatus = {};
 
 function setLight(item, msg) {
   global.lightStatus = {
@@ -100,7 +112,7 @@ board.on("ready", function () {
     freq: 5000
   });
 
-  //// "data" get the current reading from the photoresistor
+  // "data" is the current reading from the photoresistor.
   photoresistor.on("data", () => {
     setLight('light', photoresistor.value)
   });
@@ -132,11 +144,10 @@ board.on("ready", function () {
   }
 
   /**
-   *
    * @param {*} colour
    * usage example: pulseLed(green);
    */
-  const pulseLed = function (colour) {
+  const pulseLed = function (colour = array) {
     colour.pulse();
     setLED('led', true);
 
@@ -146,19 +157,14 @@ board.on("ready", function () {
     }, 5000);
   }
 
-  // Turn on Rainbow.
-  // To turn off: array.stop().off();
+  // Turn on Rainbow at start.
   rainbox();
 
+  // Turn on Array of LEDs at start.
   pulseLed(array);
 
-  board.on("exit", () => {
-    // Turn off the rgb LED.
-    rgbOn.off();
-    // Turn off each led in the array of individual leds.
-    array.stop().off();
-  });
-
+  //Assign the event handler to an event:
+  eventEmitter.on('toggleLED', pulseLed);
 
   const thermometer = new five.Thermometer({
     controller: "LM35",
@@ -170,4 +176,10 @@ board.on("ready", function () {
     setTEMP(celsius / 10, fahrenheit / 10);
   });
 
+  board.on("exit", () => {
+    // Turn off the rgb LED.
+    rgbOn.off();
+    // Turn off each led in the array of individual leds.
+    array.stop().off();
+  });
 });