Scribd
Upload
54 views7 pages

Buatinfo

Uploaded by

Kevin Nafeeza Daffa 9I 16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
54 views7 pages

Buatinfo

Uploaded by

Kevin Nafeeza Daffa 9I 16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

#include "WiFi.

h"

#include "ESPAsyncWebServer.h"

#include <ESP32Servo.h>

// ini relay

#define RELAY_NO true

#define NUM_RELAYS 1

// ini diisi pin relay

int relayGPIOs[NUM_RELAYS] = {18};

// ini diisi pin servo

Servo myservo;

static const int servoPin = 16;

// wifi , kalau hotspot diisi hotspot

const char* ssid = "kevinnafeezad";

const char* password = "kevinkeanu123*";

// webserver 80

AsyncWebServer server(80);

const char* PARAM_INPUT_1 = "relay";

const char* PARAM_INPUT_2 = "state";

//ini htmlnya

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8">

<style>
html {font-family: "Times New Roman",serif; display: inline-block; text-align: center;}

h2 {font-size: 2.5rem;}

p {font-size: 1.5rem;}

body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}

.switch {position: relative; display: inline-block; width: 120px; height: 68px}

.switch input {display: none}

.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius:
34px}

.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px;
background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}

input:checked+.slider {background-color: #2196F3}

input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform:


translateX(52px); transform: translateX(52px)}

.control-section {margin: 20px 0; padding: 20px; background-color: #f8f9fa; border-radius: 10px;}

.status {font-weight: bold; color: #2196F3;}

</style>

</head>

<body>

<h2>Tes webserver -kevin</h2>

%BUTTONPLACEHOLDER%

<div class="control-section">

<h3>Korden</h3>

<label class="switch">

<input type="checkbox" onchange="toggleServo(this)" id="servoToggle">

<span class="slider"></span>

</label>

<p>Kondisi Korden: <span id="KordenStatus" class="status">Tertutup</span></p>

</div>

<script>
function toggleCheckbox(element) {

var xhr = new XMLHttpRequest();

if(element.checked){

xhr.open("GET", "/update?relay="+element.id+"&state=1", true);

document.getElementById("lightStatus").innerHTML = "Menyala";

else {

xhr.open("GET", "/update?relay="+element.id+"&state=0", true);

document.getElementById("lightStatus").innerHTML = "Mati";

xhr.send();

function toggleServo(element) {

var angle = element.checked ? 110 : 20;

var xhr = new XMLHttpRequest();

xhr.open("GET", "/servo?value=" + angle, true);

xhr.send();

document.getElementById("KordenStatus").innerHTML = element.checked ? "Terbuka" : "Tertutup";

</script>

</body>

</html>

)rawliteral";

String processor(const String& var){

if(var == "BUTTONPLACEHOLDER"){

String buttons = "";

for(int i=1; i<=NUM_RELAYS; i++){

String relayStateValue = relayState(i);


buttons+= "<div class='control-section'><h3>Kontrol Lampu - PIN" + String(relayGPIOs[i-1]) +
"</h3><label class='switch'><input type='checkbox' onchange='toggleCheckbox(this)' id='" + String(i)
+ "' "+ relayStateValue +"><span class='slider'></span></label><p>Kondisi Lampu: <span
id='lightStatus' class='status'>" + (relayStateValue == "checked" ? "Menyala" : "Mati") +
"</span></p></div>";

return buttons;

return String();

String relayState(int numRelay){

if(RELAY_NO){

if(digitalRead(relayGPIOs[numRelay-1])){

return "";

else {

return "checked";

else {

if(digitalRead(relayGPIOs[numRelay-1])){

return "checked";

else {

return "";

return "";

void setup(){
// Serial port for debugging purposes

Serial.begin(115200);

// Set all relays to off when the program starts

for(int i=1; i<=NUM_RELAYS; i++){

pinMode(relayGPIOs[i-1], OUTPUT);

if(RELAY_NO){

digitalWrite(relayGPIOs[i-1], HIGH);

else{

digitalWrite(relayGPIOs[i-1], LOW);

// Initialize servo

ESP32PWM::allocateTimer(0);

myservo.setPeriodHertz(50); // Standard 50hz servo

myservo.attach(servoPin, 500, 2400); // Attach with min/max pulse width

myservo.write(0); // Set initial position

// nyambungin wifi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

// ini ngeprint local ip adressnya/webservernya //

Serial.println(WiFi.localIP());

// rute webpage
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){

request->send_P(200, "text/html", index_html, processor);

});

// kirim get request

server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {

String inputMessage;

String inputParam;

String inputMessage2;

String inputParam2;

if (request->hasParam(PARAM_INPUT_1) & request->hasParam(PARAM_INPUT_2)) {

inputMessage = request->getParam(PARAM_INPUT_1)->value();

inputParam = PARAM_INPUT_1;

inputMessage2 = request->getParam(PARAM_INPUT_2)->value();

inputParam2 = PARAM_INPUT_2;

if(RELAY_NO){

Serial.print("NO ");

digitalWrite(relayGPIOs[inputMessage.toInt()-1], !inputMessage2.toInt());

else{

Serial.print("NC ");

digitalWrite(relayGPIOs[inputMessage.toInt()-1], inputMessage2.toInt());

else {

inputMessage = "No message sent";

inputParam = "none";

Serial.println(inputMessage + inputMessage2);

request->send(200, "text/plain", "OK");


});

// Route for servo control

server.on("/servo", HTTP_GET, [] (AsyncWebServerRequest *request) {

if (request->hasParam("value")) {

String inputMessage = request->getParam("value")->value();

int angle = inputMessage.toInt();

angle = constrain(angle, 0, 180);

myservo.write(angle);

Serial.print("Setting servo to angle: ");

Serial.println(angle);

request->send(200, "text/plain", "OK");

});

server.begin();

void loop() {

You might also like