▼

Arduino Mega sebagai web server untuk menampilkan angka di 7 segment

Berikut adalah langkah-langkah untuk membuat sebuah sistem berbasis Arduino Mega yang memenuhi ketentuan yang diberikan:

  1. Membuat server web pada Arduino Mega:

    • Arduino Mega akan menggunakan modul Ethernet atau WiFi untuk membuat server web yang bisa diakses oleh klien melalui browser.

  2. Memungkinkan klien mengisi dan meng-update variabel:

    • Gunakan formulir HTML yang memungkinkan klien untuk mengisi nilai variabel.
    • Arduino Mega akan menangani pengiriman data dari formulir ini dan menyimpan nilai-nilai ini ke EEPROM.

  3. Menyimpan data ke EEPROM:

    • Gunakan library EEPROM untuk menyimpan dan mengambil nilai variabel dari EEPROM.

  4. Menampilkan isi EEPROM ke 7-segment display:

    • Gunakan shift register 74HC595 dan driver ULN2003 untuk mengontrol 7-segment display dari Arduino Mega.

#include <SPI.h>
#include <Ethernet.h>
#include <EEPROM.h>
// Setting MAC address and IP address for Ethernet module
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177);
EthernetServer server(80);
const int numVariables = 15;
int variables[numVariables];
// Pin definitions for 74HC595
const int latchPin = 5;
const int clockPin = 6;
const int dataPin = 7;
void setup() {
  // Initialize Ethernet
  Ethernet.begin(mac, ip);
  server.begin();
  
  // Initialize pins for 74HC595
  pinMode(latchPin, OUTPUT);
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);
  // Read variables from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }
  Serial.begin(9600);
}
void loop() {
  // Check for incoming client connections
  EthernetClient client = server.available();
  if (client) {
    handleClient(client);
  }
  // Display variables on 7-segment display
  displayVariables();
}
void handleClient(EthernetClient client) {
  boolean currentLineIsBlank = true;
  String request = "";
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      request += c;
      if (c == '\n' && currentLineIsBlank) {
        // Process the request and update EEPROM if needed
        processRequest(request);
        // Send the HTML page
        sendHtmlPage(client);
        break;
      }
      if (c == '\n') {
        currentLineIsBlank = true;
      } else if (c != '\r') {
        currentLineIsBlank = false;
      }
    }
  }
  delay(1);
  client.stop();
}
void processRequest(String request) {
  if (request.indexOf("GET /update?") >= 0) {
    int indexStart = request.indexOf('?') + 1;
    int indexEnd = request.indexOf(' ', indexStart);
    String params = request.substring(indexStart, indexEnd);
    int varIndex = 0;
    while (params.length() > 0 && varIndex < numVariables) {
      int delimiterIndex = params.indexOf('&');
      String param = (delimiterIndex > 0) ? params.substring(0, delimiterIndex) : params;
      int equalsIndex = param.indexOf('=');
      if (equalsIndex > 0) {
        int value = param.substring(equalsIndex + 1).toInt();
        variables[varIndex] = value;
        EEPROM.write(varIndex, value);
      }
      params = (delimiterIndex > 0) ? params.substring(delimiterIndex + 1) : "";
      varIndex++;
    }
  }
}
void sendHtmlPage(EthernetClient client) {
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE html>");
  client.println("<html>");
  client.println("<head><title>Arduino Mega Control</title></head>");
  client.println("<body><h1>Update Variables</h1>");
  client.println("<form action=\"/update\" method=\"GET\">");
  for (int i = 0; i < numVariables; i++) {
    client.print("Variable ");
    client.print(i);
    client.print(": <input type=\"text\" name=\"var");
    client.print(i);
    client.print("\" value=\"");
    client.print(variables[i]);
    client.println("\"><br>");
  }
  client.println("<input type=\"submit\" value=\"Update\">");
  client.println("</form></body></html>");
}
void displayVariables() {
  for (int i = 0; i < numVariables; i++) {
    displayNumber(variables[i]);
    delay(500);
  }
}
void displayNumber(int number) {
  byte segments = getSegments(number);
  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, segments);
  digitalWrite(latchPin, HIGH);
}
byte getSegments(int number) {
  switch (number) {
    case 0: return B00111111;
    case 1: return B00000110;
    case 2: return B01011011;
    case 3: return B01001111;
    case 4: return B01100110;
    case 5: return B01101101;
    case 6: return B01111101;
    case 7: return B00000111;
    case 8: return B01111111;
    case 9: return B01101111;
    default: return B00000000; // Blank for non-decimal digits
  }
}



Penjelasan Kode:

  • Server Web: Kode ini membuat server web menggunakan modul Ethernet pada Arduino Mega. Server web mendengarkan permintaan HTTP dari klien.
  • Mengupdate Variabel: Klien dapat mengisi nilai variabel melalui formulir HTML yang dikirimkan ke Arduino. Nilai ini kemudian disimpan ke EEPROM.
  • Tampilan 7-Segment: Menggunakan shift register 74HC595 untuk mengontrol tampilan 7-segment. Fungsi displayNumber() menampilkan angka pada 7-segment.

Kebutuhan:

  • Arduino Mega
  • Modul Ethernet (misal: W5100 atau ENC28J60) atau WiFi (misal: ESP8266)
  • Shift register 74HC595
  • Driver ULN2003
  • 7-segment display

Catatan:

  • Pastikan menghubungkan pin modul Ethernet/WiFi dengan benar ke Arduino Mega.
  • Pastikan koneksi rangkaian 7-segment display dengan 74HC595 dan ULN2003 sudah benar.

Tahap II

Untuk memastikan bahwa nilai yang dimasukkan atau diubah oleh klien akan ditampilkan kembali dari EEPROM setelah formulir dikirimkan, kita harus memastikan bahwa nilai di EEPROM diperbarui setelah permintaan POST diproses dan kemudian menampilkan nilai terbaru di halaman web.

Berikut adalah pembaruan program untuk menangani permintaan POST dengan benar dan menampilkan kembali nilai dari EEPROM setelah klien mengirim atau mengubah nilai:


#include <SPI.h>
#include <Ethernet.h>
#include <EEPROM.h>

// Setting MAC address and IP address for Ethernet module
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177);

EthernetServer server(80);

const int numVariables = 12;
int variables[numVariables];

// Pin definitions for 74HC595
const int latchPin = 5;
const int clockPin = 6;
const int dataPin = 7;

void setup() {
  // Initialize Ethernet
  Ethernet.begin(mac, ip);
  server.begin();
  
  // Initialize pins for 74HC595
  pinMode(latchPin, OUTPUT);
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);

  // Read variables from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }

  Serial.begin(9600);
}

void loop() {
  // Check for incoming client connections
  EthernetClient client = server.available();
  if (client) {
    handleClient(client);
  }

  // Display variables on 7-segment display
  displayVariables();
}

void handleClient(EthernetClient client) {
  boolean currentLineIsBlank = true;
  String request = "";
  boolean isPost = false;

  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      request += c;

      if (c == '\n' && currentLineIsBlank) {
        // If POST request, process the data
        if (isPost) {
          processPostData(request);
        }
        // Send the HTML page
        sendHtmlPage(client);

        break;
      }
      if (c == '\n') {
        currentLineIsBlank = true;
      } else if (c != '\r') {
        currentLineIsBlank = false;
      }

      if (request.indexOf("POST /submit") >= 0) {
        isPost = true;
      }
    }
  }
  delay(1);
  client.stop();
}

void processPostData(String request) {
  int indexStart = request.indexOf("\r\n\r\n") + 4;
  String data = request.substring(indexStart);

  int varIndex = 0;
  while (data.length() > 0 && varIndex < numVariables) {
    int delimiterIndex = data.indexOf('&');
    String param = (delimiterIndex > 0) ? data.substring(0, delimiterIndex) : data;
    int equalsIndex = param.indexOf('=');

    if (equalsIndex > 0) {
      int value = param.substring(equalsIndex + 1).toInt();
      variables[varIndex] = value;
      EEPROM.write(varIndex, value);
    }

    data = (delimiterIndex > 0) ? data.substring(delimiterIndex + 1) : "";
    varIndex++;
  }
}

void sendHtmlPage(EthernetClient client) {
  // Update the variables array with the latest values from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }

  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE html>");
  client.println("<html lang=\"id\">");
  client.println("<head>");
  client.println("<meta charset=\"UTF-8\">");
  client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">");
  client.println("<title>Input Memori Arduino</title>");
  client.println("<style>");
  client.println("body {font-family: Arial, sans-serif; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}");
  client.println(".container {background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%;}");
  client.println("h1 {text-align: center; color: #333;}");
  client.println("form {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}");
  client.println("label {margin-bottom: 5px; color: #555;}");
  client.println(".input-group {display: flex; flex-direction: column;}");
  client.println("input[type=\"number\"] {padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; width: 100%;}");
  client.println("input[type=\"submit\"] {grid-column: span 3; padding: 10px; background-color: #4CAF50; border: none; border-radius: 4px; color: white; font-size: 16px; cursor: pointer;}");
  client.println("input[type=\"submit\"]:hover {background-color: #45a049;}");
  client.println("</style>");
  client.println("</head>");
  client.println("<body>");
  client.println("<div class=\"container\">");
  client.println("<h1>Input Data Angka</h1>");
  client.println("<form action=\"/submit\" method=\"post\">");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value1\">Tanggal:</label>");
  client.print("<input type=\"number\" id=\"value1\" name=\"value1\" value=\"");
  client.print(variables[0]);
  client.print("\" required>");
  client.println("</div>");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value2\">Bulan:</label>");
  client.print("<input type=\"number\" id=\"value2\" name=\"value2\" value=\"");
  client.print(variables[1]);
  client.print("\" required>");
  client.println("</div>");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value3\">Tahun:</label>");
  client.print("<input type=\"number\" id=\"value3\" name=\"value3\" value=\"");
  client.print(variables[2]);
  client.print("\" required>");
  client.println("</div>");

  for (int i = 3; i < numVariables; i++) {
    client.print("<div class=\"input-group\">");
    client.print("<label for=\"value");
    client.print(i + 1);
    client.print("\">Angka ");
    client.print(i + 1);
    client.print(":</label>");
    client.print("<input type=\"number\" id=\"value");
    client.print(i + 1);
    client.print("\" name=\"value");
    client.print(i + 1);
    client.print("\" value=\"");
    client.print(variables[i]);
    client.println("\" required>");
    client.println("</div>");
  }

  client.println("<input type=\"submit\" value=\"Kirim\">");
  client.println("</form>");
  client.println("</div>");
  client.println("</body>");
  client.println("</html>");
}

void displayVariables() {
  for (int i = 0; i < numVariables; i++) {
    displayNumber(variables[i]);
    delay(500);
  }
}

void displayNumber(int number) {
  byte segments = getSegments(number);
  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, segments);
  digitalWrite(latchPin, HIGH);
}

byte getSegments(int number) {
  switch (number) {
    case 0: return B00111111;
    case 1: return B00000110;
    case 2: return B01011011;
    case 3: return B01001111;
    case 4: return B01100110;
    case 5: return B01101101;
    case 6: return B01111101;
    case 7: return B00000111;
    case 8: return B01111111;
    case 9: return B01101111;
    default: return B00000000; // Blank for non-decimal digits
  }
}



Penjelasan Perubahan:

  1. Membaca EEPROM Setelah POST:

    • Setelah processPostData(request) memproses data POST, fungsi sendHtmlPage(client) membaca nilai terbaru dari EEPROM sebelum mengirim halaman HTML.

  2. Memperbarui Nilai dari EEPROM:

    • Pada sendHtmlPage, pembacaan nilai dari EEPROM dilakukan kembali untuk memastikan bahwa nilai terbaru dari EEPROM ditampilkan di halaman HTML.

Dengan perubahan ini, nilai yang baru dimasukkan atau diubah oleh klien akan langsung disimpan di EEPROM dan kemudian ditampilkan kembali pada form HTML saat halaman dimuat ulang. Hal ini memastikan bahwa klien melihat nilai terbaru yang disimpan di EEPROM.

Tahap III

Untuk mengakomodasi input 2 digit dan menampilkan nilai 2 digit pada 7-segment, kita perlu melakukan beberapa perubahan pada kode Arduino. Berikut adalah kode yang telah disesuaikan dengan input 2 digit dan menampilkan nilai pada 7-segment:



#include <SPI.h>
#include <Ethernet.h>
#include <EEPROM.h>

// Setting MAC address and IP address for Ethernet module
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177);

EthernetServer server(80);

const int numVariables = 12;
int variables[numVariables];

// Pin definitions for 74HC595
const int latchPin = 5;
const int clockPin = 6;
const int dataPin = 7;

void setup() {
  // Initialize Ethernet
  Ethernet.begin(mac, ip);
  server.begin();
  
  // Initialize pins for 74HC595
  pinMode(latchPin, OUTPUT);
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);

  // Read variables from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }

  Serial.begin(9600);
}

void loop() {
  // Check for incoming client connections
  EthernetClient client = server.available();
  if (client) {
    handleClient(client);
  }

  // Display variables on 7-segment display
  displayVariables();
}

void handleClient(EthernetClient client) {
  boolean currentLineIsBlank = true;
  String request = "";
  boolean isPost = false;

  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      request += c;

      if (c == '\n' && currentLineIsBlank) {
        // If POST request, process the data
        if (isPost) {
          processPostData(request);
        }
        // Send the HTML page
        sendHtmlPage(client);

        break;
      }
      if (c == '\n') {
        currentLineIsBlank = true;
      } else if (c != '\r') {
        currentLineIsBlank = false;
      }

      if (request.indexOf("POST /submit") >= 0) {
        isPost = true;
      }
    }
  }
  delay(1);
  client.stop();
}

void processPostData(String request) {
  int indexStart = request.indexOf("\r\n\r\n") + 4;
  String data = request.substring(indexStart);

  int varIndex = 0;
  while (data.length() > 0 && varIndex < numVariables) {
    int delimiterIndex = data.indexOf('&');
    String param = (delimiterIndex > 0) ? data.substring(0, delimiterIndex) : data;
    int equalsIndex = param.indexOf('=');

    if (equalsIndex > 0) {
      int value = param.substring(equalsIndex + 1).toInt();
      variables[varIndex] = value;
      EEPROM.write(varIndex, value);
    }

    data = (delimiterIndex > 0) ? data.substring(delimiterIndex + 1) : "";
    varIndex++;
  }
}

void sendHtmlPage(EthernetClient client) {
  // Update the variables array with the latest values from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }

  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE html>");
  client.println("<html lang=\"id\">");
  client.println("<head>");
  client.println("<meta charset=\"UTF-8\">");
  client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">");
  client.println("<title>Input Memori Arduino</title>");
  client.println("<style>");
  client.println("body {font-family: Arial, sans-serif; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}");
  client.println(".container {background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%;}");
  client.println("h1 {text-align: center; color: #333;}");
  client.println("form {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}");
  client.println("label {margin-bottom: 5px; color: #555;}");
  client.println(".input-group {display: flex; flex-direction: column;}");
  client.println("input[type=\"number\"] {padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; width: 100%;}");
  client.println("input[type=\"submit\"] {grid-column: span 3; padding: 10px; background-color: #4CAF50; border: none; border-radius: 4px; color: white; font-size: 16px; cursor: pointer;}");
  client.println("input[type=\"submit\"]:hover {background-color: #45a049;}");
  client.println("</style>");
  client.println("</head>");
  client.println("<body>");
  client.println("<div class=\"container\">");
  client.println("<h1>Input Data Angka</h1>");
  client.println("<form action=\"/submit\" method=\"post\">");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value1\">Tanggal:</label>");
  client.print("<input type=\"number\" id=\"value1\" name=\"value1\" value=\"");
  client.print(formatNumber(variables[0]));
  client.print("\" min=\"0\" max=\"99\" required>");
  client.println("</div>");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value2\">Bulan:</label>");
  client.print("<input type=\"number\" id=\"value2\" name=\"value2\" value=\"");
  client.print(formatNumber(variables[1]));
  client.print("\" min=\"0\" max=\"99\" required>");
  client.println("</div>");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value3\">Tahun:</label>");
  client.print("<input type=\"number\" id=\"value3\" name=\"value3\" value=\"");
  client.print(formatNumber(variables[2]));
  client.print("\" min=\"0\" max=\"99\" required>");
  client.println("</div>");

  for (int i = 3; i < numVariables; i++) {
    client.print("<div class=\"input-group\">");
    client.print("<label for=\"value");
    client.print(i + 1);
    client.print("\">Angka ");
    client.print(i + 1);
    client.print(":</label>");
    client.print("<input type=\"number\" id=\"value");
    client.print(i + 1);
    client.print("\" name=\"value");
    client.print(i + 1);
    client.print("\" value=\"");
    client.print(formatNumber(variables[i]));
    client.println("\" min=\"0\" max=\"99\" required>");
    client.println("</div>");
  }

  client.println("<input type=\"submit\" value=\"Kirim\">");
  client.println("</form>");
  client.println("</div>");
  client.println("</body>");
  client.println("</html>");
}

String formatNumber(int num) {
  if (num < 10) {
    return "0" + String(num);
  } else {
    return String(num);
  }
}

void displayVariables() {
  for (int i = 0; i < numVariables; i++) {
    displayNumber(variables[i]);
    delay(500);
  }
}

void displayNumber(int number) {
  int tens = number / 10;
  int ones = number % 10;

  byte segmentsTens = getSegments(tens);
  byte segmentsOnes = getSegments(ones);

  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, segmentsOnes);
  shiftOut(dataPin, clockPin, MSBFIRST, segmentsTens);
  digitalWrite(latchPin, HIGH);
}

byte getSegments(int number) {
  switch (number) {
    case 0: return B00111111;
    case 1: return B00000110;
    case 2: return B01011011;
    case 3: return B01001111;
    case 4: return B01100110;
    case 5: return B01101101;
    case 6: return B01111101;
    case 7: return B00000111;
    case 8: return B01111111;
    case 9: return B01101111;
    default: return B00000000; // Blank for non-decimal digits
  }
}




Perubahan yang Dilakukan:

  1. HTML Form dan Script:
    • Formulir HTML diperbarui untuk menerima input yang terdiri dari 2 digit (0-99).
    • Kode Arduino memproses input ini dan menyimpannya di dalam EEPROM.
    • Fungsi formatNumber ditambahkan untukmengubah angka menjadi format dua digit dengan menambahkan nol di depan jika angka kurang dari 10.
  2. Fungsi formatNumber:
    • Fungsi formatNumber ditambahkan untuk memastikan bahwa setiap nilai angka yang ditampilkan dalam formulir HTML memiliki dua digit. Jika angka kurang dari 10, fungsi ini akan menambahkan "0" di depannya.
  3. Menampilkan Nilai pada 7-Segment:
    • Fungsi displayNumber diperbarui untuk menangani dua digit dari setiap variabel. Variabel dibagi menjadi puluhan dan satuan.
    • Segmen untuk setiap digit dihitung menggunakan fungsi getSegments dan diubah menjadi nilai biner yang sesuai dengan 7-segment display.

Dengan perubahan ini, Anda dapat memastikan bahwa input yang diterima dari formulir HTML memiliki dua digit dan nilai ini ditampilkan dengan benar pada 7-segment display.

Pastikan untuk memasukkan semua kode ini ke dalam proyek Arduino Anda dan menghubungkan secara fisik dengan komponen yang sesuai (misalnya, Ethernet Shield dan 74HC595 untuk display 7-segment). Setelah diunggah, periksa koneksi jaringan dan buka alamat IP yang sesuai untuk melihat antarmuka HTML yang diterapkan.


Tahap IV

Untuk meningkatkan input group pada nilai Tahun menjadi 4 digit pada formulir HTML, kita perlu memperluas rentang nilai yang dapat dimasukkan oleh pengguna dan memastikan bahwa nilai yang ditampilkan di 7-segment display juga sesuai dengan format ini. Berikut adalah langkah-langkah yang diperlukan:


#include <SPI.h>
#include <Ethernet.h>
#include <EEPROM.h>

// Setting MAC address and IP address for Ethernet module
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177);

EthernetServer server(80);

const int numVariables = 12;
int variables[numVariables];

// Pin definitions for 74HC595
const int latchPin = 5;
const int clockPin = 6;
const int dataPin = 7;

void setup() {
  // Initialize Ethernet
  Ethernet.begin(mac, ip);
  server.begin();
  
  // Initialize pins for 74HC595
  pinMode(latchPin, OUTPUT);
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);

  // Read variables from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }

  Serial.begin(9600);
}

void loop() {
  // Check for incoming client connections
  EthernetClient client = server.available();
  if (client) {
    handleClient(client);
  }

  // Display variables on 7-segment display
  displayVariables();
}

void handleClient(EthernetClient client) {
  boolean currentLineIsBlank = true;
  String request = "";
  boolean isPost = false;

  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
      request += c;

      if (c == '\n' && currentLineIsBlank) {
        // If POST request, process the data
        if (isPost) {
          processPostData(request);
        }
        // Send the HTML page
        sendHtmlPage(client);

        break;
      }
      if (c == '\n') {
        currentLineIsBlank = true;
      } else if (c != '\r') {
        currentLineIsBlank = false;
      }

      if (request.indexOf("POST /submit") >= 0) {
        isPost = true;
      }
    }
  }
  delay(1);
  client.stop();
}

void processPostData(String request) {
  int indexStart = request.indexOf("\r\n\r\n") + 4;
  String data = request.substring(indexStart);

  int varIndex = 0;
  while (data.length() > 0 && varIndex < numVariables) {
    int delimiterIndex = data.indexOf('&');
    String param = (delimiterIndex > 0) ? data.substring(0, delimiterIndex) : data;
    int equalsIndex = param.indexOf('=');

    if (equalsIndex > 0) {
      int value = param.substring(equalsIndex + 1).toInt();
      variables[varIndex] = value;
      EEPROM.write(varIndex, value);
    }

    data = (delimiterIndex > 0) ? data.substring(delimiterIndex + 1) : "";
    varIndex++;
  }
}

void sendHtmlPage(EthernetClient client) {
  // Update the variables array with the latest values from EEPROM
  for (int i = 0; i < numVariables; i++) {
    variables[i] = EEPROM.read(i);
  }

  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println();
  client.println("<!DOCTYPE html>");
  client.println("<html lang=\"id\">");
  client.println("<head>");
  client.println("<meta charset=\"UTF-8\">");
  client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">");
  client.println("<title>Input Memori Arduino</title>");
  client.println("<style>");
  client.println("body {font-family: Arial, sans-serif; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}");
  client.println(".container {background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%;}");
  client.println("h1 {text-align: center; color: #333;}");
  client.println("form {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}");
  client.println("label {margin-bottom: 5px; color: #555;}");
  client.println(".input-group {display: flex; flex-direction: column;}");
  client.println("input[type=\"number\"] {padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; width: 100%;}");
  client.println("input[type=\"submit\"] {grid-column: span 3; padding: 10px; background-color: #4CAF50; border: none; border-radius: 4px; color: white; font-size: 16px; cursor: pointer;}");
  client.println("input[type=\"submit\"]:hover {background-color: #45a049;}");
  client.println("</style>");
  client.println("</head>");
  client.println("<body>");
  client.println("<div class=\"container\">");
  client.println("<h1>Input Data Angka</h1>");
  client.println("<form action=\"/submit\" method=\"post\">");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value1\">Tanggal:</label>");
  client.print("<input type=\"number\" id=\"value1\" name=\"value1\" value=\"");
  client.print(formatNumber(variables[0]));
  client.print("\" min=\"0\" max=\"99\" required>");
  client.println("</div>");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value2\">Bulan:</label>");
  client.print("<input type=\"number\" id=\"value2\" name=\"value2\" value=\"");
  client.print(formatNumber(variables[1]));
  client.print("\" min=\"0\" max=\"99\" required>");
  client.println("</div>");

  client.print("<div class=\"input-group\">");
  client.print("<label for=\"value3\">Tahun:</label>");
  client.print("<input type=\"number\" id=\"value3\" name=\"value3\" value=\"");
  client.print(formatNumber(variables[2]));
  client.print("\" min=\"0\" max=\"9999\" required>");
  client.println("</div>");

  for (int i = 3; i < numVariables; i++) {
    client.print("<div class=\"input-group\">");
    client.print("<label for=\"value");
    client.print(i + 1);
    client.print("\">Angka ");
    client.print(i + 1);
    client.print(":</label>");
    client.print("<input type=\"number\" id=\"value");
    client.print(i + 1);
    client.print("\" name=\"value");
    client.print(i + 1);
    client.print("\" value=\"");
    client.print(formatNumber(variables[i]));
    client.println("\" min=\"0\" max=\"99\" required>");
    client.println("</div>");
  }

  client.println("<input type=\"submit\" value=\"Kirim\">");
  client.println("</form>");
  client.println("</div>");
  client.println("</body>");
  client.println("</html>");
}

String formatNumber(int num) {
  if (num < 10) {
    return "0" + String(num);
  } else {
    return String(num);
  }
}

void displayVariables() {
  for (int i = 0; i < numVariables; i++) {
    displayNumber(variables[i]);
    delay(500);
  }
}

void displayNumber(int number) {
  int thousands = number / 1000;
  int hundreds = (number / 100) % 10;
  int tens = (number / 10) % 10;
  int ones = number % 10;

  byte segmentsThousands = getSegments(thousands);
  byte segmentsHundreds = getSegments(hundreds);
  byte segmentsTens = getSegments(tens);
  byte segmentsOnes = getSegments(ones);

  digitalWrite(latchPin, LOW);
  shiftOut(dataPin, clockPin, MSBFIRST, segmentsOnes);
  shiftOut(dataPin, clockPin, MSBFIRST, segmentsTens);
  shiftOut(dataPin, clockPin, MSBFIRST, segmentsHundreds);
  shiftOut(dataPin, clockPin, MSBFIRST, segmentsThousands);
  digitalWrite(latchPin, HIGH);
}

byte getSegments(int number) {
  switch (number) {
    case 0: return B00111111; // 0
    case 1: return B00000110; // 1
    case 2: return B01011011; // 2
    case 3: return B01001111; // 3
    case 4: return B01100110; // 4
    case 5: return B01101101; // 5
    case 6: return B01111101; // 6
    case 7: return B00000111; // 7
    case 8: return B01111111; // 8
    case 9: return B01101111; // 9
    default: return 0;
  }
}

Penjelasan Tambahan:

  1. Fungsi getSegments:

    • Fungsi ini mengembalikan byte yang mewakili konfigurasi segmen-segmen yang perlu dinyalakan untuk menampilkan digit tertentu pada 7-segment display. Setiap case dari switch statement ini mewakili angka dari 0 sampai 9.

  2. Fungsi displayVariables:

    • Fungsi ini memanggil displayNumber untuk setiap variabel dalam array variables. Ini akan menampilkan nilai yang disimpan dalam EEPROM ke 7-segment display dengan jeda waktu setiap 500 ms.

  3. Fungsi displayNumber:

    • Fungsi ini menerima nilai number, kemudian membaginya menjadi ribuan, ratusan, puluhan, dan satuan. Setiap digit kemudian dikonversi menjadi konfigurasi segmen menggunakan getSegments. Nilai-nilai ini kemudian ditransmisikan ke 74HC595 menggunakan shiftOut function untuk ditampilkan pada 7-segment display.

Pastikan Anda telah melakukan koneksi yang benar antara pin Arduino dan 74HC595, serta antara 74HC595 dan 7-segment display. Juga pastikan bahwa perangkat keras (seperti Ethernet Shield) tersambung dengan benar untuk mengakses halaman HTML dari Arduino. Dengan ini, Anda dapat menampilkan formulir HTML yang diperbarui dengan input untuk Tanggal, Bulan, Tahun, dan angka lainnya dengan format dua digit pada antarmuka web.



-