rticonnextdds-connector
Version:
RTI Connector for JavaScript
122 lines (109 loc) • 4.44 kB
HTML
<html lang="en">
<!--
(c) 2020 Copyright, Real-Time Innovations. All rights reserved.
No duplications, whole or partial, manual or electronic, may be made
without express written permission. Any such copies, or revisions thereof,
must display this notice unaltered.
This code contains trade secrets of Real-Time Innovations, Inc.
-->
<head>
<meta charset="utf-8" />
<title>RTI Connector for Javascript Example - Chart</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.0.1/build/ol.js"></script>
</head>
<body>
<!-- Load the D3 library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// The number of datapoints to be displayed
var n = 40;
// The dataset to be displayed by the line
var dataset = d3.range(n).map(() => d3.random.normal(0, .2));
var margin = { top: 20, right: 20, bottom: 20, left: 40 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Configure the X scale to use the range of use our dataset
var x = d3.scale.linear()
.domain([0, n - 1])
.range([0, width]);
// Configure the Y scale
var y = d3.scale.linear()
.domain([0, 250])
.range([height, 0]);
var line = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y(0) + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(dataset)
.attr("class", "line")
.attr("d", line);
function tick(number) {
// Push a new data point onto the back
dataset.push(number);
// Redraw the line, and slide it to the left
path
.attr("d", line)
.attr("transform", null)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.transition()
.attr("transform", "translate(" + x(-1) + ",0)")
.each("end", null);
// Pop the old data point off the front
dataset.shift();
}
</script>
<h1>Chart D3 Example</h1>
<h2>Current Data</h2>
<p id="topic"></p>
<p id="x-position"></p>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://127.0.0.1:7400');
var xPos = document.getElementById('x-position');
var topic = document.getElementById('topic');
socket.on('square', function (data) {
console.log('Got udpate from the server for square');
xPos.innerHTML = data.x
topic.innerHTML = "Square"
tick(data.x);
});
socket.on('triangle', function (data) {
console.log('Got udpate from the server for triangle');
xPos.innerHTML = data.x
topic.innerHTML = "Triangle"
tick(data.x);
});
socket.on('circle', function (data) {
console.log('Got udpate from the server for circle');
xPos.innerHTML = data.x
topic.innerHTML = "Circle"
tick(data.x);
});
</script>
</body>
</html>