Commit 36bc99a0 authored by Rohan Kumar's avatar Rohan Kumar
Browse files

Merge branch 'front-end' into 'master' 

PointCloud Visualization

See merge request ec504/ec504_projects/group8!8
parents 013a4b93 089154d5

src/main/resources/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

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>
@@ -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>

src/main/resources/templates/js/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

src/main/resources/templates/js/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/style/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);

  }

}