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

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

“전광판 웹앱 실험적으로 만들기”의 4개의 생각

    1. 답변입니다.

      그냥 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 링크를 추가했습니다. 다시 다운로드해 보시려면 해당 링크를 누르시면 됩니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다