feat: tailwind, multichart,video (#23)

README.md

@@ -43,7 +43,29 @@ This project depends on `docker` to run `eclipse-mosquitto`, `influxdb2` and `te
 
 2. If you are using macOS, please be sure to follow the steps outlined in [Docker Docs for how to install Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/)
 
-3. If you are using Linux, please be sure to follow the steps outlined in [Docker Docs for how to install Docker Desktop for Linux](https://docs.docker.com/desktop/install/linux-install/)
+3. If you are using Linux, please be sure to follow the steps outlined in Docker Docs for how to install [Docker Engine](https://docs.docker.com/engine/install/ubuntu/) and [Docker Desktop for linux](https://docs.docker.com/desktop/install/linux-install/)
+
+## Docker post-install for linux
+
+1. Create a docker group
+
+    ```bash
+        #!/bin/bash
+    sudo groupadd docker
+    ```
+
+2. Add your user to the `docker` group.
+
+    ```bash
+        #!/bin/bash
+    sudo usermod -aG docker $USER
+    ```
+
+3. Log out and log back in so that your group membership is re-evaluated.
+
+4. Verify that you can run `docker` commands without `sudo`.
+
+5. For more information follow this [link](https://docs.docker.com/engine/install/linux-postinstall/)
 
 ## How to run ?
 

components/Controls.js

@@ -0,0 +1,41 @@
+import { ReadyState } from 'react-use-websocket';
+import React, { useState, useCallback } from 'react';
+
+function Controls({ mode, sendJsonMessage, readyState }) {
+	const [status, setStatus] = useState(false);
+
+	const toggle = useCallback(() => {
+		const data = {
+			mode,
+			status: !status ? 'on' : 'off',
+		};
+		sendJsonMessage(data);
+		setStatus(!status);
+	}, [status, sendJsonMessage, mode]);
+
+	const title = (mode) => {
+		switch (mode) {
+			case 'ignite':
+				return 'Ignition';
+			case 'eject':
+				return 'Ejection';
+			case 'eject2':
+				return 'Ejection2';
+
+			default:
+				break;
+		}
+	};
+
+	return (
+		<button
+			className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent"
+			onClick={toggle}
+			disabled={readyState !== ReadyState.OPEN}
+		>
+			{status ? `Stop ${title(mode)}` : `Start ${title(mode)}`}
+		</button>
+	);
+}
+
+export default Controls;

components/LineChart.js

@@ -25,19 +25,122 @@ ChartJS.register(
 	StreamingPlugin
 );
 
-const LineChart = forwardRef(({ label }, ref) => {
+const LineChart = forwardRef(({ type }, ref) => {
+	let dataset;
+	let ylabel;
+
+	switch (type) {
+		case 'altitude':
+			dataset = [
+				{
+					id: 1,
+					label: 'filtered altitude',
+					backgroundColor: 'rgba(255, 99, 132, 0.5)',
+					borderColor: 'rgb(255, 99, 132)',
+					data: [],
+					borderWidth: 2,
+					pointRadius: 2,
+				},
+				{
+					id: 2,
+					label: 'raw altitude',
+					backgroundColor: 'rgba(54, 162, 235, 0.5)',
+					borderColor: 'rgb(54, 162, 235)',
+					data: [],
+					pointRadius: 2,
+				},
+			];
+
+			ylabel = 'Altitude (m)';
+			break;
+		case 'velocity':
+			dataset = [
+				{
+					id: 1,
+					label: 'filtered velocity',
+					backgroundColor: 'rgba(255, 99, 132, 0.5)',
+					borderColor: 'rgb(255, 99, 132)',
+					data: [],
+				},
+			];
+			ylabel = 'Velocity (m/s)';
+			break;
+		case 'acceleration':
+			dataset = [
+				{
+					id: 1,
+					label: 'filtered acceleration',
+					backgroundColor: 'rgba(255, 99, 132, 0.5)',
+					borderColor: 'rgb(255, 99, 132)',
+					data: [],
+				},
+				{
+					id: 2,
+					label: 'ax',
+					backgroundColor: 'rgba(54, 162, 235, 0.5)',
+					borderColor: 'rgb(54, 162, 235)',
+					data: [],
+				},
+				{
+					id: 3,
+					label: 'ay',
+					borderColor: 'rgb(255,165,0)',
+					backgroundColor: 'rgb(255,165,0,0.1)',
+					data: [],
+				},
+				{
+					id: 4,
+					label: 'az',
+					borderColor: 'rgb(60,186,159)',
+					backgroundColor: 'rgb(60,186,159,0.1)',
+					data: [],
+				},
+			];
+
+			ylabel = `Acceleration`;
+			break;
+		case 'gyroscope':
+			dataset = [
+				{
+					id: 1,
+					label: 'gx',
+					backgroundColor: 'rgba(54, 162, 235, 0.5)',
+					borderColor: 'rgb(54, 162, 235)',
+					data: [],
+				},
+				{
+					id: 2,
+					label: 'gy',
+					borderColor: 'rgb(255,165,0)',
+					backgroundColor: 'rgb(255,165,0,0.1)',
+					data: [],
+				},
+				{
+					id: 3,
+					label: 'gz',
+					borderColor: 'rgb(60,186,159)',
+					backgroundColor: 'rgb(60,186,159,0.1)',
+					data: [],
+				},
+			];
+			ylabel = 'Gyroscope';
+			break;
+
+		default:
+			break;
+	}
+
 	const data = {
-		datasets: [
-			{
-				label: label,
-				backgroundColor: 'rgba(255, 99, 132, 0.5)',
-				borderColor: 'rgb(255, 99, 132)',
-				data: [],
-			},
-		],
+		datasets: dataset,
 	};
 
 	const options = {
+		datasets: {
+			line: {
+				borderWidth: 1,
+				pointRadius: 1,
+			},
+		},
 		scales: {
 			x: {
 				type: 'realtime',
@@ -50,7 +153,7 @@ const LineChart = forwardRef(({ label }, ref) => {
 				},
 				ticks: {
 					font: {
-						size: 15,
+						size: 12,
 						weight: 'bolder',
 					},
 					color: '#000',
@@ -59,7 +162,8 @@ const LineChart = forwardRef(({ label }, ref) => {
 					display: true,
 					text: 'Time',
 					font: {
-						size: 24,
+						size: 18,
+						weight: 'bolder',
 					},
 					color: '#000',
 				},
@@ -74,9 +178,10 @@ const LineChart = forwardRef(({ label }, ref) => {
 				},
 				title: {
 					display: true,
-					text: 'Altitude (m)',
+					text: ylabel,
 					font: {
-						size: 24,
+						size: 18,
+						weight: 'bolder',
 					},
 					color: '#000',
 				},
@@ -85,9 +190,10 @@ const LineChart = forwardRef(({ label }, ref) => {
 		plugins: {
 			legend: {
 				position: 'top',
+				align: 'end',
 			},
 			title: {
-				display: true,
+				display: false,
 				text: 'Telemetry Graph',
 			},
 		},

docker-compose.yaml

@@ -8,7 +8,7 @@ services:
   mosquitto:
     image: eclipse-mosquitto:2.0.14
     ports:
-      - "1883:1883"   
+      - 1883:1883   
     volumes:
       - ./mosquitto.conf:/mosquitto/config/mosquitto.conf 
       - mosquitto-data:/mosquitto/data
@@ -21,7 +21,7 @@ services:
       # Mount for influxdb data directory and configuration
       - influxdb2:/var/lib/influxdb2
     ports:
-      - "8086:8086"
+      - 8086:8086
     environment: 
       # Use these same configurations parameters in your telegraf configuration, mytelegraf.conf.
       - DOCKER_INFLUXDB_INIT_MODE=setup

hooks/useMetrics.js

@@ -6,6 +6,16 @@ export const useMetrics = (lastJsonMessage) => {
 	const [latitude, setLatitude] = useState(0);
 	const [state, setstate] = useState(0);
 	const [timestamp, setTimestamp] = useState(null);
+	const [filteredAcceleration, setFilteredAcceleration] = useState(0);
+	const [filteredAltitude, setFilteredAltitude] = useState(0);
+	const [filteredVelocity, setFilteredVelocity] = useState(0);
+	const [temperature, setTemperature] = useState(0);
+	const [ax, setAx] = useState(0);
+	const [ay, setAy] = useState(0);
+	const [az, setAz] = useState(0);
+	const [gx, setGx] = useState(0);
+	const [gy, setGy] = useState(0);
+	const [gz, setGz] = useState(0);
 
 	useEffect(() => {
 		console.log('useMetrics useEffect');
@@ -23,16 +33,41 @@ export const useMetrics = (lastJsonMessage) => {
 			if (!metrics[0].timestamp) {
 				throw new Error('timestamp in metrics is undefined');
 			}
-			const { altitude, longitude, latitude, state } = metrics[0].fields;
+			const {
+				altitude,
+				longitude,
+				latitude,
+				state,
+				filtered_s,
+				filtered_v,
+				filtered_a,
+				ax,
+				ay,
+				az,
+				gx,
+				gy,
+				gz,
+				temperature,
+			} = metrics[0].fields;
 			const x = metrics[0].timestamp;
 
 			setAltitude(altitude);
 			setLongitude(longitude);
 			setLatitude(latitude);
 			setstate(state);
 			setTimestamp(x);
+			setAx(ax);
+			setAy(ay);
+			setAz(az);
+			setGx(gx);
+			setGy(gy);
+			setGz(gz);
+			setFilteredAcceleration(filtered_a);
+			setFilteredAltitude(filtered_s);
+			setFilteredVelocity(filtered_v);
+			setTemperature(temperature);
 		} catch (error) {
-			console.error('useEffect error', error.message);
+			console.log('useEffect error', error.message);
 		}
 	}, [lastJsonMessage]);
 
@@ -42,5 +77,15 @@ export const useMetrics = (lastJsonMessage) => {
 		longitude,
 		state,
 		timestamp,
+		filteredAcceleration,
+		filteredAltitude,
+		filteredVelocity,
+		temperature,
+		ax,
+		ay,
+		az,
+		gx,
+		gy,
+		gz,
 	};
 };