LED 전광판 웹앱을 만드는 실험적인 시도를 해 보았습니다.
한글과 라틴 문자를 지원하며 여러 색을 입힐 수 있는 전광판입니다.
예전에 전광판 효과로 나타내는 자바 애플릿이 있었지만 현재 자바 애플릿이 쇠퇴하는 추세에 있는 관계로 전광판 애플릿을 대체하기 위한 목적으로 실험적 개발을 하여 보았습니다.
전광판 데이터는 XML 파일에서 받아오는 형식입니다. 예를 들어, 이 예제에 사용된 demo.xml 파일의 내용은 아래와 같습니다.
<?xml version="1.0" encoding="UTF-8"?> <ticker cols="16" rows="1"> <text in="upward" pause="2" out="rightward" out-delay="2" next-term="0">Welcome!</text> <text in="slideright" pause="1" color="6" delay="3" h-adjust="9" blink-delay="2">Hangul `rLED`r `kTicker`k v0.2 $a</text> <text in="downward" pause="2" out="leftward" color="12" h-adjust="15">http://parkjuwan.dothome.co.kr/</text> <text color="10">한글`8을 `0써 `d볼`c까요? ㄱㄴㄷ`a♥</text> <text color="2">오늘은 `ty년 `tm월 `td일 `tq요일입니다.</text> <text color="11" animation-delay="2">Animation $0$1$2$3</text> </ticker>
현재 구현사항
- 16가지 색 구현
- 0: 빨강, 1: 주황, 2: 노랑, 3: 노랑연두, 4: 초록, 5: 연청록, 6: 청록, 7: 하늘색, 8: 파랑, 9: 보라, 10: 자주, 11: 핑크, 12: 하양, 13: 연한 빨강, 14: 연한 자주, 15: 연한 파랑
- 글 중간에는 `1, `2, `3 … `9, `a, `b … `f로 구현.
- 반전 효과 구현 (`r로 시작해서 `r로 끝)
- 10가지 나타남/사라짐 효과 구현 (immediately, fade, slideleft, slideright, slideup, slidedown, leftward, rightward, upward, downward)
h-adjust
,v-adjust
구현 (위치 조정 기능)- 한글 완성자 11,172자 전부 구현
- 일부 KS X 1001 특수문자 전부 구현
앞으로 더 많은 기능 구현 예정.
전용 XML 양식:
<?xml version="1.0" encoding="UTF-8"?> <ticker cols="n" rows="n" default-color="n" default-term="n" default-blink-delay="n" default-animation-delay="n"> <text color="n" h-adjust="n" v-adjust="n" in="effect" pause="n" out="effect" delay="n" out-delay="n" next-term="n" blink-delay="n" animation-delay="n">Text</text> <text color="n" h-adjust="n" v-adjust="n" in="effect" pause="n" out="effect" delay="n" out-delay="n" next-term="n" blink-delay="n" animation-delay="n">Text</text> <text color="n" h-adjust="n" v-adjust="n" in="effect" pause="n" out="effect" delay="n" out-delay="n" next-term="n" blink-delay="n" animation-delay="n">Text</text> </ticker>
직접 링크 주소는 다음과 같습니다.: http://parkjuwan.dothome.co.kr/webapp/hanled/?data=demo.xml
GitHub: https://github.com/JuwanPark/WebApps/tree/master/hanled
안녕 하세요.~
이거저거 테스트 하고 있는데 다운받고 local에서 실행 하고 있는데
실행이 안되는 이유는 무엇일까요?
답변입니다.
그냥 index.html만 가지고는 글자가 뜨지 않습니다. index.html 뒤에 ?data=demo.xml 식으로 data 인자에 데이터를 넣은 XML 파일을 넣어야 합니다.
또한, 로컬 저장장치(하드디스크, SSD 등)에 있는 파일을 직접 불러오는 경우 file:/// 프로토콜로 되는데, 보안상의 문제로 인해 AJAX는 file 프로토콜을 차단합니다. 제가 사용하는 크롬 기준으로 AJAX는 http, data, chrome, chrome-extension, https 이렇게 다섯 가지 프로토콜만 허용됩니다.
따라서, 하드디스크에 저장해 놓고 직접 불러오는 방식을 쓰면 안 되고 웹 호스팅에 올려서 액세스해 보아야 합니다. 만약 웹 호스팅이 없다면 ‘파이썬으로 간단한 웹 서버 구성해 보기'(http://parkjuwan.dothome.co.kr/wordpress/2017/06/04/simple-http-server-py/) 포스트에 서술된 방법대로(굳이 파이썬이어야 할 필요는 없고 Node.js나 다른 프레임워크로 해도 무방합니다) 작업하시는 데스크톱 컴퓨터를 임시 웹 서버로 만들어서 테스트해 보실 수 있습니다.
만약 작업하는 컴퓨터 자신을 가상 웹 서버로 만들고 포트는 8000번으로 했다고 가정하면
http://127.0.0.1:8000/hanled/?data=demo.xml
위와 같은 식으로 실험해 보면 됩니다.
※ Direct dn 링크를 추가했습니다. 다시 다운로드해 보시려면 해당 링크를 누르시면 됩니다.
아 감사합니다.
답변 감사합니다. 많이 배우고 갑니다.