T^2 – Tea Brewing Made Easy

T2 - Tea Brewing Made Easier (Or So We Thought)

If you have ever brewed tea before you are likely to be guilty about forgetting it and walking away. Heck, we are all busy people and so why not make it easier on those who drink tea. Coffee has been given a host of tech goodies to make the process simpler so why not tea?

That is how we came up with the idea to create our own automated tea brewer. Tea steeped too long is always a disappointment and yet there are not many devices out there that fix that. With the right tools this project is fairly cheap and easy to do on your own.

We will share the process of doing the project two different ways and anyone can choose to do it either way. The design and the code examples are available for everyone to use for learning, as well as developing their own projects. We learned a lot over the course of this project and hope to save others some time when learning how to do similar projects of their own.

The name of the project is T^2 because it combines tea and time. We hope with the next version of the project that we will also be able to add a temperature sensor as well for an even better cup of tea.

The first version which included a little too much hardware to ever allow for anything else was a great learning experience. But the hassle of having to accommodate a solderless breadboard with meticulous attention to the spacing of the LEDs and buttons was tedious with replacing it for each test of the board.

The second version came from the desire to focus on a simpler design that would focus on doing the majority of the work through the code. We found that just debugging code is easier trying to debug the code plus the hardware.

Version 1 - Manual Input

The Hardware Design

This is an earlier version of the project that had physical buttons. We ended up moving away from this direction because it would prevent us from having as many options for future iterations of this project in which wish to add hardware. The setup that we had for this limited us to a single servo motor, 5 LED lights, and 4 buttons.


Version 2 - Digital Input

The Hardware Design

For the second iteration of the project we decided to leave out all of the hardware except for the servo motor. The only LED we would use is the one on the ESP8266 board. Our decision allowed Mr. Tinker to simplify the design significantly.

The Software Design

If this if your first time using an ESP8266 board to set up a web server you may want to take a minute and visit Build an ESP8266 Web Server – Code and Schematics. It is actually where the framework for the code we used for this project came from. It also gives a great run down of how to get started with the ESP8266 board. It gave us the confidence to move on to a more challenging project once we got it to work.

Getting the Servo To Function on Button Presses

If you took a look at the link about how to get started with the ESP8266 board above the screenshots that follow should look fairly similar. That's because the code itself at that point pretty much was the same.

The first real addition came from adding in the functionality of the servo. Mrs. Tinker used the loop from the first version to use the servo motor since it operates the same way. At this point the motor moves either forward or backwards with each button press.

The second addition came from having the LED on the board blink three times each time there is an input from the web server. This turned out to be very helpful with debugging throughout the development process each time code was added.

Additional Notes About Debugging

The developers out there will be quick to point out that even at the end of this post that the code Mrs. Tinker has is not "D.R.Y" meaning that many sections are copied and pasted. We got a lot of unexpected behaviors to happen throughout the project since we tried to copy and paste a lot of chunks once we got them to work elsewhere. This is a bad idea in general but helped us to better understand what we were doing with C++ or Arduino. Neither Mrs. Tinker or Mr. Tinker know C++ well enough yet to have perfect code and have both learned more than we would have thought through this process. We hope to improve as we go for sure.

Adding Google Fonts

We found the generic font family in the CSS to be a little boring and so Mrs. Tinker struck out onto the internet to see if it was possible to use Google Fonts in their ESP8266 web servers. Unfortunately it is not clear if there is another tutorial out there that advocates using it. The process it pretty much the same as using it in any other HTML file. The formatting for both the HTML and the CSS is just a little different. The two fonts that Mrs. Tinker chose for the project were Permanent Marker and Indie Flower from Google Fonts.

Click to view the code snippet

// Import Google Fonts
client.println("<link href=\"https://fonts.googleapis.com/css?family=Indie+Flower|Permanent+Marker&display=swap\" rel=\"stylesheet\">");

// CSS for the entire document
client.println("<style>html {font-family: 'Indie Flower', cursive; ...}");
// Button Class
client.println("button {font-family: 'Permanent Marker', cursive; ...}");

// Also make sure to close the style tag when you are finished with the CSS

Adding Background Colors

Despite the font family being changed the whole interface still felt a little dull. So we decided to add a bit of color to not only the buttons but the entire documents as well. Instead of copying and pasting the same CSS for each button Mrs. Tinker created a button class. She then created ID's for each button and state to more easily be able to customize the background colors.

Here is the background color for the web server and the customized color for each of the buttons. They do change color when they are pressed too.

Making the Exit Button Function Properly

Up until now the Exit button had not functioned like the rest of the buttons. It did not change the state or text from on to off. The following code snippet shows how the button can function similarly to the others. When the Reset button is pressed it will reset all of the other button states to off.

View the old Exit button code

// Display current state, and ON/OFF buttons for exit button
client.println("<p>Exit Button - State " + outputState + "</p>");
// If the outputState is off, it displays the ON button
if (outputState == "off")
client.println("<p><a href=\"/exit/on\"><button class=\"button\">EXIT</button></a></p>");
client.println("<p><a href=\"/exit/on\"><button class=\"button\" id=\"exitOn\">EXIT</button></a></p>");
client.println("<p><a href=\"/exit/off\"><button class=\"button\">EXIT</button></a></p>");
client.println("<p><a href=\"/exit/off\"><button class=\"button\" id=\"exitOff\">EXIT</button></a></p>");

View the new Cancel/Reset button code

if (header.indexOf("GET /exit/on") >= 0)
outputState = "on";
else if (header.indexOf("GET /exit/off") >= 0)
outputState = "off";
outputWState = "off";
outputBState = "off";
outputGState = "off";
outputHState = "off";

Adding the Brewing Delay, Countdown, and Text Notifications

Now that things were coming together we needed to add the brewing delay in otherwise the project was still incomplete. Mrs. Tinker added a countdown as well to mark the progress for the brewing process. We wanted to make sure that was a feedback system so any user (including us!) would know if it was working or not. In addition, we included helpful text to let the user know the brewing process began and finished.

The countdown shows every second from the start time.

Refactoring the Brewing Process

We both felt that the brewing process was initially a little clunky since the buttons did not update when the brewing process finished so Mrs. Tinker refactored the code to make it one process.

View the code snippet

if (header.indexOf("GET /green/on") >= 0)
outputGState = "on";
// Loop to move servo
for (angle = 70; angle > 0; angle--)
// sets the servo position according to the angle
// waits for the servo to get there
client.println("Time remaining:");
// Loop to print elapsed brew time. 2-4 minutes for green tea
for (int brewTime = 120; brewTime > 0; brewTime--)
// count down the brew time in minutes
double minutes = brewTime / 60;
// Change the type to a string
String minute = String(minutes);
// Only get the first number from the string (no decimals needed)
String newMinute = minute.substring(0, 1);
// count down the brew time in seconds
int seconds = brewTime % 60;
if (seconds % 30 == 0)
if (seconds / 30 == 0)
// add the second zero for better formatting
client.println("" + newMinute + ":" + seconds + "0");
// print without extra formatting
client.println("" + newMinute + ":" + seconds + "");
// Loop to return the servo motor back to starting position
for (angle = 0; angle < 70; angle++)
// sets the servo position according to the angle
// waits for the servo to get there
outputGState = "off";

Removing the Exit/Reset Button

After refactoring the brewing process the Exit now Reset button is not really needed since the state of the button reverts back to Brew when the brewing process finishes. Unless we put the Reset button before the rest of the buttons it also would not help even if the wrong tea was selected to brew. So we thought it was just best to remove it and use the manual reset button on the ESP8266 board if needed.

Adding the Real Brew Time and Modifying the Countdown

At this point all that was left to do to wrap up the project was to add in the real brew times for each of the teas. However, neither of us felt that we were happy with how the countdown functioned since each second was displayed on a new line each time. So Mrs. Tinker chose to show only updates every 30 seconds instead.

Reformatting The Heading and Making the Font Size Larger

As you might have noticed the title of the project changes just a bit from T^2 to T2. We also increased the font size of the regular text to make it a little easier to see from farther away. It is also worth mentioning that it is a easy process to change the font and text size. We made the decision to use the web server primarily from our phones and so we customized everything to fit while still being easy to read.

The (Sort of) Live Demo

Tonight was the night when we not only tested to make sure the whole thing worked live actual hot water and a tea bag but we also took a video of it. Though over the course of all of the different shots we took the final video might not show that the water was even all that hot or that there was that much water left after all of the previous takes. All in all there were about 5 different bags of tea used for the single cup of water. When all was said and done we also realized that the cup was a little dusty since it had been sitting on our desk waiting for this moment but we still decided to drink it despite all of that since it was our first cup of tea that we had brewed by our app. (Mrs. Tinker said that it tasted like success if you are wondering.)

View All of the Source Code

To view the code as well as all of the various versions that were mentioned throughout this post visit Mrs. Tinker's GitHub page.


Leave a Reply

Your email address will not be published. Required fields are marked *