RealtimeVisualisationADXL345/plot_3gAcc_from_websocket_xyz.html at main · STRATOS-ROBOTICS/RealtimeVisualisationADXL345 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!-- ref: https://github.com/dannyvai/plotly_websocket_example -->
<html>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    ws = new WebSocket("ws://192.168.11.85:8866")
    //ws = new WebSocket("ws://192.168.11.65:12345/send_graph")
    var request_data_interval

	var dps_xy = [];
    var dps_xz = [];
    var dps_yz = [];
    var dataLength = 30;
    var chart

    ws.onopen = function()
    {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        chart_xy = new CanvasJS.Chart("chartContainer_xy", {
            title :{ text: "Dynamic Data of 3G-Accelerometer" },
            axisX: { title: "x", minimum: -2,maximum: 2},
            axisY: { title: "y", minimum: -2,maximum: 2},
            data: [{
				color: "Green",
                type: "spline",
				name: "xy",
                showInLegend: true,
                dataPoints: dps_xy
            }]
        });

		chart_xz = new CanvasJS.Chart("chartContainer_xz", {
            title :{ text: "Dynamic Data of 3G-Accelerometer" },
            axisX: { title: "x", minimum: -2,maximum: 2},
            axisY: { title: "z", minimum: -2,maximum: 2},
            data: [{
				color: "Blue",
                type: "spline",
				name: "xz",
                showInLegend: true,
                dataPoints: dps_xz
            }]
        });

		chart_yz = new CanvasJS.Chart("chartContainer_yz", {
            title :{ text: "Dynamic Data of 3G-Accelerometer" },
            axisX: { title: "y", minimum: -2,maximum: 2},
            axisY: { title: "z", minimum: -2,maximum: 2},
            data: [{
				color: "Red",
                type: "spline",
				name: "yz",
                showInLegend: true,
                dataPoints: dps_yz
            }]
        });
		// 500 : millsec
        request_data_interval = window.setInterval(requestData, 50);

    };

    ws.onmessage = function (evt)
    {
        var received_msg = evt.data;
        //console.log(received_msg)
        data = JSON.parse(evt.data);
        //console.log(data)

		dps_xy.push({x: data.x, y:data.y})
        dps_xz.push({x: data.x, y:data.z})
        dps_yz.push({x: data.y, y:data.z})

        if (dps_xy.length > dataLength) {
            dps_xy.shift();
            dps_xz.shift();
            dps_yz.shift();
        }

		chart_xy.render();
        chart_xz.render();
		chart_yz.render();


    };

    ws.onclose = function()
    {
      // websocket is closed.
      window.clearInterval(request_data_interval)
    };

    function requestData()
    {
        ws.send("get-data");
    }


</script>
<body>
<div id="container">
	<div id="chartContainer_xy" style="height: 370px; width: 30%; float: left; margin:0 auto;"></div>
	<div id="chartContainer_yz" style="height: 370px; width: 30%; float: right; margin:0 auto;"></div>
	<div id="chartContainer_xz" style="height: 370px; width: 30%; float: center; margin:0 auto;"></div>
</div>

</body>
</html>