전광판 웹앱 실험적으로 만들기

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

Direct dn: http://parkjuwan.dothome.co.kr/files/hanled.zip