Amazing Open Source Raspberry Pi Pico 2 Synth, Cutting Edge Power over Skin Research, and much more!

0:00:00 / -

Watch now on YouTube Watch now

How To Make A Small Desk Clock With Weather Station

Made by diy-projects-lab

About the project

Hi beloved readers in this project I will show you how to make this Small Desk Clock with Weather Station

Project info

Difficulty: Moderate

Platforms: Espressif

Estimated time: 1 hour

License: Creative Commons Attribution-ShareAlike CC BY-SA version 4.0 or later (CC BY-SA 4+)

Items used in this project

Hardware components

	Jumper wires (generic)	x 1
	1.54 inch display	x 1
	Espressif Wemos D1 Mini	x 1

Software apps and online services

Arduino IDE

Hand tools and fabrication machines

3D Printer (generic)

x 1

Story

Hi beloved readers in this project I will show you how to make this Small Desk Clock with Weather Station

This is a step-by-step article, I will guide you through the process of creating your very own desk clock using a Mini LCD display, Wemos D1 Mini microcontroller, lithium-ion battery, and the ability to show real-time weather and temperature data.

This project combines electronics, programming, and creativity to build a unique and functional desk accessory

Thank You NextPCB:

This project was successfully completed because of the help and support from NextPCB. Guys if you have a PCB project, please visit their website and get exciting discounts and coupons.

NextPCB offers high-quality, reliable PCB starting at $1.9, and multilayer starting at $6.9. Also, everyone can enjoy free PCB assembly for 5 boards!

What can you expect by building this project?

There are many things but most importantly you will have a desk clock that shows you the real-time temperature, Day, Date, and time.

Along with this, you will learn lots of things like how to make connections and the basics of electronics and programming..

Supplies

Below are the components required for making this desk clock

Wemos D1 Mini
LCD display module
Breadboard
Charging Module(Type C)
Battery
Bread Board
Soldering iron and lead
Arduino IDE and Programming cable
Optional - 3D printer, Custom PCB

Circuit Diagram

The circuit is very simple for this project

So we will begin with connecting 1.54 inch LCD module to wemos d1 Mini.

5 volt of wemos d1 Mini will be connected with vcc of LCD module, g to gnd of LCD module, d4 to RST, D2 to DC, D8 tp CS, D7 to Din and clk to D5

This is the connections, and I know you are thinking it is very simple, Indeed it is simple

Building Circuit

I will be using Breadboard and jumper wires to make the prototype circuit.

Start by attaching wemos module to the breadboard, and later connect the display module using jumper wires.

To power this project I will be using a rechargeable lithium-ion battery.

After the circuit is complete we can head over to uploading the codes for this clock.

Arduino Code

Setting up the Arduino IDE

If you don't have IDE. Download and install the Arduino IDE from the official Arduino website (https://www.arduino.cc/en/software).

Connect the Wemos D1 Mini microcontroller to your computer using the USB cable.

Opening the Arduino Sketch

Open the Arduino IDE. You can get the Arduino code for this project here https://bit.ly/3qe1FI5
In the IDE, go to File -> Open and locate the Arduino sketch (code) file for your desk clock project. Open the file in the IDE.
From the "Tools" menu, select "Board" and then choose "Wemos D1 R1" or "Wemos D1 R2 & mini" as the board.
Next, go to "Tools" -> "Port" and select the appropriate COM port that corresponds to your Wemos D1 Mini.
Change the Wi-Fi credentials
Click on the "Verify" button (checkmark icon) to compile the code. Make sure there are no errors or warnings displayed in the console.
Once the code has compiled successfully, click on the "Upload" button (arrow icon) to upload the code to the Wemos D1 Mini microcontroller.
The IDE will display the upload progress, and once complete, you should see "Done uploading" in the console.

Now you can see the display on and directly connect to your wifi, in a few seconds your clock will show the data

STL and Gerber Files

As you can see since I used a breadboard to build the circuit, the project is large

I want to shrink this project to a small size, so I made a PCB for this.

You can directly use my Gerber files, or create your own.

Gerber File, Codes: https://bit.ly/3qe1FI5

For the enclosure, I used 3D-printed parts, you can use my STLs here

Note that if you are using the same parts as I did, directly use my files for 3D printing

Custom PCB

If you're considering creating a printed circuit board (PCB) for your electronic project, NextPCB stands out as an excellent option. NextPCB boasts extensive experience as a leading PCB manufacturing company in China, specializing in PCB prototyping and fabrication.

Their services include comprehensive PCB assembly, complete with global free shipping, and adherence to ISO9001 quality control standards. Additionally, their website offers a convenient online Gerber viewer, allowing you to easily upload your Gerber and drill files to visualize your PCB design.

I got my custom-made PCB, and they were of very high quality.

Now the circuit becomes very very small.

All you need is just to solder the components to the PCB.

I soldered the Battery charging module first, and later I soldered Wemos board

LCD can be attached later after we encase these first in the 3D-printed case.

Casing

Luckily all the parts fit very well on my 3D-printed case.

Starting by adding the LCD display board to the case, I used tiny pieces of double-sided tape upon which I placed the battery, later I soldered the switch to the base of the box.

The battery was soldered directly to the PCB.

Now you can merge the case and couple ut with the screws, note that I dint exactly know the size of the screw, but you can use any tiny short screws.

Finishing

After the case is finally finished all you need to do is press the switch.

As soon as you do it, LCD will on showing a connecting symbol

As it connects you can directly see the clock.

You can see date, day, time and weather stats.

You can place this tiny little clock on your favorite places!

This completes this project, if you have any questions you can ask me in the comments.

Working Video and Tutorial

Here is the working video of this project, if you want a video tutorial on how to build this clock, just watch this video, I have provided all the details.

Hope you will enjoy making this desk clock project, Thank you for reading

Schematics, diagrams and documents

daigram_I72p7aIfa7.png

Code

code

#include <ESP8266HTTPClient.h> #include <ESP8266WiFi.h> #include <WiFiClient.h> #include <Adafruit_GFX.h> #include <Adafruit_ST7789.h> #include <SPI.h> #include <ArduinoJson.h> #include <NTPClient.h> #include <WiFiUdp.h> #include "bitmaps.h" //ESP82266 Board Manager - https://arduino.esp8266.com/stable/package_esp8266com_index.json // WIFI INFORMATION #define WIFI_SSID "YOUR WIFI SSIDE" #define WIFI_PASSWORD "YOUR WIFI PASSWORD" #define JSON_MEMORY_BUFFER 1024*2 // DISPLAY PINS #define TFT_CS 15 #define TFT_DC 4 #define TFT_RST 2 #define TFT_BL 5 // You can get API KEY and HOST KEY from RapidAPI, Search weatherapi.com and subscribe. const char* API_KEY = "YOUR API KEY"; const char* API_HOST = "YOUR HOST KEY"; // Display and WiFiUdp Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST); WiFiUDP ntpUDP; // NTP pool link:- // in.pool.ntp.org is for India // You can visit pool.ntp.org to find your server NTPClient timeClient(ntpUDP, "in.pool.ntp.org"); // Latitude and Longitude of you location. float lat = 28.63; float lon = 77.22; // API endpoint. String weather_url = "https://weatherapi-com.p.rapidapi.com/current.json?q=" + String(lat) + "%2C" + String(lon); // Global variables String current_time; String hour; String minute; String alternative; String weekDay; String month; int day; int year; int temp; // Array for days and months String weekDays[7]={"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"}; String months[12]={"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}; // For delay in fetching weather data. unsigned long lastTime = 0; unsigned long fetch_delay = 5000; void setup(void){ // Initialization Serial.begin(9600); tft.init(240, 240); WiFi.begin(WIFI_SSID, WIFI_PASSWORD); timeClient.begin(); // Set this to you timezone in seconds i.e 5:30 = 19800 seconds; timeClient.setTimeOffset(19800); // Set display rotation tft.setRotation(3); // Clear display tft.fillScreen(0); // Set text color tft.setTextColor(ST77XX_CYAN); // Set font size tft.setTextSize(2); String loading = "."; // While connecting to wifi while(WiFi.status() != WL_CONNECTED){ tft.setCursor(40, 90); tft.println("Connecting to "); tft.setCursor(40, 125); tft.print(WIFI_SSID); tft.println(loading); loading += "."; delay(500); } // Clear display tft.fillScreen(0); // Show connected tft.setCursor(60, 110); tft.println("Connected!"); delay(3000); // Clear display and fetch tempurature tft.fillRect(60, 110, 130, 50, ST77XX_BLACK); fetchTemp(); } void loop(){ // Update time. timeClient.update(); // Fetching weather after delay if((millis() - lastTime) > fetch_delay){ currentTime(); fetchTemp(); lastTime = millis(); } // Displaying items. display(); } void display(){ // default font size = 6x8px int font_w = 6; int font_h = 8; // UI size int time_size = 6; int alt_size = 2; int day_size = 3; // Display WxH int display_w = 240; int display_h = 240; // Distance between items int padding = 8; tft.setTextSize(time_size); // ie. 6x8 * 5 = 30x40 tft.setTextColor(ST77XX_WHITE, ST77XX_BLACK); // X and Y of time on screen int time_x = (display_w/2) - ((font_w*time_size)*5)/2 - (font_w * alt_size); int time_y = 40; tft.setCursor(time_x, time_y); tft.println(current_time); tft.setTextSize(alt_size); tft.setCursor((time_x + (font_w*time_size)*5), time_y); tft.println(alternative); tft.drawBitmap((time_x + (font_w*time_size)*4 + 14), (time_y + (font_h*time_size) + padding), wifi, 31, 24, ST77XX_WHITE); tft.setTextSize(day_size); tft.setCursor(20, time_y+(font_h*time_size) + padding + 10); tft.println(weekDay); tft.setCursor(20, time_y+(font_h*time_size) + (font_h*day_size) + padding * 2 + 10); tft.println(day); tft.setCursor(20 + (font_w * day_size)*2 + padding, time_y+(font_h*time_size) + (font_h*day_size) + padding * 2 + 10); tft.println(month); tft.setTextSize(4); tft.setCursor(20, time_y+(font_h*time_size) + (font_h*day_size) * 2 + padding * 3 + 10); tft.println(year); int temp_x = display_w - (font_w * 4)*2 - padding - (font_w * alt_size); tft.setCursor(temp_x, time_y+(font_h*time_size) + (font_h*day_size) + padding * 2 + 10); tft.println(temp); tft.setTextSize(alt_size); tft.setCursor(temp_x +(font_w * 4) *2 , time_y+(font_h*time_size) + (font_h*day_size) + padding * 2 + 10); tft.println("o"); tft.setTextSize(4); tft.setCursor(temp_x + 10 ,time_y+(font_h*time_size) + (font_h*day_size) * 2 + padding * 3 + 10); tft.println("C"); } // Formatting and setting time void currentTime(){ hour = String(timeClient.getHours()); minute = String(timeClient.getMinutes()); weekDay = weekDays[timeClient.getDay()]; time_t epochTime = timeClient.getEpochTime(); struct tm *ptm = gmtime ((time_t *)&epochTime); day = ptm->tm_mday; int current_month = ptm->tm_mon+1; month = months[current_month-1]; year = ptm->tm_year+1900; if(hour.toInt() >= 12){ alternative = "PM"; }else{ alternative = "AM"; } if(hour.toInt() > 12){ hour = map(hour.toInt(), 13, 24, 1, 12); } if(hour.toInt() < 10){ hour = "0" + hour; } if(minute.toInt() < 10){ minute = "0" + minute; } current_time = String(hour) + ":" + minute; } // Getting tempurature from API using Https request void fetchTemp(){ WiFiClientSecure client; HTTPClient https; client.setInsecure(); https.useHTTP10(true); if(https.begin(client, weather_url.c_str())){ https.addHeader("x-rapidapi-key", API_KEY); https.addHeader("x-rapidapi-host", API_HOST); int httpCode = https.GET(); if(httpCode > 0){ if(httpCode == 200){ DynamicJsonDocument doc(JSON_MEMORY_BUFFER); DeserializationError error = deserializeJson(doc, https.getStream()); Serial.print(https.getStream()); if(error){ Serial.println("deserialization error"); Serial.println(error.f_str()); temp = -1; }else{ temp = doc["current"]["temp_c"].as<int>(); } } } } https.end(); }

bitmaps.h

const uint8_t wifi[] PROGMEM ={ 0x00, 0x00, 0x00, 0x00, 0x00, 0x07, 0xc0, 0x00, 0x00, 0xff, 0xfe, 0x00, 0x03, 0xff, 0xff, 0x80, 0x0f, 0xf0, 0x0f, 0xe0, 0x1f, 0x00, 0x01, 0xf0, 0x3c, 0x3f, 0xf0, 0x78, 0x78, 0xff, 0xfe, 0x3c, 0x23, 0xff, 0xff, 0x88, 0x07, 0xc0, 0x0f, 0xc0, 0x0f, 0x07, 0xc1, 0xe0, 0x06, 0x3f, 0xf8, 0xc0, 0x00, 0xff, 0xfe, 0x00, 0x00, 0xf8, 0x3e, 0x00, 0x00, 0xe0, 0x0e, 0x00, 0x00, 0x0f, 0xe0, 0x00, 0x00, 0x1f, 0xf0, 0x00, 0x00, 0x1f, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x03, 0x80, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 };

Shop

Project Hub

Video

Blog

Shop home

3D printing

Single Board Computers

Development kits

Sensors

Internet of things

Robotics

Accessories

Product of the Week

Electromaker Educator

The Electromaker Show

The Electromaker Podcast

How To Make A Small Desk Clock With Weather Station

About the project

Project info