#Lab39_WebServer_Multi_ControlOutputs.py
# boot.py
try:
import usocket as socket
except:
import socket
from machine import Pin
import network
import esp
esp.osdebug(None)
import gc
gc.collect()
ssid = 'Hana_Harpel22.4G'
password = 'hanaharper2513'
station = network.WLAN(network.STA_IF)
station.active(True)
station.connect(ssid, password)
while station.isconnected() == False:
pass
print('Connection successful')
print(station.ifconfig())
relay1 = Pin(5, Pin.OUT)
relay2 = Pin(25, Pin.OUT)
relay3 = Pin(33, Pin.OUT)
relay4 = Pin(32, Pin.OUT)
#main.py
def web_page():
if relay1.value() == 0:
relay1_state = ""
else:
relay1_state = 'checked'
if relay2.value() == 0:
relay2_state = ""
else:
relay2_state = 'checked'
if relay3.value() == 0:
relay3_state = ""
else:
relay3_state = 'checked'
if relay4.value() == 0:
relay4_state = ""
else:
relay4_state = 'checked'
html = """<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
text-align: center;
margin: 0px auto;
padding-top: 40px;
}
.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: 0.4s;
transition: 0.4s;
border-radius: 68px;
}
input:checked + .slider {
background-color: #ffc0cb;
}
input:checked + .slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
</style>
</head>
<body>
<h1>ESP Relay Web Server</h1>
<label class="switch"
><input type="checkbox" onchange="toggleCheckbox(this)" %s /><span
class="slider"
>
</span
></label>
<hr />
<label class="switch"
><input id="relay1" onclick="return relay1(this)" type="checkbox" /><span
class="slider"
>
</span
></label>
<label class="switch"
><input id="relay0" onclick="return relay0(this)" type="checkbox" /><span
class="slider"
>
</span
></label>
<hr />
<label class="switch"
><input id="relay2" onclick="return relay2(this)" type="checkbox" /><span
class="slider"
>
</span
></label>
<label class="switch"
><input id="relay3" onclick="return relay3(this)" type="checkbox" /><span
class="slider"
>
</span
></label>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = Date();
function relay0(res) {
var xhr = new XMLHttpRequest();
if (res.checked) {
xhr.open("GET", "/?relay3=on", true);
} else {
xhr.open("GET", "/?relay3=off", true);
}
xhr.send();
}
function relay1(res) {
var xhr = new XMLHttpRequest();
if (res.checked) {
xhr.open("GET", "/?relay2=on", true);
} else {
xhr.open("GET", "/?relay2=off", true);
}
xhr.send();
}
function relay2(res) {
var xhr = new XMLHttpRequest();
if (res.checked) {
xhr.open("GET", "/?relay4=on", true);
} else {
xhr.open("GET", "/?relay4=off", true);
}
xhr.send();
}
function relay3(res) {
var xhr = new XMLHttpRequest();
if (res.checked) {
xhr.open("GET", "/?relay4=on", true);
} else {
xhr.open("GET", "/?relay4=off", true);
}
xhr.send();
}
function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if (element.checked) {
xhr.open("GET", "/?relay1=on", true);
} else {
xhr.open("GET", "/?relay1=off", true);
}
xhr.send();
}
</script>
</body>
</html>""" % (relay1_state)
return html
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))
s.listen(5)
while True:
try:
if gc.mem_free() < 102000:
gc.collect()
conn, addr = s.accept()
conn.settimeout(3.0)
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
conn.settimeout(None)
request = str(request)
print(request)
print('Content = %s' % request)
relay1_on = request.find('/?relay1=on')
print(relay1_on)
relay1_off = request.find('/?relay1=off')
relay2_on = request.find('/?relay2=on')
print(relay2_on)
relay2_off = request.find('/?relay2=off')
relay3_on = request.find('/?relay3=on')
print(relay3_on)
relay3_off = request.find('/?relay3=off')
relay4_on = request.find('/?relay4=on')
print(relay4_on)
relay4_off = request.find('/?relay4=off')
if relay1_on == 6:
print('relay1 ON')
relay1.value(1)
if relay1_off == 6:
print('relay1 OFF')
relay1.value(0)
if relay2_on == 6:
print('relay2 ON')
relay2.value(1)
if relay2_off == 6:
print('relay2 OFF')
relay2.value(0)
if relay3_on == 6:
print('relay3 ON')
relay3.value(1)
if relay3_off == 6:
print('relay3 OFF')
relay3.value(0)
if relay4_on == 6:
print('relay4 ON')
relay4.value(1)
if relay4_off == 6:
print('relay4 OFF')
relay4.value(0)
response = web_page()
conn.send('HTTP/1.1 200 OK\n')
conn.send('Content-Type: text/html\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
except OSError as e:
conn.close()
print('Connection closed')