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

This tutorial is for How to customize the 8x8 dot LED display and scrolling text on the MAX7219 Matrix display using a custom webpage. Components Required Node MCU ESP8266 Development Board - 1 no MAX7219 8×8 Dot Matrix module - 1 Circuit Diagram Max7219 Single Display This is Dot Led Matrix Module incorporating MAX7219 Driver chip. By using this dot LED module in your upcoming project, you will be able to add some great cool animation. The individual module features 8×8 LED’s, each controlled very precisely by the MAX7219 driver to generate the color pattern you wish. The great advantage of using this is users will have control over all of the 64 LED by just connecting 3 output communication wires to microcontrollers like Arduino etc. Connecting the two modules is also very easy. Only connect the output pins of the previous breakout board to the input pins of the new module, thus with such arrangement, you can connect as many DOT LED Modules to the Arduino as you wish!!! Great…… The MAX7219 Dot Led Matrix Module is a serial input common-cathode driver that interfaces micro-controllers to LED matrices. All common micro-controllers can be connected to this module by using a 4-wire serial interface. Each output can be addressed without refreshing the entire display. This module requires only 3 I/O lines for driving the display, making it ideal for your microcontroller projects. Only one external register is used to set the segment current of each LED. Input Voltage: 3.7 to 5.3 V Input Current: 320 mA Pin Connection from Dot LED Module to the ESP8266 Vcc – 5V GND – GND DIN – Pin 14 CS – Pin 5 CLK – Pin 4 Features Requires only 3 communication wires of MCU Cascading multiple Matrix LED Module is very easy 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 Led Control_Library , we need to use this library for Max7219 Matrix display Download WIFI manager , we need to use this library for wifi configuration. 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 installing the required libraries, copy the following code to your Arduino IDE. You need to webpage.h Download and fonts.h Download Subscribe and Download code arduino code #include #include //needed for wifimanager library #include //needed for wifimanager library #include //https://github.com/tzapu/WiFiManager const char *ssid = "TP-Link_3200", *password = "95001121379884265554"; #include #include ESP8266WebServer server(80); #include "webpage.h" boolean showSaved = true; #include "fonts.h" #include int DIN = 14; // D5 OF NODEMCU int CS = 5; // D1 '' int CLK = 4; // D2 '' LedControl lc = LedControl(DIN, CLK, CS, 0); String last_matrix = "0000000000000000000000000000000000000000000000000000000000000000"; #include int eeprom_addr = 0; void setup() { Serial.begin(115200); Serial.println(); Serial.println("LED MATRIX web server"); EEPROM.begin(512); lc.shutdown(0, false); //The MAX72XX is in power-saving mode on startup // lc.setScanLimit(0, 8); // necessary?? lc.setIntensity(0, 3); // Set the brightness to maximum value 0-15 lc.clearDisplay(0); // and clear the display displaySaved(); // display last saved matrix pinMode(LED_BUILTIN, OUTPUT); // blink onboard LED for (int i = 0; i < 10; i++) { digitalWrite(LED_BUILTIN, LOW); delay(100); digitalWrite(LED_BUILTIN, HIGH); delay(100); } Serial.println("configure wifi manager..."); WiFiManager wifiManager; // wifiManager.resetSettings(); // known networks are saved so need to reset for testing wifiManager.autoConnect("matrix"); digitalWrite(LED_BUILTIN, LOW); // inverted pin - LOW is on Serial.println("connected to wifi!"); server.on("/", handleRoot); server.begin(); Serial.print("HTTP server started on "); Serial.println(WiFi.localIP()); scrollText("Dofbot AI Shop IP:" + WiFi.localIP().toString(), 50); displaySaved(); // display last saved matrix delay(2000); } void loop() { server.handleClient(); } void printByte(const byte character []) { int i = 0; for (i = 0; i < 8; i++) { lc.setRow(0, i, character[i]); } } void printInt(int character []) { int i = 0; for (i = 0; i < 8; i++) { lc.setRow(0, i, character[i]); } } void printFont(const byte character[] ) { int i = 0; for (i = 0; i < 8; i++) { lc.setRow(0, i, flipByte(character [i])); } } byte flipByte(byte c) { char r = 0; for (byte i = 0; i < 8; i++) { r <<= 1; r |= c & 1; c >>= 1; } return r; } void handleRoot() { server.send(200, "text/html", webpage_html); String data = server.arg(0); if (server.argName(0) == "matrix") { displayMatrix(data); last_matrix = data; Serial.println("received data and updated the matrix"); showSaved = false; } if (server.argName(0) == "intensity") { lc.setIntensity(0, data.toInt()); // Set the brightness to maximum value 0-15 Serial.print("updated intensity to "); Serial.println(data); } if (server.argName(0) == "text") { Serial.println("scrolling text: " + data); int d = map(server.arg(1).toInt(), 1, 10, 200, 20); scrollText(data, d); displayMatrix(last_matrix); } if (server.argName(0) == "save") { Serial.println("saving matrix"); for (int u = 0; u < 8; u++) { // for every row, construct 1 byte byte row = 0; for (int i = 0; i < 8; i++) { bitWrite(row, 7 - i, last_matrix.charAt(8 * u + i) - 48); } // Serial.println(row); EEPROM.write(eeprom_addr + u, row); } EEPROM.commit(); } if (server.argName(0) == "load") { Serial.println("loading matrix"); displaySaved(); showSaved = true; } } void displayMatrix(String t) { for (int i = 0; i < 64; i++) { lc.setLed(0, i / 8, i % 8, t.charAt(i) - 48); } } void displaySaved() { last_matrix = ""; byte a[8]; for (int u = 0; u < 8; u++) { a[u] = EEPROM.read(eeprom_addr + u); for (int i = 0; i < 8; i++) { last_matrix += bitRead(a[u], 7 - i); } } printByte(a); } void scrollText(String t, int s) { // text and speed int l = t.length() + 1; // store length t = " " + t + " "; // add space before and after for (int i = 0; i <= l * 8; i++) { // index of moving window over 2 chars int this_frame[8] = {0, 0, 0, 0, 0, 0, 0, 0}; // define as int holding 2 chars (2x byte) for (int u = 0; u < 8; u++) { // for each row int left = (int) flipByte(font[t.charAt(i / 8)] [u]); // left char int right = (int) flipByte(font[t.charAt(i / 8 + 1)] [u]); // right char this_frame[u] = (left << 8) | right; // combine chars to 16 bits this_frame[u] = this_frame[u] << i % 8; // move window to very left this_frame[u] = this_frame[u] >> 8; // move result to very right this_frame[u] = this_frame[u] & 0x00FF; // mask result to byte on right } printInt(this_frame); delay(s); } } void printDigits(int digits) { Serial.print(":"); if (digits < 10) Serial.print('0'); Serial.print(digits); } Subscribe and Download code After a successful upload, open the Serial Monitor at a baud rate of 152000. Press the “EN/RST” button on the ESP8266 board Demo: Subscribe and Download code

In this tutorial to learn the Arduino based Home Automation will enable the user to use a Home Automation System based on Bluetooth Connectivity. The user commands over Android Mobile will be obtained by Mobile Bluetooth. The Microcontroller has an interface with this Bluetooth. The system status is displayed through the LCD display, along with the voice. Bluetooth Home Automation system, for controlling all your electrical appliances by using Android application. The system works only with associated anroid app. Circuit Diagram Components Required 1) Arduino Uno R3 2) Bluetooth HC-05 3) 4 channel Relay module 4) Speaker 5) DFPlayer 6)Memory card 16gb- 1 no 7)Push button - 3 nos 8)Resistor 1k - 1 no Refer blog for more details: https://www.dofbot.com/post/arduino-based-mp3-player-using-df-player-mini DFPlayer Mini The DFPlayer Mini MP3 Player For Arduino is a small and low price MP3 module with an simplified output directly to the speaker. The module can be used as a stand alone module with attached battery, speaker and push buttons or used in combination with an Arduino UNO or any other with RX/TX capabilities. Installing 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. DFRobotDFPlayerMini.h : you need to Download and install the DFPlayer library. LiquidCrystal_I2C.h : you need to Download and install the LCD display library. After installing the required libraries, copy the following code to your Arduino IDE. Subscribe Demo Download Android app: https://drive.google.com/file/d/1i-m1AoQHRarkoygGHmCFvb2VEVlIlSUo/view?usp=sharing

In this tutorial to learn the Arduino UNO Rev 3 based Gesture Home Automation using APDS 9960, will enable the user to use a Home Automation System using by hand for gesture. The gesture sensor sense the hand direction for Right to Left, Left to Right, Up to Down, Down to Up, Near to Rar, Far to Near. Arduino has an interface with APDS-9960 and 4 channel relay, These gesture commands to control the relay. The relay for controlling LED light by using HAND GESTURE. The output status is displayed through the LCD display. Circuit diagram Components Required Arduino Uno - 1 no APDS-9960 Gesture sensor- 1no APDS9960 sensor The APDS9960 sensor is a multi function sensor widely used in smart phones to provide a number of functions. The first use is recognition of swiping gestures as up, down, left or right depending on the movement of a user’s finger over the screen. This sensor also provides proximity sensing which is used to detect when the phone is placed near the ear thereby disabling the touchscreen while attending to a call. The ambient light and RGB color detection feature is used to adjust the brightness and color balance of the phone’s backlight depending on lighting conditions. There are six header pin connections namely; VL – This an optional power supply for the IR LED. It is used when the PS jumper is removed and should have a voltage of 3.0 – 4.5V DC. GND – Connection to ground of a microcontroller. VCC – Power supply connected to 3.3V of the microcontroller. SDA – I2C Data line. SCL – I2C Clock line. INT – Interrupt output active LOW. Output is open-collector so requires pull-up resistor and is connected to an interrupt input of a microcontroller when used. The breakout board also has two solder jumper pads. PS – This solder jumper comes closed by default and is used to connect the power supplies of the sensor and IR LED together therefore you only need to supply power to the VCC pin. However, if the jumper is open, you have to provide separate power supplies for VCC (2.4 – 3.6V) and VL (3.0 – 4.5V). I2C PU – This is a 3-way solder jumper used to connect the I2C 10K pull-up resistors to the SDA and SCL line on the board circuits. The jumper is also closed by default but in case you want to use external pull-up resistors then you can open it. APDS-9960 module Datasheet Installing 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. Arduino_APDS9960.h : you need to Download and install the Gesture library. LiquidCrystal_I2C.h : you need to Download and install the LCD display library. After installing the required libraries, copy the following code to your Arduino IDE. Subscribe Demo

In this tutorial, ESP8266 12E V1 board which is based on the ESP8266 Wifi module to get data from the worldometers.info/coronavirus/country/india/ via ThingSpeak API using thingHTTP. We used an 0.96" OLED display for making a dashboard for all the real time data are “Corona Virus” Image in Frame 1 “Covid-19 india” Text in Frame 2 “Cases” which had an outcome in Frame 3 ‘Deaths” which had an outcome in Frame 4 ‘Recovered “ Dischared cases which had an outcome in Frame 5 “Text” Text in Frame 6 Circuit Diagram Components Required 0.96 OLED 4wire Module - 1no Node MCU ESP8266 12E Dev Module- 1 no Installing 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 SSD1306Wire.h Library , we need to use this library for SSD1306 OLED display After installing the required libraries, copy the following code to your Arduino IDE. Demo: Subscribe

In this tutorial, I 'll Published how to controlling Water level using web server over WiFi using Node MCU, Ultrasonic, OLED display and multiple web pages. In this project Automatic and semi manual mode water level controller through assigned web page and Level graphical display using fusion charts and level graph using high charts in separate web pages is advantage of the project. Components Required To make this project you need the following components: Node MCU ESP8266 Development Board - 1 no HC-SR04 Ultrasonic sensor - 1 no 0.96 OLED Display 4wire Module - 1 no 3.3V single Channel Relay Module - 1 no 4k7 Resistor - 1 no Push Button - 1 no Jumper wires Circuit Diagram Ultrasonic: The HC-SR04 ultrasonic module is a module that can provide non-contact measurement within the range of 2cm to 400cm with ranging accuracy that can reach 3mm. It works on the principle of echolocation. The ultrasonic sensor as a trigger and an echo pin. The arduino provides a high signal of 10microseconds to this pin. After the HC-SR04 is triggered, it sends out eight 40Khz sound waves to the surface of the water. On getting to the surface of the water, the wave is echoed back to the sensor and the ESP8266 reads the echo pin to determine time spent between triggering and receiving of the echo. Since we know that the speed of sound is around 340m/s then we can calculate the distance using; Distance = (time/2)*speed of sound. Flat Slider Here's a nice example of a modern, flat style slider using pips. There are no labels so this kind of slider would be purely visual without much help to the user for knowing their real chosen value. In this example we make use of the .ui-slider-pip-inrange class to create the nice "filled in" effect on the pips. https://simeydotme.github.io/jQuery-ui-Slider-Pips/ The default way to use the plugin is to call the pips method on an initialized slider. This will add the markers along the slider, and place the min/max values to the beginning/end of the slider: In this Project jQuery UI Slider Pips added in the Web page to adjust the Value between two points 0 to 100. 1st Point for water Level Lower Threshold value adjustment slider to Control Motor ON. 2nd Point for water Level Higher Threshold value adjustment slider to Control Motor OFF. Fusion Charts Fusion Charts helps you build beautiful dashboards for your web & mobile projects. With extensive documentation, cross-browser support, and a consistent API, it is easier than ever to add interactive and responsive charts. From simple charts like line, column, and pie to domain-specific charts like heat maps, radar, and stock chart Cylinder Fill The cylinder gauge is represented by a vertical cylinder, whose fill level is defined by the data value you plot. You can use it to report inventory levels, fuel levels, etc. The cylinder gauge is a real-time chart, which can update its data after intervals you specify, without any page refreshes. What makes a cylinder gauge different from other gauges is that this gauge can only be rendered with one fill color. You cannot create a cylinder gauge with color ranges. The cylinder is the main component in a cylinder chart. You can understand the value being illustrated by looking at the percentage of cylinder filled. Use the following attributes to create a simple cylinder gauge: Specify the type using the type attribute. To render Cylinder gauge, set cylinder. Set the container object using renderAt attribute. Specify the dimension of the chart using width and height attributes. Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute. Use the lowerLimit attribute to specify the lower limit, or the minimum value, of the gauge scale. Use the upperLimit attribute to specify the upper limit, or the maximum value, of the gauge scale. Use the lowerLimitDisplay attribute to specify the label to be displayed with the lower limit value on the gauge scale. Use the upperLimitDisplay attribute to specify the label to be displayed with the upper limit value on the gauge scale. Use the numberSuffix attribute to specify the character(s) to be appended to the end of a number. https://www.fusioncharts.com/dev/chart-guide/gauges-and-widgets/cylinder-gauge Bulp Gauge Bulb gauge is used to indicate a specific dataset by utilizing a circle that indicates whether the monitored data is within defined limits, and if it is, then which limit does it belong to. Colors for the bulb can be selected to suit the application such as green for satisfactory, yellow for caution, and red for alarm. https://www.fusioncharts.com/dev/chart-guide/gauges-and-widgets/bulb-gauge High Charts High Charts make it easy for developers to create charts for web and mobile platforms. For Javascript, Angular, React, VueJS, iOS, R, .NET, Python, and more. Line Charts The line chart is represented by a series of data points connected with a spline. Line charts are most often used to visualize data that changes over time. Subscribe Arduino Code #include #include #include #include "index.h"; #include #include #include #include #include #include #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels #define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin) #define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32 Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); #include int addr = 0; int distance; #define buttonPin D0 int buttonState = 0; float TankHeight; int Motor_Pinvalue; const int Motor_Pin = D7; String data; String lowset; String highset; UltraSonicDistanceSensor distanceSensor(D5,D6); //D5 trig, D6=echo int waterLevelLowerThreshold=20; int waterLevelUpperThreshold=75; float liters = 0; int waterLevelDownCount=0,waterLevelUpCount=0; WiFiClient client; ESP8266WebServer server(80); void handleRoot() { String s = MAIN_page; //Read HTML contents server.send(200, "text/html", s); //Send web page } void handleLevelRequest(){ server.send(200,"text",String(liters)); } void handleDistanceRequest(){ server.send(200,"text",String(distanceSensor.measureDistanceCm())); } void handleNotFound(){ String message = "File Not Found\n\n"; server.send(404, "text/plain", message); } void handleStatus(){ Serial.print("Motor:"); Serial.print(digitalRead(Motor_Pin));//MOTOR Off/On server.send(200,"text",String(digitalRead(Motor_Pin))); } void handleRangeSetting(){ waterLevelLowerThreshold=(server.arg(0)).toInt(); waterLevelUpperThreshold=(server.arg(1)).toInt(); Serial.print("Low Level "); Serial.print(waterLevelLowerThreshold); Serial.print(":"); Serial.print("High Level "); Serial.println(waterLevelUpperThreshold); server.send(200, "text/plain", "range"); } void measure_Volume() { distance = distanceSensor.measureDistanceCm(); // volume=(MAX_HEIGHT-heightInch)/28;//MAX_HEIGHT-distance will give actual height, liters = ((1-(distance/TankHeight))*100); Serial.println("Level:"); Serial.println(liters); if(liters<=waterLevelLowerThreshold) waterLevelDownCount++; else waterLevelDownCount=0; if(liters>=waterLevelUpperThreshold) waterLevelUpCount++; else waterLevelUpCount=0; if(waterLevelDownCount==3) {//TURN ON RELAY Serial.println("motor turned on"); digitalWrite(Motor_Pin,HIGH);//Relay is active LOW } if(waterLevelUpCount==3) {//TURN OFF RELAY Serial.println("motor turned off"); digitalWrite(Motor_Pin,LOW);//Relay is active LOW } } void handleMotor_Pinon() { digitalWrite(Motor_Pin,HIGH); //Motor_Pin is connected in reverse server.send(200, "text/html", "ON"); //Send ADC value only to client ajax request } void handleMotor_Pinoff() { digitalWrite(Motor_Pin,LOW); //Motor_Pin off server.send(200, "text/html", "OFF"); //Send ADC value only to client ajax request } void runPeriodicFunc() { static const unsigned long REFRESH_INTERVAL1 = 1000; // 2.1sec static unsigned long lastRefreshTime1 = 0; if(millis() - lastRefreshTime1 >= REFRESH_INTERVAL1) { measure_Volume(); handleDisplay(); lastRefreshTime1 = millis(); } } void setup(void){ Serial.begin(115200); delay(100); EEPROM.begin(512); pinMode(Motor_Pin, OUTPUT); // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) { Serial.println(F("SSD1306 allocation failed")); for(;;); // Don't proceed, loop forever } display.display(); //WiFi.begin(ssid, password); //Serial.println(""); WiFiManager wifiManager; wifiManager.autoConnect("Smart Level"); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.print("IP address:"); Serial.println(WiFi.localIP()); display.display(); display.setTextSize(2); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(0, 17); for (int i=0; i<=5; i++) { display.setCursor(0, 17); Serial.println("Press & Hold Button "); display.setCursor(0, 47); Serial.println(3-i); Serial.println(" Seconds "); delay(1000); buttonState = digitalRead(buttonPin); if (buttonState == LOW) // Button to GND connection { distance = distanceSensor.measureDistanceCm(); TankHeight = distance; EEPROM.write(addr, TankHeight); EEPROM.commit(); } delay(100); } { TankHeight= EEPROM.read(addr); display.clearDisplay(); display.display(); display.setTextSize(2); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(0, 1); Serial.println("Tank Height Scan"); Serial.println(" "); Serial.println(" cm ... "); Serial.print("TankHeight : "); Serial.println(TankHeight); delay(1000); display.setCursor(30, 1); Serial.println("Tank Height Cm:"); Serial.print("TankHeight : "); Serial.println(TankHeight); Serial.println("IP :"); Serial.println(WiFi.localIP()); } server.on("/", handleRoot); server.on("/level",handleLevelRequest); server.on("/distance",handleDistanceRequest); server.on("/configRange",handleRangeSetting); server.on("/motor_status",handleStatus); server.on("/Motor_PinOn", handleMotor_Pinon); server.on("/Motor_PinOff", handleMotor_Pinoff); server.on("/readdisplay",handleDisplay); server.onNotFound(handleNotFound); server.begin(); Serial.println("HTTP server started"); } void loop(void){ runPeriodicFunc(); server.handleClient(); } void handleDisplay() { // volume=(MAX_HEIGHT-heightInch)/28;//MAX_HEIGHT-distance will give actual height, display.clearDisplay(); display.setTextSize(1); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(2, 2); display.println("IP: "); display.setCursor(22,2); display.println(WiFi.localIP()); display.display(); display.setTextSize(3); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(0, 17); display.println(String(liters)); display.println(" "); display.display(); delay(100); if (digitalRead(Motor_Pin)>=1) { Serial.println("Pump Motor : ON "); } else { Serial.println("Pump Motor : OFF "); } Motor_Pinvalue = digitalRead(Motor_Pin); Serial.println(digitalRead(Motor_Pin)); display.setTextSize(1); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(0, 45); display.print("L: "); display.print(waterLevelLowerThreshold); display.display(); display.setTextSize(1); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(70, 45); display.print("H: "); display.print(waterLevelUpperThreshold); display.display(); if (digitalRead(Motor_Pin)==LOW){ display.setTextSize(1); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(0, 55); display.print("Pump OFF "); display.display();} else if (digitalRead(Motor_Pin)==HIGH){ display.setTextSize(1); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(0, 55); display.print("Pump ON"); display.display();} display.setTextSize(1); // Draw 2X-scale text display.setTextColor(SSD1306_WHITE); display.setCursor(70, 55); display.print(TankHeight); display.display(); String data = "{\"Height\":\""+String(TankHeight)+"\", \"TankLevel\":\""+ String(liters) +"\", \"LowLevelThreshold\":\""+ String(waterLevelLowerThreshold) +"\", \"HighLevelThreshold\":\""+ String(waterLevelUpperThreshold) +"\", \"Motorstatus\":\""+ (digitalRead(Motor_Pin)) +"\"}"; //Serial.println("data:"); // Serial.println(data); server.send(200, "text/plane", data); } Subscribe Then, upload the code to your NodeMCU board. Make sure you have selected the right board and COM port. Also, make sure you’ve configure your WiFi Credentials using mobile. After a successful upload, open the Serial Monitor at a baud rate of 115200. Press the “EN/RST” button on the ESP8266 board. Now it should print its IP address Pay and get index.h file, arduino code and library files. Demo: Subscribe

In this tutorial, we will explore to control the Pan & Tilt servo using ESP8266 web server angular slider. The servo position can vary from 0 to 180 degree and can be controlled through a Web Page slider. When this web page is accessed from a computer or mobile phone that is connected to the same WiFi Network as the ESP8266, you can control the position of the Servo Motor by adjusting the slider. Circuit Diagram Components Required ESP8266 12E Servo Motor SG90 or MG90S Pan tilt Servo Bracket Installing Library you need to add Servo.h and FS.h from library. After installing the required libraries, copy the following code to your Arduino IDE. Finally, to build the web server we need two different files. One is The Arduino sketch and the other is an HTML file. So, the HTML file should be saved inside a folder called data. It resides inside the Arduino sketch folder, as shown below: Create an index.html file with the following content. The index.html file will contain web pages that will be displayed by the server along with JavaScript that will process the formation of graphics. While all server programs and sensor readings are in the .ino file. arduino code #include #include #include //Include File System Headers #include const char* htmlfile = "/index.html"; // Replace with your network credentials const char* ssid = "TP-Link_3200"; // your SSID const char* password = "95001121379884265554"; // Your Wifi password #define ServoPin 5 //D1 #define Servo2Pin 4 //D2 int pos = 100; int pos2 = 100; Servo myservo; // create servo object to control a servo Servo myservo2; // create servo object to control a servo ESP8266WebServer server(80); void handlePOS(){ String POS = server.arg("ppos"); int pos = POS.toInt(); myservo.write(pos); // tell servo to go to position in variable 'pos' delay(15); Serial.println("Pan Servo:"); Serial.println(pos); server.send(200, "text/plane",""); } void handlePOS2(){ String POS2 = server.arg("tpos"); int pos2 = POS2.toInt(); myservo2.write(pos2); // tell servo to go to position in variable 'pos' delay(15); Serial.println("Tilt Servo:"); Serial.println(pos2); server.send(200, "text/plane",""); } void handleRoot(){ server.sendHeader("Location", "/index.html",true); //Redirect to our html web page server.send(302, "text/plane",""); } void handleWebRequests(){ if(loadFromSpiffs(server.uri())) return; String message = "File Not Detected\n\n"; message += "URI: "; message += server.uri(); message += "\nMethod: "; message += (server.method() == HTTP_GET)?"GET":"POST"; message += "\nArguments: "; message += server.args(); message += "\n"; for (uint8_t i=0; i

In this tutorial we will show how to build ESP8266 and interface LM35 Precision Centigrade Temperature sensor with html gauge, data plotter with logger. This project uses ESP8266 NodeMCU device that easily connects to existing WiFi network & creates a Web Server. When any connected device accesses this web server, ESP8266 reads in temperature from LM35 Temperature sensors & sends it to the web browser. In this project temperature range reads trimmed from 0°C to 100°C (Actual -55°C to 150°C). Here High chart is used to create reliable and secure data visualizations and data logger. You can export the data to CSV, EXCEL format and graph convert to PNG,JPEG,PDF format. Circuit Diagram Components Required NodeMCU ESP8266 12E Dev Board LM35 sensor Module LM35 Precision Centigrade Temperature Sensor The LM35 series are precision integrated-circuit temperature devices with an output voltage linearly proportional to the Centigrade temperature. The LM35 device has an advantage over linear temperature sensors calibrated in Kelvin, as the user is not required to subtract a large constant voltage from the output to obtain convenient Centigrade scaling. The LM35 device does not require any external calibration or trimming to provide typical accuracies of ±¼°C at room temperature and ±¾°C over a full −55°C to 150°C temperature range. Lower cost is assured by trimming and calibration at the wafer level. The low-output impedance, linear output, and precise inherent calibration of the LM35 device makes interfacing to readout or control circuitry especially easy. The device is used with single power supplies, or with plus and minus supplies. As the LM35 device draws only 60 μA from the supply, it has very low self-heating of less than 0.1°C in still air. The LM35 device is rated to operate over a −55°C to 150°C temperature range, while the LM35C device is rated for a −40°C to 110°C range (−10° with improved accuracy). The LM35-series devices are available packaged in hermetic TO transistor packages, while the LM35C, LM35CA, and LM35D devices are available in the plastic TO-92 transistor package. The LM35D device is available in an 8-lead surface-mount small-outline package and a plastic TO-220 package. Temperature Sensor Output Voltage Linearity LM35 (LM35DZ) proportional to temperature in Celsius (ºC)10mV/ºC LM335 proportional to temperature in Kelvin (ºK)10mV/ºK LM34 proportional to temperature in Fahrenheit (ºF)10mV/ºF In this project LM35DZ is used to measure temperature range from 0ºC to 100ºC. For example, if the LM35 outputs a voltage of 245 mV, that means we have a temperature value of 24.5ºC. For example2, if the LM35 outputs a voltage of 1000 mV (1V), that means we have a temperature value of 100ºC. NodeMCU NodeMCU ESP8266-12E MCU is a development board with one analogue and many general-purpose input output (GPIO) pins. It has 4MB flash memory, and can operate at a default clock frequency of 80MHz. In this project, analog pin A0 of NodeMCU is used to read analog signal of LM35 Precision Centigrade Temperature Sensor. Analog Reading ESP8266 ADC pins have 10-bit resolution by default. These pins read voltage between 0 and 3.3V and then return a value between 0 and 1023. ESP32 ADC pins have 12-bit resolution by default. These pins read voltage between 0 and 3.3V and then return a value between 0 and 4095 Arduino ADC pins have 10-bit resolution by default. These pins read voltage between 0 and 5V and then return a value between 0 and 1023. Installing 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. you need to Download and install the ESPAsyncWebServer library. Download and install the ESPAsyncTCP library. After installing the required libraries, copy the following code to your Arduino IDE. Finally, to build the web server we need two different files. One is The Arduino sketch and the other is an HTML file. So, the HTML file should be saved inside a folder called data. It resides inside the Arduino sketch folder, as shown below: Create an index.html file with the following content. Download The index.html file will contain web pages that will be displayed by the server along with JavaScript that will process the formation of graphics. While all server programs and sensor readings are in the .ino file. The code explains that a new Highcharts object was formed to be rendered to the tag with the chart-distance id in the HTML code. Then, the X-axis is defined as the time of reading the data, and the Y-axis is the value of the reading which is the Temperature in degree (°C). Then, the set Interval function will send data from the server every 0.5 seconds by accessing the “/DStempCt” endpoint provided by the server and sending the data to the chart object earlier. arduino code #include #include #include #include #include #include const int LM35 = A0; int input_val = 0; float temp = 0; // Replace with your network credentials const char* ssid = "TP-Link_3200"; // your SSID const char* password = "95001121379884265554"; // Your Wifi password // Create AsyncWebServer object on port 80 AsyncWebServer server(80); String getDStempC() { input_val = analogRead(LM35); temp = (3300 * input_val ) / 1024; Serial.print("Temperature is : " ); Serial.println(temp);; return String(temp); } void setup () { // Serial port for debugging purposes Serial.begin (115200); if (! SPIFFS.begin ()) { Serial.println ("An Error has occurred while mounting SPIFFS"); return; } // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi.."); } // Print connection information Serial.print("\nConnected to: "); Serial.println(ssid); Serial.print("IP address: "); Serial.println(WiFi.localIP()); Serial.println(""); // Print ESP32 Local IP Address Serial.println(WiFi.localIP()); // Route for web page server.on ("/", HTTP_GET, [] (AsyncWebServerRequest * request) { request-> send (SPIFFS, "/index.html"); }); server.on ("/DStempC", HTTP_GET, [] (AsyncWebServerRequest * request) { request-> send_P (200, "text / plain", getDStempC(). c_str ()); }); // start server server.begin (); } void loop() { } Subscribe and Download code Then, upload the code to your NodeMCU board. Make sure you have selected the right board and COM port. Also, make sure you’ve inserted your WiFi Credentials in the code After a successful upload, open the Serial Monitor at a baud rate of 115200. Press the “EN/RST” button on the ESP8266 board. Now it should print its IP address After that Open the web browser and enter the IP address path for Temperature reading on High chart Gauge and plotter. Demo: Subscribe and Download code

In this tutorial, we will learn to create an ESP8266 NodeMCU web server using DS18B20 and Fusion charts widget. The chip DS18B20 is used to measure temperature in Celsius and Fahrenheit. This web server will act as a weather station as it will show fusion charts widget thermometer gauge readings will update in Celsius and Fahrenheit automatically on the web page. Circuit Diagram Components Required DS18B20 - 1no Node MCU ESP8266 12E Dev Module- 1 no Resistor 4.7K- 1 no Jumper wires DS18B20 DS18B20 is a temperature sensor of Maxim. The single-chip microcomputer can communicate with DS18B20 through 1-Wire protocol and finally read the temperature. The hardware interface of the 1-Wire bus is very simple, just connect the data pin of DS18B20 to an IO port of the microcontroller. Data sheet: https://datasheets.maximintegrated.com/en/ds/DS18B20.pdf 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. To interface with the DS18B20 temperature sensor, you need to install the One Wire library . Open your Arduino IDE and go to Sketch > Include Library > Manage Libraries. The Library Manager should open. Type “onewire” in the search box and install the OneWire library by Paul Stoffregen. Download Dallas Library , we need to use this library for temperature measurement. 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 installing the required libraries, copy the following code to your Arduino IDE. arduino code #include #include // Include the libraries we need #include #include // Data wire is plugged into port 2 on the Arduino #define ONE_WIRE_BUS 2 // Setup a oneWire instance to communicate with any OneWire devices (not just Maxim/Dallas temperature ICs) OneWire oneWire(ONE_WIRE_BUS); // Pass our oneWire reference to Dallas Temperature. DallasTemperature sensors(&oneWire); //WiFi Connection configuration const char* ssid = "TP-Link_3200"; //YOUR SSID const char* password = "95001121379884265554"; //YOUR WIFI PASSWORD const char index_html[] PROGMEM={"\n" "\n" "\n" "\n" "\n" "\n" "ESP8266 NodeMCU DS18B20 Thermometer Display" "\n" "\n" "\n" "\n" "\n" "\t\n" "\n" "\n" "\n" "\n" "\n" " \n" " \n" "\n" " FusionCharts XT will load here!\n" " FusionCharts XT will load here!\n" " \n" "\n" "\n" "\t\n" "" }; ESP8266WebServer server(80); void handleRoot() { server.send_P(200, "text/html;charset=UTF-8", index_html); } void handleCTempRequest(){ sensors.requestTemperatures(); // Send the command to get temperatures Serial.println("Temperature is: "); float tempC = (sensors.getTempCByIndex(0)); Serial.println(tempC); //delay(1000); server.send(200,"text",String(tempC)); } void handleFTempRequest(){ sensors.requestTemperatures(); // Send the command to get temperatures float tempC = (sensors.getTempCByIndex(0)); // float tempF = (DallasTemperature::toFahrenheit(tempC)); float tempF = (sensors.getTempFByIndex(0)); Serial.println("Fahrenheit is: "); Serial.println(tempF); //delay(1000); server.send(200,"text",String(tempF)); } void handleNotFound(){ String message = "File Not Found\n\n"; server.send(404, "text/plain", message); } void runPeriodicFunc(){ static const unsigned long REFRESH_INTERVAL1 = 1000; // static unsigned long lastRefreshTime1 = 0; if(millis() - lastRefreshTime1 >= REFRESH_INTERVAL1) { lastRefreshTime1 = millis(); } } void setup(void){ // start serial port Serial.begin(115200); sensors.begin(); delay(100); WiFi.begin(ssid, password); Serial.println(""); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.print("IP address:"); Serial.println(WiFi.localIP()); server.on("/", handleRoot); server.on("/tempC",handleCTempRequest); server.on("/tempF",handleFTempRequest); server.onNotFound(handleNotFound); server.begin(); delay(2000); Serial.println("HTTP server started"); } void loop(void){ runPeriodicFunc(); server.handleClient(); // sensors.requestTemperatures(); // Send the command to get temperatures // float tempC = (sensors.getTempCByIndex(0)); // float tempF = (DallasTemperature::toFahrenheit(tempC)); } 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 ESP8266 board and see the result in serial monitor. After that Open the web browser and enter the IP address path for Thermometer reading on Fusion chart Gauge. Demo: Subscribe and Download code

In this tutorial, we will learn how to use the ADC pin of the ESP8266 12E and interfacing a potentiometer with an analog input pin of ESP8266 ADC and read voltage across the potentiometer. ESP8266 12E ADC Resolution has a 10-bit, which means you'll get values range 0 and 1023. ESP8266 12E ADC will convert this analog signal into a digital value range from 0 to 1023 and mapped 0 to 100. The measured values send to the Web server and feed in to fusion chart value and also display it on the 0.96 OLED display. Here note that the voltage not exceeded the 3.3 volts at the ESP8266 12E ADC pin, otherwise the ESP8266 12E burn out. Components Required 0.96 OLED 4wire Module - 1no Node MCU ESP8266 12E Dev Module- 1 no Trim potentiometer 4.7K- 1 no Jumper wires 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 Adafruit_SSD1306_Library , we need to use this library for SSD1306 OLED display Download Adafruit_GFX_Library , we need to use this library for Graphics 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 installing the required libraries, copy the following code to your Arduino IDE. arduino code Subscribe and Download code #include #include //WiFi Connection configuration const char* ssid = "TP-Link_3200"; //YOUR SSID const char* password = "95001121379884265554"; //YOUR WIFI PASSWORD const char index_html[] PROGMEM={"\n" "\n" "\n" "\n" "\n" "\n" "ESP8266 NodeMCU ADC and Fusion Chart " "\n" "\n" "\n" "\n" "\n" "\n" "\n" "\n" "\n" " \n" " \n" "\n" " FusionCharts XT will load here!\n" " \n" "\n" "\n" "\t\n" "" }; #include #include #include #include #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels // Declaration for an SSD1306 display connected to I2C (SDA, SCL pins) // The pins for I2C are defined by the Wire-library. // On an arduino UNO: A4(SDA), A5(SCL) // On an arduino MEGA 2560: 20(SDA), 21(SCL) // On an arduino LEONARDO: 2(SDA), 3(SCL), ... #define OLED_RESET -1 // Reset pin # (or -1 if sharing Arduino reset pin) #define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32 Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); float analog_percentage = 0; WiFiClient client; ESP8266WebServer server(80); void handleRoot() { server.send_P(200, "text/html;charset=UTF-8", index_html); } void handleLevelRequest(){ int a = analogRead(A0); a = map(a,0,1023,0,100); String analog_percentage = String(a); display.setCursor(0, 1); display.setTextColor(WHITE); display.setTextSize(1); display.println("ADC Percentage:"); // on écrit la valeur numérique de la tension un peu plus bas, en plus gros display.setCursor(35, 45); display.setTextSize(2); display.print(a/100); if ((a % 100) < 10){ display.print("0"); } display.print(a % 100); display.println(" %"); display.fillRect( 5, 17, 120, 20, BLACK); display.drawRect( 5, 17, 120, 20, WHITE); display.fillRect( 7, 19, map(a, 0, 100, 0, 116), 16, WHITE); display.display(); delay(500); display.clearDisplay(); Serial.println(analog_percentage); server.send(200,"text",String(analog_percentage)); } void handleNotFound(){ String message = "File Not Found\n\n"; server.send(404, "text/plain", message); } void runPeriodicFunc() { static const unsigned long REFRESH_INTERVAL1 = 1000; // 2.1sec static unsigned long lastRefreshTime1 = 0; if(millis() - lastRefreshTime1 >= REFRESH_INTERVAL1) { lastRefreshTime1 = millis(); } } void setup(void){ Serial.begin(115200); delay(100); WiFi.begin(ssid, password); Serial.println(""); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) { Serial.println(F("SSD1306 allocation failed")); for(;;); // Don't proceed, loop forever } // Show initial display buffer contents on the screen -- // the library initializes this with an Adafruit splash screen. display.display(); delay(2000); // Pause for 2 seconds // Clear the buffer display.clearDisplay(); // Draw a single pixel in white display.drawPixel(10, 10, SSD1306_WHITE); // Show the display buffer on the screen. You MUST call display() after // drawing commands to make them visible on screen! display.display(); delay(2000); // display.display() is NOT necessary after every single drawing command, // unless that's what you want...rather, you can batch up a bunch of // drawing operations and then update the screen all at once by calling // display.display(). These examples demonstrate both approaches... // Invert and restore display, pausing in-between display.invertDisplay(true); delay(1000); display.invertDisplay(false); delay(1000); Serial.print("IP address:"); Serial.println(WiFi.localIP()); server.on("/", handleRoot); server.on("/level",handleLevelRequest); server.onNotFound(handleNotFound); server.begin(); Serial.println("HTTP server started"); } void loop(void){ runPeriodicFunc(); server.handleClient(); } After a successful upload, open the Serial Monitor at a baud rate of 152000. Press the “EN/RST” button on the ESP8266 board and see the result in serial monitor. After that Open the web browser and enter the IP address and see the result. Subscribe and Download code Demo: