-
Notifications
You must be signed in to change notification settings - Fork 0
/
client.html
119 lines (104 loc) · 3.2 KB
/
client.html
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
110
111
112
113
114
115
116
117
118
119
<head>
<link rel="stylesheet" href="canvas.css">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.js" type="text/javascript"></script>
<script type="text/paperscript" canvas="myCanvas">
var count = 10;
var circleGroup = new Group();
var dest = [];
var cent = [];
var topics = [];
var circle = new Path.Circle({
center: [0, 0],
radius: 30,
strokeColor: 'black'
});
var symbol = new Symbol(circle);
var maxPoint = new Point(440, 440);
function createObjects() {
for (var i = 0; i < count; i++) {
var destination = maxPoint * Point.random();
dest.push(destination);
var center = Point.random() * maxPoint;
cent.push(center);
var placedSymbol = symbol.place(center);
circleGroup.addChild(placedSymbol);
var name = "object" + i.toString();
topics.push(name);
}
}
var mqtt;
var reconnectTimeout = 2000;
var host = "192.168.56.102";
var port = 8083;
function onFailure(message) {
console.log("Connection attempt to host "+host+" Failed");
setTimeout(MQTTconnect, reconnectTimeout);
}
function senddata(a) {
text = "x = " + circleGroup.children[a].position.x + "; y = " + circleGroup.children[a].position.y;
message = new Paho.MQTT.Message(text.toString());
message.destinationName = topics[a];
mqtt.send(message);
}
function onConnect() {
console.log("Connected");
createObjects();
view.onFrame = function(event) {
for (i = 0; i < count; i++) {
var vector = dest[i] - cent[i];
var time = performance.now();
if (circleGroup.children[i].position.x > 30 && circleGroup.children[i].position.x < 480 && circleGroup.children[i].position.y > 30 && circleGroup.children[i].position.y < 480) {
circleGroup.children[i].position += vector/500;
senddata(i);
} else {
//circleGroup.children[i].removeOnDrag();
dest[i] = maxPoint * Point.random();
vector = dest[i] - maxPoint * Point.random();
circleGroup.children[i].position += vector/500;
senddata(i);
}
time = performance.now() - time;
var obj = { id: i, value: time };
var jsonObj = JSON.stringify(obj);
function sendtime() {
text = obj.value.toPrecision(10);
message = new Paho.MQTT.Message(text.toString());
message.destinationName = "time" + obj.id;
mqtt.send(message);
}
sendtime();
//sendtime(obj, id, value);
//console.log(jsonObj);
/*var url = "http://192.168.56.102:3001/";
$.ajax({
url: url,
type: 'POST',
data: jsonObj,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert(msg);
}
});*/
}
}
}
function MQTTconnect() {
console.log("connecting to " + host + " " + port);
mqtt = new Paho.MQTT.Client(host, port, "clientjs");
var options = {
timeout: 3,
onSuccess: onConnect,
onFailure: onFailure,
};
mqtt.connect(options);
}
MQTTconnect();
</script>
</body>