DEV Community: Ayoub Touba

ESP32/Arduino Sensor Data Visualization on Web Apps: A Beginner's Guide with Directus: Part 2

Ayoub Touba — Sun, 17 Mar 2024 07:00:45 +0000

Welcome back! In Part 1, you built the ESP32 circuit and verified that your sensor works properly. Now, it's time to connect your ESP32 to the web world and visualize those sensor readings!

In this part, we'll focus on sending data from your ESP32 to a user-friendly web dashboard. Here, we'll leverage the power of Directus. But before we dive in, let's address a key question you might have:

Why Directus and Sockets?

There are several reasons why Directus is a great choice for this project, and one of them is its built-in socket connection functionality. Sockets might be a new term for some beginners, so let's break it down:

Imagine a socket as a dedicated communication channel between your ESP32 and the web dashboard (Directus). It's like a direct line where data can be exchanged quickly and efficiently.

Now, you might wonder, "Why use sockets instead of the REST APIs that Directus also offers?" Here's the key difference:

Real-time Data vs. Periodic Updates: REST APIs are fantastic for various data exchange scenarios, but for our project where we want to see sensor readings almost instantly (in milliseconds), sockets are a better fit. They provide a more real-time connection, allowing the ESP32 to send data as soon as it's collected, minimizing delays.

Here's an analogy: Think of REST APIs like checking your mailbox for letters you might get them a few times a day. Sockets, on the other hand, are like having a live chat with someone information is exchanged almost instantly.

In short, sockets are ideal for our project because we want to see sensor readings with minimal delay.

1.Sending Sensor Data to Directus with ESP32 and WebSockets

Now that we understand why sockets are a good choice for real-time data transmission, let's delve into the code that sends sensor data from your ESP32 to the web dashboard (Directus).

Libraries and Dependencies:

The code snippet includes several libraries:

WiFi.h: Enables ESP32 to connect to your WiFi network.
WebSocketsClient.h: Provides functionalities for establishing WebSocket connections.

then go to Arduino ide menu sketch manage libraries upload library

ArduinoJson.h: Allows working with JSON data format for sending and receiving data.

(If not installed you can install it directly from the library manager)

DHT.h: Specific to the DHT11 sensor, used for interacting with the sensor and reading temperature/humidity values.

User-Defined Variables:

WiFi Settings: Replace XXXXX with your actual WiFi network name (SSID) and password.
Socket.IO Settings: These define the connection details for your Directus server. You'll need to replace placeholders like
host IP address youre connecting with to Directus (your IP machine)
port : 8055
Directus Access Token: Replace Dirctus_user_token with a valid access token you generated in your Directus dashboard when you created a user
Collection: Set dht_sensor to the collection name
Time Variables: These variables help manage the timing of sensor readings and data transmission.

#include <WiFi.h>#include <WebSocketsClient.h>#include <ArduinoJson.h>#include "DHT.h"/////////////////////////////////////////// USER DEFINED VARIABLES //////////////////////////////////////////// WIFI Settings ///const char* ssid = "ssid";const char* password = "password";/// Socket.IO Settings ///char host[] = "IP"; // Socket.IO Server Addressint port = 8055; // Socket.IO Port Addresschar path[] = "/websocket"; // Socket.IO Base Pathconst char* access_token = "DirctusToken";const char* collection = "dht_sensor";/// Pin Settings ///#define DHTPIN 2#define DHTTYPE DHT11DHT dht(DHTPIN, DHTTYPE);// time excutingunsigned long startTime;const int delayTime = 5000;unsigned long currentTime;bool isReadyToSend = false;/////////////////////////////////////////// ESP32 Socket.IO Client /////////////////////////////////////////WebSocketsClient webSocket;WiFiClient client;void authenticate() { JsonDocument doc; doc["type"] = "auth"; doc["access_token"] = access_token; String message; serializeJson(doc, message); webSocket.sendTXT(message);}void traitPayload(uint8_t* payload) { JsonDocument doc; DeserializationError error = deserializeJson(doc, payload); if (error) { Serial.print(F("deserializeJson() failed: ")); Serial.println(error.f_str()); return; } const char* typeValue = doc["type"]; const char* statusValue = doc["status"]; const char* event = doc["event"]; if (strcmp(typeValue, "auth") == 0 && strcmp(statusValue, "ok") == 0) { Serial.println("[EVENT] SUBSCRIBE"); subscribe(); } if (strcmp(typeValue, "subscription") == 0 && strcmp(event, "init") == 0) { Serial.println("[EVENT] INIT TO SEND"); isReadyToSend = true; } if (strcmp(typeValue, "ping") == 0) { Serial.println("[EVENT] SEND PONG"); pong(); }}void subscribe() { JsonDocument doc; doc["type"] = "subscribe"; doc["collection"] = collection; doc["query"]["fields"] = doc["query"]["fields"].to<JsonArray>(); doc["query"]["fields"].add("*"); String message; serializeJson(doc, message); Serial.println("[EVENT] SEND SUBSCRIBE"); Serial.println(message); webSocket.sendTXT(message);}void pong() { JsonDocument doc; doc["type"] = "pong"; String message; serializeJson(doc, message); webSocket.sendTXT(message);}void sendData() { float humidity = dht.readHumidity(); float temperatureC = dht.readTemperature(); if (isnan(humidity) || isnan(temperatureC)) { Serial.println("Failed to read from DHT sensor!"); return; } Serial.print("Humidity: "); Serial.println(humidity); Serial.print("Temperature C: "); Serial.println(temperatureC); JsonDocument doc; doc["type"] = "items"; doc["collection"] = collection; doc["action"] = "create"; doc["data"]["humidity"] = humidity; doc["data"]["temperatureC"] = temperatureC; String message; serializeJson(doc, message); Serial.println("[EVENT] SEND DATA"); webSocket.sendTXT(message);}void webSocketEvent(WStype_t type, uint8_t* payload, size_t length) { switch (type) { case WStype_DISCONNECTED: Serial.printf("[WSc] Disconnected!\n"); break; case WStype_CONNECTED: Serial.printf("[WSc] Connected to url: %s\n", payload); // send Auth to server when Connected authenticate(); break; case WStype_TEXT: Serial.printf("[WSc] get text: %s\n", payload); traitPayload(payload); break; }}void setup() { startTime = millis(); Serial.begin(115200); delay(10); // We start by connecting to a WiFi network Serial.println(); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); webSocket.onEvent(webSocketEvent); // Setup Connection webSocket.begin(host, port, path);}void loop() { webSocket.loop(); currentTime = millis(); if (isReadyToSend == true && currentTime - startTime >= delayTime) { sendData(); startTime = currentTime; // Reset start time for next execution }}

we use JSON (JavaScript Object Notation) to communicate with Directus web dashboard.

Data Structuring: JSON is a lightweight and human-readable format for exchanging data between devices. It uses key-value pairs to represent data like temperature and humidity readings.

For Example here

JsonDocument doc; doc["type"] = "items"; doc["collection"] = collection; doc["action"] = "create"; doc["data"]["humidity"] = humidity; doc["data"]["temperatureC"] = temperatureC; String message; serializeJson(doc, message);webSocket.sendTXT(message);

Reference to how to communicate with Directus via Socket:Getting Started With WebSockets

This code creates a JSON document (doc) with key-value pairs:
Finally, the JSON document is converted to a string (message) and sent to Directus using the WebSocket connection.

WebSocket Client and Connection:

webSocket and client objects are declared for WebSocket communication.

Authentication Function (authenticate):

This function sends an authentication message to the Directus server using the provided access token.

Payload Processing Function (traitPayload):

This function receives data (payload) from the Directus server and parses it as JSON.
It checks for different message types like "auth," "subscription," and "ping" and performs actions accordingly.

Subscription Function (subscribe):

This function sends a subscription message to Directus, requesting data for the specified collection (collection).

Pong Function (pong):

This function sends a "pong" message in response to "ping" messages from the server, keeping the connection alive.

Data Sending Function (sendData):

This function reads temperature and humidity values from the DHT11 sensor.
It checks for successful readings and avoids sending invalid data.
It creates a JSON document with sensor data (humidity and temperature) and sends it to Directus using the webSocket.sendTXT function.

WebSocket Event Handler (webSocketEvent):

This function handles different events related to the WebSocket connection.

Setup Function (setup):

Initializes serial communication for debugging messages.
Connects to the specified WiFi network using the provided credentials.
The code establishes a WebSocket connection to the Directus server using webSocket.begin(host, port, path).
The webSocketEvent function handles different events related to the connection:

Loop Function (loop):

This function continuously runs and checks the WebSocket connection.
It also checks the isReadyToSend flag and the elapsed time since the last transmission.
If the flag is set and enough time has passed (delayTime), it calls the sendData function to send the latest sensor readings to Directus.

Overall Flow:

The ESP32 connects to WiFi and establishes a WebSocket connection to the Directus server.
Authentication with Directus is performed using the access token.
The ESP32 subscribes to the sensor data collection in Directus.
The ESP32 periodically reads temperature and humidity from the DHT11 sensor.
Sensor readings are packaged as JSON data, and the ESP32 sends this data to Directus through the WebSocket connection.
Directus receives and stores the sensor data in the specified collection.

Important Note: If you encounter the hexdump() error, navigate to the file \libraries\SocketIoClient\SocketIoClient.cpp mentioned in the error message and locate the hexdump() function. Then, comment it out.

1.2 Uploading and Running the Code

Before Uploading:

Secure Directus Server: Ensure your Directus server is up and running before connecting from the ESP32. A non-running server will prevent successful communication.
Verify Connectivity: Double-check that your ESP32 is properly connected to the same network as your Directus server. Network connectivity is crucial for data transmission.
Access Token: Confirm that you've included a valid access token for authentication in your ESP32 code. Without a valid token, Directus will not allow access to send data.

Uploading and Observing Data Transmission:

Upload the Code: Use the Arduino IDE to upload the code to your ESP32 board.
Open Port Monitor: After successful upload, open the serial monitor or terminal in your Arduino IDE. This will display logs and messages from the ESP32.
Review Logs: Inspect the serial monitor output carefully. You should see messages indicating:

2. Visualizing Your Sensor Data in Directus

Ready to See Your Data? Now that you've uploaded the code and verified successful data transmission to Directus via WebSocket based on the logs, let's explore how to visualize your sensor data in the dashboard and create graphs (timelines) for clear representation.

Accessing Your Data:

Head to Directus Dashboard: Open your Directus dashboard in a web browser and log in with your credentials.
Locate Your Collection: Navigate to the collection you specifically created for the sensor data (e.g., "dht_sensor").
Behold Your Data!: You should now see a list of entries in the collection, each representing a data point sent from your ESP32. The data will be displayed in a table format by default.

2.1 Visualizing Time Series Data

To visualize the data as a time series graph , as there are a couple of steps I let you watch this video to create it effortlessly.

https://www.youtube.com/watch?v=TdYNmKdWgzU

Now let's explain what we did, we chose the time series graph.

Choosing the Chart Type:

We opted for a time series graph, which is ideal for visualizing data points over time. This allows you to observe trends and patterns in your sensor readings.

Data Source:

Collection: We selected the specific collection in Directus where your sensor data is stored (e.g., "dht_sensor").
Date Field: Directus automatically creates a date field to record the creation time of each data entry. This field serves as the time reference for the graph.
Value Field: We identified the specific field within the collection that contains the sensor readings you want to visualize (e.g., "humidity").

Data Aggregation(Group Aggregation/Group Precision):

Concept: Aggregation refers to combining multiple data points into a single value. This is often achieved using functions like SUM, COUNT, and AVG.
Our Choice: We chose the AVERAGE aggregation to calculate the average value (e.g., average humidity) within a specific time interval.
Group Precision: We opted for "Second" as our group precision. This means the average will be calculated for each second of data received. You can adjust this based on your data collection frequency (e.g., per minute or hour).

Additional Considerations:

Directus offers various aggregation functions and group precision options. Explore these options to customize visualizations based on your specific needs. While we focused on basic configurations here, advanced data manipulation and visualization tools can be integrated with Directus for in-depth analysis.

Expanding Your Sensor Network

Remember, these steps can be adapted for data from other sensors. Just ensure you create the appropriate collection with relevant fields in Directus to accommodate your specific sensor. and edit the socket code to send the correct data in the correct fields

Conclusion

Congratulations! You've successfully connected your ESP32 to the web world and established a real-time data pipeline to Directus. The provided code effectively transmits sensor readings, leveraging WebSockets for efficient communication.

Key Takeaways:

Real-time Data Visualization: By harnessing WebSockets, we achieved near-instantaneous data transmission, allowing you to visualize sensor readings with minimal delay in the Directus dashboard.
Flexibility for Diverse Sensors: This approach can be adapted to work with various sensors. Simply create the appropriate collection with relevant fields in Directus and modify the code to send the correct data accordingly.

Remember: The provided code snippet serves as a solid foundation. Feel free to experiment and customize it further to suit your specific project requirements and desired sensor data.

ESP32/Arduino Sensor Data Visualization on Web Apps: A Beginner's Guide with Directus: Part 1

Ayoub Touba — Sat, 16 Mar 2024 15:40:29 +0000

Ever wanted to build a project that bridges the physical world with the web, but coding a web application seems daunting? This guide is for you! We'll embark on a journey to create a system that collects sensor data and displays it on a user-friendly web interface without writing any code for the web app itself.

Our secret weapon? Directus, a powerful open-source platform that acts as a bridge between your data and web applications. Directus takes care of storing and managing sensor readings, eliminating the need for complex back-end coding. It even automatically generates APIs for your data, making it accessible to your project with ease.

This project is perfect for beginners interested in working with real-world sensors and visualizing data on the web. Let's dive in!

To get started:

We'll use an ESP32 microcontroller to grab data from a sensor.
The sensor, in this case, will be a DHT11 , measuring both temperature and humidity.
Nodejs ( We'll talk about it later)

What you'll need:

ESP32 development board
DHT11 sensor
Breadboard and jumper wires

Let's embark on this journey!

1. Building the Circuit

First, we need to build the circuit that connects your ESP32 to the DHT11 sensor. Here's what you'll do:

1.2 Coding part

Now that you have your ESP32 circuit built, it's time to write the code that will interact with the sensor and verify its functionality. This code will be uploaded to your ESP32 board.

Here's a breakdown of the code and its explanation:

1. Libraries and Pin Definition:

#include "DHT.h"#define TYPE DHT11 int sensePin = 2;

#include "DHT.h": This line includes the DHT library, which provides functions for communicating with DHT sensors like the DHT11.
#define TYPE DHT11: This line defines the type of sensor you're using. In this case, we're specifying DHT11.
int sensePin = 2;: This line declares a variable named sensePin and assigns it the value 2. This variable stores the pin number on your ESP32 that is connected to the data pin of the DHT11 sensor. You might need to adjust this value depending on your specific circuit wiring.

2. Object Creation and Setup:

DHT HT(sensePin, TYPE); void setup() { Serial.begin(9600); HT.begin(); }

DHT HT(sensePin, TYPE);: This line creates an object named HT of type DHT. It provides methods to interact with the sensor connected to the sensePin. We're passing the previously defined sensePin variable and the sensor type (DHT11) to the constructor.
void setup(): This function runs once when the ESP32 starts up. Inside the setup function:

3. Reading Sensor Data and Printing to Serial Monitor:

void loop() { humidity = HT.readHumidity(); tempC = HT.readTemperature(); Serial.print("Humidity: "); Serial.println(humidity); Serial.print("Temperature C: "); Serial.println(tempC); delay(setTime); }

void loop(): This function runs repeatedly after the setup() function finishes. This is where the actual sensor data reading and processing happen.

You find the code here: esp32-directus

2.Setting Up the Web Environment (Directus)

Now that you've verified your ESP32 circuit and sensor functionality, let's prepare the web environment to receive and visualize that data! Here, we'll leverage the power of Directus.

What is Directus?

Directus is an open-source data platform that acts as a bridge between your databases and web applications. It offers a user-friendly interface to:

Store and Manage Data: Directus eliminates the need for complex back-end coding. It allows you to create data models (like tables) and manage sensor readings efficiently.
Build APIs in Minutes: Directus automatically generates RESTful APIs for your data, making it accessible to your ESP32 code or any web application for seamless data exchange. moreover, it provides a socket connection (that we will use in our project to send the data)
Beautiful User Interface: Directus provides a clean and intuitive web interface for users to view, edit, and even filter sensor data. Imagine viewing real-time temperature and humidity readings from your web browser!

In essence, Directus acts as the central hub for your sensor data, streamlining the process of storing, managing, and ultimately visualizing it on a web application.

Here's a breakdown of how we'll use Directus:

Installation: We'll install Directus using Node.js, a popular tool for building web applications. Don't worry if you haven't used Node.js before - we'll walk you through the simple installation process.
Project Creation: We'll create a new Directus project specifically for your sensor data. Think of it as a dedicated space within Directus to manage data from your ESP32.
Collection: We'll define a data table within your Directus project. This table will have columns to store the sensor readings (humidity and temperature) received from your ESP32.

2.1 Setting Up the Environment (Node.js)

To install Directus, we need Node.js on our computer. It's a free and easy download. Here's how to get it:

Head over to the official Node.js website: https://nodejs.org/en.
Download the installer suitable for your operating system (Windows, Mac, or Linux).
Run the downloaded installer and follow the on-screen instructions.

Once Node.js is installed, you can verify it by opening a command prompt ( Command Prompt on Windows, Terminal on Mac/Linux) and typing:

node -v

This should display the installed Node.js version. Now you're ready to use Node.js for setting up Directus!

2.2 Install Directus: Your Data Management Hub

Now that you have Node.js set up, it's time to install Directus! Think of Directus as a central hub where all your sensor data will be stored and organized. Here's how to install it with ease:

1. Open your Command Prompt (Windows) or Terminal (Mac/Linux):

You'll use the command prompt to interact with Node.js and install Directus.

2. Navigate to your project folder (optional):

If you're working within a specific folder for this project, use the cd command to navigate to that directory. For example, if your project folder is named "web_project", you'd type:

cd web_project

3. Run the installation command:

Here's the magic spell (command) to install Directus:

npm init directus-project@latest <project-name>

Replace <project-name> with your desired name for this project. For instance, you could name it "sensor_app". So, the complete command would look like:

npm init directus-project@latest sensor_app

Hit Enter! This command will download and install all the necessary files for Directus within your project folder.

4. Follow the interactive setup:

Once you run the installation command, Directus will ask you a few questions to configure your project. Here's what to expect:

Choose your database client: Select "SQLite" as it doesn't require separate installation.
Database File Path: Press Enter to accept the default path within your project folder.
Create your first admin user: Enter a valid email address
Enter your password: Create a password for your Directus admin account.

That's it! Directus is now installed and ready to be configured. We'll explore setting up your Directus project and creating a data table for your sensor readings in the next steps.

IP Configuration:

we need to configure Directus to receive data from your ESP32. Here's how:

Find your IP address: Open a command prompt and type ipconfig (Windows) or ifconfig (Linux). Locate the "IPv4 Address" section and copy the IP address displayed.
Modify the .env file: In your project folder, locate a file named ".env". Open it with a text editor.
Change the HOST: Find the line that reads HOST="0.0.0.0" and replace it with HOST="<YOUR_IP>". Replace "" with the actual IP address you copied in the previous step.
Add new parameter:
Save the changes.

Start the Directus application:

Navigate back to your project folder in the command prompt and run the following command:

npx directus start

This will start the Directus application. You can now access the Directus interface in your web browser by visiting http://<YOUR_IP>:8055.

3. Setting Up Data Collection and Users

Now that Directus is installed and running, let's configure it to manage your sensor data:

3.1 Create a Collection (Table)

Create Collection: Click on "Create Collection" in the Directus interface.
Name the Collection: In the pop-up window, enter a name for your collection. Let's call it "dht_sensor". This will be the table where your sensor readings (humidity and temperature) will be stored.
Define Fields: Click "Next" and select created_at and let other optional fields untouched for now.
Add Fields for Sensor Data: Click "Add Field". Choose "Input" for the field & Float as the type.

Tip: You can refer to the provided video for a visual reference on these steps.

https://www.youtube.com/watch?v=eykeYjh33fs

3.2 Create a User

While you can use your existing login to create the collection, creating a dedicated user for your ESP32 offers some benefits:

Security: It keeps data originating from the ESP32 separate from your admin account.
Access Control: You can restrict this user's access to specific functionalities in the future (advanced topic).

To create a user:

Navigate to Users: Click on the "Users" icon (second button on the menu bar).
Create a User: Click the "Create Item" button (top right corner).
Fill User Details: Enter a name, email address, and a strong password for this user.
Assign Role: Scroll down and select the "Administrator" role.
Generate an API Token: Click on "Generate Token" and save the generated token securely. You'll need this token in your ESP32 code to send data to Directus.

Congratulations! You've successfully set up Directus to store your sensor data. In the next article, we'll explore how to send data from your ESP32 to this Directus application and visualize the readings in charts!

Understanding Serial Ports: Lamp Control via Web App and Serial Communication

Ayoub Touba — Wed, 21 Feb 2024 11:00:15 +0000

Are you interested in connecting Arduino boards (or other microcontrollers) to the web to create interactive projects? If so, this project is for you! We'll guide you through the process of building a web-controlled lamp, showcasing the power of serial communication and laying the foundation for further exploration.

Unleashing the Power of Serial Ports:

Imagine a bridge connecting the digital realm of your computer to the tangible world of sensors and actuators. That's what a serial port does, allowing data to flow bi-directionally, one bit at a time. This project hinges on this simple yet powerful technology.

Hardware and Software:

Arduino Board: Any Arduino board with a USB port will do.
RGB LED: A common component to add color to your project.
Jumper Wires: Connect various components.
Breadboard: Simplifies prototyping and wiring.
Node.js and npm: Used for creating the web server.
Serial Port Monitor (optional): For initial testing and debugging.

Building the Lamp Circuit:

Before the code comes to life, we need to assemble the hardware. Gather your Arduino board, an RGB LED, resistors, and some jumper wires. Connect the components as shown in the diagram, powering the LED from the Arduino and controlling its individual red, green, and blue channels with separate pins. (red to Pin 3, green to Pin 5, and blue to Pin 6)

Crafting the Code Symphony:

Now, let's orchestrate the communication between our devices. The Arduino code listens for incoming data through the serial port, parses it as color information, and then uses that information to adjust the LED's brightness accordingly. The Node.js server acts as the middleman, receiving color selections from the web app and relaying them to the Arduino. Finally, the React.js frontend provides a user-friendly interface where you can choose your desired lamp color.

Delving into the Code Details:

Arduino Code:

const byte PIN_LED_R = 3;const byte PIN_LED_G = 5;const byte PIN_LED_B = 6;const byte dt = 1000;void setup() { Serial.begin(9600); pinMode(PIN_LED_R, OUTPUT); pinMode(PIN_LED_G, OUTPUT); pinMode(PIN_LED_B, OUTPUT);}void loop() { // Check if there is serial data available if (Serial.available() > 0) { // Read the incoming data String data = Serial.readStringUntil('\\n'); Serial.println(data); Serial.print("Getting Color : "); Serial.println(data); // Parse the data and extract RGB values parseAndDisplayColor(data); } delay(dt);}void displayColor(byte r, byte g, byte b) { analogWrite(PIN_LED_R, r); analogWrite(PIN_LED_G, g); analogWrite(PIN_LED_B, b);}void parseAndDisplayColor(String data) { if (data.length() == 7 && data[0] == '#') { // Extract hexadecimal values for R, G, and B long hexValue = strtol(data.substring(1).c_str(), NULL, 16); int r = (hexValue >> 16) & 0xFF; int g = (hexValue >> 8) & 0xFF; int b = hexValue & 0xFF; // Display the color displayColor(r, g, b); }}

Let's break down the void loop() part of the Arduino code:

Serial Data Reception if (Serial.available() > 0) { ...}This line checks if there is any data available to be read from the serial port. If there is, it proceeds to read the incoming data.
Reading:
Parsing and Displaying Color:

Now, let's take a look at the helper functions:

void displayColor(byte r, byte g, byte b) { analogWrite(PIN_LED_R, r); analogWrite(PIN_LED_G, g); analogWrite(PIN_LED_B, b);}void parseAndDisplayColor(String data) { if (data.length() == 7 && data[0] == '#') { // Extract hexadecimal values for R, G, and B long hexValue = strtol(data.substring(1).c_str(), NULL, 16); int r = (hexValue >> 16) & 0xFF; int g = (hexValue >> 8) & 0xFF; int b = hexValue & 0xFF; // Display the color displayColor(r, g, b); }}

displayColor Function:

analogWrite(PIN_LED_R, r);: Sets the intensity of the red LED based on the value of r. Similar statements apply to the green and blue LEDs.

parseAndDisplayColor Function:

Check if the received data has a length of 7 characters and starts with the '#' character, ensuring it is a valid color representation.
Extracts the hexadecimal value from the color data (excluding the '#').
Separates the hexadecimal value into individual R, G, and B components.

In summary, the void loop() continuously checks for incoming serial data, reads and prints the data, then parses and displays the color on the RGB LED based on the received information. The delay between iterations helps control the loop's execution speed.

Node.js Server Code:

const express = require("express");const { SerialPort } = require("serialport");const { ReadlineParser } = require("@serialport/parser-readline");const cors = require("cors");const app = express();const port = 3001;const portName = "COM3"; // Change 'COM3' to your Arduino portconst portNumber = 9600;const arduinoPort = new SerialPort({ path: portName, baudRate: portNumber });const parser = arduinoPort.pipe(new ReadlineParser({ delimiter: "\\r\\n" }));app.use(express.json());app.use(cors());app.post("/sendData", (req, res) => { const { data } = req.body; console.log(`Sending data to Arduino: ${data}`); arduinoPort.write(data); res.send("Data sent to Arduino");});app.listen(port, () => { console.log(`Server is running on <http://localhost>:${port}`);});

const arduinoPort = new SerialPort({ path: portName, baudRate: portNumber });

The SerialPort class from the serialport library is used to create an instance called arduinoPort. This instance represents the communication channel between the Node.js server and the connected Arduino. The parameters passed to the SerialPort constructor include the path to the Arduino's serial port (portName) and the baud rate (portNumber).

const parser = arduinoPort.pipe(new ReadlineParser({ delimiter: "\\r\\n" }));

The ReadlineParser is created and attached to the arduinoPort. This parser is essential for handling the incoming data as lines, which is crucial when dealing with data sent over serial communication. The delimiter option specifies the line ending character(s) that indicate the end of a message.

API Endpoint for Sending Data:

React.js Frontend Code:

import { useState } from "react";import "./App.css";import Lamp from "./Lamp";import axios from "axios";function App() { const [lampColor, setLampColor] = useState("#f1c40f"); const handleColorChange = (e) => { setLampColor(e.target.value); sendDataToArduino(); }; const sendDataToArduino = () => { axios .post("<http://localhost:3001/sendData>", { data: lampColor + "\\n" }) .then((response) => { console.log(response.data); }) .catch((error) => { console.error("Error sending data to Arduino:", error); }); }; return ( <div className="flex h-screen items-center justify-center"> <Lamp color={lampColor} /> <div className="ml-4"> <label htmlFor="colorInput" className="text-gray-700"> Lamp Color: </label> <input type="color" id="colorInput" value={lampColor} onChange={handleColorChange} className="ml-2" /> </div> </div> );}export default App;

A color picker allows users to select colors.
handleColorChange() updates the selected color and triggers data transmission.
axios.post() sends color data to the Node.js server.

Dive into the Project Code:

This project code is available on GitHub: serialport-communication The repository contains all the necessary files and a detailed readme explaining the setup, code, and usage instructions. Feel free to explore and customize the code further based on your preferences.

Key Components Explained:

Serial Communication: This project hinges on serial communication, a method of transmitting data one bit at a time. It acts as the bridge between your computer and the Arduino, enabling control over the lamp.
Libraries and Frameworks: The code leverages powerful libraries and frameworks to simplify development.
Data Parsing: The Node.js server plays a crucial role in parsing the incoming color data from the web app. It extracts the relevant information and transmits it to the Arduino in a compatible format.
User Interaction: The React.js frontend provides a seamless user experience. You can choose your desired lamp color using a convenient color picker, and the changes are instantly reflected in the real world.

Beyond the Basics:

This project serves as a springboard for your journey into the exciting world of interactive electronics. Feel free to experiment and expand upon this foundation:

Sensory Integration: Incorporate sensors to gather environmental data (e.g., temperature, light levels) and adjust the lamp color accordingly, creating an interactive and responsive environment.
Multi-LED Control: Connect and control multiple LEDs to create dynamic lighting effects, transforming your space with vibrant colors and animations.

Don't hesitate to explore and build upon this project! With your imagination and ingenuity, you can unlock endless possibilities in the realm of interactive electronics. So, grab your Arduino, delve into the code, and start creating!

Remember: The GitHub repository mentioned above holds all the essential resources to get you started. Embrace the learning process, experiment, and have fun!

Unlocking Algorithmic Efficiency with Big O Notation

Ayoub Touba — Fri, 16 Feb 2024 17:52:52 +0000

Remember the last time you searched for something online? Whether it was finding the perfect recipe, booking a dream vacation, or simply catching up with friends on social media, algorithms silently powered your experience. But have you ever wondered how these algorithms navigate mountains of data so swiftly? The answer lies in a fascinating tool called Big O notation, and understanding it can be your secret weapon to writing efficient and impressive code.

Decoding Big O: Your Map to Algorithmic Efficiency

Imagine yourself lost in a vast library, desperately searching for a specific book. Would you blindly check every shelf, page by page? Or would you employ a more strategic approach, perhaps utilizing the alphabetical order or genre sections? Big O notation works similarly, analyzing algorithms like resourceful explorers traversing "data landscapes." It estimates the worst-case time complexity how long an algorithm might take to complete a task as the amount of data (books in the library) grows infinitely. By focusing on the key factor impacting execution time, it provides a valuable roadmap for choosing the right algorithm for the job.

Why Understanding Big O Matters:

In the digital age, where milliseconds can make a difference, Big O empowers you to:

Be an algorithm aficionado: Select the most efficient algorithm for your task, akin to picking the fastest route through the library. Imagine comparing linear search (checking every shelf) to binary search (repeatedly halving the search space) for a specific book Big O helps you make the optimal choice.
Predict future performance: Anticipate how algorithms will handle data growth. Think of preparing the library for an influx of new books. By understanding an algorithm's Big O, you can ensure it stays efficient even as data volumes increase.
Become an optimization wizard: Identify and fix bottlenecks that slow down algorithms, just like streamlining library organization for quicker searches. Big O helps you pinpoint areas for improvement, making your code run smoother and faster.

Exploring the Big O Spectrum: From Constant to Complex

Now, let's embark on a journey through different Big O types, each representing a distinct level of efficiency:

O(1) - Constant Time: Imagine finding the book instantly because you know its exact location, like remembering the Dewey Decimal code. This algorithm's execution time remains constant regardless of data size, making it incredibly efficient for specific lookups.

function findBookByCode(library, code) { // Access book directly using unique code (O(1)) return library[code];}

O(n) - Linear Time: Think of checking each book on a shelf one by one until you find the one you're looking for. This algorithm's execution time grows linearly with the number of books, suitable for smaller datasets but potentially slow for massive libraries.

function findBookByTitleLinear(library, title) { for (const book of library) { if (book.title === title) { return book; } } return null; // O(n)}

O(log n) - Logarithmic Time: Imagine repeatedly dividing the library in half based on alphabetical order until you find the book. This algorithm's execution time grows logarithmically, meaning it significantly outperforms linear search for vast data volumes.

function findBookByTitleBinary(library, title) { let low = 0; let high = library.length - 1; while (low <= high) { const mid = Math.floor((low + high) / 2); if (library[mid].title === title) { return library[mid]; } else if (library[mid].title < title) { low = mid + 1; } else { high = mid - 1; } } return null; // O(log n)}

O(n^2) - Quadratic Time: Imagine checking every possible pair of books in the library to find two that match a certain criteria. This algorithm's execution time explodes quadratically with the number of books, becoming inefficient for large datasets.

function findMatchingBookPairs(library, criteria) { for (let i = 0; i < library.length; i++) { for (let j = i + 1; j < library.length; j++) { if (library[i].matchesCriteria(criteria) && library[j].matchesCriteria(criteria)) { // Process matching pair

Visualizing and Comparing Performance with YubaPerf (Node.js)

While Big O notation provides a theoretical understanding of an algorithm's efficiency, sometimes you need a more concrete and visual representation to compare different algorithms or track performance changes in your Node.js code. This is where libraries like YubaPerf come in handy.

YubaPerf in Action:

YubaPerf, is a Node.js library specifically designed to assist you in measuring and comparing the performance of code and algorithms. It offers several key features:

Function Comparison and Charting: Directly compare the performance of multiple functions with different arguments, generating an interactive chart to visualize the results. This makes it easy to identify performance bottlenecks and select the most efficient algorithm for your task.
Multi-Argument Support: Pass a single function with multiple arguments to measure its performance under various input conditions. This helps you gain a comprehensive understanding of how your code behaves under different loads.

Example:

Suppose you're implementing two sorting algorithms in Node.js: bubble sort and merge sort. You can use YubaPerf to compare their performance on different array sizes and create an interactive chart to visualize the results. This would help you determine which algorithm is more efficient for your specific use case.

Beyond the Basics:

While YubaPerf excels at performance measurement and comparison, it can also be used for:

Benchmarking: Compare the performance of your code against existing libraries or frameworks.
Educational Tool: Visualize the impact of algorithmic complexity on performance, making Big O notation more concrete and intuitive.

Getting Started with YubaPerf:

Install YubaPerf using npm or yarn:
Import the necessary functions from YubaPerf in your Node.js code.
Use perfom.setfuncsToCompareSync to specify the functions and arguments you want to compare.
Call perfom.generateChart() to generate an interactive chart visualizing the performance comparison.
(Optional) Use perf.start and perf.end to measure the execution time of specific code sections within a function for detailed profiling.

Example:

import { Perfom } from "@youba/yubaperf";function addUpToFirst(n) { var total = 0; for (var i = 0; i <= n; i++) { total += i; } return total;}function addUpToSecond(n) { return (n * (n + 1)) / 2;}let args = [1, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000,];Perfom.setfuncsToCompareSync([addUpToFirst, addUpToSecond], args);Perfom.generateChart(); // The chart created in the perf //folder in the root of the project

Conclusion

The Big O notation unlocks a hidden superpower: the ability to write efficient and scalable code. By understanding how algorithms behave with increasing data loads, you can make informed decisions, avoid performance bottlenecks, and create applications that excel in the data-driven world. Start your journey into the fascinating realm of Big O today, and unleash the full potential of your code!

Finding the Sweet Spot: Why Knowing Business Stuff Makes You a Better Developer

Ayoub Touba — Sat, 10 Feb 2024 18:15:53 +0000

You know how we're constantly immersed in intricate lines of code, ensuring seamless functionality? Well, here's the scoop: it's crucial to occasionally step away from our coding realms and delve into the intricacies of the business world. Trust me, it's not merely about earning brownie points with the higher-ups; it's about elevating our professional trajectories and imbuing our code with genuine significance.

Understanding the Bigger Picture:

Envision this: you're architecting an incredible app, but do you truly comprehend the raison d'tre behind its creation? Taking a minute to understand what the boss and the business experts want can make a huge difference. It's like knowing the game plan before you hit the field. Understanding the big picture helps us write code that's not just fancy but also helps the business win.

Communicating in Layman's Terms:

We're great at coding, but sometimes our non-techy friends get lost in our tech-talk. Learning to speak their language is like adding a secret weapon to our arsenal. When we can explain our brilliant code in a way that makes sense to everyone, it's like turning on a magic switch. Suddenly, everyone gets it, and the project sails smoothly.

Making Code Count for Something:

Ever sensed that your code is a formidable force lacking direction? By forging connections with the business side, we breathe purpose into our code. Rather than merely solving technical puzzles, we contribute directly to business growth be it enhancing revenue or fostering customer satisfaction. Our code transforms into a powerhouse with a mission and impact!

Advancing Your Career:

We all want to climb that career ladder, right? Well, being a coding maestro is just the first step. Employers drool over developers who get the business side too. It's like having a double skill set. Suddenly, you're not just a coder; you emerge as a genuine developer who comprehends how to not only write stellar code but also catalyze business prosperity.

Making Smart Choices:

In our coding adventures, we face choices like champions facing challenges. Knowing the business goals helps us make champion-level decisions. We can pick the features that matter most, use our coding skills wisely, and be the champions who save the day without breaking a sweat.

So, dear readers, it's time to put on our business hats alongside our coding caps. Balancing both worlds isn't just about meetings and reports; it's about making our code count and making us champions in the tech world. Let's not just write awesome code; let's write code that changes the game for the business too!

Unlock the Power of Project Narratives: Why Documenting Your Code Journey Matters

Ayoub Touba — Fri, 09 Feb 2024 21:02:44 +0000

After tackling numerous projects, both professionally and personally, one valuable lesson has stood out documenting your code and project journey is just as crucial as writing the code itself. It's tempting to think that every detail will be etched in memory, but over time, the intricacies tend to fade away.

Acknowledging that starting a documentation habit can be daunting, especially if it's not part of your routine, is the first step. The task of creating a comprehensive documentation often feels overwhelming, leaving us unsure of where to even begin. To overcome this challenge, here's a practical solution: develop a simple template that requires filling in the details. Additionally, consider using tools like ChatGPT to generate relevant questions, streamlining the documentation process.

Imagine a template like this:

[PROJECT]-[DATE]:

Unfamiliar tasks undertaken
[Impact of client requests on code, leading to shifts in our development strategy]
Archiving the latest client discussion highlights

This structured approach not only ensures consistency but also prompts reflection on specific aspects of your work. It becomes a valuable resource, especially when revisiting projects or onboarding new team members.

Conclusion:

In summary, taking the time to document your code journey and project history is a small investment that yields significant returns in the long run. Whether you're a seasoned professional or just starting out, the benefits of maintaining a well-documented log go beyond personal convenience. It fosters collaboration, aids in troubleshooting, and provides a comprehensive overview of the project's evolution. So, don't procrastinate start logging your history today and empower yourself for a more efficient and informed coding future.

Announcing Version 2.0 of nestjs-DbValidator

Ayoub Touba — Fri, 09 Feb 2024 20:45:22 +0000

We are excited to unveil version 2.0 of nestjs-DbValidator, a feature-packed module providing custom database validators using class-validator and typeorm for Nest.js applications. This latest release comes with an array of enhancements, new features, and bug fixes, making it even more versatile and compatible with the latest Nest.js versions.

What's New in Version 2.0

Custom Type Support In version 2.0, we introduce the ability to customize the type of the column for validation. Now you can specify the type using the customType parameter, allowing for more flexibility in handling different data types.

@isExistDb({ table: 'user', column: 'firstName', customType: TYPECOLUMN.STRING })idcities: any;

2. Nest.js 9 and Above Compatibility We are excited to announce that nestjs-DbValidator has been upgraded to support Nest.js version 9 and above. This ensures seamless integration with the latest features and improvements introduced in the Nest.js framework. Thanks to @DevDeNiro for their significant contribution in the upgrade.

To upgrade to version 2.0, simply update your package using the following command:

Getting Started with Version 2.0

npm update @youba/nestjs-dbvalidator# oryarn upgrade @youba/nestjs-dbvalidator

After updating, be sure to check the documentation for any additional configuration changes and new features introduced in this release.

A Brief Review of nestjs-DbValidator

Overview

nestjs-DbValidator is a Nest.js module that simplifies database validation in your applications. It leverages the power of class-validator and typeorm to offer a seamless and intuitive way to validate data against your database.

Key Features

isExistDb : Checks if a value already exists in the specified table and column. isUniqueDb : Verifies if a value is unique within the specified table and column. isLowerDb : Validates if a value is lower, useful for scenarios such as checking client credits.

isBiggerDb : Validates if a value is bigger, suitable for cases like checking stock levels.

Easy Integration

The library is easy to integrate into your Nest.js application. By adding a few lines of code, you can enhance the validation capabilities of your DTOs and entities.

Version 2.0 Improvements Version 2.0 builds upon the success of the previous release by introducing custom-type support and ensuring compatibility with Nest.js 9 and above.

Conclusion

Feel free to provide feedback, report issues, or contribute to the project on GitHub.

Happy coding!

Release new Library to measure & compare your Code!!

Ayoub Touba — Mon, 01 Nov 2021 10:38:58 +0000

Hello Guys, I hope All of you doing well.

Sometimes we want to measure our code to check how much time it took to work, Moreover, after improving the code we'd like to check if it works more efficiently than the older version, Or for academic purpose we want to compare algorithms to check the time complexity on a chart, For that reason I Present you YubaPerf

How To install it

npm i @youba/yubaperf
# OR
yarn add @youba/yubaperf

How to use it

Measuring your code:

To measure your code, you need to use these functions:

Perf.start("Algorithm1");
//The code you want to measure
Perf.end("Algorithm1");
console.log(perf.result("Algorithm1"));

Comparing Sync functions:

The concept here is to pass one or more than function with multiple args to measure and compare between them,

You simply need:

Perfom.setfuncsToCompareSync([addUpToFirst, addUpToSecond], args);
Perfom.generateChart(); // the chart located on perf/index.html file

Passing Array of functions & Another one for arguments .the arguments may be a simple Array like :
[1,10,1000,1000,122] Or dimensional one for Functions who has more than input like [['yes',19],['yes',1900],['yes',19999]]

The Chart:

What's next

The lib is on development,the next version will have more features like:

Comparing async functions
setfuncsToCompareSync Return an object of the result
...

For more information on the library you can check the repo HERE