ドットマトリクスを表示するJavaScriptライブラリ『dot-matrix.js』をリリースしました

Pocket
LINEで送る

ダウンロードはこちら:https://github.com/risaiku/dot-matrix.js


DOT-MATRIX.JS
<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins01" style="width: 400px; height: 70px;"></div>
</div>
<script>
var dotmatrix01 = new DotMatrix("dotmatrixins01");
dotmatrix01.draw({value : "DOT-MATRIX.JS"});
</script>

ドットマトリクスを表示するためのJavaScriptライブラリです。
It is a JavaScript library for displaying a dot matrix.

スタイルを変えることが出来ます。
YOU CAN CHANGE THE STYLE.
<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins03" style="width:280px;height:60px;"></div>
</div>
<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins04" style="width:290px;height:60px;"></div>
</div>
<div style="display:inline-block;background-color:blue;">
	<div id="dotmatrixins05" style="width:260px;height:60px;"></div>
</div>
<script>
var dotmatrix03 = new DotMatrix("dotmatrixins03");
dotmatrix03.draw({value : "YOU CAN "});

var dotmatrix04 = new DotMatrix("dotmatrixins04");
dotmatrix04.draw({value : "CHANGE ", slant : 15, colorOn : "green", colorOff : "rgb(0, 30, 0)"});

var dotmatrix05 = new DotMatrix("dotmatrixins05");
dotmatrix05.draw({value : "THE STYLE.", bgColor : "blue", colorOn : "white", colorOff : "blue", shape : "square"});
</script>

虹色で出力することができます。
<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins06" style="width:240px;height:60px;"></div>
</div>
<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins07" style="width:240px;height:60px;"></div>
</div>
<script>
var dotmatrix06 = new DotMatrix("dotmatrixins06");
dotmatrix06.draw({value : "RAINBOW?", colorOn : "rainbow"});

var dotmatrix07 = new DotMatrix("dotmatrixins07");
dotmatrix07.draw({value : " RAINBOW! ", colorOn : "white", colorOff : "rainbow"});
</script>

工夫次第で色々なことができます。

<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins08" style="width:450px;height:75px;"></div>
</div>
<br>
<div style="display:inline-block;background-color:black;">
	<div id="dotmatrixins09" style="width:120px;height:60px;"></div>
</div>
<script>
(function () {
	var C = "!\"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";

	var dotmatrix08 = new DotMatrix("dotmatrixins08");
	dotmatrix08.draw({value : C, slant:5, digit : 8});

	wk = C;
	setInterval(function(){
		dotmatrix08.changeValue(wk);
		wk = wk.slice(1);
		if (wk.length == 0) {
			wk = "          " + C;
		}
	} , 200);
})();

(function () {
	var index = 0;
	var STRS = [
		String.fromCharCode(200, 200, 200),
		String.fromCharCode(201, 201, 201),
		String.fromCharCode(202, 202, 202),
		String.fromCharCode(203, 203, 203),
		String.fromCharCode(204, 204, 204),
		String.fromCharCode(205, 205, 205),
		String.fromCharCode(206, 206, 206),
		String.fromCharCode(207, 207, 207),
		String.fromCharCode(208, 208, 208),
		String.fromCharCode(209, 209, 209),
		String.fromCharCode(210, 210, 210),
		String.fromCharCode(211, 211, 211),
		String.fromCharCode(212, 212, 212),
		String.fromCharCode(213, 213, 213),
		String.fromCharCode(214, 214, 214),
		String.fromCharCode(215, 215, 215),
		String.fromCharCode(216, 216, 216),
		String.fromCharCode(217, 217, 217),
		String.fromCharCode(218, 218, 218),
		String.fromCharCode(219, 219, 219),
		String.fromCharCode(220, 220, 220),
		String.fromCharCode(221, 221, 221),
		String.fromCharCode(222, 222, 222),
		String.fromCharCode(223, 223, 223),
		String.fromCharCode(224, 224, 224),
		String.fromCharCode(225, 225, 225),
		String.fromCharCode(226, 226, 226),

		String.fromCharCode( 32,  32, 304),
		String.fromCharCode( 32,  32, 303),
		String.fromCharCode( 32,  32, 302),
		String.fromCharCode( 32,  32, 301),
		String.fromCharCode( 32,  32, 300),
		String.fromCharCode( 32, 304,  32),
		String.fromCharCode( 32, 303,  32),
		String.fromCharCode( 32, 302,  32),
		String.fromCharCode( 32, 301,  32),
		String.fromCharCode( 32, 300,  32),
		String.fromCharCode(304,  32,  32),
		String.fromCharCode(303,  32,  32),
		String.fromCharCode(302,  32,  32),
		String.fromCharCode(301,  32,  32),
		String.fromCharCode(300,  32,  32),
		String.fromCharCode(300,  32, 304),
		String.fromCharCode(300,  32, 303),
		String.fromCharCode(300,  32, 302),
		String.fromCharCode(300,  32, 301),
		String.fromCharCode(300,  32, 300),
		String.fromCharCode(300, 304,  32),
		String.fromCharCode(300, 303,  32),
		String.fromCharCode(300, 302,  32),
		String.fromCharCode(300, 301,  32),
		String.fromCharCode(300, 300,  32),
		String.fromCharCode(305,  32,  32),
		String.fromCharCode(306,  32,  32),
		String.fromCharCode(307,  32,  32),
		String.fromCharCode(308,  32,  32),
		String.fromCharCode(308,  32, 304),
		String.fromCharCode(308,  32, 303),
		String.fromCharCode(308,  32, 302),
		String.fromCharCode(308,  32, 301),
		String.fromCharCode(308,  32, 300),
		String.fromCharCode(308, 304,  32),
		String.fromCharCode(308, 303,  32),
		String.fromCharCode(308, 302,  32),
		String.fromCharCode(308, 301,  32),
		String.fromCharCode(308, 300,  32),
		String.fromCharCode(309,  32,  32),
		String.fromCharCode(310,  32,  32),
		String.fromCharCode(311,  32,  32),
		String.fromCharCode(311,  32, 304),
		String.fromCharCode(311,  32, 303),
		String.fromCharCode(311,  32, 302),
		String.fromCharCode(311,  32, 301),
		String.fromCharCode(311,  32, 300),
		String.fromCharCode(311, 304,  32),
		String.fromCharCode(311, 303,  32),
		String.fromCharCode(311, 302,  32),
		String.fromCharCode(311, 301,  32),
		String.fromCharCode(311, 300,  32),
		String.fromCharCode(312,  32,  32),
		String.fromCharCode(313,  32,  32),
		String.fromCharCode(313,  32, 304),
		String.fromCharCode(313,  32, 303),
		String.fromCharCode(313,  32, 302),
		String.fromCharCode(313,  32, 301),
		String.fromCharCode(313,  32, 300),
		String.fromCharCode(313, 304,  32),
		String.fromCharCode(313, 303,  32),
		String.fromCharCode(313, 302,  32),
		String.fromCharCode(313, 301,  32),
		String.fromCharCode(313, 300,  32),
		String.fromCharCode(314,  32,  32),
		String.fromCharCode(314,  32, 304),
		String.fromCharCode(314,  32, 303),
		String.fromCharCode(314,  32, 302),
		String.fromCharCode(314,  32, 301),
		String.fromCharCode(314,  32, 300),
		String.fromCharCode(314, 304,  32),
		String.fromCharCode(314, 303,  32),
		String.fromCharCode(314, 302,  32),
		String.fromCharCode(314, 301,  32),
		String.fromCharCode(314, 300,  32),
		String.fromCharCode(314, 300, 304),
		String.fromCharCode(314, 300, 303),
		String.fromCharCode(314, 300, 302),
		String.fromCharCode(314, 300, 301),
		String.fromCharCode(314, 300, 300),
		String.fromCharCode(314, 305,  32),
		String.fromCharCode(314, 306,  32),
		String.fromCharCode(314, 307,  32),
		String.fromCharCode(314, 308,  32),
		String.fromCharCode(314, 308, 304),
		String.fromCharCode(314, 308, 303),
		String.fromCharCode(314, 308, 302),
		String.fromCharCode(314, 308, 301),
		String.fromCharCode(314, 308, 300),
		String.fromCharCode(314, 309,  32),
		String.fromCharCode(314, 310,  32),
		String.fromCharCode(314, 311,  32),
		String.fromCharCode(314, 311, 304),
		String.fromCharCode(314, 311, 303),
		String.fromCharCode(314, 311, 302),
		String.fromCharCode(314, 311, 301),
		String.fromCharCode(314, 311, 300),
		String.fromCharCode(314, 312,  32),
		String.fromCharCode(314, 313,  32),
		String.fromCharCode(314, 313, 304),
		String.fromCharCode(314, 313, 303),
		String.fromCharCode(314, 313, 302),
		String.fromCharCode(314, 313, 301),
		String.fromCharCode(314, 313, 300),
		String.fromCharCode(314, 314,  32),
		String.fromCharCode(314, 314, 304),
		String.fromCharCode(314, 314, 303),
		String.fromCharCode(314, 314, 302),
		String.fromCharCode(314, 314, 301),
		String.fromCharCode(314, 314, 300),
		String.fromCharCode(314, 314, 305),
		String.fromCharCode(314, 314, 306),
		String.fromCharCode(314, 314, 307),
		String.fromCharCode(314, 314, 308),
		String.fromCharCode(314, 314, 309),
		String.fromCharCode(314, 314, 310),
		String.fromCharCode(314, 314, 311),
		String.fromCharCode(314, 314, 312),
		String.fromCharCode(314, 314, 313),
		String.fromCharCode(314, 314, 314)
	];
	
	
	var dotmatrix09 = new DotMatrix("dotmatrixins09");

	dotmatrix09.CODE_SEG_TABLE[200] = [0x01, 0x01, 0x01, 0x01, 0x01];
	dotmatrix09.CODE_SEG_TABLE[201] = [0x02, 0x02, 0x02, 0x02, 0x02];
	dotmatrix09.CODE_SEG_TABLE[202] = [0x04, 0x04, 0x04, 0x04, 0x04];
	dotmatrix09.CODE_SEG_TABLE[203] = [0x08, 0x08, 0x08, 0x08, 0x08];
	dotmatrix09.CODE_SEG_TABLE[204] = [0x10, 0x10, 0x10, 0x10, 0x10];
	dotmatrix09.CODE_SEG_TABLE[205] = [0x20, 0x20, 0x20, 0x20, 0x20];
	dotmatrix09.CODE_SEG_TABLE[206] = [0x41, 0x41, 0x41, 0x41, 0x41];
	dotmatrix09.CODE_SEG_TABLE[207] = [0x42, 0x42, 0x42, 0x42, 0x42];
	dotmatrix09.CODE_SEG_TABLE[208] = [0x44, 0x44, 0x44, 0x44, 0x44];
	dotmatrix09.CODE_SEG_TABLE[209] = [0x48, 0x48, 0x48, 0x48, 0x48];
	dotmatrix09.CODE_SEG_TABLE[210] = [0x50, 0x50, 0x50, 0x50, 0x50];
	dotmatrix09.CODE_SEG_TABLE[211] = [0x60, 0x60, 0x60, 0x60, 0x60];
	dotmatrix09.CODE_SEG_TABLE[212] = [0x61, 0x61, 0x61, 0x61, 0x61];
	dotmatrix09.CODE_SEG_TABLE[213] = [0x62, 0x62, 0x62, 0x62, 0x62];
	dotmatrix09.CODE_SEG_TABLE[214] = [0x64, 0x64, 0x64, 0x64, 0x64];
	dotmatrix09.CODE_SEG_TABLE[215] = [0x68, 0x68, 0x68, 0x68, 0x68];
	dotmatrix09.CODE_SEG_TABLE[216] = [0x70, 0x70, 0x70, 0x70, 0x70];
	dotmatrix09.CODE_SEG_TABLE[217] = [0x71, 0x71, 0x71, 0x71, 0x71];
	dotmatrix09.CODE_SEG_TABLE[218] = [0x72, 0x72, 0x72, 0x72, 0x72];
	dotmatrix09.CODE_SEG_TABLE[219] = [0x74, 0x74, 0x74, 0x74, 0x74];
	dotmatrix09.CODE_SEG_TABLE[220] = [0x78, 0x78, 0x78, 0x78, 0x78];
	dotmatrix09.CODE_SEG_TABLE[221] = [0x79, 0x79, 0x79, 0x79, 0x79];
	dotmatrix09.CODE_SEG_TABLE[222] = [0x7A, 0x7A, 0x7A, 0x7A, 0x7A];
	dotmatrix09.CODE_SEG_TABLE[223] = [0x7C, 0x7C, 0x7C, 0x7C, 0x7C];
	dotmatrix09.CODE_SEG_TABLE[224] = [0x7D, 0x7D, 0x7D, 0x7D, 0x7D];
	dotmatrix09.CODE_SEG_TABLE[225] = [0x7E, 0x7E, 0x7E, 0x7E, 0x7E];
	dotmatrix09.CODE_SEG_TABLE[226] = [0x7F, 0x7F, 0x7F, 0x7F, 0x7F];

	dotmatrix09.CODE_SEG_TABLE[300] = [0x7F, 0x00, 0x00, 0x00, 0x00];
	dotmatrix09.CODE_SEG_TABLE[301] = [0x00, 0x7F, 0x00, 0x00, 0x00];
	dotmatrix09.CODE_SEG_TABLE[302] = [0x00, 0x00, 0x7F, 0x00, 0x00];
	dotmatrix09.CODE_SEG_TABLE[303] = [0x00, 0x00, 0x00, 0x7F, 0x00];
	dotmatrix09.CODE_SEG_TABLE[304] = [0x00, 0x00, 0x00, 0x00, 0x7F];
	dotmatrix09.CODE_SEG_TABLE[305] = [0x7F, 0x00, 0x00, 0x00, 0x7F];
	dotmatrix09.CODE_SEG_TABLE[306] = [0x7F, 0x00, 0x00, 0x7F, 0x00];
	dotmatrix09.CODE_SEG_TABLE[307] = [0x7F, 0x00, 0x7F, 0x00, 0x00];
	dotmatrix09.CODE_SEG_TABLE[308] = [0x7F, 0x7F, 0x00, 0x00, 0x00];
	dotmatrix09.CODE_SEG_TABLE[309] = [0x7F, 0x7F, 0x00, 0x00, 0x7F];
	dotmatrix09.CODE_SEG_TABLE[310] = [0x7F, 0x7F, 0x00, 0x7F, 0x00];
	dotmatrix09.CODE_SEG_TABLE[311] = [0x7F, 0x7F, 0x7F, 0x00, 0x00];
	dotmatrix09.CODE_SEG_TABLE[312] = [0x7F, 0x7F, 0x7F, 0x00, 0x7F];
	dotmatrix09.CODE_SEG_TABLE[313] = [0x7F, 0x7F, 0x7F, 0x7F, 0x00];
	dotmatrix09.CODE_SEG_TABLE[314] = [0x7F, 0x7F, 0x7F, 0x7F, 0x7F];

	dotmatrix09.draw({value : "   ", colorOn : "rainbow"});

	setInterval(function(){
		dotmatrix09.changeValue(STRS[index++]);
		if (index >= STRS.length) {
			index = 0;
		}
	} , 50);
})();
</script>

Pocket
LINEで送る

ドットマトリクスを表示するJavaScriptライブラリ『dot-matrix.js』をリリースしました” への7件のコメント

  1. 使わせていただいております。
    バグかと思うのですが、draw()メソッドでのオプション指定をvalueのみで行った場合、changeValueメソッドでの表示の書き換えで要素を取得できないとエラーがでてしまいます。colorOn等を指定してdrawすると、こちらのエラーはでません。

    • もふもふさん

      使っていただいている方がいるとは!
      嬉しい限りです。

      バグの連絡、ありがとうございます。
      教えていただいたバグは、後で確認してみます。
      使っていただけるんならちゃんと気合入れて作らないといけないですね。

      差し支えなければどんな用途に使っているか教えていただけると嬉しいです。

  2. すいません。自己解決しました
    オプションパラメータの問題ではなく、ターゲットとなるdivなどの要素に空白や行が入ってるとdraw後、
    changeValue時に
    「Uncaught TypeError: Cannot read property ‘childNodes’ of undefined
    at DotMatrix.changeValue (dot-matrix.js:249)
    at :1:4」
    なんてエラーが出てました。なのでインスタンス作成後targetで得られる要素のinnerHTML=” としてあらかじめ潰し、その後は問題なく動いております。
    便利に使わせていただいてます。ありがとうございました。

    • ターゲットとなるdivなどの要素に空白や行が入ってると…

      ほんとうですね。
      divの子要素はライブラリで上書きしちゃう前提で良さそうなので、子要素はライブラリ側で消すようにしました。
      あわせて気になる個所を直してGitHubにPushしときました。

      アーチェリータイマー、格好良いです。
      何にでも使えるように作ったつもりではありますが、思ってもみない分野でした。
      教えてくださりありがとうございました。

  3. まだ細かい調整やバグが残ってますが。
    組み込んだバージョンで更新しました。
    アーチェリーやってない人には、意味が分からないかも知れませんが( ˘ω˘; )

    左下のタイマー設定ボタン押して出るダイアログで色々設定します。右下のでっかいタイマーボタンで決定。

    念願のトーナメントタイマーはダイアログ右のメダルアイコンのボタンで切り替わります。ミクスドやチームのタイマー動作はややこしいので、市販タイマーでも対応してない物が多いのですが、個人的に画期的な物が作れました。( ˙▿˙ )/

    • これは格好いい!格好いい一部に使っていただいて嬉しい限りです。
      アーチェリーはちょっと見たことがある程度ですが、このアプリの使い方の雰囲気はわかりました。
      iPadやタブレットPCがあればどこへでも持っていけますし、活躍しそうですね。

もふもふ へ返信する コメントをキャンセル

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

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