led brightness website nodemcu

Solutions on MaxInterview for led brightness website nodemcu by the best coders in the world

showing results for - "led brightness website nodemcu"
06 Jan 2019
1/*********
2  Rui Santos
3  Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcu-web-server-slider-pwm/
4  
5  Permission is hereby granted, free of charge, to any person obtaining a copy
6  of this software and associated documentation files.
7  
8  The above copyright notice and this permission notice shall be included in all
9  copies or substantial portions of the Software.
10*********/
11
12// Import required libraries
13#include <ESP8266WiFi.h>
14#include <ESPAsyncTCP.h>
15#include <ESPAsyncWebServer.h>
16
17// Replace with your network credentials
18const char* ssid = "REPLACE_WITH_YOUR_SSID";
19const char* password = "REPLACE_WITH_YOUR_PASSWORD";
20
21const int output = 2;
22
23String sliderValue = "0";
24
25const char* PARAM_INPUT = "value";
26
27// Create AsyncWebServer object on port 80
28AsyncWebServer server(80);
29
30const char index_html[] PROGMEM = R"rawliteral(
31<!DOCTYPE HTML><html>
32<head>
33  <meta name="viewport" content="width=device-width, initial-scale=1">
34  <title>ESP Web Server</title>
35  <style>
36    html {font-family: Arial; display: inline-block; text-align: center;}
37    h2 {font-size: 2.3rem;}
38    p {font-size: 1.9rem;}
39    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
40    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
41      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
42    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
43    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
44  </style>
45</head>
46<body>
47  <h2>ESP Web Server</h2>
48  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
49  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" value="%SLIDERVALUE%" step="1" class="slider"></p>
50<script>
51function updateSliderPWM(element) {
52  var sliderValue = document.getElementById("pwmSlider").value;
53  document.getElementById("textSliderValue").innerHTML = sliderValue;
54  console.log(sliderValue);
55  var xhr = new XMLHttpRequest();
56  xhr.open("GET", "/slider?value="+sliderValue, true);
57  xhr.send();
58}
59</script>
60</body>
61</html>
62)rawliteral";
63
64// Replaces placeholder with button section in your web page
65String processor(const String& var){
66  //Serial.println(var);
67  if (var == "SLIDERVALUE"){
68    return sliderValue;
69  }
70  return String();
71}
72
73void setup(){
74  // Serial port for debugging purposes
75  Serial.begin(115200);
76
77  analogWrite(output, sliderValue.toInt());
78
79  // Connect to Wi-Fi
80  WiFi.begin(ssid, password);
81  while (WiFi.status() != WL_CONNECTED) {
82    delay(1000);
83    Serial.println("Connecting to WiFi..");
84  }
85
86  // Print ESP Local IP Address
87  Serial.println(WiFi.localIP());
88
89  // Route for root / web page
90  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
91    request->send_P(200, "text/html", index_html, processor);
92  });
93
94  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
95  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
96    String inputMessage;
97    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
98    if (request->hasParam(PARAM_INPUT)) {
99      inputMessage = request->getParam(PARAM_INPUT)->value();
100      sliderValue = inputMessage;
101      analogWrite(output, sliderValue.toInt());
102    }
103    else {
104      inputMessage = "No message sent";
105    }
106    Serial.println(inputMessage);
107    request->send(200, "text/plain", "OK");
108  });
109  
110  // Start server
111  server.begin();
112}
113  
114void loop() {
115  
116}
117
source