API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 3rd, 2020
264
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
C++ 17.30 KB | None | 0 0
raw download clone embed print report
  1. // Load Wi-Fi library
  2. #include <ESP8266WiFi.h>
  3. #include <LiquidCrystal.h>
  4. #include <Adafruit_NeoPixel.h>
  5. #include <ESP8266WebServer.h>
  6. #include <WiFiClient.h>
  7.  
  8. // Replace with your network credentials
  9. const char* ssid     = "BaeschdeWEGE";
  10. const char* password = "wasistdasfuer1Muesli";
  11.  
  12. // Set web server port number to 80
  13. ESP8266WebServer server(80);
  14.  
  15. IPAddress staticIP(192, 168, 0, 171); //ESP static ip
  16. IPAddress gateway(192, 168, 0, 1);   //IP Address of your WiFi Router (Gateway)
  17. IPAddress subnet(255, 255, 255, 0);  //Subnet mask
  18. IPAddress dns(8,8,8,8);  //DNS
  19. const char* deviceName = "LedBoiiii";
  20. // Variable to store the HTTP request
  21. String header;
  22.  
  23. #define LED_PIN     5
  24. #define NUM_LEDS    300
  25.  
  26. Adafruit_NeoPixel pixels(NUM_LEDS, LED_PIN, NEO_GRB + NEO_KHZ800);
  27. //Define global input variables for LED-Strip
  28. String hue;
  29. String lightness;
  30. String statusConst;
  31. String saturation;
  32. String statusParty;
  33. uint16_t partyspeed;
  34. uint16_t partycolor;
  35. // Current time
  36. unsigned long currentTime = millis();
  37. // Previous time
  38. unsigned long previousTime = 0;
  39. // Define timeout time in milliseconds (example: 2000ms = 2s)
  40. const long timeoutTime = 2000;
  41. //Display
  42.  
  43. const int rs = 4, en = 0, d4 = 12, d5 = 13, d6 = 15, d7 = 3;
  44. LiquidCrystal lcd(rs, en, d4, d5, d6, d7);
  45. //Website ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  46. const char upper[] PROGMEM = R"=====(
  47. <!DOCTYPE html><html>  
  48.    <head><meta name= "viewport " content= "width=device-width, initial-scale=1">
  49.    <link rel= "icon " href= "data:,">
  50.    
  51.    <style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
  52.  
  53.    .button { background-color: #FCFCFC; width: 133px; border: none; color: black; padding: 16px 40px;
  54.    text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
  55.  
  56.    .button2 {background-color: #3B3B3B; width: 133px; border: none; color: white; padding: 16px 40px;
  57.    text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
  58.    </style></head>;
  59.  
  60.    <body style= "background-color:black; "><h1><font color= "white">LED Control Terminal</font></h1>
  61.  
  62.    <p>
  63.    <button class = 'button' ontouchend =  "buttonClick()" onmouseup =  "buttonClick()" id= "buttonConst"><font color= "black">CONST ON</font></button>
  64.    <button class = 'button' ontouchend =  "partyClick()" onmouseup =  "partyClick()" id= "buttonParty"><font color= "black">PARTY ON</font></button>
  65.    </p>
  66.  
  67.  <style>
  68.                      .slider {
  69.                       -webkit-appearance: none;
  70.                       width: 100%;
  71.                       height: 25px;
  72.                       background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
  73.                       outline: none;
  74.                       opacity: 1;
  75.                       -webkit-transition: .2s;
  76.                       transition: opacity .2s;
  77.                      }
  78.                    .slider:hover {
  79.                     opacity: 1;
  80.                     }
  81.                    .slider::-webkit-slider-thumb {
  82.                      -webkit-appearance: none;
  83.                      appearance: none;
  84.                      width: 25px;
  85.                      height: 25px;
  86.                      background: hsl(180, 0%, 80%);
  87.                      cursor: pointer;
  88.                      opacity: 0.7;
  89.                      }
  90.                    .slider::-moz-range-thumb {
  91.                      width: 25px;
  92.                      height: 25px;
  93.                      background: hsl(180, 0%, 80%);
  94.                      cursor: pointer;
  95.                      opacity: 0.7;
  96.                    }
  97.                    .sliderLightness {
  98.                      -webkit-appearance: none;
  99.                      width: 100%;
  100.                      height: 25px;
  101.                      background: linear-gradient(to right, hsl(0, 100%, 0%), hsl(0, 100%, 50%), hsl(0, 100%, 100%));
  102.                      outline: none;
  103.                      opacity: 1;
  104.                      -webkit-transition: .2s;
  105.                      transition: opacity .2s;
  106.                    }
  107.                   .sliderLightness:hover {
  108.                      opacity: 1;
  109.                    }
  110.                   .sliderLightness::-webkit-slider-thumb {
  111.                      -webkit-appearance: none;
  112.                      appearance: none;
  113.                      width: 25px;
  114.                      height: 25px;
  115.                      background: hsl(180, 0%, 80%);
  116.                      cursor: pointer;
  117.                      opacity: 0.7;
  118.                    }
  119.                   .sliderLightness::-moz-range-thumb {
  120.                      width: 25px;
  121.                      height: 25px;
  122.                      background: hsl(180, 0%, 80%);
  123.                      cursor: pointer;
  124.                      opacity: 0.7;
  125.                    }
  126.  
  127.                   .sliderSaturation {
  128.                      -webkit-appearance: none;
  129.                      width: 100%;
  130.                      height: 25px;
  131.                      background: linear-gradient(to right, hsl(0, 0%, 50%), hsl(0, 50%, 50%), hsl(0, 100%, 50%));
  132.                      outline: none;
  133.                      opacity: 1;
  134.                      -webkit-transition: .2s;
  135.                      transition: opacity .2s;
  136.                    }
  137.                   .sliderSaturation:hover {
  138.                      opacity: 1;
  139.                    }
  140.                   .sliderSaturation::-webkit-slider-thumb {
  141.                      -webkit-appearance: none;
  142.                      appearance: none;
  143.                      width: 25px;
  144.                      height: 25px;
  145.                      background: hsl(180, 0%, 80%);
  146.                      cursor: pointer;
  147.                      opacity: 0.7;
  148.                    }
  149.                   .sliderSaturation::-moz-range-thumb {
  150.                      width: 25px;
  151.                      height: 25px;
  152.                      background: hsl(180, 0%, 80%);
  153.                      cursor: pointer;
  154.                      opacity: 0.7;
  155.                    }
  156.                   .sliderPartyspeed {
  157.                      -webkit-appearance: none;
  158.                      width: 100%;
  159.                      height: 25px;
  160.                      background: Grey;
  161.                      outline: none;
  162.                      opacity: 1;
  163.                      -webkit-transition: .2s;
  164.                      transition: opacity .2s;
  165.                    }
  166.                   .sliderPartyspeed:hover {
  167.                      opacity: 1;
  168.                    }
  169.                   .sliderPartyspeed::-webkit-slider-thumb {
  170.                      -webkit-appearance: none;
  171.                      appearance: none;
  172.                      width: 25px;
  173.                      height: 25px;
  174.                      background: hsl(180, 0%, 80%);
  175.                      cursor: pointer;
  176.                      opacity: 0.7;
  177.                    }
  178.                   .sliderPartyspeed::-moz-range-thumb {
  179.                      width: 25px;
  180.                      height: 25px;
  181.                      background: hsl(180, 0%, 80%);
  182.                      cursor: pointer;
  183.                      opacity: 0.7;
  184.                    }
  185.  </style>
  186.  <div class= "slidecontainer">"
  187.                    <input ontouchend =  "sliderClick() " onmouseup =  "sliderClick()" type= "range" min= "0" max= "359" class= "slider" id= "hue">
  188.   </div><br>
  189.   <div class= "slidecontainer">
  190.                 <input ontouchend =  "sliderClick() " onmouseup =  "sliderClick()" type= "range" min= "0" max= "100" class= "sliderLightness" id= "lightness">
  191.   </div><br>
  192.   <div class= "slidecontainer">
  193.                 <input ontouchend =  "sliderClick() " onmouseup =  "sliderClick()" type= "range" min= "0" max= "100" value = "100" class= "sliderSaturation" id= "saturation">
  194.   </div><br>
  195.   <div class= "slidecontainer">
  196.                 <input ontouchend =  "sliderClick()" onmouseup = "sliderClick()" type= "range" min= "10" max= "300" class= "sliderPartyspeed" id= "partyspeed">
  197.   </div>
  198.   <script type= "text/javascript">
  199.             (function (){
  200.                     const urlParams = new URLSearchParams(window.location.search);
  201.                     const x = document.getElementById("partyspeed");
  202.                     document.getElementById( "hue").value = urlParams.get('hue');
  203.                     document.getElementById( "hue").innerHTML = urlParams.get('hue');
  204.                     document.getElementById( "lightness").value = urlParams.get('lightness');
  205.                     document.getElementById( "lightness").innerHTML = urlParams.get('lightness');
  206.                     document.getElementById( "saturation").value = urlParams.get('saturation');
  207.                     document.getElementById( "saturation").innerHTML = urlParams.get('saturation');
  208.                     document.getElementById( "partyspeed").value = urlParams.get('partyspeed');
  209.                     document.getElementById( "partyspeed").innerHTML = urlParams.get('partyspeed');
  210.  
  211.                     if (urlParams.get('statusConst') == 1){
  212.                         document.getElementById( "buttonConst").className = "button";
  213.                         document.getElementById( "buttonConst").innerHTML = "Const ON";
  214.                     } else{
  215.                         document.getElementById( "buttonConst").className = "button2";
  216.                         document.getElementById( "buttonConst").innerHTML = "Const OFF";
  217.                     }
  218.  
  219.                     if (urlParams.get('statusParty') == 1){
  220.                         document.getElementById( "buttonParty").className = "button";
  221.                         document.getElementById( "buttonParty").innerHTML = "Party ON";
  222.                         x.style.display = "block";
  223.                     } else{
  224.                         document.getElementById( "buttonParty").className = "button2";
  225.                         document.getElementById( "buttonParty").innerHTML = "Party OFF";
  226.                         x.style.display = "none";
  227.                     }
  228.  
  229.             })();
  230.                
  231.             function partyClick(){            
  232.  
  233.                 const x = document.getElementById("partyspeed");
  234.  
  235.                 const buttontoggle = document.getElementById("buttonParty");
  236.  
  237.                 const urlParams = new URLSearchParams(window.location.search);
  238.                 var pfad;
  239.                 if (urlParams.get('statusParty') == 1){
  240.                     urlParams.set( "statusConst", 0);
  241.                     urlParams.set( "statusParty", 0);
  242.                     urlParams.set( "hue", document.getElementById( "hue").value);
  243.                     urlParams.set( "lightness", document.getElementById( "lightness").value);
  244.                     urlParams.set( "saturation", document.getElementById( "saturation").value);
  245.                     pfad = "/PartyOff";
  246.                     buttontoggle.className = "button";
  247.                     buttontoggle.innerHTML = "Party OFF";
  248.                 } else{
  249.                     urlParams.set( "statusConst", 0);
  250.                     urlParams.set( "statusParty", 1);
  251.                     urlParams.set( "hue", document.getElementById( "hue").value);
  252.                     urlParams.set( "lightness", document.getElementById( "lightness").value);
  253.                     urlParams.set( "saturation", document.getElementById( "saturation").value);
  254.                     pfad = "/PartyOn";
  255.                     buttontoggle.className = "button2";
  256.                     buttontoggle.innerHTML = "Party ON";
  257.                 }
  258.                
  259.                 window.location.href = pfad+'?'+urlParams.toString();
  260.             }
  261.             function buttonClick(){
  262.                 var pfad;
  263.                 const urlParams = new URLSearchParams(window.location.search);
  264.                 console.log('bierbierbier');
  265.                 //var buttontoggle = document.getElementById("buttonConst");
  266.                 const buttontoggle = document.getElementById("buttonConst");
  267.                 if (urlParams.get('statusConst') == 1){
  268.                     urlParams.set( "statusConst", 0);
  269.                     urlParams.set( "hue", document.getElementById( "hue").value);
  270.                     urlParams.set( "lightness", document.getElementById( "lightness").value);
  271.                     urlParams.set( "saturation", document.getElementById( "saturation").value);
  272.                     pfad ="/Off";
  273.                     buttontoggle.className = "button2";
  274.                     buttontoggle.innerHTML = "Const OFF";
  275.                
  276.                 } else{
  277.                     urlParams.set( "statusParty", 0);
  278.                     urlParams.set( "statusConst", 1);
  279.                     urlParams.set( "hue", document.getElementById( "hue").value);
  280.                     urlParams.set( "lightness", document.getElementById( "lightness").value);
  281.                     urlParams.set( "saturation", document.getElementById( "saturation").value);
  282.                     pfad ="/ConstOn";
  283.                     buttontoggle.className = "button";
  284.                     buttontoggle.innerHTML = "Const ON";
  285.                 }
  286.                
  287.                 window.location.href = pfad+'?'+urlParams.toString();
  288.                 console.log(window.location.href);
  289.             }
  290.             function sliderClick(){
  291.                 const urlParams = new URLSearchParams(window.location.search);
  292.                 urlParams.set( "hue", document.getElementById( "hue").value);
  293.                 urlParams.set( "lightness", document.getElementById( "lightness").value);
  294.                 urlParams.set( "saturation", document.getElementById( "saturation").value);
  295.            
  296.                 if (typeof partyspeed != 'undefined') {
  297.                     urlParams.set( "partyspeed", document.getElementById( "partyspeed").value);
  298.                     var outputPartyspeed = document.getElementById( "partyspeed");
  299.                 }
  300.                 var outputHue = document.getElementById( "hue");
  301.                 var outputLightness = document.getElementById( "lightness");
  302.                 var outputSaturation = document.getElementById( "saturation");
  303.                 window.location.search =urlParams.toString();
  304.             } </script>
  305.  
  306.   </body></html>
  307. )=====";
  308. //Handler Functions
  309. //////////////////////////////////////////////////////////////
  310. void handleRoot(){
  311.    Serial.println("You called root page");
  312.    //server.setContentLength(13898);
  313.    server.send_P(200, "text/html", upper);
  314.    
  315. }
  316. void handleConst(){
  317.    Serial.println("You turned on a Constant Color");
  318.    statusConst = "1";
  319.    statusParty = "0";
  320.    hue = server.arg("hue");
  321.    saturation = server.arg("saturation");
  322.    lightness = server.arg("lightness");
  323.    uint16_t hueint = round(hue.toFloat() * (65536 / 360));
  324.    uint8_t lightnessint = round(lightness.toFloat() * (2.55));
  325.    uint8_t saturationint = round(saturation.toFloat() * (2.55));
  326.    pixels.fill(pixels.ColorHSV(hueint, saturationint, lightnessint), 0, 300);    
  327.    pixels.show();
  328. }
  329. void handleOff(){
  330.    Serial.println("You turned off a Constant Color");
  331.    statusConst = "0";
  332.    statusParty = "0";
  333.    pixels.clear();
  334.    pixels.show();    
  335. }
  336. void handleParty(){
  337.    Serial.println("You turned on the Party");
  338.    lightness = server.arg("lightness");
  339.    statusConst = "0";
  340.    statusParty = "1";
  341. }
  342. /////////////////////////////
  343. // Setup
  344. /////////////////////////////
  345. void setup() {
  346.  
  347.  statusParty = "0";
  348.  statusConst = "0";
  349.  ESP.wdtEnable(10000);
  350.  Serial.begin(9600);
  351.  // Connect to Wi-Fi network with SSID and password
  352.  Serial.print("Connecting to ");
  353.  Serial.println(ssid);
  354.  WiFi.hostname(deviceName);      // DHCP Hostname (useful for finding device for static lease)
  355.  WiFi.config(staticIP, subnet, gateway, dns);
  356.  WiFi.begin(ssid, password);
  357.  WiFi.mode(WIFI_STA);
  358.  while (WiFi.status() != WL_CONNECTED) {
  359.    delay(500);
  360.    Serial.print(".");
  361.  }
  362.  // Print local IP address and start web server
  363.  Serial.println("");
  364.  Serial.println("WiFi connected.");
  365.  Serial.println("IP address: ");
  366.  String timepassed = String(millis() / 1000);
  367.  
  368.  server.on("/", handleRoot);      //Which routine to handle at root location. This is display page
  369.  server.on("/PartyOn", handleParty);
  370.  server.on("/ConstOn", handleConst);
  371.  server.on("/Off", handleOff);
  372.  
  373.  Serial.println("Time to connect:" + timepassed + "s");
  374.  Serial.println(WiFi.localIP());
  375.  server.begin();
  376.  
  377.  lcd.begin(16, 2);
  378.  lcd.print("Ip-Adresse:");
  379.  lcd.setCursor(0, 1);
  380.  lcd.print(WiFi.localIP());
  381.  
  382.  pixels.begin();
  383.  partycolor = 0;
  384. }
  385. //Utility Functions
  386. // Function to check if string is a number
  387. boolean isValidNumber(String str) {
  388.  for (byte i = 0; i < str.length(); i++)
  389.  {
  390.    if (!isDigit(str.charAt(i))) return false;
  391.  }
  392.  return true;
  393. }
  394. //function for the partymode := change color once per loop
  395. void Party() {
  396.  if (statusParty.toInt() == 1) {
  397.    if (partycolor >= 65530) {
  398.      partycolor = 0;
  399.    } else {
  400.      partycolor = partycolor + partyspeed;
  401.    }
  402.    uint8_t lightnessint = round(lightness.toFloat() * (2.55));
  403.    pixels.fill(pixels.ColorHSV(partycolor, 255, lightnessint), 0, 300);
  404.  
  405.  
  406.    pixels.show();
  407.  } else if (statusConst.toInt() == 0) {
  408.    pixels.clear();
  409.    pixels.show();
  410.  }
  411. }
  412.  
  413. void loop() {
  414.    server.handleClient();
  415.    Party();          
  416. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!