Maker.io main logo

Seeedstudio Wio Terminal Countdown Timer

39

2026-06-19 | By Ron Cutts

Share

License: GNU Lesser General Public License Displays Microcontrollers Arduino

In this tutorial, we are going to build a simple countdown timer using a Seeedstudio Wio Terminal.

By pressing the "A" button, you can set the time.

By pressing the blue button, the timer will start to count down, and by pressing it again, the timer will pause.

By pressing the "B" button, you can reset the time.

Watch the video!

What You Will Need

What You Will Need

What You Will Need photo 2

Start Visuino, and Select the Arduino Wio Terminal Board Type

Start Visuino as shown in the first picture. Click on the "Tools" button on the Arduino component (Picture 1) in Visuino. When the dialog appears, select "Wio Terminal" as shown in Picture 2

Start Visuino, and Select the Arduino Wio Terminal Board Type

Start Visuino, and Select the Arduino Wio Terminal Board Type photo 2

In Visuino, Add Components

  • Add 2X "INVERTER" component

  • Add 3X "Debounce Button" component

  • Add "Start" component

  • Add "Toggle(T) Flip-Flop" component

  • Add "Pulse Generator" component

  • Add "Digital Multi Source" component

  • Add "Up/Down Counter" component

  • Add 2X "Integer Multi Source" component

  • Add "Divide Integer By Value" component

  • Add "Multiply Integer By Value" component

  • Add "Subtract Integer Value" component

  • Add "Formatted Text" component

  • Add "Text Multi Source" component

In Visuino Add Components

In Visuino Add Components photo 2

In Visuino Add Components photo 3

In Visuino Add Components photo 4

In Visuino Add Components photo 5

In Visuino Add Components photo 6

In Visuino Add Components photo 7

In Visuino Add Components photo 8

In Visuino Add Components photo 9

In Visuino Add Components photo 10

In Visuino Add Components photo 11

In Visuino Add Components photo 12

In Visuino Add Components photo 13

In Visuino Set Components

  • Select "Wio Terminal" board and in the properties window expand "Modules">"TFT Display">Background Color set it to clNavy

  • Select "Wio Terminal" board and in the properties window expand "Modules">"TFT Display">"Elements" and click on the 3 dots button

  • In the "Elements" window, drag "Text Field" to the left side, and in the properties window, set "Color" to aclNavy and "X" to 10, "Y" to 80, "Size" to 10, select "Elements" and click on the 3 dots button. In the "Elements" window, drag "Font" to the left side and in the properties window set "Font" to Adafruit\Org_01

  • Close both "Elements" windows

  • Select "PulseGenerator1" and in the properties window, set "Enabled" to False

  • Select "UpDownCounter1" and in the properties window set "Enabled" to "Max">"Roll Over" to False, and "Min">"Roll Over" to False, and "Max">"Value" to 0

  • Select "IntegerMultiSource2" and in the properties window set "Output Pins" to 3

  • Select "DivideByValue1" and in the properties window set "Value" to 60

  • Select "MultiplyByValue1" and in the properties window set "Value" to 60

  • Select "SubtractValue1" and in the properties window select "Value" and set it to 0, and click on the pin icon and select "Integer SinkPin"

  • Select "FormattedText1" and in the properties window set "Text" to %0:%1

  • Double click on the "FormattedText1" and in the "Elements" window, drag 2X "Text Element" to the left side and for both, set in the properties window "Fill Character" to 0 and "Length" to 2

  • Close the "Elements" window

In Visuino Set Components

In Visuino Set Components photo 2

In Visuino Set Components photo 3

In Visuino Set Components photo 4

In Visuino Set Components photo 5

In Visuino Set Components photo 6

In Visuino Set Components photo 7

In Visuino Set Components photo 8

In Visuino Set Components photo 9

In Visuino Set Components photo 10

In Visuino Set Components photo 11

In Visuino Set Components photo 12

In Visuino Set Components photo 13

In Visuino Set Components photo 14

In Visuino Connect Components

  • Connect Wio Terminal > Navigation pin [Press] to "Button2" pin [In]

  • Connect Wio Terminal > Buttons A pin [Out] to "Inverter1" pin [In]

  • Connect Wio Terminal > Buttons B pin [Out] to "Inverter2" pin [In]

  • Connect "Inverter1" pin [Out] to "Button1" pin [In]

  • Connect "Inverter2" pin [Out] to "Button3" pin [In]

  • Connect "Button1" pin [Out] to "UpDownCounter1" pin [Up]

  • Connect "Start1" pin [Out] to "UpDownCounter1" pin [Reset]

  • Connect "Button2" pin [Out] to "TFlipFlop1" pin [Clock]

  • Connect "Button3" pin [Out] to "TFlipFlop1" pin [Reset]

  • Connect "Button3" pin [Out] to "UpDownCounter1" pin [Reset]

  • Connect "TFlipFlop1 pin [Out] to "PulseGenerator1" pin [Enabled]

  • Connect "PulseGenerator1" pin [Out] to "DigitalMultiSource1" pin [In]

  • Connect "DigitalMultiSource1" pin [0] to "UpDownCounter1" pin [Down]

  • Connect "DigitalMultiSource1" pin [1] to "FormattedText1" pin [Clock]

  • Connect "UpDownCounter1" pin [Out] to "IntegerMultiSource2" pin [In]

  • Connect "UpDownCounter1" pin [Min Reached] to "TFlipFlop1" pin [Reset]

  • Connect "IntegerMultiSource2" pin [0] "DivideByValue1" pin [In]

  • Connect "IntegerMultiSource2" pin [1] "SubtractValue1" pin [In]

  • Connect "IntegerMultiSource2" pin [2] "FormattedText1" pin [Clock]

  • Connect "DivideByValue1" pin [Out] to "IntegerMultiSource1" pin [In]

  • Connect "IntegerMultiSource1" pin [0] to "FormattedText1" > "TextElement1" pin [In]

  • Connect "IntegerMultiSource1" pin [0] to "FormattedText1" > "TextElement1" pin [Clock]

  • Connect "IntegerMultiSource1" pin [1] to "MultiplyByValue1" pin [In]

  • Connect "MultiplyByValue1" pin [Out] to "SubtractValue1" pin [Value]

  • Connect "SubtractValue1" pin [Out] to "FormattedText1" > "TextElement2" pin [In]

  • Connect "SubtractValue1" pin [Out] to "FormattedText1" pin [Clock]

  • Connect "FormattedText1" pin [Out] to "TextMultiSource1" pin [In]

  • Connect "TextMultiSource1" pin [0] to Wio Terminal > "TFT Display" > "Text Field1" pin [In]

  • Connect "TextMultiSource1" pin [1] to Wio Terminal > "TFT Display" > "Text Field1" pin [Clock]

In Visuino Connect Components

In Visuino Connect Components photo 2

In Visuino Connect Components photo 3

Generate, Compile, and Upload the Arduino Code

In Visuino, at the bottom, click on the "Build" tab, make sure the correct port is selected, and then click on the "Compile/Build and Upload" button.

Generate, Compile, and Upload the Arduino Code

Play

If you power the WIO Terminal, the display will show the countdown time. If you press the "A" button, you will be able to set the time. If you press the "B" button, the time will reset. If you press the main blue button, a countdown will start, and if you press it again, the countdown will pause.

Congratulations! You have completed your project with Visuino. Also attached is the Visuino project that I created for this tutorial. You can download it and open it in Visuino: https://www.visuino.eu

Downloads

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.