Week 14 Updates

src/views/Week14.vue

@@ -2,7 +2,7 @@
   <div class="item">
     <div class="details">
       <h1>
-        Week 13. Networking and Communication
+        Week 14. Networking and Communication
       </h1>
       <h2>Task</h2>
       <strong>Group assignment:</strong>
@@ -17,6 +17,289 @@
         Link to the group assignment: <a href="https://gitlab.fabcloud.org/academany/fabacademy/2024/labs/ostriv/group-assignments/-/tree/main/networking-and-communications?ref_type=heads"> Group Assignment</a>
       </p>
       <h2>Individual assignment</h2>
+      <div>To investigate the possibilities of wireless board connections further I decided first to reproduce the flow I created for Week 8. Electronic design, but do the communication 
+        wirelessly. For Electronic design week I had 2 different boards, one was Esp32-C3 with display, and the other was RP2040 with button on it, and I 
+        connected both boards by wire to show something on board 1 when button on board 2 clicked. Now I want to try it using networking communication.
+      </div>
+      <h4>Components</h4>
+      <ul>
+          <li><strong>Board 1 (Receiver), ESP32-C3</strong> - My board from Week 9,  with an OLED display, acting as the server.</li>
+          <li><strong>Board 2 (Sender), ESP32-C3</strong> - The board from the Group Assignment with a vibration motor, acting as the client.
+            <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week14/boards.jpg' alt='boards'>
+                <figcaption>Boards which are used</figcaption>
+              </figure>
+            </div>
+          </li>
+       
+      </ul>
+
+      <h4>Architecture Overview</h4>
+      <p>This system follows a <strong>Client-Server Architecture</strong>:</p>
+      <ul>
+          <li><strong>Client (Sender - Board 2):</strong> Sends an HTTP GET request when triggered.</li>
+          <li><strong>Server (Receiver - Board 1):</strong> Displays an alert when a request is received.</li>
+      </ul>
+
+      <h4>ESP32 Wi-Fi Modes of Operation</h4>
+      <p>I learned that ESP32 boards allow to use them in different mods. Here is the short description of each one:</p>
+      <p>The ESP32 supports various Wi-Fi modes, allowing it to adapt to different networking requirements:</p>
+
+      <h5>1. Station Mode (STA)</h5>
+      <p>In this mode, the ESP32 connects to an existing Wi-Fi network, similar to how smartphones and laptops connect.</p>
+      <ul>
+          <li>Use Case: IoT devices that need internet access or connect to a local network.</li>
+          <li>Example: Home automation systems connecting to a router.</li>
+      </ul>
+
+      <h5>2. Access Point Mode (AP)</h5>
+      <p>The ESP32 creates its own Wi-Fi network, allowing other devices to connect directly to it.</p>
+      <ul>
+          <li>Use Case: Local control without internet, such as device configuration or local IoT hubs.</li>
+          <li>Example: A smart device that serves a setup webpage for users to configure Wi-Fi credentials.</li>
+      </ul>
+
+      <h5>3. Station + Access Point Mode (STA + AP)</h5>
+      <p>In this mode, the ESP32 connects to a Wi-Fi network (STA) while also creating its own Wi-Fi network (AP).</p>
+      <ul>
+          <li>Use Case: IoT gateways that need to connect to the internet while allowing local devices to connect.</li>
+          <li>Example: A sensor hub that forwards data to a cloud service while allowing local monitoring.</li>
+      </ul>
+
+      <h5>4. Mesh Networking Mode</h5>
+      <p>The ESP32 devices form a mesh network, where multiple nodes communicate directly with each other without a central router.</p>
+      <ul>
+          <li>Use Case: Large-scale IoT networks where coverage across a wide area is needed.</li>
+          <li>Example: Smart agriculture systems for monitoring across large farms.</li>
+      </ul>
+
+      <h5>5. Wi-Fi Direct (P2P)</h5>
+      <p>Allows direct device-to-device communication without a router, using the Wi-Fi Direct standard.</p>
+      <ul>
+          <li>Use Case: Peer-to-peer data sharing or multiplayer gaming.</li>
+          <li>Example: File transfer between ESP32 devices without an intermediary router.</li>
+      </ul>
+
+      <p>I decided to choose the <strong>Wi-Fi Station Mode (STA)</strong>, connecting to a shared Wi-Fi network of our Ostriv lab.</p>
+
+      <ol><h2>Steps of work:</h2>
+        <li><p>First, I decided to start from Server Board - my board with ESP32-C3 and OLED Display. I needed to write a code, which 
+          will connect to our lab Wi-Fi network, so the board will be available by IP address, and I plan to use it to send HTTP requests
+          notifications about alarms.
+        </p></li>
+        <li>I needed to install <code>ESPAsyncWebServer.h</code> Arduino Library, which will create a Web Server for me. 
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week14/lib1.png' alt='boards'>
+                <figcaption>Library installation</figcaption>
+              </figure>
+            </div>
+        </li>
+        <li>With the help of ChatGPT I created a basic sketch which should just connect to Wi-Fi and show the message on Display.
+          The libraries needed for WiFi4 part are <pre><code>
+#include &lt;WiFi.h&gt;
+#include &lt;AsyncTCP.h&gt;
+#include &lt;ESPAsyncWebServer.h&gt;
+          </code></pre> and <code>Adafruit_SSD1306.h</code> for OLED display. 
+
+            I needed to setup our local network Wi-Fi credentials to connect to the Wi-Fi, <code>
+              const char* ssid = "Ostriv-Team";
+              const char* password = "**********";
+            </code> and send it to <code>
+              WiFi.begin(ssid, password) 
+            </code>to connect to Wi-Fi.
+            Also I need to create the Web Sever, it's pretty easy using command <code>AsyncWebServer server(80);</code>, which will create a server
+            on standard 80 HTTP port.
+            When the board is connected I want to find out it's IP, using <code>WiFi.localIP()</code>
+        </li>
+        <li>Here is the whole sketch with comments:
+          <pre><code>
+#include &lt;WiFi.h&gt;
+#include &lt;AsyncTCP.h&gt;
+#include &lt;ESPAsyncWebServer.h&gt;
+#include &lt;Adafruit_SSD1306.h&gt;
+
+// OLED Display Configuration
+#define SCREEN_WIDTH 128
+#define SCREEN_HEIGHT 32
+#define OLED_RESET -1
+Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
+
+// Wi-Fi Configuration
+const char* ssid = "Ostriv-Team";
+const char* password = "Team*******";
+
+AsyncWebServer server(80); // Web Server
+
+void setup() {
+  Serial.begin(115200);
+
+  // Initialize OLED Display
+  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
+    Serial.println(F("SSD1306 allocation failed"));
+    for (;;);
+  }
+  display.clearDisplay();
+  display.setTextSize(1);
+  display.setTextColor(SSD1306_WHITE);
+  display.setCursor(0, 10);
+  display.println("Connecting...");
+  display.display();
+
+  // Connect to Wi-Fi
+  WiFi.begin(ssid, password);
+  while (WiFi.status() != WL_CONNECTED) {
+    delay(1000);
+    Serial.println("Connecting to WiFi...");
+  }
+
+  // Print IP Address to Serial Monitor
+  Serial.println("IP Address: ");
+  Serial.println(WiFi.localIP());
+
+  Serial.println("Connected to WiFi");
+  clearDisplay();
+  
+  // Web Server to handle incoming alerts
+  server.on("/alert", HTTP_GET, [](AsyncWebServerRequest *request){ // I use /alert endpoint to send the request
+    displayAlert();
+    request->send(200, "text/plain", "Alert Received");
+    delay(3000); // wait for 3 seconds
+    clearDisplay(); // clear the display
+  });
+  
+  server.begin();
+}
+
+void loop() {
+}
+
+void displayAlert() { // Function for Alert Display
+  display.clearDisplay();
+  display.setTextSize(2);
+  display.setCursor(0, 10);
+  display.println("ALERT!");
+  display.display();
+}
+
+void clearDisplay() { // Function for clear display
+  display.clearDisplay();
+  display.setCursor(0, 10);
+  display.setTextSize(1);
+  display.println("WiFi Connected");
+  display.print("IP: ");
+  display.println(WiFi.localIP());
+  display.display();
+}
+          </code></pre>
+        </li>
+        <li>Testing the code
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week14/testServer1.jpg' alt='boards'>
+                <figcaption>When Wi-Fi connected the message shown on the display</figcaption>
+              </figure>
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week14/testServer2.jpg' alt='boards'>
+                <figcaption>I added the IP address to be shown too</figcaption>
+              </figure>
+          </div>
+          <div class="image-row">
+            <figure class="image-container">
+                  <video controls style="width: 550px">
+                    <source src="../assets/images/week14/testBrowser.mp4" type="video/mp4">>
+                  </video>
+                  <figcaption>Sending HTTP GET requests from browser first to check that it works</figcaption>
+            </figure>
+          </div>
+          Everything works as expected!
+        </li>
+        <li>Starting the Cliend board programming. The idea is to call the requeset of the 1st board when the button is clicked, and 
+          also to vibrate with the motor.
+          For this part I needed a <code>HTTPClient.h</code> library to create an http client, the same credentials, as it's in the same network,
+          and also the URL I am going to use, base on IP address and endpoint part '/alert'. <code>
+            const char* serverUrl = "http://192.168.111.15/alert"; 
+</code>
+        </li> Then, when the Button is clicked, I sent the request to server to notify it about this event, and also vibrate the motor.
+
+        <li>Here it the whole code of Client (Sender) part with comments:
+          <pre><code>
+#include &lt;WiFi.h&gt;
+#include &lt;HTTPClient.h&gt;
+
+// Wi-Fi Configuration
+const char* ssid = "Ostriv-Team";
+const char* password = "Tea*********";
+const char* serverUrl = "http://192.168.111.15/alert"; 
+
+const int buttonPin = 2;  // Button connected to GPIO 2
+const int motorPin = 4;   // Vibro motor connected to GPIO 4
+
+void setup() {
+  Serial.begin(115200);
+  pinMode(buttonPin, INPUT_PULLUP);
+  pinMode(motorPin, OUTPUT);
+
+  // Connect to Wi-Fi
+  WiFi.begin(ssid, password);
+  while (WiFi.status() != WL_CONNECTED) {
+    delay(1000);
+    Serial.println("Connecting to WiFi...");
+  }
+
+  Serial.println("Connected to WiFi");
+}
+
+void loop() {
+  if (digitalRead(buttonPin) == LOW) {
+    sendAlert();
+    activateMotor();
+    delay(1000);  // Debounce delay
+  }
+}
+
+void sendAlert() {
+  if (WiFi.status() == WL_CONNECTED) {
+    HTTPClient http;
+    http.begin(serverUrl);
+    int httpResponseCode = http.GET();
+    Serial.println("response:");
+
+    Serial.println(httpResponseCode);
+    if (httpResponseCode > 0) {
+      Serial.printf("Alert sent, Response code: %d\n", httpResponseCode);
+    } else {
+      Serial.printf("Error sending alert: %s\n", http.errorToString(httpResponseCode).c_str());
+    }
+    http.end();
+  } else {
+    Serial.println("WiFi Disconnected");
+  }
+}
+
+void activateMotor() {
+  digitalWrite(motorPin, HIGH);
+  delay(500);
+  digitalWrite(motorPin, LOW);
+}
+          </code></pre>
+        </li>
+        <li><h3>Testing the whole integration (Hero shot):</h3>
+          <div class="image-row">
+            <figure class="image-container">
+                  <video controls style="width: 650px">
+                    <source src="../assets/images/week14/hero.mp4" type="video/mp4">>
+                  </video>
+                  <figcaption>Testing the whole flow. You can see the WiFi communication and hear the motor vibration</figcaption>
+            </figure>
+          </div>
+        </li>
+      </ol>
+
+      <h2>Conclusion</h2>
+      <p>I used my boards, based on Xiao ESP32-C3 boards and output devices of display and vibro motor to demonstrate wireless communication between them.</p>
     </div>
+
   </div>
 </template>
\ No newline at end of file