Spaces:
Running
Running
# 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> | |