ダウンロードはこちら：https://github.com/risaiku/sixteen-seg.js
16SEG.JS SIXTEEN-SEG.JS
<div style="display:inline-block;background-color:black;"> <div id="seg16ins01" style="height:120px;"></div> </div>
<script>
var seg01 = new Seg16("seg16ins01");
seg01.draw({value : "16SEG.JS SIXTEEN-SEG.JS"});
</script>
16セグメントディスプレイを表示するためのJavaScriptライブラリです。
IT IS A JAVASCRIPT LIBRARY FOR DISPLAYING A 16-SEGMENT DISPLAY.
小文字にも対応していますが、あまり美しくありません。
It supports lower case, but it is not beautiful.
スタイルを変えることが出来ます。
YOU CAN CHANGE THE STYLE.
<div style="display:inline-block;background-color:black;"> <div id="seg16ins04" style="width:280px;height:40px;"></div> </div> <div style="display:inline-block;background-color:black;"> <div id="seg16ins05" style="width:290px;height:40px;"></div> </div> <div style="display:inline-block;background-color:blue;"> <div id="seg16ins06" style="width:260px;height:40px;"></div> </div>
<script>
var seg04 = new Seg16("seg16ins04");
seg04.draw({value : "YOU CAN "});
var seg05 = new Seg16("seg16ins05");
seg05.draw({value : "CHANGE ", slant : 10, colorOn : "green", colorOff : "rgb(0, 30, 0)"});
var seg06 = new Seg16("seg16ins06");
seg06.draw({value : "THE STYLE.", bgColor : "blue", colorOn : "white", colorOff : "blue"});
</script>
ドットは、標準の動作では前の文字の位置に表示しますが、次の文字として表示する事も可能です。
<div style="display:inline-block;background-color:black;"> <div id="seg16ins07" style="width:240px;height:60px;"></div> </div>
<script>
var seg07 = new Seg16("seg16ins07");
seg07.draw({value : "THE STYLE.", mergeDot : false});
</script>
工夫次第で色々なことができます。
<div style="display:inline-block;background-color:black;"> <div id="seg16ins08" style="width:450px;height:60px;"></div> </div> <br> <div style="display:inline-block;background-color:black;"> <div id="seg16ins09" style="width:120px;height:60px;"></div> </div>
<script>
(function () {
var C = "!\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
var seg07 = new Seg16("seg16ins08");
seg07.draw({value : C, slant:5, digit : 8, mergeDot : false});
wk = C;
setInterval(function(){
seg07 .changeValue(wk);
wk = wk.slice(1);
if (wk.length == 0) {
wk = " " + C;
}
} , 200);
})();
(function () {
var seg08 = new Seg16("seg16ins09");
seg08.CODE_SEG_TABLE[0x80] = 0x1ffff;
seg08.CODE_SEG_TABLE[0x81] = 0x00000;
var i, wk;
wk = 0x00001;
for (i = 0; i < 16; i++) {
seg08.CODE_SEG_TABLE[0x90 + i] = wk;
wk = wk << 1;
}
wk = 0x00001;
seg08.CODE_SEG_TABLE[0xa0] = 0x00001;
for (i = 0; i < 16; i++) {
seg08.CODE_SEG_TABLE[0xa0 + i] = wk;
wk = (wk << 1) | wk;
}
seg08.draw({digit:1});
var idx = 0x90, stopCnt = 18;
setInterval(function(){
idx++;
if (idx >= 0xb0) {
if (stopCnt % 3 == 0) {
seg08.changeValue(String.fromCharCode(0x81));
} else {
seg08.changeValue(String.fromCharCode(0x80));
}
stopCnt--;
if (stopCnt < 0) {
stopCnt = 18;
idx = 0x90;
}
} else {
seg08.changeValue(String.fromCharCode(idx));
}
} , 100);
})();
</script>