Cute Weather Display That Is Also a Desktop Pet (❛◡❛✿)

by tobychui in Circuits > Electronics

1881 Views, 21 Favorites, 0 Comments

Cute Weather Display That Is Also a Desktop Pet (❛◡❛✿)

logov2.png
banner.png
frontLED.png
overview.png

A few years ago, I got a concept of building a desktop weather display with clock and a desktop pet to make the display cute. I was inspired by the 20th year anniversary of a Japan software called "Sakura Script Player" or SSP for short, a tiny little desktop pet program that was commonly used in Japan around 2000.

The pet was a desktop software that run on Windows XP and can provide you time and weather information, as well as provide an interface for you to script your own functions. And I thought,

Wait, isn't this actually a weather display?

So I developed a project idea called the "ArOZ DSSP" back then but I never got my hand on building one. Until recently, when I moved out and start living by myself, I found out a weather / clock combo display will be really helpful. So I decided to build one base on my old project sketches.

Supplies

This project is very simple. You only need the following materials

  • A 3D printer
  • UART HMI Display (TJC8048X550_011)
  • ESP8266 (Wemos D1 Mini)

and if you wonder why there are no real time clock (RTC) module in this material list, as you can pull time information from NTP servers, why you ever need a RTC module right?

Open Source

In this weather display + desktop pet project, I have implemented the following features.

  1. Time display
  2. Date display
  3. Weather display
  4. Touch interaction to the pet
  5. Conversation dialog / notification
  6. Programmable API (via RESETFUL)

This project implements all of these feature in software and open sourced on Github. However, I know that Instructable readers don't really like software as much as hardware, I am gonna skip these for now. For full software side detail, visit the project Github repo at https://github.com/tobychui/Weather-Pet-Display :)

Flashing the ESP8266

Screenshot 2022-05-26 180941.png
Screenshot 2022-05-26 181428.png

This part is simple. Install the ESP8266 dependencies into your Arduino IDE, get the code from my Github repo (https://github.com/tobychui/Weather-Pet-Display) and click "Upload".

After the program has been uploaded, you will find a new WiFi with SSID "ArOZ DSSP" show up in your WiFi scanning list. Connect to it and follow on screen instruction for connecting your ESP8266 to your home WiFi network.


Note that the code use weather API from the local government where I currently living. You might want to change this section of the code to match your geographical location and the API provided by your local observatory websites.

The code is default to output big-5 Chinese to the display. However, you can also change it to English by modifying these two lines here (See image 2) in the esp8266.ino file.

Flashing the HMI Display

Screenshot 2022-05-26 181307.png

The software that I am using here is the UART HMI Studio provided by the HMI display manufacturer. I guess most HMI out there use this software as an OEM solution to different country so the files I provided on the Github repo should works on most of the HMI display out there.

The Chinese characters will get overwritten by the output from the ESP8266. To switch the interface to English, see the previous step and modify the required two lines in the esp8266.ino source code.

Wiring Up the ESP8266 and Display

photo_2022-05-21_00-24-20.jpg
photo_2022-05-21_00-25-53.jpg

This project only takes 4 wires to complete.

[Wemos D1 mini] → [UART HMI]

5V → 5V (RED wire)

GND → GND (BLACK wire)

D1 → RX (BLUE wire)

D2 → TX (YELLOW wire)

Modeling the Display Support With TinkerCAD

Screenshot 2022-05-26 174952.png
Screenshot 2022-05-26 175011.png

In this step, we are designing a simple base to support the display. First we create three rectangles and subtract them to create a hollow base. Then we export it as stl and save it somewhere on your local computer for post processing.

Post Processing With APrint Editor

Screenshot 2022-05-26 175059.png
Screenshot 2022-05-26 175216.png
Screenshot 2022-05-26 175327.png

After we exported the stl file from TinkerCAD, we need to add a bit more details to it. First we create the rounded corner using aPrint build in corner rounding tools and create the two screw holes based on the display mounting hole. Finally, we export another stl file and send it to print.

Mounting the Display to the Base

photo_2022-05-21_00-24-20 (2).jpg

The base can be easily assembled based on the two screw holes and 2 x M3x10 screws. If your display keep tipping over, you can add another block in front to stop it. An example is shown in the attached picture.

Powering It Up

photo_2022-05-20_09-03-33.jpg
photo_2022-05-20_13-52-11.jpg
photo_2022-05-20_00-28-47 (2).jpg
photo_2022-05-20_14-32-47.jpg

The last step is to power it up. Plug in the micro USB cable into your Wemos D1 (ESP8266) micro USB port and your display should light up. After 3 seconds, the WiFi should be connected and time, weather information are starting to show up on screen.

Now you got yourself a cute little desktop pet weather display!

(Attached video showcase the interaction with the pet using touch display)