Embedded Motor Engine Speed Temperature Measurement Dashboard C++, .Net, React Project

Project Overview (motor-dashboard, motor-speed-backend, motor-speed-frontend)

This project demonstrates a complete workflow for real-time machine data monitoring, from a native C++ engine (mock or real, via DLL) to a .NET backend (with SignalR and EF Core) to a modern React frontend. It is designed for learning, prototyping, and as a reference for real-world industrial or IoT dashboards.

Features

Real-time motor readings with SignalR
Animated 3D gear and shadow
Grouped reading list by date with color-coded cards
Notification sidebar for highest/lowest temp and RPM
Real-time charts with Recharts
Unit & integration tests (backend: xUnit, frontend: React Testing Library)
Nginx config for routing, HTTPS/SSL
Dockerized backend, frontend, and Nginx
Responsive, modern UI

Project Overview
Architecture & Technology Stack
Project Structure
How It Works: C++ → C# → React
Backend: .NET, C++ DLL, and Real-World Integration
Frontend: React, Vite, Tailwind, shadcn/ui
Real-Time Communication with SignalR
Database & Persistence (EF Core)
API Endpoints & Data Flow
Running the Project
Testing
Docker Usage
Features & Functionality
Extending & Reusing Components
Real-World Practical Notes
Keywords
Conclusion

Architecture & Technology Stack

C++ (EngineMock): Native library simulating motor data (speed, temperature).
.NET 8+ (ASP.NET Core): Backend API, SignalR hub, P/Invoke to C++ DLL, EF Core for persistence.
React (Vite): Frontend UI, real-time charts, notifications, settings, CSV export.
SignalR: Real-time WebSocket-style updates from backend to frontend.
Entity Framework Core: Database ORM for storing readings.
Tailwind CSS + shadcn/ui: Modern, responsive, and accessible UI.
Docker & Nginx: Containerized deployment, HTTPS, and routing.

Project Structure

motor-dashboard/
├── motor-speed-backend/
│   ├── EngineMock/           # C++ mock engine (DLL/SO/DYLIB)
│   ├── Server/
│   │   ├── MotorServer/      # ASP.NET Core backend
│   │   │   ├── Controllers/  # API endpoints
│   │   │   ├── Data/         # EF Core DbContext
│   │   │   ├── Hubs/         # SignalR hub
│   │   │   ├── Models/       # Data models
│   │   │   ├── Services/     # EngineService (P/Invoke)
│   │   │   ├── Migrations/   # EF Core migrations
│   │   │   ├── ...           # Config, Program.cs, etc.
│   │   └── Tests/            # Backend tests
│   └── Tests/                # Integration/unit tests
├── motor-speed-frontend/
│   ├── src/
│   │   ├── components/       # React UI components
│   │   ├── lib/              # Utilities (date, etc.)
│   │   ├── services/         # API/auth helpers
│   │   ├── types/            # TypeScript types
│   │   └── ...               # App, main, etc.
│   ├── public/               # Static assets
│   ├── ...                   # Config, Dockerfile, etc.
├── nginx.conf                # Nginx config for HTTPS/routing
└── README.md                 # This file

How It Works: C++ → C# → React

C++ EngineMock:
- Simulates a real motor controller, exporting GetMotorSpeed() and GetMotorTemperature() via a shared library (DLL/SO/DYLIB).
- In a real project, this could be replaced with a library that reads from CAN, USB, EtherCAT, or other industrial protocols.
- Example:
```
extern "C" {
    int GetMotorSpeed();
    int GetMotorTemperature();
}
```
.NET Backend:
- Uses P/Invoke ([DllImport]) to call the C++ functions directly from C#.
- EngineService samples the engine, stores readings in SQLite (via EF Core), and broadcasts new readings to all clients using SignalR.
- API endpoints allow fetching all readings, sampling new data, and health checks.
- Example:
```
[DllImport(LIB_NAME)]
public static extern int GetMotorSpeed();
```
React Frontend:
- Connects to the backend SignalR hub for real-time updates.
- Fetches historical data via REST API (using axios).
- Displays readings in charts, lists, and notifications, with CSV export and settings.

Backend: .NET, C++ DLL, and Real-World Integration

C++ Mock Engine

EngineMock/motor_engine.cpp and motor_engine.hpp define and export mock functions.
Compiled as a shared library (libmotor_engine.dylib, .so, or .dll).

P/Invoke in C#

EngineService.cs uses [DllImport] to call C++ functions.

Example:

[DllImport(LIB_NAME)]
public static extern int GetMotorSpeed();

Real-World Integration

Replace EngineMock with your real C++/C library for CAN/USB/EtherCAT.
Use P/Invoke for direct calls, or C++/CLI wrappers for more complex interop.
For advanced scenarios, use a message queue, gRPC, or a microservice for hardware abstraction.

Entity Framework Core

AppDbContext manages the MotorReadings table.
Migrations and schema are managed via EF Core CLI.

SignalR

MotorHub broadcasts new readings to all connected clients in real time.

Frontend: React, Vite, Tailwind, shadcn/ui

Vite for fast dev/build.
React for UI, with functional components and hooks.
Tailwind CSS and shadcn/ui for styling and accessibility.
Recharts for real-time data visualization.
SettingsModal, NotificationSidebar, AnimatedMotor, etc., are reusable components.

Real-Time Communication with SignalR

Backend pushes new readings instantly to all clients via SignalR.
Frontend uses @microsoft/signalr to subscribe and update UI in real time.

Database & Persistence (EF Core)

All readings are stored in SQLite by default (can be swapped for SQL Server, PostgreSQL, etc.).
Migrations ensure schema is up to date.

API Endpoints & Data Flow

GET /api/motor — fetch latest readings
GET /api/motor/sample — trigger a new reading (from C++ engine)
GET /health — health check
GET /swagger/index.html — OpenAPI docs

Frontend uses axios to call these endpoints and SignalR for real-time updates.

Running the Project

Prerequisites

Docker & Docker Compose
Node.js (for frontend dev)
.NET 8+ SDK (for backend dev)
C++ compiler (for building EngineMock)

Local Development

docker-compose up --build

Or run backend and frontend separately:

Backend:

cd motor-speed-backend/Server/MotorServer
dotnet run

Frontend:

cd motor-speed-frontend
npm install
npm run dev

Testing

Backend (xUnit)

Unit and integration tests are in motor-speed-backend/Tests/ and motor-speed-backend/Server/Tests/.

To run all backend tests:

dotnet test motor-speed-backend/Tests/
dotnet test motor-speed-backend/Server/Tests/

Example test (C#):

[Fact]
public async Task Sample_ShouldReturnValidReading() {
    var svc = new EngineService(...);
    var reading = await svc.Sample();
    Assert.InRange(reading.Speed, 800, 3000);
}

Frontend (React Testing Library)

Tests are in motor-speed-frontend/src/components/__tests__/.
To run all frontend tests:
```
cd motor-speed-frontend
npm test
```

Example test (React):

import { render } from '@testing-library/react';
import AnimatedMotor from '../AnimatedMotor';
test('renders without crashing', () => {
  render(<AnimatedMotor rpm={1200} />);
});

Docker Usage

Overview

Both backend and frontend have their own Dockerfile for containerization.
The project uses docker-compose.yml to orchestrate backend, frontend, and Nginx for HTTPS/routing.

Building and Running with Docker Compose

docker-compose up --build

This will:

Build the C++ engine, .NET backend, and React frontend
Start all services and Nginx for HTTPS
Serve the dashboard at https://localhost/ (or as configured)

Backend Dockerfile Example

FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
WORKDIR /app
COPY . .
RUN dotnet build
ENTRYPOINT ["dotnet", "MotorServer.dll"]

Frontend Dockerfile Example

FROM node:20-alpine AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build
EXPOSE 5173
CMD ["npm", "run", "preview"]

Nginx

Handles HTTPS, static file serving, and reverse proxy to backend/frontend.
Self-signed certs for dev in /etc/nginx/certs/ (see nginx.conf)
For production, replace with real certs

Features & Functionality

Real-time motor readings (SignalR)
Animated 3D gear and shadow
Grouped reading list by date, color-coded
Notification sidebar for highest/lowest temp and RPM
Real-time charts (Recharts)
CSV export
Health check endpoint
OpenAPI/Swagger docs
Dark mode toggle
Settings modal (max readings, dark mode)
Responsive, modern UI

Extending & Reusing Components

All React components are modular and reusable.
Backend services and controllers are easily extensible for new endpoints or hardware.
To use in another project, copy the relevant component/service and update types as needed.

Real-World Practical Notes

Hardware Integration: Replace the mock C++ engine with your real hardware library. Use P/Invoke or C++/CLI as needed.
Protocols: For CAN/USB/EtherCAT, use a vendor SDK or open-source stack, and expose a C API for .NET interop.
Security: Add authentication/authorization for production.
Scalability: Swap SQLite for a production DB, use Redis for SignalR backplane if scaling out.

Keywords

C++, C#, .NET, ASP.NET Core, React, Vite, SignalR, WebSocket, EF Core, SQLite, Docker, Tailwind CSS, shadcn/ui, CAN, USB, EtherCAT, P/Invoke, C++/CLI, real-time, dashboard, IoT, industrial, chart, notification, CSV, OpenAPI, Swagger, modular, reusable, microservice, hardware integration

Conclusion

This project is a practical, modern, and extensible template for real-time machine dashboards, bridging native C++ code, .NET backend, and a beautiful React frontend. Use it for learning, prototyping, or as a foundation for your next industrial or IoT project.

Happy coding! 🚀
Thank you!

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
motor-speed-backend		motor-speed-backend
motor-speed-frontend		motor-speed-frontend
.gitignore		.gitignore
Makefile		Makefile
README.md		README.md
docker-compose.yml		docker-compose.yml
nginx.conf		nginx.conf

arnobt78/Embedded-Motor-Engine-Speed-Temperature-Measurement--CPP-DotNet-React

Folders and files

Latest commit

History

Repository files navigation