Wifi Calculator
Pada proyek berikutnya kami diminta untuk membuat kalkulator. Masih menggunakan board yang sama yaitu WeMos D1 R1 kami mencoba membuatnya dengan input dari keypad dan hasil ditampilkan di Website
karena opsi "Input dari Website dan hasil ditampilkan ke LCD" terjadi kegagalan karena konfigurasi board WeMos D1 R1 kami sepertinya tidak mendukung LCD display.
Komponen yang digunakan:
- WeMos D1 R1
2. 4×4/4×3 Membrane Keypad
Rangkaian modul ini cukup sederhana tinggal hubungkan saja pin yang ada pada keypad mulai dari D2 pin sampai D9 pin pada WeMos D1 R1.
Setelah itu jalankan kode berikut ini yang mengandung fungsi yang mengirimkan input dari keypad ke website yang ada pada board WeMos D1 ketika ia berfungsi sebagai server.
/*
* ESP8266 NodeMCU AJAX Demo
* Updates and Gets data from webpage without page refresh
* https://circuits4you.com
*/
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <Keypad.h>
const byte ROWS = 4; //four rows
const byte COLS = 4; //three columns
char keys[ROWS][COLS] = {
{'1', '2', 'A', '3'},
{'4', '5', 'B', '6'},
{'7', '8', 'C', '9'},
{'*', '0', 'D', '#'}
};
byte rowPins[ROWS] = {D2, D3, D4, D5}; //connect to the row pinouts of the kpd
byte colPins[COLS] = {D6, D7, D8, D9}; //connect to the column pinouts of the kpd
Keypad keypad = Keypad( makeKeymap(keys), rowPins, colPins, ROWS, COLS );
char entryStr[8];
int i=0;
const char INDEX_HTML[] =
"<!DOCTYPE html>"
"<html>"
"<body style= 'font-family:monospace; background-color:black; color: white;'>"
"<div id='demo'>"
"<h1 style='font-size: 70px'>Wifi Calculator</h1>"
"</div>"
"<h2> * -> kali ** -> tambah *** -> kurang **** -> bagi</h2>"
"<div style='font-size: 40px;'>"
"<input style='width:300px; height:200px; font-size: 5rem; color: green;' id='calcin' type='text' name='calcin'>"
"<button style='width:300px; height:200px; font-size: 5rem; color: red;' onclick='calculate()'>Hitung</button>"
"<h1 id='operation' style= 'font-size: 5rem; color: red;'></h1>"
"<h1 id='calcout' style= 'font-size: 5rem; color: blue;'></h1>"
"</div>"
"<script>"
"var inputobj= {value:''};"
"setInterval(function() {"
// Call a function repetatively with 2 Second interval
"var inch= document.getElementById('calcin').value;"
"var incs= inch;"
"getData(inputobj);"
"document.getElementById('calcin').value = incs + inputobj.value;"
"}, 100);" //2000mSeconds update rate
"function getData(inputo) {"
"var xhttp = new XMLHttpRequest();"
"xhttp.onreadystatechange = function() {"
"if (this.readyState == 4 && this.status == 200) {"
"inputo.value= this.responseText;"
"}"
"};"
"xhttp.open('GET', 'readSensor', true);"
"xhttp.send();"
"}"
"function calculate() {"
"var masukan = document.getElementById('calcin').value;"
"var keluaran = document.getElementById('calcout');"
"var operasi = document.getElementById('operation');"
"var a = parseInt(masukan.charAt(0));"
"var b = parseInt(masukan.charAt(masukan.length - 1));"
"var operand = masukan.slice(1, masukan.length -1);"
"if (operand == '*'){"
"var c = a * b;"
"operasi.innerHTML = a.toString() + '*' + b.toString() + '=';"
"keluaran.innerHTML = c;"
"document.getElementById('calcin').value ='';"
"}"
"else if (operand == '**'){"
"var c = a + b;"
"operasi.innerHTML = a.toString() + '+' + b.toString() + '=';"
"keluaran.innerHTML = c;"
"document.getElementById('calcin').value ='';"
"}"
"else if (operand == '***'){"
"var c = a - b;"
"operasi.innerHTML = a.toString() + '-' + b.toString() + '=';"
"keluaran.innerHTML = c;"
"document.getElementById('calcin').value ='';"
"}"
"else if (operand == '****'){"
"var c = a / b;"
"operasi.innerHTML = a.toString() + ':' + b.toString() + '=';"
"keluaran.innerHTML = c;"
"document.getElementById('calcin').value ='';"
"}"
"}"
"</script>"
"</body>"
"</html>";
//SSID and Password of your WiFi router
const char* ssid = "SmartParking";
const char* password = "lastikel4";
ESP8266WebServer server(80); //Server on port 80
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() { //Read HTML contents
server.send(200, "text/html", INDEX_HTML); //Send web page
}
void handleSensor() {
char key = keypad.getKey();
String SensorValue = String(key);
Serial.println(SensorValue);
server.send(200, "text/plane", SensorValue);
//Send Sensor value only to client ajax request
}
//==============================================================
// SETUP
//==============================================================
void setup(void){
Serial.begin(9600);
Serial.println("");
WiFi.mode(WIFI_AP); //Only Access point
WiFi.softAP(ssid, password); //Start HOTspot removing password will disable security
IPAddress myIP = WiFi.softAPIP(); //Get IP address
Serial.print("HotSpt IP:");
Serial.println(myIP);
//Onboard LED port Direction output
pinMode(LED_BUILTIN, OUTPUT);
server.on("/", handleRoot); //Which routine to handle at root location
server.on("/readSensor", handleSensor);
server.begin(); //Start server
Serial.println("HTTP server started");
}
//==============================================================
// LOOP
//==============================================================
void loop(void){
server.handleClient(); //Handle client requests
}
Comments
Post a Comment