Cloudya Montage Anleitung

Diese Anleitung beschreibt den Aufbau der Internetuhr "Cloudya". Sie beinhaltet die Internetzeit, Sommer/Winterzeitumstellung, Weckfunktion, eine RGB-LED Cloud, einen WLAN-Manager und einen WEB-Server. Die Zeit- und Datumsanzeige erfolgt über ein 4-Digit TM1637 Display und ein OLED-Display. Die RGB-LED Cloud ist über den WEB-Server steuerbar, ebenso die Weckzeit, die Helligkeit des Displays und der RGB-LEDs.

Für die Einstellung der WLAN-Daten steht ein WLAN-Manager zur Verfügung. Nachdem in den Netzwerkeinstellungen des Handys/Tablet die "Cloudya" ausgewählt wurde, kann über die IP-Adresse 192.168.4.1 der WLAN-Manger gestartet und die WLAN-Zugangsdaten eingetragen werden. Sind die WLAN-Zugangsdaten korrekt, startet Cloudya automatisch. Über die angezeigte IP-Adresse im OLED-Display ist der WEB-Server aufrufbar. Die Einstellungen sind jetzt über den WEB-Server möglich.

Die Internetuhr Cloudya

Hardware

Die Stückliste für Cloudya

1 x ESP32 NodeMCU D1 R32
1 x ESP32 NodeMCU D1 R32 Shield
2 x Sperrholzplatte 300x600 x 4mm
1 x Cloudfolie weiß DIN A4
7 x Abstandshalter (3D-Druck)
1 x KY-012 Piezo Buzzer
1 x 4-Digit TM1637 Display 0,56" weiß
1 x 1,3 Zoll OLED Display I2C SSH1106 Chip
1 x WS2812B LED Strip (NeoPixel)
1 x JST Stecker/Buchse
1 x 4polige Crimpverbindung
2 x Buchsenleisten
Schaltdraht und Kleber

Aufbau und Montage

Der Aufbau und die Montage von Cloudya ist in mehrere Schritte unterteilt.

Schritt 1: Die Cloud-Vorlage mit Inkscape erstellen

Die Cloud-Vorlage für den Lasercutter besteht aus:

Die fertige Wolke besteht aus 5 Einzelteile (4mm Sperrholz) und 2 Wolkenfolien:

Erstelle die Wolkenteile:
Zeichne mit den Abmessungen 140x85mm die Kreise der Wolke und unten ein Rechteck.

Markiere alles und bilde die Vereinigung. Pfad, Vereinigung (Strg++).

Dupliziere die Wolke 6x (Strg+D) und lege 2 Wolken deckungsgleich übereinander. Wähle eine Wolke aus und bilde den dynamischen Versatz. Pfad – Dynamischer Versatz (Strg+J). 2 Kopien bilden die Vorlage für die Wolkenfolie.

Markiere alles und bilde die Differenz – Pfad-Differenz (Strg+-). Dupliziere die Wolke 2x (Strg+D).

Erstelle die Innenteile. Arbeite mit einer Kopie der letzten Wolke weiter und bilde mit den dynamischen Versatz einen dünnerern Rahmen. Markiere alles und bilde die Differenz – Pfad-Differenz (Strg+-).

Zeichne ein Rechteck mit den Maßen 70x21mm und lege es unten auf die innere Wolke. Verbinde den schmalen Rahmen mit dem Rechteck– Pfad Vereinigung (Strg++)

Zeichen ein Rechteck mit 15mm Breite, lege es mittig in die Wolke und bilde die Differenz (Strg+-)

Kopiere die Wolke 3x

Jetzt sind alle Einzelteile fertig gezeichnet. Fertige von allen Zeichnungen eine Kopie und lege sie zur Kontrolle übereinander. Die Konturen der Wolken müssen deckungsgleich sein.

Die Wolken-Elemente liegen jetzt übereinander

Jetzt sind alle Wolkenteile als Vorlage für den Lasercutter erstellt

Schritt 2: 3D-Druck, sieben Abstandshalter drucken

Die Abstandshalter tragen den ESP32, das 4-Digit-Display und das OLED-Display. Sie werden auf den ESP32, auf das 4-Digit-Display und auf das OLED-Display geklebt.

Erstelle die Abstandshalter mit Tinkercad.

Der Abstandshalter für das OLED-Display hat die Maße 44x34x2mm
Der 1. Durchbruch hat das Maß 36x24x2 und der 2. Durchbruch hat das Maß 2x17x50

Die beiden Abstandshalter für das 4-Digit-Display haben die Maße 4x4x40mm

Die vier Abstandshalter für den ESP32 haben die Maße D=5x5mm

Erstelle den DHT11-Halter mit den Maßen 24x8x20,5mm und einer Aussparung mit den Maßen 13x7x18,5mm

Schritt 3: Lötarbeiten

Löte den JST-Stecker an den LED-Stripe: rot an +5V, grün an DIN und schwarz an GND
Löte die JST-Buchse an das ESP-Shield: rot an +5V, grün an IO14 und schwarz an GND
Löte den Buzzer an das ESP-Shield IO4 und GND
Löte die Crimp-Buchse in die I2C Lötanschsse des ESP-Shields und verbinde es mit dem OLED-Display:
VDD an V, GND an G, SCK an SCL, SDA an SDA
Löte die Verbindungen für das 4-stellige LED Display an das ESP-Shield:
CLK an IO18, DIO an IO5, 5V an 5V, GND an GND
Löte die Verbindungen und den 10k Ohm Widerstand für den DHT11 an das Shield
Löte die Stiftleisten in das ESP-Shield und stecke das Shield auf den ESP32
Führe einen ersten Funktionstest durch

Das ESP32-Shield:

Verdrahtung des DHT11:

Lötstellen am DHT11:

Löte den Widerstand auf das Shield und biege eine Öse für die Kabelverbindung

DHT11 Pullup-Widerstand auf dem Shield:

Lötstellen am WS2812B LED Strip (NeoPixel):

Lötstellen am 4-Digit LED Display:

Library: fastled-master.zip
Library: tm1637-master.zip

Programm für den Funktionstest

/************************************************************************************************* 
                                      PROGRAMMINFO
************************************************************************************************** 
Funktion: Testprogramm für CLOUDYA      NEO-Pixel-Ring - OLED - Buzzer - TM1637
**************************************************************************************************
Version: 05.12.2022
**************************************************************************************************
Board: ES32 UNO ioT
**************************************************************************************************
C++ Arduino IDE V1.8.19
**************************************************************************************************
Einstellungen:
https://dl.espressif.com/dl/package_esp32_index.json
http://dan.drown.org/stm32duino/package_STM32duino_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json
**************************************************************************************************
Librarys:
Adafruit_NeoPixel.h V 1.7.0
fastled-master
tm1637-master
**************************************************************************************************

 **************************************************************************************************/

 
 //----------TM1637------------------------------
#include <TM1637Display.h>
#define CLK 18
#define DIO 5
TM1637Display display = TM1637Display(CLK, DIO);
const uint8_t test1[] = {
  SEG_A | SEG_B | SEG_C | SEG_D |  SEG_G ,    // 3
  SEG_A | SEG_B | SEG_C | SEG_D |  SEG_G ,    // 3  
  SEG_A | SEG_B | SEG_C | SEG_D |  SEG_G ,    // 3   
  SEG_A | SEG_B | SEG_C | SEG_D |  SEG_G ,    // 3    
};

//----------------------------------------------------------

 
//-----OLED-----------------------
#include <Arduino.h>
#include <U8g2lib.h>
//----------------------------

//------------NEOPIXEL ----------------------------------------------
  #include <Adafruit_NeoPixel.h>
  #ifdef __AVR__
    #include <avr/power.h>
  #endif
  
  #define NUMPIXELS 20
  #define PIN 14
  
  Adafruit_NeoPixel strip = Adafruit_NeoPixel(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
//----------------------------------------------------------


// -----Buzzer----------------------------------
#define BUZ 4
int freq = 2000;
int channel = 0;
int resolution = 8;
//------------------------------------------------

//---------OLED-------------------------------------------------
#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
unsigned long delayTime;


  int BildschirmBreite = u8g2.getDisplayWidth();
  int BildschirmHoehe = u8g2.getDisplayHeight();

//---------Smiley-------------------------------------------------
#define smiley_width 64
#define smiley_height 64
  static unsigned char smiley[] = {
    0x00, 0x00, 0x00, 0xd0, 0x0a, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xff,
    0xff, 0x01, 0x00, 0x00, 0x00, 0x00, 0xf0, 0xff, 0xff, 0x07, 0x00, 0x00,
    0x00, 0x00, 0xfc, 0x5f, 0xfd, 0x3f, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00,
    0x80, 0x7f, 0x00, 0x00, 0x00, 0x80, 0x1f, 0x00, 0x00, 0xfc, 0x01, 0x00,
    0x00, 0xe0, 0x07, 0x00, 0x00, 0xe0, 0x07, 0x00, 0x00, 0xf0, 0x01, 0x00,
    0x00, 0xc0, 0x0f, 0x00, 0x00, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x00,
    0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x3e, 0x00, 0x00, 0x1e, 0x00, 0x00,
    0x00, 0x00, 0x7c, 0x00, 0x00, 0x1f, 0x00, 0x03, 0x80, 0x01, 0xf8, 0x00,
    0x80, 0x07, 0x80, 0x03, 0xc0, 0x03, 0xf0, 0x00, 0xc0, 0x07, 0x80, 0x07,
    0xc0, 0x03, 0xe0, 0x01, 0xc0, 0x03, 0xc0, 0x07, 0xc0, 0x07, 0xc0, 0x03,
    0xe0, 0x01, 0xc0, 0x07, 0xe0, 0x07, 0x80, 0x07, 0xe0, 0x00, 0xc0, 0x0f,
    0xe0, 0x07, 0x80, 0x07, 0xf0, 0x00, 0xc0, 0x0f, 0xe0, 0x07, 0x00, 0x0f,
    0x70, 0x00, 0xc0, 0x0f, 0xe0, 0x07, 0x00, 0x0e, 0x78, 0x00, 0xc0, 0x0f,
    0xe0, 0x07, 0x00, 0x1e, 0x38, 0x00, 0xe0, 0x0f, 0xe0, 0x07, 0x00, 0x1e,
    0x3c, 0x00, 0xc0, 0x0f, 0xe0, 0x07, 0x00, 0x1c, 0x1c, 0x00, 0xc0, 0x07,
    0xe0, 0x07, 0x00, 0x3c, 0x1c, 0x00, 0xc0, 0x07, 0xe0, 0x07, 0x00, 0x38,
    0x1c, 0x00, 0xc0, 0x07, 0xc0, 0x03, 0x00, 0x38, 0x1e, 0x00, 0x80, 0x07,
    0xc0, 0x03, 0x00, 0x38, 0x1e, 0x00, 0x80, 0x03, 0x80, 0x01, 0x00, 0x38,
    0x0e, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x78, 0x0e, 0x00, 0x00, 0x00,
    0x00, 0x00, 0x00, 0x38, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x78,
    0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x78, 0x0e, 0x7c, 0x00, 0x00,
    0x00, 0x00, 0x3e, 0x70, 0x0e, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x18, 0x38,
    0x1e, 0x10, 0x00, 0x00, 0x00, 0x00, 0x18, 0x78, 0x1e, 0x30, 0x00, 0x00,
    0x00, 0x00, 0x08, 0x38, 0x1e, 0x30, 0x00, 0x00, 0x00, 0x00, 0x08, 0x38,
    0x1c, 0x20, 0x00, 0x00, 0x00, 0x00, 0x0c, 0x38, 0x1c, 0x20, 0x00, 0x00,
    0x00, 0x00, 0x04, 0x38, 0x1c, 0x60, 0x00, 0x00, 0x00, 0x00, 0x06, 0x3c,
    0x3c, 0x40, 0x00, 0x00, 0x00, 0x00, 0x06, 0x1c, 0x38, 0xc0, 0x00, 0x00,
    0x00, 0x00, 0x03, 0x1c, 0x78, 0x80, 0x01, 0x00, 0x00, 0x00, 0x01, 0x1e,
    0x78, 0x00, 0x01, 0x00, 0x00, 0x80, 0x01, 0x0e, 0xf0, 0x00, 0x07, 0x00,
    0x00, 0xc0, 0x00, 0x0f, 0xf0, 0x00, 0x04, 0x00, 0x00, 0x60, 0x00, 0x07,
    0xe0, 0x01, 0x1c, 0x00, 0x00, 0x38, 0x80, 0x07, 0xc0, 0x03, 0x70, 0x00,
    0x00, 0x0c, 0xc0, 0x03, 0xc0, 0x03, 0xc0, 0x01, 0x00, 0x07, 0xe0, 0x03,
    0x80, 0x07, 0x80, 0x17, 0xf0, 0x01, 0xe0, 0x01, 0x00, 0x0f, 0x00, 0xfc,
    0x3f, 0x00, 0xf0, 0x00, 0x00, 0x1f, 0x00, 0x40, 0x01, 0x00, 0x78, 0x00,
    0x00, 0x3e, 0x00, 0x00, 0x00, 0x00, 0x3e, 0x00, 0x00, 0xfc, 0x00, 0x00,
    0x00, 0x00, 0x1f, 0x00, 0x00, 0xf8, 0x01, 0x00, 0x00, 0x80, 0x0f, 0x00,
    0x00, 0xe0, 0x07, 0x00, 0x00, 0xe0, 0x07, 0x00, 0x00, 0xc0, 0x1f, 0x00,
    0x00, 0xf8, 0x03, 0x00, 0x00, 0x00, 0xff, 0x00, 0x00, 0xff, 0x00, 0x00,
    0x00, 0x00, 0xfe, 0x2f, 0xf4, 0x3f, 0x00, 0x00, 0x00, 0x00, 0xf8, 0xff,
    0xff, 0x0f, 0x00, 0x00, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x03, 0x00, 0x00,
    0x00, 0x00, 0x00, 0xfa, 0x5f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
  };
//---------------------------------------------
  
void setup() {
  
//-------Buzzer--------------
  ledcSetup(channel, freq, resolution);
  ledcAttachPin(BUZ, channel);
//---------------------------------

//---NEOPIXEL-------------------------------------------
  strip.begin();
  strip.setBrightness(50);

//-----OLED----------------------------------------
  u8g2.begin();
  u8g2.setFont(u8g2_font_courR10_tf);
  u8g2.firstPage();

  do {
    u8g2.clearBuffer();
    u8g2.drawXBM(32, 1, smiley_width, smiley_height, smiley);
  } while ( u8g2.nextPage() );
  delay(1000);
//-----------------------------------------------


//----------Buzzer-------------------------------------
    ledcWrite(channel, 150);
    ledcWriteTone(channel, 4000);
    delay(200);
    ledcWriteTone(channel, 0);
    delay(200);
    ledcWriteTone(channel, 4000);
    delay(200);
    ledcWriteTone(channel, 0);
    delay(10);
//------------------------------------------------------

//--------NEOPIXEL------------------------------
  colorWipe(strip.Color(255, 0, 0), 50); // Rot
  colorWipe(strip.Color(0, 255, 0), 50); // Gruen
  colorWipe(strip.Color(0, 0, 255), 50); // Blau
//-----------------------------------------------

}

void loop() {
// -------- TM1637-------------
  display.setBrightness(1);

 for (int i=0; i <= 9999; i++){
     display.showNumberDec(i, true);  // i=value, true to padd the blank segments with 0
     delay(25);
  };
 //--------------------------------
}

void colorWipe(uint32_t c, uint8_t wait) {
  for(uint16_t i=0; i<strip.numPixels(); i++) {
    strip.setPixelColor(i, c);
    strip.show();
    delay(wait);
      }
}

Schritt 4: Lasercutter, die Cloud

Schneide die Cloud und die Cloud-Folie mit dem Lasercutter aus
Klebe die drei Innenteile der Cloud deckungsgleich zusammen
Klebe den LED-Streifen in das Innenteil. Der JST-Stecker zeigt zur Öffnung
Klebe die Cloud-Folie in die Aussenteile
Klebe nun alle Cloudteile deckungsgleich zusammen

Schritt 5: Mit Boxes.Py und Inkscape das Gehäuse erstellen

Erstelle auf Boxes.PY eine "RBasebox" mit den Abmessungen x=140, y=80 und h=90.
Füge in die ertellte SVG-Grafik die Durchbrüche für das OLED-Dislpay, das 4-Digit-Display, den USB-Anschluss und die Cloud ein.

Schneide das Gehäuse mit dem Lasercutter aus
Klebe das OLED-Display mit den Abstandshalter an die Gehäuseinnenwand
Klebe das 4-Digit-Display mit den Abstandshalter in die Aussparung
Klebe den ESP32 mit den Abstandshalter auf den Gehäuseboden, der USB-Anschluss zeigt zum USB-Ausschnitt
Stecke die Cloud auf den Gehäusedeckel und verbinde die JST-Stecker/Buchse
Verbinde die Gehäuse-Teile Boden, Wand und Deckel

Schritt 6: Inbetriebnahme

Kontrolliere alle Verbindungen
Verbinde das USB-Kabel mit dem ESP32
Lade das Cloudya-Programm und die SPIFFS-Dateien in den ESP32
Wähle an deinem Handy/Tablet die Netzwerkverbindung "Cloudya"
Gibt in deinem Browser auf der Kommandozeile die IP-Adresse 192.168.4.1 ein
Gib deine WLAN-Zugangsdaten in den WLAN-Manager ein
Nach dem Start von Cloudya siehst du im OLED-Display die IP-Adresse des WEB-Servers
Starte den WEB-Server und teste alle Funktionen

Fertig!