Search Results

In this tutorial to learn the home automation project using ESP32, TFT 3.5 inch touch screen Display. Using this project is replacement for the manual switch and you can easily on/off the home appliances like Lights, Fans, AC, TV, etc. Here we used the 4 channel relay board for controlling the 4 devices. Components: ESP-32 Dev Module (38Pin) - 1 n0 3.5 inch TFT LCD Display Module SPI Interface 320x480 with Touch Screen- 1No 4 channel Relay Module- 1 no Jumper Wires Circuit Diagram 3.5 inch TFT LCD Display Module SPI Interface 320x480 with Touch Screen This TFT display is big bright and colorful! 480×320 pixels with individual RGB pixel control, this has way more resolution than a black and white 128×64 display. As a bonus, this display has a resistive touch screen attached to it already, so you can detect finger presses anywhere on the screen. This display has a controller built into it with RAM buffering so that almost no work is done by the microcontroller. This 3.5-inch SPI Touch Screen Module is wrapped up into an easy-to-use breakout board, with SPI connections on one end. If you’re going with SPI mode, you can also take advantage of the onboard MicroSD card socket to display images. The 3.5-inch display doesn't have a built-in level shifter, so it's advised to use only 3.3v. Using a node MCU would be more suitable cause it provides only 3.3v. if you are using a 5v microcontroller like the Arduino UNO, MEGA, Using a level shifter would give you the appropriate voltage needed to operate the LCD without damaging it. DATA SHEET Download 3.5 inch TFT LCD SPI Module Manual Download Refer the blog for more deatils in TFT configuration. https://www.dofbot.com/post/esp32-dht-weather-monitor-with-3-5inch-tft-touch-display ESP32 Development Board WiFi+Bluetooth 38 Pin ESP32 Development board is based on the ESP WROOM32 WIFI + BLE Module.It’s a low-footprint, minimal system development board powered by the latest ESP-WROOM-32 module and can be easily inserted into a solderless breadboard. It contains the entire basic support circuitry for the ESP-WROOM-32, including the USB-UART bridge, reset- and boot-mode buttons, LDO regulator and a micro-USB connector. Every important GPIO is available to the developer. ESP32 Development Board Feature: ESP32 is already integrated antenna and RF balun,power amplifier,low-noise amplifiers,filters,and power management module. This board is used with 2.4 GHz dual-mode Wi-Fi and Bluetooth chips by TSMC 40nm low power technology,power and RF properties best,which is safe,reliable,and scalable to a variety of applications. Strong function with support LWIP protocol,Freertos. Supporting three modes:AP,STA,and AP+STA. Supporting Lua program,easily to develop. Installing the library To install the library navigate to the Sketch > Include Library > Manage Libraries… Wait for Library Manager to download libraries index and update list of installed libraries. Download TFT Library , we need to use this library for TFT touch display In your Arduino IDE, to install the libraries go to Sketch > Include Library > Add .ZIP library… and select the library you’ve just downloaded. After Arduino IDE installed, there is no package to support ESP32-S2, we need to install the ESP32 package in Arduino IDE to continue. Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json arduino code #include #include "Free_Fonts.h" // Include the header file attached to this sketch #include "dofbot.h" #include #include // Hardware-specific library #include // Widget library TFT_eSPI tft = TFT_eSPI(); // Invoke custom library #define CALIBRATION_FILE "/TouchCalData1" #define REPEAT_CAL false ButtonWidget btn1SW = ButtonWidget(&tft); ButtonWidget btn2SW = ButtonWidget(&tft); ButtonWidget btn3SW = ButtonWidget(&tft); ButtonWidget btn4SW = ButtonWidget(&tft); #define BUTTON_W 100 #define BUTTON_H 50 // Create an array of button instances to use in for() loops // This is more useful where large numbers of buttons are employed ButtonWidget* btn[] = {&btn1SW , &btn2SW , &btn3SW , &btn4SW}; uint8_t buttonCount = sizeof(btn) / sizeof(btn[0]); // define the GPIO connected with Relays and switches #define RelayPin1 33 //D33 #define RelayPin2 32 //D32 #define RelayPin3 25 //D25 #define RelayPin4 26 //D26 // Relay State bool toggleState_1 = HIGH; //Define integer to remember the toggle state for relay 1 bool toggleState_2 = HIGH; //Define integer to remember the toggle state for relay 2 bool toggleState_3 = HIGH; //Define integer to remember the toggle state for relay 3 bool toggleState_4 = HIGH; //Define integer to remember the toggle state for relay 4 void btn1SW_pressAction(void) { if (btn1SW.justPressed()) { btn1SW.drawSmoothButton(!btn1SW.getState(), 3, TFT_BLACK, btn1SW.getState() ? "OFF" : "ON"); Serial.print("Button toggled: "); if (btn1SW.getState()) {Serial.println("ON"); digitalWrite(RelayPin1, HIGH);} else { Serial.println("OFF"); digitalWrite(RelayPin1, LOW); btn1SW.setPressTime(millis());} } // if button pressed for more than 1 sec... if (millis() - btn1SW.getPressTime() >= 1000) { Serial.println("Stop pressing my buttton......."); } else Serial.println("Right button is being pressed"); } void btn1SW_releaseAction(void) { // Not action } void btn2SW_pressAction(void) { if (btn2SW.justPressed()) { btn2SW.drawSmoothButton(!btn2SW.getState(), 3, TFT_BLACK, btn2SW.getState() ? "OFF" : "ON"); Serial.print("Button toggled: "); if (btn2SW.getState()) {Serial.println("ON"); digitalWrite(RelayPin2, HIGH);} else { Serial.println("OFF"); digitalWrite(RelayPin2, LOW); btn2SW.setPressTime(millis());} } // if button pressed for more than 1 sec... if (millis() - btn2SW.getPressTime() >= 1000) { Serial.println("Stop pressing my buttton......."); } else Serial.println("Right button is being pressed"); } void btn2SW_releaseAction(void) { // Not action } void btn3SW_pressAction(void) { if (btn3SW.justPressed()) { btn3SW.drawSmoothButton(!btn3SW.getState(), 3, TFT_BLACK, btn3SW.getState() ? "OFF" : "ON"); Serial.print("Button toggled: "); if (btn3SW.getState()) {Serial.println("ON"); digitalWrite(RelayPin3, HIGH);} else { Serial.println("OFF"); digitalWrite(RelayPin3, LOW); btn3SW.setPressTime(millis());} } // if button pressed for more than 1 sec... if (millis() - btn3SW.getPressTime() >= 1000) { Serial.println("Stop pressing my buttton......."); } else Serial.println("Right button is being pressed"); } void btn3SW_releaseAction(void) { // Not action } void btn4SW_pressAction(void) { if (btn4SW.justPressed()) { btn4SW.drawSmoothButton(!btn4SW.getState(), 3, TFT_BLACK, btn4SW.getState() ? "OFF" : "ON"); Serial.print("Button toggled: "); if (btn4SW.getState()) {Serial.println("ON"); digitalWrite(RelayPin4, HIGH);} else { Serial.println("OFF"); digitalWrite(RelayPin4, LOW); btn4SW.setPressTime(millis());} } // if button pressed for more than 1 sec... if (millis() - btn4SW.getPressTime() >= 1000) { Serial.println("Stop pressing my buttton......."); } else Serial.println("Right button is being pressed"); } void btn4SW_releaseAction(void) { // Not action } void initButtons() { uint16_t x = 150; uint16_t y = 85; btn1SW.initButtonUL(x, y, BUTTON_W, BUTTON_H, TFT_BLACK, TFT_RED, TFT_GREEN, "OFF", 1); btn1SW.setPressAction(btn1SW_pressAction); btn1SW.setReleaseAction(btn1SW_releaseAction); btn1SW.drawSmoothButton(false, 3, TFT_BLACK); // 3 is outline width, TFT_BLACK is the surrounding background colour for anti-aliasing y = 160; btn2SW.initButtonUL(x, y, BUTTON_W, BUTTON_H, TFT_BLACK, TFT_RED, TFT_GREEN, "OFF", 1); btn2SW.setPressAction(btn2SW_pressAction); //btn2SW.setReleaseAction(btn2SW_releaseAction); btn2SW.drawSmoothButton(false, 3, TFT_BLACK); // 3 is outline width, TFT_BLACK is the surrounding background colour for anti-aliasing y = 235; btn3SW.initButtonUL(x, y, BUTTON_W, BUTTON_H, TFT_BLACK, TFT_RED, TFT_GREEN, "OFF", 1); btn3SW.setPressAction(btn3SW_pressAction); btn3SW.setReleaseAction(btn3SW_releaseAction); btn3SW.drawSmoothButton(false, 3, TFT_BLACK); // 3 is outline width, TFT_BLACK is the surrounding background colour for anti-aliasing y = 310; btn4SW.initButtonUL(x, y, BUTTON_W, BUTTON_H, TFT_BLACK, TFT_RED, TFT_GREEN, "OFF", 1); btn4SW.setPressAction(btn4SW_pressAction); btn4SW.setReleaseAction(btn4SW_releaseAction); btn4SW.drawSmoothButton(false, 3, TFT_BLACK); // 3 is outline width, TFT_BLACK is the surrounding background colour for anti-aliasing } void setup() { Serial.begin(115200); pinMode(RelayPin1, OUTPUT); pinMode(RelayPin2, OUTPUT); pinMode(RelayPin3, OUTPUT); pinMode(RelayPin4, OUTPUT); //During Starting all Relays should TURN OFF digitalWrite(RelayPin1, !toggleState_1); digitalWrite(RelayPin2, !toggleState_2); digitalWrite(RelayPin3, !toggleState_3); digitalWrite(RelayPin4, !toggleState_4); tft.init(); tft.begin(); tft.setRotation(0); tft.setSwapBytes(true); tft.fillScreen(TFT_WHITE); // tft.fillScreen(TFT_BLACK); tft.setFreeFont(FF18); // Calibrate the touch screen and retrieve the scaling factors touch_calibrate(); initButtons(); tft.setTextColor(TFT_BLACK, TFT_WHITE); //tft.setTextSize(1); // tft.fillScreen(TFT_BLACK); // tft.setSwapBytes(true); tft.setCursor(1,30); tft.println("HOME AUTOMATION ESP32"); tft.setCursor(15,55); tft.println("& TFT TOUCH DISPLAY"); tft.setCursor(50,115); tft.println("Relay1"); tft.setCursor(50,195); tft.println("Relay2"); tft.setCursor(50,270); tft.println("Relay3"); tft.setCursor(50,345); tft.println("Relay4"); tft.setCursor(120,410); tft.setTextSize(0.5); tft.println("PROJECT BY "); tft.setCursor(120,435); tft.println("RAMESH G"); tft.setCursor(120,460); tft.println("DOFBOT.COM"); } void loop() { static uint32_t scanTime = millis(); uint16_t t_x = 9999, t_y = 9999; // To store the touch coordinates // Scan keys every 50ms at most if (millis() - scanTime >= 50) { // Pressed will be set true if there is a valid touch on the screen bool pressed = tft.getTouch(&t_x, &t_y); scanTime = millis(); for (uint8_t b = 0; b < buttonCount; b++) { if (pressed) { if (btn[b]->contains(t_x, t_y)) { btn[b]->press(true); btn[b]->pressAction(); } } else { btn[b]->press(false); btn[b]->releaseAction(); } } } for(int i=0;i

Here to learn how to make an IOT based internet weather station with TFT Display. The ESP32 can access the internet and gets weather data from www.openweathermap.org that provide Free/Paid weather information for many cities over the world. In this project to show how to get weather data from the internet and print TFT display. Components Required ESP-32 Module (38Pin) 3.5 inch TFT LCD Display Module SPI Interface 320x480 with Touch Screen Jumper Wires Circuit Diagram 3.5 inch TFT LCD Display Module SPI Interface 320x480 with Touch Screen This TFT display is big bright and colorful! 480×320 pixels with individual RGB pixel control, this has way more resolution than a black and white 128×64 display. As a bonus, this display has a resistive touch screen attached to it already, so you can detect finger presses anywhere on the screen. This display has a controller built into it with RAM buffering so that almost no work is done by the microcontroller. This 3.5-inch SPI Touch Screen Module is wrapped up into an easy-to-use breakout board, with SPI connections on one end. If you’re going with SPI mode, you can also take advantage of the onboard MicroSD card socket to display images. The 3.5-inch display doesn't have a built-in level shifter, so it's advised to use only 3.3v. Using a node MCU would be more suitable cause it provides only 3.3v. if you are using a 5v microcontroller like the Arduino UNO, MEGA, Using a level shifter would give you the appropriate voltage needed to operate the LCD without damaging it. DATA SHEET Download 3.5 inch TFT LCD SPI Module Manual Download Open weather map Internet weather station To get weather data, first we’ve to sign up for a free account in order to get an API key which is important in this project. Refer blog: https://www.dofbot.com/post/internet-weather-station Feature Access current weather data for any location including over 200,000 cities Current weather is frequently updated based on global models and data from more than 40,000 weather stations Data is available in JSON, XML, or HTML format Available for Free and all other paid accounts Once you sign in to your account (of course after the free registration), you’ll be directed to member area, go to API keys and you’ll find your API key as shown in the following image: Replace CITY by with the city you want weather data for, COUNTRY_CODE with the country code for that city (for example uk for the United Kingdom, us for the USA …) and YOUR_API_KEY with your API key which is shown above and replace API key in the arduino code. Installing the library To install the library navigate to the Sketch > Include Library > Manage Libraries… Wait for Library Manager to download libraries index and update list of installed libraries. Download TFT Library , we need to use this library for TFT touch display Download Jpeg decoder Library , we need to use this library for image display Download Json Library , we need to use this library for arduino Download NTPClient Library , we need to use this library for server. In your Arduino IDE, to install the libraries go to Sketch > Include Library > Add .ZIP library… and select the library you’ve just downloaded. After Arduino IDE installed, there is no package to support ESP32-S2, we need to install the ESP32 package in Arduino IDE to continue. Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json arduino code Subscribe and Download code #include "earth.h" #include #include // Hardware-specific library #include //https://github.com/bblanchon/ArduinoJson.git #include //https://github.com/taranais/NTPClient TFT_eSPI tft = TFT_eSPI(); // JPEG decoder library #include // Return the minimum of two values a and b #define minimum(a,b) (((a) < (b)) ? (a) : (b)) // Include the sketch header file that contains the image stored as an array of bytes // More than one image array could be stored in each header file. #include "jpeg1.h" // Count how many times the image is drawn for test purposes uint32_t icount = 0; #define TFT_GREY 0x5AEB #define lightblue 0x01E9 #define darkred 0xA041 #define blue 0x5D9B #include "Orbitron_Medium_20.h" #include #include #include const int pwmFreq = 5000; const int pwmResolution = 8; const int pwmLedChannelTFT = 0; const char* ssid = "TP-Link_3200"; // your SSID const char* password = "95001121379884265554"; //Your Password String town="Chennai"; String Country="IN"; const String endpoint = "http://api.openweathermap.org/data/2.5/weather?q="+town+","+Country+"&units=metric&APPID="; const String key = "add82e4e24d449f3a522f06621a3aaeb"; //paste your API key here String payload=""; //whole json String tmp="" ; //temperatur String hum="" ; //humidity StaticJsonDocument<1000> doc; // Define NTP Client to get time WiFiUDP ntpUDP; NTPClient timeClient(ntpUDP); // Variables to save date and time String formattedDate; String dayStamp; String timeStamp; int backlight[5] = {10,30,60,120,220}; byte b=1; void setup(void) { Serial.begin(115200); tft.begin(); tft.init(); tft.setRotation(0); tft.setSwapBytes(true);/// tft.fillScreen(TFT_BLACK); tft.setTextColor(TFT_WHITE,TFT_BLACK); tft.setTextSize(1); ledcSetup(pwmLedChannelTFT, pwmFreq, pwmResolution); ledcAttachPin(TFT_BLACK, pwmLedChannelTFT); ledcWrite(pwmLedChannelTFT, backlight[b]); tft.print("Connecting to "); tft.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(300); tft.print("."); } tft.println(""); tft.println("WiFi connected."); tft.println("IP address: "); tft.println(WiFi.localIP()); delay(3000); tft.setTextColor(TFT_WHITE,TFT_BLACK); tft.setTextSize(1); tft.fillScreen(TFT_BLACK); tft.setSwapBytes(true); tft.setCursor(2, 392, 1); tft.println(WiFi.localIP()); // tft.setCursor(80, 282, 2); // tft.println("SEC:"); tft.setTextColor(TFT_WHITE,lightblue); tft.setFreeFont(&Orbitron_Medium_20); tft.setCursor(4, 300, 2); tft.println("TEMP:"); tft.setCursor(4, 352, 2); tft.println("HUM: "); tft.setFreeFont(&Orbitron_Medium_20); tft.setTextColor(TFT_WHITE,TFT_BLACK); tft.setFreeFont(&Orbitron_Medium_20); tft.setCursor(6, 82); tft.println(town); tft.setCursor(4, 420, 2); // tft.setFreeFont(&Orbitron_Light_18); tft.setTextColor(TFT_CYAN,TFT_BLACK); tft.println("IOT BASED INTERNET"); tft.println("WEATHER DATA OUTSIDE"); tft.println("OPEN WEATHER"); // Initialize a NTPClient to get time timeClient.begin(); // Set offset time in seconds to adjust for your timezone, for example: // GMT +1 = 3600 // GMT +8 = 28800 // GMT -1 = -3600 // GMT 0 = 0 timeClient.setTimeOffset(19800); /*EDDITTTTTTTTTTTTTTTTTTTTTTTT */ getData(); drawArrayJpeg(Earth, sizeof(Earth), 160, 290); delay(500); } int i=0; String tt=""; int count=0; void animation(){ // The image is 300 x 300 pixels so we do some sums to position image in the middle of the screen! // Doing this by reading the image width and height from the jpeg info is left as an exercise! int x = (tft.width() - 300) / 2 - 1; int y = (tft.height() - 300) / 2 - 1; drawArrayJpeg(Frames00, sizeof(Frames00), 0, 88); drawArrayJpeg(Frames04, sizeof(Frames04), 0, 88); drawArrayJpeg(Frames08, sizeof(Frames08), 0, 88); drawArrayJpeg(Frames12, sizeof(Frames12), 0, 88); drawArrayJpeg(Frames16, sizeof(Frames16), 0, 88); drawArrayJpeg(Frames20, sizeof(Frames20), 0, 88); drawArrayJpeg(Frames24, sizeof(Frames24), 0, 88); drawArrayJpeg(Frames28, sizeof(Frames28), 0, 88); drawArrayJpeg(Frames32, sizeof(Frames32), 0, 88); drawArrayJpeg(Frames36, sizeof(Frames36), 0, 88); drawArrayJpeg(Frames40, sizeof(Frames40), 0, 88); drawArrayJpeg(Frames44, sizeof(Frames44), 0, 88); } void loop() { if(count==0) getData(); count++; if(count>200) count=0; tft.fillRect(1,302,62,30,darkred); tft.setFreeFont(&Orbitron_Light_32); tft.setCursor(2, 329); tft.println(tmp.substring(0,3)); tft.fillRect(1,356,88,30,darkred); tft.setFreeFont(&Orbitron_Light_32); tft.setCursor(2, 383); tft.println(hum+"%"); tft.setTextColor(TFT_ORANGE,TFT_BLACK); tft.setTextFont(2); tft.setCursor(6, 44); tft.println(dayStamp); tft.setTextColor(TFT_WHITE,TFT_BLACK); while(!timeClient.update()) { timeClient.forceUpdate(); } // The formattedDate comes with the following format: // 2018-05-28T16:00:13Z // We need to extract date and time formattedDate = timeClient.getFormattedDate(); Serial.println(formattedDate); int splitT = formattedDate.indexOf("T"); dayStamp = formattedDate.substring(0, splitT); timeStamp = formattedDate.substring(splitT+1, formattedDate.length()-1); tft.setFreeFont(&Orbitron_Light_32); String current=timeStamp.substring(0,5); if(current!=tt) { tft.fillRect(3,8,120,30,TFT_BLACK); tft.setCursor(5, 34); tft.println(timeStamp.substring(0,5)); tt=timeStamp.substring(0,5); } delay(80); animation(); } void getData() { tft.fillRect(1,170,64,20,TFT_BLACK); tft.fillRect(1,210,64,20,TFT_BLACK); if ((WiFi.status() == WL_CONNECTED)) { //Check the current connection status HTTPClient http; http.begin(endpoint + key); //Specify the URL int httpCode = http.GET(); //Make the request if (httpCode > 0) { //Check for the returning code payload = http.getString(); // Serial.println(httpCode); Serial.println(payload); } else { Serial.println("Error on HTTP request"); } http.end(); //Free the resources } char inp[1000]; payload.toCharArray(inp,1000); deserializeJson(doc,inp); String tmp2 = doc["main"]["temp"]; String hum2 = doc["main"]["humidity"]; String town2 = doc["name"]; tmp=tmp2; hum=hum2; Serial.println("Temperature"+String(tmp)); Serial.println("Humidity"+hum); Serial.println(town); } //#################################################################################################### // Draw a JPEG on the TFT pulled from a program memory array //#################################################################################################### void drawArrayJpeg(const uint8_t arrayname[], uint32_t array_size, int xpos, int ypos) { int x = xpos; int y = ypos; JpegDec.decodeArray(arrayname, array_size); renderJPEG(x, y); Serial.println("#########################"); } //#################################################################################################### // Draw a JPEG on the TFT, images will be cropped on the right/bottom sides if they do not fit //#################################################################################################### // This function assumes xpos,ypos is a valid screen coordinate. For convenience images that do not // fit totally on the screen are cropped to the nearest MCU size and may leave right/bottom borders. void renderJPEG(int xpos, int ypos) { // retrieve infomration about the image uint16_t *pImg; uint16_t mcu_w = JpegDec.MCUWidth; uint16_t mcu_h = JpegDec.MCUHeight; uint32_t max_x = JpegDec.width; uint32_t max_y = JpegDec.height; // Jpeg images are draw as a set of image block (tiles) called Minimum Coding Units (MCUs) // Typically these MCUs are 16x16 pixel blocks // Determine the width and height of the right and bottom edge image blocks uint32_t min_w = minimum(mcu_w, max_x % mcu_w); uint32_t min_h = minimum(mcu_h, max_y % mcu_h); // save the current image block size uint32_t win_w = mcu_w; uint32_t win_h = mcu_h; // record the current time so we can measure how long it takes to draw an image uint32_t drawTime = millis(); // save the coordinate of the right and bottom edges to assist image cropping // to the screen size max_x += xpos; max_y += ypos; // read each MCU block until there are no more while (JpegDec.read()) { // save a pointer to the image block pImg = JpegDec.pImage ; // calculate where the image block should be drawn on the screen int mcu_x = JpegDec.MCUx * mcu_w + xpos; // Calculate coordinates of top left corner of current MCU int mcu_y = JpegDec.MCUy * mcu_h + ypos; // check if the image block size needs to be changed for the right edge if (mcu_x + mcu_w <= max_x) win_w = mcu_w; else win_w = min_w; // check if the image block size needs to be changed for the bottom edge if (mcu_y + mcu_h <= max_y) win_h = mcu_h; else win_h = min_h; // copy pixels into a contiguous block if (win_w != mcu_w) { uint16_t *cImg; int p = 0; cImg = pImg + win_w; for (int h = 1; h < win_h; h++) { p += mcu_w; for (int w = 0; w < win_w; w++) { *cImg = *(pImg + w + p); cImg++; } } } // calculate how many pixels must be drawn uint32_t mcu_pixels = win_w * win_h; tft.startWrite(); // draw image MCU block only if it will fit on the screen if (( mcu_x + win_w ) <= tft.width() && ( mcu_y + win_h ) <= tft.height()) { // Now set a MCU bounding window on the TFT to push pixels into (x, y, x + width - 1, y + height - 1) tft.setAddrWindow(mcu_x, mcu_y, win_w, win_h); // Write all MCU pixels to the TFT window while (mcu_pixels--) { // Push each pixel to the TFT MCU area tft.pushColor(*pImg++); } } else if ( (mcu_y + win_h) >= tft.height()) JpegDec.abort(); // Image has run off bottom of screen so abort decoding tft.endWrite(); } // calculate how long it took to draw the image drawTime = millis() - drawTime; // print the results to the serial port Serial.print(F( "Total render time was : ")); Serial.print(drawTime); Serial.println(F(" ms")); Serial.println(F("")); } Subscribe and Download code After a successful upload, open the Serial Monitor at a baud rate of 115200. Press the “EN/RST” button on the ESP32 board. Demo: Subscribe and Download code

In this tutorial, I 'll Published an ESP32 based webserver to display the temperature and humidity values from the DHT11 sensor. ESP32 board will read the temperature and humidity data from the DHT11 sensor and display it on the Webpage and 3.5inch TFT Display. The 3.5″ TFT Touch Screen Display uses an ILI9488 TFT LCD Driver. The screen resolution is 320×480. Components Required ESP-32 Module (38Pin) DHT11 Sensor Module 3.5 inch TFT LCD Display Module SPI Interface 320x480 with Touch Screen Jumper Wires Circuit Diagram ESP32 Development Board WiFi+Bluetooth 38 Pin ESP32 Development board is based on the ESP WROOM32 WIFI + BLE Module.It’s a low-footprint, minimal system development board powered by the latest ESP-WROOM-32 module and can be easily inserted into a solderless breadboard. It contains the entire basic support circuitry for the ESP-WROOM-32, including the USB-UART bridge, reset- and boot-mode buttons, LDO regulator and a micro-USB connector. Every important GPIO is available to the developer. ESP32 Development Board Feature: ESP32 is already integrated antenna and RF balun,power amplifier,low-noise amplifiers,filters,and power management module. This board is used with 2.4 GHz dual-mode Wi-Fi and Bluetooth chips by TSMC 40nm low power technology,power and RF properties best,which is safe,reliable,and scalable to a variety of applications. Strong function with support LWIP protocol,Freertos. Supporting three modes:AP,STA,and AP+STA. Supporting Lua program,easily to develop. 3.5 inch TFT LCD Display Module SPI Interface 320x480 with Touch Screen This TFT display is big bright and colorful! 480×320 pixels with individual RGB pixel control, this has way more resolution than a black and white 128×64 display. As a bonus, this display has a resistive touch screen attached to it already, so you can detect finger presses anywhere on the screen. This display has a controller built into it with RAM buffering so that almost no work is done by the microcontroller. This 3.5-inch SPI Touch Screen Module is wrapped up into an easy-to-use breakout board, with SPI connections on one end. If you’re going with SPI mode, you can also take advantage of the onboard MicroSD card socket to display images. The 3.5-inch display doesn't have a built-in level shifter, so it's advised to use only 3.3v. Using a node MCU would be more suitable cause it provides only 3.3v. if you are using a 5v microcontroller like the Arduino UNO, MEGA, Using a level shifter would give you the appropriate voltage needed to operate the LCD without damaging it. Specifications: 3.5-inch color screen,support 65K color display,display rich colors Touch: Resistive Display Size: 3.5 inch Operating Voltage (V): 3.3 to 5V SPI Signal Voltage (V): 3.3 to 5V Display Driver IC: ILI9488 Touch Driver IC: Color Depth: 262K/65K Resolution (pixels): 320 x 480 Using the SPI serial bus, it only takes a few IOs to illuminate the display Easy to expand the experiment with SD card slot DATA SHEET Download 3.5 inch TFT LCD SPI Module Manual Download Installing the library To install the library navigate to the Sketch > Include Library > Manage Libraries… Wait for Library Manager to download libraries index and update list of installed libraries. Download TFT Library , we need to use this library for TFT touch display Download DHT Library , we need to use this library for Temperature sensor. In your Arduino IDE, to install the libraries go to Sketch > Include Library > Add .ZIP library… and select the library you’ve just downloaded. After Arduino IDE installed, there is no package to support ESP32-S2, we need to install the ESP32 package in Arduino IDE to continue. Select “File>Preferences>settings>Additional Boards Manager URLs” to fill the link: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json arduino code Subscribe and Download code #define RED2RED 0 #define GREEN2GREEN 1 #define BLUE2BLUE 2 #define BLUE2RED 3 #define GREEN2RED 4 #define RED2GREEN 5 #define TFT_GREY 0x2104 // Dark grey 16 bit colour #include // Hardware-specific library #include TFT_eSPI tft = TFT_eSPI(); // Invoke custom library with default width and height uint32_t runTime = -99999; // time for next update int reading = 0; // Value to be displayed int reading2 = 0; // Value to be displayed int d = 0; // Variable used for the sinewave test waveform bool range_error = 0; int8_t ramp = 1; #include const char* ssid = "TP-Link_3200"; // Your ssid const char* password = "95001121379884265554"; // Your Password char status; WiFiServer server(80); #include #define DHT_SENSOR_PIN 12 // ESP32 pin connected to DHT11 sensor #define DHT_SENSOR_TYPE DHT11 DHT dht_sensor(DHT_SENSOR_PIN, DHT_SENSOR_TYPE); void setup(void) { tft.begin(); Serial.begin(9600); dht_sensor.begin(); // initialize the DHT sensor tft.setRotation(1); tft.fillScreen(TFT_WHITE); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi is connected"); server.begin(); Serial.println("Server started"); Serial.println(WiFi.localIP()); delay(5000); } void loop() { if (millis() - runTime >= 0L) { // Execute every TBD ms runTime = millis(); // Test with a slowly changing value from a Sine function //d += 4; if (d >= 360) d = 0; // Set the the position, gap between meters, and inner radius of the meters int xpos = 0, ypos = 5, gap = 4, radius = 52; // Draw meter and get back x position of next meter // Test with Sine wave function, normally reading will be from a sensor //reading = 250 + 250 * sineWave(d+0); //xpos = gap + ringMeter(reading, 0, 500, xpos, ypos, radius, "mA", GREEN2RED); // Draw analogue meter //reading = 20 + 30 * sineWave(d+60); //xpos = gap + ringMeter(reading, -10, 50, xpos, ypos, radius, "degC", BLUE2RED); // Draw analogue meter //reading = 50 + 50 * sineWave(d + 120); //ringMeter(reading, 0, 100, xpos, ypos, radius, "%RH", BLUE2BLUE); // Draw analogue meter // Draw two more larger meters //xpos = 20, ypos = 115, gap = 24, radius = 64; //reading = 1000 + 150 * sineWave(d + 90); //xpos = gap + ringMeter(reading, 850, 1150, xpos, ypos, radius, "mb", BLUE2RED); // Draw analogue meter //reading = 15 + 15 * sineWave(d + 150); //xpos = gap + ringMeter(reading, 0, 30, xpos, ypos, radius, "Volts", GREEN2GREEN); // Draw analogue meter // read humidity float humi = dht_sensor.readHumidity(); // read temperature in Celsius float tempC = dht_sensor.readTemperature(); // read temperature in Fahrenheit float tempF = dht_sensor.readTemperature(true); // check whether the reading is successful or not if ( isnan(tempC) || isnan(tempF) || isnan(humi)) { Serial.println("Failed to read from DHT sensor!"); } else { Serial.print("Humidity: "); Serial.print(humi); Serial.print("%"); Serial.print(" | "); Serial.print("Temperature: "); Serial.print(tempC); Serial.print("°C ~ "); Serial.print(tempF); Serial.println("°F"); } // Draw a large meter xpos = 20, ypos = 30, gap = 2, radius = 100; // reading +=(ramp); // if (reading>98) ramp = -1; // if (reading<0) ramp = 1; reading = tempC; // Comment out above meters, then uncomment the next line to show large meter ringMeter(reading,0,100, xpos,ypos,radius,"°C",GREEN2GREEN); // Draw analogue meter if (reading<0) delay(500); tft.setCursor(10, 250, 4); // Set the font colour to be white with a black background, set text size multiplier to 1 tft.setTextColor(TFT_BLACK,TFT_WHITE); tft.setTextSize(1); // We can now plot text on screen using the "print" class tft.drawString("`", 101, 186, 4); // prints ° tft.print("Temperature:"); tft.print(tempC); tft.print(" "); // Draw a large meter xpos = 245, ypos = 30, gap = 2, radius = 100; // reading +=(ramp); // if (reading>98) ramp = -1; // if (reading<0) ramp = 1; reading2 = humi; // Comment out above meters, then uncomment the next line to show large meter ringMeter2(reading2,0,100, xpos,ypos,radius," %h",RED2RED); // Draw analogue meter if (reading2<0) delay(500); tft.setCursor(265, 250, 4); // Set the font colour to be white with a black background, set text size multiplier to 1 tft.setTextColor(TFT_BLACK,TFT_WHITE); tft.setTextSize(1); // We can now plot text on screen using the "print" class // tft.drawString("`", 101, 186, 4); // prints ° tft.print("Humidity:"); tft.print(humi); tft.print(" "); } // read humidity float humi = dht_sensor.readHumidity(); // read temperature in Celsius float tempC = dht_sensor.readTemperature(); WiFiClient client = server.available(); client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); // the connection will be closed after completion of the response client.println("Refresh: 10"); // update the page after 10 sec client.println(); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println(""); client.println("ESP32 Based Temperature & Humidity Data"); client.println(""); client.println("Temperature:"); client.println(""); client.print(tempC); client.println("&degC"); client.println(""); client.println(""); client.println("Humidity:"); client.println(""); client.print(humi); client.println("%"); client.println(""); client.println(""); client.println(""); client.println(""); } // ######################################################################### // Draw the meter on the screen, returns x coord of righthand side // ######################################################################### int ringMeter(int value, int vmin, int vmax, int x, int y, int r, const char *units, byte scheme) { // Minimum value of r is about 52 before value text intrudes on ring // drawing the text first is an option x += r; y += r; // Calculate coords of centre of ring int w = r / 3; // Width of outer ring is 1/4 of radius int angle = 150; // Half the sweep angle of meter (300 degrees) int v = map(value, vmin, vmax, -angle, angle); // Map the value to an angle v //int v = map(value, vmin, vmax, -angle, angle); // Map the value to an angle v byte seg = 3; // Segments are 3 degrees wide = 100 segments for 300 degrees byte inc = 3; // Draw segments every 3 degrees, increase to 6 for segmented ring // Variable to save "value" text colour from scheme and set default int colour = TFT_BLACK; // Draw colour blocks every inc degrees for (int i = -angle+inc/2; i < angle-inc/2; i += inc) { // Calculate pair of coordinates for segment start float sx = cos((i - 90) * 0.0174532925); float sy = sin((i - 90) * 0.0174532925); uint16_t x0 = sx * (r - w) + x; uint16_t y0 = sy * (r - w) + y; uint16_t x1 = sx * r + x; uint16_t y1 = sy * r + y; // Calculate pair of coordinates for segment end float sx2 = cos((i + seg - 90) * 0.0174532925); float sy2 = sin((i + seg - 90) * 0.0174532925); int x2 = sx2 * (r - w) + x; int y2 = sy2 * (r - w) + y; int x3 = sx2 * r + x; int y3 = sy2 * r + y; if (i < v) { // Fill in coloured segments with 2 triangles switch (scheme) { case 0: colour = TFT_RED; break; // Fixed colour case 1: colour = TFT_GREEN; break; // Fixed colour case 2: colour = TFT_BLUE; break; // Fixed colour default: colour = TFT_YELLOW; break; // Fixed colour } tft.fillTriangle(x0, y0, x1, y1, x2, y2, colour); tft.fillTriangle(x1, y1, x2, y2, x3, y3, colour); //text_colour = colour; // Save the last colour drawn } else // Fill in blank segments { tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_GREY); tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_GREY); } } // Convert value to a string char buf[10]; byte len = 3; if (value > 999) len = 5; dtostrf(value, len, 0, buf); buf[len] = ' '; buf[len+1] = 0; // Add blanking space and terminator, helps to centre text too! // Set the text colour to default tft.setTextSize(1); tft.setTextColor(TFT_WHITE, TFT_BLACK); // Uncomment next line to set the text colour to the last segment value! tft.setTextColor(colour, TFT_WHITE); tft.setTextDatum(MC_DATUM); // Print value, if the meter is large then use big font 8, othewise use 4 if (r > 84) { tft.setTextPadding(25*3); // Allow for 3 digits each 55 pixels wide tft.drawString(buf, x, y, 6); // Value in middle } else { tft.setTextPadding(3 * 7); // Allow for 3 digits each 14 pixels wide tft.drawString(buf, x, y, 6); // Value in middle } tft.setTextSize(1); tft.setTextPadding(0); // Print units, if the meter is large then use big font 4, othewise use 2 tft.setTextColor(TFT_BLACK,TFT_WHITE); if (r > 84) tft.drawString(units, x, y + 60, 4); // Units display else tft.drawString(units, x, y + 15, 2); // Units display // Calculate and return right hand side x coordinate return x + r; } // ######################################################################### // Draw the meter on the screen, returns x coord of righthand side // ######################################################################### int ringMeter2(int value, int vmin, int vmax, int x, int y, int r, const char *units, byte scheme) { // Minimum value of r is about 52 before value text intrudes on ring // drawing the text first is an option x += r; y += r; // Calculate coords of centre of ring int w = r / 3; // Width of outer ring is 1/4 of radius int angle = 150; // Half the sweep angle of meter (300 degrees) int v = map(value, vmin, vmax, -angle, angle); // Map the value to an angle v //int v = map(value, vmin, vmax, -angle, angle); // Map the value to an angle v byte seg = 3; // Segments are 3 degrees wide = 100 segments for 300 degrees byte inc = 3; // Draw segments every 3 degrees, increase to 6 for segmented ring // Variable to save "value" text colour from scheme and set default int colour = TFT_BLACK; // Draw colour blocks every inc degrees for (int i = -angle+inc/2; i < angle-inc/2; i += inc) { // Calculate pair of coordinates for segment start float sx = cos((i - 90) * 0.0174532925); float sy = sin((i - 90) * 0.0174532925); uint16_t x0 = sx * (r - w) + x; uint16_t y0 = sy * (r - w) + y; uint16_t x1 = sx * r + x; uint16_t y1 = sy * r + y; // Calculate pair of coordinates for segment end float sx2 = cos((i + seg - 90) * 0.0174532925); float sy2 = sin((i + seg - 90) * 0.0174532925); int x2 = sx2 * (r - w) + x; int y2 = sy2 * (r - w) + y; int x3 = sx2 * r + x; int y3 = sy2 * r + y; if (i < v) { // Fill in coloured segments with 2 triangles switch (scheme) { case 0: colour = TFT_RED; break; // Fixed colour case 1: colour = TFT_GREEN; break; // Fixed colour case 2: colour = TFT_BLUE; break; // Fixed colour default: colour = TFT_YELLOW; break; // Fixed colour } tft.fillTriangle(x0, y0, x1, y1, x2, y2, colour); tft.fillTriangle(x1, y1, x2, y2, x3, y3, colour); //text_colour = colour; // Save the last colour drawn } else // Fill in blank segments { tft.fillTriangle(x0, y0, x1, y1, x2, y2, TFT_GREY); tft.fillTriangle(x1, y1, x2, y2, x3, y3, TFT_GREY); } } // Convert value to a string char buf[10]; byte len = 3; if (value > 999) len = 5; dtostrf(value, len, 0, buf); buf[len] = ' '; buf[len+1] = 0; // Add blanking space and terminator, helps to centre text too! // Set the text colour to default tft.setTextSize(1); tft.setTextColor(TFT_BLACK,TFT_WHITE); // Uncomment next line to set the text colour to the last segment value! tft.setTextColor(colour, TFT_WHITE); tft.setTextDatum(MC_DATUM); // Print value, if the meter is large then use big font 8, othewise use 4 if (r > 84) { tft.setTextPadding(25*3); // Allow for 3 digits each 55 pixels wide tft.drawString(buf, x, y, 6); // Value in middle } else { tft.setTextPadding(3 * 7); // Allow for 3 digits each 14 pixels wide tft.drawString(buf, x, y, 6); // Value in middle } tft.setTextSize(1); tft.setTextPadding(0); // Print units, if the meter is large then use big font 4, othewise use 2 tft.setTextColor(TFT_BLACK,TFT_WHITE); if (r > 84) tft.drawString(units, x, y + 60, 4); // Units display else tft.drawString(units, x, y + 15, 2); // Units display // Calculate and return right hand side x coordinate return x + r; } // ######################################################################### // Return a value in range -1 to +1 for a given phase angle in degrees // ######################################################################### float sineWave(int phase) { return sin(phase * 0.0174532925); } //==================================================================================== // This is the function to draw the icon stored as an array in program memory (FLASH) //==================================================================================== // To speed up rendering we use a 64 pixel buffer #define BUFF_SIZE 64 // Draw array "icon" of defined width and height at coordinate x,y // Maximum icon size is 255x255 pixels to avoid integer overflow void drawIcon(const unsigned short* icon, int16_t x, int16_t y, int8_t width, int8_t height) { uint16_t pix_buffer[BUFF_SIZE]; // Pixel buffer (16 bits per pixel) tft.startWrite(); // Set up a window the right size to stream pixels into tft.setAddrWindow(x, y, width, height); // Work out the number whole buffers to send uint16_t nb = ((uint16_t)height * width) / BUFF_SIZE; // Fill and send "nb" buffers to TFT for (int i = 0; i < nb; i++) { for (int j = 0; j < BUFF_SIZE; j++) { pix_buffer[j] = pgm_read_word(&icon[i * BUFF_SIZE + j]); } tft.pushColors(pix_buffer, BUFF_SIZE); } // Work out number of pixels not yet sent uint16_t np = ((uint16_t)height * width) % BUFF_SIZE; // Send any partial buffer left over if (np) { for (int i = 0; i < np; i++) pix_buffer[i] = pgm_read_word(&icon[nb * BUFF_SIZE + i]); tft.pushColors(pix_buffer, np); } tft.endWrite(); } Subscribe and Download code After a successful upload, open the Serial Monitor at a baud rate of 9600. Press the “EN/RST” button on the ESP32 board and see the IP address in serial monitor. After that Open the web browser and enter the IP address path for DHT11 Weather data. Demo: Subscribe and Download code

Contact: admin@dofbot.com Project code and Price Projects completion time taken 10days. 20% Discount on store takeaway for all project kit Project Design and Development Click Here Shop Now All project kits are Additional 20% discount on buy from store takeaway Quick View IoT Project Design Price ₹25.000,00 Add to Cart Quick View Bluetooth Controlled Home Automation with Voice Announcement using Android App Price ₹50,00 Add to Cart Quick View Arduino based gesture Home Automation using APDS-9960 Price ₹50,00 Add to Cart Quick View IoT Cloud Web server Based Garbage Monitoring System Price ₹250,00 Add to Cart Quick View IoT Project Design Price ₹25.000,00 Add to Cart Quick View Bluetooth Controlled Home Automation with Voice Announcement using Android App Price ₹50,00 Add to Cart Quick View Arduino based gesture Home Automation using APDS-9960 Price ₹50,00 Add to Cart Quick View IoT Cloud Web server Based Garbage Monitoring System Price ₹250,00 Add to Cart FINAL YEAR Project Kit ARDUINO Project Kit Quick View Arduino based gesture Home Automation using APDS-9960 Price ₹50.00 Add to Cart Quick View Arduino Based Fire alarm using dot matrix display Price 50,00₹ Add to Cart Quick View Arduino Based Line Follower Bot using IR (obstacle sensor) Price 50,00₹ Add to Cart Quick View Arduino Controlled Motion Camera using PIR Sensor Price 50,00₹ Add to Cart Quick View Arduino based gesture Home Automation using APDS-9960 Price ₹50.00 Add to Cart Quick View Arduino Based Fire alarm using dot matrix display Price 50,00₹ Add to Cart Quick View Arduino Based Line Follower Bot using IR (obstacle sensor) Price 50,00₹ Add to Cart Quick View Arduino Controlled Motion Camera using PIR Sensor Price 50,00₹ Add to Cart NODEMCU Project Kit Quick View Visitor Counter with Automatic light Control using IR sensor Price 100,00₹ Add to Cart Quick View Node MCU based COVID-19 INDIA Live tracker Price 50,00₹ Add to Cart Quick View NodeMCU Based Weather Forecast Using Open Weather API Price 100,00₹ Add to Cart Quick View NodeMCU Based WORLD CLOCK Price 100,00₹ Add to Cart Quick View Visitor Counter with Automatic light Control using IR sensor Price 100,00₹ Add to Cart Quick View Node MCU based COVID-19 INDIA Live tracker Price 50,00₹ Add to Cart Quick View NodeMCU Based Weather Forecast Using Open Weather API Price 100,00₹ Add to Cart Quick View NodeMCU Based WORLD CLOCK Price 100,00₹ Add to Cart Quick View Visitor Counter with Automatic light Control using IR sensor Price 100,00₹ Add to Cart IOT CLOUD Project Kit Quick View IoT Cloud Web Server Based Vibration Monitor and Email Notification Price ₹250.00 Add to Cart new! Quick View Iot Cloud Based Garbage Waste Monitoring (Webserver & Thingspeak) Regular Price ₹12,500.00 Sale Price ₹5,900.00 Add to Cart Quick View IoT Cloud Web server Based Garbage Monitoring System Price ₹250.00 Add to Cart Quick View IoT Cloud and Web Server Based Water Level Controller Price ₹250.00 Add to Cart Quick View IoT Cloud Web Server Based Vibration Monitor and Email Notification Price ₹250.00 Add to Cart new! Quick View Iot Cloud Based Garbage Waste Monitoring (Webserver & Thingspeak) Regular Price ₹12,500.00 Sale Price ₹5,900.00 Add to Cart Quick View IoT Cloud Web server Based Garbage Monitoring System Price ₹250.00 Add to Cart Quick View IoT Cloud and Web Server Based Water Level Controller Price ₹250.00 Add to Cart Quick View IoT Cloud Web Server Based Vibration Monitor and Email Notification Price ₹250.00 Add to Cart new! Quick View Iot Cloud Based Garbage Waste Monitoring (Webserver & Thingspeak) Regular Price ₹12,500.00 Sale Price ₹5,900.00 Add to Cart

No plans available Once there are plans available for purchase, you’ll see them here. Back to Home Page