Beautifully Finished Humidity and Temperature Sensor

We built a stylish and useful humidity and temperature sensor for our home workshop that uses color to alert us to big swings in humidity.

Mar 26, 2018

•

35651 views

•

94 respects

weather

environmental sensing

art

Components and supplies

Arduino UNO

Jumper wires (generic)

Breadboard (generic)

NeoPixel Ring: WS2812 5050 RGB LED

DHT22 Temperature Sensor

4xAA battery holder

Adafruit 1.44" Color TFT LCD Display with MicroSD Card breakout - ST7735R

Tools and machines

Soldering iron (generic)

Hot glue gun (generic)

Project description

Code

Arduino Work Shop Sensor Code

arduino

1#include <Adafruit_NeoPixel.h>
2#include <Adafruit_ST7735.h>
3#include   <Adafruit_GFX.h>
4#include <FastLED.h>
5#include <SPI.h>
6#include <SD.h>
7#include   <cactus_io_DHT22.h> // There's a bunch of DHTXX libraries you can find online. They   all have varying levels of features.
8
9// Define Pins
10#define TFT_CS    10
11#define   TFT_RST   9
12#define TFT_DC    8
13#define DHT_PIN   2
14#define PIXEL_PIN 6
15#define   PIXEL_NUM 24
16#define SD_PIN    4
17#define BMP_BUF   20  
18
19// Global Variables
20int   currentColor = 9999; //(Numbers correspond to chart. See below.)
21CRGB leds[PIXEL_NUM];
22Adafruit_ST7735    tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
23DHT22 dht(DHT_PIN);
24int   loopDelay = 2000; //ms
25
26// SETUP
27void setup() {
28 
29  Serial.begin(9600);
30   Serial.println("Starting up.");
31
32  // Begin DHT
33  dht.begin();
34
35   // Initialize LCD Screen
36  tft.initR(INITR_144GREENTAB);
37
38  // Initialize   SD Card
39  Serial.print("Initializing SD card.");
40  if (!SD.begin(SD_PIN))   {
41    Serial.println("Failed!");
42    return;
43  }
44
45  // Set Screen   Background to Black
46  tft.fillScreen(ST7735_BLACK);
47
48  // Initialize LEDs
49   FastLED.addLeds<NEOPIXEL, PIXEL_PIN>(leds, PIXEL_NUM);
50
51  // Let everything   catch up before starting loop
52  delay(500);
53
54}
55
56
57// LOOP
58void   loop() {
59
60  // Get Sensor Data
61  dht.readTemperature();
62  dht.readHumidity();
63   int f = dht.temperature_F; // Degrees in Fahrenheit
64  int h = dht.humidity;   // Percentage
65
66  // Draw Degrees Icon
67  tft.fillCircle(102, 42, 6, ST7735_WHITE);
68   tft.fillCircle(102, 42, 4, ST7735_BLACK);
69
70  // Draw Temperature on LCD   Screen
71  drawTemperature(f);
72
73  // Humidity
74  setHumidityColors(h);
75   
76  //Print Data to Serial Monitor
77  Serial.print("Temperature: ");
78   Serial.println(f);
79  Serial.print("Humidity: ");
80  Serial.print(h);
81   Serial.println("%");
82
83  // Delay
84  delay(1000);
85  
86}
87
88
89//   Draw Bitmap - This is for the LCD Screen
90void bmpDraw(char *filename, uint8_t   x, uint8_t y) {
91
92  File     bmpFile;
93  int      bmpWidth, bmpHeight;   //   W+H in pixels
94  uint8_t  bmpDepth;              // Bit depth (currently must   be 24)
95  uint32_t bmpImageoffset;        // Start of image data in file
96  uint32_t   rowSize;               // Not always = bmpWidth; may have padding
97  uint8_t  sdbuffer[3*BMP_BUF];    // pixel buffer (R+G+B per pixel)
98  uint8_t  buffidx = sizeof(sdbuffer); //   Current position in sdbuffer
99  boolean  goodBmp = false;       // Set to true   on valid header parse
100  boolean  flip    = true;        // BMP is stored bottom-to-top
101   int      w, h, row, col;
102  uint8_t  r, g, b;
103  uint32_t pos = 0, startTime   = millis();
104
105  if((x >= tft.width()) || (y >= tft.height())) return;
106
107//   Serial.println();
108//  Serial.print("Loading Bitmap Image: '");
109//  Serial.print(filename);
110//   Serial.println('\\'');
111
112  // Open requested file on SD card
113  if ((bmpFile   = SD.open(filename)) == NULL) {
114    Serial.print("Bitmap file not found!");
115     return;
116  }
117
118  // Parse BMP header
119  if(read16(bmpFile) == 0x4D42)   {
120    read32(bmpFile);
121    (void)read32(bmpFile);
122    bmpImageoffset =   read32(bmpFile);
123    //Serial.println());
124    read32(bmpFile);
125    bmpWidth   = read32(bmpFile);
126    bmpHeight = read32(bmpFile);
127    if(read16(bmpFile)   == 1) {
128      bmpDepth = read16(bmpFile);
129      //Serial.print("Bit Depth:   ");
130      if((bmpDepth == 24) && (read32(bmpFile) == 0)) {
131
132        goodBmp   = true;
133
134        // BMP rows are padded (if needed) to 4-byte boundary
135         rowSize = (bmpWidth * 3 + 3) & ~3;
136
137        // If bmpHeight is negative,   image is in top-down order.
138        // This is not canon but has been observed   in the wild.
139        if(bmpHeight < 0) {
140          bmpHeight = -bmpHeight;
141           flip      = false;
142        }
143
144        // Crop area to be loaded
145         w = bmpWidth;
146        h = bmpHeight;
147        if((x+w-1) >= tft.width())   w = tft.width()  - x;
148        if((y+h-1) >= tft.height()) h = tft.height()   - y;
149
150        // Set TFT address window to clipped image bounds
151        tft.setAddrWindow(x,   y, x+w-1, y+h-1);
152
153        for (row=0; row<h; row++) { // For each scanline...
154           if(flip) {
155            pos = bmpImageoffset + (bmpHeight - 1 - row)   * rowSize;
156          } else {
157            pos = bmpImageoffset + row * rowSize;
158           }
159          if(bmpFile.position() != pos) {
160            bmpFile.seek(pos);
161             buffidx = sizeof(sdbuffer);
162          }
163
164          for (col=0;   col<w; col++) {
165            if (buffidx >= sizeof(sdbuffer)) {
166              bmpFile.read(sdbuffer,   sizeof(sdbuffer));
167              buffidx = 0;
168            }
169
170            //   Convert pixel from BMP to TFT format, push to display
171            b = sdbuffer[buffidx++];
172             g = sdbuffer[buffidx++];
173            r = sdbuffer[buffidx++];
174             tft.pushColor(tft.Color565(r,g,b));
175          }
176        }
177       }
178    }
179  }
180
181  bmpFile.close();
182  if(!goodBmp) Serial.println("BMP   format not recognized.");
183
184}
185
186// This is for the Bitmap/LCD Screen
187uint16_t   read16(File f) {
188  uint16_t result;
189  ((uint8_t *)&result)[0] = f.read();   // LSB
190  ((uint8_t *)&result)[1] = f.read(); // MSB
191  return result;
192}
193
194//   This is for the Bitmap/LCD Screen
195uint32_t read32(File f) {
196  uint32_t result;
197   ((uint8_t *)&result)[0] = f.read(); // LSB
198  ((uint8_t *)&result)[1] = f.read();
199   ((uint8_t *)&result)[2] = f.read();
200  ((uint8_t *)&result)[3] = f.read(); //   MSB
201  return result;
202}
203
204
205// Draw Temperature on LCD Screen
206void   drawTemperature(int temp) {
207
208  // Get Number of Digits in the Temperature
209   int digits = numDigits(temp);
210 
211  // Define Cursor Positions to Draw Bitmaps
212   int x1_2 = 62;
213  int x2_2 = 32;
214  int x1_3 = 1;
215  int x2_3 = 1;
216  int   x3_3 = 1;
217  int y = 38;
218
219  char digit1[12];
220  char digit2[12];
221  char   digit3[12];
222  char digitStr1[24];
223  char digitStr2[24];
224  char digitStr3[24];
225   
226  // Get First Digit
227  itoa(temp % 10, digit1,10); 
228  //Serial.println(temp   % 10);
229  strcpy(digitStr1, "");
230  strcat(digitStr1, digit1);
231  strcat(digitStr1,   ".bmp");
232
233  // Get Second Digit
234  if(digits == 2){
235    itoa((temp   / 10) % 10, digit2,10);
236    strcpy(digitStr2, "");
237    strcat(digitStr2,   digit2);
238    strcat(digitStr2, ".bmp");
239  }
240
241  // Get Third Digit
242   if(digits == 3){
243    itoa((temp / 100) % 10, digit3,10);
244    strcpy(digitStr3,   "");
245    strcat(digitStr3, digit3);
246    strcat(digitStr3, ".bmp");
247   }  
248  
249  if(digits > 2){
250    bmpDraw(digitStr1,x1_3,y);
251    bmpDraw(digitStr2,x2_3,y);
252     bmpDraw(digitStr3,x3_3,y);
253  } else {
254    bmpDraw(digitStr1,x1_2,y);
255     bmpDraw(digitStr2,x2_2,y);
256  }
257
258}
259
260
261// Get number of digits   in temperature to determine placement on screen
262int numDigits(int number){
263
264   int valLen = 0;  
265  if(number > 99)
266    valLen = 3;
267  else
268    valLen   = 2;
269  return valLen;
270
271}
272
273
274// Set LED Colors
275void setColors(int   r, int g, int b){
276
277  for(int i = 0; i < PIXEL_NUM; i++){
278    
279    leds[i].setRGB(   r, g, b);
280    leds[i].fadeLightBy(125);
281    FastLED.show();    
282    delay(100);
283   
284  }
285  
286}
287
288
289// Determine which colors to use based on Humidity   level
290void setHumidityColors(int humidity){
291
292  // Humidity Color Chart   - This is just something we came up with.
293  // Red - 0-17%
294  // Orange - 18-34%
295   // Yellow - 35-51%
296  // Green - 52-68%
297  // Blue - 69-85%
298  // Purple   - 86-100%
299
300  // Define Colors
301  int cRed[3] = {255,0,0};
302  int cOrange[3]   = {255,90,0};
303  int cYellow[3] = {255,255,0};
304  int cGreen[3] = {0,255,0};
305   int cBlue[3] = {0,175,255};
306  int cPurple[3] = {255,0,255};
307
308  int range   = map(humidity, 0, 100, 0, 6);
309  switch (range) {
310    case 0:    // Red
311       if(currentColor == 0){
312        break;
313      }
314      else {
315        setColors(cRed[0],   cRed[1], cRed[2]);
316        currentColor = 0;
317      }
318      break;
319    case   1:    // Orange
320      if(currentColor == 1){
321        break;
322      }
323       else {
324        setColors(cOrange[0], cOrange[1], cOrange[2]);
325        currentColor   = 1;
326      }
327      break;
328    case 2:    // Yellow
329      if(currentColor   == 2){
330        break;
331      }
332      else {
333        setColors(cYellow[0],   cYellow[1], cYellow[2]);
334        currentColor = 2;
335      }
336      break;
337     case 3:    // Green
338      if(currentColor == 3){
339        break;
340      }
341       else {
342        setColors(cGreen[0], cGreen[1], cGreen[2]);
343        currentColor   = 3;
344      }
345      break;
346    case 4:    // Blue
347      if(currentColor   == 4){
348        break;
349      }
350      else {
351        setColors(cBlue[0],   cBlue[1], cBlue[2]);
352        currentColor = 4;
353      }
354      break;
355     case 5:    // Purple
356      if(currentColor == 5){
357        break;
358      }
359       else {
360        setColors(cPurple[0], cPurple[1], cPurple[2]);
361        currentColor   = 5;
362      }      
363      break;
364  }
365}

#include <Adafruit_NeoPixel.h>
#include <Adafruit_ST7735.h>
#include   <Adafruit_GFX.h>
#include <FastLED.h>
#include <SPI.h>
#include <SD.h>
#include   <cactus_io_DHT22.h> // There's a bunch of DHTXX libraries you can find online. They   all have varying levels of features.

// Define Pins
#define TFT_CS    10
#define   TFT_RST   9
#define TFT_DC    8
#define DHT_PIN   2
#define PIXEL_PIN 6
#define   PIXEL_NUM 24
#define SD_PIN    4
#define BMP_BUF   20  

// Global Variables
int   currentColor = 9999; //(Numbers correspond to chart. See below.)
CRGB leds[PIXEL_NUM];
Adafruit_ST7735    tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
DHT22 dht(DHT_PIN);
int   loopDelay = 2000; //ms

// SETUP
void setup() {
 
  Serial.begin(9600);
   Serial.println("Starting up.");

  // Begin DHT
  dht.begin();

   // Initialize LCD Screen
  tft.initR(INITR_144GREENTAB);

  // Initialize   SD Card
  Serial.print("Initializing SD card.");
  if (!SD.begin(SD_PIN))   {
    Serial.println("Failed!");
    return;
  }

  // Set Screen   Background to Black
  tft.fillScreen(ST7735_BLACK);

  // Initialize LEDs
   FastLED.addLeds<NEOPIXEL, PIXEL_PIN>(leds, PIXEL_NUM);

  // Let everything   catch up before starting loop
  delay(500);

}


// LOOP
void   loop() {

  // Get Sensor Data
  dht.readTemperature();
  dht.readHumidity();
   int f = dht.temperature_F; // Degrees in Fahrenheit
  int h = dht.humidity;   // Percentage

  // Draw Degrees Icon
  tft.fillCircle(102, 42, 6, ST7735_WHITE);
   tft.fillCircle(102, 42, 4, ST7735_BLACK);

  // Draw Temperature on LCD   Screen
  drawTemperature(f);

  // Humidity
  setHumidityColors(h);
   
  //Print Data to Serial Monitor
  Serial.print("Temperature: ");
   Serial.println(f);
  Serial.print("Humidity: ");
  Serial.print(h);
   Serial.println("%");

  // Delay
  delay(1000);
  
}


//   Draw Bitmap - This is for the LCD Screen
void bmpDraw(char *filename, uint8_t   x, uint8_t y) {

  File     bmpFile;
  int      bmpWidth, bmpHeight;   //   W+H in pixels
  uint8_t  bmpDepth;              // Bit depth (currently must   be 24)
  uint32_t bmpImageoffset;        // Start of image data in file
  uint32_t   rowSize;               // Not always = bmpWidth; may have padding
  uint8_t  sdbuffer[3*BMP_BUF];    // pixel buffer (R+G+B per pixel)
  uint8_t  buffidx = sizeof(sdbuffer); //   Current position in sdbuffer
  boolean  goodBmp = false;       // Set to true   on valid header parse
  boolean  flip    = true;        // BMP is stored bottom-to-top
   int      w, h, row, col;
  uint8_t  r, g, b;
  uint32_t pos = 0, startTime   = millis();

  if((x >= tft.width()) || (y >= tft.height())) return;

//   Serial.println();
//  Serial.print("Loading Bitmap Image: '");
//  Serial.print(filename);
//   Serial.println('\\'');

  // Open requested file on SD card
  if ((bmpFile   = SD.open(filename)) == NULL) {
    Serial.print("Bitmap file not found!");
     return;
  }

  // Parse BMP header
  if(read16(bmpFile) == 0x4D42)   {
    read32(bmpFile);
    (void)read32(bmpFile);
    bmpImageoffset =   read32(bmpFile);
    //Serial.println());
    read32(bmpFile);
    bmpWidth   = read32(bmpFile);
    bmpHeight = read32(bmpFile);
    if(read16(bmpFile)   == 1) {
      bmpDepth = read16(bmpFile);
      //Serial.print("Bit Depth:   ");
      if((bmpDepth == 24) && (read32(bmpFile) == 0)) {

        goodBmp   = true;

        // BMP rows are padded (if needed) to 4-byte boundary
         rowSize = (bmpWidth * 3 + 3) & ~3;

        // If bmpHeight is negative,   image is in top-down order.
        // This is not canon but has been observed   in the wild.
        if(bmpHeight < 0) {
          bmpHeight = -bmpHeight;
           flip      = false;
        }

        // Crop area to be loaded
         w = bmpWidth;
        h = bmpHeight;
        if((x+w-1) >= tft.width())   w = tft.width()  - x;
        if((y+h-1) >= tft.height()) h = tft.height()   - y;

        // Set TFT address window to clipped image bounds
        tft.setAddrWindow(x,   y, x+w-1, y+h-1);

        for (row=0; row<h; row++) { // For each scanline...
           if(flip) {
            pos = bmpImageoffset + (bmpHeight - 1 - row)   * rowSize;
          } else {
            pos = bmpImageoffset + row * rowSize;
           }
          if(bmpFile.position() != pos) {
            bmpFile.seek(pos);
             buffidx = sizeof(sdbuffer);
          }

          for (col=0;   col<w; col++) {
            if (buffidx >= sizeof(sdbuffer)) {
              bmpFile.read(sdbuffer,   sizeof(sdbuffer));
              buffidx = 0;
            }

            //   Convert pixel from BMP to TFT format, push to display
            b = sdbuffer[buffidx++];
             g = sdbuffer[buffidx++];
            r = sdbuffer[buffidx++];
             tft.pushColor(tft.Color565(r,g,b));
          }
        }
       }
    }
  }

  bmpFile.close();
  if(!goodBmp) Serial.println("BMP   format not recognized.");

}

// This is for the Bitmap/LCD Screen
uint16_t   read16(File f) {
  uint16_t result;
  ((uint8_t *)&result)[0] = f.read();   // LSB
  ((uint8_t *)&result)[1] = f.read(); // MSB
  return result;
}

//   This is for the Bitmap/LCD Screen
uint32_t read32(File f) {
  uint32_t result;
   ((uint8_t *)&result)[0] = f.read(); // LSB
  ((uint8_t *)&result)[1] = f.read();
   ((uint8_t *)&result)[2] = f.read();
  ((uint8_t *)&result)[3] = f.read(); //   MSB
  return result;
}


// Draw Temperature on LCD Screen
void   drawTemperature(int temp) {

  // Get Number of Digits in the Temperature
   int digits = numDigits(temp);
 
  // Define Cursor Positions to Draw Bitmaps
   int x1_2 = 62;
  int x2_2 = 32;
  int x1_3 = 1;
  int x2_3 = 1;
  int   x3_3 = 1;
  int y = 38;

  char digit1[12];
  char digit2[12];
  char   digit3[12];
  char digitStr1[24];
  char digitStr2[24];
  char digitStr3[24];
   
  // Get First Digit
  itoa(temp % 10, digit1,10); 
  //Serial.println(temp   % 10);
  strcpy(digitStr1, "");
  strcat(digitStr1, digit1);
  strcat(digitStr1,   ".bmp");

  // Get Second Digit
  if(digits == 2){
    itoa((temp   / 10) % 10, digit2,10);
    strcpy(digitStr2, "");
    strcat(digitStr2,   digit2);
    strcat(digitStr2, ".bmp");
  }

  // Get Third Digit
   if(digits == 3){
    itoa((temp / 100) % 10, digit3,10);
    strcpy(digitStr3,   "");
    strcat(digitStr3, digit3);
    strcat(digitStr3, ".bmp");
   }  
  
  if(digits > 2){
    bmpDraw(digitStr1,x1_3,y);
    bmpDraw(digitStr2,x2_3,y);
     bmpDraw(digitStr3,x3_3,y);
  } else {
    bmpDraw(digitStr1,x1_2,y);
     bmpDraw(digitStr2,x2_2,y);
  }

}


// Get number of digits   in temperature to determine placement on screen
int numDigits(int number){

   int valLen = 0;  
  if(number > 99)
    valLen = 3;
  else
    valLen   = 2;
  return valLen;

}


// Set LED Colors
void setColors(int   r, int g, int b){

  for(int i = 0; i < PIXEL_NUM; i++){
    
    leds[i].setRGB(   r, g, b);
    leds[i].fadeLightBy(125);
    FastLED.show();    
    delay(100);
   
  }
  
}


// Determine which colors to use based on Humidity   level
void setHumidityColors(int humidity){

  // Humidity Color Chart   - This is just something we came up with.
  // Red - 0-17%
  // Orange - 18-34%
   // Yellow - 35-51%
  // Green - 52-68%
  // Blue - 69-85%
  // Purple   - 86-100%

  // Define Colors
  int cRed[3] = {255,0,0};
  int cOrange[3]   = {255,90,0};
  int cYellow[3] = {255,255,0};
  int cGreen[3] = {0,255,0};
   int cBlue[3] = {0,175,255};
  int cPurple[3] = {255,0,255};

  int range   = map(humidity, 0, 100, 0, 6);
  switch (range) {
    case 0:    // Red
       if(currentColor == 0){
        break;
      }
      else {
        setColors(cRed[0],   cRed[1], cRed[2]);
        currentColor = 0;
      }
      break;
    case   1:    // Orange
      if(currentColor == 1){
        break;
      }
       else {
        setColors(cOrange[0], cOrange[1], cOrange[2]);
        currentColor   = 1;
      }
      break;
    case 2:    // Yellow
      if(currentColor   == 2){
        break;
      }
      else {
        setColors(cYellow[0],   cYellow[1], cYellow[2]);
        currentColor = 2;
      }
      break;
     case 3:    // Green
      if(currentColor == 3){
        break;
      }
       else {
        setColors(cGreen[0], cGreen[1], cGreen[2]);
        currentColor   = 3;
      }
      break;
    case 4:    // Blue
      if(currentColor   == 4){
        break;
      }
      else {
        setColors(cBlue[0],   cBlue[1], cBlue[2]);
        currentColor = 4;
      }
      break;
     case 5:    // Purple
      if(currentColor == 5){
        break;
      }
       else {
        setColors(cPurple[0], cPurple[1], cPurple[2]);
        currentColor   = 5;
      }      
      break;
  }
}

Arduino Work Shop Sensor Code

arduino

1#include <Adafruit_NeoPixel.h>
2#include <Adafruit_ST7735.h>
3#include  <Adafruit_GFX.h>
4#include <FastLED.h>
5#include <SPI.h>
6#include <SD.h>
7#include  <cactus_io_DHT22.h> // There's a bunch of DHTXX libraries you can find online. They  all have varying levels of features.
8
9// Define Pins
10#define TFT_CS    10
11#define  TFT_RST   9
12#define TFT_DC    8
13#define DHT_PIN   2
14#define PIXEL_PIN 6
15#define  PIXEL_NUM 24
16#define SD_PIN    4
17#define BMP_BUF   20  
18
19// Global Variables
20int  currentColor = 9999; //(Numbers correspond to chart. See below.)
21CRGB leds[PIXEL_NUM];
22Adafruit_ST7735   tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
23DHT22 dht(DHT_PIN);
24int  loopDelay = 2000; //ms
25
26// SETUP
27void setup() {
28 
29  Serial.begin(9600);
30  Serial.println("Starting up.");
31
32  // Begin DHT
33  dht.begin();
34
35  // Initialize LCD Screen
36  tft.initR(INITR_144GREENTAB);
37
38  // Initialize  SD Card
39  Serial.print("Initializing SD card.");
40  if (!SD.begin(SD_PIN))  {
41    Serial.println("Failed!");
42    return;
43  }
44
45  // Set Screen  Background to Black
46  tft.fillScreen(ST7735_BLACK);
47
48  // Initialize LEDs
49  FastLED.addLeds<NEOPIXEL, PIXEL_PIN>(leds, PIXEL_NUM);
50
51  // Let everything  catch up before starting loop
52  delay(500);
53
54}
55
56
57// LOOP
58void  loop() {
59
60  // Get Sensor Data
61  dht.readTemperature();
62  dht.readHumidity();
63  int f = dht.temperature_F; // Degrees in Fahrenheit
64  int h = dht.humidity;  // Percentage
65
66  // Draw Degrees Icon
67  tft.fillCircle(102, 42, 6, ST7735_WHITE);
68  tft.fillCircle(102, 42, 4, ST7735_BLACK);
69
70  // Draw Temperature on LCD  Screen
71  drawTemperature(f);
72
73  // Humidity
74  setHumidityColors(h);
75  
76  //Print Data to Serial Monitor
77  Serial.print("Temperature: ");
78  Serial.println(f);
79  Serial.print("Humidity: ");
80  Serial.print(h);
81  Serial.println("%");
82
83  // Delay
84  delay(1000);
85  
86}
87
88
89//  Draw Bitmap - This is for the LCD Screen
90void bmpDraw(char *filename, uint8_t  x, uint8_t y) {
91
92  File     bmpFile;
93  int      bmpWidth, bmpHeight;   //  W+H in pixels
94  uint8_t  bmpDepth;              // Bit depth (currently must  be 24)
95  uint32_t bmpImageoffset;        // Start of image data in file
96  uint32_t  rowSize;               // Not always = bmpWidth; may have padding
97  uint8_t  sdbuffer[3*BMP_BUF];   // pixel buffer (R+G+B per pixel)
98  uint8_t  buffidx = sizeof(sdbuffer); //  Current position in sdbuffer
99  boolean  goodBmp = false;       // Set to true  on valid header parse
100  boolean  flip    = true;        // BMP is stored bottom-to-top
101  int      w, h, row, col;
102  uint8_t  r, g, b;
103  uint32_t pos = 0, startTime  = millis();
104
105  if((x >= tft.width()) || (y >= tft.height())) return;
106
107//  Serial.println();
108//  Serial.print("Loading Bitmap Image: '");
109//  Serial.print(filename);
110//  Serial.println('\\'');
111
112  // Open requested file on SD card
113  if ((bmpFile  = SD.open(filename)) == NULL) {
114    Serial.print("Bitmap file not found!");
115    return;
116  }
117
118  // Parse BMP header
119  if(read16(bmpFile) == 0x4D42)  {
120    read32(bmpFile);
121    (void)read32(bmpFile);
122    bmpImageoffset =  read32(bmpFile);
123    //Serial.println());
124    read32(bmpFile);
125    bmpWidth  = read32(bmpFile);
126    bmpHeight = read32(bmpFile);
127    if(read16(bmpFile)  == 1) {
128      bmpDepth = read16(bmpFile);
129      //Serial.print("Bit Depth:  ");
130      if((bmpDepth == 24) && (read32(bmpFile) == 0)) {
131
132        goodBmp  = true;
133
134        // BMP rows are padded (if needed) to 4-byte boundary
135        rowSize = (bmpWidth * 3 + 3) & ~3;
136
137        // If bmpHeight is negative,  image is in top-down order.
138        // This is not canon but has been observed  in the wild.
139        if(bmpHeight < 0) {
140          bmpHeight = -bmpHeight;
141          flip      = false;
142        }
143
144        // Crop area to be loaded
145        w = bmpWidth;
146        h = bmpHeight;
147        if((x+w-1) >= tft.width())  w = tft.width()  - x;
148        if((y+h-1) >= tft.height()) h = tft.height()  - y;
149
150        // Set TFT address window to clipped image bounds
151        tft.setAddrWindow(x,  y, x+w-1, y+h-1);
152
153        for (row=0; row<h; row++) { // For each scanline...
154          if(flip) {
155            pos = bmpImageoffset + (bmpHeight - 1 - row)  * rowSize;
156          } else {
157            pos = bmpImageoffset + row * rowSize;
158          }
159          if(bmpFile.position() != pos) {
160            bmpFile.seek(pos);
161            buffidx = sizeof(sdbuffer);
162          }
163
164          for (col=0;  col<w; col++) {
165            if (buffidx >= sizeof(sdbuffer)) {
166              bmpFile.read(sdbuffer,  sizeof(sdbuffer));
167              buffidx = 0;
168            }
169
170            //  Convert pixel from BMP to TFT format, push to display
171            b = sdbuffer[buffidx++];
172            g = sdbuffer[buffidx++];
173            r = sdbuffer[buffidx++];
174            tft.pushColor(tft.Color565(r,g,b));
175          }
176        }
177      }
178    }
179  }
180
181  bmpFile.close();
182  if(!goodBmp) Serial.println("BMP  format not recognized.");
183
184}
185
186// This is for the Bitmap/LCD Screen
187uint16_t  read16(File f) {
188  uint16_t result;
189  ((uint8_t *)&result)[0] = f.read();  // LSB
190  ((uint8_t *)&result)[1] = f.read(); // MSB
191  return result;
192}
193
194//  This is for the Bitmap/LCD Screen
195uint32_t read32(File f) {
196  uint32_t result;
197  ((uint8_t *)&result)[0] = f.read(); // LSB
198  ((uint8_t *)&result)[1] = f.read();
199  ((uint8_t *)&result)[2] = f.read();
200  ((uint8_t *)&result)[3] = f.read(); //  MSB
201  return result;
202}
203
204
205// Draw Temperature on LCD Screen
206void  drawTemperature(int temp) {
207
208  // Get Number of Digits in the Temperature
209  int digits = numDigits(temp);
210 
211  // Define Cursor Positions to Draw Bitmaps
212  int x1_2 = 62;
213  int x2_2 = 32;
214  int x1_3 = 1;
215  int x2_3 = 1;
216  int  x3_3 = 1;
217  int y = 38;
218
219  char digit1[12];
220  char digit2[12];
221  char  digit3[12];
222  char digitStr1[24];
223  char digitStr2[24];
224  char digitStr3[24];
225  
226  // Get First Digit
227  itoa(temp % 10, digit1,10); 
228  //Serial.println(temp  % 10);
229  strcpy(digitStr1, "");
230  strcat(digitStr1, digit1);
231  strcat(digitStr1,  ".bmp");
232
233  // Get Second Digit
234  if(digits == 2){
235    itoa((temp  / 10) % 10, digit2,10);
236    strcpy(digitStr2, "");
237    strcat(digitStr2,  digit2);
238    strcat(digitStr2, ".bmp");
239  }
240
241  // Get Third Digit
242  if(digits == 3){
243    itoa((temp / 100) % 10, digit3,10);
244    strcpy(digitStr3,  "");
245    strcat(digitStr3, digit3);
246    strcat(digitStr3, ".bmp");
247  }  
248  
249  if(digits > 2){
250    bmpDraw(digitStr1,x1_3,y);
251    bmpDraw(digitStr2,x2_3,y);
252    bmpDraw(digitStr3,x3_3,y);
253  } else {
254    bmpDraw(digitStr1,x1_2,y);
255    bmpDraw(digitStr2,x2_2,y);
256  }
257
258}
259
260
261// Get number of digits  in temperature to determine placement on screen
262int numDigits(int number){
263
264  int valLen = 0;  
265  if(number > 99)
266    valLen = 3;
267  else
268    valLen  = 2;
269  return valLen;
270
271}
272
273
274// Set LED Colors
275void setColors(int  r, int g, int b){
276
277  for(int i = 0; i < PIXEL_NUM; i++){
278    
279    leds[i].setRGB(  r, g, b);
280    leds[i].fadeLightBy(125);
281    FastLED.show();    
282    delay(100);
283  
284  }
285  
286}
287
288
289// Determine which colors to use based on Humidity  level
290void setHumidityColors(int humidity){
291
292  // Humidity Color Chart  - This is just something we came up with.
293  // Red - 0-17%
294  // Orange - 18-34%
295  // Yellow - 35-51%
296  // Green - 52-68%
297  // Blue - 69-85%
298  // Purple  - 86-100%
299
300  // Define Colors
301  int cRed[3] = {255,0,0};
302  int cOrange[3]  = {255,90,0};
303  int cYellow[3] = {255,255,0};
304  int cGreen[3] = {0,255,0};
305  int cBlue[3] = {0,175,255};
306  int cPurple[3] = {255,0,255};
307
308  int range  = map(humidity, 0, 100, 0, 6);
309  switch (range) {
310    case 0:    // Red
311      if(currentColor == 0){
312        break;
313      }
314      else {
315        setColors(cRed[0],  cRed[1], cRed[2]);
316        currentColor = 0;
317      }
318      break;
319    case  1:    // Orange
320      if(currentColor == 1){
321        break;
322      }
323      else {
324        setColors(cOrange[0], cOrange[1], cOrange[2]);
325        currentColor  = 1;
326      }
327      break;
328    case 2:    // Yellow
329      if(currentColor  == 2){
330        break;
331      }
332      else {
333        setColors(cYellow[0],  cYellow[1], cYellow[2]);
334        currentColor = 2;
335      }
336      break;
337    case 3:    // Green
338      if(currentColor == 3){
339        break;
340      }
341      else {
342        setColors(cGreen[0], cGreen[1], cGreen[2]);
343        currentColor  = 3;
344      }
345      break;
346    case 4:    // Blue
347      if(currentColor  == 4){
348        break;
349      }
350      else {
351        setColors(cBlue[0],  cBlue[1], cBlue[2]);
352        currentColor = 4;
353      }
354      break;
355    case 5:    // Purple
356      if(currentColor == 5){
357        break;
358      }
359      else {
360        setColors(cPurple[0], cPurple[1], cPurple[2]);
361        currentColor  = 5;
362      }      
363      break;
364  }
365}

#include <Adafruit_NeoPixel.h>
#include <Adafruit_ST7735.h>
#include  <Adafruit_GFX.h>
#include <FastLED.h>
#include <SPI.h>
#include <SD.h>
#include  <cactus_io_DHT22.h> // There's a bunch of DHTXX libraries you can find online. They  all have varying levels of features.

// Define Pins
#define TFT_CS    10
#define  TFT_RST   9
#define TFT_DC    8
#define DHT_PIN   2
#define PIXEL_PIN 6
#define  PIXEL_NUM 24
#define SD_PIN    4
#define BMP_BUF   20  

// Global Variables
int  currentColor = 9999; //(Numbers correspond to chart. See below.)
CRGB leds[PIXEL_NUM];
Adafruit_ST7735   tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
DHT22 dht(DHT_PIN);
int  loopDelay = 2000; //ms

// SETUP
void setup() {
 
  Serial.begin(9600);
  Serial.println("Starting up.");

  // Begin DHT
  dht.begin();

  // Initialize LCD Screen
  tft.initR(INITR_144GREENTAB);

  // Initialize  SD Card
  Serial.print("Initializing SD card.");
  if (!SD.begin(SD_PIN))  {
    Serial.println("Failed!");
    return;
  }

  // Set Screen  Background to Black
  tft.fillScreen(ST7735_BLACK);

  // Initialize LEDs
  FastLED.addLeds<NEOPIXEL, PIXEL_PIN>(leds, PIXEL_NUM);

  // Let everything  catch up before starting loop
  delay(500);

}


// LOOP
void  loop() {

  // Get Sensor Data
  dht.readTemperature();
  dht.readHumidity();
  int f = dht.temperature_F; // Degrees in Fahrenheit
  int h = dht.humidity;  // Percentage

  // Draw Degrees Icon
  tft.fillCircle(102, 42, 6, ST7735_WHITE);
  tft.fillCircle(102, 42, 4, ST7735_BLACK);

  // Draw Temperature on LCD  Screen
  drawTemperature(f);

  // Humidity
  setHumidityColors(h);
  
  //Print Data to Serial Monitor
  Serial.print("Temperature: ");
  Serial.println(f);
  Serial.print("Humidity: ");
  Serial.print(h);
  Serial.println("%");

  // Delay
  delay(1000);
  
}


//  Draw Bitmap - This is for the LCD Screen
void bmpDraw(char *filename, uint8_t  x, uint8_t y) {

  File     bmpFile;
  int      bmpWidth, bmpHeight;   //  W+H in pixels
  uint8_t  bmpDepth;              // Bit depth (currently must  be 24)
  uint32_t bmpImageoffset;        // Start of image data in file
  uint32_t  rowSize;               // Not always = bmpWidth; may have padding
  uint8_t  sdbuffer[3*BMP_BUF];   // pixel buffer (R+G+B per pixel)
  uint8_t  buffidx = sizeof(sdbuffer); //  Current position in sdbuffer
  boolean  goodBmp = false;       // Set to true  on valid header parse
  boolean  flip    = true;        // BMP is stored bottom-to-top
  int      w, h, row, col;
  uint8_t  r, g, b;
  uint32_t pos = 0, startTime  = millis();

  if((x >= tft.width()) || (y >= tft.height())) return;

//  Serial.println();
//  Serial.print("Loading Bitmap Image: '");
//  Serial.print(filename);
//  Serial.println('\\'');

  // Open requested file on SD card
  if ((bmpFile  = SD.open(filename)) == NULL) {
    Serial.print("Bitmap file not found!");
    return;
  }

  // Parse BMP header
  if(read16(bmpFile) == 0x4D42)  {
    read32(bmpFile);
    (void)read32(bmpFile);
    bmpImageoffset =  read32(bmpFile);
    //Serial.println());
    read32(bmpFile);
    bmpWidth  = read32(bmpFile);
    bmpHeight = read32(bmpFile);
    if(read16(bmpFile)  == 1) {
      bmpDepth = read16(bmpFile);
      //Serial.print("Bit Depth:  ");
      if((bmpDepth == 24) && (read32(bmpFile) == 0)) {

        goodBmp  = true;

        // BMP rows are padded (if needed) to 4-byte boundary
        rowSize = (bmpWidth * 3 + 3) & ~3;

        // If bmpHeight is negative,  image is in top-down order.
        // This is not canon but has been observed  in the wild.
        if(bmpHeight < 0) {
          bmpHeight = -bmpHeight;
          flip      = false;
        }

        // Crop area to be loaded
        w = bmpWidth;
        h = bmpHeight;
        if((x+w-1) >= tft.width())  w = tft.width()  - x;
        if((y+h-1) >= tft.height()) h = tft.height()  - y;

        // Set TFT address window to clipped image bounds
        tft.setAddrWindow(x,  y, x+w-1, y+h-1);

        for (row=0; row<h; row++) { // For each scanline...
          if(flip) {
            pos = bmpImageoffset + (bmpHeight - 1 - row)  * rowSize;
          } else {
            pos = bmpImageoffset + row * rowSize;
          }
          if(bmpFile.position() != pos) {
            bmpFile.seek(pos);
            buffidx = sizeof(sdbuffer);
          }

          for (col=0;  col<w; col++) {
            if (buffidx >= sizeof(sdbuffer)) {
              bmpFile.read(sdbuffer,  sizeof(sdbuffer));
              buffidx = 0;
            }

            //  Convert pixel from BMP to TFT format, push to display
            b = sdbuffer[buffidx++];
            g = sdbuffer[buffidx++];
            r = sdbuffer[buffidx++];
            tft.pushColor(tft.Color565(r,g,b));
          }
        }
      }
    }
  }

  bmpFile.close();
  if(!goodBmp) Serial.println("BMP  format not recognized.");

}

// This is for the Bitmap/LCD Screen
uint16_t  read16(File f) {
  uint16_t result;
  ((uint8_t *)&result)[0] = f.read();  // LSB
  ((uint8_t *)&result)[1] = f.read(); // MSB
  return result;
}

//  This is for the Bitmap/LCD Screen
uint32_t read32(File f) {
  uint32_t result;
  ((uint8_t *)&result)[0] = f.read(); // LSB
  ((uint8_t *)&result)[1] = f.read();
  ((uint8_t *)&result)[2] = f.read();
  ((uint8_t *)&result)[3] = f.read(); //  MSB
  return result;
}


// Draw Temperature on LCD Screen
void  drawTemperature(int temp) {

  // Get Number of Digits in the Temperature
  int digits = numDigits(temp);
 
  // Define Cursor Positions to Draw Bitmaps
  int x1_2 = 62;
  int x2_2 = 32;
  int x1_3 = 1;
  int x2_3 = 1;
  int  x3_3 = 1;
  int y = 38;

  char digit1[12];
  char digit2[12];
  char  digit3[12];
  char digitStr1[24];
  char digitStr2[24];
  char digitStr3[24];
  
  // Get First Digit
  itoa(temp % 10, digit1,10); 
  //Serial.println(temp  % 10);
  strcpy(digitStr1, "");
  strcat(digitStr1, digit1);
  strcat(digitStr1,  ".bmp");

  // Get Second Digit
  if(digits == 2){
    itoa((temp  / 10) % 10, digit2,10);
    strcpy(digitStr2, "");
    strcat(digitStr2,  digit2);
    strcat(digitStr2, ".bmp");
  }

  // Get Third Digit
  if(digits == 3){
    itoa((temp / 100) % 10, digit3,10);
    strcpy(digitStr3,  "");
    strcat(digitStr3, digit3);
    strcat(digitStr3, ".bmp");
  }  
  
  if(digits > 2){
    bmpDraw(digitStr1,x1_3,y);
    bmpDraw(digitStr2,x2_3,y);
    bmpDraw(digitStr3,x3_3,y);
  } else {
    bmpDraw(digitStr1,x1_2,y);
    bmpDraw(digitStr2,x2_2,y);
  }

}


// Get number of digits  in temperature to determine placement on screen
int numDigits(int number){

  int valLen = 0;  
  if(number > 99)
    valLen = 3;
  else
    valLen  = 2;
  return valLen;

}


// Set LED Colors
void setColors(int  r, int g, int b){

  for(int i = 0; i < PIXEL_NUM; i++){
    
    leds[i].setRGB(  r, g, b);
    leds[i].fadeLightBy(125);
    FastLED.show();    
    delay(100);
  
  }
  
}


// Determine which colors to use based on Humidity  level
void setHumidityColors(int humidity){

  // Humidity Color Chart  - This is just something we came up with.
  // Red - 0-17%
  // Orange - 18-34%
  // Yellow - 35-51%
  // Green - 52-68%
  // Blue - 69-85%
  // Purple  - 86-100%

  // Define Colors
  int cRed[3] = {255,0,0};
  int cOrange[3]  = {255,90,0};
  int cYellow[3] = {255,255,0};
  int cGreen[3] = {0,255,0};
  int cBlue[3] = {0,175,255};
  int cPurple[3] = {255,0,255};

  int range  = map(humidity, 0, 100, 0, 6);
  switch (range) {
    case 0:    // Red
      if(currentColor == 0){
        break;
      }
      else {
        setColors(cRed[0],  cRed[1], cRed[2]);
        currentColor = 0;
      }
      break;
    case  1:    // Orange
      if(currentColor == 1){
        break;
      }
      else {
        setColors(cOrange[0], cOrange[1], cOrange[2]);
        currentColor  = 1;
      }
      break;
    case 2:    // Yellow
      if(currentColor  == 2){
        break;
      }
      else {
        setColors(cYellow[0],  cYellow[1], cYellow[2]);
        currentColor = 2;
      }
      break;
    case 3:    // Green
      if(currentColor == 3){
        break;
      }
      else {
        setColors(cGreen[0], cGreen[1], cGreen[2]);
        currentColor  = 3;
      }
      break;
    case 4:    // Blue
      if(currentColor  == 4){
        break;
      }
      else {
        setColors(cBlue[0],  cBlue[1], cBlue[2]);
        currentColor = 4;
      }
      break;
    case 5:    // Purple
      if(currentColor == 5){
        break;
      }
      else {
        setColors(cPurple[0], cPurple[1], cPurple[2]);
        currentColor  = 5;
      }      
      break;
  }
}

Downloadable files

Picture of Actual Setup

Schematic

Fritzing didn't have most of the actual components so I did my best to represent the flow of things.

Schematic

Picture of Actual Setup

Documentation

Arduino Work Shop Sensor Plans

Comments

Only logged in users can leave comments

toribishop10

2 years ago

Is there a way to see the junction box better. I'm terrible with breadboards, and this has been the part holding me up.

Anonymous user

2 years ago

So I m planning on recreating your project for a school project and I was wondering if the MicroSD Card Reader on the back of the LCD screen was important or needed for the project to work. The one I order is the same but doesn't have the MicroSD Card Reader. So if you can respond ASAP that would be great.

WickedMakers

2 years ago

Hi Jarrett. The lcd screen can draw fonts/text but the quality wasn’t as good as I wanted so we used the microSd card to store bitmap images of each number. Now instead of drawing text, it loads an image for each number and displays it. Not entirely necessary but I thought it looked better than just drawing the numbers with the font library. Good luck!

tylerpeppy

2 years ago

That is a pretty cool project!

WickedMakers

2 years ago

Thanks!

Anonymous user

2 years ago

What a beautiful piece of art! Thanks for such a detailed video.

WickedMakers

2 years ago

Thanks Jessica!

Anonymous user

2 years ago

how did it measure humidity? I really find this cool and I hope to recreate this for our science fair. I am a high school student and is still learning about the basics of computer science. Thanks in advance!

Anonymous user

2 years ago

This is just gorgeous! I can’t wait to try this with my kids over the summer. They’re going to go crazy over your logo alone, so I’d better start now to design a silhouette that will capture the same kind of awesome that your device projects!

WickedMakers

2 years ago

:D Thanks! And that is super exciting. Send us a photo of the project if make one!

exoticrobotics77156

2 years ago

Hi! This is an amazing project and I planning to do this in the future! Can you please send me a full list of the materials for this project? When I looked in the list above it did not show the full thing and kept on getting cut off.

Anonymous user

2 years ago

I really like the logo, could you please share the sketch/CAD file or something? That would be great. It will be only used for copying this project at home

WickedMakers

2 years ago

Hi sugano23, we can’t share the logo files unfortunately. Thanks though and glad you like it!

Anonymous user

2 years ago

I love your project!! We are having an hackster online contest calling for environmental projects, i would like to invite you to submit this amazing project to get involved: https://www.hackster.io/contests/SeeedEarthDay

Anonymous user

2 years ago

I wanted to say this is an awesome project and I wish I could have had the chance to recreate it for myself. Please know I make no accusations to the creators of this project in any way shape or form I only wish to bring it to their attention and the attention of Instructables. I tried to download this project to make it for my own workroom. Unfortunately, it is unavailable to download a single file like before in PDF format. I now must download multiple files. I do not feel that is correct considering the last time I downloaded a file from Instructables it was only 1 file for the project. To make subscribers download multiple files in the world today is opening the doors for trouble considering the fact that during the attempt to download the files the instructable website was flagged by my antivirus as a bad site because it found trojans attached or in the files for this project. I in no way make any accusations to the creators of this project. I only wish to bring it to the attention of the creators and maybe Instructables as well. This is the first download of any project off the Instructables website since December of 2016.

WickedMakers

2 years ago

Hi there, not sure what you mean since there’s nothing to download. Thanks though!

Anonymous user

2 years ago

This is amazing! I think what I might do is take this idea and have it run two screens. One run as a clock, and the other one that shows temperature have it connected to the internet so it gets not my room temp, but the actual outside temp along with the weather! I'll have to figure this out haha but I love the idea!

WickedMakers

2 years ago

Nice! Great idea. :) Send us a pic if you build it, would love to see the idea come to life.

Anonymous user

2 years ago

hello please give me this project's 3D printer files please

WickedMakers

2 years ago

Hi Ugur, we can't give out the exact files since this is our logo but any similar sized 3D print will also look really good. :)

Anonymous user

2 years ago

Thank you

henriquebg

2 years ago

Beautiful handwork, really nice to see the whole sotry in the video.

WickedMakers

2 years ago

Thank you!

sandromesquitamecatronica

2 years ago

Very beautiful..I going to share with my students.

Anonymous user

2 years ago

I like the design of the box and face of the box. I was wondering if it the humidity display could be done with two 7 segment displays.

Anonymous user

3 years ago

Anonymous user

5 years ago

Dear i am facing this error cactus_io_DHT22.h: No such file or directory

sandromesquitamecatronica

6 years ago

Very beautiful..I going to share with my students.

Anonymous user

7 years ago

I like the design of the box and face of the box. I was wondering if it the humidity display could be done with two 7 segment displays.

Anonymous user

7 years ago

WickedMakers

2 years ago

Anonymous user

7 years ago

sugano23

7 years ago

I really like the logo, could you please share the sketch/CAD file or something? That would be great. It will be only used for copying this project at home

WickedMakers

2 years ago

Hi sugano23, we can’t share the logo files unfortunately. Thanks though and glad you like it!

Mousepotato

7 years ago

WickedMakers

2 years ago

Hi there, not sure what you mean since there’s nothing to download. Thanks though!

Anonymous user

7 years ago

What a beautiful piece of art! Thanks for such a detailed video.

WickedMakers

2 years ago

Thanks Jessica!

Leggo0

7 years ago

WickedMakers

2 years ago

Nice! Great idea. :) Send us a pic if you build it, would love to see the idea come to life.

Anonymous user

7 years ago

WickedMakers

2 years ago

:D Thanks! And that is super exciting. Send us a photo of the project if make one!

UGUR_GUNEYSU

7 years ago

hello please give me this project's 3D printer files please

UGUR_GUNEYSU

2 years ago

Thank you

WickedMakers

2 years ago

Hi Ugur, we can't give out the exact files since this is our logo but any similar sized 3D print will also look really good. :)

henriquebg

7 years ago

Beautiful handwork, really nice to see the whole sotry in the video.

WickedMakers

2 years ago

Thank you!

tylerpeppy

7 years ago

That is a pretty cool project!

WickedMakers

2 years ago

Thanks!

WickedMakers

1 Followers

•

2 Projects

Intro

Components and supplies

Tools and machines

Project description

Code

Downloadable files

Documentation