Skip to content

Commit

Permalink
finally- almost done. Added growth animation and progressbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoranzhou
xiaoranzhou committed Feb 22, 2024
1 parent 475b107 commit 1ac0c7b
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 42 deletions.
1 change: 1 addition & 0 deletions css/bootstrap.min.css.map
View file

Large diffs are not rendered by default.

177 changes: 135 additions & 42 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ <h2 id="contact">Contact</h2>
</li>
<li class="nav-item " id="attributeMenu">
</li>
<li class="nav-item " id="opacityMenu">
</li>
<li class="nav-item " id="growMenu">
<button class="nav-link" id="vtpDownloadButton" onclick="grow()">Growth Animation</button>
</li>
<li class="nav-item ">
<button class="nav-link" id="vtpDownloadButton" onclick="saveButton()">Download VTP</button>
</li>
Expand Down Expand Up @@ -192,6 +197,7 @@ <h2 id="contact">Contact</h2>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>

</div>
<div class="toast align-items-center m-5 top-0 start-50 translate-middle-x position-absolute" data-bs-delay="10000" style="z-index:9999;" role="alert" aria-live="assertive" aria-atomic="true" id="XMLTo">
<div class="d-flex">
Expand All @@ -205,9 +211,11 @@ <h2 id="contact">Contact</h2>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div class="content row GeometryViewer-module-fullScreen_RWlQz" style="height: 100vh; width: 100vw; position: static;"></div>

<div class="content row GeometryViewer-module-fullScreen_RWlQz" style="height: calc(100vh-30px); width: 100vw; position: static;"></div>

<div class="progress" id="BarOut" role="progressbar" style="height :30px;" aria-label="Animated striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div id="BarIn" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="Paramoffcanvas"
aria-labelledby="offcanvasScrollingLabel" style=" width:40vw; top: 10vh; height: 85vh; border-radius:0px 15px 15px 0px;">
<div class="offcanvas-header">
Expand Down Expand Up @@ -288,7 +296,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
var simParamName = "leaf.xml";
var simTime = "180";
var rotationInterval;
var distance;
var distance, timeStep;
/*! For license information please see GeometryViewer.js.LICENSE.txt */
!(function () {
var e = {
Expand Down Expand Up @@ -7411,7 +7419,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
const ma = {
color: [1, 1, 1],
ambientColor: [1, 1, 1],
diffuseColor: [1, 1, 1],
diffuseColor: [0, 0, 0],
specularColor: [1, 1, 1],
edgeColor: [0, 0, 0],
ambient: 0,
Expand Down Expand Up @@ -9324,7 +9332,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
(e = 0);
for (let r = 3; r < t.table.length && e; r += 4)
t.table[r] < 255 && (e = !1);
(t.opaqueFlag = e), t.opaqueFlagBuildTime.modified();
(t.opaqueFlag = false), t.opaqueFlagBuildTime.modified(); // modified: Todo (t.opaqueFlag = e)
}
return t.opaqueFlag;
}),
Expand Down Expand Up @@ -9897,10 +9905,11 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
values: new Float32Array(2 * a),
});
let s = t.lookupTable.getVectorComponent();
let lt = t.lookupTable;
//lt.setMappingRange(0, 40),
let lt = t.lookupTable;
window.ltttt = lt;
lt.setMappingRange(0, window.timeStep),
lt.setUseAboveRangeColor(true),
lt.setAboveRangeColor(1.0, 1.0, 1.0,0),
lt.setAboveRangeColor(0.0, 0.0, 0.0 , 0),
lt.build();
lt.updateRange(),
lt.getVectorMode() === nl.MAGNITUDE &&
Expand Down Expand Up @@ -23448,7 +23457,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
0.0147555, 0.471572, 0.912191, 0.808018, 0, 0.605351,
0.962848, 0.710445, 0, 0.73913, 0.999469, 0.600258, 0.0176284,
0.87291, 0.994156, 0.445975, 0.193912, 0.999, 0.980407, 0.247105,
0.262699,1, 0,0,0
0.262699
],
},
{
Expand Down Expand Up @@ -27485,11 +27494,13 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
if (n === Hm.RGBA)
for (let t = 0; t < a; t++) {
const r = u[t * s + o];
e.getColor(r, c),
e.getColor(r, c);
const op =((c[0] == 0.0) && (c[1] == 0.0) && (c[2] == 0.0) )? 0:Math.floor(255 * e.getAlpha() + 0.5); // todo op
// console.log("opacity is "+op);
(l[4 * t] = Math.floor(255 * c[0] + 0.5)),
(l[4 * t + 1] = Math.floor(255 * c[1] + 0.5)),
(l[4 * t + 2] = Math.floor(255 * c[2] + 0.5)),
(l[4 * t + 3] = i);
(l[4 * t + 3] = op );
}
if (n === Hm.RGB)
for (let t = 0; t < a; t++) {
Expand Down Expand Up @@ -28036,17 +28047,17 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
});
}
const og = {
position: [0, 0, 1],
focalPoint: [0, 0, 0],
position: [0, 0, 0],
focalPoint: [0, 0, -3],
viewUp: [0, 1, 0],
directionOfProjection: [0, 0, -1],
parallelProjection: !1,
useHorizontalViewAngle: !1,
viewAngle: 30,
viewAngle: 20,
parallelScale: 1,
clippingRange: [0.01, 1000.01],
clippingRange: [-1000.01, 1000.01],
windowCenter: [0, 0],
viewPlaneNormal: [0, 1, 1],
viewPlaneNormal: [0, 1.5, 0],
useOffAxisProjection: !1,
screenBottomLeft: [-0.5, -0.5, -0.5],
screenBottomRight: [0.5, -0.5, -0.5],
Expand Down Expand Up @@ -28138,7 +28149,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
Math.sin(n),
Math.cos(n) * Math.cos(o)
),
e.setFocalPoint(0, 0, 0),
e.setFocalPoint(0, 0, -3),
e.setPositional(0);
}),
(e.setLightTypeToHeadLight = () => {
Expand All @@ -28160,7 +28171,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
intensity: 1,
color: [1, 1, 1],
position: [0, 0, 1],
focalPoint: [0, 0, 0],
focalPoint: [0, 0, -3],
positional: !1,
exponent: 1,
coneAngle: 30,
Expand Down Expand Up @@ -28570,7 +28581,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
if (!e.getActiveCamera())
return yg("Trying to reset non-existent camera"), !1;
(a = t.activeCamera.getViewPlaneNormal()),
t.activeCamera.setViewAngle(30),
t.activeCamera.setViewAngle(20),
(i[0] = (n[0] + n[1]) / 2),
(i[1] = (n[2] + n[3]) / 2),
(i[2] = (n[4] + n[5]) / 2);
Expand Down Expand Up @@ -37318,15 +37329,16 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
c.setAttribute("class", E_.control),
//c.appendChild(l),
//c.appendChild(o),
document.getElementById("colorMenu").appendChild(n),
document.getElementById("attributeMenu").appendChild(i),

document.getElementById("colorMenu").replaceChildren(n),
document.getElementById("attributeMenu").replaceChildren(i),
//c.appendChild(a),
document.getElementById("attributeMenu").appendChild(s),
document.getElementById("opacityMenu").replaceChildren(s),
void 0 !== navigator.xr &&
N_.getXrSupported() &&
null !== G_ &&
c.appendChild(u),
z_.appendChild(c);
c.replaceChildren(u),
z_.replaceChildren(c);
const d = Xx.newInstance();
d.parseAsArrayBuffer(t);
const p = tg.newInstance(),
Expand All @@ -37342,14 +37354,6 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
y = [].concat(g ? g.getRange() : [0, 1]);
let v = ka;

function setRange(start,end) {
const e = Gm.getPresetByName(n.value);
p.applyColorMap(e),
p.setMappingRange(start, end),
p.updateRange(),
P_.render();
};
window.setRange = setRange;
function b() {
const e = Gm.getPresetByName(n.value);
p.applyColorMap(e),
Expand Down Expand Up @@ -37385,12 +37389,14 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
label: `(c) ${e.getName()}`,
value: `CellData:${e.getName()}`,
}))
);} else {
);


} else {
x = [{ value: ":", label: "Solid Color" },{ value: ":", label: "Solid Color" }];

}


function _(e) {
const [t, r] = e.target.value.split(":"),
n = "PointData" === t;
Expand Down Expand Up @@ -37431,7 +37437,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
scalarVisibility: s,
}),
b();
}
};
if (browserName != "Firefox"){
(i.innerHTML = x
.map(
Expand Down Expand Up @@ -37485,12 +37491,14 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
P_.render();
//console.log("focalPoint is: "+O_.getActiveCamera().getFocalPoint());
distance = O_.getActiveCamera().getDistance()/2;

ltttt.setMappingRange(0, window.timeStep),
ltttt.build(),
ltttt.updateRange(),
(r.g.pipeline[e] = {
actor: m,
mapper: h,
source: f,
lookupTable: p,
lookupTable: ltttt, // was p
renderer: O_,
renderWindow: P_,
}),
Expand All @@ -37510,11 +37518,15 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
// O_.getActiveCamera().setPosition(distance*Math.sin(xxx*3.1415926/400), distance*Math.cos(xxx*3.1415926/400), distance),
// O_.getActiveCamera().setFocalPoint(0,0,0),
// O_.getActiveCamera().setViewUp(0,0,1),
distance = O_.getActiveCamera().getDistance()/2;
ltttt.setMappingRange(0, window.timeStep),
ltttt.build(),
ltttt.updateRange();

const r = O_.getActiveCamera();
r.azimuth(0.5),

r.setFocalPoint(0,0,-3),
//r.setFocalPoint(0,0,-3),
r.setViewUp(0,0,0.00001),
r.setViewAngle(20),
//r.zoom(-10),
Expand All @@ -37527,6 +37539,24 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
};
window.startOrStop= startOrStop;
startOrStop();
function refresh(){
distance = O_.getActiveCamera().getDistance()/2;
ltttt.setMappingRange(0, window.timeStep),
ltttt.build(),
ltttt.updateRange();

//const r = O_.getActiveCamera();
//r.azimuth(0.5),

//r.setFocalPoint(0,0,-3),
//r.setViewUp(0,0,0.00001),
//r.setViewAngle(20),
//r.zoom(-10),
P_.render(),
W_.update();

}
window.refresh = refresh;
}
function X_(e) {
const t = new FileReader();
Expand Down Expand Up @@ -76476,7 +76506,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
`\n\n.GeometryViewer-module-rootController_uBiGG
{\n display: block; \n align-items: center ;\n flex-direction: column;\n position: static;\n bottom: 5px;\n left: 5px;\n right: 5px;\n z-index: 1;\n}\n\n
.GeometryViewer-module-control_LaXi4 { position: static;\n ;\n display: flex; \n margin:auto;\n flex-direction: row;\n flex: 1;\n align-items: center;\n}\n\n
.GeometryViewer-module-fullScreen_RWlQz {\n position: static;\n width: 100vw;\n height: calc(100vh - 56px);\n top: 0;\n left: 0;\n overflow: hidden;\n background: black;\n margin: 0;\n padding: 0;\n z-index: -1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n
.GeometryViewer-module-fullScreen_RWlQz {\n position: static;\n width: 100vw;\n height: calc(100vh - 30px);\n top: 0;\n left: 0;\n overflow: hidden;\n background: black;\n margin: 0;\n padding: 0;\n z-index: -1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n
.GeometryViewer-module-fullParentSize_LzcO5 {\n position: static;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n\n
.GeometryViewer-module-bigFileDrop_taNXL {\n position: static;\n left: 50%;\n t: 50%;\n transform: translate(-50%, -50%);\n background-color: black;\n
background-image: url(` +
Expand Down Expand Up @@ -76812,6 +76842,8 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
console.log("can not find the file")
upload.dispatchEvent(new Event('change', { 'bubbles': true }));
}


}

function saveButton() {
Expand Down Expand Up @@ -76878,7 +76910,23 @@ <h2 class="accordion-header">
htmlText += `</div>`;
editor.innerHTML = htmlText;
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function grow() {
if (1 <19999999){
for (i=0; i<101; i++){

await sleep(40);
//window.startOrStop();
//window.timeStep = i*(simTime/100 );
document.getElementById("BarOut").setAttribute("aria-valuenow", i);
document.getElementById("BarIn").setAttribute("style", "width: "+i+"%");
//document.getElementById("VTPInput2").dispatchEvent(new Event('change', { 'bubbles': true }));
//console.log("growing plants animation, step: " + i);
}
}
}
function runSimulation(text, simTime = simTime) {
try {
showModal();
Expand All @@ -76893,13 +76941,16 @@ <h2 class="accordion-header">
FS.writeFile(simParamName, text);
document.getElementById("XMLEditor").innerText= text;
setTimeout(() => { callMain([simParamName, simTime]); loadVTP() }, 0);

window.timeStep = simTime;
const Parameditor = new bootstrap.Offcanvas('#Paramoffcanvas');
grow();
if (window.innerWidth > 1000) Parameditor.show();
document.getElementById("simTimeInput").value = simTime;
//saveData(FS.readFile("output.vtp", { encoding: "utf8" }),"1.vtp")
//setTimeout(() => { ; }, 200);




}
catch (error) {
alert(error);
Expand Down Expand Up @@ -77044,11 +77095,53 @@ <h2 class="accordion-header">
}
urlAccess();
});

function mousePos(event){
const i = event.clientX/window.innerWidth*100;
//console.log("event.clientX/window.innerWidth = " + i);
document.getElementById("BarOut").setAttribute("aria-valuenow",i ) ;
document.getElementById("BarIn").setAttribute("style", "width: "+i+"%");

}

document.getElementById("BarIn").addEventListener("mousemove", (event) => {
mousePos(event)
});




document.getElementById("BarOut").addEventListener("mousemove", (event) => {
mousePos(event)
});


var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {

if (mutation.type === "attributes") {
console.log("attributes changed");
window.timeStep = parseInt(document.getElementById("BarOut").getAttribute("aria-valuenow"))*(simTime/100 );
if(rotationInterval == 0) {
refresh();
}
}

//console.log(mutation.target);
});
});

observer.observe(document.getElementById("BarOut"), {
attributes: true //configure it to listen to attribute changes
});


addEventListener("hashchange", (event) => {

if (document.getElementById("uploadParam").files.length == 0){
urlAccess();
}
}

});

function validateXML(xmlString) {
Expand Down
Binary file removed js/UI.pdf
View file
Binary file not shown.
1 change: 1 addition & 0 deletions js/bootstrap.bundle.min.js.map
View file

Large diffs are not rendered by default.

0 comments on commit 1ac0c7b

Please sign in to comment.