Trials/1_Python_Code_Qmd.qmd

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