Brightness Slider for my Neopixel using ESP8266

Topic starter May 27, 2022 6:29 AM

Hi guys!

I'm working on a smart lamp and would like to add a slider so I can adjust the brightness of my Neopixel lamp.
I already created the slider in HTML and Javascript, but I'm struggling to connect the value of the slider to the Arduino code. I want to be able to connect the values of the slider with the brightness of the Neopixel...

I've used a Soft Access Point for the connection with the Arduino ESP8266. I also already created buttons to change the color and connect a LDR sensor to measure the amount of light and both are working.

This is my code:

const char page_contents[] PROGMEM = R"=====(
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width'>
    <title>Smart Lamp</title>
    <link rel='preconnect' href='https://fonts.googleapis.com'>
    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
    <link href='https://fonts.googleapis.com/css2?family=Montserrat&display=swap' rel='stylesheet'>
    <style> 
body{
font-family: 'Montserrat';
font-weight: 400;
background: #F5F5F5;
position: relative;
padding: 1%;
align-items: center;
justify-content: center;

}

h1 {
font-weight: 450;
font-size: 25px;
}

h4{
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 15px;
line-height: 18px;  
}

.spacing-title{
  padding-left: 8%;
}

p{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
padding: 1%;
font-size: 15px;
}

.lamp-mode{
display: flex;
flex-direction: column;
width: 180px;
height: 200px;
background: #FFFFFF;
border-radius: 20px;
align-content: center;
}

.color-party{
background-color: #FFFFFF;
border-radius: 20px;
justify-content: center;
width: 180px;
height: 340px;
}

.container{
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 gap: 15px;
}

.all-colors{
  display:flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.btn-on-off{
  font-weight: bold;
}

.result-mode{
  display: flex;
  flex-direction: column;
  text-align: center;
}

.btn-lampmode{
align-self: center;
box-sizing: border-box;
border: 12px solid #FDFF84;
border-radius: 340px;
height: 75px;
width: 75px;
margin-right: 1%;
}

.atmosphere-light{
box-sizing: border-box;
width: 180px;
height: 55px;
background: #FFFFFF;
border-radius: 20px;
text-align: center;
}

.big-container{
 display: flex;
 flex-direction: row;
 justify-content: center;
 gap: 20px;
 padding-bottom: 8%;
 padding-top: 5%;
}

.intensive-container{
  display:flex;
  flex-direction: column;
  height: 166px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 5%;
}

.intensivetitle-container{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  
}

#rangeValue {
  position: relative;
  display: block;
  text-align: center;
  font-size: 40px;
  color: #000000;
  font-weight: 400;
}

.range {
  width: 100%;
  height: 45px;
  -webkit-appearance: none;
  background: #D9D9D9;
  border-radius: 20px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #C9E265;
  cursor: pointer;
}

h1, h2, h3 {
    color: black;
}

h3 {
    font-size: 16px;
    font-weight: 300;
}

.btns {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    align-items: center;
}

.btn {
    margin: 10px;
    padding: 10px;
}

.kleurBtn{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(44, 44, 44);
    border-radius: 10px;
    box-shadow: 2px 3px 10px black;
    padding:10px;
}

.sfeerBtn{
    display: flex;
    flex-direction: row;
    background-color: rgb(44, 44, 44);
    border-radius: 10px;
    box-shadow: 2px 3px 10px black;
    padding:10px;
    margin-top: 20px;
}

.status {
    font-weight: bold;
    color: #bf59f3;
}

a {
    padding: 5px;
    border: 1px;
    border-radius: 5px;
    margin: 5px;
}


.btn-oranje {
  width: 125px;
  height: 50px;
  background: #FFB800;
  border-radius: 20px;
}

.btn-rood {
  width: 125px;
  height: 50px;
  background: #FF4444;
  border-radius: 20px;
}

.btn-roze {
  width: 125px;
  height: 50px;
  background: #FF66F9;
  border-radius: 20px;
}

.btn-blauw {
  width: 125px;
  height: 50px;
  background: #2A8CFF;
  border-radius: 20px;
}

.btn-groen {
  width: 125px;
  height: 50px;
  background: #19F571;
  border-radius: 20px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

 <h1>Hi, welcome to your <br><strong>smart</strong>lamp</h1>
 <h3>It's <span class="status">light</span> outside, turn lights <span class="status">off</span>!</h3>

<div class='big-container'>

<div class='container'>
 <div class= 'lamp-mode'> 
  <h4 class='spacing-title'>Lamp mode</h4>
  <div class='result-mode'>
  <div class='btn-lampmode' onclick="location.href='/set_onMode'">
     <p class="btn-on-off on">ON</p>
  </div>
    <div class='btn-lampmode' onclick="location.href='/set_offMode'">
     <p class="btn-on-off off">OFF</p>
  </div>
  <p> Your light is on! </p>
  </div>
 </div>
  
<div class= 'atmosphere-light'> 
  <div onclick="location.href='/set_naturalColor'"><p>Natural light</p></div>
</div>

<div class= 'atmosphere-light'> 
  <div onclick="location.href='/set_whiteColor'"><p>White light</p></div>
</div>
</div>

<div class= 'color-party'> 
    <h4 class='spacing-title'>Color party</h4>
    <div class= 'all-colors'> 
    <div class='btn-oranje' onclick="location.href='/set_orangeColor'"></div>
    <div class='btn-rood' onclick="location.href='/set_redColor'"></div>
    <div class='btn-roze' onclick="location.href='/set_pinkColor'"></div>
    <div class='btn-blauw' onclick="location.href='/set_blueColor'"></div>
   <div class='btn-groen' onclick="location.href='/set_greenColor'"></div>
    </div>
</div>
</div>

<div class="intensive-container">
  <div class="intensivetitle-container">
    <h4> Intensive </h4>
  
<span id="servoPos"></span>
  </div>
      <div class="slider">
    <input class="slider" type="range" value="150" min="0" max="180" id="servoSlider" onChange="servo(this.value)"></input>

  <p> Let’s slide your brightness </p>
  </div>
</div>
  <script>
  /*
 var slider = document.getElementById("speedRange");
  var output = document.getElementById("speed");
  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value; 
    sendSlider(this.id, this.value);
  }

  function sendSlider(slider, value){
    var xhr = new XMLHttpRequest();
    var url = "/" + slider + "=" + value;
    xhr.open("GET", url, true);
    xhr.send();  */

    
  }


  
      var slider= document.getElementById('servoSlider');
      var servoP= document.getElementById('servoPos';

      servoP.innerHTML= slider.value;
      slider.oninput= function(){
        slider.value= this.value;
        servoP.innerHTML= this.value;        
      }
      $.ajaxSetup({timeout:1000});
      function servo(pos){
        $.get('/?value=' + pos + "&");
      }

  /*    var btnOn= document.querySelector(".on");
      var btnOff= document.querySelector(".off";

      btnOn.addEventListener('click', function handleClick(){
        btnOn.textContent= "OFF";
      });*/
     
  </script>
</body>
</html>
)=====";

ARDUINO CODE:

#include <Adafruit_NeoPixel.h>
  #include <ESP8266WiFi.h>
 // #include <WiFiClient.h>
 // #include <ESP8266WebServer.h>
 // #include <ESP8266mDNS.h>
  #include "html_pages.h"
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
  //#include <WiFi.h>

  
  
  //set your access point network credentials
  const char* ssid = "smartlampjaya4";
  const char* password = "smartlamp2027";
  ESP8266WebServer server(80);
  
  #define PIN 14 
  #define NUMPIXELS 12 
  
  //colors possible for smartlamp
  #define RED 255,24,0
  #define ORANGE 255,163,0
  #define YELLOW 237,255,0
  #define GREEN 14,255,0
  #define BLUE 21,3,255
  #define PINK 255,0,249
  #define NATURAL 242,255,72
  #define WHITE 255,255,255
  #define DELAYVAL 0 // delay for half a second
  #define BRIGHT 500
  #define OFF 0,0,0
  #define KLEUR 242,255,72
 

  int eerste = 255;
  int tweede = 25;
  int derde = 255;
  int brightness= 255;
  int LDR= A0 ;//Set A0(Analog Input) for LDR.
  int input_val=0;
  bool aan = true;

  //http get value
  String header;
  
  String valueString= String(5);
  int pos1= 0;
  int pos2= 0;

//const byte led_pin = 2;
  //int intBrightness = 0;

    /* Set up the LED Pin */
 // ledcAttachPin (led_pin, 0);
  /* Set the initial PWM value, the frequency and the nummer of bits for resolution */
 // ledcSetup(0,5000,8);

  
  // When setting up the NeoPixel library, we tell it how many pixels,
  // and which pin to use to send signals. Note that for older NeoPixel
  // strips you might need to change the third parameter -- see the
  // strandtest example for more information on possible values.
  Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
  
  
  void handleRoot(){
    server.send(200, "text/html", page_contents);
  }
  
  void setup()
  {
    Serial.begin(115200);
    
    // We start by connecting to a WiFi network
    Serial.println();
    Serial.println("configuring access point...");
    WiFi.softAP(ssid, password);
    IPAddress IP = WiFi.softAPIP();
    Serial.print("AP IP address: ");
    Serial.println(IP);
    
    server.on("/", handleRoot); 
    server.begin();
    Serial.println("HTTP server started");

    server.on ( "/set_redColor", setRed);
    server.on ( "/set_orangeColor", setOrange);
    server.on ( "/set_greenColor", setGreen);
    server.on ( "/set_blueColor", setBlue);
    server.on ( "/set_pinkColor", setPink);
    server.on ( "/set_naturalColor", setNatural);
    server.on ( "/set_whiteColor", setWhite);
    server.on ( "/set_onMode", setOn);
    server.on ( "/set_offMode", setOff);
  
    pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED) 


    Serial.println();

    
  }
  
  void loop()
  {

     // WiFiClient client = server.available();   // Listen for incoming clients

    server.handleClient();

    input_val = analogRead(LDR);      // Reading Input
   // Serial.print("LDR value is : " );                        
   // Serial.println(input_val);        // Writing input on serial monitor.

        if (header.indexOf("GET /?value=")>=0){
      pos1= header.indexOf("=");
      pos2= header.indexOf("&");
      valueString= header.substring(pos1+1, pos2);
      Serial.println(valueString.toInt());
    }

   
 if(aan) {
   
  if(input_val>300)
    {
      setOff();
      Serial.print("Its Bright, Turn off the LED:");
      aan = true;

  }   

    else
    {
       setOn();
       Serial.print("Its Dark, Turn on the LED:");
       aan = true;
  }     
  }
 }
  
 
 


  void setRed() { 
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" ); 
      eerste = 255;
      tweede = 24;
      derde = 0;
      aan =true;
     
      
   
  }

   void setPink() {
    
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" ); 
      eerste = 255;
      tweede = 0;
      derde = 249;
        aan =true;
      
 
  }

  void setOrange() {  
     
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" );   
      eerste = 255;
      tweede = 163;
      derde = 0;  
        aan =true;
  
  } 
  
  void setGreen() { 
    
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" );  
      eerste = 14;
      tweede = 255;
      derde = 0;  
        aan =true;
 

      
  } 

  void setBlue() {  
       
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" ); 
      eerste = 21;
      tweede = 3;
      derde = 255;
        aan =true;
  
  } 

  
  void setNatural() {  
      
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" ); 
      eerste = 242;
      tweede = 255;
      derde = 72;  
        aan =true;
  }    

  
  void setWhite() {    
         
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" );
      eerste = 255;
      tweede = 255;
      derde = 255;
        aan =true;
  }  
 

 void setOn() { 
      pixels.clear(); // Set all pixel colors to 'off'
      for(int i=0; i<NUMPIXELS; i++) { // For each pixel...
      pixels.setPixelColor(i, pixels.Color(eerste,tweede,derde));
      pixels.show();   // Send the updated pixel colors to the hardware.
      delay(DELAYVAL); // Pause before next pass through loop  
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'></SCRIPT>" ); 
      aan = true;  
  }    
  } 

 void setOff() { 
    pixels.clear(); // Set all pixel colors to 'off'
      for(int i=0; i<NUMPIXELS; i++) { // For each pixel...
      pixels.setPixelColor(i, pixels.Color(OFF));
      pixels.show();   // Send the updated pixel colors to the hardware.
      delay(DELAYVAL); // Pause before next pass through loop  
      server.send ( 200, "text/html", "<SCRIPT language='JavaScript'>window.location='/';</SCRIPT>" );  
      aan = false; 
     
  }    
  }

Brightness Slider for my Neopixel using ESP8266 – – Arduino – Forum

[Solved] Brightness Slider for my Neopixel using ESP8266

Support Us

Quick Navigation

Common Pages

Language

Forum Search

Topic Tags

Recent Forum Topics

2024

Recent Forum Post

2024

Interesting Links

New Downloads

Amazon Ads