반응형
심플 LED 전광판 프로그램(PC, 스마트폰, 패드)

 

컴퓨터, 스마트폰, 패드에 사용할 수 있는 HTML로 구동되는 전광판 효과 프로그램입니다.

별도의 프로그램 없이 "크롬/파이어폭스" 등 웹브라우저에서 작동됩니다. 

 

- 주요 기능

1. 메시지 입력

2. 글자 크기 변경

3. 배경/글자 색상 설정

4. 정지글 / 왼쪽에서 오른쪽 스크롤 설정

5. 스크롤 속도 조정

6. 전체화면 설정

 

https://youtu.be/umj3CJedXcI

 

 

메뉴설명

메시지: 출력하고자 하는 메시지를 입력합니다. 

 

폰트크기: 슬라이드 바를 이용하여 글자크기를 설정합니다.

 

배경: 배경색상을 설정합니다.

 

글자: 글자색상을 설정합니다.

변색: 글자색이 자동으로 변경됩니다.

무지개A: 글자색이 무지개 그라데이션 색상으로 변경됩니다.

무지개B: 무지개 그라데이션 색상이 오른쪽에서 왼쪽으로 이동합니다.

무지개C: 메시지 배경색상을 무지개 그라데이션으로 변경됩니다.

좌측여백: 슬라이드 바를 사용하여 정지글의 메시지의 왼쪽여백을 설정합니다.

스크롤 시에는 해당값이 적용되지 않습니다.

 

우측여백: 슬라이드 바를 사용하여 메시지의 오른쪽여백을 설정합니다. 

 

줄간격: 메시지줄의 높이를 설정합니다.

 

줄 바꿈 체크 박스: 메시지의 길이가 오른쪽 여백보다 큰 경우 줄 바꿈 하는 기능을 설정합니다.

스크롤 시에는 해당값이 적용되지 않습니다.

 

AL / AC: 메시지의 왼쪽 / 가운데 정렬을 설정합니다. 

스크롤 시에는 해당값이 적용되지 않습니다.

 

<<: 왼쪽에서 오른쪽으로 메시지를 스크롤합니다. 

 

■: 스크롤 중인 메시지를 스크롤 전의 상태로 정지시킵니다. 

 

⭮ : 프로그램을 초기화시킵니다. 

 

↹ : 전체화면을 설정하거나 해제합니다.

 

속도: 슬라이드 바로 스크롤 속도를 조정합니다. 낮은 값일수록 빠르게 이동합니다.

 

여백: 슬라이드 바로 메시지 영역의 위/아래 여백을 조정합니다. 

 

⇡ / ⇣ : 버튼 위쪽 메뉴를 접거나 펼칩니다. 

 

⇈ / ⇊ : 모든 메뉴를 접거나 펼칩니다. 

접기시 화면 꺼짐 방지 기능활성화됩니다. 스마트폰의 화면 자동 꺼짐시간이 10분 이상으로 설정되어 있어야 합니다.

펼칠때 화면 꺼짐 방지 기능이 해제됩니다. 

 

빠른 사용방법

1. 전체화면 버튼을 클릭하여 전체화면으로 변경합니다. 

2. 메시지를 입력합니다. 

3. 슬라이드바를 이용하여 글자의 크기를 조정합니다. 
4. 변경된 메시지 및 글자 크기에 맞게 가로 여백을 조정합니다. 

6. 접기( ⇡ ) 버튼을 클릭하여 상기 설정 메뉴를 숨깁니다. 
7. 스크롤 속도를 조정합니다. 
8. 상하 여백을 조정하여 메시지의 수직 위치를 조정합니다.   

9. 모두접기 ( ⇈  ) 버튼을 클릭하여 메뉴를 숨깁니다.

 

*** 화면 자동 꺼짐 시간을 10분으로 설정해야 화면이 자동으로 꺼지지 않습니다.

설정 > 디스플레이
디스플레이 > 화면 자동 꺼짐 시간
화면 자동 꺼짐 시간 : 10분

 

scroll_text.html
0.02MB

 

※ 첨부파일 재배포 금지 

<!--
*  2023-10-28
*  https://postpop.tistory.com/199
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    :root {
      --bgc: #000000;
      --txc: #ffffff;
      --dpc: #000000;
      --Pwdt: 1400px;
      --nPwdt: -1400px;
      --xPwdt: -14000px;
      --fontsz: 200px;
      --talign: left;
      --speed: ;
      --Lheight: 200px;
      --height: auto;
      --margin: 0px 0px 0px 0px;
      --padding: 0px 0px 0px 0px;
      --wrap: ;
      --Lpding: 0;
      --CvarA: ;
      --CvarB: ;
      --CvarC: ;
      --CvarD: ;
    }
    body {
      background-color: var(--bgc);
      color: #ffffff;
    }
    div {
      white-space: normal;
    }
    p {
      color: var(--txc);
    }
    @keyframes scroll-animation{
      0%{
        left: 0;
      }
      100%{
        left: var(--nPwdt); /* 텍스트 width와 동일 */
      }
    }
    @keyframes rainbow-animation {
      to {
        background-position: 1000vh;
      }
    }
    @keyframes Color{
      0%{ color:#A0D468; }
      20%{ color:#4FC1E9; } 
      40%{ color:#FFCE54; } 
      60%{ color:#FC6E51; } 
      80%{ color:#ED5565; } 
      100%{ color:#AC92EC; }
    }
    .scroll-text{
      background-image: var(--CvarD);
      width: 100%;
      overflow: hidden;
    }
    .track{
      position: relative;
      height: 80%;
      width: var(--xPwdt);
      animation: var(--speed);
      white-space: var(--wrap);
    }
    .track p{
      float: left;
      width: var(--Pwdt);
      height: var(--height);
      font-size: var(--fontsz);
      text-align: var(--talign); 
      line-height : var(--Lheight); 
      overflow: hidden;
      margin: var(--margin);
      padding: var(--padding);
      background-image: var(--CvarA);
      -webkit-background-clip: text;
      -webkit-text-fill-color: var(--CvarB);
      animation: var(--CvarC); 
    }
    .button {
      background-color: #555555; 
      border: none;
      color: white;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      width:auto;
    }
    .absolute {
      display: block;
      position: absolute;
      top: 0px;
      right: 0;
      width: 30px;
      height: 23px; 
    }
    .video {
      display: block;
      position: absolute;
      top: -150px;
      right: 0px;
    }
    </style>
</head>
<body>
<script>
var cEffect = 0;
var r = document.querySelector(':root');

function bgc_set(Color) { r.style.setProperty('--bgc', Color);}

//function dp_set(Color) { r.style.setProperty('--dpc', Color); }

function txc_set(Color) { r.style.setProperty('--txc', Color); }

function fsize_set() {
  var f = document.getElementById("BS").value;
  var fz = (f*10)+'px';
  r.style.setProperty('--fontsz', fz);
}

function speed_set() {
  var s = document.getElementById("SO").value;
  var fs = 'scroll-animation '+s+'s linear infinite';
  r.style.setProperty('--speed', fs);
}

function setDwidth() {
  var v = document.getElementById("BO").value;
  var p = (v*100)+'px'
  var n = '-'+(v*100)+'px'
  var x = (v*1000)+'px'
  r.style.setProperty('--Pwdt', p);
  r.style.setProperty('--nPwdt', n);
  r.style.setProperty('--xPwdt', x);
}

function changeMsg() {
  document.getElementById('mm0').innerHTML = document.getElementById("T0").value;
  document.getElementById('mm1').innerHTML = document.getElementById("T0").value;
  document.getElementById('mm2').innerHTML = document.getElementById("T0").value;
}

function doDp(id){
  var con=document.getElementById(id);
  if (con.style.display=='none'){con.style.display='block'; document.getElementById('OPCI').innerHTML='&#8673';}
  else { con.style.display='none';document.getElementById('OPCI').innerHTML='&#8675';}
}

function requestFullScreen(element) {
  var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
  if (requestMethod) { // Native full screen.
    requestMethod.call(element);
  } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

function cancelFullScreen() {
  var el = document;
  var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
  if (requestMethod) { // cancel full screen.
    requestMethod.call(el);
  } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
      wscript.SendKeys("{F11}");
    }
  }
}

var elem = document.body; // Make the body go full screen.
var full = false;

function fullScreenToggle() {
  if (full) {
    cancelFullScreen();
    full = false;
    var con=document.getElementById('Div8');
    if (con.style.display=='none'){con.style.display='block';document.getElementById('OPCI').innerHTML='&#8673';}
  } else {
    requestFullScreen(elem);
    full = true;
  }
}

var padLeft = 0;
var magTop = 0;
var padTop = 0;

function paddingLeft() {
  padLeft = document.getElementById("LO").value*10;
  var pv = padTop+'px 0px 0px '+padLeft+'px';
  r.style.setProperty('--padding', pv)
}

function scroll_set() {
  var pv = padTop+'px 0px 0px 0px';
  r.style.setProperty('--padding', pv); 
  document.getElementById("LO").value=0;
  document.getElementById("LT").value=0;
  r.style.setProperty('--talign', 'left');
}

function changeMrg() {
  var p = document.getElementById("MO").value;
  if (p < 10) { 
    magTop = (p*10)-110; //padTop = magTop;
    var pv = magTop+'px 0px 0px 0px';
    r.style.setProperty('--margin', pv); 
    pv = '0px 0px 0px '+padLeft+'px'; //pv = padTop+'px 0px 0px '+padLeft+'px';
    r.style.setProperty('--padding', pv)
  } else { 
    var pv = '0px 0px 0px 0px';
    r.style.setProperty('--margin', pv); 
    padTop = (p-10)*10;
    var pv = padTop+'px 0px '+(padTop*2)+'px '+padLeft+'px'; //var pv = padTop+'px 0px 0px '+padLeft+'px';
    r.style.setProperty('--padding', pv);  
  }
}

var txAlign = 0;

function align_set() {
  if (txAlign) {
    r.style.setProperty('--talign', 'left');
    document.getElementById('ALS').innerHTML='AL';
    txAlign = 0;
  } else {
    r.style.setProperty('--talign', 'center');
    document.getElementById('ALS').innerHTML='AC';
    txAlign = 1;
  }
}

function stop_set() {
  changeMrg();
  r.style.setProperty('--speed', '');
  document.getElementById("LO").value=padLeft/10;
  document.getElementById("LT").value=padLeft/10;
  if (txAlign) {r.style.setProperty('--talign', 'center');}
  else {r.style.setProperty('--talign', 'left');}
}

function lineFeed() {
  var con=document.getElementById('CH').checked;
  if (con){r.style.setProperty('--wrap', ''); }
  else {r.style.setProperty('--wrap', 'nowrap'); }
}

function lineHeight() { 
  var lh = document.getElementById("BS").value*document.getElementById("HO").value+'px';
  r.style.setProperty('--Lheight', lh); 
}

function lineFeed_off() { r.style.setProperty('--wrap', 'nowrap'); }

var allFold = fasle;

function all_fold() {
  if (allFold) {
    document.getElementById('Div9').style.display='block';
    document.getElementById('AOFF').innerHTML='&#8648';
    allFold = false;
    clearInterval(nIntervId);
  } else {
    document.getElementById('Div9').style.display='none';
    document.getElementById('AOFF').innerHTML='&#8650';
    allFold = true;
    nIntervId=setInterval(autoPlay, 570000);
  }
}

function color_effect() {
  if (cEffect==0) {
    r.style.setProperty('--CvarC', 'Color 4s linear infinite');
    document.getElementById('CE').innerHTML='변색';
    cEffect = 1;
  } else if (cEffect==1) {
    r.style.setProperty('--CvarA', 'linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red)');
    r.style.setProperty('--CvarB', 'transparent');
    document.getElementById('CE').innerHTML='무지개A';
    cEffect = 2;
  } else if (cEffect==2) {
    r.style.setProperty('--CvarA', 'linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red)');
    r.style.setProperty('--CvarB', 'transparent');
    r.style.setProperty('--CvarC', 'rainbow-animation 35s linear infinite');
    document.getElementById('CE').innerHTML='무지개B';
    cEffect = 3;
  } else if (cEffect==3) {
    r.style.setProperty('--CvarA', '');
    r.style.setProperty('--CvarB', '');
    r.style.setProperty('--CvarC', '');
    r.style.setProperty('--CvarD', 'linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red)');
    document.getElementById('CE').innerHTML='무지개C';
    cEffect = 4;
  } else {
    r.style.setProperty('--CvarA', '');
    r.style.setProperty('--CvarB', '');
    r.style.setProperty('--CvarC', '');
    r.style.setProperty('--CvarD', '');
    document.getElementById('CE').innerHTML='단색';
    cEffect = 0;
  }
}
</script>  

<div id='Div9'style='display:block;margin: 0px 0px 10px 0px'>
<div id='Div8'style='margin: 0px 0px 4px 0px;display:block'>
<div style='margin: 0px 0px 4px 0px'>
메시지: <input type='text'style='width:19%'id='T0'value='SCROLL TEXT'oninput='changeMsg()'> 폰트크기: <output id='BS'name='BS'>20</output><input style='width:22%;height:10px;'type='range'min='10'max='70'value='20'oninput='document.getElementById("BS").value=value;fsize_set();lineHeight()'> 배경: <input style='width:40px;'type='color'name='CD'value='#000000'onchange='bgc_set(value)'> 글자: <input style='width:40px;'type='color'name='CT'value='#ffffff'onchange='txc_set(value)'> <button class="button"style='width:80px;height:23px'id='CE'onclick='color_effect()'>단색</button>
</div>
좌측:<span style='display:inline-block;width:18px;'><output id='LO'>0</output></span><input style='width:10%;height:10px;'type='range'id='LT'min='0'max='20'value='0'oninput='document.getElementById("LO").value=value;paddingLeft()'> 우측:<span style='display:inline-block;width:18px;'><output id='BO'>14</output></span><input style='width:22%;height:10px;'type='range'min='0'max='100'value='14'oninput='document.getElementById("BO").value=value;setDwidth()'> 줄간격:<span style='display:inline-block;width:18px;'><output id='HO'>10</output></span><input style='width:8%;height:10px;'type='range'min='8'max='20'value='10'oninput='document.getElementById("HO").value=value;lineHeight()'> <input style='width:auto;'type='checkbox'id='CH'onclick='lineFeed()'checked>&#8649  <button class="button"style='width:40px;height:23px'id='ALS'onclick='align_set()'>AL</button> <button class="button"style='width:40px;height:23px'onclick='scroll_set();lineFeed_off();setDwidth();speed_set()'><<</button> <button class="button"style='width:40px;height:23px'onclick='lineFeed();stop_set()'>&#9724</button> <button class="button"style='width:40px;height:23px'onclick='location.reload()'>&#8635</button>
</div>
<button class="button"style='width:40px;height:23px'onclick='fullScreenToggle();'>&#8633</button> 속도:<span style='display:inline-block;width:18px;'><output id='SO'name='SO'>20</output></span><input style='width:25%;height:10px;'type='range'name='SF'min='2'max='20'value='20'oninput='document.getElementById("SO").value=value;speed_set()'> 여백:<span style='display:inline-block;width:18px;'><output id='MO'name='MO'>10</output></span><input style='width:40%;height:10px;'type='range'name='MF'min='0'max='40'value='10'oninput='document.getElementById("MO").value=value;changeMrg()'> <button class="button"style='width:40px;height:23px'id='OPCI'onclick='doDp("Div8")'>&#8673</button>
<div></div>
</div>
<div class="scroll-text">
  <div id="box"class="track">
  <p id='mm0'>SCROLL TEXT</p>
  <p id='mm1'>SCROLL TEXT</p>
  <p id='mm2'>SCROLL TEXT</p>
  </div>
</div>
<div class="absolute">
 <button class="button"style='width:30px;height:23px'id='AOFF'onclick='all_fold();requestWakeLock()'>&#8648</button>
</div>

<div class="video">
<video id = "myVideoObject" controls>
<source src="data:video/webm;base64,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" type="video/webm">
<source src="data:video/mp4;base64,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" type="video/mp4">
</video>
</div>
<script>
let nIntervId;
function autoPause() {
  myVideoObject.pause();
}
function autoPlay() {
  myVideoObject.play();
  setTimeout(autoPause, 100);
}
</script>
</body>
</html>

 

 

 

저작자표시 비영리 변경금지

'기타' 카테고리의 다른 글

감정사 2014 ~ 2020 기출문제 요점정리  (0) 2021.06.11

+ Recent posts

티스토리툴바