Berikut adalah langkah-langkah untuk membuat sebuah sistem berbasis Arduino Mega yang memenuhi ketentuan yang diberikan:
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.
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.
Menyimpan data ke EEPROM:
- Gunakan library EEPROM untuk menyimpan dan mengambil nilai variabel dari EEPROM.
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
}
}
#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:
Membaca EEPROM Setelah POST:
- Setelah
processPostData(request)memproses data POST, fungsisendHtmlPage(client)membaca nilai terbaru dari EEPROM sebelum mengirim halaman HTML.
- Setelah
Memperbarui Nilai dari EEPROM:
- Pada
sendHtmlPage, pembacaan nilai dari EEPROM dilakukan kembali untuk memastikan bahwa nilai terbaru dari EEPROM ditampilkan di halaman HTML.
- Pada
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:
- 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
formatNumberditambahkan untukmengubah angka menjadi format dua digit dengan menambahkan nol di depan jika angka kurang dari 10. - Fungsi
formatNumber: - Fungsi
formatNumberditambahkan 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. - Menampilkan Nilai pada 7-Segment:
- Fungsi
displayNumberdiperbarui untuk menangani dua digit dari setiap variabel. Variabel dibagi menjadi puluhan dan satuan. - Segmen untuk setiap digit dihitung menggunakan fungsi
getSegmentsdan 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:
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.
Fungsi
displayVariables:- Fungsi ini memanggil
displayNumberuntuk setiap variabel dalam arrayvariables. Ini akan menampilkan nilai yang disimpan dalam EEPROM ke 7-segment display dengan jeda waktu setiap 500 ms.
- Fungsi ini memanggil
Fungsi
displayNumber:- Fungsi ini menerima nilai
number, kemudian membaginya menjadi ribuan, ratusan, puluhan, dan satuan. Setiap digit kemudian dikonversi menjadi konfigurasi segmen menggunakangetSegments. Nilai-nilai ini kemudian ditransmisikan ke 74HC595 menggunakanshiftOutfunction untuk ditampilkan pada 7-segment display.
- Fungsi ini menerima nilai
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.
