Overview
Things
Story

Introduction
Connections
Assembling
Final result
Tipeee

Published March 12, 2022

How to Make the SmartBox V.2

This project will show you how to create the SmartBox V.2, a new smart and funny data/clock station.

BeginnerFull instructions provided2 hours6,664

Things used in this project

Hardware components

Arduino Nano R3

Arduino nano Extension

Female/Female Jumper Wires

Seeed Studio Grove - Gas Sensor(MQ2)

Photo resistor

DHT11 Temperature & Humidity Sensor (4 pins)

This was created with DHT11 but you can also put a DHT22 on it (by modifying a bit 3D files atttached)

TFT Screen 3.2"

Software apps and online services

Arduino IDE

Story

Introduction

This is a review of my first SmartBox that I made a few years ago, when I used a OLED little screen. This version is way more useful, complexe and easy-to-use on a daily basis.

It includes :

A 3.2" TFT screen, bigger than other ones used before on my previous projects
A kind of "personnal assistant" that expresses itself in the form of a smiley face : it changes emotion and expression after a while to give the SmartBox a lively look
More sensors : DHT11 for temperature and humidity, MQ-05 for buthane, alcoohol and smoke levels, a photoresistor for light level
A (true) clock : a DS3231
The possibility to navigate between menus using a "Back" button

In a nutshell, it's more aesthetically pleasing and easier to use and to make.

Connections

Assembling

Print Cover, Main Body and Sensors Support
Once you've printed those parts, connect sensors and Arduino extension together (use clamping cable to gather wires) : make sure you've plugged the Arduino Nano on the extension
Then, connect your TFT screen : remember that a TFT screen is design to be plugged to an Arduino UNO/MEGA. Consequently, use female-female wires to connect pins of Arduino nano/TFT between them following this principle (D0 = 8, D1 = 9, D2 = 2, D3 = 3, etc...)Pins 10 to 13, 0 to 1 and A5 to A7 of the Arduino don't need to be connectedConnect RST pin of the TFT to 5V :this will free A5 (for I2C protocol)
Screw up the Arduino extension on the Main Body
Insert the code : check up the rotation of writings on your TFT screen and ajust it on the Main Body consequently
Once your TFT and Arduino extension are placed, take Cover and put sensors at holes designed for. Screw up parts of Sensors Support to make sure they don't move on Cover

You should obtain :

Then the tricky part : screw up Cover on Main Body in order to tackle the TFT screen. It shouldn't be able to move after that if you successfully did it

Then you should have :

Final result

1 / 4

Tipeee

I opened a Tipeee to gather some funds for projects, I'll post informations and news about incoming devices.
A big thank to people who'll support me on Tipeee ;D

MisterBotBreak – Tipeee

Code

SmartBox V.2

#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>
#include <TouchScreen.h>
#include <Wire.h>
#include <ds3231.h>
#include "DHT.h"

DHT dht(13, DHT11);

#define  BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF
#define ORANGE   0xFA60
#define LIME     0x07FF
#define ORANGE1   ((255 / 8) << 11) | ((165 / 4) << 5) | (0 / 8) 
#define ORANGE2   ((255 / 8) << 11) | ((187 / 4) << 5) | (61 / 8) 
#define ORANGE3   ((255 / 8) << 11) | ((201 / 4) << 5) | (102 / 8) 
#define BLUE1   ((2 / 8) << 11) | ((9 / 4) << 5) | (219 / 8)
#define BLUE2   ((36 / 8) << 11) | ((43 / 4) << 5) | (253 / 8)
#define BLUE3   ((103 / 8) << 11) | ((108 / 4) << 5) | (254 / 8)
#define DARKBLUE1   ((2 / 8) << 11) | ((8 / 4) << 5) | (185 / 8)
#define DARKBLUE2   ((1 / 8) << 11) | ((5 / 4) << 5) | (118 / 8)
#define RED1    ((255 / 8) << 11) | ((0 / 4) << 5) | (0 / 8)
#define RED2    ((255 / 8) << 11) | ((61 / 4) << 5) | (61 / 8)
#define RED3    ((255 / 8) << 11) | ((122 / 4) << 5) | (122 / 8)
#define CACTUS1 ((196 / 8) << 11) | ((235 / 4) << 5) | (20 / 8)
#define CACTUS2 ((217 / 8) << 11) | ((242 / 4) << 5) | (103 / 8)
#define CACTUS3 ((231 / 8) << 11) | ((247 / 4) << 5) | (158 / 8)
#define YELLOW1 ((235 / 8) << 11) | ((254 / 4) << 5) | (1 / 8)
#define YELLOW2 ((239 / 8) << 11) | ((254 / 4) << 5) | (62 / 8)
#define YELLOW3 ((244 / 8) << 11) | ((254 / 4) << 5) | (123 / 8)
#define MAGENTA1 ((245 / 8) << 11) | ((0 / 4) << 5) | (245 / 8)
#define MAGENTA2 ((255 / 8) << 11) | ((82 / 4) << 5) | (255 / 8)
#define MAGENTA3 ((255 / 8) << 11) | ((184 / 4) << 5) | (255 / 8)
#define CYAN1    ((0 / 8) << 11) | ((255 / 4) << 5) | (255 / 8)
#define CYAN2    ((122 / 8) << 11) | ((255 / 4) << 5) | (255 / 8)
#define CYAN3    ((204 / 8) << 11) | ((255 / 4) << 5) | (255 / 8)    
#define PINK1   ((230 / 8) << 11) | ((7 / 4) << 5) | (92 / 8)
#define PINK2   ((249 / 8) << 11) | ((60 / 4) << 5) | (132 / 8)
#define PINK3   ((251 / 8) << 11) | ((131 / 4) << 5) | (177 / 8)
#define GREEN1   ((15 / 8) << 11) | ((186 / 4) << 5) | (15 / 8)
#define GREEN2   ((36 / 8) << 11) | ((238 / 4) << 5) | (36 / 8)
#define GREEN3   ((103 / 8) << 11) | ((243 / 4) << 5) | (103 / 8)
#define GREY1   ((128 / 8) << 11) | ((128 / 4) << 5) | (128 / 8)
#define GREY2   ((168 / 8) << 11) | ((168 / 4) << 5) | (168 / 8)
#define GREY3   ((200 / 8) << 11) | ((200 / 4) << 5) | (200 / 8)
#define PURPLE1   ((92 / 8) << 11) | ((0 / 4) << 5) | (92 / 8)
#define PURPLE2   ((133 / 8) << 11) | ((0 / 4) << 5) | (133 / 8)
#define PURPLE3   ((173 / 8) << 11) | ((0 / 4) << 5) | (173 / 8)
#define BROWN1   ((41 / 8) << 11) | ((10 / 4) << 5) | (10 / 8)
#define BROWN2   ((73 / 8) << 11) | ((19 / 4) << 5) | (19 / 8)
#define BROWN3   ((106 / 8) << 11) | ((27 / 4) << 5) | (27 / 8)
#define BROWN4   ((138 / 8) << 11) | ((35 / 4) << 5) | (35 / 8)
#define BROWN5   ((171 / 8) << 11) | ((43 / 4) << 5) | (43 / 8)
#define BROWN6   ((203 / 8) << 11) | ((52 / 4) << 5) | (52 / 8)
#define BROWN7   ((212 / 8) << 11) | ((84 / 4) << 5) | (84 / 8)
#define BEIGE1   ((221 / 8) << 11) | ((221 / 4) << 5) | (136 / 8)
#define BEIGE2   ((230 / 8) << 11) | ((230 / 4) << 5) | (168 / 8)
#define BEIGE3   ((235 / 8) << 11) | ((235 / 4) << 5) | (184 / 8)

TouchScreen ts = TouchScreen(9, A2, A3, 8, 400);
MCUFRIEND_kbv tft;
TSPoint p;
struct ts t; 

int timer;
int menu = 0;
int menureload = 1;

int x1;
int y1;
int xtext;
int ytext;
int thickness = 0;

int randomtimer, randomcounter, countertext;
int randomemotion, randomtext;

int newemotion = 1;
int newtext = 1;

int lux, fahren, gazreading, luxreading, hum, temp;

int xline, yline, xlinemin, ylinemin, xlinehour, ylinehour;
float radiussec, radiusmin, radiushour;


void setup() {

tft.begin(38022);
tft.setRotation(4);
tft.fillScreen(BLACK);
Serial.begin(9600);
Wire.begin();

DS3231_init(0x68);

/*t.hour=10; 
t.min=10;
t.sec=10;
t.mday=10;
t.mon=10;
t.year=2022;
DS3231_set(t); */

dht.begin();
}


void emotion1(){  
for(thickness = 0; thickness<10; thickness++){
tft.drawCircle(x1+100, y1+100, 60-thickness, CYAN);
tft.drawCircle(x1+99, y1+100, 60-thickness, CYAN);
tft.drawCircle(x1+101, y1+100, 60-thickness, CYAN);
}
tft.fillRect(x1+30, y1+30, 140, 60, BLACK);
tft.fillRoundRect(x1+60, y1+0, 12, 60, 4, CYAN);
tft.fillRoundRect(x1+126, y1+0, 12, 60, 4, CYAN);
}

void emotion2(){
for(thickness = 0; thickness<10; thickness++){
tft.drawCircle(x1+100, y1+100, 60-thickness, CYAN);
tft.drawCircle(x1+99, y1+100, 60-thickness, CYAN);
}
tft.fillRect(x1+30, y1+30, 140, 60, BLACK);
tft.fillRect(x1+39, y1+90, 122, 10, CYAN);
tft.fillRoundRect(x1+60, y1+0, 12, 60, 4, CYAN);
tft.fillRoundRect(x1+126, y1+0, 12, 60, 4, CYAN);
}

void emotion3(){
for(thickness = 0; thickness<10; thickness++){
tft.drawCircle(x1+100, y1+100, 60-thickness, CYAN);
tft.drawCircle(x1+99, y1+100, 60-thickness, CYAN);
}
for(thickness = 0; thickness<6; thickness++){
tft.drawCircle(x1+66, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+132, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+65, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+131, y1+41, 28-thickness, CYAN);
}
tft.fillRect(x1+30, y1+40, 140, 53, BLACK);
}

void emotion4(){
for(thickness = 0; thickness<10; thickness++){
tft.drawCircle(x1+100, y1+100, 60-thickness, CYAN);
tft.drawCircle(x1+99, y1+100, 60-thickness, CYAN);
}
tft.fillRect(x1+39, y1+90, 122, 10, CYAN);
for(thickness = 0; thickness<6; thickness++){
tft.drawCircle(x1+66, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+132, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+65, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+131, y1+41, 28-thickness, CYAN);
}
tft.fillRect(x1+30, y1+40, 140, 53, BLACK);
}

void emotion5(){
 tft.fillCircle(x1+20, y1+48, 8, CYAN);
 tft.fillCircle(x1+140, y1+48, 8, CYAN);
 tft.fillRoundRect(x1+35, y1+60, 91, 12, 4, CYAN);
}

void emotion6(){
for(thickness = 0; thickness<10; thickness++){
  tft.drawCircle(x1+110, y1+45, 26+thickness, CYAN);
  tft.drawCircle(x1+111, y1+45, 26+thickness, CYAN);
}
tft.fillCircle(x1+60, y1+20, 8, CYAN);
  tft.fillCircle(x1+60, y1+70, 8, CYAN);
  tft.fillRect(x1+69, y1+5, 40, 80, BLACK);
  tft.fillRoundRect(x1+97, y1+10, 12, 120, 3, CYAN);
}


void emotionsetup(){
  if(randomcounter>randomtimer){
  newemotion = 1;
  randomcounter = 0;
}
if(newemotion==1){
  int oldemotion = randomemotion;
  randomemotion = random(1, 7);
  if(randomemotion!=oldemotion){
    tft.fillRect(x1, y1, 170, 170, BLACK);
 if(randomemotion==1){
    emotion1();
  }
  if(randomemotion==2){
    emotion2();
  }
  if(randomemotion==3){
    emotion3();
  }
  if(randomemotion==4){
    emotion4();
  }
  if(randomemotion==5){
    emotion5();
  }
  if(randomemotion==6){
    emotion6();
  }
  }
  else{
  }
  randomtimer = random(900, 3000);
 newemotion = 0;
}
randomcounter++;
}

void textsetup(){
if(countertext>4000 || newtext==1){
  randomtext = random(1, 6);
  countertext = 0;
  newtext = 1;
}
tft.setTextSize(1);
tft.setTextColor(WHITE);
if(newtext==1){
  tft.fillRoundRect(xtext-5, ytext-5, 145, 75, 4, BLACK);
if(randomtext==1){
tft.setCursor(xtext+2,ytext);
tft.println("Choose the app you ");
tft.setCursor(xtext+2,ytext+12);
tft.println("want to collect want ");
tft.setCursor(xtext+2,ytext+24);
tft.println("informations from by");
tft.setCursor(xtext+2,ytext+36);
tft.println("clicking on those");
tft.setCursor(xtext+2,ytext+48);
tft.println("buttons !");
tft.drawRoundRect(xtext-5, ytext-5, 138, 67, 4, WHITE);
}
if(randomtext==2){
tft.setCursor(xtext+2,ytext);
tft.println("I feel alone.");
tft.setCursor(xtext+2,ytext+12);
tft.println(";-;");
tft.drawRoundRect(xtext-5, ytext-5, 125, 30, 4, WHITE);
}
if(randomtext==3){
  tft.setCursor(xtext+2,ytext);
tft.println("Kitten>Doggy !!!");
tft.setCursor(xtext+2,ytext+12);
tft.println(":p");
tft.drawRoundRect(xtext-5, ytext-5, 110, 32, 4, WHITE);
}
if(randomtext==4){
tft.setCursor(xtext+2,ytext);
tft.println("How are you ?");
tft.setCursor(xtext+2,ytext+12);
tft.println("^_^");
tft.drawRoundRect(xtext-5, ytext-5, 110, 32, 4, WHITE);

}
if(randomtext==5){
tft.setCursor(xtext+2,ytext);
tft.println("I want to walk and");
tft.setCursor(xtext+2,ytext+12);
tft.println("explore the world");
tft.setCursor(xtext+2,ytext+24);
tft.println("but I can't...");
tft.setCursor(xtext+2,ytext+36);
tft.println("Sniff... ;-;");
tft.drawRoundRect(xtext-5, ytext-5, 125, 61, 4, WHITE);
}

newtext = 0;
}
 countertext++;
}

void resetvariables(){
  randomcounter = 0;
  randomtimer = 0;
  countertext = 4001;
}

void menu0statis(){
 x1 = 0;
 y1 = 180;
 for(thickness = 0; thickness<10; thickness++){
tft.drawCircle(x1+100, y1+100, 60-thickness, CYAN);
tft.drawCircle(x1+99, y1+100, 60-thickness, CYAN);
}
tft.fillRect(x1+39, y1+90, 122, 10, CYAN);
for(thickness = 0; thickness<6; thickness++){
tft.drawCircle(x1+66, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+132, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+65, y1+41, 28-thickness, CYAN);
tft.drawCircle(x1+131, y1+41, 28-thickness, CYAN);
}
tft.fillRect(x1+30, y1+40, 140, 53, BLACK);

tft.drawRoundRect(200, 200, 105, 71, 6, WHITE);
tft.setCursor(205, 205);
tft.setTextSize(1);
tft.println("Hi, I'm Johan,");
tft.setCursor(205, 217);
tft.println("your personnal"); 
tft.setCursor(205, 229);
tft.println("assistant ! It's");
tft.setCursor(205, 241);
tft.println("a pleasure to");
tft.setCursor(205, 253);
tft.println("meet you !");

tft.fillRoundRect(30, 40, 260, 70, 4, WHITE);
tft.fillRoundRect(40, 30, 260, 70, 4, GREEN3);
  tft.setCursor(52,50);
tft.setTextSize(3);
tft.setTextColor(WHITE);
tft.println("SmartBox V2.0");

}
void menu0(){
  if(timer==200){
  tft.setCursor(38,420);
tft.setTextSize(2);
tft.setTextColor(BLACK);
tft.println("Click to continue...");
}
if(timer==400){
  tft.setCursor(38,420);
tft.setTextSize(2);
tft.setTextColor(WHITE);
tft.println("Click to continue...");
timer = 0;
}

timer++;
}
void appsstatis(){
tft.fillRoundRect(25, 35, 260, 66, 8, WHITE);
tft.fillRoundRect(25, 151, 260, 66, 8, WHITE);
tft.fillRoundRect(30, 30, 260, 66, 8, BLUE1);
tft.fillRoundRect(30, 146, 260, 66, 8, BLUE1);
tft.setCursor(115, 54);
tft.setTextSize(2);
tft.setTextColor(WHITE);
tft.println("Weather");
tft.setCursor(78 ,170);
tft.setTextSize(2);
tft.setTextColor(WHITE);
tft.println("Date and Time");

}
void apps(){

x1 = 0;
y1 = 270;
emotionsetup();

xtext = 180;
ytext = 300;
textsetup();
}


void menu2Weatherstatis(){
 
  tft.setTextSize(2);
  tft.setTextColor(RED2);
 tft.setCursor(10 ,40);
tft.println("Temperature :");
  tft.setTextColor(GREY2);
 tft.setCursor(10 ,140);
tft.println("Humidity :");
  tft.setTextColor(GREEN2);
 tft.setCursor(10 ,240);
tft.println("Toxic gases level :");
 tft.setTextColor(YELLOW1);
 tft.setCursor(10 ,370);
tft.println("Lux level :");

tft.setTextSize(4);
  tft.setTextColor(WHITE);

 tft.setCursor(73 ,74);
tft.println("C | ");
tft.fillCircle(65, 78, 4, WHITE);
tft.fillCircle(65, 78, 2, BLACK);
  tft.setTextColor(WHITE);

 tft.setCursor(251 ,74);
tft.println("F");
tft.fillCircle(243, 78, 4, WHITE);
tft.fillCircle(243, 78, 2, BLACK);

 tft.setCursor(90 ,174);
tft.println("%");

 tft.setCursor(95 ,274);
tft.println("/1024");
 tft.setCursor(95 ,404);
tft.println("/1024");
}

void menu2Weather(){
  tft.setTextSize(4);
  tft.setTextColor(BLACK);
  
tft.fillRect(9, 311, 210, 35, BLACK);
tft.fillRect(9, 73, 50, 30, BLACK);
tft.fillRect(9, 273, 80, 30, BLACK);
tft.fillRect(159, 73, 72, 30, BLACK);
tft.fillRect(9, 173, 75, 30, BLACK);
tft.fillRect(9, 403, 75, 30, BLACK);


tft.setTextColor(WHITE);
tft.setCursor(10 ,74);
tft.println(temp);
tft.setCursor(160 ,74);
tft.println(fahren);
tft.setCursor(10 ,274);
tft.println(gazreading);
tft.setCursor(10 ,174);
tft.println(hum);

tft.setCursor(10 ,312);
if(gazreading>=700){
    tft.setTextColor(RED);
  tft.println("DANGER !");
}
if(gazreading>=300 && gazreading<700){
    tft.setTextColor(ORANGE1);
  tft.println("Warning !");
}
if(gazreading<300){
    tft.setTextColor(GREEN3);
  tft.println("Normal");
}

tft.setTextColor(WHITE);
tft.setCursor(10 ,404);
tft.println(luxreading);
delay(100);
}
void menu3DateTimestatis(){
  tft.drawCircle(160, 330, 100, WHITE);
  tft.fillRect(80, 187, 40, 5, GREEN2);
  tft.fillRect(140, 187, 40, 5, RED2);
  tft.fillRect(200, 187, 40, 5, BLUE2);

  tft.setTextColor(WHITE);
  tft.setTextSize(2);
  tft.setCursor(150, 210);
  tft.println("12");
  tft.setCursor(269, 322);
  tft.println("3");
  tft.setCursor(154, 437);
  tft.println("6");
  tft.setCursor(45, 322);
  tft.println("9");
}
void menu3DateTime(){

tft.fillRect(76, 149, 50, 30, BLACK);
tft.fillRect(136, 149, 50, 30, BLACK);
tft.fillRect(196, 149, 50, 30, BLACK);
tft.drawLine(xline, yline, 160, 330, BLACK);
tft.drawLine(xlinemin, ylinemin, 160, 330, BLACK);
tft.drawLine(xlinehour, ylinehour, 160, 330, BLACK);

  tft.setTextColor(WHITE);
  tft.setTextSize(5);
  tft.setCursor(10, 50);
  tft.println(t.mday);
  tft.setCursor(71, 50);
  tft.println("/");
  tft.setCursor(100, 50);
  tft.println(t.mon);
   tft.setCursor(162, 50);
  tft.println("/");
  tft.setCursor(194, 50);
  tft.println(t.year);
 
  tft.setTextSize(4);
  tft.setCursor(77, 150);
  tft.println(t.hour);
  tft.setCursor(120, 150);
  tft.println(":");
  tft.setCursor(137, 150);
  tft.println(t.min);
  tft.setCursor(179, 150);
  tft.println(":");
   tft.setCursor(197, 150);
  tft.println(t.sec);

radiussec = (t.sec*2*3.1415)/60;
radiusmin = (t.min*2*3.1415)/60;
radiushour = (t.hour*2*3.1415)/12;
 xline = 160+cos(radiussec-PI/2) * 90;
 yline = 330+sin(radiussec-PI/2) * 90;
 xlinemin = 160+cos(radiusmin-PI/2) * 80;
 ylinemin = 330+sin(radiusmin-PI/2) * 80;
 xlinehour = 160+cos(radiushour-PI/2) * 65;
 ylinehour = 330+sin(radiushour-PI/2) * 65;
 
tft.drawLine(xline, yline, 160, 330, BLUE2);
tft.drawLine(xlinemin, ylinemin, 160, 330, RED2);
tft.drawLine(xlinehour, ylinehour, 160, 330, GREEN2);
delay(100); 
}

void backstatis(){
  tft.fillRoundRect(250, 410, 90, 90, 9, RED);
  tft.drawRoundRect(250, 410, 90, 90, 9, WHITE);
   tft.setTextSize(2);
   tft.setTextColor(WHITE);
  tft.setCursor(264, 435);
  tft.println("Back");
}

void back(){
}


void loop() {
DS3231_get(&t);

digitalWrite(13, HIGH);
p = ts.getPoint();
digitalWrite(13, LOW);
pinMode(A3, OUTPUT);
pinMode(A2, OUTPUT);

luxreading = analogRead(A6);
gazreading = analogRead(A7);
hum = dht.readHumidity();
temp = dht.readTemperature();
fahren = dht.readTemperature(true);

if(p.z > ts.pressureThreshhold){
if(menu==0){
  menu = 1;
  menureload = 1;
}
if(menu==1 && p.x<250){
  menu = 2;
  menureload = 1;
}
if(menu==1 && p.x>250 && p.x<500){
  menu = 3;
  menureload = 1;
}
if((menu==2 || menu==3) && (p.x>700 && p.y<400)){
  menureload = 1;
  menu = 1;
}
}


if(menu==0){
  if(menureload==1){
    tft.fillScreen(BLACK);
    menu0statis();
    menureload = 0;
   }
   menu0();
}
 if(menu==1){
   if(menureload==1){
    tft.fillScreen(BLACK);
    appsstatis();
    resetvariables();
    menureload = 0;
   }
   apps();
 }
if(menu==2){
  if(menureload==1){
    tft.fillScreen(BLACK);
    backstatis();
    menu2Weatherstatis();
    menureload = 0;
   }
   back();
   menu2Weather();  
}
if(menu==3){
   if(menureload==1){
    tft.fillScreen(BLACK);
    menu3DateTimestatis();
    backstatis();
    menureload = 0;
   }
   back();
   menu3DateTime(); 
}

}

Credits

MisterBotBreak

48 projects • 149 followers

I love electronics and cats :D !

How to Make the SmartBox V.2