Esp8266 LED Dimmer als Arduino Tab.
Dimmer.ino
// ****************************************************************
// Sketch Esp8266 PwmLed Modular(Tab)
// created: Jens Fleischer, 2019-05-09
// last mod: Jens Fleischer, 2020-05-23
// For more information visit: https://fipsok.de
// ****************************************************************
// Hardware: Esp8266, LED mit Vorwiderstand oder Logic Level Mosfet mit LED
// für LED
// LED Kathode an GND
// Vorwiderstand an D5 = GPIO14
// LED Anode an Vorwiderstand
//
// für Mosfet IRF3708
// Source an GND
// Gate an D5 = GPIO14
// Drain an LED Kathode
// LED Anode an V+ ext. Spannungsversorgung
// Esp8266 GND an GND ext. Spannungsversorgung
//
// Software: Esp8266 Arduino Core 2.4.2 - 3.1.0
// Getestet auf: Nodemcu, Wemos D1 Mini Pro
/******************************************************************
Copyright (c) 2019 Jens Fleischer. All rights reserved.
This file is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This file is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
*******************************************************************/
// Diese Version von PwmLed sollte als Tab eingebunden werden.
// #include <ESP8266WebServer.h> muss im Haupttab aufgerufen werden
// Die Funktionalität des ESP8266 Webservers ist erforderlich.
// Die Funktion "pwmLed();" muss im Setup aufgerufen werden.
/**************************************************************************************/
const uint8_t LED = {D5}; // Pin für LED einstellen
void pwmLed() {
pinMode(LED, OUTPUT);
server.on("/do", []() {
static uint16_t brightness;
if (server.hasArg("set")) {
brightness = server.arg(0).toInt();
//Serial.println(brightness); // Zeitkritische Anwendung
analogWrite(LED, brightness);
server.send(204);
}
else {
server.send(200, "text/plain", static_cast<String>(brightness));
}
});
}
Die Webseite zum Esp8266 Led Dimmer.
dimmer.html
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Esp8266 Slider</title>
<style>
.container {
width: 300px;
display: flex;
flex-flow: column;
align-items: center;
padding-top: 60px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 50px;
background: #888;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 50px;
background: #888;
cursor: pointer;
}
svg {
height: 7em;
}
</style>
<script>
// Werte für optisch lineares Faden einer LED https://www.mikrocontroller.net/articles/LED-Fading
const pwmtable = [0, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 4, 4, 5, 5, 6, 6, 7, 8, 9,
10, 11, 12, 13, 15, 17, 19, 21, 23, 26, 29, 32, 36, 40, 44, 49, 55,
61, 68, 76, 85, 94, 105, 117, 131, 146, 162, 181, 202, 225, 250,
279, 311, 346, 386, 430, 479, 534, 595, 663, 739, 824, 918, 1023
];
window.addEventListener('DOMContentLoaded', async () => {
const response = await fetch('/do');
const txt = await response.text();
const slider = document.querySelector('input');
const r = document.getElementById('radial');
const l = document.getElementById('light');
pwmtable.forEach((v, i) => {
if (txt == v) {
slider.value = i;
r.setAttribute("r", i * 3.2 + 1);
l.setAttribute("opacity", 0.3 + i / 85);
}
});
slider.max = pwmtable.length - 1;
slider.addEventListener('input', () => {
pwmtable.forEach((v, i) => {
if (slider.value == i) {
fetch('/do?set=' + v);
r.setAttribute("r", i * 3.2 + 1);
l.setAttribute("opacity", 0.3 + i / 85);
}
});
});
});
</script>
</head>
<body>
<h1>ESP8266 PWM</h1>
<h2>LED Dimmer</h2>
<svg viewBox="0 0 53 53">
<defs>
<linearGradient id="linear" x1="179" x2="213" y1="244" y2="259" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff" offset="0" />
<stop stop-color="#fff" stop-opacity="0" offset="1" />
</linearGradient>
<radialGradient id="radial" cx="32.4" cy="273" r="0" gradientTransform="matrix(-.00585 -.39 .532 -.00799 -119 285)" gradientUnits="userSpaceOnUse">
<stop stop-color="#ff0" offset="0" /> <!-- gelb #ff0 grün #0f0-->
<stop stop-color="#ff0" stop-opacity="0" offset="1" /> <!-- gelb #ff0 grün #0f0-->
</radialGradient>
</defs>
<g transform="translate(0 -244)">
<circle cx="26.6" cy="271" r="25" fill="#b0b0b0" stroke-width=".265" />
<ellipse id="elip" transform="matrix(.933 .36 -.69 .724 0 0)" cx="206" cy="255" rx="5.84" ry="11.3" fill="url(#linear)" stroke-width=".478" />
<circle id="light" cx="26.7" cy="271" r="24" fill="url(#radial)" opacity="0" stroke-width=".249" />
</g>
</svg>
<div class="container">
<input type="range" class="slider">
</div>
</body>
</html>