Week 15: Interface and Application Programming

This week focuses on creating an interface for our project and writing application code to control the various components and view the data.


Group Assignment

You can find the full documentation: here

For our group assignment, we tried to compare multiple interface options such as:

  • Arduino Cloud
  • Blynk
  • Node-Red

Using the same hardware, we could compare them fairly. Here is our diagram which we used for testing:

In conclusion, we found that Blynk provided the best overall experience because it was easy to use, responsive, and offered a clean mobile interface suitable for most users. Node-RED was the fastest platform because it used local serial communication and provided high flexibility for advanced IoT systems. Arduino Cloud felt more structured and beginner-friendly, especially for learning IoT concepts, but it was slightly slower due to cloud communication. Overall, Blynk is best for simple IoT projects, Node-RED for advanced systems, and Arduino Cloud for beginners.


Individual Assignment

For the individual assignment I will continue working on my final project. This week I will link what I covered in Week 11 Networking & Communication, which were:

  • Detecting when a specific device connects to or disconnects from the network.
  • Sending notifications via a Telegram bot when a device connects to or disconnects from the network.

For this week I will try to build an interface using Blynk, which will let me:

  • Send notifications through the interface
  • View connected devices in real time

Why blynk?

Blynk is a powerful platform that allows for easy creation of mobile interfaces for IoT projects. It provides a user-friendly drag-and-drop interface and supports a wide range of hardware platforms.

Blynk Interface

I choose Blynk after I compare it with other platforms in the group assignment , and I notices that it offers the best balance between ease of use and functionality.

You could download Blynk app from the App Store or Google Play.


Send notifications through Blynk

To send notifications through Blynk, I have followed these steps:

  • Download the Blynk app from the App Store or Google Play
  • Blynk App
  • Create new account on Blynkwebsite
  • log in to your account in the Blynk app on your phone also so you could recieve notifications.

  • Create new template Blynk Template Blynk Template
  • Create events Blynk Events Blynk Events Blynk Events Blynk Events Blynk Events
  • Create device Blynk Device Blynk Device Blynk Device
  • Get the device auth token ans template ID Blynk Auth Token
  • Download Blynk lib to arduino IDE
  • Blynk Library
  • Modify the code from the last week to integrate Blynk functionality
    #define BLYNK_TEMPLATE_ID "TMPL6c9xrYjIq"
    #define BLYNK_TEMPLATE_NAME "final project"
    #define BLYNK_AUTH_TOKEN "5djCwibvwv6S4YwmcPNqvbeWKTbRDqMN"
    
    #define BLYNK_PRINT Serial
    
    #include <WiFi.h>
    #include "esp_wifi.h"
    #include <BlynkSimpleEsp32.h>
    
    char ssid[] = "Lina";
    char pass[] = "687203412";
    
    // Target phone MAC
    uint8_t targetMAC[6] = {
      0x12,
      0xF9,
      0x4E,
      0x3D,
      0x77,
      0xB2
    };
    
    bool phoneDetected = false;
    
    bool sendOnlineMessage = false;
    bool sendOfflineMessage = false;
    
    unsigned long lastSeen = 0;
    
    void sniffer(void* buf, wifi_promiscuous_pkt_type_t type)
    {
        wifi_promiscuous_pkt_t *pkt =
            (wifi_promiscuous_pkt_t*)buf;
    
        uint8_t *payload = pkt->payload;
    
        uint8_t *srcMAC = payload + 10;
    
        bool match = true;
    
        for (int i = 0; i < 6; i++)
        {
            if (srcMAC[i] != targetMAC[i])
            {
                match = false;
                break;
            }
        }
    
        if (match)
        {
            lastSeen = millis();
    
            if (!phoneDetected)
            {
                phoneDetected = true;
    
                Serial.println("====================");
                Serial.println("PHONE DETECTED!");
                Serial.println("====================");
    
                sendOnlineMessage = true;
            }
        }
    }
    
    void setup()
    {
        Serial.begin(115200);
    
        WiFi.mode(WIFI_STA);
    
        Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass);
    
        Serial.println("Connected to WiFi and Blynk!");
    
        esp_wifi_set_promiscuous(true);
    
        esp_wifi_set_promiscuous_rx_cb(&sniffer);
    
        Serial.println("Promiscuous sniffing started...");
    }
    
    void loop()
    {
        Blynk.run();
    
        // Send online notification
        if (sendOnlineMessage)
        {
            sendOnlineMessage = false;
    
            Blynk.logEvent(
                "welcome_home",
                "Welcome Home, don't forget to put your stuff in its place."
            );
        }
    
        // Detect offline state
        if (phoneDetected && millis() - lastSeen > 180000)
        {
            phoneDetected = false;
    
            Serial.println("====================");
            Serial.println("PHONE OFFLINE");
            Serial.println("====================");
    
            sendOfflineMessage = true;
        }
    
        // Send offline notification
        if (sendOfflineMessage)
        {
            sendOfflineMessage = false;
    
            Blynk.logEvent(
                "see_you_later",
                "GoodBey :)"
            );
        }
        delay(1000);
    }
    

    This code uses the Blynk library to connect to the Blynk platform and send notifications when a specific device (identified by its MAC address) connects to or disconnects from the WiFi network. The code sets up a WiFi sniffer to monitor for the target device and uses Blynk's event logging to send notifications to the user's phone.

    You could download the code from here

  • final testing

  • View connected devices in real time

    To view connected devices in real time, I have followed these steps:

    • Create datastrean Blynk Datastream Blynk Datastream Blynk Datastream
    • Create dashboard and view datastream

      Dashboard in web is different than the one in the mobile app each one have its own dashboard, so I will explain how to view connected devices in real time in the phone app which we need:

      Blynk Dashboard Blynk Dashboard Blynk Dashboard Blynk Dashboard Blynk Dashboard Blynk Dashboard
    • Modify the previous code to include real-time device monitoring
      #define BLYNK_TEMPLATE_ID "TMPL6c9xrYjIq"
      #define BLYNK_TEMPLATE_NAME "final project"
      #define BLYNK_AUTH_TOKEN "YOUR_AUTH_TOKEN"
      
      #define BLYNK_PRINT Serial
      
      #include 
      #include "esp_wifi.h"
      #include 
      
      char ssid[] = "YOUR_WIFI";
      char pass[] = "YOUR_PASSWORD";
      #define TRIG_PIN 4
      #define ECHO_PIN 5
      
      // ---------- Target Phone MAC ----------
      uint8_t targetMAC[6] = {
        0x12,
        0xF9,
        0x4E,
        0x3D,
        0x77,
        0xB2
      };
      
      // ---------- WiFi Detection ----------
      bool phoneDetected = false;
      
      bool sendOnlineMessage = false;
      bool sendOfflineMessage = false;
      
      unsigned long lastSeen = 0;
      
      // ---------- Slot State ----------
      bool itemInPlace = false;
      
      // ---------- WiFi Sniffer ----------
      void sniffer(void* buf, wifi_promiscuous_pkt_type_t type)
      {
          wifi_promiscuous_pkt_t *pkt =
              (wifi_promiscuous_pkt_t*)buf;
      
          uint8_t *payload = pkt->payload;
      
          uint8_t *srcMAC = payload + 10;
      
          bool match = true;
      
          for (int i = 0; i < 6; i++)
          {
              if (srcMAC[i] != targetMAC[i])
              {
                  match = false;
                  break;
              }
          }
      
          if (match)
          {
              lastSeen = millis();
      
              if (!phoneDetected)
              {
                  phoneDetected = true;
      
                  Serial.println("====================");
                  Serial.println("PHONE DETECTED!");
                  Serial.println("====================");
      
                  sendOnlineMessage = true;
              }
          }
      }
      
      // ---------- Read Ultrasonic Distance ----------
      float readDistance()
      {
          digitalWrite(TRIG_PIN, LOW);
          delayMicroseconds(2);
      
          digitalWrite(TRIG_PIN, HIGH);
          delayMicroseconds(10);
      
          digitalWrite(TRIG_PIN, LOW);
      
          long duration = pulseIn(ECHO_PIN, HIGH);
      
          float distance = duration * 0.034 / 2;
      
          return distance;
      }
      
      void setup()
      {
          Serial.begin(115200);
      
          // Ultrasonic pins
          pinMode(TRIG_PIN, OUTPUT);
          pinMode(ECHO_PIN, INPUT);
      
          WiFi.mode(WIFI_STA);
      
          Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass);
      
          Serial.println("Connected to WiFi and Blynk!");
      
          // Start WiFi sniffing
          esp_wifi_set_promiscuous(true);
      
          esp_wifi_set_promiscuous_rx_cb(&sniffer);
      
          Serial.println("Promiscuous sniffing started...");
      }
      
      void loop()
      {
          Blynk.run();
      
          // ---------- ONLINE Notification ----------
          if (sendOnlineMessage)
          {
              sendOnlineMessage = false;
      
              Blynk.logEvent(
                  "welcome_home",
                  "Welcome home! Don't forget to put your stuff in its place."
              );
          }
      
          // ---------- OFFLINE Detection ----------
          if (phoneDetected && millis() - lastSeen > 180000)
          {
              phoneDetected = false;
      
              Serial.println("====================");
              Serial.println("PHONE OFFLINE");
              Serial.println("====================");
      
              sendOfflineMessage = true;
          }
      
          // ---------- OFFLINE Notification ----------
          if (sendOfflineMessage)
          {
              sendOfflineMessage = false;
      
              Blynk.logEvent(
                  "see_you_later",
                  "Goodbye :)"
              );
          }
      
          // ---------- Ultrasonic Logic ----------
          float distance = readDistance();
      
          Serial.print("Distance: ");
          Serial.println(distance);
      
          // Item exists if distance is less than 25 cm
          if (distance < 18)
          {
              if (!itemInPlace)
              {
                  itemInPlace = true;
      
                  Serial.println("ITEM IN PLACE");
      
                  // Dashboard update
                  Blynk.virtualWrite(V0, "ITEM IN PLACE"
                  );
              }
          }
          else
          {
              if (itemInPlace)
              {
                  itemInPlace = false;
      
                  Serial.println("ITEM MISSING");
      
                  // Dashboard update
                  Blynk.virtualWrite(V0, "ITEM MISSING");
              }
          }
      
          delay(1000);
      }
      

      This code integrates real-time device monitoring with the previous functionality. It uses an ultrasonic sensor to detect whether an item is in place and updates the Blynk dashboard accordingly. The code continues to monitor for the target device's presence on the WiFi network and sends notifications as before.

      You could download the code from here.

    • Final testing