Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve webinterface #16

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Improve webinterface #16

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0370235
Improve webinterface
TilCreator May 29, 2018
94638b0
Merge branch 'master' into improveWebui
TilCreator May 29, 2018
b4ab02d
Change positional placeholders back to named placeholders
May 30, 2018
cdfb0e8
Improve headline `h[1-6]` usage
TilCreator May 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 162 additions & 71 deletions wifimgr.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,109 @@

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;
}

h2 {
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)

Expand Down Expand Up @@ -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>
<h2>
SSIDs (click to select)
</h2>
<ul>
""")
while len(ssids):
ssid = ssids.pop(0)
client.sendall("""\
<tr>
<td colspan="2">
<input type="radio" name="ssid" value="{0}" />{0}
</td>
</tr>
""".format(ssid))
<a onclick="document.getElementById('ssid').value = '{ssid}';" href="javascript:void(0)">
<li>
{ssid}
</li>
</a>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this valid html?: a li text /li /a

or should it be rather?: li a text /a /li

Copy link
Contributor Author

@TilCreator TilCreator May 31, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a is not display: block ( or similar ), so I see no problem.

""".format(ssid=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 "{filename}" 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(filename=NETWORK_PROFILES))
client.close()


Expand All @@ -199,17 +298,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>
{html_head}
<body>
<h1>
ESP successfully connected to WiFi network "<span class="monospace">{ssid}</span>"
</h1>
<br><br>
</center>
</body>
</html>
""" % dict(ssid=ssid)
""".format(html_head=html_head, ssid=ssid)
send_response(client, response)
try:
profiles = read_profiles()
Expand All @@ -224,19 +320,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>
{html_head}
<body>
<h1>
ESP could not connect to WiFi network "<span class="monospace">{ssid}</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=html_head, ssid=ssid)
send_response(client, response)
return False

Expand Down Expand Up @@ -280,8 +372,7 @@ def start(port=80):
client, addr = server_socket.accept()
print('client connected from', addr)
try:
client.settimeout(5.0)

client.settimeout(15.0)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you add a comment here why such a long timeout is needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It fixed the timeout that some times occured on the not connected page.

request = b""
try:
while "\r\n\r\n" not in request:
Expand Down