Tag: Arduino

Menampilkan Halaman HTML dari File Terpisah di ESP8266/ESP32

Dalam proyek ESP8266 Web Server, sering kali kita perlu menampilkan halaman web dengan HTML, CSS, dan JavaScript agar tampilannya lebih menarik dan interaktif. Alih-alih menulis kode HTML langsung di dalam kode Arduino, kita bisa menyimpan file terpisah menggunakan SPIFFS (SPI Flash File System) atau LittleFS. Dengan cara ini, struktur proyek menjadi lebih rapi dan modular.

Pada blog ini, kita akan membahas:

✔ Mengapa menyimpan HTML di file terpisah lebih baik?
✔ Cara menyimpan dan menampilkan file HTML dari ESP
✔ Kode contoh untuk membaca file HTML dari SPIFFS/LittleFS

Mengapa Menyimpan HTML di File Terpisah?

✔ Memudahkan pengeditan – Kamu bisa mengubah tampilan tanpa perlu memodifikasi kode firmware.
✔ Menghemat memori program – HTML disimpan di SPIFFS/LittleFS, bukan di flash yang digunakan oleh program utama.
✔ Lebih rapi dan modular – Bisa memisahkan file CSS, JavaScript, dan HTML seperti dalam aplikasi web normal.

Struktur File Proyek

Sebelum mulai coding, kita buat struktur folder seperti ini:

/ESP8266_WebServer
│── data/                → Folder untuk menyimpan file web
│   ├── index.html       → Halaman utama
│   ├── style.css        → Styling halaman
│   ├── script.js        → JavaScript untuk interaksi
│── ESP8266_WebServer.ino → Kode utama untuk ESP8266

Folder data/ akan digunakan oleh SPIFFS atau LittleFS untuk menyimpan file HTML.

Kode ESP8266/ESP32 untuk Membaca HTML dari SPIFFS/LittleFS

#include <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>

const char* ssid = "SSID";
const char* password = "PASSWORD";
AsyncWebServer server(80);

void setup() {
    Serial.begin(115200);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) delay(500);

    SPIFFS.begin();
    
    // Menyajikan file HTML, CSS, dan JS dari SPIFFS
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/index.html", "text/html");
    });
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/style.css", "text/css");
    });
    server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(SPIFFS, "/script.js", "application/javascript");
    });

    server.begin();
}

void loop() {}

Upload File ke SPIFFS

  1. Buka Arduino IDE
  2. Instal plugin “ESP8266/ESP32 SPIFFS uploader”
  3. Buka “Tools > ESP8266 Sketch Data Upload”
  4. File HTML, CSS, dan JS akan diunggah ke SPIFFS!

Kesimpulan

✔ Menggunakan SPIFFS atau LittleFS memungkinkan penyimpanan file HTML secara terpisah di ESP.
✔ Metode ini mempermudah pengeditan dan menghemat memori program utama.
✔ Dapat dikembangkan lebih lanjut dengan AJAX atau WebSocket untuk membuat tampilan lebih dinamis.

Cara Memecah Kode Arduino Menjadi Beberapa File

Jika kamu pernah mengembangkan proyek Arduino atau ESP, kamu mungkin sering menghadapi kode yang semakin panjang dan sulit dibaca. Salah satu cara terbaik untuk mengelola proyek dengan lebih baik adalah menggunakan modular programming, yaitu memisahkan kode ke beberapa file.

Dalam artikel ini, kita akan membahas bagaimana cara membuat kode terstruktur untuk menyalakan LED menggunakan Arduino, dengan pendekatan modular coding.

Mengapa Modular Programming?

✔ Membuat kode lebih rapi – Dengan memisahkan kode menjadi beberapa file, setiap bagian dari program menjadi lebih jelas dan mudah dimengerti.
✔ Memudahkan penggunaan ulang – Kamu dapat menggunakan kembali modul tanpa harus menulis ulang seluruh kode.
✔ Mempermudah debugging – Jika terjadi kesalahan, kamu bisa lebih mudah menemukannya tanpa harus mencari di file yang panjang.

Struktur Proyek Arduino dengan Modular Coding

Sebelum mulai coding, kita buat struktur folder seperti ini:

/modular_led
│── modular_led.ino   → Kode utama
│── led.h             → Header LED
│── led.cpp           → Implementasi LED

Di sini, kita akan membuat tiga file utama:

  1. led.h → Deklarasi fungsi dan kelas untuk kontrol LED.
  2. led.cpp → Implementasi fungsi LED.
  3. main.ino → Kode utama yang mengontrol bagaimana LED bekerja.

Membuat Modul LED

1. File led.h (Header untuk LED)

File led.h berisi deklarasi kelas dan fungsi yang kita gunakan:

#ifndef LED_H
#define LED_H

#include <Arduino.h>

class LED {
public:
    LED(int pin);  // Konstruktor
    void begin();  // Inisialisasi LED
    void turnOn(); // Menyalakan LED
    void turnOff(); // Mematikan LED

private:
    int ledPin; // Menyimpan pin LED
};

#endif

✔ Menggunakan kelas LED untuk mengelola fungsi LED dengan lebih efisien.
✔ Menentukan metode begin() untuk inisialisasi, turnOn() untuk menyalakan, dan turnOff() untuk mematikan LED.

2. File led.cpp (Implementasi LED)

Berisi kode implementasi untuk setiap fungsi yang ada di led.h:

#include "led.h"

LED::LED(int pin) {
    ledPin = pin;
}

void LED::begin() {
    pinMode(ledPin, OUTPUT);
}

void LED::turnOn() {
    digitalWrite(ledPin, HIGH);
}

void LED::turnOff() {
    digitalWrite(ledPin, LOW);
}

✔ Fungsi begin() mengatur pin sebagai output, sehingga LED bisa dikontrol.
✔ Metode turnOn() dan turnOff() mengontrol status LED secara langsung.

3. File modular_led.ino (Kode Utama)

Terakhir, kita tuliskan kode utama yang akan menjalankan program:

#include "led.h"

LED led(13);  // Gunakan pin 13 untuk LED

void setup() {
    led.begin();
}

void loop() {
    led.turnOn();
    delay(1000);
    led.turnOff();
    delay(1000);
}

✔ Memanggil kelas LED dengan LED led(13); untuk mengontrol LED di pin 13.
✔ Menyalakan dan mematikan LED setiap 1 detik dengan delay(1000);.

Cara Menjalankan Kode

  1. Pastikan semua file (led.h, led.cpp, maodular_led.ino) berada dalam folder yang sama.
  2. Buka modular_led.ino di Arduino IDE atau PlatformIO.
  3. Upload ke board Arduino, dan lihat LED berkedip setiap 1 detik.

Kesimpulan

✔ Modular programming membantu membuat kode lebih terstruktur, mudah dibaca, dan mudah digunakan kembali.
✔ Dengan memisahkan fungsi LED ke dalam kelas dan file terpisah, program menjadi lebih rapi dan efisien.
✔ Teknik ini bisa digunakan untuk proyek yang lebih kompleks, seperti sensor, komunikasi serial, atau sistem berbasis IoT.

Modul IoT Monitor dan Kontrol

Beberapa hari terakhir saya sedang mengerjakan project untuk memonitor kondisi lingkungan. Lingkungan ini nantinya akan ditempatkan alat elektronik yang bisa mengeluarkan hawa panas. Nah, masalahnya tempat itu adalah tempat semacam kabinet yang teretutup, sehingga perlu dipertimbangkan mekanisme pendinginannya dan pembuangan hawa panas.

Bersambut dengan project saya di tahun ini lebih banyak ke mikrokontroller, saya gabungkan saja dengan konsep IoT dan kontrol. Saya menggunakan mikrokontroller keluarga ESP sebagai otaknya. Kebutuhannya adalah untuk memonitor dan mengontrol pendingin berdasarkan nilai temperatur yang didapat.

Dari berbagai produknya ESP saya pakai ESP-01 untuk kebutuhan ini. Ternyat cukup pakai GPIO yang disediakan. Simple mudah murah.

Koleksi Mikrokontroller

Setelah tulisan saya yang lalu soal explorasi kembali Arduino, sudah banyak hal yang saya explore dan juga peralatan yang saya beli. Belum semua saya coba memang, karena ketika beli komponen di marketplace online, tidak hanya alat yang mau dibeli saja yang terbeli, tetapi komponen lain yang gak terkait sama project ikut kebeli juga, ntah karena menarik atau ada ide yang tiba-tiba muncul untuk pakai komponen tersebut. Selain itu, harga komponen yang kecil-kecil harganya kecil juga sehingga rugi di ongkir.

Saat ini ada beberapa koleksi mikrokontroller yang sudah ada di meja saya:

  • ESP32 Dev Kit, 1 pcs
  • ESP-01, 2pcs
  • ESP-12F, 2pcs
  • NodeMCU Lolin, 1 pcs
  • Arduino Uno, 2 pcs compatible version dan 1 pcs ori
  • Arduino nano
  • IC lain…

Selain itu masih ada ESP wemos D1 mini yang masih dalam perjalanan.

Memang ada beberapa project yang sedang saya rencanakan untuk dikerjakan pakai masing-masing alat diatas. Masih mengantri satu per satu mana yang akan dikerjakan duluan.

Kembali Bermain Robotika dengan Arduino

Sudah sekitar empat tahun saya punya arduino uno yang hanya saya simpan di laci. Arduino ini dulu saya beli saat sedang ada project mengerjakan pemantauan kondisi suhu dan parameter lain di suatu lingkungan. Bukan bagian saya yang mengerjakan project hardwarenya, tetapi saya ikutan belajar, sehingga saya beli alatnya buat belajar pribadi.

Dalam beberapa waktu terakhir, saya ingin memberikan alternatif kegiatan atau mainan bagi anak yang susah berpaling dari layar. Saya teringat dengan Arduino saya, kebetulan anak juga suka robot, dan saya juga ada minat terpendam tentang robotika, akhirnya saya bangkitkan lagi arduino saya yang sudah saya simpan cukup lama.

Beberapa project yang mungkin akan kita coba diantaranya:

  1. Mobil remote pakai smartphone dengan koneksi bluetooth
  2. Modifikasi software halang rintang
  3. Line follower robot
  4. Explorasi berbagai sensor untuk robotika dan IoT.
  5. Explorasi IoT dengan ESP-32

Sebenarnya ada satu lagi project yang masih ingin saya bangkitkan lagi tapi karena pertimbangan peralatan mungkin untuk sementara ini dulu saja.