Loading 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 extractedPoints.csv 0 → 100644 +365 −0 Original line number Diff line number Diff line -0.06900241,-0.3507448,1.033868 -0.5094872,-0.335972,1.037024 -0.0517595,-0.3194826,0.964794 -0.26819,-0.2832867,0.93624 -0.451066,-0.2754324,0.9582117 -0.02466401,-0.2934302,1.022113 0.4340152,-0.2927349,1.012656 -0.4700845,-0.2324494,1.027293 0.05616835,-0.2302022,1.02122 0.3103633,-0.2405539,1.076906 0.3468663,-0.2287515,1.026217 -0.2542701,-0.1819791,0.9472755 0.2602769,-0.2096001,1.085634 0.4181629,-0.1918874,1.018657 0.5108834,-0.1945888,1.10052 0.1607228,-0.1786381,1.092534 0.1154751,-0.1575818,1.033309 0.3628199,-0.1240209,1.042551 0.3392987,-0.1220983,1.065156 0.09428331,-0.09280027,1.005206 -0.4141278,-0.08583868,1.030251 0.18329,-0.09223963,0.997163 0.1716043,-0.08562668,0.958635 -0.1729519,-0.0776499,1.006449 -0.2845822,-0.06999036,0.8611298 0.02044802,-0.05811689,0.9738315 0.01296036,-0.04444205,0.9208867 -0.08239425,-0.03085459,0.9267675 0.04727431,0.008490545,0.8688331 -0.3606437,0.01618071,0.8629293 0.2105094,0.1243638,0.933347 0.231766,0.1069027,0.8321818 -0.1770186,0.139959,0.7958759 0.2364081,0.1642755,0.8707324 0.2360844,0.3081827,0.8830881 -0.4306689,-0.3407795,0.8945921 -0.05465219,-0.3774999,0.96435 -0.2250856,-0.3546759,0.9550002 -0.246262,-0.3290255,0.9545395 -0.2260483,-0.3236364,0.9466397 -0.05509534,-0.3003376,0.9892556 -0.4109164,-0.2374692,0.9288879 -0.5153137,-0.2687777,1.098092 -0.5362918,-0.2719595,1.141981 0.05192059,-0.238798,0.9994154 0.1607298,-0.2088129,1.080495 0.09027376,-0.1664593,1.074121 0.5117261,-0.152272,1.121635 0.3421884,-0.1492289,1.072462 -0.2698344,-0.07390544,0.8396418 0.4053755,-0.07456393,0.9178874 0.0910932,-0.0747536,0.914787 0.1581096,-0.0611611,0.9377224 -0.1005423,-0.06197135,0.9697764 -0.1423956,-0.01718888,0.889078 0.493636,0.2370742,0.998692 -0.2270201,0.1787612,0.7168721 -0.02916331,-0.338412,0.9608698 -0.4426665,-0.2671321,0.982818 0.2466568,-0.2226559,1.124538 0.2462575,-0.2091596,1.095683 0.1003007,-0.08707787,1.01655 0.3871322,-0.08398501,0.9352465 0.1269614,-0.06724115,0.9209728 -0.2694361,-0.01734548,0.8628417 -0.1826763,0.1571379,0.7704211 0.09884058,0.231997,0.947727 -0.3231615,0.2712583,0.827448 -0.03420264,-0.3844759,0.9560074 -0.2257674,-0.3436999,0.9292494 -0.4242442,-0.3174223,0.8753457 0.2805332,-0.1544295,1.103116 0.1366949,-0.01871451,0.8879513 0.4166071,-0.2877659,0.9980846 0.3462467,-0.155378,1.067033 -0.267102,-0.03911924,0.842447 -0.1379147,0.2917985,0.8614042 -0.06394307,-0.3850106,0.9949217 0.2485076,-0.2154702,1.076664 0.3474581,0.2785804,0.973517 0.09086783,-0.05588575,0.9360696 -0.06223369,-0.3731945,0.9987332 -0.3058668,-0.3330749,0.923512 -0.3194951,-0.2781164,0.920142 -0.2412821,-0.2824242,0.9502748 -0.5362516,-0.2704518,1.137176 0.5133331,-0.1986132,1.103809 -0.2407167,-0.0667384,0.9728302 -0.1780017,-0.06392631,0.980948 0.1453963,-0.06234509,0.8963837 0.04186799,-0.05968328,0.9665195 -0.141848,-0.01770822,0.8938537 0.1555232,0.01132735,0.7962826 0.2392749,0.1292011,0.8495147 -0.317225,0.2634278,0.7950491 -0.2358509,-0.2750409,0.9541141 0.4307193,-0.2904671,1.0093 0.3085175,-0.2394926,1.07031 0.3428572,-0.2236946,1.018585 0.2561058,-0.2120067,1.078925 0.425136,-0.2028808,1.035519 0.3169505,-0.171614,1.099244 0.337285,-0.1200175,1.059947 -0.4175623,-0.08743324,1.033202 -0.01069216,-0.085336,1.016277 0.5365584,-0.09633294,1.07562 -0.2464464,-0.06267948,0.9495894 0.009706357,-0.05663859,0.9594213 0.2266814,0.1094883,0.825797 0.2323674,0.1299975,0.835213 -0.1637864,0.1558638,0.8396296 0.2045291,0.2266563,1.024981 -0.2588624,0.2894014,0.8415105 -0.2795627,0.2859771,0.8127716 -0.2434675,-0.3227388,0.9361313 -0.3228565,-0.2760262,0.927058 0.4282402,-0.2952021,1.019851 -0.05229088,-0.2684516,1.003989 0.05750264,-0.242816,1.032476 -0.2550797,-0.1803353,0.9426121 0.349949,-0.1501152,1.077408 0.364328,-0.1230637,1.04259 0.1332736,-0.1001167,1.037352 0.1393238,-0.06769709,0.9166197 0.5090637,-0.06844565,0.9841929 0.1896564,-0.04798145,0.9069208 0.2274647,0.02626145,0.8115273 0.3313511,0.2596697,0.9809458 -0.1559988,0.3005977,0.8606426 -0.06209136,-0.3916617,1.023829 0.2425683,-0.2107174,1.083649 0.11261,-0.1564932,1.030488 -0.1686943,-0.07779373,0.9688949 0.009822373,0.007371004,0.8556352 -0.1761959,0.1407651,0.7920365 0.2307135,0.1612477,0.8564904 -0.2187958,0.2199828,0.9514446 -0.2821191,0.2795953,0.8400663 -0.2233695,-0.3516035,0.9444437 -0.183986,-0.1838907,0.9441056 0.1653828,-0.08678392,0.9655206 0.09907275,-0.05507715,0.935532 -0.05236644,-0.3412952,1.038251 -0.2497024,-0.06357522,0.9638004 0.1918641,-0.05735386,0.9079157 -0.2960039,-0.03725029,0.8480514 0.2565357,0.2127689,0.9803448 0.2046134,0.3036045,0.8512656 0.03959246,-0.1758798,1.083882 0.1312987,-0.1032514,1.035343 0.5097085,-0.0696622,0.9898168 0.1562947,0.01338092,0.8065224 0.3344355,0.2731282,0.9570121 -0.1428414,0.2899679,0.8712013 -0.3221677,0.2686726,0.8178742 0.2018151,0.3004805,0.8637038 -0.3768963,-0.2517308,0.9167308 -0.2087414,-0.259801,0.9773223 -0.02174715,-0.2387529,0.9503756 -0.5200428,-0.2621163,1.092994 -0.1897668,-0.1821947,0.9355006 -0.01251197,-0.08524455,0.9966073 0.4079772,-0.07563928,0.9272817 -0.1815553,-0.06450817,0.9733769 -0.03034927,-0.05313706,0.9594299 0.09135146,-0.05634768,0.9598512 -0.1423813,-0.01816225,0.8952572 0.2114216,0.1216684,0.9267979 0.230729,0.1138304,0.839915 0.5119752,0.2320295,1.020901 -0.2280564,0.180914,0.7241505 0.3478338,0.249103,0.9437129 0.2303768,0.3057928,0.878794 0.4178427,-0.2793739,0.9934466 0.351016,-0.1223374,1.07408 -0.4167723,-0.08709431,1.025605 -0.1677646,0.160184,0.8640101 0.04599537,-0.2336768,1.007575 0.2559456,-0.2103207,1.070717 -0.4705151,-0.118435,1.063128 0.009801613,-0.05670394,0.9605088 0.2668202,0.1792605,0.9468367 0.1585376,-0.06231721,0.9329817 0.1542538,-0.06129301,0.916054 0.04737057,-0.1147366,1.05294 0.1275372,-0.1026819,1.029462 0.4110928,-0.07276425,0.9163254 0.0953429,-0.0555375,0.9642707 0.3036539,0.09963318,0.8840221 -0.06394706,-0.3449335,1.022622 0.3805089,-0.0438611,0.9386814 -0.2595145,-0.1820738,0.9480324 0.3955265,-0.08680294,0.9667431 0.1053762,0.257158,0.9729793 0.3716389,-0.1227333,1.045853 -0.03229201,-0.05399266,0.9556986 0.2029226,-0.04673193,0.9079415 0.2276707,0.11552,0.8404955 0.5159252,0.2306961,1.029338 -0.4180538,-0.2414638,0.9533334 0.2872858,-0.1480609,0.8368129 -0.415727,-0.08602455,1.01799 0.1360853,0.04429527,0.9478176 0.3405285,0.2766038,0.9696857 0.4231883,-0.2898793,1.002351 -0.01174978,-0.08815142,1.027534 -0.3930062,-0.2199768,0.8813173 0.3897037,-0.0882737,0.9498562 0.3420729,0.2749782,0.9672684 -0.1881284,-0.1834696,0.9391624 0.2194189,0.02284092,0.7826742 0.1374939,0.04199801,0.938673 0.008090999,-0.0556135,0.9385412 -0.2001241,0.2012295,0.7873362 -0.004772666,-0.1164431,0.9870591 -0.2473751,-0.06159194,0.9319729 0.0179728,-0.04893986,0.9547012 -0.2558832,-0.1774473,0.9309245 0.352358,-0.1270986,1.037609 0.4715958,-0.06426462,0.9337447 0.09555181,-0.06146855,0.972965 -0.1403598,-0.01817375,0.902211 -0.1527963,0.1036686,0.8422352 0.1976708,-0.05558001,0.930172 0.2343024,0.1149019,0.8521932 -0.3380554,-0.2673729,1.016717 -0.2767066,-0.1807123,0.9499612 0.01201001,-0.05878334,0.9654921 0.4054979,-0.04484414,0.9648999 0.2479243,0.04419627,0.8256484 0.2376407,0.119975,0.8692614 0.4626999,-0.1492064,1.06836 0.005104779,0.2466353,1.040364 0.3535894,-0.2304855,1.043343 0.2760725,-0.1476941,1.105381 -0.2531862,-0.06744567,0.9683442 0.1586053,0.08767073,0.894982 -0.3088645,-0.0006655821,0.8540156 -0.2408815,-0.00136668,0.789228 0.1176352,0.2594517,1.003664 -0.3078272,-0.0340562,0.8394636 0.4794235,-0.08754969,1.059167 0.09368172,-0.05827027,0.9575018 0.3888934,-0.2984765,1.06647 -0.1806639,-0.1595708,0.8282026 0.09065511,-0.1802279,1.017427 0.2342526,-0.1373423,1.090462 0.3128547,-0.002355849,0.8007344 0.3348317,0.01416313,0.8493284 -0.1535044,0.08972955,0.8050805 0.2352889,0.2416172,0.9417447 0.3546837,0.2587089,0.9760814 0.2713401,-0.1518742,1.103099 -0.3142846,-0.002005559,0.8704169 0.1528147,0.08638745,0.873449 -0.1615119,0.1200627,0.8962712 0.1158049,-0.1415409,1.032568 -0.131795,-0.05671853,1.001704 -0.05672517,-0.00544187,0.8644754 0.3446455,-0.2269868,1.026573 0.2611695,0.1332472,0.9069186 -0.139282,-0.02048167,0.898899 -0.1311982,-0.05038192,0.9204796 0.1775557,-0.02134528,0.7669008 -0.306838,-0.001666977,0.8548229 -0.224217,-0.006948673,0.8743064 -0.05161691,-0.006450188,0.8951803 0.3025928,0.06158197,0.8623655 0.1462712,0.08418168,0.8456649 0.08586484,-0.02390853,0.8686644 0.1753121,-0.1655259,1.160361 -0.1610556,0.1174856,0.877206 0.248744,0.2016371,1.007058 0.157421,0.1867121,1.078835 -0.009553179,-0.085581,1.013929 -0.02892774,-0.0532833,0.9613039 -0.282928,0.278895,0.8359428 -0.04957639,-0.369127,0.9731228 0.01702051,-0.04533472,0.9444337 -0.07353064,-0.3075865,1.034926 -0.05724207,-0.3268222,0.9840019 -0.3071938,-0.2704645,0.9740036 0.4027773,-0.07493064,0.9180254 -0.2705682,-0.03783097,0.8437724 0.4367933,-0.04706088,0.9263144 0.1108954,0.2348897,0.9850631 -0.4736948,-0.1887571,1.057577 -0.1418313,0.2933781,0.8793298 -0.3169226,-0.315626,0.8997502 -0.004672669,-0.1196132,0.9950922 0.1834435,-0.04955603,0.8967467 0.2149479,0.02418533,0.7784578 0.3684973,-0.125515,1.054403 -0.03842634,-0.2810566,0.9791331 -0.2816711,0.2749768,0.8271965 -0.0638868,-0.3756057,1.001736 0.2352151,-0.2067222,1.065149 0.1719003,0.1740108,1.111236 0.2571567,0.01785592,0.7800547 -0.06954765,-0.3452871,1.011635 0.4185283,-0.1919428,1.032634 0.1560985,0.01334437,0.8045694 0.009622957,-0.05713243,0.9588727 0.3450766,0.2491381,0.9491569 0.3591888,-0.1971599,1.023383 0.1062352,0.2539421,0.9739559 -0.1670724,-0.07096634,0.9514265 -0.3232416,-0.2560004,0.9738911 0.1569842,0.1901944,1.113013 0.1322179,-0.1028359,1.037979 0.2164164,0.1212126,0.9321462 -0.4797733,-0.1065544,1.057738 0.05499854,0.2304022,1.003598 0.1612022,0.1917541,1.112718 -0.1876256,-0.1814058,0.9455772 0.2211331,0.02430135,0.7882554 0.1070728,0.2568132,0.9810027 0.07222299,-0.149104,1.04724 0.1874172,0.2189017,1.02233 0.0008595486,0.241768,1.012677 0.04435947,0.2338271,0.9989055 -0.3118894,-0.0525211,0.8364203 0.1627576,0.03328351,0.8107042 -0.007553636,-0.1433157,0.99919 0.2768867,-0.1514093,1.10665 0.1213294,-0.02233552,0.8810297 0.04573977,-0.1568315,1.033527 0.1606325,0.002024488,0.8010422 -0.3625667,-0.2752512,0.8706695 -0.2359699,-0.2755284,0.9530578 -0.2600232,0.2909613,0.8470659 -0.229685,-0.3670517,0.9394615 0.1639192,-0.1360335,1.115315 -0.06801663,-0.004436393,0.8623105 0.04665259,0.008191184,0.8645554 -0.2916386,-0.01443144,0.8701435 0.1386092,0.04155803,0.9564064 0.1940272,-0.0452026,0.9150068 -0.2526848,-0.1890874,0.9899349 0.3478922,-0.225699,1.028025 -0.2546642,-0.1801634,0.9439381 -0.1332443,-0.02049798,0.9006702 0.3077984,0.2599651,0.9147555 -0.1833283,-0.06626967,0.9623166 0.4657886,-0.2832201,1.112916 -0.2642756,-0.006794568,0.8830249 0.2435224,-0.154452,1.096173 0.2914666,-0.2514516,1.055821 0.1507915,0.01683612,0.8082297 0.1360076,-0.02551712,0.8809111 0.3126655,-0.2527284,1.026723 -0.07216852,-0.01049863,0.8885513 0.1551005,0.1952393,1.102571 0.05611544,0.007698196,0.8905023 0.216849,0.02456905,0.7784246 -0.004028429,-0.1214522,0.9926546 -0.2912066,-0.03622973,0.8521563 -0.1349083,0.3005275,0.885272 0.2522716,0.2439528,0.9753847 0.07009287,-0.005558786,0.8449458 -0.2736052,-0.1831203,0.9532959 0.3169914,-0.2287931,1.043959 0.3601266,-0.1163306,1.045606 0.1001761,-0.05475012,0.9317999 0.3287488,0.263433,0.9809636 main.css 0 → 100644 +67 −0 Original line number Diff line number Diff line html { height: 100%; } body { margin: 10px; } 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 0 → 100644 +142 −0 Original line number Diff line number Diff line async function drawPointCloud(object) { var button = document.getElementById("drawPC"); button.style.display = 'none'; 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(); let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create a buffer geometry and add the point cloud data let geometry = new THREE.BufferGeometry(); 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({ vertexColors: true, size: 0.005 }); let pointCloud = new THREE.Points(geometry, material); scene.add(pointCloud); camera.position.z = 2; let angleX = 0; let angleY = 0; // Handle user interaction for rotation 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 }; }); 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 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; renderer.render(scene, camera); }); camera.initialPosition = { z: camera.position.z }; // Store initial position function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); 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; } // Push to positions list positions.push(x, y, z ); colors.push(r,g,b); } } } else { console.error(`Object '${object}' not found in JSON.`); } return { positions: positions, colors: colors }; } }) .catch(error => { console.error('Error loading JSON:', error); }); } src/main/resources/templates/html/index.html +28 −1 Original line number Diff line number Diff line <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <<<<<<< HEAD:src/main/resources/templates/html/index.html <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VSLAM App</title> Loading Loading @@ -30,4 +32,29 @@ <script src="../../java/gui_server/detect.js"></script> <script src="../../java/gui_server/app.js"></script> </body> ======= <title>VSlam</title> <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"> <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> >>>>>>> 8f38d65ec8ac1b54e6bfeab2d34157a88d1afdd3:index.html </html> Loading
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
extractedPoints.csv 0 → 100644 +365 −0 Original line number Diff line number Diff line -0.06900241,-0.3507448,1.033868 -0.5094872,-0.335972,1.037024 -0.0517595,-0.3194826,0.964794 -0.26819,-0.2832867,0.93624 -0.451066,-0.2754324,0.9582117 -0.02466401,-0.2934302,1.022113 0.4340152,-0.2927349,1.012656 -0.4700845,-0.2324494,1.027293 0.05616835,-0.2302022,1.02122 0.3103633,-0.2405539,1.076906 0.3468663,-0.2287515,1.026217 -0.2542701,-0.1819791,0.9472755 0.2602769,-0.2096001,1.085634 0.4181629,-0.1918874,1.018657 0.5108834,-0.1945888,1.10052 0.1607228,-0.1786381,1.092534 0.1154751,-0.1575818,1.033309 0.3628199,-0.1240209,1.042551 0.3392987,-0.1220983,1.065156 0.09428331,-0.09280027,1.005206 -0.4141278,-0.08583868,1.030251 0.18329,-0.09223963,0.997163 0.1716043,-0.08562668,0.958635 -0.1729519,-0.0776499,1.006449 -0.2845822,-0.06999036,0.8611298 0.02044802,-0.05811689,0.9738315 0.01296036,-0.04444205,0.9208867 -0.08239425,-0.03085459,0.9267675 0.04727431,0.008490545,0.8688331 -0.3606437,0.01618071,0.8629293 0.2105094,0.1243638,0.933347 0.231766,0.1069027,0.8321818 -0.1770186,0.139959,0.7958759 0.2364081,0.1642755,0.8707324 0.2360844,0.3081827,0.8830881 -0.4306689,-0.3407795,0.8945921 -0.05465219,-0.3774999,0.96435 -0.2250856,-0.3546759,0.9550002 -0.246262,-0.3290255,0.9545395 -0.2260483,-0.3236364,0.9466397 -0.05509534,-0.3003376,0.9892556 -0.4109164,-0.2374692,0.9288879 -0.5153137,-0.2687777,1.098092 -0.5362918,-0.2719595,1.141981 0.05192059,-0.238798,0.9994154 0.1607298,-0.2088129,1.080495 0.09027376,-0.1664593,1.074121 0.5117261,-0.152272,1.121635 0.3421884,-0.1492289,1.072462 -0.2698344,-0.07390544,0.8396418 0.4053755,-0.07456393,0.9178874 0.0910932,-0.0747536,0.914787 0.1581096,-0.0611611,0.9377224 -0.1005423,-0.06197135,0.9697764 -0.1423956,-0.01718888,0.889078 0.493636,0.2370742,0.998692 -0.2270201,0.1787612,0.7168721 -0.02916331,-0.338412,0.9608698 -0.4426665,-0.2671321,0.982818 0.2466568,-0.2226559,1.124538 0.2462575,-0.2091596,1.095683 0.1003007,-0.08707787,1.01655 0.3871322,-0.08398501,0.9352465 0.1269614,-0.06724115,0.9209728 -0.2694361,-0.01734548,0.8628417 -0.1826763,0.1571379,0.7704211 0.09884058,0.231997,0.947727 -0.3231615,0.2712583,0.827448 -0.03420264,-0.3844759,0.9560074 -0.2257674,-0.3436999,0.9292494 -0.4242442,-0.3174223,0.8753457 0.2805332,-0.1544295,1.103116 0.1366949,-0.01871451,0.8879513 0.4166071,-0.2877659,0.9980846 0.3462467,-0.155378,1.067033 -0.267102,-0.03911924,0.842447 -0.1379147,0.2917985,0.8614042 -0.06394307,-0.3850106,0.9949217 0.2485076,-0.2154702,1.076664 0.3474581,0.2785804,0.973517 0.09086783,-0.05588575,0.9360696 -0.06223369,-0.3731945,0.9987332 -0.3058668,-0.3330749,0.923512 -0.3194951,-0.2781164,0.920142 -0.2412821,-0.2824242,0.9502748 -0.5362516,-0.2704518,1.137176 0.5133331,-0.1986132,1.103809 -0.2407167,-0.0667384,0.9728302 -0.1780017,-0.06392631,0.980948 0.1453963,-0.06234509,0.8963837 0.04186799,-0.05968328,0.9665195 -0.141848,-0.01770822,0.8938537 0.1555232,0.01132735,0.7962826 0.2392749,0.1292011,0.8495147 -0.317225,0.2634278,0.7950491 -0.2358509,-0.2750409,0.9541141 0.4307193,-0.2904671,1.0093 0.3085175,-0.2394926,1.07031 0.3428572,-0.2236946,1.018585 0.2561058,-0.2120067,1.078925 0.425136,-0.2028808,1.035519 0.3169505,-0.171614,1.099244 0.337285,-0.1200175,1.059947 -0.4175623,-0.08743324,1.033202 -0.01069216,-0.085336,1.016277 0.5365584,-0.09633294,1.07562 -0.2464464,-0.06267948,0.9495894 0.009706357,-0.05663859,0.9594213 0.2266814,0.1094883,0.825797 0.2323674,0.1299975,0.835213 -0.1637864,0.1558638,0.8396296 0.2045291,0.2266563,1.024981 -0.2588624,0.2894014,0.8415105 -0.2795627,0.2859771,0.8127716 -0.2434675,-0.3227388,0.9361313 -0.3228565,-0.2760262,0.927058 0.4282402,-0.2952021,1.019851 -0.05229088,-0.2684516,1.003989 0.05750264,-0.242816,1.032476 -0.2550797,-0.1803353,0.9426121 0.349949,-0.1501152,1.077408 0.364328,-0.1230637,1.04259 0.1332736,-0.1001167,1.037352 0.1393238,-0.06769709,0.9166197 0.5090637,-0.06844565,0.9841929 0.1896564,-0.04798145,0.9069208 0.2274647,0.02626145,0.8115273 0.3313511,0.2596697,0.9809458 -0.1559988,0.3005977,0.8606426 -0.06209136,-0.3916617,1.023829 0.2425683,-0.2107174,1.083649 0.11261,-0.1564932,1.030488 -0.1686943,-0.07779373,0.9688949 0.009822373,0.007371004,0.8556352 -0.1761959,0.1407651,0.7920365 0.2307135,0.1612477,0.8564904 -0.2187958,0.2199828,0.9514446 -0.2821191,0.2795953,0.8400663 -0.2233695,-0.3516035,0.9444437 -0.183986,-0.1838907,0.9441056 0.1653828,-0.08678392,0.9655206 0.09907275,-0.05507715,0.935532 -0.05236644,-0.3412952,1.038251 -0.2497024,-0.06357522,0.9638004 0.1918641,-0.05735386,0.9079157 -0.2960039,-0.03725029,0.8480514 0.2565357,0.2127689,0.9803448 0.2046134,0.3036045,0.8512656 0.03959246,-0.1758798,1.083882 0.1312987,-0.1032514,1.035343 0.5097085,-0.0696622,0.9898168 0.1562947,0.01338092,0.8065224 0.3344355,0.2731282,0.9570121 -0.1428414,0.2899679,0.8712013 -0.3221677,0.2686726,0.8178742 0.2018151,0.3004805,0.8637038 -0.3768963,-0.2517308,0.9167308 -0.2087414,-0.259801,0.9773223 -0.02174715,-0.2387529,0.9503756 -0.5200428,-0.2621163,1.092994 -0.1897668,-0.1821947,0.9355006 -0.01251197,-0.08524455,0.9966073 0.4079772,-0.07563928,0.9272817 -0.1815553,-0.06450817,0.9733769 -0.03034927,-0.05313706,0.9594299 0.09135146,-0.05634768,0.9598512 -0.1423813,-0.01816225,0.8952572 0.2114216,0.1216684,0.9267979 0.230729,0.1138304,0.839915 0.5119752,0.2320295,1.020901 -0.2280564,0.180914,0.7241505 0.3478338,0.249103,0.9437129 0.2303768,0.3057928,0.878794 0.4178427,-0.2793739,0.9934466 0.351016,-0.1223374,1.07408 -0.4167723,-0.08709431,1.025605 -0.1677646,0.160184,0.8640101 0.04599537,-0.2336768,1.007575 0.2559456,-0.2103207,1.070717 -0.4705151,-0.118435,1.063128 0.009801613,-0.05670394,0.9605088 0.2668202,0.1792605,0.9468367 0.1585376,-0.06231721,0.9329817 0.1542538,-0.06129301,0.916054 0.04737057,-0.1147366,1.05294 0.1275372,-0.1026819,1.029462 0.4110928,-0.07276425,0.9163254 0.0953429,-0.0555375,0.9642707 0.3036539,0.09963318,0.8840221 -0.06394706,-0.3449335,1.022622 0.3805089,-0.0438611,0.9386814 -0.2595145,-0.1820738,0.9480324 0.3955265,-0.08680294,0.9667431 0.1053762,0.257158,0.9729793 0.3716389,-0.1227333,1.045853 -0.03229201,-0.05399266,0.9556986 0.2029226,-0.04673193,0.9079415 0.2276707,0.11552,0.8404955 0.5159252,0.2306961,1.029338 -0.4180538,-0.2414638,0.9533334 0.2872858,-0.1480609,0.8368129 -0.415727,-0.08602455,1.01799 0.1360853,0.04429527,0.9478176 0.3405285,0.2766038,0.9696857 0.4231883,-0.2898793,1.002351 -0.01174978,-0.08815142,1.027534 -0.3930062,-0.2199768,0.8813173 0.3897037,-0.0882737,0.9498562 0.3420729,0.2749782,0.9672684 -0.1881284,-0.1834696,0.9391624 0.2194189,0.02284092,0.7826742 0.1374939,0.04199801,0.938673 0.008090999,-0.0556135,0.9385412 -0.2001241,0.2012295,0.7873362 -0.004772666,-0.1164431,0.9870591 -0.2473751,-0.06159194,0.9319729 0.0179728,-0.04893986,0.9547012 -0.2558832,-0.1774473,0.9309245 0.352358,-0.1270986,1.037609 0.4715958,-0.06426462,0.9337447 0.09555181,-0.06146855,0.972965 -0.1403598,-0.01817375,0.902211 -0.1527963,0.1036686,0.8422352 0.1976708,-0.05558001,0.930172 0.2343024,0.1149019,0.8521932 -0.3380554,-0.2673729,1.016717 -0.2767066,-0.1807123,0.9499612 0.01201001,-0.05878334,0.9654921 0.4054979,-0.04484414,0.9648999 0.2479243,0.04419627,0.8256484 0.2376407,0.119975,0.8692614 0.4626999,-0.1492064,1.06836 0.005104779,0.2466353,1.040364 0.3535894,-0.2304855,1.043343 0.2760725,-0.1476941,1.105381 -0.2531862,-0.06744567,0.9683442 0.1586053,0.08767073,0.894982 -0.3088645,-0.0006655821,0.8540156 -0.2408815,-0.00136668,0.789228 0.1176352,0.2594517,1.003664 -0.3078272,-0.0340562,0.8394636 0.4794235,-0.08754969,1.059167 0.09368172,-0.05827027,0.9575018 0.3888934,-0.2984765,1.06647 -0.1806639,-0.1595708,0.8282026 0.09065511,-0.1802279,1.017427 0.2342526,-0.1373423,1.090462 0.3128547,-0.002355849,0.8007344 0.3348317,0.01416313,0.8493284 -0.1535044,0.08972955,0.8050805 0.2352889,0.2416172,0.9417447 0.3546837,0.2587089,0.9760814 0.2713401,-0.1518742,1.103099 -0.3142846,-0.002005559,0.8704169 0.1528147,0.08638745,0.873449 -0.1615119,0.1200627,0.8962712 0.1158049,-0.1415409,1.032568 -0.131795,-0.05671853,1.001704 -0.05672517,-0.00544187,0.8644754 0.3446455,-0.2269868,1.026573 0.2611695,0.1332472,0.9069186 -0.139282,-0.02048167,0.898899 -0.1311982,-0.05038192,0.9204796 0.1775557,-0.02134528,0.7669008 -0.306838,-0.001666977,0.8548229 -0.224217,-0.006948673,0.8743064 -0.05161691,-0.006450188,0.8951803 0.3025928,0.06158197,0.8623655 0.1462712,0.08418168,0.8456649 0.08586484,-0.02390853,0.8686644 0.1753121,-0.1655259,1.160361 -0.1610556,0.1174856,0.877206 0.248744,0.2016371,1.007058 0.157421,0.1867121,1.078835 -0.009553179,-0.085581,1.013929 -0.02892774,-0.0532833,0.9613039 -0.282928,0.278895,0.8359428 -0.04957639,-0.369127,0.9731228 0.01702051,-0.04533472,0.9444337 -0.07353064,-0.3075865,1.034926 -0.05724207,-0.3268222,0.9840019 -0.3071938,-0.2704645,0.9740036 0.4027773,-0.07493064,0.9180254 -0.2705682,-0.03783097,0.8437724 0.4367933,-0.04706088,0.9263144 0.1108954,0.2348897,0.9850631 -0.4736948,-0.1887571,1.057577 -0.1418313,0.2933781,0.8793298 -0.3169226,-0.315626,0.8997502 -0.004672669,-0.1196132,0.9950922 0.1834435,-0.04955603,0.8967467 0.2149479,0.02418533,0.7784578 0.3684973,-0.125515,1.054403 -0.03842634,-0.2810566,0.9791331 -0.2816711,0.2749768,0.8271965 -0.0638868,-0.3756057,1.001736 0.2352151,-0.2067222,1.065149 0.1719003,0.1740108,1.111236 0.2571567,0.01785592,0.7800547 -0.06954765,-0.3452871,1.011635 0.4185283,-0.1919428,1.032634 0.1560985,0.01334437,0.8045694 0.009622957,-0.05713243,0.9588727 0.3450766,0.2491381,0.9491569 0.3591888,-0.1971599,1.023383 0.1062352,0.2539421,0.9739559 -0.1670724,-0.07096634,0.9514265 -0.3232416,-0.2560004,0.9738911 0.1569842,0.1901944,1.113013 0.1322179,-0.1028359,1.037979 0.2164164,0.1212126,0.9321462 -0.4797733,-0.1065544,1.057738 0.05499854,0.2304022,1.003598 0.1612022,0.1917541,1.112718 -0.1876256,-0.1814058,0.9455772 0.2211331,0.02430135,0.7882554 0.1070728,0.2568132,0.9810027 0.07222299,-0.149104,1.04724 0.1874172,0.2189017,1.02233 0.0008595486,0.241768,1.012677 0.04435947,0.2338271,0.9989055 -0.3118894,-0.0525211,0.8364203 0.1627576,0.03328351,0.8107042 -0.007553636,-0.1433157,0.99919 0.2768867,-0.1514093,1.10665 0.1213294,-0.02233552,0.8810297 0.04573977,-0.1568315,1.033527 0.1606325,0.002024488,0.8010422 -0.3625667,-0.2752512,0.8706695 -0.2359699,-0.2755284,0.9530578 -0.2600232,0.2909613,0.8470659 -0.229685,-0.3670517,0.9394615 0.1639192,-0.1360335,1.115315 -0.06801663,-0.004436393,0.8623105 0.04665259,0.008191184,0.8645554 -0.2916386,-0.01443144,0.8701435 0.1386092,0.04155803,0.9564064 0.1940272,-0.0452026,0.9150068 -0.2526848,-0.1890874,0.9899349 0.3478922,-0.225699,1.028025 -0.2546642,-0.1801634,0.9439381 -0.1332443,-0.02049798,0.9006702 0.3077984,0.2599651,0.9147555 -0.1833283,-0.06626967,0.9623166 0.4657886,-0.2832201,1.112916 -0.2642756,-0.006794568,0.8830249 0.2435224,-0.154452,1.096173 0.2914666,-0.2514516,1.055821 0.1507915,0.01683612,0.8082297 0.1360076,-0.02551712,0.8809111 0.3126655,-0.2527284,1.026723 -0.07216852,-0.01049863,0.8885513 0.1551005,0.1952393,1.102571 0.05611544,0.007698196,0.8905023 0.216849,0.02456905,0.7784246 -0.004028429,-0.1214522,0.9926546 -0.2912066,-0.03622973,0.8521563 -0.1349083,0.3005275,0.885272 0.2522716,0.2439528,0.9753847 0.07009287,-0.005558786,0.8449458 -0.2736052,-0.1831203,0.9532959 0.3169914,-0.2287931,1.043959 0.3601266,-0.1163306,1.045606 0.1001761,-0.05475012,0.9317999 0.3287488,0.263433,0.9809636
main.css 0 → 100644 +67 −0 Original line number Diff line number Diff line html { height: 100%; } body { margin: 10px; } 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 0 → 100644 +142 −0 Original line number Diff line number Diff line async function drawPointCloud(object) { var button = document.getElementById("drawPC"); button.style.display = 'none'; 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(); let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Create a buffer geometry and add the point cloud data let geometry = new THREE.BufferGeometry(); 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({ vertexColors: true, size: 0.005 }); let pointCloud = new THREE.Points(geometry, material); scene.add(pointCloud); camera.position.z = 2; let angleX = 0; let angleY = 0; // Handle user interaction for rotation 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 }; }); 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 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; renderer.render(scene, camera); }); camera.initialPosition = { z: camera.position.z }; // Store initial position function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); 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; } // Push to positions list positions.push(x, y, z ); colors.push(r,g,b); } } } else { console.error(`Object '${object}' not found in JSON.`); } return { positions: positions, colors: colors }; } }) .catch(error => { console.error('Error loading JSON:', error); }); }
src/main/resources/templates/html/index.html +28 −1 Original line number Diff line number Diff line <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <<<<<<< HEAD:src/main/resources/templates/html/index.html <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VSLAM App</title> Loading Loading @@ -30,4 +32,29 @@ <script src="../../java/gui_server/detect.js"></script> <script src="../../java/gui_server/app.js"></script> </body> ======= <title>VSlam</title> <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"> <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> >>>>>>> 8f38d65ec8ac1b54e6bfeab2d34157a88d1afdd3:index.html </html>