PointCloud Updates (8f38d65e) · Commits · Zane Safi Mroue / ObjectDetectionVSLAM

app.js

0 → 100644

+72 −0

Original line number	Diff line number	Diff line
		async function fetchImageAndObjects() {
		try {
		const response = await fetch('http://127.0.0.1:5000/getImageAndObjects');
		if (!response.ok) {
		throw new Error('Failed to fetch image and objects');
		}
		const data = await response.json();
		displayImageAndObjects(data.imageUrl, data.objects);
		} catch (error) {
		console.error(error);
		}
		}

		function displayImageAndObjects(imageUrl, objects) {
		const imageContainer = document.getElementById('imageContainer');
		const objectsContainer = document.getElementById('objectsContainer');

		// Create an image element
		const imageElement = document.createElement('img');
		imageElement.src = "/Users/sam/Documents/Documents/BU/EC504/FinalProjFrontEnd/keyframe.png";
		imageElement.alt = 'Image';
		imageContainer.appendChild(imageElement);

		// Create a list for objects
		const objectsList = document.createElement('ul');
		objects.forEach(object => {
		const objectButton = document.createElement('button');
		objectButton.textContent = object;
		// Add event listener to each button
		objectButton.addEventListener('click', () => {
		// You can define what happens when the button is clicked
		drawPointCloud(object);
		});
		const objectItem = document.createElement('li');
		objectItem.appendChild(objectButton);
		objectsList.appendChild(objectItem);
		});

		// Append objects list to the objects container
		objectsContainer.appendChild(objectsList);
		}


		// selecting loading div
		const loader = document.querySelector("#loading");

		// showing loading
		function displayLoading() {
		loader.classList.add("display");
		}

		// hiding loading
		function hideLoading() {
		loader.classList.remove("display");
		}

		async function startWorkflow(){
		displayLoading();
		try {
		const response = await fetch('http://127.0.0.1:5000/runProcess');
		if (!response.ok) {
		throw new Error('Failed to fetch image and objects');
		}
		const data = await response;
		console.log(data);
		hideLoading();
		} catch (error) {
		console.error(error);
		}
		}

		fetchImageAndObjects();
		No newline at end of file

index.html

+14 −2

Original line number	Diff line number	Diff line
		@@ -10,8 +10,20 @@
		</head>

		<body>
		<input id="drawPC" type="button" value="Receive PointCloud" onclick="drawPointCloud();" />
		<div class="container">
		<div class="image-container" id="imageContainer">
		<!-- Placeholder for image -->
		</div>
		<div class="objects-container" id="objectsContainer">
		<!-- Placeholder for Object List-->
		</div>
		</div>
		<input id="process" type="button" value="Start Workflow" onClick="startWorkflow();"/>
		<input id="drawPC" type="button" value="Show Point Cloud" onclick="drawPointCloud();" />
		<div id="loading"></div>

		<script src="pointCloud.js"></script>
		<script src="app.js"></script>
		</body>

		</html>

main.css

+58 −3

Original line number	Diff line number	Diff line
		html {
		height: 100%;
		overflow: hidden;
		}

		body {
		margin: 10px;
		overflow: hidden;
		}
		canvas {
		display: block;
		}

		body {
		font-family: Arial, sans-serif;
		margin: 20px;
		}

		.container {
		display: flex;
		justify-content: space-between;
		}

		.image-container {
		flex: 1;
		margin-right: 20px;
		}

		.objects-container {
		flex: 1;
		}

		img {
		max-width: 100%;
		height: auto;
		}

		ul {
		list-style-type: none;
		padding-left: 0;
		}

		li {
		margin-bottom: 5px;
		}

		/* creating css loader */

		#loading {
		width: 2rem;
		height: 2rem;
		border: 5px solid #f3f3f3;
		border-top: 6px solid #9c41f2;
		border-radius: 100%;
		margin: auto;
		visibility: hidden;
		animation: spin 1s infinite linear;
		}
		#loading.display {
		visibility: visible;
		}
		@keyframes spin {
		from {
		transform: rotate(0deg);
		}
		to {
		transform: rotate(360deg);
		}
		}

pointCloud.js

+87 −38

Original line number	Diff line number	Diff line
		function drawPointCloud() {

		async function drawPointCloud(object) {
		var button = document.getElementById("drawPC");
		button.style.display = 'none';

		// Load your CSV file
		fetch('extractedPoints.csv')
		.then(response => response.text())
		.then(csvText => {
		let pointCloudData = parseCSVToPointCloud(csvText);
		await fetch('http://127.0.0.1:5000/getJSON')
		.then(response => response.json())
		.then(responseText => {
		let pointCloudData = parseJSONToPointCloud(responseText, object);

		// Use three.js to render the point cloud
		let scene = new THREE.Scene();
		@@ -18,9 +16,10 @@ function drawPointCloud() {

		// Create a buffer geometry and add the point cloud data
		let geometry = new THREE.BufferGeometry();
		geometry.setAttribute('position', new THREE.Float32BufferAttribute(pointCloudData, 3));
		geometry.setAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(pointCloudData.positions), 3));
		geometry.setAttribute('color', new THREE.Float32BufferAttribute(new Float32Array(pointCloudData.colors), 3));

		let material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.01 });
		let material = new THREE.PointsMaterial({ vertexColors: true, size: 0.005 });

		let pointCloud = new THREE.Points(geometry, material);
		scene.add(pointCloud);
		@@ -31,26 +30,52 @@ function drawPointCloud() {
		let angleY = 0;

		// Handle user interaction for rotation
		document.addEventListener("mousedown", (event) => {
		document.addEventListener("mousemove", handleMouseMove);
		document.addEventListener("mouseup", () => {
		document.removeEventListener("mousemove", handleMouseMove);
		let isDragging = false;
		let previousMousePosition = {
		x: 0,
		y: 0
		};

		// Add event listeners to renderer's DOM element
		renderer.domElement.addEventListener("mousedown", (event) => {
		isDragging = true;
		previousMousePosition = {
		x: event.clientX,
		y: event.clientY
		};
		});

		function handleMouseMove(event) {
		angleY += event.movementX * 0.01;
		angleX += event.movementY * 0.01;
		renderer.domElement.addEventListener("mousemove", (event) => {
		if (isDragging) {
		let deltaX = event.clientX - previousMousePosition.x;
		let deltaY = event.clientY - previousMousePosition.y;

		angleY += deltaX * 0.01;
		angleX += deltaY * 0.01;

		pointCloud.rotation.y = angleY;
		pointCloud.rotation.x = angleX;

		previousMousePosition = {
		x: event.clientX,
		y: event.clientY
		};

		renderer.render(scene, camera);
		}
		});

		renderer.domElement.addEventListener("mouseup", () => {
		isDragging = false;
		});

		let zoomFactor = 1; // Initial zoom level

		const zoomSensitivity = 0.01; // Adjust zoom sensitivity as needed

		document.addEventListener("wheel", (event) => {
		renderer.domElement.addEventListener("wheel", (event) => {
		event.preventDefault();

		zoomFactor += event.deltaY * zoomSensitivity;
		zoomFactor = Math.max(0.1, zoomFactor); // Enforce minimum zoom level
		camera.position.z = camera.initialPosition.z / zoomFactor;
		@@ -66,28 +91,52 @@ function drawPointCloud() {

		animate();

		function parseCSVToPointCloud(csvText) {
		// Initialize an array to store point cloud data
		let pointCloudData = [];

		let lines = csvText.split('\n');
		for (let line of lines) {
		let values = line.split(',');

		let x = parseFloat(values[0]);
		let y = parseFloat(values[1]);
		let z = parseFloat(values[2]);
		function parseJSONToPointCloud(jsonObject, target) {
		// Initialize point cloud data
		let positions = [];
		let colors = [];

		// Check if the object name exists in the JSON
		if (target in jsonObject \|\| target == null) {

		for (let objectKey in jsonObject) {
		let object = jsonObject[objectKey];

		// Loop through each coordinate in the object
		for (let i = 0; i < object.length; i++) {
		let coordinate = object[i];

		// Extract x, y, z values
		let x = coordinate[0];
		let y = coordinate[1];
		let z = coordinate[2];
		let r,g,b;

		if(objectKey == target){
		console.log(target);
		r = 1; // Red component
		g = 0; // Green component
		b = 0; // Blue component
		} else {
		r = 1;
		g = 1;
		b = 1;
		}

		// Check if values are valid numbers
		if (!isNaN(x) && !isNaN(y) && !isNaN(z)) {
		pointCloudData.push(x, y, z);
		// Push to positions list
		positions.push(x, y, z );
		colors.push(r,g,b);
		}
		}

		} else {
		console.error(`Object '${object}' not found in JSON.`);
		}

		return new Float32Array(pointCloudData);
		return { positions: positions, colors: colors };
		}
		})
		.catch(error => {
		console.error('Error loading CSV file:', error);
		console.error('Error loading JSON:', error);
		});
		}