last branch

FRM95 · Jul 31, 2024 · 0838baa · 0838baa
1 parent a7abe0f
commit 0838baa
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 39 deletions.
diff --git a/src/app.py b/src/app.py
@@ -39,11 +39,12 @@ def login():
 
 @app.route('/home/<key>', methods=['GET'])
 def home(key):
-
     if key in session:
-        active_fires = {key: []}
+        # active_fires = {key: []}
         with open("./data/request_data.json", 'r') as fp1:
             available_request_data = json.load(fp1)
+        with open("./data/fire_data_example.json", 'r') as fp1:
+            active_fires = json.load(fp1)
         return render_template('index.html', user_data = active_fires, user_key = key, options_data = available_request_data)
     else:
         return redirect(url_for('login'))

diff --git a/src/static/css/index.css b/src/static/css/index.css
@@ -1,17 +1,21 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+@import url('root.css');
 @import url('animations.css');
 @import url('table.css');
 
 :root{
-    --custom-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    --header-bg: rgb(28, 33, 40);
-    --header-mid-bg: rgba(38, 51, 70, 0.801);
-    --border-bg: rgba(223, 223, 223, 0.34);
-    --border-pix: 0.5px;
-    --blur-filter-hard: 0.55em;    
+
+    /*header global variables*/
+    --header-height: 3.5em;
+    --header-bg-color-light-1: rgb(192, 192, 192);
+    --header-bg-color-light-2: rgba(164, 201, 255, 0.801);
+    --header-background-color-light: linear-gradient(to right, var(--header-bg-color-light-1), var(--header-bg-color-light-2), var(--header-bg-color-light-1));
+    --header-bg-color-dark-1: rgb(28, 33, 40);
+    --header-bg-color-dark-2: rgba(38, 51, 70, 0.801);
+    --header-background-color-dark: linear-gradient(to right, var(--header-bg-color-dark-1), var(--header-bg-color-dark-2), var(--header-bg-color-dark-1));
+
+
     --link-txt-color: rgb(100, 100, 100);
     --link-txt-color-hover: #2997ff;
-
     --area-pad: 1.5em;
 
     --gear-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
@@ -26,21 +30,30 @@
 body{
     margin: 0;
     padding: 0;
-    font-family: var(--custom-font);
+    font-family: var(--global-custom-font);
     overflow: hidden;
 }
 
 
-
 header{
-    height: 3.5em;
-    background: linear-gradient(to right, var(--header-bg), var(--header-mid-bg), var(--header-bg));
-    border-bottom: var(--border-pix) solid var(--border-bg);
-    backdrop-filter: blur(var(--blur-filter-hard));
+    height: var(--header-height);
+    backdrop-filter: var(--global-container-backdrop-filter);
     justify-content: space-between;
     align-items: center;
     position: relative;
+    transition: background var(--global-transition-background-time);
+    border-bottom: var(--global-container-border-width) solid var(--global-container-border-color);
 }
+header[theme = "dark"]{
+    background: var(--header-background-color-dark);
+}
+header[theme = "light"]{
+    background: var(--header-background-color-light);
+}
+
+
+
+
 .canvas{
     position: fixed; 
     top: 0;
@@ -179,7 +192,7 @@ summary:hover{
 
 
 label, select, input{
-    font-size: 0.82em;
+    font-size: 0.84em;
 }
 select, input{
     font-weight: 400;
@@ -196,7 +209,7 @@ select, #requestDate{
     transition: border-color 0.25s
 }
 #requestDate{
-    font-size: 0.9em;
+    font-size: 1em;
 }
 select:hover, #requestDate:hover{
     border-color:rgb(148, 191, 255);
@@ -254,7 +267,6 @@ select:hover, #requestDate:hover{
     width: 18px;
 }
 .menu-button:hover{
-    cursor: pointer;
     background-color: rgba(104, 120, 138, 0.568);
 }
 .menu-button:hover > svg{
@@ -311,19 +323,13 @@ select:hover, #requestDate:hover{
     gap: 17px;
     align-items: center;
 }
-.zoom-tool{
-    background-color: rgb(206, 206, 206);
-    border: none;
-    border-radius: 50%;
-    gap: 1px;
-}
 .zoom-button{
     width: 42px;
     height: 38px;
     justify-content: center;
     align-items: center;
     transition: background-color 0.3s, box-shadow 0.3s 0.001s;
-    background-color: rgb(247, 245, 245);
+    background-color: #f5f5f5ed;
     padding: 8px;
     border: none;
 }
@@ -368,7 +374,7 @@ select:hover, #requestDate:hover{
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-bottom: 18px solid #00dce4;
+    border-bottom: 18px solid #2a77ca;
     transform: rotate(180deg);
 }
 #compass:hover{

diff --git a/src/static/css/root.css b/src/static/css/root.css
@@ -0,0 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
+/*root global variables*/
+:root{
+
+    --global-transition-background-time: 0.3s;
+    --global-container-border-color: rgba(223, 223, 223, 0.34);
+    --global-container-border-width: 0.5px;
+    --global-blur-filter: 0.55em;   
+    --global-container-backdrop-filter: blur(var(--global-blur-filter));
+    --global-custom-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+}
diff --git a/src/static/js/main.js b/src/static/js/main.js
@@ -2,7 +2,7 @@ import { createRenderer, createCamera, createControls, Group, setLabelAttributes
 import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
 import { setOption, requestedData, allowRequest, putData, getData, exportData } from './scripts/requests/functions.js';
 import { processFireData, displayFireData, coordToCartesian } from './scripts/fires/functions.js';
-import { setCheckbox, setNewDate, resetDefault, filteredOptions } from './scripts/UX/filter.js';
+import { setCheckbox, setNewDate, resetDefault, filteredOptions, setMultipleDates } from './scripts/UX/filter.js';
 import { setInspectData } from './scripts/UX/inspect.js'
 import { userInterface } from './scripts/UX/user.js'
 import { notificationHandler } from './scripts/UX/notifications.js'
@@ -41,7 +41,7 @@ async function main(){
     camera.lookAt(earth.position);
 
     // Controls creation
-    const TrackballControls = createControls(camera, labelRenderer.domElement, earth);
+    const controls = createControls(camera, labelRenderer.domElement, earth);
 
     // Lights creation
     const lightObject = buildLight(lightProperties); 
@@ -54,8 +54,8 @@ async function main(){
 
 
     // Example
-    // const axesHelper = new THREE.AxesHelper(2);
-    // scene.add(axesHelper);
+    const axesHelper = new THREE.AxesHelper(2);
+    scene.add(axesHelper);
 
     // Background creation
     const stars = meshes.backgroundMesh;
@@ -107,12 +107,18 @@ async function main(){
         labelDivInfo.classList.add("hidden");
     });
 
-
     // Get and update user data
     const requestData = document.getElementById("request-button");
     const selectors = document.getElementsByClassName("request-parameter");
     let tweenAnimation = null;
 
+    // Include it when load windows
+    if(user_data[user_key].length > 0){
+        meshPointers = processFireData(user_key, user_data, earth_radius);
+        addObject(scene, meshPointers);
+        setMultipleDates(user_key, user_data, 'availableDate', 'filterDate')
+    }
+
     requestData.addEventListener("click", async _ => {
         const selectedOptions = requestedData(selectors);
         const flagRequest = allowRequest(user_key, user_data, selectedOptions);
@@ -152,10 +158,18 @@ async function main(){
     }
 
     // UX-UI Functions
-    userInterface(labelRenderer, TrackballControls, texturesProperties);
+    userInterface(labelRenderer, controls, texturesProperties);
     const layersApply = document.getElementById("apply-interface-layers");
     layersApply.addEventListener("click", _ =>{
         textureVisible(texturesProperties, earth, stars);
+        let coordinates = {
+            "x": 0.7731234559502869,
+            "y": 0.6325369079640581,
+            "z": 0.046660282068943904
+          }
+        const vectorRequest = new THREE.Vector3(coordinates.x, coordinates.y, coordinates.z);
+        tweenAnimation = moveToPoint(vectorRequest, camera, earth, earth_radius);
+        tweenAnimation.start();
     });
 
     //Download file data
@@ -228,7 +242,7 @@ async function main(){
     function animate(){
         requestAnimationFrame(animate);
         updateCompass();
-        TrackballControls.update();
+        controls.update();
         TWEEN.update();
         label.userData.trackVisibility();
         renderer.render(scene, camera);

diff --git a/src/static/js/scripts/UX/globe.js b/src/static/js/scripts/UX/globe.js
@@ -1,18 +1,29 @@
+import { THREE } from "../threeJS/functions.js";
+
 export const moveToPoint = (vectorTarget, sceneCamera, meshObject, meshRadius) => {
 
     const cameraDistance = sceneCamera.position.distanceTo(meshObject.position) - meshRadius;
     const scalarMultiplier = meshRadius + cameraDistance;
 
+    console.log(sceneCamera.position.distanceTo(vectorTarget));
+
     const tween = new TWEEN.Tween(sceneCamera.position)
-        .to(vectorTarget, 2500)
+        .onStart(() =>{
+            console.log(sceneCamera)
+        })
+        .to(vectorTarget, 3000)
         .dynamic(true)
         .easing(TWEEN.Easing.Quadratic.InOut)
         .onUpdate(() => {
             update();
         })
+        .onComplete(() =>{
+            console.log(sceneCamera);
+        })
 
     function update(){
         sceneCamera.position.normalize().multiplyScalar(scalarMultiplier);
+        sceneCamera.lookAt(new THREE.Vector3(0,0,0));
     }
 
     return tween;

diff --git a/src/templates/index.html b/src/templates/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="/static/css/index.css">
   </head>
 	<body>
-    <header class="d-flex" id="header">
+    <header class="d-flex" id="header" theme = "light">
       <div style="align-items: center; display: inherit; margin-left: 1%;">
         <div class="dropdown">
           <button class="menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder-fill" viewBox="0 0 16 16">
@@ -48,6 +48,13 @@
       </div>
       <div style="align-items: center; display: inherit;  justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
         <div style="align-items: center; display: inherit;">
+          <div class="dropdown" id="dropwdown-explore">
+            <button class="menu-button">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe-europe-africa" viewBox="0 0 16 16">
+                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.81.81 0 0 1 1.034-.275.81.81 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34q.118.04.243.054c.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.33.33 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501"/>
+              </svg> Explore
+            </button>
+          </div>
           <div class="dropdown" id="dropwdown-layers">
             <button class="menu-button">
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stack" viewBox="0 0 16 16">
@@ -322,13 +329,13 @@ <h2 class="main-2-t"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="
               <div id="arrow-South"></div>
             </div>
           </div>
-          <div class="d-flex zoom-tool">
-            <button class="zoom-button d-flex" id="zoom-out" style="border-radius: 14px 0px 0px 14px;">
+          <div class="d-flex">
+            <button class="zoom-button d-flex" id="zoom-out" style="border-radius: 18px 0px 0px 18px;border-right: 0.25px solid #9b9b9b82;">
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>
               </svg>
             </button>
-            <button class="zoom-button d-flex" id="zoom-in" style="border-radius: 0px 14px 14px 0px;">
+            <button class="zoom-button d-flex" id="zoom-in" style="border-radius: 0px 18px 18px 0px;border-left: 0.25px solid #9b9b9b82;">
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>
               </svg>