웹 브라우저 수준에서 계산기 프로그램 작성을 위해서는 몇 가지 준비가 필요하다. 즉 키보드와 같은 입력 장치가 있어야 하며 계산 과정이나 결과를 출력하기 위한 디스플레이 창이 필요하다. 아울러 내부적으로는 입력된 연산 식을 처리하기 위한 함수가 필요하다.
HTML 언어를 사용하여 이와같은 요구조건을 충족 시키는 계산기를 코딩해 보기로 한다.
그림은 사실 어느 색감이 뛰어난 인도 프로그래머의 계산기 사례이다. 구체적인 내용은 아래의 싸이트를 참조하자.
Creating Calculator using HTML,CSS and JavaScript
https://www.codeproject.com/tips/631525/creating-calculator-using-html-css-and-javascript
계산기를 구성하기 위해 블록별로 설명과 함께 조각조각 프로그램을 제시하고 있어 모두를 모아서 HTML 편집기에서 실행해 보기로 한다.
여기서 말하는 HTML 편집기로는 무료로 다운 받을 수 있는 Notepad++ 이 좋으며 또는 www.w3scholls.com 의 아무 예제에나 들어가 원래 있던 프로그램을 삭제하고 아래의 긴HTML 프로그램을 삽입해서 실행시켜도 된다.
여기서 수정된 HTML 코드는 그냥 아래한글에 복사해서 저장하면 된다. 좀 번거롭지만 에디터의 성능이 대단히 뛰어나므로 참을만 할 것이다.
계산기의 대대적인 외모 성형을 위한 부담으로 인해 CSS프로그램이 초반에 길게 삽입되어 있으므로 조목 조목 살펴보기로 하자.
프로그램의 대부분을 차지하는 스타일 태그 내용을 살펴보기로 하자.
배경색 tan은 갈색 계통으로 인도 사람들이 선호하는 색상인 듯하다,
.box의 배경색은 계산기의 바탕색을 의미하미 높이와 폭 모서리의 라운드를 각각 300 px, 250 px, 10 px로 디자인 한다.
키보드 입력 방식은 input 속성을 이용한다. type은 버튼식이며 버튼 위에 출력되어 있는 value 값은 키보드를 누름에 따라 즉 onclick 함에 따라 함수 v()에 문자 형태로 입력됨과 아울러 입력된 값들이 모두 합해져서 저장된다.
여기서 키보드 입력 0∼9 및 핑크 빛 연산자 + - * / 키보드 입력만 모두 합해진다.
마지막으로 주황색 = 키를 누르면 함수 e()를 호출하게 되며 계산을 위해서 문자로 저장되었던 연산 식 전체가 Java Script의 eval(document.getElementById("d").value))에 의해 계산이 이루어지고 출력된다.
이 계산기에서는 단지 0∼9를 대상으로 사칙연산만 수행하도록 코딩되었으나 eval() 함수는 삼각함수나 자연로그 등 모든 함수를 대상으로 식을 입력하면 결과를 출력하므로 코드를 좀 더 수정하기로 한다.
따라서 별 필요 없는 mrc, m-, m+ 키를 Pi, (, )로 대체하였다. 대문자 C 키를 누르면 Null(아무것도 없음, “”) 이 디스플레이 창에 출력되어 리셋된다. Pi를 누르면 3.141592654 값이 입력된다. 괄호는 보다 복잡한 연산을 위해서 도입 하였다.
아울러 삼각함수와 자연로그 함수를 추가하기 위해서 마지막 줄을 추가하였다.
sin(), cos(), tan() 및 log() 함수는 Java Script 입력 시에 Math.sin(), Math.cos(),Math.tan() 및 Math.log()로 입력된다는 점에 유의하자.
새로이 수정된 계산기로서 키보드에 공학계산 기능이 추가되었다.
그밖에 계산기의 높이
사이즈를 300 px에서 350 px로 늘려줄 필요가 있다.
그림의 계산 사례를 참조하기 바란다.
블로그에서 이미 HTML이나 java Script가 포함된 아두이노 NodeMCU 웹서버 코드 사례를 많이 제시하였으나 아쉽게도 이들이 항상 웹브라우저와 연동되는 것은 아니다. 이 블로그에서 다루는 계산기 코드도 체크해본 결과 Java Script의 핵심 명령이라 할 수 있는 onClick 명령이 아두이노 NodeMCU와 연동되지 않는다는 점을 경험적으로 알게 되었다.
따라서 아두이노 NodeMCU 보드를 사용하여 아두이노 무선와이파이 코딩을 진행함에 있어서 방향을 수정 설정하였다. 즉 되는 부분은 아두이노 코드에 편입하여 client.print(“HTML 또는 JavaScript 명령어”) 형식으로 처리하고 반면에 그런 방식으로 연동되지 않는 부분은 직접 웹브라우저에 입력하여 아두이노 웹서버 프로그램과 혼용하는 방식으로 프로그램이 구성이 가능하다는 점을 지적해 두고자 한다.
//Calculaor_html_01
<html>
<body>
<center><h1>Arduino NodeMCU/WeMos</h1>
<h1>IOT Control Buttons</h1>
<a href=http://192.168.0.5/ ><button> Start </button></a></center>
</body>
<head><style>
body{background-color:tan;}
.box{background-color:#3d4543;height:350px;width:250px;border-radius:10px;position:relative;top:50px;left:35%;}
.display{background-color:#222;width:220px;position:relative;left:15px;top:20px;height:40px;}
.display input{position:relative;left:2px;top:2px;height:35px;color:black;background-color:#bccd95;font-size:21px;text-align:right;}
.keys{position:relative;top:15px;}
.button{width:40px;height:30px;border:none;border-radius:8px;margin-left:17px;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;}
p{line-height:10px;}
</style>
</head>
<body>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"></div>
<div class="keys">
<p><input type="button" class="button gray" value="Pi" onclick='v("3.14")'>
<input type="button" class="button gray" value="(" onclick='v("(")'>
<input type="button" class="button gray" value=")" onclick='v(")")'>
<input type="button" class="button pink" value="/" onclick='v("/")'></p>
<p><input type="button" class="button black" value="7" onclick='v("7")'>
<input type="button" class="button black" value="8" onclick='v("8")'>
<input type="button" class="button black" value="9" onclick='v("9")'>
<input type="button" class="button pink" value="*" onclick='v("*")'></p>
<p><input type="button" class="button black" value="4" onclick='v("4")'>
<input type="button" class="button black" value="5" onclick='v("5")'>
<input type="button" class="button black" value="6" onclick='v("6")'>
<input type="button" class="button pink" value="-" onclick='v("-")'></p>
<p><input type="button" class="button black"value="1" onclick='v("1")'>
<input type="button" class="button black" value="2" onclick='v("2")'>
<input type="button" class="button black" value="3" onclick='v("3")'>
<input type="button" class="button pink" value="+" onclick='v("+")'></p>
<p><input type="button" class="button black" value="0" onclick='v("0")'>
<input type="button" class="button black" value="." onclick='v(".")'>
<input type="button" class="button black" value="C" onclick='c("")'
<input type="button" class="button orange" value="=" onclick='e()'></p>
<p><input type="button" class="button black" value="sin" onclick='v("Math.sin")'>
<input type="button" class="button black" value="cos" onclick='v("Math.cos")'>
<input type="button" class="button black" value="tan" onclick='v("Math.tan")'>
<input type="button" class="button black" value="log"
onclick='v("Math.log")'>
</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>
</html>
프로그램 끝
'아두이노프로세싱 프로그래밍' 카테고리의 다른 글
| 아두이노 무선 와이파이 코딩의 확장: 웹브라저 버튼 입력에서 문자 입력 방식으로 (0) | 2017.04.17 |
|---|---|
| 아두이노 무선 와이파이 코딩의 시작: LED ON OFF BLINK 제어 웹서버 코딩 (0) | 2017.04.16 |
| 초보자를 위한 조도센서 LED ON OFF에서 저항 값 변동 프로세싱에 의한 그래픽 관찰 (0) | 2017.04.12 |
| 아두이노 초보자를 위한 “아두이노 코딩에 의한 조도센서 저항값 변동에 따른 LED ON OFF” (0) | 2017.04.10 |
| 아두이노 초보자를 위한 멜로디톤 연주(클레멘타인 곡 업데이트) (0) | 2017.04.05 |