<?xml version="1.0" encoding="UTF-8"?>        <rss version="2.0"
             xmlns:atom="http://www.w3.org/2005/Atom"
             xmlns:dc="http://purl.org/dc/elements/1.1/"
             xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
             xmlns:admin="http://webns.net/mvcb/"
             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:content="http://purl.org/rss/1.0/modules/content/">
        <channel>
            <title>
									Brightness Slider for my Neopixel using ESP8266 - Arduino				            </title>
            <link>https://www.tweaking4all.com/forum/arduino/brightness-slider-for-my-neopixel-using-esp8266/</link>
            <description>Tweaking4All.com Discussion Board</description>
            <language>en-US</language>
            <lastBuildDate>Tue, 17 Mar 2026 00:34:25 +0000</lastBuildDate>
            <generator>wpForo</generator>
            <ttl>60</ttl>
							                    <item>
                        <title>RE: Brightness Slider for my Neopixel using ESP8266</title>
                        <link>https://www.tweaking4all.com/forum/arduino/brightness-slider-for-my-neopixel-using-esp8266/#post-4235</link>
                        <pubDate>Wed, 01 Jun 2022 09:47:42 +0000</pubDate>
                        <description><![CDATA[Hi Yanelle,
welcome to the forum 😊 
That&#039;s quite a bit of code you&#039;ve got there 😜 
Since you&#039;re using the NeoPixel Library, you could use the setBrightness function.This function sets the...]]></description>
                        <content:encoded><![CDATA[<p>Hi Yanelle,</p>
<p>welcome to the forum 😊 </p>
<p>That's quite a bit of code you've got there 😜 </p>
<p>Since you're using the NeoPixel Library, you could use the <a title="NeoPixel - Class Reference" href="https://adafruit.github.io/Adafruit_NeoPixel/html/class_adafruit___neo_pixel.html#aa05f7d37828c43fef00e6242dcf75959" target="_blank" rel="noopener">setBrightness function</a>.<br />This function sets the max brightness for the entire strip, scaling values automatically.<br />For example:</p>
<pre contenteditable="false">strip.setBrightness(128);</pre>
<p>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).</p>
<p>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.</p>
<p>Hope this helps ...</p>]]></content:encoded>
						                            <category domain="https://www.tweaking4all.com/forum/arduino/">Arduino</category>                        <dc:creator>Hans</dc:creator>
                        <guid isPermaLink="true">https://www.tweaking4all.com/forum/arduino/brightness-slider-for-my-neopixel-using-esp8266/#post-4235</guid>
                    </item>
				                    <item>
                        <title>Brightness Slider for my Neopixel using ESP8266</title>
                        <link>https://www.tweaking4all.com/forum/arduino/brightness-slider-for-my-neopixel-using-esp8266/#post-4228</link>
                        <pubDate>Fri, 27 May 2022 11:29:20 +0000</pubDate>
                        <description><![CDATA[Hi guys! 
I&#039;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&#039;m struggl...]]></description>
                        <content:encoded><![CDATA[<p>Hi guys! </p>
<p>I'm working on a smart lamp and would like to add a slider so I can adjust the brightness of my Neopixel lamp. <br />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...</p>
<p>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.</p>
<p>This is my code:</p>
<pre contenteditable="false">const char page_contents[] PROGMEM = R"=====(
&lt;!DOCTYPE html&gt;
&lt;html lang='en'&gt;
&lt;head&gt;
    &lt;meta charset='UTF-8'&gt;
    &lt;meta http-equiv='X-UA-Compatible' content='IE=edge'&gt;
    &lt;meta name='viewport' content='width=device-width'&gt;
    &lt;title&gt;Smart Lamp&lt;/title&gt;
    &lt;link rel='preconnect' href='https://fonts.googleapis.com'&gt;
    &lt;link rel='preconnect' href='https://fonts.gstatic.com' crossorigin&gt;
    &lt;link href='https://fonts.googleapis.com/css2?family=Montserrat&amp;display=swap' rel='stylesheet'&gt;
    &lt;style&gt; 
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;
}

&lt;/style&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

 &lt;h1&gt;Hi, welcome to your &lt;br&gt;&lt;strong&gt;smart&lt;/strong&gt;lamp&lt;/h1&gt;
 &lt;h3&gt;It's &lt;span class="status"&gt;light&lt;/span&gt; outside, turn lights &lt;span class="status"&gt;off&lt;/span&gt;!&lt;/h3&gt;

&lt;div class='big-container'&gt;

&lt;div class='container'&gt;
 &lt;div class= 'lamp-mode'&gt; 
  &lt;h4 class='spacing-title'&gt;Lamp mode&lt;/h4&gt;
  &lt;div class='result-mode'&gt;
  &lt;div class='btn-lampmode' onclick="location.href='/set_onMode'"&gt;
     &lt;p class="btn-on-off on"&gt;ON&lt;/p&gt;
  &lt;/div&gt;
    &lt;div class='btn-lampmode' onclick="location.href='/set_offMode'"&gt;
     &lt;p class="btn-on-off off"&gt;OFF&lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt; Your light is on! &lt;/p&gt;
  &lt;/div&gt;
 &lt;/div&gt;
  
&lt;div class= 'atmosphere-light'&gt; 
  &lt;div onclick="location.href='/set_naturalColor'"&gt;&lt;p&gt;Natural light&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class= 'atmosphere-light'&gt; 
  &lt;div onclick="location.href='/set_whiteColor'"&gt;&lt;p&gt;White light&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class= 'color-party'&gt; 
    &lt;h4 class='spacing-title'&gt;Color party&lt;/h4&gt;
    &lt;div class= 'all-colors'&gt; 
    &lt;div class='btn-oranje' onclick="location.href='/set_orangeColor'"&gt;&lt;/div&gt;
    &lt;div class='btn-rood' onclick="location.href='/set_redColor'"&gt;&lt;/div&gt;
    &lt;div class='btn-roze' onclick="location.href='/set_pinkColor'"&gt;&lt;/div&gt;
    &lt;div class='btn-blauw' onclick="location.href='/set_blueColor'"&gt;&lt;/div&gt;
   &lt;div class='btn-groen' onclick="location.href='/set_greenColor'"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="intensive-container"&gt;
  &lt;div class="intensivetitle-container"&gt;
    &lt;h4&gt; Intensive &lt;/h4&gt;
  
&lt;span id="servoPos"&gt;&lt;/span&gt;
  &lt;/div&gt;
      &lt;div class="slider"&gt;
    &lt;input class="slider" type="range" value="150" min="0" max="180" id="servoSlider" onChange="servo(this.value)"&gt;&lt;/input&gt;

  &lt;p&gt; Let’s slide your brightness &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
  &lt;script&gt;
  /*
 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 + "&amp;");
      }

  /*    var btnOn= document.querySelector(".on");
      var btnOff= document.querySelector(".off";

      btnOn.addEventListener('click', function handleClick(){
        btnOn.textContent= "OFF";
      });*/
     
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
)=====";</pre>
<p> </p>
<p>ARDUINO CODE:</p>
<pre contenteditable="false">#include &lt;Adafruit_NeoPixel.h&gt;
  #include &lt;ESP8266WiFi.h&gt;
 // #include &lt;WiFiClient.h&gt;
 // #include &lt;ESP8266WebServer.h&gt;
 // #include &lt;ESP8266mDNS.h&gt;
  #include "html_pages.h"
  #include &lt;ESPAsyncTCP.h&gt;
  #include &lt;ESPAsyncWebServer.h&gt;
  //#include &lt;WiFi.h&gt;

  
  
  //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=")&gt;=0){
      pos1= header.indexOf("=");
      pos2= header.indexOf("&amp;");
      valueString= header.substring(pos1+1, pos2);
      Serial.println(valueString.toInt());
    }

   
 if(aan) {
   
  if(input_val&gt;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", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" ); 
      eerste = 255;
      tweede = 24;
      derde = 0;
      aan =true;
     
      
   
  }

   void setPink() {
    
      server.send ( 200, "text/html", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" ); 
      eerste = 255;
      tweede = 0;
      derde = 249;
        aan =true;
      
 
  }

  void setOrange() {  
     
      server.send ( 200, "text/html", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" );   
      eerste = 255;
      tweede = 163;
      derde = 0;  
        aan =true;
  
  } 
  
  void setGreen() { 
    
      server.send ( 200, "text/html", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" );  
      eerste = 14;
      tweede = 255;
      derde = 0;  
        aan =true;
 

      
  } 

  void setBlue() {  
       
      server.send ( 200, "text/html", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" ); 
      eerste = 21;
      tweede = 3;
      derde = 255;
        aan =true;
  
  } 

  
  void setNatural() {  
      
      server.send ( 200, "text/html", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" ); 
      eerste = 242;
      tweede = 255;
      derde = 72;  
        aan =true;
  }    

  
  void setWhite() {    
         
      server.send ( 200, "text/html", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" );
      eerste = 255;
      tweede = 255;
      derde = 255;
        aan =true;
  }  
 

 void setOn() { 
      pixels.clear(); // Set all pixel colors to 'off'
      for(int i=0; i&lt;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", "&lt;SCRIPT language='JavaScript'&gt;&lt;/SCRIPT&gt;" ); 
      aan = true;  
  }    
  } 

 void setOff() { 
    pixels.clear(); // Set all pixel colors to 'off'
      for(int i=0; i&lt;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", "&lt;SCRIPT language='JavaScript'&gt;window.location='/';&lt;/SCRIPT&gt;" );  
      aan = false; 
     
  }    
  } 
</pre>]]></content:encoded>
						                            <category domain="https://www.tweaking4all.com/forum/arduino/">Arduino</category>                        <dc:creator>Anonymous</dc:creator>
                        <guid isPermaLink="true">https://www.tweaking4all.com/forum/arduino/brightness-slider-for-my-neopixel-using-esp8266/#post-4228</guid>
                    </item>
							        </channel>
        </rss>
		