뉴디자인 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기

아두이노프로세싱 프로그래밍

뉴디자인 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기

coding art 2017. 4. 29. 16:09

728x90

디지털 시계와 아날로그 시계를 포함한 좌우로 넓게 버튼이 배치된 계산기를 새로이 디자인해보자.

물론 각각의 요소를 코딩하는데 시간이 다소 소모되었지만 각각의 요소가 이미 완성되어 있었으므로 전체 구성 원리만 파악하면 대단히 간단하게 작성되었다는 점을 쉽게 알 수 있을 듯하다.

아두이노 초보자 입장에서는 일독 후 코드를 복사하여 Notepad++에서 실행하여 결과를 보고 아래에 설명된 내용이나 파라메터들을 변경해보면 금방 그 내용을 이해할 수 있을 것이다.

우선 먼저 .box{⚫⚫⚫}에서 폭 width와 높이 height 값을 조절한다.

그에 맞춰 .display{⚫⚫⚫}와 .display input{⚫⚫⚫}의 길이도 늘려 보자. 디스플레이의 길이가 충분히 늘어나면 계산기가 다룰 수 있는 숫자도 적어도 20자리 정도로 자동으로 늘어난다.

아울러 Pi 키도 3.14에서 업그레이드하여 3.14159로 정밀함을 부여한다.

.keys{⚫⚫⚫}에서 버튼 키 보드의 거리를 조절한다.

버튼 도입을 위해 <input> 태그가 시작 되는 부근에서 8개의 버튼들을 대상으로 <table>태그를 적용하자. 버튼 설정은 각자 <input> 태그 문장 순서를 바꾸어 주면 된다. <table>태그는 <tr>태그 즉 테이블 로우 와 <td> 태그 즉 테이블 셀 사용을 수반한다.

여기까지 버튼들의 테이블화 작업을 마친다.

아날로그 시계는 버튼들과 크기가 완전히 다르므로 별도의 테이블을 시작한다. 그 위치는 버튼 키 끝나는 지점부터이다. 이 테이블은 아날로그 시계 하나와 두 개의 긴 버튼 즉 연월일 및 시간 정보를 보여 주는 버튼형 디스플레이를 하나의 테이블 로우 즉 <tr> 로 삼고 각각 세 개의 <td> 요소로 설정한다. 그렇게 되면 두 개의 </div>가 연속적으로 나타나는 지점 바로 앞에서 </table>로 끝맺는다.

HTML 언어 설정 후 저장과 함께 실행한다. 위는 쿠글 크롬의 실행 결과 이미지이다.

이 코드는 HTML CSS 명령 변경에 따른 효과와 HTML 구성 요소들의 배치 변경에 따른 계산기의 시각적 디자인 학습에 큰 도움을 줄 수 있다.

calculatorclockdigitaltable_02.html

<!DOCTYPE HTML>

<html>

<body>

<center><h1>Arduino HTML Magic Coding</h1></center>

</body>

<head>

<style>

body{

background-color:tan;}

.box{background-color:#3d4543;height:330px;width:520px; border-style:solid; border-color:lightblue;

border-radius:10px;position:relative;top:1px;left:1%;}

.display{background-color:#222;width:440px; position:relative;

left:2px;top:20px;height:40px;}

.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:50px;}

.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>

<table>

<tbody>

<tr>

</tr>

</tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

</g>

</g>

</g>

</g>

</svg>

</body>

</td>

<td>

</td>

<td>

</form>

</td>

</tr>

</tbody>

</table>

</div>

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>

</center>

</body>

<head>

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>

저작자표시 비영리 변경금지

'아두이노프로세싱 프로그래밍' 카테고리의 다른 글

초보자를 위한 “프로세싱과 아두이노의 통신에 의한 LED bar graph 제어 예제” (0)	2017.05.06
초보자를 위한 “아두이노 코딩에 의한 LED bar graph 예제” (0)	2017.05.04
초보자를 위한 “아날로그 시계 내부에 작은 초시계를 가지는 HTML+SVG 시계” (0)	2017.04.23
초보자를 위한 “아두이노 온습도 센서 DHT11 및 FND 7 세그먼트 디스플레이 시스템을 확장한 GP2Y1010AU 미세먼지측정 시스템 ” (0)	2017.04.21
아두이노 무선 와이파이 코딩의 확장: 웹브라저 버튼 입력과 문자 입력 방식 혼용 (0)	2017.04.19

현재글뉴디자인 디지털 시계와 아날로그 시계가 포함된 HTML/JavaScript 계산기

Machine Learning , AI, Arduino Coding

후 실행,

Today :
Yesterday :

Machine Learning , AI, Arduino Coding