#WioTerminal – Buttons and Charts time πŸ“ŠπŸ“‰πŸ“Š

Hi !

One of the amazing libraries we have to work with the Wio Terminal is one to create charts. And with, only 20 lines of code (or maybe more), we can create a simple app like this one with 3 bars, and every time you press one Button in the Wio Terminal, the bar value will increase.

video with 3 bars, and every time you press one Button in the Wio Terminal, the bar value will increase.

Source Code

In order to code this, we need to work with a specific library to draw chats. The library is available here, as I explained in my previous post, you need to download and install the library via the Arduino IDE. I mean, you can also copy the files using a file explorer, but that’s topic for another post.

So, the full code is below and some notes

  • The counter values for buttons A, B and C are initialized in lines 11 to 13.
  • I added a special delay of 0.5 seconds, after a button is pressed. Otherwise, the loop may increase a lot the buttons values.
  • The histogram library allows to update a single bar. I was expecting a full screen refresh, and this was a nice surprise.
// Bruno Capuano 2021
// http://elbruno.com
#include <TFT_eSPI.h> //Hardware-specific library
#include <SPI.h>
#include"Histogram.h" //include histogram library
TFT_Histogram histogram=TFT_Histogram(); //Initializing tft and histogram
TFT_eSPI tft = TFT_eSPI();
int counterA = 2;
int counterB = 1;
int counterC = 3;
bool updateValues = false;
void setup() {
// init buttons
// init histogram
histogram.formHistogram("A", 1, counterA, 40, TFT_RED); // Column 1
histogram.formHistogram("B", 2, counterB, 40, TFT_GREEN); // Column 2
histogram.formHistogram("C", 3, counterC, 50, TFT_BLUE); // Column 3
histogram.showHistogram(); //show histogram
void loop() {
updateValues = false;
if (digitalRead(WIO_KEY_A) == LOW)
counterA ++;
histogram.changeParam(1, "A", counterA, TFT_RED);
updateValues = true;
if (digitalRead(WIO_KEY_B) == LOW)
counterB ++;
histogram.changeParam(2, "B", counterB, TFT_GREEN);
updateValues = true;
if (digitalRead(WIO_KEY_C) == LOW)
counterC ++;
histogram.changeParam(3, "C", counterC, TFT_BLUE);
updateValues = true;
if (updateValues == true)

Simple code. And now, with chart features available, I can start to work with Data !!!

Happy coding!


El Bruno

More posts in my blog ElBruno.com.

More info in https://beacons.ai/elbruno


ΒΏCon ganas de ponerte al dΓ­a?

En Lemoncode te ofrecemos formaciΓ³n online impartida por profesionales que se baten el cobre en consultorΓ­a:


Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: