当前位置：网站首页>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 :
边栏推荐
- 毕业季来临，2022届高校毕业生人数首次突破千万大关
- 简单ELK配置实现生产级别的日志采集和查询实践
- Gateway微服务路由使微服务静态资源加载失败
- Différences d'utilisation entre IsEmpty et isblank
- Shardingsphere-proxy-5.0.0 establish MySQL read / write separation connection (6)
- Snake C language
- CRF+BiLSTM代码分步骤解读
- 【历史上的今天】6 月 19 日：iPhone 3GS 上市；帕斯卡诞生；《反恐精英》开始测试
- The horizontal scrolling recycleview displays five and a half in one screen, which is lower than the five average distributions
- 【历史上的今天】6 月 2 日：苹果推出了 Swift 编程语言；电信收购联通 C 网；OS X Yosemite 发布
猜你喜欢
![[today in history] June 10: Apple II came out; Microsoft acquires gecad; The scientific and technological pioneer who invented the word](/img/0d/9f99eb3dcb73c912987b81fba71890.png)
[today in history] June 10: Apple II came out; Microsoft acquires gecad; The scientific and technological pioneer who invented the word "software engineering" was born
![[today in history] June 6: World IPv6 launch anniversary; Tetris release; Little red book established](/img/06/895913d2c54b03cde86b3116955a9e.png)
[today in history] June 6: World IPv6 launch anniversary; Tetris release; Little red book established
简单ELK配置实现生产级别的日志采集和查询实践
Digital intelligence learning Lake Warehouse Integration Practice and exploration
Opencv -- Hough transform and some problems encountered
![[inverted pendulum control] Simulink simulation of inverted pendulum control based on UKF unscented Kalman filter](/img/17/3c93ddf8f55c63a97480a78cbf8111.png)
[inverted pendulum control] Simulink simulation of inverted pendulum control based on UKF unscented Kalman filter
字节跳动面试官：一张图片占据的内存大小是如何计算
Moving Tencent to the cloud: half of the evolution history of cloud server CVM
【历史上的今天】6 月 12 日：美国进入数字化电视时代；Mozilla 的最初开发者出生；3Com 和美国机器人公司合并
![[today in history] June 20: the father of MP3 was born; Fujitsu was established; Google acquires dropcam](/img/54/df623fc1004e1dca5d369b4ed2608c.png)
[today in history] June 20: the father of MP3 was born; Fujitsu was established; Google acquires dropcam
随机推荐
畢業總結
在线文本按行批量反转工具
无心剑汉英双语诗004.《剑》
STM32的C语言与汇编语言混合编程
树莓派-环境设置和交叉编译
How fiddle uses agents
JDBC与MySQL数据库
Intel Ruixuan A380 graphics card will be launched in China
[today in history] June 3: Microsoft launched Bing search engine; Larry Roberts starts ARPANET; The father of Visual Basic was born
Why are so many people keen on big factories because of the great pressure and competition?
【历史上的今天】6 月 1 日：Napster 成立；MS-DOS 原作者出生；谷歌出售 Google SketchUp
[today in history] May 31: the father of Amiga was born; The co developer of basic language was born; BlackBerry BBM shutdown
[today in history] June 5: Lovelace and Babbage met; The pioneer of public key cryptography was born; Functional language design pioneer born
MFC common current path
【历史上的今天】6 月 3 日：微软推出必应搜索引擎；Larry Roberts 启动阿帕网；Visual Basic 之父出生
2021年软件测试工具总结——模糊测试工具
【历史上的今天】6 月 6 日：世界 IPv6 启动纪念日；《俄罗斯方块》发布；小红书成立
《天天数学》连载53：二月二十一日
Usage details of staticlayout
adb双击POWER键指令