Skip to content

Commit 8ce2546

Browse files
author
Jefe21054(Ivan)
committed
Web Server controlled lights
1 parent 2bc28ed commit 8ce2546

File tree

4 files changed

+223
-1
lines changed

4 files changed

+223
-1
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
# ESP8266-MicroPython
2-
Simple Web Server created to control lights and IoT stuff programmed with MicroPython, HTML, CSS & JavaScript
2+
Simple programs created to control lights and IoT stuff programmed with MicroPython, HTML, CSS & JavaScript

‎esp8266-Pinout.webp

46.4 KB
Binary file not shown.

‎index.html

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>IoT Control Webpage</title>
5+
<style>
6+
/* Set default font and background color for the body */
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #646464;
10+
}
11+
12+
/* Navbar Styles */
13+
header {
14+
background-color: #4584B6; /* Change color to match Android 12L */
15+
height: 80px;
16+
}
17+
18+
nav {
19+
display: flex;
20+
justify-content: center; /* Center the content horizontally */
21+
align-items: center; /* Center the content vertically */
22+
height: 100%;
23+
padding: 0 20px;
24+
}
25+
26+
.logo {
27+
display: flex;
28+
justify-content: center; /* Center the content horizontally */
29+
align-items: center; /* Center the content vertically */
30+
}
31+
32+
.logo img {
33+
height: 60px;
34+
margin-right: 20px;
35+
}
36+
37+
.logo h1 {
38+
color: #FFDE57;
39+
font-size: 24px;
40+
margin: 0;
41+
align-items: center;
42+
margin: 0 auto; /* Set the left and right margins to auto */
43+
}
44+
45+
ul {
46+
display: flex;
47+
list-style: none;
48+
margin: 0;
49+
padding: 0;
50+
}
51+
52+
ul li {
53+
margin: 0 10px;
54+
}
55+
56+
ul li a {
57+
color: #FFDE57;
58+
text-decoration: none;
59+
font-size: 20px;
60+
}
61+
62+
ul li a:hover {
63+
text-decoration: underline;
64+
}
65+
66+
/* Content Container Styles */
67+
main {
68+
padding: 50px;
69+
}
70+
71+
.content-container {
72+
display: flex;
73+
flex-wrap: wrap;
74+
justify-content: space-between;
75+
}
76+
77+
.column {
78+
flex-basis: calc(50% - 20px);
79+
margin-bottom: 40px;
80+
}
81+
82+
.card {
83+
background-color: #FFDE57;
84+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
85+
padding: 20px;
86+
text-align: center;
87+
}
88+
89+
.card img {
90+
max-width: 100%;
91+
height: auto;
92+
margin-bottom: 20px;
93+
}
94+
95+
.card h2 {
96+
margin: 0;
97+
font-size: 24px;
98+
color: #4584B6; /* Change color to match Android 12L */
99+
}
100+
101+
.on-btn {
102+
background-color: #4584B6; /* Change color to match Android 12L */
103+
color: #FFDE57;
104+
border: none;
105+
padding: 5px 10px;
106+
}
107+
108+
.off-btn {
109+
background-color: #646464; /* Change color to match Android 12L */
110+
color: #FFDE57;
111+
border: none;
112+
padding: 5px 10px;
113+
}
114+
</style>
115+
<link rel="shortcut icon" type="image/png" href="https://i.imgur.com/K6lnJ5a.png">
116+
</head>
117+
<body>
118+
<!-- Navbar -->
119+
<header>
120+
<nav>
121+
<div class="logo">
122+
<img src="https://i.imgur.com/kyHOKki.png" alt="Logo">
123+
<h1>Iglesias IoT</h1>
124+
</div>
125+
</nav>
126+
</header>
127+
128+
<!-- Content Container -->
129+
<main>
130+
<div class="content-container">
131+
<div class="column">
132+
<div class="card">
133+
<img src="https://i.imgur.com/DpejE2f.jpeg" alt="Image 1">
134+
<h2>ON BOARD LED</h2>
135+
<br>
136+
<a href="/cocina=on" class="on-btn">ON</a>
137+
<a href="/cocina=off" class="off-btn">OFF</a>
138+
</div>
139+
</div>
140+
<div class="column">
141+
<div class="card">
142+
<img src="https://i.imgur.com/DpejE2f.jpeg" alt="Image 2">
143+
<h2>DIODE LED</h2>
144+
<br>
145+
<a href="/cafetera=on" class="on-btn">ON</a>
146+
<a href="/cafetera=off" class="off-btn">OFF</a>
147+
</div>
148+
</div>
149+
</div>
150+
</main>
151+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
152+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
153+
</body>
154+
</html>

‎web_server.py

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Import modules we'll need elsewhere
2+
import time
3+
from machine import Pin
4+
import network
5+
import socket
6+
7+
# Define network credentials
8+
ssid = 'Wi-Fi SSID'
9+
password = 'Wi-Fi Password'
10+
11+
# Use network module to connect to local Wi-Fi
12+
# Create a new Wi-Fi station interface
13+
wlan = network.WLAN(network.STA_IF)
14+
15+
# Activate the interface and connect to the Wi-Fi network
16+
wlan.active(True)
17+
wlan.connect(ssid, password)
18+
19+
# Wait for the interface to obtain an IP address from the DHCP server
20+
while not wlan.isconnected():
21+
pass
22+
23+
# Print the IP address assigned to the interface
24+
print('')
25+
print('Conexion con la Red %s establecida' % ssid)
26+
print(wlan.ifconfig()) # Show the IP & other data from Wi-Fi
27+
28+
# Outputs
29+
cocina = machine.Pin(2, machine.Pin.OUT)
30+
cafetera = machine.Pin(10, machine.Pin.OUT)
31+
32+
# Set up the webpage
33+
def web_page():
34+
file = open('index.html','r')
35+
html = file.read()
36+
file.close()
37+
return html
38+
39+
# Handle requests
40+
tcp_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
41+
tcp_socket.bind(('', 80))
42+
tcp_socket.listen(3)
43+
while True:
44+
conn, addr = tcp_socket.accept()
45+
print('Nueva conexion desde: %s' % str(addr))
46+
request = conn.recv(1024)
47+
print('Solicitud = %s' % str(request))
48+
request = str(request)
49+
if request.find('/cafetera=on') == 6:
50+
print('Cafetera ON')
51+
cafetera.value(1)
52+
if request.find('/cafetera=off') == 6:
53+
print('Cafetera OFF')
54+
cafetera.value(0)
55+
if request.find('/cocina=on') == 6:
56+
print('Cafetera ON')
57+
cocina.value(0)
58+
if request.find('/cocina=off') == 6:
59+
print('Cafetera OFF')
60+
cocina.value(1)
61+
62+
#Mostrar Página
63+
response = web_page()
64+
conn.send('HTTP/1.1 200 OK\n')
65+
conn.send('Content-Type: text/html\n')
66+
conn.send('Connection: close\n\n')
67+
conn.sendall(response)
68+
conn.close()

0 commit comments

Comments
 (0)