Langkah pertama kamu rangkai servo dan esp 8266 dengan skema seperti ini.
kemudian siapkan dashboard file html, untuk mengendalikan servo jarak jauh. dashboard ini fungsinya untuk mengirimkan pesan melalui mqtt dengan topic tertentu.
disini topic yang kita gunakan adalah : rokhmad.com/servo
File html sebagai dashboard,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Sensor</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Label "Terhubung" -->
<div class="status">
<p id="status">Terputus</p>
</div>
<!-- Card baru untuk mengirim teks ke servo -->
<br></br>
<h1>KENDALI SERVO</h1>
<br></br>
<div class="card">
<div class="slidecontainer">
<h2>Putar Servo</h2>
<input type="range" min="0" max="180" value="demo" id="myRange" onchange=sendServo()>
<p>sudut : <span id="demo"></span></p>
</div>
</div>
</body>
<!-- koneksi ke mqtt -->
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
const clientId = Math.random().toString(16).substr(2, 8);
const host = 'wss://broker.emqx.io:8084/mqtt';
const options = {
keepalive: 30,
clientId: clientId,
protocolId: 'MQTT',
protocolVersion: 4,
clean: true,
reconnectPeriod: 1000,
connectTimeout: 30 * 1000
}
console.log("Menghubungkan ke Broker");
const client = mqtt.connect(host, options);
client.on('connect', () => {
console.log('Terhubung ke broker:' + clientId)
client.subscribe('rokhmad.com/#', { qos: 1 })
document.getElementById("status").innerHTML = "Terhubung";
})
<!-- baca topic dari mqtt -->
client.on('message', (topic, message, packet) => {
if(topic === "rokhmad.com/servo"){
document.getElementById("myRange").value = message;
document.getElementById("demo").innerHTML = message;
var demo = document.querySelector('.sliderr');
}
})
function sendServo(){
var sliderr = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = myRange.value;
sliderr.oninput = function() {
output.innerHTML = this.value;
sendServo()
}
var sliderr = document.getElementById("myRange").value;
client.publish("rokhmad.com/servo", sliderr, {qos: 1, retain: true});
sliderr.addEventListener("input",function(e)
{
demo=sliderr.value;
});
}
</script>
</html>
ketika dibuka di browser chrome hasilnya seperti ini :
Ketika slider kita geser, maka akan mengirim topic : rokhmad.com/servo/(disini sudut servo) dikirimkan. digambar diatas posisi slider di 23, maka dkn terkirim topik : rokhmad.com/servo/ dengan pesan 23.
Pesan yang masuk di broker MQTT ini, (disini saya menggunakan broker.emqx.io) kemudian akan dipanggil oleh esp 8266, dan kemudian diguanakan untuk menggerakkan servo, sesuai dengan sudut yang dikirimkan.
berikut sketchnya:
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <Servo.h>
////
Servo myservo;
int posLama;
int posBaru;
//////////////////
// WiFi settings
const char *ssid = "Rohmad.com"; // Replace with your WiFi name
const char *password = "1122334455"; // Replace with your WiFi password
// MQTT Broker settings
const char *mqtt_broker = "broker.emqx.io"; // EMQX broker endpoint
const char *mqtt_topic = "rokhmad.com/#"; // MQTT topic
const char *mqtt_topic5 = "rokhmad.com/servo"; // MQTT topic
const char *mqtt_username = "emqx"; // MQTT username for authentication
const char *mqtt_password = "public"; // MQTT password for authentication
const int mqtt_port = 1883; // MQTT port (TCP)
WiFiClient espClient;
PubSubClient mqtt_client(espClient);
void connectToWiFi();
void connectToMQTTBroker();
void mqttCallback(char *topic, byte *payload, unsigned int length);
void setup() {
myservo.attach(4);
int posLama = posBaru;
Serial.begin(115200);
connectToWiFi();
mqtt_client.setServer(mqtt_broker, mqtt_port);
mqtt_client.setCallback(mqttCallback);
connectToMQTTBroker();
}
void connectToWiFi() {
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nConnected to the WiFi network");
}
void connectToMQTTBroker() {
while (!mqtt_client.connected()) {
String client_id = "esp8266-client-" + String(WiFi.macAddress());
Serial.printf("Connecting to MQTT Broker as %s.....\n", client_id.c_str());
if (mqtt_client.connect(client_id.c_str(), mqtt_username, mqtt_password)) {
Serial.println("Connected to MQTT broker");
mqtt_client.subscribe(mqtt_topic);
// Publish message upon successful connection
mqtt_client.publish(mqtt_topic, "12345A");
} else {
Serial.print("Failed to connect to MQTT broker, rc=");
Serial.print(mqtt_client.state());
Serial.println(" try again in 5 seconds");
delay(5000);
}
}
}
void mqttCallback(char *topic, byte *payload, unsigned int length) {
Serial.print("Message received on topic: ");
Serial.println(topic);
//Serial.print("Message:");
String message;
for (int i = 0; i < length; i++) {
message += (char) payload[i]; // Convert *byte to string
}
///////////////////////////////////
if (String (topic) == "rokhmad.com/servo") {
posBaru=message.toInt();
if (posLama < posBaru ) {
while (posLama < posBaru ) {
posLama++;
myservo.write(posLama);
Serial.println("servo duputar");
delay(20);
}
} else if (posLama > posBaru) {
while (posLama > posBaru ) {
posLama--;
myservo.write(posLama);
Serial.println("servo duputar");
delay(20);
} }
int posLama = posBaru;
}
/////////////////////////
Serial.println(message);
Serial.println();
Serial.println("-----------------------");
}
void loop() {
if (!mqtt_client.connected()) {
connectToMQTTBroker();
}
mqtt_client.loop();
}
===================================
untuk project lengkap silahkan unduh disini
===================================
0 comments:
Post a Comment