Dimmer and ESP8266 with WEB interface.

Dimmer and ESP8266 WEB interface
By RobotDyn Support
More from this author

Dimmer and ESP8266 with WEB interface.

In this tutorial, you'll learn what you need to know to get started dimming power with WEB interface.

1. Preparing your Arduino IDE

Copy and paste the code below into your Arduino IDE, make sure to select ESP8266 as your board, and the correct COM port is selected. 

You’ll also need to install two additional libraries to have everything ready for your ESP8266:


#include <RBDdimmer.h>       //https://github.com/RobotDynOfficial/RBDDimmer
#define outputPin  16 
#define zerocross  5 // seting of pins

dimmerLamp dimmer(outputPin, zerocross); //initialase port for dimmer for ESP8266, ESP32, Arduino due boards
//dimmerLamp dimmer(outputPin); //initialase port for dimmer for MEGA, Leonardo, UNO, Arduino M0, Arduino Zero

#if defined(ESP8266)
#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
#include <WiFi.h>

//needed for library
#include <ESPAsyncWebServer.h>
#include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient

//for LED status
#include <Ticker.h>
Ticker ticker;

void tick()
  //toggle state
  int state = digitalRead(BUILTIN_LED);  // get the current state of GPIO1 pin
  digitalWrite(BUILTIN_LED, !state);     // set pin to the opposite state

//gets called when WiFiManager enters configuration mode
void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  Serial.println("Entered config mode");
  //if you used auto generated SSID, print it
  //entered config mode, make led toggle faster
  ticker.attach(0.2, tick);

AsyncWebServer server(80);
DNSServer dns;

String sliderValue = "0";

const char* PARAM_INPUT = "value";
const char index_html[] PROGMEM = R"rawliteral(
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dimmer ESP Controller</title>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
    .button { background-color: #003249; border: none; color: white; padding: 16px 40px;}
  <h2>Dimmer ESP Controller</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="100" value="%SLIDERVALUE%" step="1" class="slider"></p>
  <p><a href=/output/on\><button class=\"button\">WiFi RST</button></a></p>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);

// Replaces placeholder with button section in your web page
String processor(const String& var){
  if (var == "SLIDERVALUE"){
    return sliderValue;
  return String();

void setup() {
  // put your setup code here, to run once:
  dimmer.begin(NORMAL_MODE, ON);
  //set led pin as output
  // start ticker with 0.5 because we start in AP mode and try to connect
  ticker.attach(0.6, tick);

  //Local intialization. Once its business is done, there is no need to keep it around
  AsyncWiFiManager wifiManager(&server,&dns);
  //reset settings - for testing

  //set callback that gets called when connecting to previous WiFi fails, and enters Access Point mode

  //fetches ssid and pass and tries to connect
  //if it does not connect it starts an access point with the specified name
  //here  "AutoConnectAP"
  //and goes into a blocking loop awaiting configuration
  if (!wifiManager.autoConnect("WiFi-Dimmer")) {
    Serial.println("failed to connect and hit timeout");
    //reset and try again, or maybe put it to deep sleep
  //if you get here you have connected to the WiFi
  Serial.println("connected...yeey :)");
  //keep LED on
  digitalWrite(BUILTIN_LED, LOW);

   // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);

  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
    if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      sliderValue = inputMessage;
//      analogWrite(output, sliderValue.toInt());
    else {
      inputMessage = "No message sent";
    request->send(200, "text/plain", "OK");
  // Start server

void loop() {
  // put your main code here, to run repeatedly:



Once the code has been uploaded:

  • open the WiFi connection utility.
  • Find WiFi network “WiFi Dimmer” and connect.
  • Open browser
  • Configure Dimmer controller to home network access

  • Connect to home network and find the dimmer IP in your network with any IP scanner utility

Open dimmer IP in browser and dimming a power with sider



December 2, 2021