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

Posted on 2015年12月19日 by 広報

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

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

もふもふ 2017年3月27日 11:18 AM より:

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

返信 ↓
- 広報 2017年3月27日 11:45 AM より:
  
  もふもふさん
  
  使っていただいている方がいるとは！
  嬉しい限りです。
  
  バグの連絡、ありがとうございます。
  教えていただいたバグは、後で確認してみます。
  使っていただけるんならちゃんと気合入れて作らないといけないですね。
  
  差し支えなければどんな用途に使っているか教えていただけると嬉しいです。
もふもふ 2017年3月27日 4:58 PM より:

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

返信 ↓
もふもふ 2017年3月27日 5:02 PM より:

ちなみに、
http://masatoarai.github.io/archerytimer/
こちらのアーチェリータイマーを今トーナメント競技に対応できるように改造してる最中で、電光掲示調表示部にこちらのスクリプト使わせていただいてます。（o_ _)ｏ））

返信 ↓
- 広報 2017年3月28日 12:02 AM より:
  
  ターゲットとなるdivなどの要素に空白や行が入ってると…
  
  ほんとうですね。
  divの子要素はライブラリで上書きしちゃう前提で良さそうなので、子要素はライブラリ側で消すようにしました。
  あわせて気になる個所を直してGitHubにPushしときました。
  
  アーチェリータイマー、格好良いです。
  何にでも使えるように作ったつもりではありますが、思ってもみない分野でした。
  教えてくださりありがとうございました。
もふもふ 2017年4月6日 7:14 PM より:

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

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

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

返信 ↓
- 広報 2017年4月6日 10:58 PM より:
  
  これは格好いい！格好いい一部に使っていただいて嬉しい限りです。
  アーチェリーはちょっと見たことがある程度ですが、このアプリの使い方の雰囲気はわかりました。
  iPadやタブレットPCがあればどこへでも持っていけますし、活躍しそうですね。

コメントを残すコメントをキャンセル

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

Twitter	:	risaiku_net
Instagram	:	risaiku_net
Facebook	:	risaikuLLC
App Store	:	risaiku LLC.
Google Play	:	risaiku
LINE STORE	:	リサイク
GitHub	:	risaiku
SlideShare	:	risaiku
YouTube	:	risaiku

次の記事が関連してるかも

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

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル