Saya ingin membuat server web mandiri menggunakan Wemos D1 Mini Lite (ini adalah satu-satunya mikrokontroler wifi yang saya miliki dan tidak mampu membeli atm yang berbeda).

Saya tahu SPIFFS bekerja dengan chip ESP32, tetapi dapatkah saya menggunakannya dengan chip ESP8285?

Ingin memiliki HTML dan CSS untuk server web, dengan skrip JS untuk menjalankan fungsi (Saat ini hanya fungsi yang mematikan dan menghidupkan LED), semua diunggah ke Wemos dan dijalankan dari sana.

KODE 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>

KODE 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
}

KODE 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;
}
0
Drethapid 10 Mei 2021, 05:46

1 menjawab

Jawaban Terbaik

SPIFFS telah diganti dengan LittleFS (Little File System) dan berfungsi pada EPS8266, Lihat LittleFS untuk lebih jelasnya.

Contoh kode untuk menggunakan LittleFS untuk melayani halaman web dapat ditemukan di FSBrowser contoh. Ini adalah contoh yang cukup komprehensif, Anda mungkin hanya perlu mengimplementasikan sebagian saja.

1
hcheung 11 Mei 2021, 02:15