1 class LogicAnalyzer {
2 constructor( cc, style ) {
3 this.cc = cc;
4
5 this.style = Object.assign( {
6 titleFontSize : 10,
7 commentFontSize : 10,
8 cellHeight : 32,
9 palseHeight : 8,
10 horizontalDiv : 8,
11 horizontalShift : 1500,
12 //top : 0, //利用可
13 //bottom : 0, //利用可
14 }, style );
15 this.etc = new Object();
16 this.etc.title = "JavaScript LOGIC ANALYZER by web6047";
17 cc.font = this.style.titleFontSize + "px''";
18 this.etc.titleX = cc.canvas.width - cc.measureText( this.etc.title ).width - this.style.titleFontSize;
19
20 this.records = new Object();
21 this.backTm = 0;
22 this.frame( 0 );
23 this.stopFlg = false;
24 }
25 hi( name, comment ) {
26 //check.
27 if( ! this.records[ name ] ) this.records[ name ] = new Array();
28 this.records[ name ].push( [ Date.now(), 1, comment ] );
29 }
30 low( name, comment ) {
31 this.records[ name ].push( [ Date.now(), 0, comment ] );
32 }
33 stop() {
34 this.stopFlg = true;
35 this.trig();
36 }
37 frame( tm ) {
38 let diff = tm - this.backTm;
39 this.backTm = tm;
40 // if( ! this.stopFlg ) this.trig();
41 this.draw( this.cc );
42 requestAnimationFrame( this.frame.bind( this ) );
43 }
44 trig() {
45 let endTime = Date.now() + this.style.horizontalShift;
46 this.lines = new Object();
47 for( let name in this.records ) {
48 let record = this.records[ name ];
49 let drawPoints = new Array();
50 //２次元配列 [ [ x, y ], ... ]
51 //x 下記yが起こった時間から現在時刻までの経過時間
52 //y 1:信号の立ち上がり、0:立ち下がり
53 for( let j = 0; j < record.length; j++ ) {
54 let sample = record[ j ];
55 let time = sample[ 0 ];
56 let method = sample[ 1 ];
57 let comment = sample[ 2 ];
58
59 let x = endTime - time;
60
61 //波形にパルスをセット
62 if( method == 1 ) {
63 //立ち上がり
64 drawPoints.push( [ x, 0 ] );
65 drawPoints.push( [ x, 1, comment ] );
66 } else {
67 //立ち下がり
68 //check.　画面左端に来たらパルスを削除予定（null）
69 if( x < 0 ) {
70 record[ j ] = null;
71 record[ j - 1 ] = null;
72 }
73 drawPoints.push( [ x, 1 ] );
74 drawPoints.push( [ x, 0, comment ] );
75 }
76 }
77 //check.　削除実行
78 for( let j = record.length - 1; j >= 0; j-- ) {
79 if( record[ j ] === null ) record.splice( j, 1 );
80 }
81 this.lines[ name ] = drawPoints;
82 }
83 }
84 draw( cc ) {
85 //check.
86 if( ! this.lines ) return;
87 cc.save();
88 let height = ( Object.keys( this.lines ).length + 1) * this.style.cellHeight;
89 let top = 0;
90 //check.
91 if( this.style.top != undefined )
92 top = this.style.top;
93 else if( this.style.bottom != undefined )
94 top = cc.canvas.height - this.style.bottom　-height;
95 cc.translate( 0, top );
96
97 cc.font = this.style.titleFontSize + "px''";
98 cc.fillStyle = "black";
99 cc.fillRect( 0, 0, cc.canvas.width, height );
100 cc.strokeStyle = "lightgray";
101 cc.strokeRect( 0, 0, cc.canvas.width, height );
102
103 cc.fillStyle = "magenta";
104 cc.fillText( this.etc.title, this.etc.titleX, this.style.titleFontSize );
105
106 let i = 0;
107 for( let name in this.lines ) {
108 let drawPoints = this.lines[ name ];
109 cc.beginPath();
110 let gyBase = ( i + 1 ) * this.style.cellHeight;
111 cc.moveTo( 0, gyBase );
112 for( let drawPoint of drawPoints ) {
113 let diff = drawPoint[ 0 ];
114 let hiLow = drawPoint[ 1 ];
115 let comment = drawPoint[ 2 ];
116 let gx = cc.canvas.width - diff / this.style.horizontalDiv;
117 let gy = gyBase - hiLow * this.style.palseHeight;
118 cc.lineTo( gx, gy );
119 if( comment != null ) {
120 cc.save();
121 cc.font = this.style.commentFontSize + "px''";
122 gx = gx - this.style.commentFontSize / 2;
123 cc.fillStyle = "cyan";
124 if( hiLow ) {
125 gy = gyBase - ( this.style.palseHeight + 3 );
126 cc.fillText( "↓" + comment, gx, gy );
127 } else {
128 gy = gyBase + ( this.style.palseHeight + 3 );
129 cc.fillText( "↑" + comment, gx, gy );
130 }
131 cc.restore();
132 }
133 }
134 //画面右端まで描画
135 if( drawPoints.length / 2 % 2 == 1 ) {
136 //記録数が奇数なら、記録の最後はハイ
137 cc.lineTo( cc.canvas.width, gyBase - this.style.palseHeight );
138 } else {
139 //記録数が偶数なら、記録の最後はロー
140 cc.lineTo( cc.canvas.width, gyBase );
141 }
142 cc.strokeStyle = "cyan";
143 cc.stroke();
144
145 cc.fillStyle = "yellow";
146 cc.fillText( name + "↓", 4, gyBase - this.style.titleFontSize * 2 );
147
148 i++;
149 }
150 cc.restore();
151 }
152 }