SHARE
TWEET

Untitled

a guest Mar 26th, 2020 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Load Wi-Fi library
  2. #include <ESP8266WiFi.h>
  3. #include <FastLED.h>
  4. // Replace with your network credentials
  5. const char* ssid     = "BaeschdeWEGE";
  6. const char* password = "wasistdasfuer1Muesli";
  7.  
  8. // Set web server port number to 80
  9. WiFiServer server(80);
  10.  
  11. // Variable to store the HTTP request
  12. String header;
  13.  
  14. #define LED_PIN     7
  15. #define NUM_LEDS    20
  16.  
  17. CRGB leds[NUM_LEDS];
  18.  
  19.  
  20. // Current time
  21. unsigned long currentTime = millis();
  22. // Previous time
  23. unsigned long previousTime = 0;
  24. // Define timeout time in milliseconds (example: 2000ms = 2s)
  25. const long timeoutTime = 2000;
  26.  
  27. // Function to check if string is a number
  28. boolean isValidNumber(String str){
  29.    for(byte i=0;i<str.length();i++)
  30.    {
  31.       if(!isDigit(str.charAt(i))) return false;
  32.    }
  33.    return true;
  34. }
  35.  
  36. void setup() {
  37.  
  38.   FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);
  39.  
  40.   Serial.begin(115200);
  41.   // Connect to Wi-Fi network with SSID and password
  42.   Serial.print("Connecting to ");
  43.   Serial.println(ssid);
  44.   WiFi.begin(ssid, password);
  45.   while (WiFi.status() != WL_CONNECTED) {
  46.     delay(500);
  47.     Serial.print(".");
  48.   }
  49.   // Print local IP address and start web server
  50.   Serial.println("");
  51.   Serial.println("WiFi connected.");
  52.   Serial.println("IP address: ");
  53.   Serial.println(WiFi.localIP());
  54.   server.begin();
  55. }
  56.  
  57. void loop(){
  58.   WiFiClient client = server.available();   // Listen for incoming clients
  59.  
  60.   if (client) {                             // If a new client connects,
  61.     Serial.println("New Client.");          // print a message out in the serial port
  62.     String currentLine = "";                // make a String to hold incoming data from the client
  63.     currentTime = millis();
  64.     previousTime = currentTime;
  65.     while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
  66.       currentTime = millis();        
  67.       if (client.available()) {             // if there's bytes to read from the client,
  68.         char c = client.read();             // read a byte, then
  69.         Serial.write(c);                    // print it out the serial monitor
  70.         header += c;
  71.         if (c == '\n') {                    // if the byte is a newline character
  72.           // if the current line is blank, you got two newline characters in a row.
  73.           // that's the end of the client HTTP request, so send a response:
  74.           if (currentLine.length() == 0) {
  75.             // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
  76.             // and a content-type so the client knows what's coming, then a blank line:
  77.             client.println("HTTP/1.1 200 OK");
  78.             client.println("Content-type:text/html");
  79.             client.println("Connection: close");
  80.             client.println();
  81.            
  82.             //Gets the Inputs from the URL            
  83.             String hue = header.substring(header.indexOf("hue=")+String("hue=").length(), header.indexOf("hue=")+String("hue=").length()+5);
  84.                 while (!isValidNumber(hue)){
  85.                     hue = hue.substring(0, hue.length()-1);
  86.                 }
  87.             String lightness = header.substring(header.indexOf("lightness=")+String("lightness=").length(), header.indexOf("lightness=")+String("lightness=").length()+3);
  88.                 while (!isValidNumber(lightness)){
  89.                     lightness = lightness.substring(0, lightness.length()-1);
  90.                 }
  91.             String statusConst = header.substring(header.indexOf("statusConst=")+String("statusConst=").length(), header.indexOf("statusConst=")+String("statusConst=").length()+1);
  92.                            
  93.                
  94.             // Display the HTML web page
  95.             client.println("<!DOCTYPE html><html>");
  96.             client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
  97.             client.println("<link rel=\"icon\" href=\"data:,\">");
  98.             // CSS to style the on/off buttons
  99.             // Feel free to change the background-color and font-size attributes to fit your preferences
  100.             client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
  101.             client.println(".button { background-color: #FCFCFC; width: 133px; border: none; color: white; padding: 16px 40px;"
  102.                            "text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
  103.                            
  104.             client.println(".button2 {background-color: #3B3B3B; width: 133px; border: none; color: black; padding: 16px 40px;"
  105.                             "text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}</style></head>;"
  106.                             );
  107.            
  108.             // Web Page Heading
  109.             client.println("<body style=\"background-color:black;\"><h1><font color=\"white\">LED Control Terminal</font></h1>");
  110.            
  111.             // If the output5State is off, it displays the ON button    
  112.             if(statusConst.toInt() == 1){  
  113.                 client.println("<p><button class = 'button' ontouchend = \"buttonClick()\" onmouseup = \"buttonClick()\" id=\"button\"><font color=\"black\">ON</font></button></p>");
  114.             } else{
  115.                 client.println("<p><button class = 'button2' ontouchend = \"buttonClick()\" onmouseup = \"buttonClick()\" id=\"button\"><font color=\"white\">OFF</font></button></p>");
  116.             }
  117.            
  118.             client.println("<p>"+hue+"</p>");
  119.             client.println("<p>"+lightness+"</p>");
  120.             //css for sliders
  121.             client.println("<style>"
  122.                             ".slider {"
  123.                               "-webkit-appearance: none;"
  124.                               "width: 100%;"
  125.                               "height: 25px;"
  126.                               "background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);"
  127.                               "outline: none;"
  128.                               "opacity: 1;"
  129.                               "-webkit-transition: .2s;"
  130.                               "transition: opacity .2s;"
  131.                             "}"
  132.                            
  133.                             ".slider:hover {"
  134.                               "opacity: 1;"
  135.                             "}"
  136.                            
  137.                             ".slider::-webkit-slider-thumb {"
  138.                               "-webkit-appearance: none;"
  139.                               "appearance: none;"
  140.                               "width: 25px;"
  141.                               "height: 25px;"
  142.                               "background: hsl(180, 0%, 80%);"
  143.                               "cursor: pointer;"
  144.                               "opacity: 0.7;"
  145.                             "}"
  146.                            
  147.                             ".slider::-moz-range-thumb {"
  148.                               "width: 25px;"
  149.                               "height: 25px;"
  150.                               "background: hsl(180, 0%, 80%);"
  151.                               "cursor: pointer;"
  152.                               "opacity: 0.7;"
  153.                             "}"
  154.  
  155.                            ".sliderLightness {"
  156.                               "-webkit-appearance: none;"
  157.                               "width: 100%;"
  158.                               "height: 25px;"
  159.                               "background: linear-gradient(to right, hsl("+hue+", 100%, 0%), hsl("+hue+", 100%, 50%), hsl("+hue+", 100%, 100%));"
  160.                               "outline: none;"
  161.                               "opacity: 1;"
  162.                               "-webkit-transition: .2s;"
  163.                               "transition: opacity .2s;"
  164.                             "}"
  165.                            
  166.                             ".sliderLightness:hover {"
  167.                               "opacity: 1;"
  168.                             "}"
  169.                            
  170.                             ".sliderLightness::-webkit-slider-thumb {"
  171.                               "-webkit-appearance: none;"
  172.                               "appearance: none;"
  173.                               "width: 25px;"
  174.                               "height: 25px;"
  175.                               "background: hsl(180, 0%, 80%);"
  176.                               "cursor: pointer;"
  177.                               "opacity: 0.7;"
  178.                             "}"
  179.                            
  180.                             ".sliderLightness::-moz-range-thumb {"
  181.                               "width: 25px;"
  182.                               "height: 25px;"
  183.                               "background: hsl(180, 0%, 80%);"
  184.                               "cursor: pointer;"
  185.                               "opacity: 0.7;"
  186.                             "}"
  187.                           "</style>");
  188.            
  189.             // create hue slider  
  190.             client.println("<div class=\"slidecontainer\">"
  191.                            "<input ontouchend = \"sliderClick()\" onmouseup = \"sliderClick()\" type=\"range\" min=\"0\" max=\"359\" class=\"slider\" id=\"hue\">"
  192.                            "</div>");
  193.             //create  lightness slider
  194.             client.println("<div class=\"slidecontainer\">"
  195.                            "<input ontouchend = \"sliderClick()\" onmouseup = \"sliderClick()\" type=\"range\" min=\"0\" max=\"100\" class=\"sliderLightness\" id=\"lightness\">"
  196.                            "</div>");
  197.             client.println("<p id=\"hue\"></p>"
  198.                            "<p id=\"lightness\"></p>"
  199.                           );
  200.  
  201.             client.println( "<script type=\"text/javascript\"> "
  202.                             "(function (){"
  203.                             "const urlParams = new URLSearchParams(window.location.search);"
  204.                             "document.getElementById(\"hue\").value = urlParams.get('hue');"
  205.                             "document.getElementById(\"hue\").innerHTML = urlParams.get('hue');"
  206.  
  207.                             "document.getElementById(\"lightness\").value = urlParams.get('lightness');"
  208.                             "document.getElementById(\"lightness\").innerHTML = urlParams.get('lightness');"
  209.                                                      
  210.                             "})();"
  211.                            
  212.                             "function buttonClick(){"
  213.                             "const urlParams = new URLSearchParams(window.location.search);"
  214.                             "console.log('bierbierbier');"
  215.                             "if (urlParams.get('statusConst') == 1){"
  216.                            
  217.                       //        "document.getElementById(\"button\").className = 'button2'; "
  218.                       //        "document.getElementById(\"button\").innerHTML = 'OFF';"
  219.                              
  220.                               "urlParams.set(\"statusConst\", 0);"
  221.                               "urlParams.set(\"hue\", document.getElementById(\"hue\").value);"
  222.                               "urlParams.set(\"lightness\", document.getElementById(\"lightness\").value);"
  223.                             "} else{"
  224.                            
  225.                         //      "document.getElementById(\"button\").className = 'button'; "
  226.                        //       "document.getElementById(\"button\").innerHTML = 'ON';"
  227.                              
  228.                               "urlParams.set(\"statusConst\", 1);"
  229.                               "urlParams.set(\"hue\", document.getElementById(\"hue\").value);"
  230.                               "urlParams.set(\"lightness\", document.getElementById(\"lightness\").value);"
  231.                             "}"
  232.                             "window.location.search =urlParams.toString();"
  233.                             "}"
  234.                        
  235.                            
  236.                             "function sliderClick(){"
  237.                             "const urlParams = new URLSearchParams(window.location.search);"
  238.                             "urlParams.set(\"hue\", document.getElementById(\"hue\").value);"
  239.                             "urlParams.set(\"lightness\", document.getElementById(\"lightness\").value);"
  240.                            
  241.                             "var outputHue = document.getElementById(\"hue\");"
  242.                             "var outputLightness = document.getElementById(\"lightness\");"
  243.                            
  244.                             "window.location.search =urlParams.toString();"
  245.                             ""
  246.                             "} </script>"
  247.                           );
  248.            
  249.             client.println("</body></html>");
  250.            
  251.             // The HTTP response ends with another blank line
  252.             client.println();
  253.             // Break out of the while loop
  254.             break;
  255.           } else { // if you got a newline, then clear currentLine
  256.             currentLine = "";
  257.           }
  258.         } else if (c != '\r') {  // if you got anything else but a carriage return character,
  259.           currentLine += c;      // add it to the end of the currentLine
  260.         }
  261.       }
  262.     }
  263.     // Clear the header variable
  264.     header = "";
  265.     // Close the connection
  266.     client.stop();
  267.     Serial.println("Client disconnected.");
  268.     Serial.println("");
  269.    }
  270.    
  271.   // LED control
  272.   // Hue adjustment
  273.     hue = round(hue.toInt()*255/360);
  274.     lightness = round(lightness.toInt()*255/100);
  275.     if (statusConst.toInt()==1){
  276.       for (int i = 0; i <= 19; i++) {
  277.         leds[i] = CHSV ( hue,255, lightness);
  278.         FastLED.show();
  279.         delay(40);
  280.       }
  281.     }
  282.  
  283. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top