## A web interface to read wind sensor data
I created a simple web interface to read my wind sensor data and display the wind direction. I converted my pico w to be a wifi access point and accessed the web server using the socket device interface in micropython.
This was relatively straightforward. However it created a static webpage which required refreshing the page each time to get the current angle of the wind direction sensor, which defeats the purpose of reading the sensor input "real-time".
To read the data realtime, I made use of AJAX (Asynchronous JavaScript and XML) that allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.
I modified the server code to handle AJAX requests to only update the wind angles instead of the entire HTML page.
### Appendix
The source code to display the wind reading and refresh the page:
```
import network
import time
import socket
from machine import ADC, Pin, I2C
def web_page():
html = """...(html code to display the page)..."""
ap = network.WLAN(network.AP_IF)
ap.config(essid="new_pico_wifi", password="picopassword")
ap.active(True)
while ap.active() == False:
pass
print('AP Mode Is Active, You can Now Connect')
print('IP Address To Connect to:: ' + ap.ifconfig()[0])
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM) #creating socket object
s.bind(('', 80))
s.listen(5)
wind = ADC(Pin(28))
def send_wind_angle():
digital_value = wind.read_u16()
voltage_value = 3.3 * (digital_value/65536)
degrees = (voltage_value/3.1) * 360
return str(int(degrees))
while True:
conn, addr = s.accept()
request = conn.recv(1024)
request = str(request)
print('Content = %s' % request)
if 'GET /wind' in request:
response = send_wind_angle()
content_type = 'text/plain'
else:
response = web_page()
content_type = 'text/html'
conn.send('HTTP/1.1 200 OK\n')
conn.send(f'Content-Type: {content_type}\n')
conn.send('Connection: close\n\n')
conn.sendall(response)
conn.close()
```
## Final Project
Also look at my [final project page](../final/final.html) where I did the same thing, but the interface is much nicer!