📎 CLOUD DISPLAY

👉 Device for displaying messages during meetings, streammings, parties, etc. Interactive way of say something for people away from us.

👉 User opens a webpage and write down a message on an input text, hit on the send button and the message will appear on the cloud display scrolling.

📌 Slide

📌 Video

📌 Demo

👉 Me adding a text on a web page and message recieved on the Cloud display.

📌 Bill of Materials

• 🟢 2 LED Matrix 8x8 ws2812b ($26)
• 🟢 2 Step down ($3.15)
• 🟢 MDF/Acrylic
• 🟢 Display Oled 0.96" SPI 128*64 SSD1306 ($6.57)
• 🟢 Source of power AC/DC 60W 12V 5A ($9.21)
• 🟢 Module ESP8266 ESP-12S ($4.73)
• 🟢 Arduinoboard Pro Mini 328 3.3V/8MHz ($6.57)
• 🟢 Screws ($3.94)
• 🟢 PLA

📌 Development

• 👉 ESP8266 programer created on Networking week Networking Week
• 👉 Wanna see all the process of development scroll down to the next section.

📎 Files

📎 License

Copyright 2022 Abimelek Israel Candia

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

📌 Process of Project Development

💡 The Idea

I didn't have an idea for my final proyect. But I found some inspiration in music. Where specifically? At the parties. It initally started when I was going to some parties before and there always was a Disc Jockey been in charge of mixing different kinds off music. Every one of them has a popular DJ Controller Device. Which are in all its types but the main idea is that you can overlap one song with another. This devices are made with sophisticated hardware inside of it. So creating one could be amazing.

👉 First intent

My objetive is to create a MIDI Controller that will enable anyone to play sounds through a serial connection to a computer.

In addition to have the functionality of receive messages from the internet and show them on a LED panel. this second part is because I think creating something interactive for multiple people make us feel better specially in pademic moments that we were living.

So project would be like this -> MIDI Controller + serial connection + MIDI Software + Cloud LED Panel

👉 Neil's Feedback

I received Neil's feedback about my final project.

Final project looks like two systems.

1. MIDI Controller
2. Cloud LED PANEL

🚨 Main problem -> TIME

I will run out of time to do the whole idea. So it would be better to choose one of the systems.

I was totally agree with it.

👉 Second intent

With Neil's feedback I decided to focus on the LED panel and if I have some extra time include something else related to music.

👉 👉 👉 Going for Cloud Display 💪

📌 Plan

Today is Sunday, 1st May 2022.

🚨 🚨 🚨 5 WEEKS UNTIL FINAL PRESENTATION 🚨 🚨 🚨

I think I am on time to have a plan since I have learned enough to know what my project is about, what I need to make? and How do all pieces should be done?.

👉 Recap key lessons

✅ LEARNING ELETRONICS

✅ LEARNING 3D Design

👉 What needs to be done?

1. Define Project ✅
2. Proof of concept for networking ✅
3. 3D Design
4. Circuit Design
5. Webpage

📌 Progress

🏁 Clould Display (Project definition)

• 👉 What does it do?

• It will display images and text that people from differente places wants to send.

• 👉 How does it do?

• There will be a web page with a textbox for entering a text and a button to send the text added in the textbox. Display will recieve the text and show on the LED matrix.

Note: User's text will be shown on one Cloud Display but in a future step text will be shown on more than one displays.

• 👉 What do I need?
• 1. Web page with textbox and button.
• 2. Server with websockets running.
• 3. LED Panel with internet connection(ESP8266)

📍 First Test LED Matrix 📅 May 19

I need to check how a MDF box could look with the matrix inside of it.

👉 The box is too small.

👉 Hard to put inside of the box.

📍 Design for Matrix support and joints + the package of the device 📅 May 23

👉 The idea is to make a support that will hold both matrix in the package.

👉 LEDs don't fit with the design. ❌ I will need to measure again and 3D print again.

👉 I was able to 3d print the joints and the new matrix support and Laser cut the container.

👉 All pieces assembled.

📍 Designing the buttons that will be over the container 📅 May 24

📍 Connections

Connections for final project

🟢 1 Voltage Board

• 👉 Voltage of input 12V 5A (J1)
• 👉 Board has two divisions one at the top and other at the bottom. One for the stepper down of 3.3V and the other of 5V volts.
• 👉 VCC and ground for the Arduino board and ESP 8266 is (J2) output.
• 👉 VCC for the Matrix boards and ground is (J3) output.

🟢 2 ESP8266 Board

🔹 Features

• 👉 VCC and ground comes from the previous board to VCC and ground respectively.

• 👉 Basicaly the connections are to set the board on the UART mode. On SV2 pin 3 is CHIP_EN to enable the chip. Then on SV1 pins IO15, IO2, IO0 is the configuration for UART mode.

This configuration is by default on UART mode because por flash mode I made the programmer on the Networking week's assignment.

• 👉 On SV1 pins 3 (GPIO5) is for the matrix control and I left the pin 4 (GPIO4) in case I want to add something else in the future.

• 👉 On SV1 the other two connections are Pin 1 for TX and Pin 2 for RX (Connections for serial communication between this board and the Arduino board)

🟢 3 Arduino Board

• 👉 In this board we have two PIN HEAD for the connections of the buttons and the oled screen.

• 👉 Connections for OLED screen MOSI pin 11, CLK pin 13, DC pin 12, CS pin 10, reset pin 7.

• 👉 Connections for buttons are PIN 2,3,4,5.

• 👉 And at the there the pins TX and RX from the arduino board that will be connected to the RX and TX from the previous board.

📍 Programming boards

👉 Trying configurations for the ESP8266 and the Arduino Pro mini.

👉 Both boards are connected using the RX and TX pins. TX from ESP8266 goes to RX of the Arduino board and vice versa.

📎 ESP8266

This board will be on charge of the internet connectivity and it will control the matrix too.

👉 At the end both matrix were connected to the ESP8266 because of the lack of memory of the Arduino Mini Pro, Adafruit Library is bigger ❌.

• 👉 Code

• First we have the libraries needed for WIFI connection ESP8266WiFi and SocketIOclient for the sockets connection. Then we have the libraries from Adafruit that allow us to control the matrix. Lastly the control pin defined for the ESP8266.

// Sockets libs

#include <Arduino_JSON.h>
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <SocketIOclient.h>
SocketIOclient socketIO;

// MATRIX LIBRARIES
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

// PIN CONTROL FOR MATRIX
#define MATRIX_PIN 5 //ESP8266

• We define a matrix variable that will initialize the matrix configuration. We set here details like the matrix size which is (16 x 8), the control pin and then we set the configurations of how the matrix will behave.

• There is also an array of colors. And other variable to control if there are new messages and the number of characteres of the message.

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(16, 8, MATRIX_PIN,
  NEO_MATRIX_BOTTOM    + NEO_MATRIX_LEFT +
  NEO_MATRIX_COLUMNS,
  NEO_GRB            + NEO_KHZ800);
const uint16_t colors[] = {
  matrix.Color(0, 255, 0), matrix.Color(0, 255, 0), matrix.Color(255, 255, 0),matrix.Color(0, 0, 255), matrix.Color(255, 0, 255), matrix.Color(0, 255, 255), matrix.Color(255, 255, 255)};

const byte numChars = 32;
char receivedChars[numChars];   // an array to store the received data
String messageString;

boolean newData = false;
boolean showing = false;

• This is the setup method we basically initialize the matrix, setting the brightness of it and which color will use.

• The we have the Sockets initialization which starts with the wifi connection setting the Widi network and password.

• After a successful connection then we start the connection to the socket server.

void setup() {

  matrix.begin();
  matrix.setTextWrap(false);
  matrix.setBrightness(80);
  matrix.setTextColor(colors[0]);
  
  // ***************INICIO SOCKETS****************

  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.setDebugOutput(true);

  // Connect to wifi
  WiFi.begin("Pixel_6239", "hola12345678");

  // Wait some time to connect to wifi
  for (int i = 0; i < 10 && WiFi.status() != WL_CONNECTED; i++)
  {
    Serial.print(".");
    delay(1000);
  }

  // Check if connected to wifi
  if (WiFi.status() != WL_CONNECTED)
  {
    Serial.println("No Wifi!");
    return;
  }
  Serial.println("");
  Serial.printf("[ESP32] Connected to Network, Connecting to server.\n");

  // server address, port and URL
  socketIO.begin("fabacademy-sockets.herokuapp.com", 80, "/socket.io/?EIO=4");

  // event handler
  socketIO.onEvent(socketIOEvent);

  // ***************FIN SOCKETS****************
  
}

int x    = matrix.width();
int pass = 0;

• Then we have the loop method. Inside of it we have the sockeIO object that also has a loop method for listening to the sockets events.

• And we have the method that will show the messages.

void loop() {
    socketIO.loop();
    setMatrixText();
}

void setMatrixText() {
  if (newData == true) {
      matrix.fillScreen(0);    //Turn off all the LEDs
      matrix.setCursor(x, 0);
      matrix.print(messageString);
      Serial.print(messageString);
      int lenght = messageString.length()*6;
      Serial.println(lenght);

      if( --x < -lenght ) {
        x = matrix.width();
        newData = false;
      }
      matrix.show();
      delay(50);
  }
}

• Now we have the setAnalog method that will work to control the potentiometer for the matrix brightness.
• Then we have a function for the socketio events and other that recieves all the events from the socketio library. Inside one of the events we recieve the data from the message event and asign it to the variable that will be used to show the message.

void setAnalog() {
  int val = analogRead(A0);
  Serial.print(" - ");
  Serial.print(analogRead(A0));
  Serial.print(" - ");
    matrix.setBrightness(analogRead(A0));

  //matrix.setBrightness(analogRead(A0));

}

void hexdump(const void *mem, uint32_t len, uint8_t cols)
{
  const uint8_t *src = (const uint8_t *)mem;
  Serial.printf("\n[HEXDUMP] Address: 0x%08X len: 0x%X (%d)", (ptrdiff_t)src, len, len);
  for (uint32_t i = 0; i < len; i++)
  {
    if (i % cols == 0)
    {
      Serial.printf("\n[0x%08X] 0x%08X: ", (ptrdiff_t)src, i);
    }
    Serial.printf("%02X ", *src);
    src++;
  }
  Serial.printf("\n");
}

void socketIOEvent(socketIOmessageType_t type, uint8_t *payload, size_t length)
{
  switch (type)
  {
  case sIOtype_DISCONNECT:
    Serial.printf("[IOc] Disconnected!\n");
    break;
  case sIOtype_CONNECT:
    Serial.printf("[IOc] Connected to url: %s\n", payload);

    // join default namespace (no auto join in Socket.IO V3)
    socketIO.send(sIOtype_CONNECT, "/");
    break;
  case sIOtype_EVENT:
    {
      newData = true;
      JSONVar myObject = JSON.parse((char*)payload);
      messageString = myObject[1];
      Serial.println(messageString);
      Serial.printf("[IOc] get event: %s\n", payload);
    }
    break;
  case sIOtype_ACK:
    Serial.printf("[IOc] get ack: %u\n", length);
    hexdump(payload, length,16);
    break;
  case sIOtype_ERROR:
    Serial.printf("[IOc] get error: %u\n", length);
    hexdump(payload, length,16);
    break;
  case sIOtype_BINARY_EVENT:
    Serial.printf("[IOc] get binary: %u\n", length);
    hexdump(payload, length,16);
    break;
  case sIOtype_BINARY_ACK:
    Serial.printf("[IOc] get binary ack: %u\n", length);
    hexdump(payload, length,16);
    break;
  }
}

📎 Arduino Pro Mini

This board will control the OLED screen and the buttons that will control it.

👉 The Arduino Pro mini was for the OLED SSD1306 screen.

• 👉 Code

• Fist we have the libraries to control the Oled screen in this case the Adafruit library

• And we have the variables for sizes of the screen.

• We also have defined the pins that will connect the SPI interface to the Arduino board. and the the display object.

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for SSD1306 display connected using software SPI (default case):
#define OLED_MOSI  11
#define OLED_CLK   13
#define OLED_DC    12
#define OLED_CS    10
#define OLED_RESET 7
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT,
  OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);

int selected = 0;
int entered = -1;

• Then we have the displaymenu method that will control the buttons that we want to have for the project to control the menu interface of the oled screen.

void displaymenu(void) {

  int down = digitalRead(2);
  int up = digitalRead(3);
  int enter = digitalRead(4);
  int back = digitalRead(5);

  if(up == HIGH && down == HIGH){
    Serial.println("Don't press both buttons at the same time");
  };
  
  if(up == HIGH) {
    selected = selected + 1;
    delay(50);
  };
  
  if(down == HIGH) {
    selected = selected - 1;
    delay(50);
  };

  if(enter == HIGH) {
    entered = selected;
  };

  if(back == HIGH) {
    entered = -1;
  };
  Serial.println(entered);
  const char *options[7] = { 
    " Cloud Mode ", 
    " Academy Logo ", 
    " Local Messages ", 
    " Matrix Preview "
  };
  
  if(entered == -1) {
    display.clearDisplay();
    display.setTextSize(1);             
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0,0);
    display.println(F("FAB ACADEMY 2022"));
    display.println("");
    for(int i=0;i < 7; i++) {
      if(i == selected) {
        display.setTextColor(SSD1306_BLACK, SSD1306_WHITE);
        display.println(options[i]);
      } else if(i != selected){
        display.setTextColor(SSD1306_WHITE);
        display.println(options[i]);
      }
    }
  } else if(entered == 0) {
      display.clearDisplay();
      display.setTextSize(1);             
      display.setTextColor(SSD1306_WHITE);
      display.setCursor(0,0);
      display.println(F("Custom menu test"));
      display.println("Cloud Mode");
      display.setTextColor(SSD1306_WHITE);
      display.setTextSize(2);
      display.println("Receiving messages");
  } else if(entered == 1) {
      display.clearDisplay();
      display.setTextSize(1);             
      display.setTextColor(SSD1306_WHITE);
      display.setCursor(0,0);
      display.println(F("Custom menu test"));
      display.println("Menu option 2");
      display.setTextColor(SSD1306_WHITE);
      display.setTextSize(2);
      display.println("More cool stuff :)");
  }
  display.display();
}

void setup() {
  pinMode(2, INPUT);
  pinMode(3, INPUT);
  pinMode(4, INPUT);
  pinMode(5, INPUT);
  
  Serial.begin(9600);
  if(!display.begin(SSD1306_SWITCHCAPVCC)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }
}

void loop() {
  displaymenu();
}

📍 Designing first PCBs 📅 May 27

👉 First PCB Board for the ESP8266. I created a programming board in Networking assignment

👉 The second board will be for two stepper down that will help us controlling the voltage for the component.

👉 Final Result of soldering PCB for voltages

👉 Now we need to check if we have the right output voltage for the boards

👉 Both boards the ESP8266 and the Arduino Pro mini uses 3.3v

👉 The 5v output will be for the matrix.

👉 Power source connector for the device

👉 Soldering connector

📍 Designing PCB for Arduino Pro mini

👉 Milling design

📍 Small boards for connections

👉 On the left for the buttons

👉 On the right for the OLED screen

👉 Now testing the connections.

📍 3D printed tests for the buttons

👉 After several intents I found the final design.

👉 All materials to build the buttons

• 3D printed parts
• Limit switches
• Screws

👉 All pieces together

👉 Soldered cables for buttons

📍 Laser cutting Acrylic for the final project 📅 June 4

👉 Assemble pieces with electronics

👉 Final Assemble and power source for final project

👉 Images from different sides of the project