from machine import Pin
import network
import socket
import time

# Define GPIO pins
RELAY1 = Pin(32, Pin.OUT)
RELAY2 = Pin(33, Pin.OUT)

# Initialize GPIO states
RELAY1.value(0)  # OFF
RELAY2.value(0)  # OFF

RELAY1_state = "RELAY 1 is OFF"
RELAY2_state = "RELAY 2 is OFF"

#WiFi credentials
ssid = 'yourssid'
password = 'yourpassword'

wlan = network.WLAN(network.STA_IF)

#function to connect to Wi-Fi network
def cnctWifi():
    wlan.active(True)
    print('Attempting to connect to the network...')
    wlan.connect(ssid, password)        
    max_wait = 10
    while max_wait > 0 and not wlan.isconnected():
        max_wait -= 1
        print('waiting for connection...')
        time.sleep(1)
    
    # Manage connection errors
    if not wlan.isconnected():
        print('Network Connection has failed')
    else:
        print('Connected to the network successfully.')
        status = wlan.ifconfig()
        print( 'Enter this address in browser = ' + status[0] )

#HTML + CSS for webpage
html = """<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP32-EVB Relays control Web Server</title>
  <style>
    html {
      font-family: Arial;
      display: inline-block;
      margin: 0px auto;
      text-align: center;
    }
    
    h1 {
      font-family: Arial;
      color: #2551cc;
    }
    
    .button1,
    .button2 {
      -webkit-border-radius: 10;
      -moz-border-radius: 10;
      border-radius: 10px;
      font-family: Arial;
      color: #ffffff;
      font-size: 30px;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
      display: inline-block;
      margin: 5px;
    }
    
    .button1 {
      background: #339966;
    }
    
    .button2 {
      background: #993300;
    }
  </style>
</head>

<body>
  <h1>ESP32-EVB Relays Web Server</h1>
  <p>%s</p>
  <p>
    <a href="/RELAY1/on"><button class="button1">RELAY 1 ON</button></a>
    <a href="/RELAY1/off"><button class="button2">RELAY 1 OFF</button></a>
  </p>
  <p>%s</p>
  <p>
    <a href="/RELAY2/on"><button class="button1">RELAY 2 ON</button></a>
    <a href="/RELAY2/off"><button class="button2">RELAY 2 OFF</button></a>
  </p>
</body>
</html>
"""
# Connect to Wi-Fi
cnctWifi()
    
# Set up socket for web server
addr = socket.getaddrinfo('0.0.0.0', 80)[0][-1]
s = socket.socket()
s.setblocking(0)
s.bind(addr)
s.listen(1)

print('listening on', addr)

# Main loop for handling client requests
while True:
    if not wlan.isconnected():
        print("Connection failed. Trying to reconnect")
        wlan.disconnect()
        cnctWifi()
    if wlan.isconnected():
        try:
            cl, addr = s.accept()
            print('client connected from', addr)
            request = cl.recv(1024)
            print(request)

            request = str(request)
            RELAY1_on = request.find('/RELAY1/on')
            RELAY1_off = request.find('/RELAY1/off')
            RELAY2_on = request.find('/RELAY2/on')
            RELAY2_off = request.find('/RELAY2/off')

            if RELAY1_on == 6:
                print("RELAY 1 is on")
                RELAY1.value(1)
                RELAY1_state = "RELAY 1 is ON"

            if RELAY1_off == 6:
                print("RELAY 1 is off")
                RELAY1.value(0)
                RELAY1_state = "RELAY 1 is OFF"

            if RELAY2_on == 6:
                print("RELAY 2 is on")
                RELAY2.value(1)
                RELAY2_state = "RELAY 2 is ON"

            if RELAY2_off == 6:
                print("RELAY 2 is off")
                RELAY2.value(0)
                RELAY2_state = "RELAY 2 is OFF"

            response = html % (RELAY1_state, RELAY2_state)
            cl.send('HTTP/1.0 200 OK\r\nContent-type: text/html\r\n\r\n')
            cl.send(response)
            cl.close()

        except:
            pass
    time.sleep(0.1)
