Real-time addressable LED strip control using ESP8266 via web interface
The web application is a single page application that is written in vanilla JS. So it is quite lightweight
ESP8266 is a web server. After your browser downloads the web files, the connection immediately switches to the websockets protocol. Over this, synchronization between clients was implemented.
Note, although the brightness slider use a delayed event handler (to prevent from flooding the ESP with too many requests too quickly), during execution "heavy" effects (they are marked in the code) with a quick change of brightness, ESP may be unavailable (until effect loop is completed) and messages will go to the senting queue.
The first thing you need to do is install the Arduino IDE , BUT:
At the moment, latest Arduino IDE (2.0) does not support the file system plugin (required to upload web files to ESP flash memory). See relevance.\ Therefore, you need to install version (1.8.x), however:
You can try the simplified version
which does not depend on the file system plugin but with a minimalistic interface. When you are sure everything is working, I strongly recommend installing the main version!
The ESP8266 boards will need to be added to the Arduino IDE which is achieved as follows.\ The ESP8266 filesystem plugin (you will find the installation instructions in the same place).
Dependency only on the following libraries:
ESP8266-LED.ino
and update the following lines:
#define LED_COUNT 60 // the number of pixels on the strip
#define DATA_PIN 14 // (D5 nodemcu) pin where is connected the data pin
const char ssid = ""; // SSID of the access point const char password = ""; // password (if the access point is open, leave it empty)
IPAddress Ip(192,168,100,10); // IP address for your ESP IPAddress Gateway(192,168,100,1); // IP address of the access point
* Upload the sketch
* In the IDE's top menu, select `tools` -> `ESP8266 Sketch Data Upload` to upload files from the `data` directory to ESP flash memory
* Open the serial port monitor (if the connection is successful, IP your ESP will be displayed)
* Open the browser and enter the IP address
#### Happy use ッ