HTML언어 그래픽을 지원하는 SVG(Scalable Vector Grahics) 및 자바스크립트에 의한 아날로그 시계를 출력해보기로 하자. 이 HTML+SVG+Java Script 예제는 아래에 인터넷 주소에서 얻어 올 수 있다.
https://gist.github.com/janx/1188550
이미 이 프로그램을 아두이노 NodeMCU 용으로 코딩하여 “아두이노 NodeMCU 웹서버가 그려주는 HTML+SVG 아날로그 시계 출력예제 I”라는 제목으로 아래의 블로그 주소에 게시하였다.
http://blog.daum.net/ejleep1/331
여기에서는 보다 더 흥미롭게 이 HTML 코드를 Notepad++에서 뜯어 고쳐 보기로 한다.
첫째로 초침을 분리하여 별도로 작은 시계를 그리기로 한다. 테두리는 녹색 초침은 빨간색으로 한다.
둘째로 검은 색의 시간을 나타내는 숫자 색상을 청색으로 변경한다.
셋째 분침은 deep sky blue 색으로 변경하기로 한다.
다음의 그림은 Notepad++에서 기존의 HTML 코드의 수정된 내용을 표현하고 있으니 참조하기 바란다. 작은 초시계를 그리기 위해서 스타일 태그 내부에 #smallface와 #smallticks를 추가하였고 #minutehand 와 #secondhand의 색상을 변경하였다.
이와 같은 HTML CSS 변경을 바탕으로 작은 초시계를 그리기 위한 <circle ⚫⚫⚫>태그와 <svg>태그 내부에 <g id=“smalltics”> 부분을 추가하였다.
마지막으로 이 HTML+SVG+Java Script 코드를 아두이노 NodeMCU 코드로 바꾸는 것은 이 전의 예제를 참조하기 바란다.
blog_clock.html
<!DOCTYPE HTML>
<html>
<head>
<title>Analog Clock</title>
<script>
function updateTime() { // Update the SVG clock
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = (now.getHours() % 12) + min/60;
var secangle = sec*6;
var minangle = min*6;
var hourangle = hour*30;
// Get SVG elements for the hands of the clock
var sechand = document.getElementById('secondhand');
var minhand = document.getElementById("minutehand");
var hourhand = document.getElementById("hourhand");
// Set an SVG attribute on them to move them around the clock face
sechand.setAttribute("transform", "rotate(" + secangle + ",50,32)");
minhand.setAttribute("transform", "rotate(" + minangle + ",50,50)");
hourhand.setAttribute("transform", "rotate(" + hourangle + ",50,50)");
setTimeout(updateTime, 1000);
}
</script>
<style>
/* These CSS styles all apply to the SVG elements defined below */
#clock {
/* styles for everything in the clock */
stroke: black;
/* black lines */
stroke-linecap: round;
/* with rounded ends */
fill: #eef;
/* on a light blue gray background */
}
#face { stroke-width: 3px;}
/* clock face outline */
#smallface { stroke:green; stroke-width: 1px;}
/* clock face outline */
#ticks { stroke-width: 2; }
/* lines that mark each hour */
#smallticks { stroke:green; stroke-width: 1; }
#hourhand {stroke-width: 5px;}
/* wide hour hand */
#minutehand {stroke: deepskyblue; stroke-width: 3px;} /* narrow minute hand */
#secondhand {stroke:red; stroke-width: 1px;}
#numbers {
/* how to draw the numbers */
font-family: sans-serif; font-size: 7pt; font-weight: bold;
text-anchor: middle; stroke: none; fill: blue;
}
</style>
</head>
<body onload="updateTime()">
<!-- viewBox is coordinate system, width and height are on-screen size -->
<svg id="clock" viewBox="0 0 100 100" width="500" height="500">
<circle id="face" cx="50" cy="50" r="45"/> <!-- the clock face -->
<circle id="smallface" cx="50" cy="32" r="10"/> <!-- the small clock face -->
<g id="ticks">
<!-- 12 hour tick marks -->
<line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
</g>
<g id="smallticks">
<!-- 12 hour tick marks -->
<line x1='50' y1='24' x2='50' y2='22'/>
<line x1='58' y1='32' x2='60' y2='32'/>
<line x1='50' y1='40' x2='50' y2='42'/>
<line x1='42' y1='32' x2='40' y2='32'/>
</g>
<g id="numbers">
<!-- Number the cardinal directions-->
<text x="50" y="18">12</text><text x="85" y="53">3</text>
<text x="50" y="88">6</text><text x="15" y="53">9</text>
</g>
<!-- Draw hands pointing straight up. We rotate them in the code. -->
<g id="hands"> <!-- Add shadows to the hands -->
<line id="hourhand" x1="50" y1="50" x2="50" y2="24"/>
<line id="minutehand" x1="50" y1="50" x2="50" y2="20"/>
<line id="secondhand" x1="50" y1="32" x2="50" y2="24"/>
</g>
</svg>
</body>
</html>
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 초보자를 위한 “아두이노 코딩에 의한 LED bar graph 예제” (0) | 2017.05.04 |
|---|---|
| 뉴디자인 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기 (0) | 2017.04.29 |
| 초보자를 위한 “아두이노 온습도 센서 DHT11 및 FND 7 세그먼트 디스플레이 시스템을 확장한 GP2Y1010AU 미세먼지측정 시스템 ” (0) | 2017.04.21 |
| 아두이노 무선 와이파이 코딩의 확장: 웹브라저 버튼 입력과 문자 입력 방식 혼용 (0) | 2017.04.19 |
| 아두이노 무선 와이파이 코딩의 확장: 웹브라저 버튼 입력에서 문자 입력 방식으로 (0) | 2017.04.17 |