今回は、PWMの解説も兼ねます。
何それ？と思った方は以下読み続けて下さい。きっと理解できます。
昨日は、品川にあるCMJ本社ビルのショールーム見学に行ってきました。お目当ては、キヤノンイーグルスの写真展です。
CMJのショールムで展示されている製品は、B to Cのコンシューマー系のものです。一方でショールーム入り口の左に、このポスターがあります。明らかにB to Bを醸しています。
KGIを設定することで、バックキャスティングして今何をすべきか。(KPI)
そうそう身近な例だとSDGsですね。著名な予備校の先生の名言もこれですね。
ショールーム、写真展見学後JR品川駅の東口にあるクイーンズ伊勢丹 (クイーンズイセタン) アトレ品川店内フードコートでランチ
風評で苦戦しているコロナ”ビール”支援は、欠かしません。
プレモルと鶏カラを追加
さて、
今回のテンプレート（HiLetgo® OTA WeMos D1 CH340 WiFi 開発ボード ESP8266 ESP-12F用に変更）では、Webサーバーの基本構成は
と同じです。但し、LED_Builtin2(GPIO 14)の輝度をPWMを使って調整できる様にしてあります。
PWM(Pulse Width Modulation)について
東芝デバイス＆ストレージ（株）さんのHPを参考にさせて頂きました。
画像をお借りしています。
一定時間内にLEDを複数回連続してON/OFFします。この様な点灯方式をダイナミック点灯と言います。ミクロでみると点滅ですが、マクロでみると点灯している様に見えます。
そこで、一回当たりのON/OFFの時間比を変えることでLEDの輝度の調整が可能となります。
こんな便利な関数が準備されています。
https://www.arduino.cc/reference/en/language/functions/analog-io/analogwrite/
また今回のテンプレートは、
を参考にさせて頂いております。
の様に修正しました。SSIDとPASSWORDを皆さんの環境に合わせて修正後は、Build一発でOKです。
・LED_Builtin2 GPIO 14に変更
・若干のコスメティックの変更
/*********
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcu-web-server-slider-pwm/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
It's modified for ESP8266 ESP-12F board by jk1brk
Last update 2020/11/7
*********/
// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "SSID";
const char* password = "PASSWORD";
const int output = 14; // GPIO 14 instead of GPIO 2
String sliderValue = "0";
const char* PARAM_INPUT = "value";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266 ESP-12F Web Server</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
</style>
</head>
<body>
<h2>ESP8266 ESP-12F Web Server</h2>
<p><span id="textSliderValue">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
pinMode(2, OUTPUT);
digitalWrite(2, HIGH); // LED_Builtin OFF
analogWrite(output, sliderValue.toInt());
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.print("Conneced to AP, as "); //
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
analogWrite(output, sliderValue.toInt());
}
else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
Async Web Server Libraries
We’ll build the web server using the following libraries:
These libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation Libraries folder. Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the libraries you’ve just downloaded.
は、お忘れなく！ （過去一度実行してある場合は、追加は不要）
私の環境の場合ですが、
C:\Users\user\Documents\Arduino\libraries
にインストールされています。
【参考記事】
