How to Make a Retro Mini-TV!

[Update: I changed the back panel to allow for more air flow.]

One of history's greatest inventions is the television however, with each passing decade the television loses some of its original flare as people only seem to be focused on reducing its size and not preserving the beautiful design from which it all began. I want to bring some of that classic charm back to life in this build.

Last year I built my first version of this retro television. It was powered by an ESP32 and it displayed local weather data which worked really well. Although it was fully 3D-printed so it lacked that true retro aesthetic. To fix that, I wanted to try and build the housing for the electronics out of wood which I have never used in a project before but it turned out pretty well.

I also wanted to go a bit further than simply displaying weather data. I wanted this mini TV to act as a sort of news channel, so in addition to an improved weather interface, I added the ability to get the national headlines for any country in the world!

I also upgraded to a larger LCD screen and designed my own custom PCB.

Let's get started!

Components

• ESP32 $21.88
• LiPo $9.49
• LCD $15.49
• Latching Pushbutton $6.99
• Momentary Pushbutton $8.99
• Resistors $11.99
• Pin Headers $4.99
• Charging Circuit $14.95
• SD-card Reader $12.24
• Wood Board $4.93

Tools

• Drill
• Calipers
• Soldering Iron /w solder
• 3D Printer
• filament
• Sand Paper
• Super or Hot Glue
• Wood Glue
• Dremel
• saw

This is the design I came up with for the mini television using TinkerCAD. As you can see, I tried to keep the overall vintage aesthetic even though the hardware inside is far from it. I guess you could say I have created a retro facade.

The design consists of six pieces, the front panel, feet, buttons, back panel, port, and antenna. Although the surrounding case will be made using wood, I want everyone to be able to visualize how everything will look if you decide to mix up parts of the design. For example, if you would like to use different colored PLA simply open the model, click on the piece you want to change and select a different color. The design is here for the taking so make it yours!

I am using using Cura to slice my 3D models as it is free and easy to use. If you are unfamiliar, Cura is a slicing program that chops up your 3D model into tiny slices which your 3D printer can use to build the model from the ground up. I will just give a brief over view of some of the main settings you should be aware of.

One important setting is travel speed. As you can probably guess, this defines how fast the printer prints. While a faster travel time will decrease printing time it will also create a messy print, so the goal is to find the fastest speed your printer can move at while still maintaining a quality finish. For most hobby grade machines this will be around 50-60mm/s.

Now I will go over infill and the infill line multiplier. The infill percentage is a description of how solid your 3D print will be. For example, if you use a 50% infill then half of the interior of your model will be solid while the other half is empty. Although the 3D printer does not just fill one half with PLA and leave the other side empty as that would result in a mess; rather, it uses some sort of geometric pattern, like pictured above, to support the print from within. Likewise, the infill line multiplier specifies how thick the infill is going to be. A higher infill multiplier will result in a more rigid print but it will also take more time to complete.

One last thing we should cover are supports. Supports are as simple as they sound. All they do is support your main print in extreme angles that would otherwise be impossible for your printer to complete on its own. They get printed along with your main model and can be easily torn or clipped off once finished. Only two parts in this design require supports, the back plate and the antenna. Supports are enabled in Cura by default but if you ever want to change the angle at which supports are used simply click on your profile settings in the top right and go to custom>Support. For reference mine is set to 10°.

I am using 6.5x90x200mm oak wood to create the sides, but any type or size of wood can be used.

First, cut off two sections with dimensions of 122x50mm these will be the top and bottom sides. I recommend using something like a mitre box pictured above to get straight sides. For the side panel cut off a piece that is 53x67mm. We actually need two of these, but before we cut the other side we need to cut a hole in it for the charging/programming ports.

Take a pencil and sketch a rectangle that is 53x22mm within the second side piece. This second rectangle needs to be offset by 9mm from the top and side of any one of the corners as shown above.

Now we need to cut out this inner rectangle. At first I was not quite sure how to do this so I consulted the master craftsman himself, my dad. He taught me that the best way to go about this is to first drill a larger hole inside the rectangle then to use something like a jigsaw to cut out the rest. This could also be done with a Dremel and sandpaper.

Now that we have all the sides we need to glue them together, but before you get out the glue, I recommend getting some wet paper towels so that you can wipe up any excess glue that may drip over.

Spread some glue onto one of the shorter sides then using something with a 90° edge, like excess wood, line up the side panel to the end of one of the long pieces. Repeat this process for the other side panel on the other side, and finally, glue the remaining board to the top. While it is drying, get some clamps to hold it together this will create a stronger bond and after about 1.5~2 hours the glue should be perfectly dry.

Once it is completely dry we can sand down the edges. This is optional considering most vintage TVs had hard edges but I prefer the rounded corners. I used an electric sander but it could also be easily done with sandpaper.

Now is also a good time to super glue the 3D-printed port into the hole we created. The longer hole should be oriented up like shown above.

Now we have to create the circuit. I designed a PCB for a slimmer design. If you would like to use the PCB for yourself download the Gerber file from my Github where I have also included instructions on how to order it. If you decide to order the PCB for yourself it is pretty straightforward how everything is connected as there are either outlines or labels for each component on the PCB itself.

Note: Solder the smaller side of the pin headers through the PCB so as to not damage the LCD on the other side.

If you do not want to order the PCB you can always create the circuit on something like perf board using the schematic above or connections below as a guide.

For those of you who are bit more curious on how the circuit works I will go a little bit more in depth. Both the SD-card reader and the LCD are connected to the ESP32 via SPI protocol which is a type of connection that enables the ESP32 to both send and receive data. The microcontroller knows when to switch modes when the user presses the momentary pushbutton. The whole system is powered by a 3.7v Li-Po battery which is connected to a charging module, the Adafruit 500c. Although 3.7v is not enough to power the ESP32 so the charging module also boosts the voltage to 5v. The circuit can be toggled on/off with the latching pushbutton located just below the momentary pushbutton.

Circuit Connections

ESP32 -> LCD(ILI9341)

3.3v -> 3.3v

GND -> GND

D15 -> CS

D4 -> RST

D2 -> DC

D23 -> MOSI

D18 -> SCK(CLK)

3.3v -> LED(Backlight)

ESP32 - > SD-Card Reader

3.3v -> 3.3v

GND -> GND

D18 -> SCK

D19 -> MISO

D23 -> MOSI

D5 -> CS

Resistor -> Momentary Push-Button

Leg 1 -> Pin 2

Leg 2 -> GND

ESP32 -> Momentary Push-Button

3.3v -> Pin 1

GND -> Pin 2

D21 -> Pin 2

ESP32 -> Charging Module

Vin -> 5v

GND -> GND

Latching Button -> Charging Module

Leg 1 -> EN

GND -> GND

In order to display the weather icons on the LCD, we first have to store them on the SD-card so the ESP32 can find them.

The way the icon system works is that there are two images for every weather description, one for the daytime and one for the night, and each photo is named after its description. For example, if one photo is a rain cloud then the name of that file will be rain.jpg. To know which one to get the microcontroller looks at the time and decides if it is nighttime or daytime. Once it has determined the time it then looks up the type of weather then picks the corresponding JPG.

All you have to do is download the file named Icons.zip from my Github. When it is downloaded, plug your SD-card into your computer and extract the Icons.zip file into your SD-card directory.

Since the ESP32 is not an actual Arduino board we have to make sure the Arduino IDE can recognize it. Open any Arduino sketch then navigate to file>preferences and copy-paste the link below into the bar labeled Additional Boards Manager URLs like shown above.

https://dl.espressif.com/dl/package_esp32_index.json

The Arduino IDE can now recognize the ESP32, but we still need to select it as the board we are going to upload to. Navigate to Tools>Board>Boards Manager now search for, ESP32. Install the first option. Once it finishes downloading navigate to Tools>Board>ESP32 Arduino>ESP32 Dev Module and click on it. We are now ready to upload a sketch to the board.

We now need to install and configure the library for the LCD. I followed this great example by XTronical on YouTube, but I will try and give you my best explanation.

First, open the Arduino IDE and navigate to Tools>Manage libraries and search for tft_espi and install the one labeled TFT_eSPI. Now open your libraries file that is located under your Arduino folder. Open TFT_eSPI>User_Setup.h with a text editor such as Notepad.

In this text file, we have to uncomment a couple of lines. In case you do not know, a comment is a word or a phrase that exists within code but does not interfere with it. In other words, it is ignored by the code. In Arduino, a comment is denoted by a double forward slash at the beginning of the line, //.

Uncomment lines 196-201. Deleting the double forward slashes at the beginning of each line defines the SPI pinout used by the ESP32 to connect to the LCD. Now we need to do exactly the opposite and comment lines 161-163 by typing a double forward slash at the beginning of each line, these lines were the defined pins used by default to connect to the LCD. Hit cntrl+s to save it.

I promise we will upload the code soon but before we need to obtain a couple of API keys. An API key is a long list of characters that a web service uses to know who is requesting information and to make sure they are allowed to. Your API key is unique to you and should not be shared with others.

The first one we need is from OpenWeatherMap and the other from NewsAPI. This process is pretty straightforward for both websites. Click the sign-up button in the top-right corner; upon finishing you will be presented with your unique API key. Keep these windows open as we will need to come back to them in the next step to copy the key so we can paste in the code.

We are finally ready to upload the code to the ESP32. Once you have downloaded the file below it will create a new instance of the Arduino IDE where we have to make a few tweaks to the code.

Let's start on lines 33-34. Enter your Wi-Fi SSID and password respectively. On line 40 enter your GMT offset in seconds. (You can find your GMT offset with this link.) By default, it is set to -4 hours or -14,400 seconds which is Atlantic Standard Time.

On lines 48 and 53 we are going to enter the API keys we got in the last step. Simply, copy and paste the key between the quotation marks. The OpenWeatherMap API key goes on line 48 and the News API key goes on line 53.

For lines 44-50 change each variable to match your geographical location. These are things such as city name, country code, language, and your unit system, i.e. metric or imperial.

Once you have made all the necessary changes simply plug in your ESP32 and upload the code by clicking on the arrow in the top left corner.

At this point, we should have the wooden case, 3D-printed parts, and the code uploaded to the ESP32. Now let's put them together!

Slot the PCB in by pushing the ESP32 through the hole on the side. It should stand up on its own as shown above, but we should also add some hot glue around the edges for some extra durability. When doing this we need to be aware of the ports on the left side, so make sure the PCB is pressed firmly up against it so we will not have any trouble plugging a micro-USB cable in for charging or programming.

Now let's glue the front panel. As with the other parts, I used hot glue to hold it in place, but this ended up spilling over the edge as hot glue is very thick, so I would recommend using superglue as this will create a more sleek finish. Hot glue also dries very quickly, which can be a blessing or a curse, but superglue will give you the chance to wipe up any excess glue with a wet paper towel as it takes longer to dry.

Once it does dry, we can attach the buttons. Simply, add a drop of glue to the bottom of each button and press it through the hole. Although do note that the shorter button goes on top and the longer one goes on the bottom. The reason they are not the same length is that the momentary pushbutton, the one on top, is taller than the latching button below it.

Unlike the feet, the location of the antenna varied from model to model. I opted to place it on the far right, but it would also look good in the middle. For the little peg feet, I placed them in the bottom corners as this is where most vintage televisions have them and it is the sturdiest. Also, if you are having any trouble with getting the feet, antenna or really anything to securely adhere to the bottom try roughing up the surface a little with sandpaper.

Remember, if you are unsure about how something will look simply try it out first with the 3D model!

I also added an optional back panel to the list of 3D-printed parts that can be easily super-glued to the rear like the front panel. Although if you have any plans to tinker with the internal electronics any further I recommend leaving this detached for now.

Note: The back panel in the picture is the old design.

The only thing left to do is to turn it on and test it out!

Press the toggle button on the bottom and wait for it to turn on. It may take around 10 seconds to boot up because it has to connect to your Wi-Fi. When it turns on you will be presented with your local weather data such as temperature, a weather description, humidity, sunset/sunrise, and much more!

Upon pressing the top button the screen will display that classic SMPTE screen and switch over to displaying the national headlines. When it has scrolled through the news it will return to the weather info. When you are done just press the bottom button again and the television will turn off.

If you enjoyed this project have a look at some of my other tutorials. Happy making!

"For God so loved the world that He gave His one and only Son that whoever believes in Him shall not perish but have everlasting life" - John 3:16

If you want to read an Instructable that has real value, check this out!