Page 1 of 1
Forum

Welcome to the Tweaking4All community forums!
When participating, please keep the Forum Rules in mind!

Topics for particular software or systems: Start your topic link with the name of the application or system.
For example “MacOS X – Your question“, or “MS Word – Your Tip or Trick“.

Please note that switching to another language when reading a post will not bring you to the same post, in Dutch, as there is no translation for that post!




Brightness Slider f...
 
Share:
Notifications
Clear all

[Solved] Brightness Slider for my Neopixel using ESP8266

2 Posts
2 Users
0 Likes
1,128 Views
(@Anonymous)
Joined: 1 second ago
Posts: 0
Topic starter  

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; 
     
  }    
  } 

   
ReplyQuote
 Hans
(@hans)
Famed Member Admin
Joined: 11 years ago
Posts: 2660
 

Hi Yanelle,

welcome to the forum 😊 

That's quite a bit of code you've got there 😜 

Since you're using the NeoPixel Library, you could use the setBrightness function.
This function sets the max brightness for the entire strip, scaling values automatically.
For example:

strip.setBrightness(128);

You could use a global variable for that, and read your "button" the same way you read the buttons to change colors (eg. buttons for brightness up and down).

On that note: you may want to test this with the FastLED library - I found it to be faster, and more mature and feature rich than NeoPixel.

Hope this helps ...


   
ReplyQuote

Like what you see and you'd like to help out? 

The best way to help is of course by assisting others with their questions here in the forum, but you can also help us out in other ways:

- Do your shopping at Amazon, it will not cost you anything extra but may generate a small commission for us,
- send a cup of coffee through PayPal ($5, $10, $20, or custom amount),
- become a Patreon,
- donate BitCoin (BTC), or BitCoinCash (BCH).

Share: