{"id":83277,"date":"2019-04-16T12:36:38","date_gmt":"2019-04-16T12:36:38","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=83277"},"modified":"2024-06-11T14:48:26","modified_gmt":"2024-06-11T14:48:26","slug":"esp32-esp8266-rgb-led-strip-web-server","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-esp8266-rgb-led-strip-web-server\/","title":{"rendered":"ESP32\/ESP8266 RGB LED Strip with Color Picker Web Server"},"content":{"rendered":"\n<p>In this project we\u2019ll show you how to remotely control an RGB LED strip with an ESP8266 or an ESP32 board using a web server with a color picker. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-esp8266-web-server-color-picker-featured-image.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 or ESP8266 RGB LED Strip with Color Picker Web Server\" class=\"wp-image-83503\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-esp8266-web-server-color-picker-featured-image.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-esp8266-web-server-color-picker-featured-image.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-esp8266-web-server-color-picker-featured-image.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-esp8266-web-server-color-picker-featured-image.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>We&#8217;ll control a 5V RGB LED strip and the code will be written in Arduino IDE.<\/p>\n\n\n\n<p>To better understand this project, there are a few tutorials that you may want to take a look first (this step is optional):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/randomnerdtutorials.com\/electronics-basics-how-do-rgb-leds-work\/\" target=\"_blank\">How RGB LEDs work<\/a> <\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\"ESP32 Web Server - Arduino IDE (opens in a new tab)\" href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\" target=\"_blank\">ESP32 Web Server with Arduino IDE<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\"ESP8266 Web Server with Arduino IDE (opens in a new tab)\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server-with-arduino-ide\/\" target=\"_blank\">ESP8266 Web Server with Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video Tutorial<\/h2>\n\n\n\n<p>You can watch the video tutorial or keep reading this page for the written instructions.<\/p>\n\n\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/abL9dq_Pzm4?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n\n<p>Before getting started, let\u2019s see how this project works:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"290\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-overview.png?resize=750%2C290&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"How it works ESP32\/ESP8266 RGB LED Strip with Color Picker Web Server\" class=\"wp-image-83279\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-overview.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-overview.png?resize=300%2C116&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>The ESP32\/ESP8266 web server displays a color picker.<\/li>\n\n\n\n<li>When you chose a color, your browser makes a request on a URL that contains the R, G, and B parameters of the selected color.<\/li>\n\n\n\n<li>Your ESP32\/ESP8266 receives the request and splits the value for each color parameter.<\/li>\n\n\n\n<li>Then, it sends a PWM signal with the corresponding value to the GPIOs that are controlling the strip.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n\n<p>For this project you need the following parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" aria-label=\"ESP32  (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\">ESP32 <\/a>(read <a rel=\"noreferrer noopener\" aria-label=\"best ESP32 development boards (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\">best ESP32 development boards<\/a>) or <a rel=\"noreferrer noopener\" aria-label=\"ESP8266 (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\">ESP8266<\/a> (read <a rel=\"noreferrer noopener\" aria-label=\"best ESP8266 development boards (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\">best ESP8266 development boards<\/a>)<\/li>\n\n\n\n<li> <a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/5v-rgb-led-strip\/\" target=\"_blank\">RGB LED Strip (5V)<\/a><\/li>\n\n\n\n<li>3x NPN transistors (see how to choose the proper transistor in the project description)<\/li>\n\n\n\n<li>3x&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\">1k ohm resistors<\/a><br><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\">Jumper wires<\/a><br><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\">Breadboard<\/a> <\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schematic<\/h2>\n\n\n\n<p>For this project, we\u2019ll be using an RGB LED strip that can be powered with 5V.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/5v-led-strip.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"5V RGB LED Strip\" class=\"wp-image-83280\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/5v-led-strip.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/5v-led-strip.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclblue\"><strong>Note: <\/strong> there are other similar strips that require 12V to operate. You can still use them with the code provided, but you need a suitable power supply.<\/p>\n\n\n\n<p>In this example, we\u2019ll be powering the LED strip and the ESP32 or ESP8266 using the same 5V power supply. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">ESP32 &#8211; schematic diagram<\/h3>\n\n\n\n<p>Follow the next schematic diagram to connect the strip to your ESP32.<br><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-LED-strip-schematic_f.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"445\" height=\"589\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-LED-strip-schematic_f.png?resize=445%2C589&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 5V RGB LED Strip Schematic Circuit\" class=\"wp-image-83281\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-LED-strip-schematic_f.png?w=445&amp;quality=100&amp;strip=all&amp;ssl=1 445w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP32-LED-strip-schematic_f.png?resize=227%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 227w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">ESP8266 &#8211; Schematic diagram<\/h3>\n\n\n\n<p> Follow the next schematic diagram to connect the strip to your ESP8266. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP8266-LED-strip.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"485\" height=\"617\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP8266-LED-strip.png?resize=485%2C617&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 5V RGB LED Strip Schematic Circuit\" class=\"wp-image-83288\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP8266-LED-strip.png?w=485&amp;quality=100&amp;strip=all&amp;ssl=1 485w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/ESP8266-LED-strip.png?resize=236%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 236w\" sizes=\"(max-width: 485px) 100vw, 485px\" \/><\/a><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">NPN Transistors<\/h4>\n\n\n\n<p>In this circuit, we\u2019re using the S8050 NPN transistor. However, depending on how many LEDs you have in your strip, you might need to use a NPN transistor that can handle more continuous current in the collector pin.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/circuit-transistors.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32\/ESP8266 RGB LED Strip Circuit and Schematic NPN transistor\" class=\"wp-image-83282\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/circuit-transistors.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/circuit-transistors.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>To determine the max current used by your LED strip, you can measure the current consumption when all the LEDs are at maximum brightness (when the color is white).<\/p>\n\n\n\n<p>Since we\u2019re using 12 LEDs, the maximum current is approximately 630mA at full brightness in white color. So, we can use the S8050 NPN transistor that can handle up to 700mA.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/rgb-led-strip-current-comsumption.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32\/ESP8266 RGB LED Strip Circuit and Schematic NPN transistor\" class=\"wp-image-83283\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/rgb-led-strip-current-comsumption.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/rgb-led-strip-current-comsumption.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclblue\"><strong>Note: <\/strong> your strip consumes the maximum current when you set white color (this is the same as setting all three colors to the maximum brightness). Setting other colors draws less current, so you\u2019ll probably won\u2019t have your strip using the maximum current.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ESP32 Code<\/h2>\n\n\n\n<p>We\u2019ll program the ESP32 using Arduino IDE, so make sure you have the ESP32 add-on installed before proceeding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp32-arduino-ide-2-0\/\" title=\"\">Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)<\/a><\/li>\n<\/ul>\n\n\n\n<p>After assembling the circuit, copy the following code to your Arduino IDE to program the ESP32.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Load Wi-Fi library\n#include &lt;WiFi.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Decode HTTP GET value\nString redString = &quot;0&quot;;\nString greenString = &quot;0&quot;;\nString blueString = &quot;0&quot;;\nint pos1 = 0;\nint pos2 = 0;\nint pos3 = 0;\nint pos4 = 0;\n\n\/\/ Variable to store the HTTP req  uest\nString header;\n\n\/\/ Red, green, and blue pins for PWM control\nconst int redPin = 13;     \/\/ 13 corresponds to GPIO13\nconst int greenPin = 12;   \/\/ 12 corresponds to GPIO12\nconst int bluePin = 14;    \/\/ 14 corresponds to GPIO14\n\n\/\/ Setting PWM frequency, channels and bit resolution\nconst int freq = 5000;\nconst int redChannel = 0;\nconst int greenChannel = 1;\nconst int blueChannel = 2;\n\/\/ Bit resolution 2^8 = 256\nconst int resolution = 8;\n\n\/\/ Current time\nunsigned long currentTime = millis();\n\/\/ Previous time\nunsigned long previousTime = 0; \n\/\/ Define timeout time in milliseconds (example: 2000ms = 2s)\nconst long timeoutTime = 2000;\n\nvoid setup() {\n  Serial.begin(115200);\n  \/\/ configure LED PWM functionalitites\n  ledcAttachChannel(redPin, freq, resolution, redChannel);\n  ledcAttachChannel(greenPin, freq, resolution, greenChannel);\n  ledcAttachChannel(bluePin, freq, resolution, blueChannel);\n  \n  \/\/ Connect to Wi-Fi network with SSID and password\n  Serial.print(&quot;Connecting to &quot;);\n  Serial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n  \/\/ Print local IP address and start web server\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected.&quot;);\n  Serial.println(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    currentTime = millis();\n    previousTime = currentTime;\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    while (client.connected() &amp;&amp; currentTime - previousTime &lt;= timeoutTime) {            \/\/ loop while the client's connected\n      currentTime = millis();\n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n                   \n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;stylesheet\\&quot; href=\\&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;script src=\\&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jscolor\/2.0.4\/jscolor.min.js\\&quot;&gt;&lt;\/script&gt;&quot;);\n            client.println(&quot;&lt;\/head&gt;&lt;body&gt;&lt;div class=\\&quot;container\\&quot;&gt;&lt;div class=\\&quot;row\\&quot;&gt;&lt;h1&gt;ESP Color Picker&lt;\/h1&gt;&lt;\/div&gt;&quot;);\n            client.println(&quot;&lt;a class=\\&quot;btn btn-primary btn-lg\\&quot; href=\\&quot;#\\&quot; id=\\&quot;change_color\\&quot; role=\\&quot;button\\&quot;&gt;Change Color&lt;\/a&gt; &quot;);\n            client.println(&quot;&lt;input class=\\&quot;jscolor {onFineChange:'update(this)'}\\&quot; id=\\&quot;rgb\\&quot;&gt;&lt;\/div&gt;&quot;);\n            client.println(&quot;&lt;script&gt;function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);&quot;);\n            client.println(&quot;document.getElementById(\\&quot;change_color\\&quot;).href=\\&quot;?r\\&quot; + Math.round(picker.rgb[0]) + \\&quot;g\\&quot; +  Math.round(picker.rgb[1]) + \\&quot;b\\&quot; + Math.round(picker.rgb[2]) + \\&quot;&amp;\\&quot;;}&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;&quot;);\n            \/\/ The HTTP response ends with another blank line\n            client.println();\n\n            \/\/ Request sample: \/?r201g32b255&amp;\n            \/\/ Red = 201 | Green = 32 | Blue = 255\n            if(header.indexOf(&quot;GET \/?r&quot;) &gt;= 0) {\n              pos1 = header.indexOf('r');\n              pos2 = header.indexOf('g');\n              pos3 = header.indexOf('b');\n              pos4 = header.indexOf('&amp;');\n              redString = header.substring(pos1+1, pos2);\n              greenString = header.substring(pos2+1, pos3);\n              blueString = header.substring(pos3+1, pos4);\n              \/*Serial.println(redString.toInt());\n              Serial.println(greenString.toInt());\n              Serial.println(blueString.toInt());*\/\n              ledcWrite(redPin, redString.toInt());\n              ledcWrite(greenPin, greenString.toInt());\n              ledcWrite(bluePin, blueString.toInt());\n            }\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Course\/raw\/master\/code\/WiFi_Web_Server_Color_Picker\/WiFi_Web_Server_Color_Picker.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Before uploading the code, don\u2019t forget to insert your network credentials so that the ESP can connect to your local network.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid     = \"\";\nconst char* password = \"\";<\/code><\/pre>\n\n\n\n<p>If you\u2019ve built a <a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\">web server with the ESP32<\/a> before, this code is not much different. It adds the color picker to the web page and decodes the request to control the strip color. So, we\u2019ll just take a look at the relevant parts for this project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">ESP8266 Code<\/h2>\n\n\n\n<p>We\u2019ll program the ESP8266 using the Arduino IDE. In order to upload code to your ESP8266, you need to install the ESP8266 add-on first, if you haven\u2019t already (<a href=\"https:\/\/randomnerdtutorials.com\/installing-esp8266-nodemcu-arduino-ide-2-0\/\" title=\"\">Install the ESP8266 Board in Arduino IDE<\/a>).<br><\/p>\n\n\n\n<p>After assembling the circuit, copy the following code to your Arduino IDE to program the ESP8266. <\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Load Wi-Fi library\n#include &lt;ESP8266WiFi.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\n\/\/ Decode HTTP GET value\nString redString = &quot;0&quot;;\nString greenString = &quot;0&quot;;\nString blueString = &quot;0&quot;;\nint pos1 = 0;\nint pos2 = 0;\nint pos3 = 0;\nint pos4 = 0;\n\n\/\/ Variable to store the HTTP req  uest\nString header;\n\n\/\/ Red, green, and blue pins for PWM control\nconst int redPin = 13;     \/\/ 13 corresponds to GPIO13\nconst int greenPin = 12;   \/\/ 12 corresponds to GPIO12\nconst int bluePin = 14;    \/\/ 14 corresponds to GPIO14\n\n\/\/ Setting PWM bit resolution\nconst int resolution = 256;\n\n\/\/ Current time\nunsigned long currentTime = millis();\n\/\/ Previous time\nunsigned long previousTime = 0; \n\/\/ Define timeout time in milliseconds (example: 2000ms = 2s)\nconst long timeoutTime = 2000;\n\nvoid setup() {\n  Serial.begin(115200);\n  \n  \/\/ configure LED PWM resolution\/range and set pins to LOW\n  analogWriteRange(resolution);\n  analogWrite(redPin, 0);\n  analogWrite(greenPin, 0);\n  analogWrite(bluePin, 0);\n  \n  \/\/ Connect to Wi-Fi network with SSID and password\n  Serial.print(&quot;Connecting to &quot;);\n  Serial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n  \/\/ Print local IP address and start web server\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected.&quot;);\n  Serial.println(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {                             \/\/ If a new client connects,\n    currentTime = millis();\n    previousTime = currentTime;\n    Serial.println(&quot;New Client.&quot;);          \/\/ print a message out in the serial port\n    String currentLine = &quot;&quot;;                \/\/ make a String to hold incoming data from the client\n    while (client.connected() &amp;&amp; currentTime - previousTime &lt;= timeoutTime) {            \/\/ loop while the client's connected\n      currentTime = millis();\n      if (client.available()) {             \/\/ if there's bytes to read from the client,\n        char c = client.read();             \/\/ read a byte, then\n        Serial.write(c);                    \/\/ print it out the serial monitor\n        header += c;\n        if (c == '\\n') {                    \/\/ if the byte is a newline character\n          \/\/ if the current line is blank, you got two newline characters in a row.\n          \/\/ that's the end of the client HTTP request, so send a response:\n          if (currentLine.length() == 0) {\n            \/\/ HTTP headers always start with a response code (e.g. HTTP\/1.1 200 OK)\n            \/\/ and a content-type so the client knows what's coming, then a blank line:\n            client.println(&quot;HTTP\/1.1 200 OK&quot;);\n            client.println(&quot;Content-type:text\/html&quot;);\n            client.println(&quot;Connection: close&quot;);\n            client.println();\n                   \n            \/\/ Display the HTML web page\n            client.println(&quot;&lt;!DOCTYPE html&gt;&lt;html&gt;&quot;);\n            client.println(&quot;&lt;head&gt;&lt;meta name=\\&quot;viewport\\&quot; content=\\&quot;width=device-width, initial-scale=1\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;icon\\&quot; href=\\&quot;data:,\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;link rel=\\&quot;stylesheet\\&quot; href=\\&quot;https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\\&quot;&gt;&quot;);\n            client.println(&quot;&lt;script src=\\&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jscolor\/2.0.4\/jscolor.min.js\\&quot;&gt;&lt;\/script&gt;&quot;);\n            client.println(&quot;&lt;\/head&gt;&lt;body&gt;&lt;div class=\\&quot;container\\&quot;&gt;&lt;div class=\\&quot;row\\&quot;&gt;&lt;h1&gt;ESP Color Picker&lt;\/h1&gt;&lt;\/div&gt;&quot;);\n            client.println(&quot;&lt;a class=\\&quot;btn btn-primary btn-lg\\&quot; href=\\&quot;#\\&quot; id=\\&quot;change_color\\&quot; role=\\&quot;button\\&quot;&gt;Change Color&lt;\/a&gt; &quot;);\n            client.println(&quot;&lt;input class=\\&quot;jscolor {onFineChange:'update(this)'}\\&quot; id=\\&quot;rgb\\&quot;&gt;&lt;\/div&gt;&quot;);\n            client.println(&quot;&lt;script&gt;function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);&quot;);\n            client.println(&quot;document.getElementById(\\&quot;change_color\\&quot;).href=\\&quot;?r\\&quot; + Math.round(picker.rgb[0]) + \\&quot;g\\&quot; +  Math.round(picker.rgb[1]) + \\&quot;b\\&quot; + Math.round(picker.rgb[2]) + \\&quot;&amp;\\&quot;;}&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;&quot;);\n            \/\/ The HTTP response ends with another blank line\n            client.println();\n\n            \/\/ Request sample: \/?r201g32b255&amp;\n            \/\/ Red = 201 | Green = 32 | Blue = 255\n            if(header.indexOf(&quot;GET \/?r&quot;) &gt;= 0) {\n              pos1 = header.indexOf('r');\n              pos2 = header.indexOf('g');\n              pos3 = header.indexOf('b');\n              pos4 = header.indexOf('&amp;');\n              redString = header.substring(pos1+1, pos2);\n              greenString = header.substring(pos2+1, pos3);\n              blueString = header.substring(pos3+1, pos4);\n              \/*Serial.println(redString.toInt());\n              Serial.println(greenString.toInt());\n              Serial.println(blueString.toInt());*\/\n              analogWrite(redPin, redString.toInt());\n              analogWrite(greenPin, greenString.toInt());\n              analogWrite(bluePin, blueString.toInt());\n            }\n            \/\/ Break out of the while loop\n            break;\n          } else { \/\/ if you got a newline, then clear currentLine\n            currentLine = &quot;&quot;;\n          }\n        } else if (c != '\\r') {  \/\/ if you got anything else but a carriage return character,\n          currentLine += c;      \/\/ add it to the end of the currentLine\n        }\n      }\n    }\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n    Serial.println(&quot;&quot;);\n  }\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP8266\/ESP8266_WiFi_Web_Server_Color_Picker.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<p>Before uploading the code, don\u2019t forget to insert your network credentials so that the ESP can connect to your local network.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid     = \"\";\nconst char* password = \"\";<\/code><\/pre>\n\n\n\n<p>If you\u2019ve built a <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-web-server\/\">web server with the ESP8266<\/a> before, this code is not much different. It adds the color picker to the web page and decodes the request to control the strip color. So, we\u2019ll just take a look at the relevant parts for this project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How the code works<\/h3>\n\n\n\n<p>The sketches for the ESP32 and ESP8266 are very similar with just a few differences when it comes to the Wi-Fi library and the way they generate PWM signals. We&#8217;ll explain that in this section.<\/p>\n\n\n\n<p>The ESP32 sketch uses the <span class=\"rnthl rntliteral\">WiFi.h<\/span> library.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;WiFi.h&gt;<\/code><\/pre>\n\n\n\n<p>The ESP8266 sketch uses the <span class=\"rnthl rntliteral\">ESP8266WiFi.h<\/span> library.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;ESP8266WiFi.h&gt;<\/code><\/pre>\n\n\n\n<p>The following lines define string variables to hold the R, G, and B parameters from the request.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String redString = \"0\";\nString greenString = \"0\";\nString blueString = \"0\";<\/code><\/pre>\n\n\n\n<p>The next four variables are used to decode the HTTP request later on.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int pos1 = 0;\nint pos2 = 0;\nint pos3 = 0;\nint pos4 = 0;<\/code><\/pre>\n\n\n\n<p>Create three variables for the GPIOs that will control the strip R, G, and B parameters. In this case we\u2019re using <span class=\"rnthl rntcred\">GPIO 13<\/span>, <span class=\"rnthl rntclgreen\">GPIO 12<\/span>, and <span class=\"rnthl rntcblue\">GPIO 14<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const int redPin = 13;     \nconst int greenPin = 12;  \nconst int bluePin = 14; <\/code><\/pre>\n\n\n\n<p>These GPIOs need to output PWM signals, so we need to configure the PWM properties first. Set the PWM signal frequency to 5000 Hz. Then, associate a PWM channel for each color (this is not needed in the ESP8266 sketch).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const int freq = 5000;\nconst int redChannel = 0;\nconst int greenChannel = 1;\nconst int blueChannel = 2;<\/code><\/pre>\n\n\n\n<p>And finally, set the resolution of the PWM channels to 8-bit (not needed in ESP8266 sketch).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const int resolution = 8;<\/code><\/pre>\n\n\n\n<p>In the\u00a0<span class=\"rnthl rntliteral\">setup()<\/span>, create LEDC pins with the PWM properties defined earlier (not needed in ESP8266 sketch).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>  ledcAttachChannel(redPin, freq, resolution, redChannel);\n  ledcAttachChannel(greenPin, freq, resolution, greenChannel);\n  ledcAttachChannel(bluePin, freq, resolution, blueChannel);<\/code><\/pre>\n\n\n\n<p class=\"rntbox rntclgreen\">Learn more about PWM with the ESP32: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pwm-arduino-ide\/\">ESP32 PWM with Arduino IDE (Analog Output)<\/a><\/p>\n\n\n\n<p>The following code section displays the color picker in your web page and makes a request based on the color you\u2019ve picked.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>client.println(\"&lt;!DOCTYPE html&gt;&lt;html&gt;\");\nclient.println(\"&lt;head&gt;&lt;meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"&gt;\");\nclient.println(\"&lt;link rel=\\\"icon\\\" href=\\\"data:,\\\"&gt;\");\nclient.println(\"&lt;link rel=\\\"stylesheet\\\" href=\\\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\\\"&gt;\");\nclient.println(\"&lt;script src=\\\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jscolor\/2.0.4\/jscolor.min.js\\\"&gt;&lt;\/script&gt;\");\nclient.println(\"&lt;\/head&gt;&lt;body&gt;&lt;div class=\\\"container\\\"&gt;&lt;div class=\\\"row\\\"&gt;&lt;h1&gt;ESP Color Picker&lt;\/h1&gt;&lt;\/div&gt;\");\nclient.println(\"&lt;a class=\\\"btn btn-primary btn-lg\\\" href=\\\"#\\\" id=\\\"change_color\\\" role=\\\"button\\\"&gt;Change Color&lt;\/a&gt; \");\nclient.println(\"&lt;input class=\\\"jscolor {onFineChange:'update(this)'}\\\" id=\\\"rgb\\\"&gt;&lt;\/div&gt;\");\nclient.println(\"&lt;script&gt;function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb&#091;0]) + ', ' +  Math.round(picker.rgb&#091;1]) + ', ' + Math.round(picker.rgb&#091;2]);\");        client.println(\"document.getElementById(\\\"change_color\\\").href=\\\"?r\\\" + Math.round(picker.rgb&#091;0]) + \\\"g\\\" +  Math.round(picker.rgb&#091;1]) + \\\"b\\\" + Math.round(picker.rgb&#091;2]) + \\\"&amp;\\\";}&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;\");\n\/\/ The HTTP response ends with another blank line\nclient.println();<\/code><\/pre>\n\n\n\n<p>When you pick a color, you receive a request with the following format.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/?<strong>r<\/strong>201<strong>g<\/strong>32<strong>b<\/strong>255&amp;<\/pre>\n\n\n\n<p>So, we need to split this string to get the R, G, and B parameters. The parameters are saved in&nbsp;<span class=\"rnthl rntliteral\">redString<\/span>,&nbsp;<span class=\"rnthl rntliteral\">greenString<\/span>, and&nbsp;<span class=\"rnthl rntliteral\">blueString<\/span>&nbsp;variables and can have values between 0 and 255.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>pos1 = header.indexOf('r');\npos2 = header.indexOf('g');\npos3 = header.indexOf('b');\npos4 = header.indexOf('&amp;');\nredString = header.substring(pos1+1, pos2);\ngreenString = header.substring(pos2+1, pos3);\nblueString = header.substring(pos3+1, pos4);<\/code><\/pre>\n\n\n\n<p>To control the strip with the ESP32, use the <span class=\"rnthl rntliteral\">ledcWrite()<\/span> function to generate PWM signals with the values decoded from the HTTP request.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>ledcWrite(redPin, redString.toInt());\nledcWrite(greenPin, greenString.toInt());\nledcWrite(bluePin, blueString.toInt());<\/code><\/pre>\n\n\n\n<p class=\"rntbox rntclblue\"><strong>Note: <\/strong> learn more about PWM with ESP32: <a href=\"https:\/\/randomnerdtutorials.com\/esp32-pwm-arduino-ide\/\">ESP32 PWM with Arduino IDE<\/a>.<\/p>\n\n\n\n<p>To control the strip with the ESP8266, we just need to use the <span class=\"rnthl rntliteral\">analogWrite()<\/span> function to generate PWM signals with the values decoded from the HTPP request.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>analogWrite(redPin, redString.toInt());\nanalogWrite(greenPin, greenString.toInt());\nanalogWrite(bluePin, blueString.toInt())<\/code><\/pre>\n\n\n\n<p>Because we get the values in a string variable, we need to convert them to integers using the <span class=\"rnthl rntliteral\">toInt()<\/span> method.<\/p>\n\n\n\n<p class=\"rntbox rntclgreen\">Learn more about PWM with the ESP8266: <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-pwm-arduino-ide\/\">ESP8266 NodeMCU PWM with Arduino IDE \u2013 Dim LED (Analog Output)<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>After inserting your network credentials, select the right board and COM port and upload the code to your ESP32 or ESP8266.<\/p>\n\n\n\n<p>After uploading, open the Serial Monitor at a baud rate of 115200 and press the ESP Enable\/Reset button. You should get the board IP address.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"736\" height=\"356\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-ip-address.png?resize=736%2C356&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Demonstration ESP32\/ESP8266 RGB LED Strip\" class=\"wp-image-83284\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-ip-address.png?w=736&amp;quality=100&amp;strip=all&amp;ssl=1 736w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-ip-address.png?resize=300%2C145&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/figure><\/div>\n\n\n<p>Open your browser and insert the ESP IP address. Now, use the color picker to choose a color for the strip.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"672\" height=\"352\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-browser.png?resize=672%2C352&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Web Server Demonstration ESP32\/ESP8266 RGB LED Strip\" class=\"wp-image-83356\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-browser.png?w=672&amp;quality=100&amp;strip=all&amp;ssl=1 672w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-browser.png?resize=300%2C157&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 672px) 100vw, 672px\" \/><\/figure><\/div>\n\n\n<p>Then, you need to press the \u201cChange Color\u201d button for the color to take effect.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-color-picker-demo.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Demonstration ESP32\/ESP8266 5V RGB LED Strip Web Server Color Picker\" class=\"wp-image-83357\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-color-picker-demo.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-color-picker-demo.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>To turn off the RGB LED strip, select the black color.<\/p>\n\n\n\n<p>The strongest colors (at the top of the color picker), are the ones that will produce better results.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"239\" height=\"129\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/color-picker-browser-esp32-best-colors.png?resize=239%2C129&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32\/ESP8266 5V RGB LED Strip Web Server Color Picker\" class=\"wp-image-83285\"\/><\/figure><\/div>\n\n\n<p>Now, you use the strip to decorate your house: under the bed, behind a TV, under the kitchen cabinet, and much more.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>With this article, you&#8217;ve learned how to control an RGB LED strip remotely using a web server with your ESP32 or ESP8266 on your local network.<\/p>\n\n\n\n<p>We hope you&#8217;ve found this tutorial useful. If you like this project, you may also like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/micropython-ws2812b-addressable-rgb-leds-neopixel-esp32-esp8266\/\">MicroPython: WS2812B Addressable RGB LEDs with ESP32 and ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/electronics-basics-how-do-rgb-leds-work\/\">How do RGB LEDs work?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/node-red-with-ws2812b-addressable-rgb-led-strip\/\">Node-RED with WS2812B Addressable RGB LED Strip<\/a> <\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-servo-motor-web-server-arduino-ide\/\">ESP32 Servo Motor Web Server with Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<p>Learn more about the ESP32 with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE (2nd Edition)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/smart-home-ebook\/\">SMART HOME with Raspberry Pi, ESP32, ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-web-servers-esp32-esp8266-ebook\/\">Build Web Servers with ESP32 and ESP8266<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/firebase-esp32-esp8266-ebook\/\">Firebase Web App with the ESP32 and ESP8266<\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\">Free ESP32 Projects,Tutorials and Guides<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"rntbox rntclgray\"><em>This is an excerpt from our course:&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE<\/a>. If you like ESP32 and you want to learn more about it, we recommend enrolling in&nbsp;<a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE course<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project we\u2019ll show you how to remotely control an RGB LED strip with an ESP8266 or an ESP32 board using a web server with a color picker. We&#8217;ll &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32\/ESP8266 RGB LED Strip with Color Picker Web Server\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-rgb-led-strip-web-server\/#more-83277\" aria-label=\"Read more about ESP32\/ESP8266 RGB LED Strip with Color Picker Web Server\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":83503,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[281,299,265,264],"tags":[],"class_list":["post-83277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-project","category-0-esp32","category-esp8266-project","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2019\/03\/esp32-esp8266-web-server-color-picker-featured-image.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/83277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=83277"}],"version-history":[{"count":2,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/83277\/revisions"}],"predecessor-version":[{"id":158780,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/83277\/revisions\/158780"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/83503"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=83277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=83277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=83277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}