Merge pull request #25 from TheParadox20/main

add map

CONTRIBUTION.md

@@ -31,3 +31,32 @@ This project uses [conventional commits](https://www.conventionalcommits.org/en/
 ## Merging Pull Requests
 
 Once a PR is in its final state it needs to be merged into the upstream master branch. For that please `DO NOT` use the Github merge button! But merge it yourself on the command line. Reason is that we want to hvae a clean history. Before pushing the changes to upstream master make sure that all individual commits have been `squashed` into a single one with a commit message.
+
+# Github Container Registry (ghcr)
+
+The docker image is hosted on <a href="https://github.com/nakujaproject/N2-Avionics-BaseStation/pkgs/container/n2-avionics-basestation">ghcr.io</a> container registry
+
+
+## Push to ghcr
+
+First <a href="https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry#authenticating-to-the-container-registry">authenticate</a> docker to ghcr using a token obtained from <a href="https://github.com/settings/tokens">github settings</a>
+
+`export CR_PAT=YOUR_TOKEN`
+
+`echo $CR_PAT | docker login ghcr.io -u USERNAME --password-stdin`
+
+While in the cloned folder build the docker
+
+`docker build . -t ghcr.io/nakujaproject/n2-avionics-basestation:latest`
+
+If there is an already built image, tag image using image ID
+
+`docker tag <imageID> ghcr.io/nakujaproject/n2-avionics-basestation:latest`
+
+Finally push the image
+
+`docker push ghcr.io/nakujaproject/n2-avionics-basestation:latest`
+
+For changes to reflect in running containers, shutdown running containers bound to port 3000 and run
+
+`docker-compose up --build`

README.md

@@ -114,7 +114,7 @@ This project provides the following `environment variables`
 | SERVER_URL | ws://192.168.4.2:3000 |
 | INFLUXDB_USER | nakuja |
 | INFLUXDB_PASSWORD | 987654321 |
-| DOCKER_CLIENT_IMAGE   | ghcr.io/nakujaproject/n2-avionics-basestation |
+| DOCKER_CLIENT_IMAGE   | ghcr.io/nakujaproject/n2-avionics-basestation:latest |
 
 The `default` environment variables can be `overwritten` using an environment file named `.env` placed in the same directory as the `docker-compose.yaml` file.
 

components/Map.jsx

@@ -0,0 +1,24 @@
+import React, { useRef, useEffect,useState } from "react";
+import mapboxgl from "mapbox-gl";
+
+export default function Map() {
+  let mapContainer = useRef(null);
+  //jkuat ipic coordinates (lat,lon) -1.0953775626377544, 37.01223403257954
+  let [lng, setLng] = useState(37.01223403257954);
+  let [lat, setLat] = useState(-1.0953775626377544);
+
+  useEffect(() => {
+    mapboxgl.accessToken = "pk.eyJ1IjoidGhlcGFyYWRveDIwIiwiYSI6ImNsZHdlMnpyMTA2bGUzbnBob2Jld2l3NmUifQ.zrAEdfZdTfrWr9yvSuu9Xg";
+    let map = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: "mapbox://styles/mapbox/streets-v11",
+      center: [lng, lat],
+      zoom: 17
+    });
+
+    return () => map.remove();
+  }, []);
+
+  return <div ref={mapContainer} style={{ width: "100%", height: "90%" }} />;
+};
+

components/Video.js

@@ -1,11 +1,13 @@
 import React, { useRef, useEffect, useState } from 'react';
 import Image from 'next/image';
 import gsap from 'gsap';
+import Map from './Map';
 
 function Video({ url }) {
 	console.log('video', url);
 	const image = useRef();
 	const [error, setError] = useState(false);
+	let [stream,setStream] = useState(false);
 
 	useEffect(() => {
 		if (image.current) {
@@ -22,7 +24,11 @@ function Video({ url }) {
 
 	return (
 		<>
-			{error ? (
+			<div className='choice'>
+				<button id={stream?'':'active'} onClick={(e)=>{setStream(false)}}>Map</button>
+				<button id={stream?'active':''} onClick={(e)=>{setStream(true)}}>Live Stream</button>
+			</div>
+			{stream ? (
 				<div className="w-full h-[297px] md:h-[603px] lg:h-[354px] bg-black flex justify-center items-center">
 					<div ref={image}>
 						<Image
@@ -33,20 +39,9 @@ function Video({ url }) {
 						/>
 					</div>
 				</div>
-			) : (
-				<Image
-					alt="stream"
-					src={url}
-					width={800}
-					height={600}
-					layout="responsive"
-					priority
-					unoptimized
-					placeholder="blur"
-					blurDataURL="/placeholder.jpg"
-					onError={() => setError(true)}
-				/>
-			)}
+			) :
+			<Map/>
+			}
 		</>
 	);
 }