#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.

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
	pinMode(WIO_KEY_A, INPUT_PULLUP);
	pinMode(WIO_KEY_B, INPUT_PULLUP);
	pinMode(WIO_KEY_C, INPUT_PULLUP);
	// init histogram
	tft.init();
	histogram.initHistogram(&tft);
	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)
	delay(500);
	}

view raw WioTerminalHistorgramAndButtons.cpp hosted with ❤ by GitHub

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

References

• Download Arduino IDE
• Wiki Seeed – Historgram
• Wiki Seeed – loading Images
• Seeed – Installing the File System Library

---

¿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:

• Si tienes ganas de ponerte al día con Front End (ES6, Typescript, React, Angular, Vuejs…) te recomendamos nuestros Máster Front End: https://lemoncode.net/master-frontend#inicio-banner
• Si te quieres poner al día en Backend (stacks .net y nodejs), te aconsejamos nuestro Bootcamp Backend: https://lemoncode.net/bootcamp-backend#bootcamp-backend/banner
• Y si tienes ganas de meterte con Docker, Kubernetes, CI/CD…, tenemos nuestro Bootcamp Devops: https://lemoncode.net/bootcamp-devops#bootcamp-devops/inicio