Implementing digital clock with Raspberry Pi 3 + Vue.js + Flask

1. DIGITAL CLOCK
with Raspberry Pi
+ javascript framework(Vue.js)
B211176 이재열

2. Table Of Contents
•- Motivation
•- Implementation
•- Plan
•- Demo
•- Retrospection

3. Motivation
•솔직히 뭐 만들지 계속 고민하고 있었음
(기획력이 모자란 관계로 proposal 제출 이틀 전까지 계속
고민했음)
USB 키보드 입력을 블루투스 신호로 내보내는 릴레이…?
에어컨 리모트 컨트롤러 액츄에이터…?
PyQT를 이용한 디지털 시계…?

4. Motivation
•당장 떠오르는 세 개의 소재를 가지고 열심히 구글링을 해보
았으나, 하드웨어와 친하지 않은 내 능력으로 구현할 수 있을
만한게 잘 안보임
(그나마 유력한게 PyQT를 이용한 구현 뿐…)
•

5. Motivation
•Flask 수업을 통해 HTML로도 UI 를 구성할 수 있는 선택
지가 있다는 것을 알게됨.

6. Motivation
•실제로도 크로미엄 기반 엔진(Electron)으로 작성된
데스크탑 UI 어플리케이션이 많음.
•HTML만 알고있다면 간단하게 UI 어플리케이션을 짤 수 있
다보니 대중적으로 많이 애용되는 추세임

7. Motivation
•HTML도 되는데,
과연 Virtual DOM 으로 UI를 구성하면 어떻게 될까?

8. Implementation

9. Implementation

10. Implementation
•하드웨어 구성
- TFT-LCD 디스플레이
- DHT-11 : 온도/습도 측정 센서
•라즈베리파이에 설치된 주 소프트웨어/라이브러리
- Flask, Compiled(bundled) JS,
Chromium(with vue-devtools)
•개발환경
- Flask, Compiled(bundled) JS, Webpack,
Chrome(with vue-devtools)
•소스코드는 bitbucket 에서 관리

11. DOM, Virtual DOM
•Document Object Model
그냥 HTML 같이 구조화된 문서를 표현하는 방법
•HTML은 정적인 문서이기 때문에, 조작하기가 어려움.
•Virtual DOM은 자바스크립트를 이용해서
추상화된 DOM 오브젝트를 렌더링하는 방법.

12. Virtual DOM으로
시도하고자 했던 것
•Flask 에서 HTML 템플릿을 렌더링하는 작업을 최소화
(CPU는 HTML에 신경쓸 시간에 다른 일을 해야 합니다)
•200ms 간격으로 Ajax HTTP JSON request/
response
-> JSON 오브젝트를 이용하여 동적으로 렌더링

13. Why Virtual DOM?
•1. Proof of Concept (지극히 개인적인 이유)
•Virtual DOM 으로도 라즈베리파이에서 UI 를 구성할 수 있
다는 것을 보이고 싶었음
•2. 서버에서 HTML을 한땀한땀깎아서 제공해주는 것보다는
최소한의 정보(JSON)만 제공하는 방식이 트래픽 적게 잡아
먹음

14. Vue framework
Model, View, Controller
패턴을 이용해서
Virtual DOM을 조작하는
자바스크립트 라이브러리
View
Model
Controller
Vue-devtools 라는 크롬 확장
도구로 그나마 수월해짐

15. Webpack
•자바스크립트 전처리 언어로 작성된 파일, 스타일시트 전처
리 언어로 작성된 파일 등 여러가지 파일들의 의존성관계를
쭉 살펴보고 하나의 소스코드로 컴파일해주는 도구
•자바스크립트, 스타일시트를 불러올때 사용하는 <script>,
<style> 태그의 갯수를 최소화 하기 위해 사용함

16. •
<script src=“/static/js/blahblah1.js” ></script>
<script src=“/static/js/jquery.min.js” ></script>
<script src=“/static/js/react.min.js” ></script>
<script src=“/static/js/blahblah4.js” ></script>
<link rel=“stylesheet” href=“/static/css/base.css/>
…
•<script src=“/static/js/app.js” > </script>

17. 이전의 슬라이드 재탕

18. PLAN
- 1주차 : Smart Clock 구현에 필요한 부품 주문
- 2주차 : Smart Clock 구현을 위해 보조적인 역할을 하
게 될 서버 세팅 완료
- 3주차 : 서버에서 처리할 데이터를 처리하기 위한 코드 작
성(Python 기반 웹프레임워크 Flask 사용 예정)
- 4주차 : Remote Server에서 제공할 Dashboard UI
코드 작성
- 5주차 : 부품 조립 후 Smart Clock UI 코드 작성
- 6주차 : 최종 점검 및 기능 추가

19. 놀-랍게도
구현을 당일치기로 했습니다(…)

20. PLAN
- 1주차 : Smart Clock 구현에 필요한 부품 주문
(Proposal 작성하자마자 바로 주문함)
- 2주차 : Smart Clock 구현을 위해 보조적인 역할을 하게 될 서버 세
팅 완료
(원래부터 쓸 일이 있어서 Linode 일본 리전 VPS에 Nginx 세팅했었음)
- 3주차 : 서버에서 처리할 데이터를 처리하기 위한 코드 작성(Python
기반 웹프레임워크 Flask 사용 예정)
- 4주차 : Remote Server에서 제공할 Dashboard UI 코드 작성
(통계 차트를 그려주는 vue-chart.js 라이브러리는 알아봤지만 시간이
없어서 못함)
- 5주차 : 부품 조립 후 Smart Clock UI 코드 작성
(부품 조립이 정말 손이 많이 가는 작업이었음…)
- 6주차 : 최종 점검 및 기능 추가 (여유조차 없었음)

21. DEMO
•https://www.youtube.com/watch?
v=2XedyG4LHP4

22. Retrospection
•웹개발만 쭉 해오다가 임베디드 영역을 건드려보는건 신선
한 경험이었음.
•렌더링 하는 정보에 비해 자바스크립트가 많이 무거움(…)
•어느 디스플레이 써야하느냐도 생각외로 중요한 요인이었음
(하드웨어는 역시 내가 건드릴 부분이 아니다)
•아직까지 Virtual DOM 으로 UI 구성하기에는 너무 이른 것
같다.

23. Retrospection
•교훈
•: 하드웨어가 열악하면 그에 최적한 방법을 쓰자

24. 혹시 관심있을 분들을 위해
•bitbucket 리포지토리
•https://bitbucket.org/malkoring/smart_clock/
•슬라이드 주소
•https://speakerdeck.com/kodingwarrior/
embedded-project-presentation-slide

25. 감사합니다