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">https://pjw48.net/</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>
직접 링크 주소는 다음과 같습니다.: https://pjw48.net/webapp/hanled/?data=demo.xml
GitHub: https://github.com/JuwanPark/WebApps/tree/master/hanled
Direct dn: https://pjw48.net/files/hanled.zip
안녕 하세요.~
이거저거 테스트 하고 있는데 다운받고 local에서 실행 하고 있는데
실행이 안되는 이유는 무엇일까요?
답변입니다.
그냥 index.html만 가지고는 글자가 뜨지 않습니다. index.html 뒤에 ?data=demo.xml 식으로 data 인자에 데이터를 넣은 XML 파일을 넣어야 합니다.
또한, 로컬 저장장치(하드디스크, SSD 등)에 있는 파일을 직접 불러오는 경우 file:/// 프로토콜로 되는데, 보안상의 문제로 인해 AJAX는 file 프로토콜을 차단합니다. 제가 사용하는 크롬 기준으로 AJAX는 http, data, chrome, chrome-extension, https 이렇게 다섯 가지 프로토콜만 허용됩니다.
따라서, 하드디스크에 저장해 놓고 직접 불러오는 방식을 쓰면 안 되고 웹 호스팅에 올려서 액세스해 보아야 합니다. 만약 웹 호스팅이 없다면 ‘파이썬으로 간단한 웹 서버 구성해 보기'(https://pjw48.net/wordpress/2017/06/04/simple-http-server-py/) 포스트에 서술된 방법대로(굳이 파이썬이어야 할 필요는 없고 Node.js나 다른 프레임워크로 해도 무방합니다) 작업하시는 데스크톱 컴퓨터를 임시 웹 서버로 만들어서 테스트해 보실 수 있습니다.
만약 작업하는 컴퓨터 자신을 가상 웹 서버로 만들고 포트는 8000번으로 했다고 가정하면
http://127.0.0.1:8000/hanled/?data=demo.xml
위와 같은 식으로 실험해 보면 됩니다.
※ Direct dn 링크를 추가했습니다. 다시 다운로드해 보시려면 해당 링크를 누르시면 됩니다.
아 감사합니다.
답변 감사합니다. 많이 배우고 갑니다.
안녕하세요
이거 전광판 웹에서 보는거요 질문이요~
이것저것 다 잘되고 있는데요 xml에서 사이즈가 cols=26 rows=2 로 작업중인게 있습니다.
cols 는 유동적이라 더 커질수도 있구요..
암튼요 사이즈가 길어질 경우에 전체화면으로 보면 우측이 잘려보이는데
여기저기 사이즈 조정 수정해봐도 잘 안되길래 문의드려요~
사용버전은 레드크루버전으로 모니터 전체화면으로 볼때요..
index.html 에서 아이프레임 크기조정도 해보고 js파일에서 width조정도 했는데
어딘지 못찾겠어요 ㅠㅠ
질문 추가합니당. 죄송해요 질문이 바뀐거 같아서요..
index.html 에서 아이프레임 width 조정, loader.js에서 wresize() 같이 조정 후 해결되었습니다만 문제는 xml에서 cols 가 유동적인데 그때마다 동적으로 수정이 잘안되고 있네요..
앞에 문의에 cols 값 26일 경우 width 830으로 맞추면 되는데 cols 값이 작아지면 또 화면공백으로 width 수정이 필요하네요.. 반대로 더 값이 커지는것도 문제되고요…
xml 에서 cols 값에 따라 화면이 자동으로 맞춰주게 설명 부탁드립니당. ㅜㅜ
답변입니다.
레드크루 버전에서 index.html 파일과 loader.js 파일을 수정하였습니다.
TickerCols, TickerRows, TickerWidth, TickerHeight 이렇게 4개의 스크립트 변수를 추가했습니다.
TickerCols와 TickerRows 값만 사이즈에 맞게 수정하면 됩니다.
TickerWidth와 TickerHeight 값은 앞의 두 값을 따라 자동으로 설정됩니다.
감사합니당. ㅜㅜ 몇일동안 고민하던게 시원하게 해결되었습니다.
이쁘게 사용하겠습니다. ^^
LED의 글자와 이미지 크기를 줄이는 방법이 있을까요?
지금크기의 3/2 정도로 줄여보려고 해보았는데 잘 안되네요.
지금의 크기보다 작아지면 시인성이 낮아질수 있다고도 생각은 하지만..
잘 사용하고 있습니다. 감사합니다.
댓글 감사합니다.
LED의 글자와 이미지 크기를 줄이는 것은 구현되지 않았습니다.
대신 iframe 태그에다가 transform 스타일을 주는 것으로 우회적 구현이 가능합니다.
전광판 iframe에다가 CSS 스타일을 transform: scale(0.6666); 정도로 주면 크기가 2/3 정도로 줄어듭니다.