스마트 폰에서 NodeMCU 웹서버와 연동되어 아날로그로 움직이는 시계를 HTML SVG 언어로 작성하여 보자. 지난번에 블로그에 게재했었던 시계 프로그램은 worldtimeserver 사이트에서 직접 움직이는 시계 전체를 끌어다 쓰는 방식이라면 이번 프로그램은 직접 아두이노 NodeMCU가 웹서버로서 시계 판 바늘 테 숫자에 관한 모든 데이터와 바늘 회전 명령까지를 일체 포함하여 스마트폰 웹브라우저에 제공하는 방식이다. 이 프로그램이 성공적으로 잘 동아간다면 프로그래머 개개인이 자기 취향대로 프로그램 수정이 가능할 것이다.
지난번 예제와는 달리 굳이 돌핀(Dolphin) 웹브라우저와 Adobe Flash 프로그램 설치와 같은 번거로운 작업은 필요치 않다.
이번에 제공하는 프로그램의 소스는 다음의 인터넷 주소에서 구할 수 있다.
https://gist.github.com/janx/1188550
제목은 janx/analog_clock.html이며 사이트 오른쪽 상단에 Download ZIP 버튼이 있다.
아니면 블로그 하단에 첨부된 아두이노용으로 가공된 HTML 프로그램을 복사해 써도 무방하다.
아날로그 시계 프로그램을 작성하는 HTML 언어로서 크게 두가지가 있다. 하나는 이 블로그의 시계 예제 작성된 HTML SVG 언어이며 또 다른 하나는 HTML CANVAS 언어이다. 본 블로그에서는 전자의 HTML SVG 언어를 사용하기로 한다. SVG는 Scalable Vector Graphics의 약어로서 CANVAS 와는 특성 면에서 대조적이다.
NodeMCU 프로그램 수정과 관련하여 헤더 부에 자신의 스마트폰 핫스팟 ID와 비밀번호를 입력하는 부분이 있으며 setup()과 loop() 초반에 이르기까지 WiFi를 연결하고 할당된 ip를 시리얼 모니터에서 확인하는 과정은 브로그 예제들에서 여러번 언급했으므로 생략하도록 한다.
본 블로그 예제 문제를 다뤄봤다면 HTML 프로그램이 어디에 위치해야 하는지는 쉽게 알 수 있을 것이다. HTML 프로그램의 시작부분은 <!DOCTYPE HTML>에서 시작하여 </html> 로 끝맺는다. 아래에 첨부된 프로그램은 이미 “ 와 ”를 ‘ 와 ’ 로 교체가 되어 있는 상태이므로 HTML 프로그램이 들어가야 할 부분을 정확히 체크한 다음 삽입토록 한다.
Webserver_nodemcu_html_svg_analog_clock_01
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<title>Analog Clock</title>");
client.println("<script>");
client.println("function updateTime() { // Update the SVG clock");
client.println("var now = new Date();");
client.println("var sec = now.getSeconds();");
client.println("var min = now.getMinutes();");
client.println("var hour = (now.getHours() % 12) + min/60;");
client.println("var secangle = sec*6;");
client.println("var minangle = min*6;");
client.println("var hourangle = hour*30;");
// Get SVG elements for the hands of the clock
client.println("var sechand = document.getElementById('secondhand');");
client.println("var minhand = document.getElementById('minutehand');");
client.println("var hourhand = document.getElementById('hourhand');");
// Set an SVG attribute on them to move them around the clock face
client.println("sechand.setAttribute('transform', 'rotate(' + secangle + ',50,50)');");
client.println("minhand.setAttribute('transform', 'rotate(' + minangle + ',50,50)');");
client.println("hourhand.setAttribute('transform', 'rotate(' + hourangle + ',50,50)');");
client.println("setTimeout(updateTime, 1000);");
client.println("}");
client.println("</script>");
client.println("<style>");
/* These CSS styles all apply to the SVG elements defined below */
client.println("#clock {");
/* styles for everything in the clock */
client.println("stroke: black;");
/* black lines */
client.println("stroke-linecap: round;");
/* with rounded ends */
client.println("fill: #eef;");
/* on a light blue gray background */
client.println("}");
client.println("#face { stroke-width: 3px;}");
/* clock face outline */
client.println("#ticks { stroke-width: 2; }");
/* lines that mark each hour */
client.println("#hourhand {stroke-width: 5px;}");
/* wide hour hand */
client.println("#minutehand {stroke-width: 3px;} /* narrow minute hand */");
client.println("#secondhand {stroke-width: 1px;}");
client.println("#numbers {");
/* how to draw the numbers */
client.println("font-family: sans-serif; font-size: 7pt; font-weight: bold;");
client.println("text-anchor: middle; stroke: none; fill: black;");
client.println("}");
client.println("</style>");
client.println("</head>");
client.println("<body onload='updateTime()'>");
client.println("<!-- viewBox is coordinate system, width and height are on-screen size -->");
client.println("<svg id='clock' viewBox='0 0 100 100' width='500' height='500'>");
client.println("<circle id='face' cx='50' cy='50' r='45'/> <!-- the clock face -->");
client.println("<g id='ticks'>");
client.println("<!-- 12 hour tick marks -->");
client.println("<line x1='50' y1='5.000' x2='50.00' y2='10.00'/>");
client.println("<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>");
client.println("<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>");
client.println("<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>");
client.println("<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>");
client.println("<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>");
client.println("<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>");
client.println("<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>");
client.println("<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>");
client.println("<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>");
client.println("<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>");
client.println("<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>");
client.println("</g>");
client.println("<g id='numbers'>");
client.println("<!-- Number the cardinal directions-->");
client.println("<text x='50' y='18'>12</text><text x='85' y='53'>3</text>");
client.println("<text x='50' y='88'>6</text><text x='15' y='53'>9</text>");
client.println("</g>");
client.println("<!-- Draw hands pointing straight up. We rotate them in the code. -->");
client.println("<g id='hands'> <!-- Add shadows to the hands -->");
client.println("<line id='hourhand' x1='50' y1='50' x2='50' y2='24'/>");
client.println("<line id='minutehand' x1='50' y1='50' x2='50' y2='20'/>");
client.println("<line id='secondhand' x1='50' y1='50' x2='50' y2='16'/>");
client.println("</g>");
client.println("</svg>");
client.println("</body>");
client.println("</html>");
_______________________________________________________________________
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| Blink LED 코드를 이용한 Arduino NodeMCU Scope용 디지털 듀티 신호 생성 (0) | 2017.02.15 |
|---|---|
| HTML SVG 그래픽 언어 사용 NodeMCU WiFi Webserver 코딩에 의한 가변저항 전압 스마트폰 실시간 모니터링 프로그램 (0) | 2017.02.12 |
| 대기압 측정센서 BMP180에 의한 NodeMCU보드의 I2C 센서 인터페이스 D1(GPIO5), D2(GPIO4) 검증 (0) | 2017.02.11 |
| TinyGPS 라이브리를 사용한 GPS 위도 경도 데이터 모니터링 (0) | 2017.02.10 |
| 조립식 아두콥터에 GPS와 함께 장착된 지자기센서 성능 모니터링 (0) | 2017.02.10 |