ESP8266 adalah modul Wi-Fi yang memungkinkan untuk mengontrol input dan output seperti yang dilakukan dengan Arduino atau Mikrokontroler lain tetapi dilengkapi dengan Wi-Fi.
Tidak semua GPIO dapat digunakan pada semua Development Board, tetapi setiap GPIO tertentu bekerja dengan cara yang sama pada semua Development Board ESP8266 yang Anda gunakan. Berikut ini Penjelasan Pin I/O ESP8266 :
Input Analog
ESP8266 hanya mendukung pembacaan analog pada satu pin GPIO (ADC0/A0). Tegangan input maksimum pin ADC0 adalah 0 hingga 1V jika Anda menggunakan chip kosong ESP8266. Jika Anda menggunakan Development Board seperti kit ESP8266 12-E NodeMCU, rentang input tegangan adalah 0 hingga 3,3V karena board ini berisi pembagi tegangan internal.
LED bekerja dengan logika terbalik/Invert (active low). Kirim sinyal HIGH untuk mematikannya, dan sinyal LOW untuk menyalakannya.
Percobaan 71: Akses Modul IoT menggunakan ESP8266
- Hubungkan L0 ACTIVE HIGH dengan pin D8 ESP8266 NODE MCU
- Hubungkan L1 ACTIVE HIGH dengan pin D6 ESP8266 NODE MCU
- Hubungkan board ATMEGA 2560 dengan Komputer menggunakan kabel USB.
- Bukalah IDE Arduino, kemudian ketikkan kode program/sketch atau buka file WEB_SOCKET, Slider_PWM dan web_server_2_thingspeak
- Compile menggunakan verify button (tanda ceklist pada IDE arduino) untuk mengecek ada atau tidaknya error/kesalahan dalam pengetikan.
- Upload program ke arduino dengan cara, pilih File > Upload to I/O board, atau tekan tombol tanda panah pada jendela IDE arduino.
Code WEB_SOCKET:
// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "Galinggang2";
const char* password = "galinggang2";
bool ledStateLH = 0, ledStateLK = 0;
#define led1 D8
#define led2 D6
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
h2{
font-size: 1.5rem;
font-weight: bold;
color: #143642;
}
.topnav {
overflow: hidden;
background-color: #143642;
}
body {
margin: 0;
}
.content {
padding: 30px;
max-width: 600px;
margin: 0 auto;
}
.card {
background-color: #F8F7F9;;
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
padding-top:10px;
padding-bottom:20px;
}
.button {
padding: 15px 50px;
font-size: 24px;
text-align: center;
outline: none;
color: #fff;
background-color: #0f8b8d;
border: none;
border-radius: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/*.button:hover {background-color: #0f8b8d}*/
.button:active {
background-color: #0f8b8d;
box-shadow: 2 2px #CDCDCD;
transform: translateY(2px);
}
.state {
font-size: 1.5rem;
color:#8c8c8c;
font-weight: bold;
}
</style>
<title>ESP Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
</head>
<body>
<div class="topnav">
<h1>ESP WebSocket Server</h1>
</div>
<div class="content">
<div class="card">
<h2>LED 1</h2>
<p><button id="buttonLH" class="button">LED 1</button></p>
</div>
</div>
<div class="content">
<div class="card">
<h2>LED 2</h2>
<p><button id="buttonLK" class="button">LED 2</button></p>
</div>
</div>
<script>
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
window.addEventListener('load', onLoad);
function initWebSocket() {
console.log('Trying to open a WebSocket connection...');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessageLH; // <-- add this line
} websocket.onmessage = onMessageLK;
function onOpen(event) {
console.log('Connection opened');
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
function onMessageLH(event) {
var state;
if (event.data == "1"){
state = "ON";
}
else{
state = "OFF";
}
document.getElementById('stateLH').innerHTML = state;
}
function onMessageLK(event) {
var state;
if (event.data == "1"){
state = "ON";
}
else{
state = "OFF";
}
document.getElementById('stateLK').innerHTML = state;
}
function onLoad(event) {
initWebSocket();
initButton();
}
function initButton() {
document.getElementById('buttonLH').addEventListener('click', toggleLH);
document.getElementById('buttonLK').addEventListener('click', toggleLK);
}
function toggleLH(){
websocket.send('toggleLH');
}
function toggleLK(){
websocket.send('toggleLK');
}
</script>
</body>
</html>
)rawliteral";
void notifyClients() {
ws.textAll(String(ledStateLH));
ws.textAll(String(ledStateLK));
}
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
if (strcmp((char*)data, "toggleLH") == 0) {
ledStateLH = !ledStateLH;
notifyClients();
}
if (strcmp((char*)data, "toggleLK") == 0) {
ledStateLK = !ledStateLK;
notifyClients();
}
}
}
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
void *arg, uint8_t *data, size_t len) {
switch (type) {
case WS_EVT_CONNECT:
Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
break;
case WS_EVT_DISCONNECT:
Serial.printf("WebSocket client #%u disconnected\n", client->id());
break;
case WS_EVT_DATA:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
String processor(const String& var){
Serial.println(var);
if(var == "STATELH"){
if (ledStateLH){
return "ON";
}
else{
return "OFF";
}
}
if(var == "STATELK"){
if (ledStateLK){
return "ON";
}
else{
return "OFF";
}
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
pinMode(led1, OUTPUT);
digitalWrite(led1, LOW);
pinMode(led2, OUTPUT);
digitalWrite(led2, LOW);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
initWebSocket();
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Start server
server.begin();
}
void loop() {
ws.cleanupClients();
digitalWrite(led1, ledStateLH);
digitalWrite(led2, ledStateLK);
}
.
Video Demo:
Code Slider_PWM :
/*********
Rui Santos
Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcu-web-server-slider-pwm/
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
*********/
// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "Galinggang2";
const char* password = "galinggang2";
const int output = 14;//D5
String sliderValue = "0";
const char* PARAM_INPUT = "value";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP Web Server Motor Speed Control</title>
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}
body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
</style>
</head>
<body>
<h2>ESP Web Server Motor Speed Control</h2>
<p><span id="textSliderValue">%SLIDERVALUE%</span></p>
<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
var sliderValue = document.getElementById("pwmSlider").value;
document.getElementById("textSliderValue").innerHTML = sliderValue;
console.log(sliderValue);
var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();
}
</script>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
analogWrite(output, sliderValue.toInt());
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
String inputMessage;
// GET input1 value on <ESP_IP>/slider?value=<inputMessage>
if (request->hasParam(PARAM_INPUT)) {
inputMessage = request->getParam(PARAM_INPUT)->value();
sliderValue = inputMessage;
analogWrite(output, sliderValue.toInt());
}
else {
inputMessage = "No message sent";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
.
Video Demo:
Code web_server_2_thingspeak:
#include <ESP8266WiFi.h>
#include "ThingSpeak.h"
#include <Wire.h>
#include <Adafruit_INA219.h>
const char* ssid = "Galinggang"; // your network SSID (name)
const char* password = "galinggang"; // your network password
WiFiClient client;
Adafruit_INA219 ina219;
unsigned long myChannelNumber = 1;
const char * myWriteAPIKey = "L3KJT94AEDCPLCBM";
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 3000;
float current_mA = 0;
float loadvoltage = 0;
float power_mW = 0;
float busvoltage = 0;
float shuntvoltage = 0;
void setup() {
Serial.begin(115200); //Initialize serial
ina219.begin();
WiFi.mode(WIFI_STA);
ThingSpeak.begin(client); // Initialize ThingSpeak
}
void loop() {
if ((millis() - lastTime) > timerDelay) {
// Connect or reconnect to WiFi
if(WiFi.status() != WL_CONNECTED){
Serial.print("Attempting to connect");
while(WiFi.status() != WL_CONNECTED){
WiFi.begin(ssid, password);
delay(5000);
}
Serial.println("\nConnected.");
}
// Get a new temperature reading
current_mA = 0;
loadvoltage = 0;
power_mW = 0;
busvoltage = 0;
shuntvoltage = 0;
shuntvoltage = ina219.getShuntVoltage_mV();
busvoltage = ina219.getBusVoltage_V();
current_mA = ina219.getCurrent_mA();
power_mW = ina219.getPower_mW();
loadvoltage = busvoltage + (shuntvoltage / 1000);
Serial.print("Load Voltage: "); Serial.print(loadvoltage); Serial.println(" V");
Serial.print("Current: "); Serial.print(current_mA); Serial.println(" mA");
Serial.print("Power: "); Serial.print(power_mW); Serial.println(" mW");
Serial.println("");
//uncomment if you want to get temperature in Fahrenheit
/*temperatureF = 1.8 * bme.readTemperature() + 32;
Serial.print("Temperature (ºC): ");
Serial.println(temperatureF);*/
ThingSpeak.setField(1, current_mA);
ThingSpeak.setField(2, loadvoltage);
ThingSpeak.setField(3, power_mW);
// Write to ThingSpeak. There are up to 8 fields in a channel, allowing you to store up to 8 different
// pieces of information in a channel. Here, we write to field 1.
int x = ThingSpeak.writeFields(myChannelNumber, myWriteAPIKey);
if(x == 200){
Serial.println("Channel update successful.");
}
else{
Serial.println("Problem updating channel. HTTP error code " + String(x));
}
lastTime = millis();
}
}
.
Video Demo: