Verdere aanpassingen

de website werkt en werkt goed. Alleen vinden we het een beetje saai lelijk en kaal. Daar gaan we nu verandering in brengen. Samen hebben we op het internet gezocht hoe we het HTML gedeelde van ons script kunnen verbeteren. We zijn deze code tegengekomen. Hiermee kun je ook een led lampje aan en uit zetten met een webserver. Alleen is de opmaak anders, er zijn namelijk 2 knoppen, en er is een status van de GPIO pin, oftewel het lampje. Eerst hebben we de knoppen werkende gemaakt voordat we verder gingen met de opmaak ervan:

import socket
from machine import Pin

led_pin = Pin(10, Pin.OUT)

def web_page():
return """<html>
<head>
<title>ESP32 webserver met led</title>
<meta content="width=device-width, initial-scale=1">
</head>
<body>
<h1>ESP32 webserver met led</h1>
<p><a href="/?led=aan"><button>AAN</button></a></p>
<p><a href="/?led=uit"><button>UIT</button></a></p>
</body>
</html>"""

server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_socket.bind(("", 8080))
server_socket.listen(5)

while True:
connection, address = server_socket.accept()
print("Got a connection from %s" % str(address))
request = str(connection.recv(1024))
print("connect = %s" % request)

if "/?led=aan" in request:
print("LED AAN")
led.value(1)

if "/?led=uit" in request:
print("LED UIT")
led.value(0)

response = web_page()
connection.send("HTTP/1.1 200 OK\n")
connection.send("Content-Type: text/html\n")
connection.send("Connection: close\n\n")
connection.sendall(response)
connection.close()

gitfront.io/r/Rowan/B8JqMUXrSuAq/ESP32/blob/Webserver%20lampje%202.0.py

Zoals je ziet hebben we een aantal dingen veranderd. In de plaats van 1 knop hebben we er nu 2. en hebben we de .format regel verwijderd. aangezien het niet meer nodig is omdat we 2 knoppen hebben met aan en uit in de plaats van 1. Ook hebben we in het python gedeelte veranderd hoe de request "?/led=uit" en "?/led=aan" gedetecteerd wordt.

Nu de technische dingen klaar zijn kunnnen we verder met het cosmetische gedeelte. We wouden de volgende dingen toevoegen:

- mooi lettertype
- gekleurde achtergrond
- apart lettertype voor titel en overige tekst
- andere opmaak voor knoppen
- gekleurde knoppen
- favicon
- led status

Na enig gepuzzel en Internetten hebben we het volgende in elkaar geknutseld:

import socket

def web_page():
return """<html>
<head>
<title>ESP32 Led webserver</title>
<meta content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Takri&display=swap" rel="stylesheet">

<body style="background-color:LightGray;">
<h1> De enige echte ESP32 web server</h1>
<p>
<a href="/?led=aan"><button class="button">AAN</button>
</a>
</p>
<p>
<a href="/?led=uit"><button class="button button2">UIT</button>
</a>
</p>
</body>
</html>"""

server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_socket.bind(("", 8080))
server_socket.listen(5)

while True:
connection, address = server_socket.accept()
print("Got a connection from %s" % str(address))
request = str(connection.recv(1024))
print("connect = %s" % request)

if "/?led=aan" in request:
print("LED AAN")
led.value(1)

if "/?led=uit" in request:
print("LED UIT")
led.value(0)

response = web_page()
connection.send("HTTP/1.1 200 OK\n")
connection.send("Content-Type: text/html\n")
connection.send("Connection: close\n\n")
connection.sendall(response)
connection.close()

gitfront.io/r/Rowan/B8JqMUXrSuAq/ESP32/blob/Webserver%20lampje%202.1.py

In het html gedeelte is er nu erg veel veranderd. We hebben namelijk een <style> toegevoegd. Waarbij je veel dingen kunt veranderen voor tekst gedeelten. zoals de lettergrootte, type, kleur en nog veel meer.

Voor het lettertype van te titel hebben we Noto Sans Takri gebruikt. omdat we niet een standaard fonts wouden gebruiken, zoals Arial. we hebben google fonts gebruikt om de font te importeren:
<link rel="preconnect" href="https://fonts.googleapis.com">=
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Takri&display=swap" rel="stylesheet">

het tweede was de achtergrond kleur die we wouden aanpassen. Dat doe je doormiddel van de <body> te veranderen naar <body style="background-color:[kleur];"> waarbij je [kleur] veranderd naar de kleur die je wilt. In ons geval is dat LightGray. Wat je ook kunt doen is een Hex kleurcode invoegen.

Wat de ook hebben veranderd is de opmaak van de knoppen. We hebben deze Github pagina die we al eerder hebben genoemd gebruikt als inspiratie voor de knoppen. in het style gedeelte hebben we .button en .button2 toegevoegd. in .button staan de volgende dingen. de knop kleur en grootte. de tekst kleur en grootte, hoe afgerond de hoeken zijn van de knop en welke cursur typeje ziet als je over de knop beweegd. veel van de dingen hebben we hetzelfde gehouden als de github pagina, we hebben alleen de kleur van de knop en de afronding ervan veranderd.

Dit is de uiteindelijke weergave van de webserver die we hebben gemaakt. Zoals je kunt zien ziet het er erg anders uit dan eerder

wat ons niet gelukt is, is een favicon toevoegen aan onze website. een favicon is de kleine afbeelding die je ziet voor de titel van de website in de zoekbalk of in de balk waar alle openstaande tabbladen staan. de reden waarom het ons niet is gelukt is omdat we niet wisten hoe we de afbeelding moesten toevoegen aan de directory van onze webserver, mede doordat we nog weinig tijd overhadden om het af te maken.

Een Led status of Gpio state toevoegen is ons soort van gelukt. wat we hebben gedaan is de manier die is gebruikt in de github pagina over te nemen. Wat werkt, alleen het rare is dat je twee keer moet drukken op de aan knop of uit knop om de led aan of uit de doen. Wij denken dat het te maken heeft met het volgende stukje code:
if led.value() == 1:
gpio_state="ON"
else:
gpio_state="OFF"
We hebben geprobeerd om het opgelossen, alleen is het ons niet gelukt.

Verdere aanpassingen

Advanced settings