Displaying Real-time Sensor Data in the Browser with SignalR and ChartJS

2020-08-07T01:40:45+01:00

Did you find a way to use the sensor data within a game?

2020-08-08T14:43:34+01:00

Not as yet, no; all the data is there though, just a matter of finding time!

2020-09-17T02:20:33+01:00

This project seems soo cool! Thank you for sharing! I got a decent rowing machin, but the workout computer is garbage And doesn’t even work, I am playing with the idea of making my own computer. I would love to do something similar with what you have done and aim to do, I especially love the idea of having a game on it because I tend to get bored on workouts. What if you did a game similar to the fish game in the concept two rower?

https://www.concept2.com/service/monitors/pm5/how-to-use/fish-game

LikeLike

2020-09-17T06:30:44+01:00

Thanks! I hadn’t seen that fish game, it’s definitely a fun idea for a game option.

LikeLike

	public void ConfigureServices(IServiceCollection services)
	{
	// Define a writer that saves my data to disk
	var folderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData),
	"rower");

	services.AddSingleton<ISampleWriter>(svc => new SampleWriter(folderPath, "samples"));

	// Keep my machine state as a singleton
	services.AddSingleton<IMachineState, MachineState>();

	services.AddControllersWithViews()
	.AddNewtonsoftJson();
	services.AddRazorPages();

	// Add signalr services
	services.AddSignalR();
	}

	public class FeedHub : Hub
	{
	private readonly IMachineState machineState;
	private readonly ISampleWriter sampleWriter;

	public FeedHub(IMachineState machineState, ISampleWriter sampleWriter)
	{
	this.machineState = machineState;
	this.sampleWriter = sampleWriter;
	}

	public void ResetCount()
	{
	// Reset the state, and start a new data file
	machineState.ZeroCount();
	sampleWriter.StartNewFile();
	}
	}

	public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
	{
	//
	// Omitted standard content for brevity...
	//

	app.UseSignalR(cfg => cfg.MapHub<FeedHub>("/feed"));
	}

	public class DataController : Controller
	{
	private readonly IMachineState machineState;
	private readonly ISampleWriter sampleWriter;
	private readonly IHubContext<FeedHub> feedHub;

	public DataController(IMachineState machineState, ISampleWriter sampleWriter, IHubContext<FeedHub> feedHub)
	{
	this.machineState = machineState;
	this.sampleWriter = sampleWriter;
	this.feedHub = feedHub;
	}

	[HttpPost]
	public async Task<ActionResult> ProvideReading(uint milliseconds, double speed, int count)
	{
	// Update our machine state.
	machineState.UpdateMachineState(milliseconds, speed, count);

	// Write the sample to file (our sample writer) and update all clients
	// Wait for them both to finish.
	await Task.WhenAll(
	sampleWriter.ProvideSample(machineState.LastSample, machineState.Speed, machineState.Count),
	feedHub.Clients.All.SendAsync("newData",
	machineState.LastSample.ToString("o"),
	machineState.Speed,
	machineState.Count)
	);

	return StatusCode(200);
	}
	}

	@page
	<html>
	<head>
	</head>
	<body>
	<div class="container">

	<div class="lblSpeed text lbl">Speed:</div>
	<div class="valSpeed text" id="currentSpeed"><!-- speed goes here --></div>

	<div class="lblCount text lbl">Count:</div>
	<div class="valCount text" id="currentCount"><!-- stroke count goes here --></div>

	<div class="btnContainer">
	<button id="reset">Reset Count</button>
	</div>

	<div class="chartContainer">
	<!-- I'm going to render my chart in this canvas -->
	<canvas id="chartCanvas"></canvas>
	</div>
	</div>

	<script src="~/lib/signalr/dist/browser/signalr.js"></script>
	<script src="~/js/site.js"></script>
	</body>

	</html>

	"use strict";

	// Define my connection (note the /feed address to specify the hub)
	var connection = new signalR.HubConnectionBuilder().withUrl("/feed").build();

	// Get the elements I need
	var speedValue = document.getElementById("currentSpeed");
	var countValue = document.getElementById("currentCount");
	var resetButton = document.getElementById("reset");

	window.onload = function () {

	// Start the SignalR connection
	connection.start().then(function () {
	console.log("Connected");
	}).catch(function (err) {
	return console.error(err.toString());
	});

	resetButton.addEventListener("click", function () {
	// When someone clicks the reset button, this
	// will call the ResetCount method in my FeedHub.
	connection.invoke("ResetCount");
	});
	};

	// This callback is going to fire every time I get new data.
	connection.on("newData", function (time, speed, count) {

	speedValue.innerText = speed;
	countValue.innerText = count;

	});

	window.onload = function () {
	var ctx = document.getElementById('chartCanvas').getContext('2d');

	window.myChart = new Chart(ctx, {
	type: 'line',
	data: {
	datasets: [{
	label: 'Speed',
	data: []
	}]
	},
	options: {
	scales: {
	xAxes: [{
	type: 'realtime',
	delay: 0,
	// 20 seconds of data
	duration: 20000
	}],
	yAxes: [{
	ticks: {
	suggestedMin: 0,
	suggestedMax: 50
	}
	}]
	}
	}
	});

	// The other signalr setup is still here...
	}

	connection.on("newData", function (time, speed, count) {

	// This subtract causes the data to be placed
	// in the centre of the chart as it arrives,
	// which I personally think looks better...
	var dateValue = moment(time).subtract(5, 'seconds');

	speedValue.innerText = speed;
	countValue.innerText = count;

	// append the new data to the existing chart data
	myChart.data.datasets[0].data.push({
	x: dateValue,
	y: speed
	});

	// update chart datasets keeping the current animation
	myChart.update({
	preservation: true
	});
	});

Pushing Data to the Browser

Setting up SignalR

Sending Data to the Client

Browser

Displaying the Chart

Share this:

Related

4 replies on “Displaying Real-time Sensor Data in the Browser with SignalR and ChartJS”

Leave a comment Cancel reply