Commit c21772de authored by Samuel John Gulinello's avatar Samuel John Gulinello Committed by Rohan Kumar
Browse files

clean gui

parent 05296d0c

src/main/java/top/BackendJava.java

+1 −3
Original line number Diff line number Diff line
@@ -3,7 +3,6 @@ package top; 
import object_detection.ObjectDetector;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.*;
@@ -14,7 +13,6 @@ import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; 
import java.io.FileNotFoundException;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;



@SpringBootApplication
@@ -30,7 +28,7 @@ public class BackendJava { 
        }

        @RequestMapping("/")

        public String index(){

            return "html/index";

            return "inde";

        }



        @RequestMapping("/runProcess")

src/main/resources/templates/html/index.html

+25 −21
Original line number Diff line number Diff line
@@ -4,25 +4,29 @@ 
<head>

    <meta charset="UTF-8">

    <title>VSlam</title>

        <link rel="stylesheet" href="../style/main.css">

    <link rel="stylesheet" href="main.css">

    <!-- Include three.js -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

</head>



<body>

        <div class="container">

    <p>Visual Simultaneous Localization and Mapping (VSLAM) is the process of taking camera feed, as well as its position, and building a map of the current local world, specifically using visual input. This project uses this process, and builds upon it by also tracking objects within a frame. In this comes two problems: object detection, and then subsequent mapping and tracking of objects within a 3D space. For more information go <a href="https://agile.bu.edu/gitlab/ec504/ec504_projects/group8/-/blob/master/README.md?ref_type=heads">here</a></p>

    <h3>Press the button below to start the workflow and view the output</h3>

    <input id="process" type="button" value="Start Workflow" onClick="startWorkflow();"/>

    <div id="loading"></div>



    <div class="container" id="resultContainer">

        <div class="image-container" id="imageContainer">

            <!-- Placeholder for image -->

        </div>

        <div class="objects-container" id="objectsContainer">

            <h4>Select An Object To View Point Cloud With That Object Highlighted</h4>

            <!-- 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="../js/pointCloud.js"></script>

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

    <!-- <input id="drawPC" type="button" value="Show Point Cloud" onclick="drawPointCloud();" /> -->

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

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

</body>



</html>

src/main/resources/templates/js/app.js

+9 −1
Original line number Diff line number Diff line
@@ -14,6 +14,7 @@ async function fetchImageAndObjects() { 
function displayImageAndObjects(imageUrl, objects) {

    const imageContainer = document.getElementById('imageContainer');

    const objectsContainer = document.getElementById('objectsContainer');

    const container = document.getElementById('resultContainer');



    // Create an image element

    const imageElement = document.createElement('img');
@@ -38,6 +39,8 @@ function displayImageAndObjects(imageUrl, objects) { 


    // Append objects list to the objects container

    objectsContainer.appendChild(objectsList);



    container.style.visibility = "visible";

}
@@ -67,6 +70,11 @@ async function startWorkflow(){ 
    } catch (error) {

        console.error(error);

    }

<<<<<<< HEAD:src/main/resources/templates/js/app.js

}



// fetchImageAndObjects();

=======

    fetchImageAndObjects();

}

>>>>>>> b0120ce (clean gui):app.js

src/main/resources/templates/js/pointCloud.js

+4 −0
Original line number Diff line number Diff line 
async function drawPointCloud(object) {

<<<<<<< HEAD:src/main/resources/templates/js/pointCloud.js

  var button = document.getElementById("drawPC");

  button.style.display = 'none';



  await fetch('http://127.0.0.1:5555/getJSON')

=======

  await fetch('http://127.0.0.1:5000/getJSON')

>>>>>>> b0120ce (clean gui):pointCloud.js

    .then(response => response.json())

    .then(responseText => {

      let pointCloudData = parseJSONToPointCloud(responseText, object);

src/main/resources/templates/style/main.css

+5 −0
Original line number Diff line number Diff line
@@ -14,6 +14,11 @@ body { 
  margin: 20px;

}



#resultContainer

{

  visibility: hidden;

}



.container {

  display: flex;

  justify-content: space-between;