loader is working finde - not as desired, but its okay

Code/Visuals/Plotly/plt_1.py

@@ -97,8 +97,8 @@ fig.update_layout(
 )
 
 
-fig.write_html("./tornado.html",
-               div_id= "plt_Div",
+fig.write_html("./Data/6_Html_Data/0_Viz/mPV_16.78.html",
+               div_id= "tornado_main",
                include_plotlyjs = "cdn")
 
 fig.write_image("Data/6_Html_Data/1_Logo_Img/2_Tornado.svg")

Trials/1_Python_Code_Qmd.qmd

@@ -0,0 +1,185 @@
+# Meet The Tornado {.unnumbered}
+
+<div id="loader_Initial" class="cl_Loader"> 
+</div> 
+
+<div id="content_Load" style="display:none;">
+
+<!-- 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"
+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="here_Comes")
+``` 
+
+
+</div>
+
+
+<script>
+
+/* ========================================================================== */
+/* ============================ show_Lotti_Riksha =========================== */
+/* ========================================================================== */
+function show_Lotti_Riksha(){
+
+    console.log("I am about to show th riksha");
+    const player = document.querySelector('dotlottie-player');
+    player.load('./Data/7_Animation/Riksha.lottie');
+}
+
+/* ========================================================================== */
+/* ======================== hideLoaderAndShowContent ======================== */
+/* ========================================================================== */
+function hideLoaderAndShowContent() {
+    const loader = document.getElementById("loader_Initial");
+    const content = document.getElementById("content_Load");
+
+    loader.style.display = "none";
+    content.style.display = "block";
+
+    // Load and display the riksha animation
+    show_Lotti_Riksha();
+}
+
+
+// This code defines a waitForScriptExecution function that sets up a MutationObserver to watch for changes in the div element with the class plotly-graph-div. When a change is detected, it logs a message, disconnects the observer, and hides the loader while showing the content.
+function waitForScriptExecution() {
+
+    // the plotly figure has the id tornado_main
+    const tornadoMain = document.getElementById("tornado_main");
+
+    if (tornadoMain) {
+        // get the first element that is found by this class name
+        const targetDiv = tornadoMain.querySelector(".plotly-graph-div"); // Replace with the correct class name
+
+        if (targetDiv) {
+            const observer = new MutationObserver((mutationsList) => {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+                        console.log("Script has been executed and the div content has changed.");
+                        observer.disconnect();
+                        hideLoaderAndShowContent();
+                        break;
+                    }
+                }
+            });
+
+            observer.observe(targetDiv, { childList: true });
+        }
+    }
+}
+
+// wait until the whole page has loaded once
+window.addEventListener("load", function() {
+
+    // show_Lotti_Riksha()
+
+    // when the tornada plotly plot is shown let the riksha disappear
+    waitForScriptExecution();
+});
+
+</script>
+
+
+

Web_Code/CSS/css_0.css

@@ -30,8 +30,12 @@
     visibility: hidden;
 }
 
+
+/* <div id="loader_Initial" class="cl_Loader"> 
+</div>  */
+
 /* when the main page is opened, it might take some time to load everything - for that a loader shall be made visibe.  */
-.cl_Loader {
+/* .cl_Loader {
     border: 16px solid #f3f3f3;
     border-radius: 50%;
     border-top: 16px solid #3498db;
@@ -50,4 +54,4 @@
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
-  
+    */

index.qmd

@@ -1,164 +1,55 @@
 # Meet The Tornado {.unnumbered}
 
-<div id="loader_Initial" class="cl_Loader"> 
-</div>
-  
-<div id="content_Load" style="display:none;">
-  <!-- Your webpage content goes here
+<!-- load dot lotti js code -->
+<script src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>
 
+<dotlottie-player
+  autoplay
+  loop
+  mode="bounce"
+  src="./Data/7_Animation/Riksha.lottie"
+  style="width: 100% hegiht: 600px">
+</dotlottie-player>
 
-<!-- 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"
-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="here_Comes")
-``` 
-</div>
-
+<div id="iframe_Tornado" style="display:none;"></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 createIframe() {
+    const iframe = document.createElement("iframe");
+    iframe.src = "./Data/6_Html_Data/0_Viz/mPV_16.78.html";
+    iframe.frameBorder = "0";
+    iframe.width = "100%";
+    iframe.height = "600";
+    return iframe;
 }
 
+function hide_Riksha() {
+    // get lottify riksha
+    const player = document.querySelector('dotlottie-player');
 
-// This code defines a waitForScriptExecution function that sets up a MutationObserver to watch for changes in the div element with the class plotly-graph-div. When a change is detected, it logs a message, disconnects the observer, and hides the loader while showing the content.
-function waitForScriptExecution() {
-
-    // the plotly figure has the id tornado_main
-    const tornadoMain = document.getElementById("tornado_main");
+    // get iframe container
+    const content = document.getElementById("iframe_Tornado");
 
-    if (tornadoMain) {
-        // get the first element that is found by this class name
-        const targetDiv = tornadoMain.querySelector(".plotly-graph-div"); // Replace with the correct class name
+    // hide riksha
+    player.style.display = "none";
 
-        if (targetDiv) {
-            const observer = new MutationObserver((mutationsList) => {
-                for (const mutation of mutationsList) {
-                    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
-                        console.log("Script has been executed and the div content has changed.");
-                        observer.disconnect();
-                        hideLoaderAndShowContent();
-                        break;
-                    }
-                }
-            });
-
-            observer.observe(targetDiv, { childList: true });
-        }
-    }
+    // show iframe container
+    content.style.display = "block";
 }
 
 // wait until the whole page has loaded once
 window.addEventListener("load", function() {
-  waitForScriptExecution();
+    console.log("whole page has loaded");
+
+    // create and insert iframe
+    const content = document.getElementById("iframe_Tornado");
+    const iframe = createIframe();
+    content.appendChild(iframe);
+
+    // hide riksha and show iframe when iframe content has loaded
+    iframe.addEventListener("load", function() {
+        console.log("iframe has loaded");
+        hide_Riksha();
+    });
 });
-
 </script>
-
-
-

trials.qmd

@@ -2,7 +2,24 @@
 
 Thissince \gls{cnmc} 
 
-  <!-- src="" -->
+<!-- load lotti js code -->
+<script src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>
+
+<dotlottie-player autoplay controls loop mode="normal" style="width: 320px"> </dotlottie-player>
+
+<script>
+
+  // when th full page is laoded --> slows down quite  abite
+  window.addEventListener("load", function() {
+    // when the tornada plotly plot is shown let the riksha disappear
+      const player = document.querySelector('dotlottie-player');
+    player.load('./Data/7_Animation/Riksha.lottie');
+});
+
+  // this without addEventListener is much faster
+  // const player = document.querySelector('dotlottie-player');
+  // player.load('./Data/7_Animation/Riksha.lottie');
+</script