관리 메뉴

막내의 막무가내 프로그래밍 & 일상

[네트워크] Phillps Hue 제어하기 (TCP socket + HTTP server)(feat. docker 본문

네트워크/도커(Docker)

[네트워크] Phillps Hue 제어하기 (TCP socket + HTTP server)(feat. docker

막무가내막내 2019. 12. 18. 04:15
728x90

 

 

TCP socket을 이용한 Phillps Hue제어 HTTP Server 만들어보았다.

 

요약하면 다음과 같다.

 1. 서버로 Docker를 사용한다.

 2. 전구를 제어할 수 있는 post방식의 form을 담고 있는 Web UI 제작 (html) 한다. 

3. 클라이언트에서 GET 요청을 하면 내가 2에서 만든 Web UI 반환해준다.

 4. 웹페이지로 POST 요청을 보내고 서버에서는 해당 값을 받아 데이터를 파 싱 및 가공하여 브릿지 통신을 하여 Phillps Hue(전구)를 제어한다.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h3>Hue 1 Controller</h3>
<form action="1" method="POST">
<input type="radio" name="light" value="on"> On<br>
<input type="radio" name="light" value="off"> off<br>
<div>Brightness: 0 <input type="range" min="1" max="254" name="brightness" value="1">
254
</div>
X: 0 <input name="color_x" type="number" value="0" step="0.1" max="1" min="0"> 1
</p>
Y: 0 <input name="color_y" type="number" value="0" step ="0.1" max="1" min="0"> 1
</p>
<input type="submit" value="Submit">
</form>

<h3>Hue 2 Controller</h3>
<form action="2" method="POST">
<input type="radio" name="light" value="on"> On<br>
<input type="radio" name="light" value="off"> off<br>
<div>Brightness: 0 <input type="range" min="1" max="254" name="brightness"  value="1">
254
</div>
X: 0 <input  type="number" name="color_x" value="0" step="0.1" max="1" min="0"> 1
</p>
Y: 0 <input type="number" name="color_y" value="0" step ="0.1" max="1" min="0"> 1
</p>
<input type="submit" value="Submit">
</form>

<h3>Hue 3 Controller</h3>
<form action="3" method="POST">
<input type="radio" name="light" value="on"> On<br>
<input type="radio" name="light" value="off"> off<br>
<div>Brightness: 0 <input type="range" min="1" max="254"  name="brightness" value="1">
254
</div>
X: 0 <input type="number" name="color_x" value="0" step="0.1" max="1" min="0"> 1
</p>
Y: 0 <input type="number"  name="color_y" value="0"  step ="0.1" max="1" min="0"> 1
</p>
<input type="submit" value="Submit">
</form>
</head>
<body>

</body>
</html>

위는 전구를 제어하는 웹페이지인 hueController.html 파일이다. (실수로 head태그에 다 작성했다) form 태그는 post 방식으로 하였고 전원 on/off, 밝기 그리고 x, y 컬러값을 설정할 수 있다. 그리고 총 3개의 전구를 제어할 수 있다.

 

 

 

 

 

UI는 위와 같다.

 

from phue import Bridge

그다음 pip3 install phue 로 설치 후 위와 같이 import 해준다. 필립스 휴 와 브릿 지 통신을 하기 위해서이다.

 

 

 

 

 

서버소켓을 연 후 요청을 기다린다. 요청이 오면 HTTP 헤더를 파싱해서 GET 요청인지 POST 요청인지 분기해준다. GET 요청이라면 요청한 경로를 파싱해 해당 html을 클라이언트에게 응답해준다.

 

 

 

 

 

클라이언트에서 서빙된 웹페이지 post 방식의 form 태그를 통해 post 요청을 하면 서버에서 위와 같이 받는다. 전달된 데이터를 파싱하여 전구의 번호 (hue_num), 전원(power), 밝기(brightness), 컬러값(color_x, color_y) 에 저 장한다. 그리고 Bridge 통신을 하여 받은 값을 이용해 전구를 제어한다. lights 안에는 휴 전구 리스트가 들어있다.

 

 

 

 

 

만약 잘못된 경로로 요청하거나 예외가 발생하면 noIndex.html을 클라이언트 에게 보내주었다.

 

 

 

 

[실행 영상] 

https://www.youtube.com/watch?v=mUazpV_kJL8

 

 

 

 

 

728x90
Comments