HTML그래픽 언어인 SVG(Scalable Vector Graphics)로 7세그먼트 LED를 그려보자!:I
원래 아두이노의 태생이 컴퓨터와는 거리가 먼 예능 전공자들 즉 컴퓨터 비전공자들과 어린이들을 대상으로 컴퓨터를 가르치기 위해 만들어졌다는 점은 다 알고 있는 사실이다.
즉 아두이노는 본연의 목적에 맞춰 저가로 만들다 보니 배선이나 몇 가닥 끼울 수 있는 구멍 몇 개에 키보드도 붙일 수 없고 디스플레이 조차도 없는 맹인형의 싸구려 보드임에 지금도 변함이 없다.
하지만 모든 이가 스마트 폰을 가지고 있는 이 시대에 NodeMCU 의 와이파이 기능을 활용한다면 눈이 없는 아두이노에게 산뜻한 최고의 OLED 웹 입출력 장치를 부여해 줄 수 있다. 이미 블로그에 선 보였던 키 보드 프로그래밍 예제를 참조해 보기 바란다.
이러한 가능성은 지금은 작고했지만 IT의 최고 사령관이었던 스티브 잡스에게 공을 돌릴 수 밖에 없어 보인다. 90년대 말부터 국내에서도 삼성전자의 애니콜이 있었지만 적어도 스티브 잡스 시대에 와서야 각종 앱 소프트웨어와 클라우드 및 웹 브라우저로 무장한 스마트 폰을 우리 손바닥 위에 올려 주었기 때문이다. 90년대 후반에서 스티브 잡스의 아이폰이 자리 잡기 전까지는 이동통신사들이 통신을 독점하여 네트워크를 막아 놓았었다. 때문에 오늘날의 사물인터넷이나 본 블로그에 게재된 다양한 첨단 소프트웨어 기술들이 불가능했었다.
한편 아직도 안드로이드라든지 IOS에서 앱 프로그램을 짜는 것은 소수의 전문 프로그래머에게 까지도 쉽지 않은 전문성을 요하는 것이 사실이다. 바로 그 대안이 컴퓨터 언어 중에서 가장 쉬워 보이는 HTML 일 것이다. 사실 HTML은 문법이 좀 틀려도 큰 문제를 일으키지 않는다. 그 수준이 C/C++을 사용하는 아두이노에 비해 그다지 어렵지는 않아 보인다. 하지만 이 둘의 결합 시너지는 이미 게시된 블로그에서 보았듯이 새로운 스마트 폰 웹 프로그래밍의 지평을 열 정도로 위력적인 것으로 보인다.
이러한 아두이노와 HTML의 결합 소프트웨어는 오히려 안드로이드 앱이나 IOS 앱에 비해서 엄청나게 프로그래밍이 쉬운 반면 효과는 오히려 더 나은듯하다.
일단 스마트 폰 웹 브라우저에서 아두이노 NodeMCU를 위한 전용 키보드를 만들 수 있으므로 이를 이용하여 웹 브라우저용 7 세그먼트 LED 그래픽을 위한 프로그램을 작성해 보기로 한다.
일단계로 아두이노 NodeMCU 와이파이 응용 프로그램을 작성하기 이전에 순수 HTML의 그래픽 언어인 SVG를 사용하여 7 세그먼트를 그려보도록 하자.
HTML 편집기를 별도로 준비할 필요가 전혀 없는데 이는 w3school 사이트의 편집기 내용을 지우고 자신이 아래한글에서 작성한 프로그램을 복사해 온 후에 실행시켜 보면 되는 간단한 작업이다. HTML 프로그램 저장은 자신의 아래한글 프로그램으로 하면 된다.
www.w3school.com 의 편집기에서 아래의 HTML 프로그램을 복사하여 실행시켜 보기 바란다.
연이어 게재되는 블로그에서 키보드 프로그램을 이용하여 7segment 그래픽을 웹브라우저에서 어떻게 제어하는지 예제를 참조하기 바란다.
300X300 HTML SVG 7Segment 프로그램
<!DOCTYPE html>
<html>
<body>
<style>
</style>
<svg height="300" width="300">
<polygon points="50,50 60,40 190,40 200,50 190,60 60,60" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="50,55 60,65 60,135 50,145 40,135 40,65" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="200,55 210,65 210,135 200,145 190,135 190,65" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="50,150 60,140 190,140 200,150 190,160 60,160" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="50,155 60,165 60,235 50,245 40,235 40,165" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="200,155 210,165 210,235 200,245 190,235 190,165" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="50,250 60,240 190,240 200,250 190,260 60,260" style="fill:red;stroke:black;stroke-width:3" />
<polygon points="205,250 215,240 225,240 235,250 225,260 215,260" style="fill:red;stroke:black;stroke-width:3" />
</body>
</html>
이상 끝