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 Reactions
1,201 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: 2705
 

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
Share: