Skip to content

Commit 3ff0d27

Browse files
samuelraeburnsamuelraeburn
authored
Feature/con 217 (#33)
* Fixed sockets.io example * feature/CON218: Added graph example * Updated example README Co-authored-by: Sam Raeburn <sam@rti.com>
1 parent 9423a0b commit 3ff0d27

3 files changed

Lines changed: 137 additions & 6 deletions

File tree

‎examples/nodejs/web_socket/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
## Example description
44
In this example, we create a simple application which visualises the data DDS data it receives.
55
`reader_websocket.js` listens at [http://127.0.0.1:7400](http://127.0.0.1:7400) for requests
6-
on how it should visualise the data. There are two options:
6+
on how it should visualise the data. There are the following visualisation are available:
77
* simple: Prints the information about the current shape
88
* maps: Prints the received shapes data on a map
9+
* charts: Displays the x-position of thereceived shapes data on a chart
910

1011
## Dependencies
1112
This example requires additional packages:
@@ -21,6 +22,5 @@ publisher.
2122
* Run the web server `node ./reader_websocket.js`
2223
* In a browser, navigate to [http:/localhost:7400](http://127.0.0.1:7400)
2324
* Select how you would like to visualize the data (simple or maps).
24-
* Navigating to [http://localhost:7400/simple](http://localhost:7400/simple) will show the simple visualization and
25-
[http://localhost:7400/maps](http://localhost:7400/maps) will show the maps visualization.
26-
* Note: The simple visualization may not work in the Safari browser.
25+
* Navigating to [http://localhost:7400/simple](http://localhost:7400/simple) will show the simple visualisation, [http://localhost:7400/maps](http://localhost:7400/maps) will show the maps visualisation and [http://localhost:7400/chart](http://localhost:7400/chart) will show the chart visualisation.
26+
* Note: The simple visualizasion may not work in the Safari browser.

‎examples/nodejs/web_socket/indexChart.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<!--
4+
(c) 2020 Copyright, Real-Time Innovations. All rights reserved.
5+
No duplications, whole or partial, manual or electronic, may be made
6+
without express written permission. Any such copies, or revisions thereof,
7+
must display this notice unaltered.
8+
This code contains trade secrets of Real-Time Innovations, Inc.
9+
-->
10+
<head>
11+
<meta charset="utf-8" />
12+
<title>RTI Connector for Javascript Example - Chart</title>
13+
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
14+
<script src="/socket.io/socket.io.js"></script>
15+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
16+
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.0.1/build/ol.js"></script>
17+
</head>
18+
<body>
19+
<!-- Load the D3 library -->
20+
<script src="http://d3js.org/d3.v3.min.js"></script>
21+
<script>
22+
// The number of datapoints to be displayed
23+
var n = 40;
24+
// The dataset to be displayed by the line
25+
var dataset = d3.range(n).map(() => d3.random.normal(0, .2));
26+
27+
var margin = { top: 20, right: 20, bottom: 20, left: 40 },
28+
width = 960 - margin.left - margin.right,
29+
height = 500 - margin.top - margin.bottom;
30+
31+
// Configure the X scale to use the range of use our dataset
32+
var x = d3.scale.linear()
33+
.domain([0, n - 1])
34+
.range([0, width]);
35+
36+
// Configure the Y scale
37+
var y = d3.scale.linear()
38+
.domain([0, 250])
39+
.range([height, 0]);
40+
41+
var line = d3.svg.line()
42+
.x(function(d, i) { return x(i); })
43+
.y(function(d, i) { return y(d); });
44+
45+
var svg = d3.select("body").append("svg")
46+
.attr("width", width + margin.left + margin.right)
47+
.attr("height", height + margin.top + margin.bottom)
48+
.append("g")
49+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
50+
51+
svg.append("defs").append("clipPath")
52+
.attr("id", "clip")
53+
.append("rect")
54+
.attr("width", width)
55+
.attr("height", height);
56+
57+
svg.append("g")
58+
.attr("class", "x axis")
59+
.attr("transform", "translate(0," + y(0) + ")")
60+
.call(d3.svg.axis().scale(x).orient("bottom"));
61+
62+
svg.append("g")
63+
.attr("class", "y axis")
64+
.call(d3.svg.axis().scale(y).orient("left"));
65+
66+
var path = svg.append("g")
67+
.attr("clip-path", "url(#clip)")
68+
.append("path")
69+
.datum(dataset)
70+
.attr("class", "line")
71+
.attr("d", line);
72+
73+
function tick(number) {
74+
// Push a new data point onto the back
75+
dataset.push(number);
76+
// Redraw the line, and slide it to the left
77+
path
78+
.attr("d", line)
79+
.attr("transform", null)
80+
.attr("fill", "none")
81+
.attr("stroke", "steelblue")
82+
.attr("stroke-width", 1.5)
83+
.transition()
84+
.attr("transform", "translate(" + x(-1) + ",0)")
85+
.each("end", null);
86+
// Pop the old data point off the front
87+
dataset.shift();
88+
}
89+
</script>
90+
91+
<h1>Chart D3 Example</h1>
92+
<h2>Current Data</h2>
93+
<p id="topic"></p>
94+
<p id="x-position"></p>
95+
<script src="/socket.io/socket.io.js"></script>
96+
97+
<script>
98+
var socket = io.connect('http://127.0.0.1:7400');
99+
var xPos = document.getElementById('x-position');
100+
var topic = document.getElementById('topic');
101+
socket.on('square', function (data) {
102+
console.log('Got udpate from the server for square');
103+
xPos.innerHTML = data.x
104+
topic.innerHTML = "Square"
105+
tick(data.x);
106+
});
107+
socket.on('triangle', function (data) {
108+
console.log('Got udpate from the server for triangle');
109+
xPos.innerHTML = data.x
110+
topic.innerHTML = "Triangle"
111+
tick(data.x);
112+
});
113+
socket.on('circle', function (data) {
114+
console.log('Got udpate from the server for circle');
115+
xPos.innerHTML = data.x
116+
topic.innerHTML = "Circle"
117+
tick(data.x);
118+
});
119+
</script>
120+
</body>
121+
</html>

‎examples/nodejs/web_socket/reader_websocket.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,19 @@ const server = http.createServer(function (req, res) {
3535
res.end(data, 'utf-8')
3636
}
3737
})
38+
} else if (req.url === '/chart') {
39+
fs.readFile(path.join(__dirname, 'indexChart.html'), (error, data) => {
40+
if (error) {
41+
console.log('Error: ' + error)
42+
throw new Error(error)
43+
} else {
44+
res.writeHead(200, { 'Content-Type': 'text/html' })
45+
res.end(data, 'utf-8')
46+
}
47+
})
3848
} else {
3949
res.writeHead(200, { 'Content-Type': 'text/html' })
40-
res.write("Select your visualisation: <a href='simple'>simple</a> or <a href='maps'>maps</a>")
50+
res.write("Select your visualisation: <a href='simple'>simple</a>, <a href='chart'>chart</a> or <a href='maps'>maps</a>")
4151
res.end()
4252
}
4353
}).listen(7400, '127.0.0.1')
@@ -46,7 +56,7 @@ console.log('Server running at http://127.0.0.1:7400/')
4656
// Create the DDS entities required for this example - a reader of Triangle, Circle
4757
// and Square (all under the same participant).
4858
const connector = new rti.Connector('MyParticipantLibrary::MySubParticipant', fullpath)
49-
const io = socketsio.listen(server)
59+
const io = socketsio(server)
5060
// Create an array of each input which we want to receive data on, and its associated
5161
// topic name. We will emit the topic name from the io object.
5262
const inputs = [

0 commit comments

Comments
 (0)
⚡