Spaces:

JavedA
/

master_Thesis

Running

App Files Files Community

JavedA commited on Apr 15, 2023

Commit

8ed5f8a

•

1 Parent(s): c1e876e

possible method for loading banner

Browse files

Files changed (7) hide show

.gitignore +5 -0
Python/plot.py +103 -0
Web_Code/CSS/css_0.css +22 -1
_quarto.yml +1 -2
index.html +0 -19
index.qmd +63 -3
tornado.html +0 -0

.gitignore CHANGED Viewed

@@ -6,6 +6,11 @@ _extensions/
 _.site/
 /.luarc.json
 # *.pdf
 # *.svg
 # *.npz

 _.site/
 /.luarc.json
+index_files
+site_libs
+index*
 # *.pdf
 # *.svg
 # *.npz

Python/plot.py ADDED Viewed

	@@ -0,0 +1,103 @@

+import numpy as np
+import plotly.io as pio
+# pio.renderers.default = "plotly_mimetype+notebook_connected"
+import plotly.graph_objects as go # to combine figures
+# load data from the numpy npz file
+data = np.load('Data/6_Html_Data/0_Viz/plt_Dat_16.78.npz')
+# extraxt the data - load it
+x_Traj =  data["x"]
+y_Traj =  data["y"]
+z_Traj =  data["z"]
+x_Cone = data["x_Cone"]
+y_Cone = data["y_Cone"]
+z_Cone = data["z_Cone"]
+u_Cone = data["u_Cone"]
+v_Cone = data["v_Cone"]
+w_Cone = data["w_Cone"]
+# The trajectory
+fig = go.Figure(data=[go.Scatter3d(
+                        x= x_Traj,
+                        y= y_Traj,
+                        z= z_Traj,
+                        name = "Trajectory",
+                        showlegend = False,
+                    )])
+fig.update_traces(marker_size = 2,
+                  mode = "lines",
+                  marker_color ="green")
+# Cones
+fig_Cones = go.Figure(data=go.Cone(  x = x_Cone ,
+                                y = y_Cone ,
+                                z = z_Cone ,
+                                u = u_Cone ,
+                                v = v_Cone ,
+                                w = w_Cone ,
+                                name = "Direction",
+                                showlegend = False,
+                                )
+                    )
+# hiding color-bar
+fig_Cones.update_traces(showscale=False)
+# combine cone and trajectory
+fig.add_traces(data = fig_Cones.data)
+# style the figure
+fig.update_layout(
+    # plotlyexpress 3d axes:
+    scene = dict(
+        xaxis = dict(
+            showbackground = False,
+            showticklabels  = False,
+            title='',
+            showgrid = False,
+            zeroline = False,),
+        yaxis = dict(
+            showbackground = False,
+            showticklabels  = False,
+            title='',
+            showgrid = False,
+            zeroline = False,),
+        zaxis = dict(
+            showbackground = False,
+            showticklabels  = False,
+            title='',
+            showgrid = False,
+            zeroline = False,
+        ),
+            ),
+    # template= 'plotly_dark'
+    # template= 'plotly'
+    paper_bgcolor='rgba(0,0,0,0)',
+    plot_bgcolor='rgba(0,0,0,0)',
+    modebar = dict(bgcolor='rgba(0, 0, 0, 0)'),
+    margin=dict(
+        l=0,
+        r=0,
+        b=0,
+        t=0,
+        pad=0
+                ),
+    scene_camera_eye=dict(x=0,
+                          y=1,
+                          z=0),
+)
+fig.show(div_id ="rest")
+a = fig.to_html(div_id ="test_")
+print("stop")

Web_Code/CSS/css_0.css CHANGED Viewed

@@ -28,4 +28,25 @@
 /* plotly logo  */
 .modebar-btn--logo{
     visibility: hidden;
-}

 /* plotly logo  */
 .modebar-btn--logo{
     visibility: hidden;
+}
+/* when the main page is opened, it might take some time to load everything - for that a loader shall be made visibe.  */
+.cl_Loader {
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #3498db;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -60px;
+    margin-left: -60px;
+  }
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }

_quarto.yml CHANGED Viewed

@@ -193,8 +193,6 @@ format:
     highlight-style: dracula
   pdf:
     documentclass: scrreprt
@@ -206,3 +204,4 @@ format:
 tbl-cap-location: bottom

     highlight-style: dracula
   pdf:
     documentclass: scrreprt
 tbl-cap-location: bottom
+# adding javascipt code is possible - see:

index.html DELETED Viewed

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

index.qmd CHANGED Viewed

@@ -1,10 +1,17 @@
-# Preface {.unnumbered}
 ```{python}
 # | echo: false
 #| code-fold: true
 import numpy as np
 import plotly.io as pio
 pio.renderers.default = "plotly_mimetype+notebook_connected"
@@ -102,5 +109,58 @@ fig.update_layout(
                           z=0),
 )
-fig.show()
-```

+# Meet The Tornado {.unnumbered}
+<div id="loader_Initial" class="cl_Loader">
+</div>
+<div id="content_Load" style="display:none;">
+  <!-- Your webpage content goes here
+<!-- Code to generate the main image, i.e. the tornada -->
 ```{python}
 # | echo: false
 #| code-fold: true
+#| label: tornado_main
+#|
 import numpy as np
 import plotly.io as pio
 pio.renderers.default = "plotly_mimetype+notebook_connected"
                           z=0),
 )
+fig.show(div_id="here_Comes")
+```
+</div>
+<script>
+function hideLoaderAndShowContent() {
+    const loader = document.getElementById("loader_Initial");
+    const content = document.getElementById("content_Load");
+    loader.style.display = "none";
+    content.style.display = "block";
+}
+function checkForPlotlyPlot() {
+    console.log("everything is loaded")
+    const plotElement = document.querySelector(".plotly-graph-div");
+    if (plotElement) {
+        console.log("Plotly plot is loaded.");
+        clearInterval(intervalId);
+        hideLoaderAndShowContent();
+    } else {
+        console.log("Plotly plot is not loaded.");
+    }
+}
+function checkIfElementLoaded(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        console.log("Element with ID:", elementId, "is loaded.");
+    } else {
+        console.log("Element with ID:", elementId, "is not loaded.");
+    }
+}
+function onPageLoad() {
+    // Replace 'yourElementId' with the ID of the element you want to check
+    checkIfElementLoaded("tornado_main");
+}
+// java script defined fcn to reeatedly execute a function
+const intervalId = setInterval(checkForPlotlyPlot, 1000); // Checks every 1000ms (1 second)
+// window.addEventListener("load", onPageLoad);
+// window.addEventListener("load", checkForPlotlyPlot);
+</script>

tornado.html DELETED Viewed

The diff for this file is too large to render. See raw diff