Direkt zum Hauptinhalt

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.

cloudya.png
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:

wolke01.png

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

wolke02.png

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

wolke03.png

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

wolke04.png

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.

wolke05.png

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

wolke06.png

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+-).

wolke09.png

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++)

wolke10.png

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

wolke11.png

Kopiere die Wolke 3x

wolke12.png

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.

wolke13.png

Die Wolken-Elemente liegen jetzt übereinander

wolke14.png

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

wolke01.png

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

oled-spacer01.png

oled-spacer02.png

oled-spacer03.png

oled-spacer04.png

oled-spacer05.png

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

oled-spacer06.png

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

oled-spacer07.png

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

dht11-halter.pngdht11-halter.png

Schritt 3: Lötarbeiten: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:

    esp32shield.pngesp32shield.png

    Verdrahtung des DHT11:
    c_dht11_0.pngc_dht11_0.png

    Lötstellen am DHT11:

    c_dht11.pngc_dht11.png

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

    DHT11 Pullup-Widerstand auf dem Shield:

    c_dht11_2.pngc_dht11_2.png

     

    Lötstellen am WS2812B LED Strip (NeoPixel):

    c_rgb.jpgc_rgb.jpg

    Lötstellen am 4-Digit LED Display:

    c_4digit.pngc_4digit.png

     

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

    Programm für den Funktionstest: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     
      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
    wolke01.png

    wolke01.png

      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
      basebox.png

      basebox.png

        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.

        claudya_front.png

        claudya_front.png

          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

            webserver.png
            webserver.png

            Fertig!