![\"\"](\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2021\/02\/Banner-copy-1-1030x559.jpg\")
<\/figure>\n\n\n\nIntro to the Kitchen Timer Project<\/strong><\/h2>\n\n\n\n<\/div>\n\n\n\nYou must be wondering – what\u2019s the point of a timer? Aren\u2019t kitchen timer\u2019s really affordable nowadays?<\/p>\n\n\n\n
Well, you\u2019re right! But this isn\u2019t any ordinary kitchen timer.<\/p>\n\n\n\n
Meet the \u201cMaggie Maker\u201d!<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/lh3.googleusercontent.com\/DKG5NGPV3xSL1vTCixCkayqODDTCefmTQyHXQwwEdkChSR9vUBTyzLJ7tWXbY-cTyEw_tvOWYjr7swsX0kCT5uewd_ETkBEQBSQMrtAU188lFkgHXhu35x_Q44g_kuwp1HqQnGp8\")
<\/figure><\/div>\n\n\n\n<\/div>\n\n\n\nThe Maggie Maker is a cookbook \/ timer all-in-one. By default, I\u2019ve programmed the timer to show you how to make a simple bowl of instant ramen with egg, hence the name (see Wikipedia – Maggi<\/a>).<\/p>\n\n\n\n<\/div>\n\n\n\nHere are some features of the customisable timer:<\/p>\n\n\n\n
- Step-by-step instructions for cooking<\/li>
- Built in timer for instructions that are time-sensitive (like boiling that perfect egg!)<\/li>
- Toggle-able alarm setting from the main page<\/li><\/ul>\n\n\n\n<\/div>\n\n\n\n
Follow today’s tutorial to you can have it working with any Wio Terminal or Arduino with a TFT LCD display in your possession – in no more than 5 minutes! Furthermore, you can customise this timer to display your favourite recipe – and I\u2019ll show you how right now.<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/lh4.googleusercontent.com\/6Z47vhsqj5J_aFbg9lqV60umOvafXdk4azOT_5Kkvgf7vz6FMFe1b9Lzm6sAwcg_G8oz44mjMobGEg1mXD4jfZTGoBEzLolMfyG2GXjskTtLg0EYOXdo2iWJ1D_21N6aoC0ptymO\")
<\/figure><\/div>\n\n\n\n<\/div>\n\n\n\nHow do I Use the Timer?<\/strong><\/h2>\n\n\n\n<\/div>\n\n\n\nEven if you have no experience with computer programming, you can simply use the code I\u2019ve written with ease. Just follow these steps!<\/p>\n\n\n\n
<\/div>\n\n\n\nIf you\u2019re not using a Wio Terminal\u2026<\/strong><\/h3>\n\n\n\n<\/div>\n\n\n\nThe code is written to work with LCD display resolutions of 320×240, but is untested on platforms other than the Wio Terminal. If you have a display with a different size, you may have to tweak the drawings to make some elements display correctly.<\/p>\n\n\n\n
We will be using the Wio Terminal\u2019s built in button inputs to control the timer. If you are using another Arduino board, you will require a minimum of two additional buttons to take advantage of the full program functionality. You will also have to reconfigure the input pins in the setup() function of the Arduino code.<\/p>\n\n\n\n
<\/div>\n\n\n\n1. Download the Arduino IDE<\/strong><\/h3>\n\n\n\n<\/div>\n\n\n\nIn order to program our Wio Terminal \/ Arduino board, we are going to use the comprehensive Arduino IDE. First choose the appropriate download for your operating system here<\/a>.<\/p>\n\n\n\nThen, you can follow the following instructions to get installed: Windows<\/a> \/ Mac OSX<\/a> \/ Linux<\/a><\/p>\n\n\n\n<\/div>\n\n\n\n2. Download Timer Code & Install libraries<\/strong><\/h3>\n\n\n\n<\/div>\n\n\n\nNext, download the timer code from GitHub<\/a> as a whole folder. We\u2019re going to need all the files in the repository to let the code work.<\/p>\n\n\n\nIf this is the first time you\u2019re using your Wio Terminal, visit the Seeed Wiki page<\/a> to perform your initial set up.<\/p>\n\n\n\nFor other Arduino boards, visit Arduino\u2019s Getting Started page<\/a>, and select your board from the scrollable navigation panel on the right for your instructions.<\/p>\n\n\n\nOnce that\u2019s done, we\u2019re going to install the TFT_eSPI graphics library<\/a>. This is what allows things to be drawn onto our LCD display.<\/p>\n\n\n\nTo install the library, open the library manager<\/a> in the Arduino IDE and search for \u201ctft_eSPI\u201d. Install the library.<\/p>\n\n\n\n<\/div>\n\n\n\n![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/-QdjrghR-hpdp5zPPTPw1Hjgitj9mJ-GZxj84gU-YiALF8r81UV44JG36LphfBlb9o0oP_8nBKR_TvXNm5e6VcuMPQCa2gRYxEUAw3oXlwSZ3fyh6EzAUmVlc5jjdcj9nQrbjGif\")
<\/figure><\/div>\n\n\n\n<\/div>\n\n\n\n3. Customise Timer Code<\/strong><\/h3>\n\n\n\n<\/div>\n\n\n\nNow\u2019s the fun part. Open the MaggieMaker.ino file and scroll all the way to the bottom.<\/p>\n\n\n\n
You should see the loop() function shown below (or some variation of it).<\/p>\n\n\n\n
<\/div>\n\n\n\n![\"\"](\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2021\/02\/Book-Code-1-1030x191.png\")
<\/figure><\/div>\n\n\n\n<\/div>\n\n\n\nYou can think of this as a digitalised cookbook. We first have a cover() function, which takes in 0 for the front cover and 1 for the rear.<\/p>\n\n\n\n
The front cover() is customisable with two additional String inputs. For example, if you wanted to have it show \u201cHow to make pancakes\u201d, you would write:<\/p>\n\n\n\n
<\/div>\n\n\n\ncover(0, \u201cHow To\u201d, \u201cMake Pancakes\u201d);<\/code><\/pre>\n\n\n\nFollowing this, we have where the magic happens – the page(). The page() function takes in a few parameters in this order:<\/p>\n\n\n\n
- Step Number<\/strong> – Displays the step number of the current page.<\/li>
- Title<\/strong> – This is the main instruction for the page.<\/li>
- Duration<\/strong> – How long should the timer for this step run for? Enter 0 if no timer is required (eg. preparing or adding ingredients).<\/li>
- Notes1<\/strong> – First line of notes. Describe the step or accompanying instructions.<\/li>
- Notes2<\/strong> – Second line of notes. Optional input<\/li>
- Notes3<\/strong> – Third line of notes. Optional input.<\/li><\/ol>\n\n\n\n<\/div>\n\n\n\n
The best thing is that you can add as many pages as you want, so you can really turn this into any kind of cookbook. Have fun with it!<\/p>\n\n\n\n
<\/div>\n\n\n\n4. Flash to Wio Terminal<\/strong> \/ Arduino<\/h3>\n\n\n\n<\/div>\n\n\n\nOnce you\u2019re done customising your recipe, we will have to flash it to our Wio Terminal or Arduino board by clicking the arrow button next to the check mark in the Arduino IDE.<\/p>\n\n\n\n
![\"\"](\"https:\/\/lh6.googleusercontent.com\/yYI0yyul3PZI92lwvf5HGFfZCYWZHj4Oot6FKUMhUARnX_EXhs6c9TZAdKXcJzeLc902cTowFRx3S4FTBu9sHfhLDVFwKz1xbw8kCy1tTEQxQqKT9bT8S1bBxU1eAUl89U_Hwb-a\")
<\/figure><\/div>\n\n\n\n<\/div>\n\n\n\nFor more information, please refer to Step 5 on this page<\/a>. These instructions will apply to all Arduino boards as well.<\/p>\n\n\n\n<\/div>\n\n\n\nIf you encounter an error, take a look at what the console says (that\u2019s the black window at the bottom):<\/p>\n\n\n\n
<\/div>\n\n\n\nIf you see \u201cinvalid conversion\u201d …<\/strong><\/h4>\n\n\n\nThis means that you\u2019ve input the wrong type in the wrong place. Remember that page() takes in 4 compulsory and 2 optional inputs in a specific order! Text inputs should be encapsulated by a \u201c…\u201d, whereas number inputs can be typed plainly.<\/p>\n\n\n\n
<\/div>\n\n\n\nIf you see \u201cexpected \u2018;\u2019 before\u201d …<\/strong><\/h4>\n\n\n\nThis means that you\u2019ve missed out a semicolon! The semicolon or \u2018;\u2019 character denotes the end of the line. The IDE should highlight the line that this problem is associated with, so the missing semicolon should be easy to find.<\/p>\n\n\n\n
<\/div>\n\n\n\nIf your code was uploaded successfully but the LCD display is blank …<\/strong><\/h4>\n\n\n\nThis can mean that there is a conflict in the TFT_eSPI library that you have installed. To fix the issue, head over to your Arduino\/Libraries folder and delete the TFT_eSPI library folder there. Reupload your code and the display should work now!<\/p>\n\n\n\n
<\/div>\n\n\n\n
\n\n\n\n<\/div>\n\n\n\nFrom this point on, we\u2019re going to get into the implementation! <\/p>\n\n\n\n
<\/div>\n\n\n\nPlatform Introduction: Wio Terminal<\/strong><\/h2>\n\n\n\n<\/div>\n\n\n\nIf you\u2019ve gotten this far without a Wio Terminal, kudos to you! Because Arduino boards come relatively barebones with no peripherals other than their GPIO pins, you would\u2019ve had to figure out most, if not all, of the hardware configurations.<\/p>\n\n\n\n
For this reason, I\u2019ve chosen the Wio Terminal for this project. The Wio Terminal is a fully integrated microcontroller development platform that supports Arduino and MicroPython. It carries Bluetooth, Wi-Fi connectivity, and comes with an LCD screen, onboard IMU, microphone, buzzer, light sensor and infrared emitter.<\/p>\n\n\n\n
![\"\"](\"https:\/\/lh4.googleusercontent.com\/sbSpoVZpEoOHOj43sT-bQnzWPRukgsM4Y59VAHKbIkjiU-gMDwSV2G-k3xGfEwDtcRM5wQ9F5P4bH6s0_-nQfyFN8h3i_uVNkpbLQ-6_4UUEAh56bTArF7JJHbKNpLOcrSvYhCmV\")
<\/figure><\/div>\n\n\n\nAll I have to do is plug in a common USB Type-C cable, and I can begin writing my code. Not to mention, if I combine it with its battery chassis<\/a>, I’d already have a mobile kitchen timer form factor – exactly what I needed!<\/p>\n\n\n\nYou can pick up a Wio Terminal from the Seeed Online Store<\/a>.<\/p>\n\n\n\n<\/div>\n\n\n\nCookbook Program Schematic<\/strong><\/h2>\n\n\n\n<\/div>\n\n\n\nIn this section, I will break down the Arduino code used in the programming. If you haven’t downloaded the project code, you can do so here<\/a>.<\/p>\n\n\n\nYou\u2019ll be able to learn how the code supports the timer\u2019s features – so you can easily make adjustments for your own uses!<\/p>\n\n\n\n
However, I won\u2019t be covering the library syntax, so feel free to refer to the following links for their documentation as we go along. You\u2019ll ideally also want to have the full Arduino code by your side, so you know what fits where!<\/p>\n\n\n\n
- TFT_eSPI Graphics Library Documentation<\/a><\/li>
- TFT_eSPI Sprite Class Documentation<\/a><\/li><\/ul>\n\n\n\n<\/div>\n\n\n\n
There are 2 main \u2018modules\u2019 to the entire Arduino program – the cover() and the page().<\/p>\n\n\n\n
<\/div>\n\n\n\nCover()<\/strong><\/h3>\n\n\n\nThe cover() function serves two simple purposes – to display the cover text and to allow for the alarm sound to be toggled.<\/p>\n\n\n\n
First, we display the text, then enter a while loop that continues when the clicker_state is 0. In this loop, there are multiple \u201cif\u201d statements. Essentially, we are asking the program to continuously check if these buttons are being pressed.<\/p>\n\n\n\n
while (clicker_state == 0) {\n \/\/ <<ALARM TOGGLE CODE>>\n if (digitalRead(WIO_KEY_C) == LOW) {\n \/\/ TOGGLE ALARM\n }\n \/\/ BREAK OUT OF LOOP IF BUTTON IS PRESSED\n if (digitalRead(WIO_5S_PRESS) == LOW) {\n clicker_state = 1;\n delay(500);\n alarm_text.deleteSprite();\n }\n}<\/code><\/pre>\n\n\n\nThe first condition will toggle between alarm_state 0 and 1, displaying the audio indicator accordingly.<\/p>\n\n\n\n
\/\/ << ALARM TOGGLE CODE>>\nif (digitalRead(WIO_KEY_C) == LOW) {\n if (alarm_state == 1) {\n alarm_state = 0;\n tft.fillRect(300, 0, 50, 50, TFT_BLACK);\n delay(500);\n } else if (alarm_state == 0) {\n alarm_state = 1;\n alarm_logo();\n delay(500);\n }\n}<\/code><\/pre>\n\n\n\nThe second condition is waiting for the main button to be pressed, which will set the clicker_state to 1. This will exit the loop and the function ends. The program automatically moves into the following function, which is usually a page().<\/p>\n\n\n\n
<\/div>\n\n\n\nPage()<\/strong><\/h3>\n\n\n\nThe page() function is just slightly more complicated. First, take a look at the schematic.<\/p>\n\n\n\n
![\"\"](\"https:\/\/lh6.googleusercontent.com\/H97EgRj3WnSWju_pqs670cleCpRdo9wwOkc4Hi_BB8Utl_JN77cgpmP473FzAuJxQ06DIUyyIGsxzBfaggDs7v2dfdxP-cZpnYmD1PITcnWaYJvpBSYO1LLMAUML0xxvv2MezQfO\")
<\/figure><\/div>\n\n\n\nWhen page() is called, it immediately creates the sprites for the text to be displayed on the page, then pushes them to be displayed on the LCD. Then, we enter a loop where we await input from the user before proceeding.<\/p>\n\n\n\n
<\/div>\n\n\n\nIf duration is not 0 \u2026<\/strong><\/h4>\n\n\n\n<\/div>\n\n\n\n
You must be wondering – what\u2019s the point of a timer? Aren\u2019t kitchen timer\u2019s really affordable nowadays?<\/p>\n\n\n\n
Well, you\u2019re right! But this isn\u2019t any ordinary kitchen timer.<\/p>\n\n\n\n
Meet the \u201cMaggie Maker\u201d!<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nThe Maggie Maker is a cookbook \/ timer all-in-one. By default, I\u2019ve programmed the timer to show you how to make a simple bowl of instant ramen with egg, hence the name (see Wikipedia – Maggi<\/a>).<\/p>\n\n\n\n Here are some features of the customisable timer:<\/p>\n\n\n\n Follow today’s tutorial to you can have it working with any Wio Terminal or Arduino with a TFT LCD display in your possession – in no more than 5 minutes! Furthermore, you can customise this timer to display your favourite recipe – and I\u2019ll show you how right now.<\/p>\n\n\n\n Even if you have no experience with computer programming, you can simply use the code I\u2019ve written with ease. Just follow these steps!<\/p>\n\n\n\n The code is written to work with LCD display resolutions of 320×240, but is untested on platforms other than the Wio Terminal. If you have a display with a different size, you may have to tweak the drawings to make some elements display correctly.<\/p>\n\n\n\n We will be using the Wio Terminal\u2019s built in button inputs to control the timer. If you are using another Arduino board, you will require a minimum of two additional buttons to take advantage of the full program functionality. You will also have to reconfigure the input pins in the setup() function of the Arduino code.<\/p>\n\n\n\n In order to program our Wio Terminal \/ Arduino board, we are going to use the comprehensive Arduino IDE. First choose the appropriate download for your operating system here<\/a>.<\/p>\n\n\n\n Then, you can follow the following instructions to get installed: Windows<\/a> \/ Mac OSX<\/a> \/ Linux<\/a><\/p>\n\n\n\n Next, download the timer code from GitHub<\/a> as a whole folder. We\u2019re going to need all the files in the repository to let the code work.<\/p>\n\n\n\n If this is the first time you\u2019re using your Wio Terminal, visit the Seeed Wiki page<\/a> to perform your initial set up.<\/p>\n\n\n\n For other Arduino boards, visit Arduino\u2019s Getting Started page<\/a>, and select your board from the scrollable navigation panel on the right for your instructions.<\/p>\n\n\n\n Once that\u2019s done, we\u2019re going to install the TFT_eSPI graphics library<\/a>. This is what allows things to be drawn onto our LCD display.<\/p>\n\n\n\n To install the library, open the library manager<\/a> in the Arduino IDE and search for \u201ctft_eSPI\u201d. Install the library.<\/p>\n\n\n\n Now\u2019s the fun part. Open the MaggieMaker.ino file and scroll all the way to the bottom.<\/p>\n\n\n\n You should see the loop() function shown below (or some variation of it).<\/p>\n\n\n\n You can think of this as a digitalised cookbook. We first have a cover() function, which takes in 0 for the front cover and 1 for the rear.<\/p>\n\n\n\n The front cover() is customisable with two additional String inputs. For example, if you wanted to have it show \u201cHow to make pancakes\u201d, you would write:<\/p>\n\n\n\n Following this, we have where the magic happens – the page(). The page() function takes in a few parameters in this order:<\/p>\n\n\n\n The best thing is that you can add as many pages as you want, so you can really turn this into any kind of cookbook. Have fun with it!<\/p>\n\n\n\n Once you\u2019re done customising your recipe, we will have to flash it to our Wio Terminal or Arduino board by clicking the arrow button next to the check mark in the Arduino IDE.<\/p>\n\n\n\n For more information, please refer to Step 5 on this page<\/a>. These instructions will apply to all Arduino boards as well.<\/p>\n\n\n\n If you encounter an error, take a look at what the console says (that\u2019s the black window at the bottom):<\/p>\n\n\n\n This means that you\u2019ve input the wrong type in the wrong place. Remember that page() takes in 4 compulsory and 2 optional inputs in a specific order! Text inputs should be encapsulated by a \u201c…\u201d, whereas number inputs can be typed plainly.<\/p>\n\n\n\n This means that you\u2019ve missed out a semicolon! The semicolon or \u2018;\u2019 character denotes the end of the line. The IDE should highlight the line that this problem is associated with, so the missing semicolon should be easy to find.<\/p>\n\n\n\n This can mean that there is a conflict in the TFT_eSPI library that you have installed. To fix the issue, head over to your Arduino\/Libraries folder and delete the TFT_eSPI library folder there. Reupload your code and the display should work now!<\/p>\n\n\n\n From this point on, we\u2019re going to get into the implementation! <\/p>\n\n\n\n If you\u2019ve gotten this far without a Wio Terminal, kudos to you! Because Arduino boards come relatively barebones with no peripherals other than their GPIO pins, you would\u2019ve had to figure out most, if not all, of the hardware configurations.<\/p>\n\n\n\n For this reason, I\u2019ve chosen the Wio Terminal for this project. The Wio Terminal is a fully integrated microcontroller development platform that supports Arduino and MicroPython. It carries Bluetooth, Wi-Fi connectivity, and comes with an LCD screen, onboard IMU, microphone, buzzer, light sensor and infrared emitter.<\/p>\n\n\n\n All I have to do is plug in a common USB Type-C cable, and I can begin writing my code. Not to mention, if I combine it with its battery chassis<\/a>, I’d already have a mobile kitchen timer form factor – exactly what I needed!<\/p>\n\n\n\n You can pick up a Wio Terminal from the Seeed Online Store<\/a>.<\/p>\n\n\n\n In this section, I will break down the Arduino code used in the programming. If you haven’t downloaded the project code, you can do so here<\/a>.<\/p>\n\n\n\n You\u2019ll be able to learn how the code supports the timer\u2019s features – so you can easily make adjustments for your own uses!<\/p>\n\n\n\n However, I won\u2019t be covering the library syntax, so feel free to refer to the following links for their documentation as we go along. You\u2019ll ideally also want to have the full Arduino code by your side, so you know what fits where!<\/p>\n\n\n\n There are 2 main \u2018modules\u2019 to the entire Arduino program – the cover() and the page().<\/p>\n\n\n\n The cover() function serves two simple purposes – to display the cover text and to allow for the alarm sound to be toggled.<\/p>\n\n\n\n First, we display the text, then enter a while loop that continues when the clicker_state is 0. In this loop, there are multiple \u201cif\u201d statements. Essentially, we are asking the program to continuously check if these buttons are being pressed.<\/p>\n\n\n\n The first condition will toggle between alarm_state 0 and 1, displaying the audio indicator accordingly.<\/p>\n\n\n\n The second condition is waiting for the main button to be pressed, which will set the clicker_state to 1. This will exit the loop and the function ends. The program automatically moves into the following function, which is usually a page().<\/p>\n\n\n\n The page() function is just slightly more complicated. First, take a look at the schematic.<\/p>\n\n\n\n When page() is called, it immediately creates the sprites for the text to be displayed on the page, then pushes them to be displayed on the LCD. Then, we enter a loop where we await input from the user before proceeding.<\/p>\n\n\n\nHow do I Use the Timer?<\/strong><\/h2>\n\n\n\n
If you\u2019re not using a Wio Terminal\u2026<\/strong><\/h3>\n\n\n\n
1. Download the Arduino IDE<\/strong><\/h3>\n\n\n\n
2. Download Timer Code & Install libraries<\/strong><\/h3>\n\n\n\n
3. Customise Timer Code<\/strong><\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\ncover(0, \u201cHow To\u201d, \u201cMake Pancakes\u201d);<\/code><\/pre>\n\n\n\n4. Flash to Wio Terminal<\/strong> \/ Arduino<\/h3>\n\n\n\n
If you see \u201cinvalid conversion\u201d …<\/strong><\/h4>\n\n\n\n
If you see \u201cexpected \u2018;\u2019 before\u201d …<\/strong><\/h4>\n\n\n\n
If your code was uploaded successfully but the LCD display is blank …<\/strong><\/h4>\n\n\n\n
\n\n\n\nPlatform Introduction: Wio Terminal<\/strong><\/h2>\n\n\n\n
Cookbook Program Schematic<\/strong><\/h2>\n\n\n\n
Cover()<\/strong><\/h3>\n\n\n\n
while (clicker_state == 0) {\n \/\/ <<ALARM TOGGLE CODE>>\n if (digitalRead(WIO_KEY_C) == LOW) {\n \/\/ TOGGLE ALARM\n }\n \/\/ BREAK OUT OF LOOP IF BUTTON IS PRESSED\n if (digitalRead(WIO_5S_PRESS) == LOW) {\n clicker_state = 1;\n delay(500);\n alarm_text.deleteSprite();\n }\n}<\/code><\/pre>\n\n\n\n\/\/ << ALARM TOGGLE CODE>>\nif (digitalRead(WIO_KEY_C) == LOW) {\n if (alarm_state == 1) {\n alarm_state = 0;\n tft.fillRect(300, 0, 50, 50, TFT_BLACK);\n delay(500);\n } else if (alarm_state == 0) {\n alarm_state = 1;\n alarm_logo();\n delay(500);\n }\n}<\/code><\/pre>\n\n\n\nPage()<\/strong><\/h3>\n\n\n\n
If duration is not 0 \u2026<\/strong><\/h4>\n\n\n\n
![\"\"](\"https:\/\/blog.seeedstudio.com\/wp-content\/uploads\/2021\/02\/ezgif.com-video-to-gif-2.gif\")
<\/figure><\/div>\n\n\n\n