Mood Signal : Help You to Not Get Distracted by Others

Mood Signal: Help You to Not Get Distracted by Others

ai generated images

Have you ever been distracted by your coworkers or family members while working? It can be particularly challenging during a company call, especially when working from home. Sometimes, they come to share news or “ chit-chat ” without considering your mood or the interruption it may cause. These interruptions can hurt your focus and productivity. So how do you let them know you are working on something by telling them?. that I why built this Mood signal

A tiny IOT LED device that lets every know how you are doing using the colour of the LED.

How the LED colours will indicate your mood

• Red:Busy (It's a situation where you shouldn't even consider trying to interrupt.)
• Yellow:Working (I’m busy, but feel free to talk if it's necessary.)
• Green: Free (Yes! I have time for a little small talk.)

Users can remotely switch between colours via a web page. The device is controlled through a Wi-Fi network. They can also adjust the brightness of the LED and create custom colours. The device is battery-powered, making it easy to place anywhere, such as on your laptop or in front of your door using Velcro. This project might look silly but it might be useful for someone (I hope it dose)

The control page is user-friendly and features three mood buttons along with a brightness control slider for the LED. Users also have the option to select custom colors. You can switch between the different moods by pressing the corresponding button. The current mood of the LED is displayed on the web page for users to see.

Now, let's change my MOOD SIGNAL to Red and I'll show you how it’s made!

Supplies

Parts

• Seeed Studio XIAO ESP32C3
• BMS + 5v booster module
• Push Button Switch 6*6*7mm
• WS2812B 4*4 16-Bit LED PCB
• 30 AWG wires
• B-7000 Multi-Purpose Glue
• Kapton Tape
• 600mah 3.7v battery
• Velcro Sticker

Tools

• Soldering Kit
• Wire Cutter
• Tweezer
• Glue Gun
• Precision Knife
• Matt Black Spray Paint

Used 3D Printer

• Elegoo Saturn 4 Ultra ( for SLA parts )
• Anycubic Kobra 2 neo ( for FDM parts )

Step 1: Modeling in Autodesk Fusion 360

I utilized Fusion 360 to plan and design my project, which required careful space optimization. I needed to fit all the parts into the smallest form factor possible while ensuring practicality, including sufficient space for wiring and easy assembly. First, I imported all the 3D models of the parts and tried different configurations by placing the parts in various positions. Once I found the optimal configurations, I built the enclosure around them. design files are provided below.

Attachments

• 📷mood signal v13.stepDownloadView in 3D

Step 2: 3D Printing

After exploring the model's STL file. I 3D printed each model. The main body is printed using a resin printer with standard resin. Then I spray painted matt black. This project can be also printed using FDM printers but the letter might not be visible in it. The resin printer allows me to produce my model with great accuracy, you can find both.STL file down below

after printing the main body I spay painted in in matte black

also I printed the diffuser in white PLA using FDM printer

Attachments

• 📷diffuser.stlDownloadView in 3D
• 📷main body.stlDownloadView in 3D

Step 3: Uploading Code to XIAO and Finding the IP

I always like to upload the code to the microcontroller before assembly. I am using the Arduino IDE for flashing the code. Before flashing the code make sure you installed the required liberty for this sketch in the IDE

• AsyncTCP Library
• ESPAsyncWebServer Library
• Adafruit_NeoPixel Library

You can search and install all of the Libraries using the library manager of the Arduino IDE

Also, edit this line of the code with your wifi SSID and Password and flash the code to XIAO ESP32C3

Full code

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_NeoPixel.h>

// WiFi credentials
const char* ssid = "NG(3110)";
const char* password = "80898089";

// NeoPixel configuration
#define LED_PIN 2
#define NUM_LEDS 16
Adafruit_NeoPixel strip(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);

uint8_t brightness = 255; // Default brightness (max)

// Current mode state
String currentMode = "Free";

// Create web server instance
AsyncWebServer server(80);

// Webpage HTML
const char index_html[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
  <title>Mood Light Control</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 0;
    }
    .container {
      margin: 20px;
    }
    button {
      padding: 20px;
      font-size: 18px;
      margin: 10px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      transition: 0.3s;
    }
    .red { background-color: red; color: white; }
    .yellow { background-color: yellow; color: black; }
    .green { background-color: green; color: white; }
    input[type="color"] {
      margin: 10px;
      height: 50px;
      width: 50px;
      border: none;
      cursor: pointer;
    }
    input[type="range"] {
      width: 80%;
      margin: 20px 10%;
    }
    .current-mode {
      font-size: 20px;
      margin: 20px;
      font-weight: bold;
    }
    @media (max-width: 600px) {
      button {
        padding: 15px;
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <h1>Mood Signal Control</h1>
  <div class="container">
    <div class="current-mode">Current Mood: <span id="currentMode">Free</span></div>
    <button class="red" onclick="setMode('red', 'Busy')">Busy</button>
    <button class="yellow" onclick="setMode('yellow', 'Working')">Working</button>
    <button class="green" onclick="setMode('green', 'Free')">Free</button>
    <br>
    <input type="color" id="colorPicker" onchange="setCustomColor(this.value)" />
    <br>
    <input type="range" min="10" max="255" value="255" id="brightnessSlider" oninput="setBrightness(this.value)" />
  </div>
  <script>
    function setMode(color, mode) {
      fetch(`/set?color=${color}&mode=${mode}`);
      document.getElementById('currentMode').innerText = mode;
    }

    function setCustomColor(color) {
      fetch(`/setCustom?color=${color.substring(1)}`);
    }

    function setBrightness(brightness) {
      fetch(`/brightness?level=${brightness}`);
    }
  </script>
</body>
</html>
)rawliteral";

void setup() {
  // Initialize serial monitor
  Serial.begin(115200);

  // Initialize NeoPixel strip
  strip.begin();
  strip.setBrightness(brightness);
  strip.show();

  // 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");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  // Serve the web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "text/html", index_html);
  });

  // Handle pre-defined mode changes
  server.on("/set", HTTP_GET, [](AsyncWebServerRequest *request) {
    if (request->hasParam("color") && request->hasParam("mode")) {
      String color = request->getParam("color")->value();
      String mode = request->getParam("mode")->value();
      currentMode = mode;

      if (color == "red") setLEDColor(255, 0, 0);
      else if (color == "yellow") setLEDColor(255, 255, 0);
      else if (color == "green") setLEDColor(0, 255, 0);
    }
    request->send(200, "text/plain", "OK");
  });

  // Handle custom color
  server.on("/setCustom", HTTP_GET, [](AsyncWebServerRequest *request) {
    if (request->hasParam("color")) {
      String hexColor = request->getParam("color")->value();
      long rgb = strtol(hexColor.c_str(), NULL, 16);
      setLEDColor((rgb >> 16) & 0xFF, (rgb >> 8) & 0xFF, rgb & 0xFF);
    }
    request->send(200, "text/plain", "OK");
  });

  // Handle brightness control
  server.on("/brightness", HTTP_GET, [](AsyncWebServerRequest *request) {
    if (request->hasParam("level")) {
      brightness = request->getParam("level")->value().toInt();
      strip.setBrightness(brightness);
      strip.show();
    }
    request->send(200, "text/plain", "OK");
  });

  // Start the server
  server.begin();
}

// Function to set LED color
void setLEDColor(uint8_t r, uint8_t g, uint8_t b) {
  for (int i = 0; i < NUM_LEDS; i++) {
    strip.setPixelColor(i, strip.Color(0, 0, 0)); // Turn off all LEDs
  }
  strip.show();
  delay(500); // Delay for 0.5 seconds
  for (int i = 0; i < NUM_LEDS; i++) {
    strip.setPixelColor(i, strip.Color(r, g, b));
  }
  strip.show();
}

void loop() {
  // Nothing to do here, handled by the server
}

Copy and paste this IP address onto your PC or Mobile browser, now you can see the Mood signal control panel

Step 4: Wiring Diagram

It is a simple circuit

Step 5: Assembly and Wiring

5.1

Carefully scratch and expose a small patch of the copper pad on the backside of the BMS PCB. This patch should be approximately 4 mm away from the soldering pad of the button. This will enable us to solder the power button directly without the need for any wires.

5.2

You also need some hot glue to fix the BMS onto the 3D printed body. Make sure to align the USB-C port correctly.

5.3

Cut two terminals of the push button; we will be left with the remaining two legs.

5.4

Insert the button into the slot of the 3D print and align the button pins onto the BMS PCB.

5.5

Solder two wires to the 5V output of the Battery Management System (BMS).

5.6

Solder the wires to the battery input pins.

5.7

Insert the battery into the enclosure.

5.8

Securely attach the Xiao on top of the battery using glue.

5.9

Solder the 5V power wires to the Xiao board.

5.10

Solder three wires to the LED matrix: GND, VCC, and IN.

5.11

Make sure to cover all exposed soldering pads with Kapton tape.

5.12

Solder the LED wire to the XIAO. Ensure the DIN pin is connected to D0 of the XIAO. Also, connect the power wires.

5.13

Place the LED PCB inside the enclosure.

5.14

Apply some glue to the edges of the PCB.

5.15

Place the 3D-printed diffuser on top of the LED PCB.

We have completed the build; now let's proceed with testing it.

Step 6: How to Use

To turn on the device, simply press the push button on the side once. To turn it off, press the power button twice. After powering up, the device will connect to your local Wi-Fi network within a few seconds. Once connected, you can access the Mood Signal control using the IP address found on the serial monitor during the programming step.

The control page is user-friendly and features three mood buttons along with a brightness control slider for the LED. Users also have the option to select custom colors. You can switch between the different moods by pressing the corresponding button. The current mood of the LED is displayed on the web page for users to see.

You can use some kind of Velcro sticker to easily mount this anywhere you think like on the back side of your laptop or your door.

Step 7: Final Thought

This project was a great experience! It only took two days to complete. The assembly might look a little clumsy, but the final product resembles a commercial-grade item, thanks to SLA printing. You may have noticed that I didn't include an antenna for the XIAO ESP32C3 due to space constraints, but the XIAO still managed to work without it.

I built this project using components that were lying around on my workbench. I would like to improve it further by adding an e-ink display instead of the LED, which would allow for printing cool graphics and text. There’s a possibility for “MOOD SIGNAL 2, ” so if you have any ideas, please let me know in the comments!