loader working - without lottifiles

Data/10_Law/used_Licenses

@@ -0,0 +1,9 @@
+# ------------------------------ Pakistan Riksha ----------------------------- #
+Riksha with pakistan flag on it, is obtained through:
+https://lottiefiles.com/103030-rickshaw-from-pakistan
+My thank goes to: https://lottiefiles.com/ranaadeelfarrukh, for this beautiful animation and also the lottifiles initative - thank you for providing this content for free
+
+The license of the riksha can be found at: https://lottiefiles.com/page/license
+
+Note: I modfied the original content a bit
+

Python/plot.py

@@ -1,103 +0,0 @@
-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")

Trials/0_Lottifiles_Player.qmd

@@ -0,0 +1,65 @@
+# Trials
+
+Thissince \gls{cnmc} 
+
+<!-- load lotti js code -->
+<script src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.js"></script>
+<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>
+
+<lottie-player
+  autoplay
+  controls
+  loop
+  mode="normal"
+  src="https://assets5.lottiefiles.com/packages/lf20_mHIYUQrfMT.json"
+  style="width: 320px">
+</lottie-player>
+
+<dotlottie-player
+  autoplay
+  controls
+  loop
+  mode="normal"
+  src="./Data/7_Animation/Riksha.lottie"
+  style="width: 320px"
+>
+</dotlottie-player>
+
+<lottie-player
+  autoplay
+  controls
+  loop
+  mode="normal"
+  src="./Data/7_Animation/Riksha.json"
+  style="width: 320px">
+</lottie-player>
+
+
+
+
+
+
+  <!-- src="" -->
+
+
+
+<div>
+  <h1>Hello, World!</h1>
+  <p>This is my first HTML code.</p>
+</div>
+
+<div>
+  <h1>Hello, World!</h1>
+  <script>
+    document.write("This text is generated by JavaScript!");
+  </script>
+</div>
+
+
+<div>
+  <h1>Final header</h1>
+  <p>This is my first HTML code.</p>
+</div>
+
+
+                 

Web_Code/CSS/css_0.css

@@ -44,9 +44,10 @@
     margin-top: -60px;
     margin-left: -60px;
   }
-  
-  @keyframes spin {
+ 
+
+@keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
-  
+  

_quarto.yml

@@ -1,5 +1,14 @@
+# for all available book options see: 
+# https://quarto.org/docs/reference/projects/books.html
 project:
   type: book
+
+  # HTML library (JS/CSS/etc.) directory
+  # lib-dir: ["Web_Code/CSS/", "Web_Code/Js"]
+
+  # Additional file resources to be copied to output directory
+  resources: ["Data/7_Animation/"]
+
   
 
 filters:
@@ -12,7 +21,7 @@ filters:
   # https://github.com/schochastics/quarto-social-share :MIT
   # - social-share
 
-  - Code/gls/gls_Main.lua
+  - Code/Gls/gls_Main.lua
 
 # see: https://github.com/quarto-ext/lightbox 
 lightbox: 
@@ -59,6 +68,7 @@ cluster-based network modeling"
   date: "5.3.2023"
   page-navigation: true
 
+
   # --------------------------------- sidebar -------------------------------- #
   # see: https://quarto.org/docs/reference/projects/books.html#sidebar
   sidebar:

gls_Init/.gitignore

@@ -1,4 +0,0 @@
-*.html
-*.pdf
-*_files/
-/.luarc.json

gls_Init/README.md

@@ -1,23 +0,0 @@
-# Gls_Init Extension For Quarto
-
-_TODO_: Add a short description of your extension.
-
-## Installing
-
-_TODO_: Replace the `<github-organization>` with your GitHub organization.
-
-```bash
-quarto add <github-organization>/gls_init
-```
-
-This will install the extension under the `_extensions` subdirectory.
-If you're using version control, you will want to check in this directory.
-
-## Using
-
-_TODO_: Describe how to use your extension.
-
-## Example
-
-Here is the source code for a minimal example: [example.qmd](example.qmd).
-

gls_Init/example.qmd

@@ -1,11 +0,0 @@
----
-title: "Gls_Init Example"
-filters:
-  - gls_init
----
-
-## Heading
-
-This filter adds formatting to heading text.
-
-

index.qmd

@@ -1,7 +1,8 @@
 # Meet The Tornado {.unnumbered}
 
-<div id="loader_Initial" class="cl_Loader">
+<div id="loader_Initial" class="cl_Loader"> 
 </div>
+  
 <div id="content_Load" style="display:none;">
   <!-- Your webpage content goes here
 
@@ -124,41 +125,38 @@ function hideLoaderAndShowContent() {
     content.style.display = "block";
 }
 
-function checkForPlotlyPlot() {
-    console.log("everything is loaded")
 
-    const plotElement = document.querySelector(".plotly-graph-div");
+// 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() {
 
-    if (plotElement) {
-        console.log("Plotly plot is loaded.");
-        clearInterval(intervalId);
-        hideLoaderAndShowContent();
-    } else {
-        console.log("Plotly plot is not loaded.");
-    }
-}
+    // 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
 
-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.");
-    }
-}
+        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;
+                    }
+                }
+            });
 
-function onPageLoad() {
-    // Replace 'yourElementId' with the ID of the element you want to check
-    checkIfElementLoaded("tornado_main");
+            observer.observe(targetDiv, { childList: true });
+        }
+    }
 }
 
-// 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);
-
+// wait until the whole page has loaded once
+window.addEventListener("load", function() {
+  waitForScriptExecution();
+});
 
 </script>
 

trials.qmd

@@ -2,37 +2,9 @@
 
 Thissince \gls{cnmc} 
 
+  <!-- src="" -->
+
 
-<!-- ```{python}
- import plotly.io as pio 
- pio.renderers.default = "plotly_mimetype+notebook_connected"
-
-# import plotly.io as pio
-import plotly.graph_objects as go
-import numpy as np
-
-# Helix equation
-t = np.linspace(0, 20, 100)
-x, y, z = np.cos(t), np.sin(t), t
-
-fig = go.Figure(data=[go.Scatter3d(
-    x=x,
-    y=y,
-    z=z,
-    mode='markers',
-    marker=dict(
-        size=12,
-        color=z,                # set color to an array/list of desired values
-        colorscale='Viridis',   # choose a colorscale
-        opacity=0.8
-    )
-)])
-
-# tight layout
-fig.update_layout(margin=dict(l=0, r=0, b=0, t=0))
-fig.show()
-
-```  -->
 
 <div>
   <h1>Hello, World!</h1>