Cloudya

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 Claudya 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 Hardware für dieses Projekt:

• 1 x ESP32 NodeMCU D1 R32
• 1 x ESP32 NodeMCU D1 R32 Shield
• 1 x Sperrholzplatte 300x600 x 4mm
• 1 x Cloudfolie weiß DIN A4
• 8 x Platinenhalter (3D-Druck)
• 2 x KY-012 Piezo Buzzer
• 1 x 4-digits 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 Stift/Buchsenleiste
• Schaltdraht, Kleber, Kleinmaterial

Aufbau und Montage

Der Aufbau und die Montage von Claudya 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 Einzelteilen (4mm Sperrholz, L=140, Dicke: 20mm) 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 3x (Strg+D): 1x Sicherheitskopie und lege 2 Wolken deckungsgleich übereinander. Wähle eine Wolke aus und bilde den dynamischen Versatz. Pfad - Dynamischer Versatz (Strg+J)





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





Erstelle mit der ersten Sicherheitskopie eine weitere Wolke mit einem kleineren Rand. Verwende erneut den dynamischen Versatz (Strg+J). Kopiere die Wolke 2x.





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





























Schritt 3: Lötarbeiten
• Löte den JST-Stecker an den LED-Stripe: rot an +5V, grün an DO und schwarz an GND
• Löte die JST-Buchse an das ESP-Shield: rot an +5V, grün an GPIO 14 und schwarz an GND
• Löte den Buzzer an das ESP-Shield GPIO 4 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 GPIO 18, DIO an GPIO 5, 5V an 3V3, GND an GND
• Löte die Stiftleisten in das ESP-Shield und stecke das Shield auf den ESP32
• Führe einen ersten Funktionstest durch


Das ESP32-Shield:






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 V1.0.4
**************************************************************************************************
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
**************************************************************************************************

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


 //----------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
};
const uint8_t SEG_DONE[] = {
  SEG_B | SEG_C | SEG_D | SEG_E | SEG_G,           // d
  SEG_A | SEG_B | SEG_C | SEG_D | SEG_E | SEG_F,   // O
  SEG_C | SEG_E | SEG_G,                           // n
  SEG_A | SEG_D | SEG_E | SEG_F | SEG_G            // E
  };
#define TEST_DELAY   1000
//----------------------------------------------------------


//-----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();


  //Bitmap hier einfügen:
  //Smiley XBM erstellt mit GIMP
#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);
//  strip.show();

//-----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() {
    display.clear();
    display.setBrightness(1);

  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };
  uint8_t blank[] = { 0x00, 0x00, 0x00, 0x00 };

  display.clear();
  // All segments on
  display.setSegments(data);
  delay(TEST_DELAY);

  // Selectively set different digits
  data[0] = display.encodeDigit(8);
  data[1] = display.encodeDigit(0);
  data[2] = display.encodeDigit(8);
  data[3] = display.encodeDigit(0);
  display.setSegments(data);
  delay(TEST_DELAY);
     display.setBrightness(7);
  data[0] = display.encodeDigit(0);
  data[1] = display.encodeDigit(8);
  data[2] = display.encodeDigit(0);
  data[3] = display.encodeDigit(8);
  display.setSegments(data);
  delay(TEST_DELAY);
    display.setBrightness(1);
  data[0] = display.encodeDigit(8);
  data[1] = display.encodeDigit(0);
  data[2] = display.encodeDigit(8);
  data[3] = display.encodeDigit(0);
  display.setSegments(data);
  delay(TEST_DELAY);

    display.showNumberDec(8, true); // Expect: 0301
  delay(TEST_DELAY);
    display.showNumberDec(80, true); // Expect: 0301
  delay(TEST_DELAY);
    display.showNumberDec(800, true); // Expect: 0301
  delay(TEST_DELAY);
    display.showNumberDec(8000, true); // Expect: 0301
  delay(TEST_DELAY);
    display.clear();
  delay(TEST_DELAY);

    // Done!
  display.setSegments(SEG_DONE);

  while(1);


  /*
// -------- TM1637-------------
  display.setBrightness(1);

 for (int i=8888; 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 "Roundebox" mit den Abmessungen sh=90, x=140 und y=80.
• Füge in die ertellte SVG-Grafik die Durchbrüche für das OLED-Dislpay, das TM1637-Display, den USB-Anschluss und die Cloud ein.
• Schneide das Gehäuse, die Cloud und die Cloud-Folie mit dem Lasercutter aus
• Klebe das OLED-Display mit den 4 Abstandshalter an die Gehäuseinnenwand
• Klebe das 4-digits TM1637 Display in die Aussparung
• Klebe den ESP32 auf den Gehäuseboden, der USB-Anschluss zeigt zum USB-Ausschnitt
• Klebe die Cloud-Teile deckungsgleich zusammen
• Stecke die Cloud auf den Gehäusedeckel und verbinde die JST-Stecker/Buchse
• Verbinde die Gehäuse-Teile Boden, Wand und Deckel


Schritt 6: Funktionstest


• 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-Servers und teste alle Funktionen







Programm Download:


Cloudya MM Programm

Cloudya DHT11 Programm

Hier OpenWeatherMap API generieren

Cloudya DHT11 Wetterdaten Programm


• Fertig!




Zurück