我可以为 Wemos D1 Mini Lite(ESP8285 芯片)安装 SPIFFS 以使用 JS、HTML 和 CSS 文件作为独立的网络服务器吗
Can I install SPIFFS for Wemos D1 Mini Lite (ESP8285 chip) to use JS, HTML and CSS files as a stand alone webserver
我希望使用 Wemos D1 Mini Lite 创建一个独立的网络服务器(这是我唯一拥有的 wifi 微控制器,而且买不起另一个 atm)。
我知道 SPIFFS 适用于 ESP32 芯片,但我可以将它用于 ESP8285 芯片吗?
希望为网络服务器提供 HTML 和 CSS,使用 JS 脚本实现 运行 功能(目前只有功能是关闭和打开 LED),全部上传到Wemos 和 运行 来自那个。
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./skeleton.css">
<link rel="stylesheet" href="./theme.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "mainDiv border" >
<div class = "headingDiv border">
<h3 id = "Header"> LED ON AND OFF </h3>
</div>
<div class = "checkmarkDiv border">
<div class = "row">
<label for ="colour_red">RED LED</label>
<input type = "checkbox" id = "colour_red">
</div>
<div class = "row">
<label for ="colour_yellow">YELLOW LED</label>
<input type = "checkbox" id = "colour_yellow">
</div>
<div class = "row">
<label for ="colour_green">GREEN LED</label>
<input type = "checkbox" id = "colour_green">
</div>
</div>
<div class = "buttonDiv border">
<button class = "button-primary" id = "button_ToggleLED"> Turn LED: ON </button>
</div>
</div>
</body>
<script src = "./mainJS.js"></script>
</html>
JS代码
const button_LED = document.getElementById( "button_ToggleLED" )
const cb_red = document.getElementById ( "colour_red" )
const cb_yellow = document.getElementById( "colour_yellow" )
const cb_green = document.getElementById( "colour_green" )
let clickCheck = false
button_LED.addEventListener( "click", (event) => {
//consoleLEDStatus()
if (clickCheck) {
button_LED.innerHTML = "Turn LED: ON"
turnOFFLED()
}
else if (!clickCheck) {
button_LED.innerHTML = "Turn LED: OFF"
turnONLED()
}
clickCheck = !clickCheck
})
// A quick function you can run to check in dev console the status of LED
function consoleLEDStatus() {
console.log(`LED Status:
RED: ${cb_red.checked}
YELLOW: ${cb_yellow.checked}
GREEN: ${cb_green.checked}`)
}
function turnOFFLED() {
// Insert function to turn off LED
}
function turnONLED() {
// Insert function to turn on LED
}
CSS 代码
/* Test class for checking Div borders. Uncomment to see them*/
/*
.border{
border: black 2px solid;
}
*/
.mainDiv{
margin-left: 20%;
margin-right: 20%;
padding: 10px;
}
.checkmarkDiv{
padding: 10px;
}
.buttonDiv{
padding: 10px;
}
.headingDiv{
padding: 10px;
}
#Header{
}
#button_ToggleLED{
width: 200px;
float: center;
}
我希望使用 Wemos D1 Mini Lite 创建一个独立的网络服务器(这是我唯一拥有的 wifi 微控制器,而且买不起另一个 atm)。
我知道 SPIFFS 适用于 ESP32 芯片,但我可以将它用于 ESP8285 芯片吗?
希望为网络服务器提供 HTML 和 CSS,使用 JS 脚本实现 运行 功能(目前只有功能是关闭和打开 LED),全部上传到Wemos 和 运行 来自那个。
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./skeleton.css">
<link rel="stylesheet" href="./theme.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "mainDiv border" >
<div class = "headingDiv border">
<h3 id = "Header"> LED ON AND OFF </h3>
</div>
<div class = "checkmarkDiv border">
<div class = "row">
<label for ="colour_red">RED LED</label>
<input type = "checkbox" id = "colour_red">
</div>
<div class = "row">
<label for ="colour_yellow">YELLOW LED</label>
<input type = "checkbox" id = "colour_yellow">
</div>
<div class = "row">
<label for ="colour_green">GREEN LED</label>
<input type = "checkbox" id = "colour_green">
</div>
</div>
<div class = "buttonDiv border">
<button class = "button-primary" id = "button_ToggleLED"> Turn LED: ON </button>
</div>
</div>
</body>
<script src = "./mainJS.js"></script>
</html>
JS代码
const button_LED = document.getElementById( "button_ToggleLED" )
const cb_red = document.getElementById ( "colour_red" )
const cb_yellow = document.getElementById( "colour_yellow" )
const cb_green = document.getElementById( "colour_green" )
let clickCheck = false
button_LED.addEventListener( "click", (event) => {
//consoleLEDStatus()
if (clickCheck) {
button_LED.innerHTML = "Turn LED: ON"
turnOFFLED()
}
else if (!clickCheck) {
button_LED.innerHTML = "Turn LED: OFF"
turnONLED()
}
clickCheck = !clickCheck
})
// A quick function you can run to check in dev console the status of LED
function consoleLEDStatus() {
console.log(`LED Status:
RED: ${cb_red.checked}
YELLOW: ${cb_yellow.checked}
GREEN: ${cb_green.checked}`)
}
function turnOFFLED() {
// Insert function to turn off LED
}
function turnONLED() {
// Insert function to turn on LED
}
CSS 代码
/* Test class for checking Div borders. Uncomment to see them*/
/*
.border{
border: black 2px solid;
}
*/
.mainDiv{
margin-left: 20%;
margin-right: 20%;
padding: 10px;
}
.checkmarkDiv{
padding: 10px;
}
.buttonDiv{
padding: 10px;
}
.headingDiv{
padding: 10px;
}
#Header{
}
#button_ToggleLED{
width: 200px;
float: center;
}