Improve webinterface

pull/16/head
TilCreator 2018-05-29 22:19:01 +02:00
rodzic 9d3094862a
commit 0370235697
1 zmienionych plików z 161 dodań i 69 usunięć

Wyświetl plik

@ -9,6 +9,109 @@ ap_authmode = 3 # WPA2
NETWORK_PROFILES = 'wifi.dat'
html_head = """
<head>
<title>WiFi Manager</title>
<style>
body {
margin: 0px 20px;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
ul {
list-style-type: none;
padding: 0px;
}
li {
margin: 0px -10px;
padding: 10px 10px 10px 10px;
}
a, h1, h2, h3 {
color: #333;
text-decoration: none;
}
p > a {
text-decoration: underline;
}
a > li,
li[onclick] {
background-color: #ffffff00;
transition: background-color .5s;
}
a:hover li, a:active li,
li:hover[onclick], li:active[onclick] {
background-color: #ddd;
cursor: pointer;
}
h1, form {
position: relative;
max-width: 750px;
width: 100%;
margin: auto;
}
h1 {
margin: 10px auto;
}
h3 {
margin: 10px 0px -10px 0px;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
button {
position: relative;
max-width: 750px;
width: 100%;
margin: auto;
padding: 10px 10px 10px 10px;
display: block;
text-align: left;
border: none;
background: transparent;
font-size: 1em;
background-color: #ffffff00;
transition: background-color .5s;
}
button:hover, button:active {
background-color: #ddd;
cursor: pointer;
}
#submit {
border: none;
background: transparent;
padding: 0px;
font-size: 1em;
}
.monospace {
font-family: 'Roboto Mono', monospace;
}
.fixedWidth {
width: 100px;
display: inline-block;
}
.placeholder {
padding-bottom: 20px;
}
</style>
</head>
"""
wlan_ap = network.WLAN(network.AP_IF)
wlan_sta = network.WLAN(network.STA_IF)
@ -119,62 +222,58 @@ def handle_root(client):
wlan_sta.active(True)
ssids = sorted(ssid.decode('utf-8') for ssid, *_ in wlan_sta.scan())
send_header(client)
client.sendall("<html>")
client.sendall(html_head)
client.sendall("""\
<html>
<h1 style="color: #5e9ca0; text-align: center;">
<span style="color: #ff0000;">
Wi-Fi Client Setup
</span>
</h1>
<form action="configure" method="post">
<table style="margin-left: auto; margin-right: auto;">
<tbody>
<body>
<form action="configure" method="post">
<h1>
Wi-Fi Client Setup
</h1>
<h3>
SSIDs (click to select)
</h3>
<ul>
""")
while len(ssids):
ssid = ssids.pop(0)
client.sendall("""\
<tr>
<td colspan="2">
<input type="radio" name="ssid" value="{0}" />{0}
</td>
</tr>
<a onclick="document.getElementById('ssid').value = '{0}';" href="javascript:void(0)">
<li>
{0}
</li>
</a>
""".format(ssid))
client.sendall("""\
<tr>
<td>Password:</td>
<td><input name="password" type="password" /></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">
<input type="submit" value="Submit" />
</p>
</form>
<p>&nbsp;</p>
<hr />
<h5>
<span style="color: #ff0000;">
Your ssid and password information will be saved into the
"%(filename)s" file in your ESP module for future usage.
Be careful about security!
</span>
</h5>
<hr />
<h2 style="color: #2e6c80;">
Some useful infos:
</h2>
<ul>
<li>
Original code from <a href="https://github.com/cpopp/MicroPythonSamples"
target="_blank" rel="noopener">cpopp/MicroPythonSamples</a>.
</li>
<li>
This code available at <a href="https://github.com/tayfunulu/WiFiManager"
target="_blank" rel="noopener">tayfunulu/WiFiManager</a>.
</li>
</ul>
<li onclick="document.getElementById('ssid').focus()">
<span class="fixedWidth">SSID</span>
<input id="ssid" name="ssid" type="text"/>
</li>
<li onclick="document.getElementById('password').focus()">
<span class="fixedWidth">Password</span>
<input id="password" name="password" type="password"/>
</li>
<li onclick="document.getElementById('submit').click()">
<input id=submit type="submit" value="Submit" />
</li>
</ul>
<div class="placeholder"></div>
<h2>
Infos:
</h2>
<p>
Your ssid and password information will be saved into the "{}" file in your ESP module for future usage. Be careful about security!
</p>
<p>
Original code from <a href="https://github.com/cpopp/MicroPythonSamples" target="_blank" rel="noopener">cpopp/MicroPythonSamples</a>.
</p>
<p>
This code available at <a href="https://github.com/tayfunulu/WiFiManager" target="_blank" rel="noopener">tayfunulu/WiFiManager</a>.
</p>
</form>
</body>
</html>
""" % dict(filename=NETWORK_PROFILES))
""".format(NETWORK_PROFILES))
client.close()
@ -196,17 +295,14 @@ def handle_configure(client, request):
if do_connect(ssid, password):
response = """\
<html>
<center>
<br><br>
<h1 style="color: #5e9ca0; text-align: center;">
<span style="color: #ff0000;">
ESP successfully connected to WiFi network %(ssid)s.
</span>
{}
<body>
<h1>
ESP successfully connected to WiFi network "<span class="monospace">{}</span>"
</h1>
<br><br>
</center>
</body>
</html>
""" % dict(ssid=ssid)
""".format(html_head, ssid)
send_response(client, response)
try:
profiles = read_profiles()
@ -218,19 +314,15 @@ def handle_configure(client, request):
else:
response = """\
<html>
<center>
<h1 style="color: #5e9ca0; text-align: center;">
<span style="color: #ff0000;">
ESP could not connect to WiFi network %(ssid)s.
</span>
{}
<body>
<h1>
ESP could not connect to WiFi network "<span class="monospace">{}</span>"
</h1>
<br><br>
<form>
<input type="button" value="Go back!" onclick="history.back()"></input>
</form>
</center>
<button onclick="history.back()">Go back</button>
</body>
</html>
""" % dict(ssid=ssid)
""".format(html_head, ssid)
send_response(client, response)
return False
@ -265,7 +357,7 @@ def start(port=80):
client, addr = server_socket.accept()
print('client connected from', addr)
try:
client.settimeout(5.0)
client.settimeout(15.0)
request = b""
try:
while "\r\n\r\n" not in request: