Coffee Counter with Wia Dot One, Button and TFT Screen

Tutorial: Coffee Counter with Wia Dot One, Button Module, and TFT Screen Module

In this tutorial we will be going over how to use the Wia Dot One, TFT Module, and Smart Button Module to create a coffee counter. This coffee counter uses the button to count the number of coffees brewed by having the user press the button each time they make a coffee and the number of coffees is displayed on the TFT Screen.

Requirements

• Wia Dot One Buy yours here
• Wia TFT Module Buy yours here
• Wia Button Module Buy yours here
• A breadboard with 400 tie points Buy yours here
• Micro USB Cable Buy yours here
• Battery Power Pack Buy yours here
• Male to male jumper cables
• 4x Crimp pin headers (10 pins each)
• Account on Wia

Preparation

• Account at WiaYou will need to be registered and /or logged in to your Wia account at https://www.wia.io/.
• Set up your Dot OneYou will need to have a set up Dot One and you can find the tutorial on how to do that Here.
• Set up your code projectNow you will need to create a space and then a code project on your Wia Dashboard

Writing Code

• Note: This portion requires a decent background in coding, specifically in C++ in order to understand how the modules communicate and counts coffees
• Below is the code for this project which you can follow by reading the comments attached to the side of the code.
• Feel free to try and rewrite this code yourself so you can better understand the device! Some advice if you are having trouble is to make a temporary Block Project and take note of what code is pasted into the preview window when you drag certain blocks over!

/* The following instructions and comments are based on the assumption that you are framiliar with the syntax of C++ anda few funtioins and tools that are commonly used in C++ and classes used with Wia.*/
  
//These are libraries stored by Wia which are necessary for Wia products
#include <WiFi.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>
#include <Wia.h>
  
int coffee_count;// this is a variable used to keep track of the number of 
coffees
  
int i;
int hold_time; /* this variable keeps track of the ammount of time the 
button is held to detect a hold */
  
const int button = 15;
Wia wiaClient = Wia();
#define TFT_RST -1 // these three definitions define pins for the TFT screen
#define TFT_CS 16
#define TFT_DC 17
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
void powered_by() 
{ /* this is a function which is used to display the header "Powered by: Wia 
Dot One"*/
  
    /* each of these sections is specific to different texts which are printed     
    in the TFT screen as you can see each time for new text we define where 
    the text starts, the color, the size and rotation*/
    tft.setCursor(5, 5); /* this function moves where this snipet of text 
    "Powered by:" is */
    tft.setTextColor(ST7735_BLACK); /* this functioin changes the color of the
    text "Powered by:"*/
    tft.setTextSize(1); // this defines the size of the text "Powered by:"    
    tft.setRotation(1); // this sets the rotation of the text "Powered by:"            
    tft.println("Powered by:"); /* this displays the text "Powered by:" with 
    the settings defined above*/  	
  
    /* the following 4 sections of code work the same but are for different 
    pieces of text.*/
    
    tft.setCursor(5, 20);    
    tft.setTextColor(ST7735_BLACK);    
    tft.setTextSize(2);    
    tft.setRotation(1);    
    tft.println("Wia");
        
    tft.setCursor(15, 8);  
    tft.setTextColor(ST7735_YELLOW);    
    tft.setTextSize(2);    
    tft.setRotation(1);    
    tft.println(".");
        
    tft.setCursor(43, 20);    
    tft.setTextColor(ST7735_YELLOW);    
    tft.setTextSize(2);    
    tft.setRotation(1);    
    tft.println("Dot");  
      
    tft.setCursor(85, 20);    
    tft.setTextColor(ST7735_YELLOW);    
    tft.setTextSize(2);    
    tft.setRotation(1);    
    tft.println("One");
}
  
void print_coffee_count () 
{ // this function is used to print the count of coffees  
    wiaClient.createEvent("button-pressed");  
    coffee_count += 1;   
    /* each of these if statements adjusts the font size and position of the 
    count based on the size of the   number this is necessary for the numbers         
    to show up correctly on the TFT (i.e. 1000 takes more screen   space than
     1)*/
  
    if (coffee_count >= 1000)   
    {    
        tft.fillScreen(ST7735_WHITE);    
        tft.setCursor(0, 50);    
        tft.setTextColor(ST7735_BLACK);    
        tft.setTextSize(5);    
        tft.setRotation(1);    
        tft.println(coffee_count);  
    }   
    else if (coffee_count >= 100)   
    {    
        tft.fillScreen(ST7735_WHITE);   
        tft.setCursor(0, 50);    
        tft.setTextColor(ST7735_BLACK);    
        tft.setTextSize(7);    
        tft.setRotation(1);    
        tft.println(coffee_count);  
    }   
    else if (coffee_count >= 10)   
    {    
        tft.fillScreen(ST7735_WHITE);    
        tft.setCursor(30, 50);    
        tft.setTextColor(ST7735_BLACK);    
        tft.setTextSize(7);    
        tft.setRotation(1);        
        tft.println(coffee_count);  
    }       
    else   
    {    
        tft.fillScreen(ST7735_WHITE);    
        tft.setCursor(40, 50);    
        tft.setTextColor(ST7735_BLACK);    
        tft.setTextSize(7);    
        tft.setRotation(1);    
        tft.println(coffee_count);  
    }
}
  
void setup() 
{  
    WiFi.begin(); // this starts the connection   
    delay(2500); // delay is necessary for the WIFI to work properly  
    pinMode(button, INPUT_PULLDOWN);  
    tft.initR(INITR_144GREENTAB);
    
    powered_by(); // printing header  
    coffee_count = 0; // initializing the variables to reset the count  
    i = 0;  /* this TFT print resets the number when the TFT is initially 
    turned on.*/  
  
    tft.fillScreen(ST7735_WHITE);  
    tft.setCursor(40, 40);  
    tft.setTextColor(ST7735_BLACK);  
    tft.setTextSize(7);  
    tft.setRotation(1);  
    tft.println(coffee_count);
}
void loop() 
{/* the first time the screen turns on this ensures it prints the header 
information "Powered by: Wia Dot One"*/  
    if(i == 0)    
    {    
        powered_by();    
        i++;  
    }  
    hold_time = 0; // whenever the button is low the hold timer resets  
    while(digitalRead(button) == HIGH)  
    {    
        if(hold_time == 0) // if the button is pressed once    
        {      
            print_coffee_count();    
        }    /* The button is considered held after the parent while loop 
                increments 100 times*/    
        else if (hold_time > 100)     
        {      
            while(digitalRead(button) == HIGH)      
            {        
                hold_time++;        
                print_coffee_count();        
                powered_by();        
                /* The TFT Screen needs a delay so it is not updating too fast 
                causing it to flicker and so it doesn't increment too fast*/        
                delay(100);       
            }                 
        }        
        hold_time++;   	
        powered_by();  
    }
}

Connecting up the Modules and Dot One on the breadboard

• To start off connect the cramp pin headers into columns "b" and "i"at the top and bottom of the breadboard as seen in figure 1.

• Now we are going to install the two sets of 10 male to male jumper cables into the Dot One as seen in Figure 2, Figure 3 and Figure 4.
• Note: that we do not need all of these cables since not all of the 20 of the pins we are connecting to the Dot One are used although it is cleaner to use two sets of 10 color coded and paired male to male jumpers for this example.

• Now we want to connect these male to male jumpers from the Dot One to the corresponding pins on our breadboard. We will orient in a specific way so that the button and TFT screens pin location match the Dot Ones as seen in Figure 5 and Figure 6.
• Keep in mind for this tutorial the TFT Module will be using rows 1-10 on the breadboard while the button module will be using rows 21-30 on the breadboard
• Hint: Use the colors on the cables to follow the pin layout on the breadboard.

• Note the way we are setting up the Dot One on the Breadboard is if you look at underneath the Dot One you can see the names of all the pins and the jumpers from Red to Orange go from SD0/SD3 to RXD/EN as seen in F igure 7.
• It is very important you get this orientation correct so you are not wiring your TFT Screen Module and Button Module inverted.

• Now we need to connect the the pins from where the button will be controlled to where the button will be placed on the breadboard. Thus on the breadboard we use smaller male to male jumpers to connect the rows 2 to 26 as seen in Figure 8 and rows 3 to 22 as seen in Figure 9.
• Note in our code we initialized pin 15 to be the pin for the button module which is different than the code blocks initialization of pin 16 when using just a button and a Dot One. We did this because the TFT Screen Module uses pin 16 thus there would be a confliction of pins so we had to choose a different one.
• The other small male jumper is responsible for supplying a voltage of 3.3V to the button module.

• Now we are all set up to connect the TFT Screen Module and Button Module. First we will go over how to set up the TFT Screen Module.
• For this orientation the TFT Screen will have the angled corners facing down the breadboard (The direction on the breadboard where the numbers are increasing) as seen in Figure 10 and Figure 11.
• Be careful not to bend the pins too much and also not to poke yourself with them they could be sharp!

• Also Be sure that you put the top side pins of the TFT Screen (The side opposite the W. logo and the module covers pins 1-10) into the back of the headers as seen in Figure 12.

6. Now we can connect the Button Module. Repeat the same procedure making sure the angled corners are facing down the board although this time the module should be parallel the bottom of the board (The module covers pins 21-30) as seen in Figure 13 and Figure 14.

Deploying your Code and Resetting the Dot One

• Now your modules and Dot One are in place make sure you deploy the code from your dashboard and reset your Dot One once your code has deployed and your in business!
• If you are having trouble with this last step please refer to some other tutorials to see how you can deploy your code and properly reset your Dot One Here.

Creating the Flow

This flow will do all the back end heavy lifting for us from listening to the event being called from the device to retrieving that device's state and updating the state every time an event is created (every button click).

This flow comprises of Three nodes:

• First drag the “create event” node in the trigger tab to the editor and configure it’s settings to listen for the event "coffeeCounter" from the device named Whiskey.

• Next drag the “Run Function” node from the logic tab to the editor and set the code to be as follows:

output.body = device.state.coffeeNumDaily ? (parseInt(device.state.coffeeNumDaily) + 1) : 1;

This node's code just enables us to retrieve the devices state, checks if it's set and if it is updates the output of the flow to be the new states value + 1 and enables us to pass that value onto our next node.

• Lastly drag over the “Update State” node to the editor under the logic tab and configure the settings to look like below:

This basically just identifies and picks the device you want to run this code on, inputs a state key that’ll correspond to the stored random coffeeNumDaily value and changes the value for the state key to be that of the output.body variable which contains our count of coffees - (coffeeNumDaily).

To Identify this worked correctly

• Check the state under the settings tab on Whickey device section and identify what the state is, before and after pressing the button (as shown in location below).

• If the value increments, you have successfully updated the state variable every time the button is pressed and thus have completed this tutorial.

CONGRATULATIONS AND WELL DONE ON COMPLETING THIS TUTORIAL !!, WHY NOT TRY OUR NEXT ONE HERE!