HTMLファイルに、エラーがないのに、ボールが画面に表示されないのを解決したい

前提・実現したいこと

ブラウザとマイコンの接続を行い、mbed側のプログラムからセンサーの値データを送り、ある条件の加速度になると画面にボールの色が変わり、角速度により、ボールが縦と横に移動する、これらをHTMLを利用して、ブラウザに表示させる

発生している問題・エラーメッセージ

ブラウザのデヘロッパーツールを利用しているが、エラーはでない。しかし、背景は表示される　が、ボールが画面に表示されない。

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3<title>TestPage</title>
4<head>
5	<!-- 文字コードの設定(UTF-8) -->
6	<meta charset="UTF-8">
7	<script>
8		// WebSocketでバイナリデータを送信する
9		function send(cmd) 
10		{
11			// 符号なし8ビット変数の配列(要素数は１)を用意
12			var binData = new Uint8Array(1);
13			// 送信したいコマンド(バイナリ）をセット
14			binData[0] = cmd & 0xFF;
15			// WebSocketでバイナリデータの配列(要素数は１)を送信
16			ws.send(binData.buffer);
17		}
18		// WebSocketでの通信を開始する
19		var ServerIP = location.hostname;	// サーバが動作しているマシンのIPアドレスになる
20		var ws = new WebSocket('ws://' + ServerIP + ':3000/robo');
21		// バイナリデータの受信ができるようにする
22		ws.binaryType = 'arraybuffer';
23        
24		// 回線が切断された時の処理    
25		ws.onclose = function(event) 
26		{
27			document.getElementById("messages").innerHTML += '回線を閉じました';
28		}
29
30		// データを受信した時の処理
31		ws.onmessage = function (event) 
32		{
33			// データを解析するためのdataViewを生成
34			var recData = new DataView(event.data);
35			// 0番の位置から符号なし8ビットの値を読み出す
36			var cmd = recData.getUint8(0);
37			// 1番の位置から符号なし16ビットの値をリトルエンディアンとして読み出す
38			//var data = recData.getUint16(1,true); // (recData[2]<<8) | recData[1];
39			// 受信メッセージ表示領域にコマンドとデータを表示
40			//document.getElementById("messages").innerHTML = "cmd:"+cmd+" data:"+data;
41			var count =0;
42			
43			
44			if(cmd == 16)
45			{
46		         var data = recData.getUint16(1,true); //(recData[2]<<8) | recData[1];	
47			     document.getElementById("messages").innerHTML = "PSD:"+data;
48			     
49				 var canvas = document.getElementById("canvas1");
50				 var ctx = canvas.getContext("2d");
51				 ctx.clearRect(0,0,canvas.width, canvas.height);
52				 
53				 ctx.fillStyle = 'rgb(0,255,255)';
54                 ctx.fillRect(0,0,canvas.width, canvas.height);
55
56                 var psdData = data;
57
58
59                 //ctx.beginPath();
60                 //ctx.fillStyle = 'rgb(192,80,77)';
61                 //ctx.arc(400,300,20,0,Math.PI*2,false);
62				 //ctx.fill();
63			}	
64			
65			
66			
67			else if(cmd==17)
68			{
69				 var AccX_I16 = recData.getInt16(1,true); //（2）の処理
70			     var AccX = AccX_I16*9.8*2.0/32768.0;    //(3)の処理
71				 document.getElementById("AccX_Data").innerHTML = "AccX:"+AccX.toFixed(2);
72				 
73				 if(AccX > 100)
74				{
75				    count = 1;
76				}
77				 
78				 if(AccX < -9.2)
79				{
80				    count = 2;
81				}
82			}
83			
84			else if(cmd==18)
85			{
86				 var AccY_I16 = recData.getInt16(1,true); //（2）の処理
87			     var AccY = AccY_I16*9.8*2.0/32768.0;    //(3)の処理
88				 document.getElementById("AccY_Data").innerHTML = "AccY:"+AccY.toFixed(2);
89				 if(AccY > 9.7)
90				{
91				     count = 3;
92                } 
93				
94				if(AccY < -9.2)
95				{
96				     count = 4;
97				}
98			}
99			
100			else if(cmd==20)
101			{
102			     var Gx_I16 = recData.getInt16(1,true);
103				 var Gx = Gx_I16*250.0/32768.0;
104				 document.getElementById("Gx_Data").innerHTML = "Gx:"+Gx.toFixed(2);
105				 
106				if(count==1 || count==2)
107				{
108				 var canvas = document.getElementById("canvas1");
109				 var ctx1 = canvas.getContext("2d");
110				 ctx1.beginPath();
111                 ctx1.fillStyle = 'rgb(0,80,255)';
112				 var Px = 1.3328*Gx + 399.87;
113				 
114				 if(Px < 60)
115				 {
116				     Px = 60;
117			     }
118				 
119				 if(740 < Px)
120				 {
121				     Px = 740;
122				 }
123				  //Py = 300;
124				 ctx1.arc(Px,300,60,0,Math.PI*2,false);
125				 ctx1.fill();
126				 
127				}
128				
129				else if(count = 0)
130				{
131				 var canvas = document.getElementById("canvas1");
132				 var ctx = canvas.getContext("2d");
133				 ctx.beginPath();
134                 ctx.fillStyle = 'rgb(192,80,77)';
135				 ctx.arc(400,300,60,0,Math.PI*2,false);
136				 ctx.fill();
137				 
138				 
139				}
140				
141			}
142			
143            else if(cmd==21)
144            {
145                 var Gy_I16 = recData.getInt16(1,true);
146				 var Gy = Gy_I16*250.0/32768.0;
147				 document.getElementById("Gy_Data").innerHTML = "Gy:"+Gy.toFixed(2);
148				 
149				 if(count==3 || count==4)
150			    {
151				     var canvas = document.getElementById("canvas1");
152				     var ctx2 = canvas.getContext("2d");
153				     ctx2.beginPath();
154                     ctx2.fillStyle = 'rgb(0,255,77)';
155				     var Py = 0.9408*Gy + 299.91;
156					 
157					if(Py < 60)
158					{
159					     Py = 60;
160					}
161				 	
162					if(Py > 540)
163					{
164					     Py = 540;
165					}
166					//Px= 400;
167					ctx2.arc(400,Py,60,0,Math.PI*2,false);
168			        ctx2.fill();
169					
170					
171				}
172				
173				else if(count = 0) 
174				{
175				 var canvas = document.getElementById("canvas1");
176				 var ctx = canvas.getContext("2d");
177				 ctx.beginPath();
178                 ctx.fillStyle = 'rgb(192,80,77)';
179				 ctx.arc(400,300,60,0,Math.PI*2,false);
180				 ctx.fill();
181				 
182				}
183            }
184            //ctx.arc(Px,Py,60,0,Math.PI*2,false);
185			//ctx.fill();
186         count = 0;	
187			
188		}
189		
190	</script>
191</head>
192<body>
193<br>
194<button id="Bt0"  onClick="send(0)">LED1 OFF</button>
195<button id="Bt1"  onClick="send(1)">LED1 ON</button>
196<button id="Bt2"  onClick="send(2)">LED2 OFF</button>
197<button id="Bt3"  onClick="send(3)">LED2 ON</button>
198<button id="Bt4"  onClick="send(4)">LED3 OFF</button>
199<button id="Bt5"  onClick="send(5)">LED3 ON</button>
200<br>
201<button id="Bt_PSD"  onClick="send(16)">PSDデータの受信</button>
202<button id="Bt_AUTO_ON" onClick="send(32)">自動転送開始</button>
203<button id="Bt_AUTO_OFF" onclick="send(64)">自動転送終了</button>
204<br>
205<!-- 受信メッセージ表示用-->
206<textarea name="log" cols="40" rows="2" id="messages"></textarea>
207<br>
208<textarea name="AccX" cols="40" rows="2" id="AccX_Data"></textarea>
209<textarea name="AccY" cols="40" rows="2" id="AccY_Data"></textarea>
210<br>
211<textarea name="log" cols="40" rows="2" id="Gx_Data"></textarea>
212<textarea name="log" cols="40" rows="2" id="Gy_Data"></textarea>
213<br>
214<canvas id = "canvas1" width="800" height="600"></canvas>
215<br><br><br><br>
216</body>
217</html>
218

試したこと

原因を解決するために、ソースコードを試行錯誤したり、様々なサイトで調べた

補足情報（FW/ツールのバージョンなど）

Visualstudio2015
mbed　NXP　LPC1768
MPU6050
Programmer's Notepad

A_kirisaki

2021/01/11 06:29

コンソールの Network タブから Websocket 通信を探してみてください。ちゃんと受信できてますか？

wing

2021/01/11 07:06

返信ありがとうございます。受信はちゃんとできてます。

A_kirisaki

2021/01/11 07:49

innerHTML で出してるメッセージも期待通りに出てます？

wing

2021/01/13 07:51

出てます

行動規範の内容に同意します

回答1件

こんにちは。

当方マイコン側は分からないですが、JSのところどころにあるこのコードの
条件式の書き方が間違っているだけかなと思います。

js
1else if(count = 0)
2{
3    var canvas = document.getElementById("canvas1");
4    var ctx = canvas.getContext("2d");
5    ctx.beginPath();
6    ctx.fillStyle = 'rgb(192,80,77)';
7    ctx.arc(400,300,60,0,Math.PI*2,false);
8    ctx.fill();
9}

挙動確認用コード

https://jsfiddle.net/yg6pq8ku/1/

条件式の中身を検証

js
1console.log(count = 0); // '0'を出力

つまり、条件式は常に偽になるのでここに記述している円を描くコードが実行されないと予想します。

結論

js
1else if (count == 0)

と書いたら想定通りになったりしないでしょうか？

投稿2021/01/13 05:16

編集2021/01/13 05:35

退会済みユーザー

総合スコア0

wing

2021/01/13 08:42

countが0の時の円は表示されました。

退会済みユーザー

2021/01/13 09:36

補足ありがとうございます。そうなると単純にcmdの値が想定外（例えばundefined）でif文で捕まえられていないとかですかね。こんな感じのコードを追加して取りこぼしていないかどうかを確認するとかしか思いつかないです。 ``` } else if (cmd == 21) { ～（略）～ } else { console.log('想定外のcmd値 / cmd=[' + cmd + '], count=[' + count + ']'); } ``` あと質問のソースが正しい場合、cmdが20、21 かつ countが0 の時は円描画のソースは走らないはずなんですが、マイコンと合わせた時のプログラムの仕様でcmd20、21の時に円描画が不要であれば当該部分は削除ですかね。一応、下記URLで確認用のコードを書いてみましたが条件式でelse部の処理が実行されることはなかったんで。 https://jsfiddle.net/0meuho5s/ 自分はこれでギブです。ごめんなさい。

wing

2021/01/13 13:32

ありがとうございました

行動規範の内容に同意します