16セグメントディスプレイを表示するJavaScriptライブラリ『sixteen-seg.js』リリース!

Pocket
LINEで送る

ダウンロードはこちら: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>

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください