当前位置：网站首页>Arduino esp8266 web LED control
Arduino esp8266 web LED control
2022-06-28 02:55:00 【lionwerson】
Arduino Esp8266 Web LED control
arduino esp8266 web Control and LED control :
web.ino
#include <DHT.h>
#include <DHT_U.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "FS.h"
#define DHTPIN 12
const char *ssid = "essid",
*password = "password";
ESP8266WebServer server(80);
const int LED_PIN = 15;
int ledStatus = HIGH;
void handleRoot() {
File index = SPIFFS.open("/index.html", "r");
server.streamFile(index, "text/html");
index.close();
}
void sendStatus() {
if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
else server.send(200, "text/plain", "LOW");
}
void toggleLED() {
ledStatus = ledStatus == HIGH ? LOW : HIGH;
digitalWrite(LED_PIN, ledStatus);
sendStatus();
}
void setup() {
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, ledStatus);
Serial.begin(115200);
SPIFFS.begin();
WiFi.begin(ssid,password);
while(WiFi.status() != WL_CONNECTED){
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("wifi connected");
Serial.println("IP address:");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/toggle", toggleLED);
server.on("/status", sendStatus);
server.begin();
}
void loop() {
server.handleClient();
}
index.html
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/out/water.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mdui.min.css" /> -->
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<title> Smart home control platform </title>
<style> body{
height: 100vh;justify-content: center;align-items: center;background-color: #efeeee; } .container{
width: 100%; height: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; } </style>
</head>
<body>
<div class="container">
<center>
<h2> Smart home control platform </h2>
<svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16">
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
</svg>
<h3> The light : <span id='status'></span></h3>
<button id='toggleBtn'>ON/OFF</button>
</center>
</div>
<script> function makeRequest(action, callback) {
var req = new XMLHttpRequest(); req.open('GET', '/' + action + '?' + Date.now()); if (callback !== undefined) {
req.onreadystatechange = function() {
if (req.status === 200) callback(req.responseText); }; } req.send(null); } var statusSpan = document.getElementById('status'); var lightstatus = document.getElementById('light'); function updateStatus(status) {
if (status == "HIGH") {
statusSpan.textContent = " Turn off "; lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>' } else{
statusSpan.textContent = " open "; lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>' } } document.getElementById('toggleBtn').addEventListener('click', function() {
makeRequest('toggle', updateStatus); }); makeRequest('status', updateStatus); </script>
</body>
</html>
arduino.ino
#include <DHT.h>
#include <DHT_U.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "FS.h"
#define DHTPIN 12
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
const char *ssid = "essid", // Connect wifi The name of
*password = "password"; // Connect wifi Password
ESP8266WebServer server(80);
const int LED_PIN = 15;
int ledStatus = HIGH;
void handleRoot() {
File index = SPIFFS.open("/index.html", "r");
server.streamFile(index, "text/html");
index.close();
}
void sendStatus() {
if (ledStatus == HIGH) server.send(200, "text/plain", "HIGH");
else server.send(200, "text/plain", "LOW");
}
void toggleLED() {
ledStatus = ledStatus == HIGH ? LOW : HIGH;
digitalWrite(LED_PIN, ledStatus);
sendStatus();
}
void sendDHT(){
float h = dht.readHumidity();
float t = dht.readTemperature();
if (isnan(t)) {
Serial.println(F("Failed to read from DHT sensor!"));
return;
}
server.send(200, "text/plain", String(t));
}
void sendDHTH(){
float h = dht.readHumidity();
if (isnan(h)) {
Serial.println(F("Failed to read from DHT sensor!"));
return;
}
server.send(200, "text/plain", String(h));
}
void setup() {
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, ledStatus);
Serial.begin(115200);
SPIFFS.begin();
WiFi.begin(ssid,password);
while(WiFi.status() != WL_CONNECTED){
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("wifi connected"); // Show wifi Connected
Serial.println("IP address:"); // Display the acquired IP Address
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/toggle", toggleLED);
server.on("/status", sendStatus);
server.on("/temper",sendDHT);
server.on("/hum",sendDHTH);
dht.begin();
server.begin();
}
void loop() {
server.handleClient();
}
web.html
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/out/water.min.css"> -->
<!-- <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mdui.min.css" /> -->
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<title> Smart home control platform </title>
<style> body{
height: 100vh;justify-content: center;align-items: center;background-color: #efeeee; } .container{
width: 100%; height: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; } </style>
</head>
<body>
<div class="container">
<center>
<h2> Smart home control platform </h2>
<svg id = "light" xmlns="on" width="96" height="96" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16">
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z" />
</svg>
<h3> The light : <span id='status'></span></h3>
<button id='toggleBtn'>ON/OFF</button>
</center>
</div>
<div class="container">
<center>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="96" height="96">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M8 5a4 4 0 1 1 8 0v5.255a7 7 0 1 1-8 0V5zm1.144 6.895a5 5 0 1 0 5.712 0L14 11.298V5a2 2 0 1 0-4 0v6.298l-.856.597zM8 16h8a4 4 0 1 1-8 0z" />
</svg>
<h3> temperature : <span id="tempter"></span><span id="temper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M4.5 10a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM22 10h-2a4 4 0 1 0-8 0v5a4 4 0 1 0 8 0h2a6 6 0 1 1-12 0v-5a6 6 0 1 1 12 0z" />
</svg>
</span></h3>
</center>
</div>
<script> function makeRequest(action, callback) {
var req = new XMLHttpRequest(); req.open('GET', '/' + action + '?' + Date.now()); if (callback !== undefined) {
req.onreadystatechange = function() {
if (req.status === 200) callback(req.responseText); }; } req.send(null); } var statusSpan = document.getElementById('status'); var lightstatus = document.getElementById('light'); function updateStatus(status) {
if (status == "HIGH") {
statusSpan.textContent = " Turn off "; lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>' } else{
statusSpan.textContent = " open "; lightstatus.innerHTML = '<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>' } } document.getElementById('toggleBtn').addEventListener('click', function() {
makeRequest('toggle', updateStatus); }); function updateTemper(status) {
var temper = document.getElementById('tempter'); temper.textContent = status } makeRequest('status', updateStatus); makeRequest('temper', updateTemper); var timer = self.setInterval(" makeRequest('temper', updateTemper)",5000); </script>
</body>
</html>
And then in arduino Under the project directory of data Folder , And then put index.html After the file is placed , use
esp8266fs Tool write to flash in , Connect wifi After that .
esp8266fs Tools :
边栏推荐
- 为什么大厂压力大，竞争大，还有这么多人热衷于大厂呢？
- How to systematically learn LabVIEW?
- 【插件-statistic】统计代码行数和相关数据
- Opencv——霍夫变换以及遇到的一些问题
- How to enable multi language text suggestions? Win11 method to open multilingual text suggestions
- [today in history] June 3: Microsoft launched Bing search engine; Larry Roberts starts ARPANET; The father of Visual Basic was born
- [today in history] June 1: Napster was founded; MS-DOS original author was born; Google sells Google SketchUp
- Opencv -- Hough transform and some problems encountered
- Desai wisdom number - histogram (column folding mixed graph): ratio of rental price to rental income in the graduation quarter of 2021
- 【历史上的今天】6 月 2 日：苹果推出了 Swift 编程语言；电信收购联通 C 网；OS X Yosemite 发布
猜你喜欢
英特尔锐炫A380显卡即将在中国面市
![抓包整理外篇fiddler————了解工具栏[一]](/img/5f/24fd110a73734ba1638f0aad63c787.png)
抓包整理外篇fiddler————了解工具栏[一]
Unity WebGL打包后怎么运行（火狐配置）
Writing based on stm32
Arduino Esp8266 Web LED控制
![[today in history] June 5: Lovelace and Babbage met; The pioneer of public key cryptography was born; Functional language design pioneer born](/img/af/1faf1df4262940e73104ed2880f08d.png)
[today in history] June 5: Lovelace and Babbage met; The pioneer of public key cryptography was born; Functional language design pioneer born
Interpretation of bilstm-crf in NER forward_ algorithm
How to realize red, green and yellow traffic lights in ros+gazebo?
Packet capturing and sorting out external Fiddler -- understanding the toolbar [1]
数据清洗工具flashtext，效率直接提升了几十倍数
随机推荐
毕业季来临，2022届高校毕业生人数首次突破千万大关
榜单首发——前装搭载率站上10%大关，数字钥匙方案供应商TOP10
How to judge that the thread pool has completed all tasks?
【方块编码】基于matlab的图像方块编码仿真
＞ Could not create task ‘:app:MyTest.main()‘. ＞ SourceSet with name ‘main‘ not found.问题修复
How to realize red, green and yellow traffic lights in ros+gazebo?
Prometheus 2.27.0 new features
Mysql database foundation: DML data operation language
ADB double click the power key command
[today in history] June 1: Napster was founded; MS-DOS original author was born; Google sells Google SketchUp
[today in history] June 18: JD was born; The online store platform Etsy was established; Facebook releases Libra white paper
Shuttle uses custompaint to paint basic shapes
Intel Ruixuan A380 graphics card will be launched in China
数仓的字符截取三胞胎：substrb、substr、substring
[today in history] June 12: the United States entered the era of digital television; Mozilla's original developer was born; 3com merges with American Robotics
[fuzzy neural network] simulation of fuzzy neural network based on MATLAB
第三批入围企业公示！年度TOP100智能网联供应商评选
CRF+BiLSTM代码分步骤解读
【历史上的今天】6 月 12 日：美国进入数字化电视时代；Mozilla 的最初开发者出生；3Com 和美国机器人公司合并
【电梯控制系统】基于VHDL语言和状态机实现的电梯控制系统的设计，使用了状态机