아날로그 시계, 디지털 시계 및 계산기가 한데 어우러진 landscape 형을 디자인해 보자.
HTML CSS 의 .box에서 가로(520px) 세로(310px) 크기를 landscape 형으로 조절하자.
그에 맞춰 .display 와 .display input 의 크기도 충분히 길게 조절한다.
그 다음 계산기 버튼들을 배치해야 하는데 추가되는 크기들이 상이한 배치 요소들이 있어 이들을 다 적절한 위치에 수용할 수 있도록 <Table> 태그를 사용하도록 한다. landscape 디자인을 감안하여 계산기 버튼은 8개씩 3줄로 배선하기로 한다. 한편 아날로그 시계와 버튼 형 디지털 시계는 크기가 각각 다르나 하나의 row를 할당하여 3개의 column 요소로 나누어 배치한다. 각 요소의 크기가 다르더라도 균일한 간격으로 배치된다.
버튼형 디지털 시계 정보인 연월일과 시간 정보는 이미 코딩 경험이 있으므로 그대로 사용하기로 한다. 연월일이나 시간 정보는 계산기 버튼 2.5배 정도 크기로 정의하였다. 그래서 .button 대신에 별도로 .buttondigiclock을 정의하였다. 보시다 시피 계산기 버튼이나 연월일 버튼이나 CSS 관점에서 보면 크기와 바닥면 색 외에는 큰 차이가 없다. 그러므로 .button을 복사한 후 width의 값을 조절하면 되는 것이다.
이 두 버튼 정보는 계산기 버튼 입력에서처럼 <input> 테그를 사용하여 속성을 잘 조절하여야 한다.
landscape 디자인이라 형상은 세운 모양의 calculatordigitalclock_01과 크게 다르지만 코딩 내용은 <Table> 태그 적용 부분만 제외하고는 거의 동일하다.
다음의 url 주소에서 코드를 복사해 Notepad++에서 Launch in IE로 실행해 보자.
calc_analog_digital-clock_01.html
<!DOCTYPE HTML>
<html>
<body>
<center><h1>Arduino WiFi HTML Coding</h1>
</body>
<head>
<style>
body{
background-color:tan;}
.box{background-color:#3d4543;height:310px;width:520px; border-style:solid; border-color:lightblue;
border-radius:10px;position:relative;top:50px;left:5%;}
.display{background-color:#222;width:440px; position:relative;
left:2px;top:20px;height:35px;}
.display input{width:415px;position:relative;left:2px;top:2px;height:30px;
color:black;background-color:#bccd95;font-size:21px;text-align:right;}
.keys{position:relative;top:15px;}
.button{width:40px;height:30px;border-radius:8px; border-style:solid; border-color:green;
margin-left:12px;cursor:pointer;border-top:2px solid transparent;}
.button.gray{color:white;background-color:#6f6f6f;
border-bottom:black 2px solid;border-top:2px #6f6f6f solid;}
.button.pink{color:black;background-color:#ff4561;
border-bottom:black 2px solid;}
.button.black{color:white;background-color:#303030;
border-bottom:black 2px solid;border-top:2px #303030 solid;}
.button.orange{color:black;background-color:FF9933;
border-bottom:black 2px solid;border-top:2px FF9933 solid;}
.gray:active{border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;}
.pink:active{border-top:black 2px solid;
border-bottom:#ff4561 2px solid;}
.black:active{border-top:black 2px solid;
border-bottom:#303030 2px solid;}
.orange:active{border-top:black 2px solid;
border-bottom:FF9933 2px solid;}
.buttondigiclock{width:125px;height:40px;border:none;border-radius:8px;margin-left:15px;
cursor:pointer;border-top:2px solid transparent;}
.buttondigiclock.black{color:white;background-color:;
border-bottom:lightblue 2px solid;border-top:2px 303030 solid;}
p{line-height:10px;}
</style>
</head>
<body>
<div class="box">
<div class="display">
<input type="text" readonly size="18" id="d">
</div>
<div class="displayx">
<input type="text" readonly size="18" id="dx">
</div>
<div class="keys">
<table>
<tbody>
<tr>
<td><input type="button" class="button gray" value="Pi" onclick='v("3.14159")'></td>
<td><input type="button" class="button gray" value="(" onclick='v("(")'></td>
<td><input type="button" class="button gray" value=")" onclick='v(")")'></td>
<td><input type="button" class="button black" value="7" onclick='v("7")'></td>
<td><input type="button" class="button black" value="8" onclick='v("8")'></td>
<td><input type="button" class="button black" value="9" onclick='v("9")'></td>
<td><input type="button" class="button pink" value="/" onclick='v("/")'></td>
<td><input type="button" class="button pink" value="*" onclick='v("*")'></td>
</tr>
</tbody>
<tr>
<td><input type="button" class="button black" value="4" onclick='v("4")'></td>
<td><input type="button" class="button black" value="5" onclick='v("5")'></td>
<td><input type="button" class="button black" value="6" onclick='v("6")'></td>
<td><input type="button" class="button black"value="1" onclick='v("1")'></td>
<td><input type="button" class="button black" value="2" onclick='v("2")'></td>
<td><input type="button" class="button black" value="3" onclick='v("3")'></td>
<td><input type="button" class="button pink" value="-" onclick='v("-")'></td>
<td><input type="button" class="button pink" value="+" onclick='v("+")'></td>
</tr>
<tr>
<td><input type="button" class="button black" value="0" onclick='v("0")'></td>
<td><input type="button" class="button black" value="." onclick='v(".")'></td>
<td><input type="button" class="button black" value="sin" onclick='v("Math.sin")'></td>
<td><input type="button" class="button black" value="cos" onclick='v("Math.cos")'></td>
<td><input type="button" class="button black" value="tan" onclick='v("Math.tan")'></td>
<td><input type="button" class="button black" value="log" onclick='v("Math.log")'></td>
<td><input type="button" class="button black" value="C" onclick='c("")'></td>
<td><input type="button" class="button orange" value="=" onclick='e()'></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<body onload="updateTime()">
<!-- viewBox is coordinate system, width and height are on-screen size -->
<svg id="clock" viewBox="0 0 100 100" width="120" height="120">
<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>
</td>
<td>
<form name="theClock">
<input type=text class="button buttondigiclock black" name="theDate" style="font-size:20px;text-align: center;">
</td>
<td>
<input type=text class="button buttondigiclock black" name="theTime" style="font-size:20px;text-align: center;">
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type='text/javascript'>
function c(val){
document.getElementById("d").value=val;}
function v(val){
document.getElementById("d").value+=val;}
function e() {
try {
c(eval(document.getElementById("d").value)) }
catch(e) {
c('Error') } }
</script>
</body>
<head>
<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;
var actualMonth = now.getMonth() + 1;
//Prepare time output!
document.theClock.theTime.value = ""
+ now.getHours() + ":"
+ now.getMinutes() + ":"
+ now.getSeconds();
document.theClock.theDate.value = ""
+ now.getFullYear() + ":"
+ actualMonth + ":"
+ now.getDate();
// 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>
</html>
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 ESP8266 NodeMCU IOT(사물인터넷 ) 온습도 모니터링 스테이션 (0) | 2012.01.03 |
|---|---|
| 아두이노 와이어링 & 와이파이 코딩 목차 파일 (0) | 2012.01.03 |
| 웹서버 속의 클라이언트 (0) | 2012.01.01 |
| 온습도계를 가진 아날로그시계 (0) | 2011.12.30 |
| 계산기+디지털시계+아날로그시계 HTML/JavaScript 코드 (0) | 2011.12.29 |