1. 피코 W의 LED를 브라우저로 제어하기
앞선 글에서, 라즈베리파이 피코 W에 연결된 전열 장치(LED)를 브라우저에서 켜고 끄는 기능을 구현하는 방법을 소개한 바 있었다.
https://blog.naver.com/mythee1/223201526072
또한 포트 포워딩을 이용하여, 원격지에서도 인터넷을 통해 접속함으로써, 피코 W에 연결된 장치들을 원격으로 제어하는 방법을 소개한 바 있었다.
https://blog.naver.com/mythee1/223201031398
그런데 기존에 브라우저를 통해 접속했던 화면들은 다음과 같이 단순히 text로만 표기되던 상태였다.
2. 피코 W를 브라우저로 접속 시 그래픽을 함께 표현하기
그래서 이를 조금 더 보기 좋고, 인식이 잘 되도록 다음과 같이 변경해 보기로 했다.
전열장치의 상태에 대한 그래픽이 함께 표시되면 아무래도 인식하기에 도움이 되는 점과, 보기에도 좋은 점을 고려해서이다.
즉, 피코 W에 연결된 전열 장치(LED)가 On 상태일 때는 다음과 같은 녹색의 “On” 표시가 되는 아이콘이 함께 나타나도록 하고,
피코 W에 연결된 전열 장치(LED)가 Off 상태일 때는 다음과 같이 적색의 “Off”아이콘이 나타나도록 기존의 코드를 약간 변형시켰다.
이용한 방법은 HTML에 다음과 같이 img src 태그를 적용하여 이미지를 송출했는데, 전열 기기(LED) 상태에 따라 서로 다른 그림을 보여주도록 HTML에서 참조하는 URL이 달라지도록 한 것이다. 참고로 다음 코드의 뒷부분은 보일 그림의 크기와 경계선에 대한 사항이다.
<img src=”image URL” style=”width:200px; height:200px; border:3px solid black”>
어떻게 이 주소를 변경해 줄 것인가를 고민하다가, 주소만 다른 동일한 HTML을 2개 만들어 선택적으로 출력하기로 했다. HTML에서는 img src 태그에 이미지의 주소를 변수로 두려면, HTML만으로는 어렵고, Java를 추가로 이용해야 한다는 것을 알고 있기도 했고, 필요한 HTML 자체도 간단한 데다, 추후 각 상황에 맞게 완전히 다른 화면을 보여주도록 변형하기 용이하게, 각 상황별로 별도의 HTML 코드를 만들기로 했다.
그래서, 전열 장치가 ON 일 때 적용할 HTMLON 이란 코드를, 전열 장치가 OFF일 때 적용할 HTMLOFF 이란 코드를 만들어 적용하였다.
변형된 코드는 다음과 같다. (SSID와 PASSWD는 각자 상황에 맞게 적용 필요)
코드 중 각 그림의 인터넷 주소에 해당되는 URL1 및 URL2는 인터넷상의 이미지에 대한 주소로, 이미지 호스팅 또는 인터넷상에 사용할 이미지를 마우스로 선택하고 마우스 오른쪽 버튼을 누르면 나오는 “이미지 주소”인데, 여기서는 URL1과 URL2로 변경하여 나타냈다.(각자 사용할 그림에 대한 URL로 대체 필요)
import network
import utime
import socket
from machine import Pin
led=Pin(15, Pin.OUT)
sensor_T = machine.ADC(4)
conversion_factor = 3.3 / (65535)
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.scan( ) #--> Scan
SSID = "SSID"
PASSWORD = "PASSWD"
wlan.connect(SSID, PASSWORD)
htmlon="""<!DOCTYPE html>
<html>
<head>
<title>Pico W 온도측정과 전원제어</title>
<meta charset="utf-8">
</head>
<body>
<center>
<br><br><br>
<img src="https://URL1.png" style="width:200px; height:200px; border:3px solid black">
<br><br><br>
<h1>Pico W - 온도측정 및 전원 Control</h1> <br><br>
<h2>전원장치의 원하는 동작을 선택해 주세요</h2>
<p>
<a href="swon"><button>ON</button></a><br><br><br>
<a href="swoff"><button>OFF</button></a> <br><br>
%s
</p>
</body>
</html>
"""
htmloff="""<!DOCTYPE html>
<html>
<head>
<title>Pico W 온도측정과 전원제어</title>
<meta charset="utf-8">
</head>
<body>
<center>
<br><br><br>
<img src="https://URL2.png" style="width:200px; height:200px; border:3px solid black">
<br><br><br>
<h1>Pico W - 온도측정 및 전원 Control</h1> <br><br>
<h2>전원장치의 원하는 동작을 선택해 주세요</h2>
<p>
<a href="swon"><button>ON</button></a><br><br><br>
<a href="swoff"><button>OFF</button></a><br><br>
%s
</p>
</body>
</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())
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)
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)
status = " "
inputvolt = sensor_T.read_u16() * conversion_factor
Celcius_T0 = round(27 - (inputvolt - 0.706)/0.001721, 2)
print("Input volt= ", inputvolt, "Calculated Temp ==", Celcius_T0)
tempfeed="측정된 현재 온도는 =="+str(Celcius_T0)
if led_on == 6:
led.value(1)
status = "LED is ON"
response = htmlon % status
cl.send('HTTP/1.0 200 OKrnContent-type: text/htmlrnrn')
cl.send(response)
cl.send(tempfeed)
cl.close()
if led_off ==6:
led.value(0)
status = "LED is OFF"
response = htmloff % status
cl.send('HTTP/1.0 200 OKrnContent-type: text/htmlrnrn')
cl.send(response)
cl.send(tempfeed)
cl.close()
except OSError as e:
cl.close()
print('connection closed')이 코드의 동작 모습은 다음과 같다.
