Upload file System PlatformIO on NodeMcu Dev Kit

Upload file System PlatformIO on NodeMcu Dev Kit V 1.0





ผลมันเป็นอย่างนี้
1. ภาพแสดงการแสดงผลบน NodeMcu Dev Kit V1.0
 ด้วย file นี้
2. index.html

โดยไม่ต้องลำบากเขียนอย่างนี้
3. ภาพการเขียนบน C++
1. เริ่มจาก Init Project เลือกบอร์ดเป็น NodeMCU 1.0
4. Init Project
2. สร้าง Folder ชื่อ  data ไว้นอกสุด


5. สร้าง folder สำหรับเก็บ file

3. สร้าง file index.html ไว้ใน folder data

6. index.html
4. Code ใน index.html จะเห็นว่า html ล้วนๆเลย เราสามารถใส่พวก CSS ได้ ทำเหมือนเขียนเวปพื้นๆได้เลย 

7. index.html Code

5. เข้าสู่ขั้นตอนเขียน Code  สร้าง main.cpp ใน src เลย

8. สร้าง mail.cpp
7. ใส่ตำแหน่ง folder data ให้กับ platformIO รับรู้ ใน file platformio.ini
โดยใช้ option data_dir = ./data 
. (มีจุด) หมายถึงอยู่ใน  folder project
9. เพิ่มตำแหน่ง data

8. Upload file data PlatformIO > Run other target.. > PlatformIO Upload SPIFFS image

10. ภาพกำลัง upload


การ upload file จบแล้ว 
ต่อไปเขียนโปรแกรมหลักจะใช้วิธีการเขียนอ่าน  SPIFFS ธรรมดา
9. สร้าง file main.cpp
11. main.cpp

10. Code
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

const char* ssid     = "SSID";
const char* password = "PASSWORD";


ESP8266WebServer server(80);

void fail(const char* msg) {
  Serial.println(msg);
}

void setup () {
  WiFi.mode(WIFI_STA);
  Serial.begin(115200);
  delay(10);
  Serial.println();
  Serial.println("BEGIN");
  WiFi.begin ( ssid, password );
  Serial.println ( "" );


  if (!SPIFFS.begin()) {
    fail("SPIFFS init failed");
  }
  Dir root = SPIFFS.openDir("/");
  Serial.println("READING ROOT");
  while (root.next()) {
    String fileName = root.fileName();
    File f = root.openFile("r");
    Serial.printf("%s: %d\r\n", fileName.c_str(), f.size());
  }
  // Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 );
    Serial.print ( "." );
  }
  Serial.print("WIFI CONNECTED => ");
  Serial.println(WiFi.localIP());
  server.on ( "/", [](){
    server.send(200, "text/plain", "this root path");
  });
  server.serveStatic("/", SPIFFS, "/");
  server.begin();
}

void loop() {
    server.handleClient();
}

7. ลอง Build และ Upload
12. upload file

8. ตรวจสอบว่าได้ IP อะไร จาก serial monitor ผมใช้ ESPlorer
13. ตรวจสอบ IP
 9. เปิด browser แล้วเข้า ip/index.html

14. ภาพการเข้า browser
ปล. code  บางส่วนได้จาก
example  CMMC WiFi Connector -> wifi-webserver-serve-static-files WiFiConnector
15. wifi-webserver-serve-static-files



Share this

Previous
Next Post »