1. PICO를 Wifi에 연결하고, LED를 점멸시키는 선행지식
이전 글들을 통해 라즈베리파이 피코 보드에서 Wifi 네트워크에 접속하는 방법을 소개했었다.
그리고 이렇게 Wifi 네트워크에 연결된 피코 보드 상의 LED를 네트워크 상의 다른 장치의 브라우저에서 URL을 이용하여 켜고, 끄는 방법을 다음 글에서 소개한 바 있었다.
se-l-image” id=”SE-2e430b24-f99e-497f-9bad-ae9436a8a4f7″>
2e430b24-f99e-497f-9bad-ae9436a8a4f7″, “data” : {“link” : “https://kongyine.com/223199530424”, : “false”, “thumbnail” : “https://dthumb-phinf.pstatic.net/?src=%22https%3A%2F%2Fblogthumb.pstatic.net%2FMjAyMzA5MDFfMTA0%2FMDAxNjkzNTM4NzQzNTE4.2T1KQ3XjTmGMeamH4V0mJJAic1JTRNezoXlhUISCa8gg.e6VvJ-V9VdMnA2B3BsC37H3JLyoSNDkqtFiMgPn-4U0g.PNG.mythee1%2Fimage.png%3Ftype%3Dw2%22&type=ff120
그러나 이 방법의 아쉬웠던 점은 브라우저 주소에 반복해서 LED 동작을 위한 메시지를 swon 또는 swoff 등의 형태로 입력해 주어야 해서 반복해서 사용이 불편하다는 점이었다. 이 점을 개선해 보기로 했다.
2. 브라우저에 선택 버튼을 반영시키는 개선
가장 쉬운 방법으로 아주 간단한 html 페이지를 만들고, 간단한 버튼을 만들어 이 버튼을 클릭할 때, swon 또는 swoff가 URL 형태로 전달되도록 해보았다.
최종적으로 원하는 모습은 다음과 같이 화면 중앙 부분에 2개의 버튼이 행을 달리하면서 배열되는 것이었고, 한글도 안내표시의 일부로 정상적으로 표시되도록 하는 것이었다.
우선, 마이크로 파이썬 내에 html 코드를 넣기 위해 기본적인 Code를 넣어주었다.
html=”””<!DOCTYPE html>
<html>
<head>
<title>
</head>
<body>
</body>
</html>
“””
그리고, 열리는 브라우저 페이지 타이틀을 다음과 같이 header 부분에 지정했다.
<head>
<title>Pico W LED Test on Browser</title>
</head>
다음은 본문 부분인 body 항목에 표시될 안내용 문장을 기입했다. 표시될 글자들의 크기도 h1, h2 등으로 지정했다.
<body>
<h1>Pico W – Control LED connected to PICO</h1>
<h1>Control the LED</h1>
<h1>Select the Button for LED Control</h1>
<h2>다음 버튼 중 원하는 LED 동작 버튼을 선택해 주세요</h2>
</body>
다음은 선택 버튼 생성을 위해 html 코드의 <body>와 ,</body> 사이에 다음과 같은 code를 넣어주었다.
이 코드들이 브라우저 화면에서 버튼을 만들어주고, 버튼을 누르면, 각각에 들어있는 메시지를 url의 일부로 전달하는 동작을 하게 된다. 행을 띄우기 위해 <p>와 </p> 조합을 사용했다.
<p>
<a href=”swon”><button>ON</button></a>
</p>
<p>
<a href=”swoff”><button>OFF</button></a>
</p>
그 결과, 다음과 같은 화면이 되었다.
한글이 화면 표시에서 깨어지는 문제를 해결하기 위해, 다시 header 부분에 다음과 같이 문자 세트를 지정해 주었다.
<head>
<title>Pico W LED Test on Browser</title>
<meta charset=”utf-8″>
</head>
다음과 같이 한글도 정상적으로 표시되는 것을 확인할 수 있었다.
3. 동작 예제
이제 이 코드가 정상적으로 동작하는지를 시험해 보았다.
다음과 같이 잘 동작하는 것을 확인할 수 있었다. 각 버튼을 선택할 때마다 미리 지정해 둔 swon과 swoff가 메시지의 일부로 피코로 전달되고, LED가 의도한 대로 켜지거나 꺼지는 것을 확인할 수 있었다.
마지막으로, 브라우저에 표시되는 글자들을 중앙 부분으로 잘 정리할 필요가 있었다.
이것은 위에 작성한 html의 <body> 시작문 바로 다음에 다음과 같이 <center>명령을 넣어줌으로써 해결할 수 있었다.
<body>
<center>
</body>
이렇게, 기존에 URL 주소에 원하는 동작을 매번 기입하는 대신, 화면에 표시된 버튼을 선택하는 방법으로, 네트워크에 연결된 피코 W의 LED가 동작하도록 변경할 수 있었다.
html 코드의 완성된 다음과 같다. 나의 경우에는 두 개의 버튼 사이에 행을 띄우기 위해 <p>와 </p>를 사용했으나, 이들 대신 <br> 명령을 대체해서 사용하는 것도 가능하다.
html="""<!DOCTYPE html> <html> <head> <title>Pico W LED Test on Browser</title> <meta charset="utf-8"> </head> <body> <center> <h1>Pico W - Control LED connected to PICO</h1> <h1>Control the LED</h1> <h1>Select the Button for LED Control</h1> <h2>다음 버튼중 원하는 LED 동작 버튼을 선택해 주세요</h2> <p> <a href="swon"><button>ON</button></a> </p> <p> </p> <p> <a href="swoff"><button>OFF</button></a> </p> </body> </html> """
최종적인 코드 전체는 다음과 같다.
import network
import utime
import socket
from machine import Pin
led=Pin(15, Pin.OUT)
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.scan( ) #--> Scan
SSID = "myssid"
PASSWORD = "mypw"
wlan.connect(SSID, PASSWORD)
html="""<!DOCTYPE html>
<html>
<head>
<title>Pico W LED Test on Browser</title>
<meta charset="utf-8">
</head>
<body>
<center>
<h1>Pico W - Control LED connected to PICO</h1>
<h1>Control the LED</h1>
<h1>Select the Button for LED Control</h1>
<h2>다음 버튼중 원하는 LED 동작 버튼을 선택해 주세요</h2>
<p>
<a href="swon"><button>ON</button></a>
</p>
<p>
</p>
<p>
<a href="swoff"><button>OFF</button></a>
</p>
</body>
</html>
"""
# Function to load in html page
#def get_html(html_name):
# with open(html_name, 'r') as file:
# html = file.read()
# return html
while not wlan.isconnected() and wlan.status() >= 0:
print("Waiting to connect:")
utime.sleep(1)
if wlan.status() != 3:
raise RuntimeError('network connection failed')
else:
print("Wifi is connected == ", wlan.isconnected())
print( "Status =", wlan.status())
print( "ip =", wlan.ifconfig())
# Open Socket
addr = socket.getaddrinfo('0.0.0.0', 80) [0] [-1]
s = socket.socket()
s.bind(addr)
s.listen(1)
print("listening", addr)
print(s)
utime.sleep(2)
# Listen for connections
while True:
try:
cl, addr = s.accept()
print('client connected from', addr)
request = str(cl.recv(1024))
print("Request", request)
led_on = request.find('/swon')
led_off = request.find('/swoff')
print("led_on, led_off ==", led_on, led_off)
if led_on >-1:
led.value(1)
stateis = "LED is ON"
if led_off >-1:
led.value(0)
stateis = "LED is OFF"
response = html
cl.send('HTTP/1.0 200 OKrnContent-type: text/htmlrnrn')
cl.send(response)
cl.close()
except OSError as e:
cl.close()
print('connection closed')