CanSatTelemetry/index.html at master · JJendryka/CanSatTelemetry · 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
<!DOCTYPE html>
<html>

<head>
    <title>CanSat Telemetry</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <div id="temp1" style="width:600px;height:250px;"></div>
    <div id="lon" style="width:600px;height:250px;"></div>
    <script>
        temp1 = document.getElementById('temp1');
        Plotly.plot(temp1, [{ x: [], y: [] }])
        lon = document.getElementById('lon');
        Plotly.plot(lon, [{ x: [], y: [] }])

        vars = {
            "TEMP": {
                "timestamp": [],
                "temp1": [],
                "temp2": [],
                "temp3": [],
                "temp4": [],
                "pressure": [],
                "vbat": [],
                "humid": []
            },
            "GPS": {
                "timestamp": [],
                "hdop": [],
                "hour": [],
                "minute": [],
                "second": [],
                "lat": [],
                "lon": [],
                "height": [],
            },
            "AIR": {
                "timestamp": [],
                "millis": [],
                "deviation": [],
                "range": [],
            },
            "ACC": {
                "timestamp": [],
                "accx": [],
                "accy": [],
                "accz": [],
                "gyrx": [],
                "gyry": [],
                "gyrz": [],
            },
            "RSSI": {
                "timestamp": [],
                "rssi": [],
            }
        }

        var ws = new WebSocket("ws://127.0.0.1:25565/")
        ws.onmessage = function (event) {
            packet = JSON.parse(event.data)
            if (packet["type"] in vars) {
                Object.keys(vars[packet["type"]]).forEach(function (k) {
                    vars[packet["type"]][k].push(packet[k])
                    if (!(document.getElementById(k) == null)) {
                        Plotly.extendTraces(document.getElementById(k), { x: [[packet["timestamp"]]], y: [[packet[k]]] }, [0])
                    }
                })
                // switch (packet["type"]) {
                //     case "TEMP":
                //         console.log([[packet["temp1"]], [packet["temp2"]], [packet["temp3"]], [packet["temp4"]]])
                //         Plotly.extendTraces(document.getElementById("temp"), { x: [[packet["timestamp"]]], y: [[packet["temp1"]], [packet["temp2"]], [packet["temp3"]], [packet["temp4"]]] }, [0, 1, 2, 3])
                // }
            }
        }


        // var ws = new WebSocket("ws://127.0.0.1:25565/"),
        //     messages = document.createElement('ul');
        // ws.onmessage = function (event) {
        //     var messages = document.getElementsByTagName('ul')[0],
        //         message = document.createElement('li'),
        //         content = document.createTextNode(event.data);
        //     message.appendChild(content);
        //     messages.appendChild(message);
        // };
        // document.body.appendChild(messages);
    </script>
</body>

</html>