# 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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/hkP2xcu6lH9PRYZe-cloudya.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/hkP2xcu6lH9PRYZe-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/BaLM14alrKq8z55L-wolke01.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/BaLM14alrKq8z55L-wolke01.png)

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

[![wolke02.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/Kje0hDYfRZjptjFK-wolke02.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/Kje0hDYfRZjptjFK-wolke02.png)

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

[![wolke03.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/qpmGqlVSIqWXYUHx-wolke03.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/qpmGqlVSIqWXYUHx-wolke03.png)

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

[![wolke04.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/yXtIFwOk00srvchZ-wolke04.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/yXtIFwOk00srvchZ-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/Oy7XpXXuP8hrvsD8-wolke05.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/Oy7XpXXuP8hrvsD8-wolke05.png)

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

[![wolke06.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/I0Y723imCbjAI7tJ-wolke06.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/I0Y723imCbjAI7tJ-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/taWGNtDWp9HU4Hla-wolke09.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/taWGNtDWp9HU4Hla-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/UOjldWLLbFwNMp7p-wolke10.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/UOjldWLLbFwNMp7p-wolke10.png)

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

[![wolke11.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/ULpLNtZyt7UcmdFb-wolke11.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/ULpLNtZyt7UcmdFb-wolke11.png)

Kopiere die Wolke 3x

[![wolke12.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/15a0MogbjthNmHtf-wolke12.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/15a0MogbjthNmHtf-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/d3tk26N3HUDQnq4O-wolke13.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/d3tk26N3HUDQnq4O-wolke13.png)

Die Wolken-Elemente liegen jetzt übereinander

[![wolke14.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/Q54jHV1VIgtDXcJG-wolke14.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/Q54jHV1VIgtDXcJG-wolke14.png)

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

[![wolke01.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/BaLM14alrKq8z55L-wolke01.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/BaLM14alrKq8z55L-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/hxj1bPpkYvXo21Dg-oled-spacer01.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/hxj1bPpkYvXo21Dg-oled-spacer01.png)

[![oled-spacer02.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/Ywqpjcp1yNfefjnN-oled-spacer02.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/Ywqpjcp1yNfefjnN-oled-spacer02.png)

[![oled-spacer03.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/6LTAA8ikZHoqy3UX-oled-spacer03.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/6LTAA8ikZHoqy3UX-oled-spacer03.png)

[![oled-spacer04.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/IZxnPhrWQK1dWTZP-oled-spacer04.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/IZxnPhrWQK1dWTZP-oled-spacer04.png)

[![oled-spacer05.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/xeaQDWNTI7Fzr5Jp-oled-spacer05.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/xeaQDWNTI7Fzr5Jp-oled-spacer05.png)

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

[![oled-spacer06.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/OzApJO0wCz7JXIXd-oled-spacer06.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/OzApJO0wCz7JXIXd-oled-spacer06.png)

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

[![oled-spacer07.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/URnP3F4grFsS9rui-oled-spacer07.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/URnP3F4grFsS9rui-oled-spacer07.png)

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

[![dht11-halter.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/J0GYKNMOKq0WExIr-dht11-halter.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/J0GYKNMOKq0WExIr-dht11-halter.png)

### 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:

[![esp32shield.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/tN5j95qJkUH6dLCv-esp32shield.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/tN5j95qJkUH6dLCv-esp32shield.png)

Verdrahtung des DHT11:  
[![c_dht11_0.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/rLVUrvVFETkSlXFA-c-dht11-0.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/rLVUrvVFETkSlXFA-c-dht11-0.png)

Lötstellen am DHT11:

[![c_dht11.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/DWzi7HyLQz5l0UXX-c-dht11.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/DWzi7HyLQz5l0UXX-c-dht11.png)

Löte den Widerstand auf das Shield und biege eine Öse für die Kabelverbindung  
[![r_oese.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/hFIGuuIR7X3p2ng3-r-oese.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/hFIGuuIR7X3p2ng3-r-oese.png)

DHT11 Pullup-Widerstand auf dem Shield:

[![c_dht11_2.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/MM81xGnLLnmks0Vm-c-dht11-2.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/MM81xGnLLnmks0Vm-c-dht11-2.png)

Lötstellen am WS2812B LED Strip (NeoPixel):

[![c_rgb.jpg](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/rOIL5g8MhNFKtdG8-c-rgb.jpg)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/rOIL5g8MhNFKtdG8-c-rgb.jpg)

Lötstellen am 4-Digit LED Display:

[![c_4digit.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/nO8PMPDQdfMnXekO-c-4digit.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/nO8PMPDQdfMnXekO-c-4digit.png)

Library: [fastled-master.zip](https://wiki.oberlab.de/attachments/34)  
Library: [tm1637-master.zip](https://wiki.oberlab.de/attachments/35)

Programm für den Funktionstest

```c++
/************************************************************************************************* 
                                      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  


[![wolke01.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/BaLM14alrKq8z55L-wolke01.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/BaLM14alrKq8z55L-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/gH1Q9jxSveGWQREb-basebox.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/gH1Q9jxSveGWQREb-basebox.png)

- Erstelle auf [Boxes.PY](https://www.festi.info/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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/u4jYcWGgMpVzTf0u-claudya-front.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/u4jYcWGgMpVzTf0u-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](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/ZdfxvB33v77d7Xxp-webserver.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/ZdfxvB33v77d7Xxp-webserver.png)

**Fertig!**