gianpiero/indexSimple.html

## indexSimple.html
<!DOCTYPE html>
<html lang="en">

<!--
(c) 2005-2019 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 - Simple</title>
</head>
<body>
  <h2>Latest Shape</h2>
  <h3>
    <pre>
    Shape: <p style="display:inline" id="shapetype"></p>
    x: <p style="display:inline" id="x"></p>
    y: <p style="display:inline" id="y"></p>
    shapesize: <p style="display:inline" id="shapesize"></p>
    color: <p style="display:inline" id="color"></p></pre>
  </h3>


  <script src="/socket.io/socket.io.js"></script>


<script>
  const socket = io.connect('http://127.0.0.1:7400');
  var sendValue = function() {
     const shape_size_to_send = document.getElementById("shapesize_to_send").value;
     socket.emit('outdata', shape_size_to_send)
  }
</script>


<p>
<input type="text" id="shapesize_to_send" value="42"/>
<input type="button" id="send_button" value="sent to send value above" onclick="sendValue()"/>
</p>


  <script>
    var updateShape = function (data) {
      const x = document.getElementById('x');
      const y = document.getElementById('y');
      const shapesize = document.getElementById('shapesize');
      const color = document.getElementById('color');

      x.innerHTML = data.x;
      y.innerHTML = data.y;
      shapesize.innerHTML = data.shapesize
      color.innerHTML = data.color
    }
    //MOVED ABOVE:const socket = io.connect('http://127.0.0.1:7400');
    const shapetype = document.getElementById('shapetype');

    socket.on('square', function (data) {
      shapetype.innerHTML = 'Square'
      updateShape(data)
    });
    socket.on('circle', function (data) {
      shapetype.innerHTML = 'Circle'
      updateShape(data)
    });
    socket.on('triangle', function (data) {
      shapetype.innerHTML = 'Triangle'
      updateShape(data)
    });
  </script>
</body>
</html>

## reader_websocket.js
/******************************************************************************
* (c) 2005-2019 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.             *
******************************************************************************/

const http = require('http')
const fs = require('fs')
const rti = require('rticonnextdds-connector')
const socketsio = require('socket.io')
const path = require('path')
const fullpath = path.join(__dirname, '/../ShapeExample.xml')

// Create the HTTP server (and configure it to serve the requested visualisation)
const server = http.createServer(function (req, res) {
  if (req.url === '/simple') {
    fs.readFile(path.join(__dirname, 'indexSimple.html'), (error, data) => {
      if (error) {
        console.log('Error: ' + error)
        throw new Error(error)
      } else {
        res.writeHead(200, { 'Content-Type': 'text/html' })
        res.end(data, 'utf-8')
      }
    })
  } else if (req.url === '/maps') {
    fs.readFile(path.join(__dirname, 'indexMaps.html'), (error, data) => {
      if (error) {
        console.log('Error: ' + error)
        throw new Error(error)
      } else {
        res.writeHead(200, { 'Content-Type': 'text/html' })
        res.end(data, 'utf-8')
      }
    })
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' })
    res.write("Select your visualisation: <a href='simple'>simple</a> or <a href='maps'>maps</a>")
    res.end()
  }
}).listen(7400, '127.0.0.1')
console.log('Server running at http://127.0.0.1:7400/')

// Create the DDS entities required for this example - a reader of Triangle, Circle
// and Square (all under the same participant).
const connector = new rti.Connector('MyParticipantLibrary::MyParticipant', fullpath)
const io = socketsio(server)
// Create an array of each input which we want to receive data on, and its associated
// topic name. We will emit the topic name from the io object.
const inputs = [
  { input: connector.getInput('MySubscriber::MySquareReader'), topic: 'square' }
]

const output = connector.getOutput('MyPublisher::MySquareWriter')


io.on('connection', (socket) => {
  socket.on('outdata', (msg) => {
    console.log('message: ' + msg);
    output.instance.setNumber('shapesize',parseFloat(msg));
    output.instance.set('color',"RED");
    output.write()
  });
});

connector.on('on_data_available', () => {
  // We have received data on one of the inputs within this connector
  // Iterate through each one, checking if it has any valid data
  inputs.forEach(element => {
    element.input.take()
    for (const sample of element.input.samples.validDataIter) {
      io.sockets.emit(element.topic, sample.getJson())
    }
  })
})
	<!DOCTYPE html>
	<html lang="en">

	<!--
	(c) 2005-2019 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 - Simple</title>
	</head>
	<body>
	<h2>Latest Shape</h2>
	<h3>
	<pre>
	Shape: <p style="display:inline" id="shapetype"></p>
	x: <p style="display:inline" id="x"></p>
	y: <p style="display:inline" id="y"></p>
	shapesize: <p style="display:inline" id="shapesize"></p>
	color: <p style="display:inline" id="color"></p></pre>
	</h3>


	<script src="/socket.io/socket.io.js"></script>



	<script>
	const socket = io.connect('http://127.0.0.1:7400');
	var sendValue = function() {
	const shape_size_to_send = document.getElementById("shapesize_to_send").value;
	socket.emit('outdata', shape_size_to_send)
	}
	</script>


	<p>
	<input type="text" id="shapesize_to_send" value="42"/>
	<input type="button" id="send_button" value="sent to send value above" onclick="sendValue()"/>
	</p>





	<script>
	var updateShape = function (data) {
	const x = document.getElementById('x');
	const y = document.getElementById('y');
	const shapesize = document.getElementById('shapesize');
	const color = document.getElementById('color');

	x.innerHTML = data.x;
	y.innerHTML = data.y;
	shapesize.innerHTML = data.shapesize
	color.innerHTML = data.color
	}
	//MOVED ABOVE:const socket = io.connect('http://127.0.0.1:7400');
	const shapetype = document.getElementById('shapetype');

	socket.on('square', function (data) {
	shapetype.innerHTML = 'Square'
	updateShape(data)
	});
	socket.on('circle', function (data) {
	shapetype.innerHTML = 'Circle'
	updateShape(data)
	});
	socket.on('triangle', function (data) {
	shapetype.innerHTML = 'Triangle'
	updateShape(data)
	});
	</script>
	</body>
	</html>
	/******************************************************************************
	* (c) 2005-2019 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. *
	******************************************************************************/

	const http = require('http')
	const fs = require('fs')
	const rti = require('rticonnextdds-connector')
	const socketsio = require('socket.io')
	const path = require('path')
	const fullpath = path.join(__dirname, '/../ShapeExample.xml')

	// Create the HTTP server (and configure it to serve the requested visualisation)
	const server = http.createServer(function (req, res) {
	if (req.url === '/simple') {
	fs.readFile(path.join(__dirname, 'indexSimple.html'), (error, data) => {
	if (error) {
	console.log('Error: ' + error)
	throw new Error(error)
	} else {
	res.writeHead(200, { 'Content-Type': 'text/html' })
	res.end(data, 'utf-8')
	}
	})
	} else if (req.url === '/maps') {
	fs.readFile(path.join(__dirname, 'indexMaps.html'), (error, data) => {
	if (error) {
	console.log('Error: ' + error)
	throw new Error(error)
	} else {
	res.writeHead(200, { 'Content-Type': 'text/html' })
	res.end(data, 'utf-8')
	}
	})
	} else {
	res.writeHead(200, { 'Content-Type': 'text/html' })
	res.write("Select your visualisation: <a href='simple'>simple</a> or <a href='maps'>maps</a>")
	res.end()
	}
	}).listen(7400, '127.0.0.1')
	console.log('Server running at http://127.0.0.1:7400/')

	// Create the DDS entities required for this example - a reader of Triangle, Circle
	// and Square (all under the same participant).
	const connector = new rti.Connector('MyParticipantLibrary::MyParticipant', fullpath)
	const io = socketsio(server)
	// Create an array of each input which we want to receive data on, and its associated
	// topic name. We will emit the topic name from the io object.
	const inputs = [
	{ input: connector.getInput('MySubscriber::MySquareReader'), topic: 'square' }
	]

	const output = connector.getOutput('MyPublisher::MySquareWriter')


	io.on('connection', (socket) => {
	socket.on('outdata', (msg) => {
	console.log('message: ' + msg);
	output.instance.setNumber('shapesize',parseFloat(msg));
	output.instance.set('color',"RED");
	output.write()
	});
	});

	connector.on('on_data_available', () => {
	// We have received data on one of the inputs within this connector
	// Iterate through each one, checking if it has any valid data
	inputs.forEach(element => {
	element.input.take()
	for (const sample of element.input.samples.validDataIter) {
	io.sockets.emit(element.topic, sample.getJson())
	}
	})
	})