質問編集履歴

3

誤字脱字の修正

2021/12/28 06:42

投稿

sunstar
sunstar

スコア1

test CHANGED
File without changes
test CHANGED
@@ -48,11 +48,11 @@
48
48
 
49
49
 
50
50
 
51
- 目標としてはラズパイとM5Stackなどの外部端末を使ってスマートウッチのようなリアルタイムでセンサの値をグラフ化してApache上で表示させる機能を実装したいです。
51
+ 目標としてはラズパイとM5Stackなどの外部端末を使ってスマートウッチのようなリアルタイムでセンサの値をグラフ化してApache上で表示させる機能を実装したいです。
52
52
 
53
53
  また、使用するシチュエーションとして外で使えるようにしたいため、ローカル環境で動かすことを考えています。
54
54
 
55
- 後、ラズパイのhostapdでアクセスポイントにしているためスマホなどでも同様な画面が表示できるようにする予定です。
55
+ 後、ラズパイのhostapdでアクセスポイントにしているためスマホなどでラズパイに接続しても同様な画面が表示できるようにする予定です。
56
56
 
57
57
 
58
58
 

2

最終目標の提示

2021/12/28 06:42

投稿

sunstar
sunstar

スコア1

test CHANGED
File without changes
test CHANGED
@@ -48,6 +48,14 @@
48
48
 
49
49
 
50
50
 
51
+ 目標としてはラズパイとM5Stackなどの外部端末を使ってスマートウオッチのようなリアルタイムでセンサの値をグラフ化してApache上で表示させる機能を実装したいです。
52
+
53
+ また、使用するシチュエーションとして外で使えるようにしたいため、ローカル環境で動かすことを考えています。
54
+
55
+ 後、ラズパイのhostapdでアクセスポイントにしているためスマホなどでも同様な画面が表示できるようにする予定です。
56
+
57
+
58
+
51
59
  やりたいこととして
52
60
 
53
61
  ①外部端末からMQTTデータ(数値)をmosquittoでPublish(送信)

1

ソースコードの提示, 説明の簡略化

2021/12/28 06:39

投稿

sunstar
sunstar

スコア1

test CHANGED
File without changes
test CHANGED
@@ -35,3 +35,183 @@
35
35
 
36
36
 
37
37
  よろしくお願いします。
38
+
39
+
40
+
41
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
42
+
43
+
44
+
45
+ ご指摘がありましたのでソースコードを提示させていただきました。
46
+
47
+ 内容も変にややこしくしてしまい申し訳ありません。
48
+
49
+
50
+
51
+ やりたいこととして
52
+
53
+ ①外部端末からMQTTデータ(数値)をmosquittoでPublish(送信)
54
+
55
+ ②Apache2からhtmlファイルを開く
56
+
57
+ ③htmlファイルの横軸をリアルタイムで動かす
58
+
59
+ ④リアルタイムで動いているグラフにmqttで受信したデータを縦軸の数値として折れ線グラフを表示する。
60
+
61
+
62
+
63
+ このようなシステムを作成したいです。
64
+
65
+ できれば使用するパッケージなどは変更せずにできるとありがたいです。
66
+
67
+
68
+
69
+ ```
70
+
71
+ <!DOCTYPE html>
72
+
73
+ <html lang="en">
74
+
75
+ <head>
76
+
77
+ <meta charset="utf-8" />
78
+
79
+ <title>リアルタイムなグラフ描画</title>
80
+
81
+ <script src="moment-with-locales.min.js"></script>
82
+
83
+ <script src="Chart.js"></script>
84
+
85
+ <script src="chartjs-plugin-streaming.min.js"></script>
86
+
87
+ <script src="mqtt.min.js"></script>
88
+
89
+
90
+
91
+ </head>
92
+
93
+ <body>
94
+
95
+ <canvas id="myChart"></canvas>
96
+
97
+ <script>
98
+
99
+ const MQTTURL = "?";
100
+
101
+ const TOPIC = "home/";
102
+
103
+
104
+
105
+ let client = mqtt.connect(MQTTURL, {
106
+
107
+ clientId: "Browser-" + Math.floor(Math.random() * 100), // ID Example: "Browser-23"
108
+
109
+ });
110
+
111
+
112
+
113
+ client.on("connect", function () {
114
+
115
+ client.subscribe("presence", function (err) {
116
+
117
+ if (!err) {
118
+
119
+ console.log("接続");
120
+
121
+ client.subscribe(TOPIC);
122
+
123
+ } else {
124
+
125
+ console.log("接続エラー");
126
+
127
+ }
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+ let chart = new Chart(ctx, {
136
+
137
+ type: "line",
138
+
139
+ data: {
140
+
141
+ datasets: [
142
+
143
+ {
144
+
145
+ data: [],
146
+
147
+ },
148
+
149
+ {
150
+
151
+ data: [],
152
+
153
+ },
154
+
155
+ ],
156
+
157
+ },
158
+
159
+ options: {
160
+
161
+ scales: {
162
+
163
+ xAxes: [
164
+
165
+ {
166
+
167
+ type: "realtime",
168
+
169
+ realtime: {
170
+
171
+ delay: 2000,
172
+
173
+ },
174
+
175
+ },
176
+
177
+ ],
178
+
179
+ },
180
+
181
+ },
182
+
183
+ });
184
+
185
+
186
+
187
+ client.on("message", function (topic, message) {
188
+
189
+ console.log(message.toString());
190
+
191
+
192
+
193
+ chart.data.datasets[0].data.push({
194
+
195
+ x: Date.now(),
196
+
197
+ y: message.toString(),
198
+
199
+ });
200
+
201
+
202
+
203
+ chart.update({
204
+
205
+ preservation: true,
206
+
207
+ });
208
+
209
+ });
210
+
211
+ </script>
212
+
213
+ </body>
214
+
215
+ </html>
216
+
217
+ ```