I want to create a brightness slider for my Neopixel, using ESP8266

Using Arduino Project Guidance
1

Hi everyone!

I'm currently working on a project where I'm trying to create my own smartlamp using the neopixel.
I'm using the Arduino ESP8266 and have used a Soft Access Point for the connection.

Currently I succeeded in creating buttons to change the color of the Neopixels and connected a LDR to see when the light should go on (when it's dark).
Now I'm struggling with connecting my HTML slider to the Arduino code. I want to receive the values of the slider to be able to manage the brightness of the lamp.
I already created the slider, but I'm stuck in Arduino. I have to connect the Neopixel-brightness to the value of the slider.

Does anyone knows how I can fix this?

This is my code:

HTML & CSS & JAVASCRIPT 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; 
     
  }    
  }

284451152_1429702104117373_2492990498145380288_n
284451152_1429702104117373_2492990498145380288_n1536×2048 214 KB

2

use code tags </> it makes you code more readable
have alook at help-with-esp8266-web-servo-server-and-javascript-sliders and esp32-web-server-websocket-sliders - they are for the ESP32 but the HTML etc should help

3

Bonjour ! Pouvez vous formater votres code avec le raccourci Ctrl+T ?
Puis nous le partager en utilisant les balises de code ? Ce sera beaucoup plus lisible.
Et vous voulez que l'on vous aide à intégrer un curseur à votre code, c'est bien çà ? Si c'est bien ça, confirmez et vous pouvez aussi faire des recherches.

4

Have not rooked at your code.

Brightness control on Neopixel strip should be easy.

As you might be aware, 255/255/255 and 127/127/127 are both white.

Your slider can be mapped from 0 to 100.

Use this value to adjust the R/G/B values.

Show us a good schematic of your proposed circuit.
Show us a good image of your ‘actual’ wiring.
Give links to components.

In the Arduino IDE, use Ctrl T or CMD T to format your code then copy the complete sketch.
Use the </> icon from the ‘reply menu’ to attach the copied sketch.

5

Thanks for answering! I updated my comment, so I hope it's more clear now.
We already managed to make a change in the global brightness, but we're not succeeding in connecting it to the value of the slider

6

Are you able to print the slider value to the serial monitor ?

We, is this a group effort ?

7

No, that's not working... the difficulty is that I'm using a soft AP and therefore can't call HTTP-requests... (I guess?)

Yes, I'm doing this project with my brother :slight_smile:

9

Look at this example, you should be able to find what you need in the example:

10

As the logic voltage from the ESP is out of spec with NeoPixels, it is recommended that you add a 74HCT14 Hex inverter - two gates cascaded - as a level converter.

Otherwise it may become unreliable down the track, especially if you separate the strip from the logic. And you may find uses for the other HCT14 gates. :grin:

11

Or a transistor :nerd_face: .

:+1:

12

Definitely not a transistor. :astonished:

13

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.