Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoranzhou
xiaoranzhou committed Feb 17, 2024
1 parent cfba3c8 commit 4a3bbb7
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 11 deletions.
106 changes: 95 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,65 @@
}
</style>
<body style="background-color: black; background-image: none ;">


<!-- Modal -->
<div class="modal " id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true" style="height:100vh;width:100vw">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="aboutModalLabel"> About this</h1>
<button type="button" class="btn-close" id="aboutModalClose" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" >
<h1 id="cplantbox-visualization-tool">CPlantBox Visualization Tool</h1>
<h2 id="introduction">Introduction</h2>
<p>The CPlantBox Visualization Tool is a web-based application designed for the visualization of plant growth simulations. It is part of Xiaoran Zhou&#39;s PhD thesis and opensourced at <a href="https://github.com/xiaoranzhou/cpb">github</a>.</p>
<h2 id="features">Features</h2>
<ul>
<li>Interactive simulation of plant growth with a variety of plant parameters.</li>
<li>Ability to select or upload parameters for simulation.</li>
<li>Parameter editor for detailed control over simulation inputs.</li>
<li>Simulation time input for controlling the duration of the simulation.</li>
<li>Rotation control to view the plant model from different angles.</li>
<li>Downloadable VTP (Visualization Toolkit Polygon) output of the plant model.</li>
<li>Guided tour for new users to learn how to use the tool.</li>
</ul>
<h2 id="usage">Usage</h2>
<p>To use the tool, follow these steps:</p>
<ol>
<li>Visit the hosted page at <a href="http://xrzhou.com/cpb">xrzhou.com/cpb</a>.</li>
<li>Choose from a list of clickable plant parameter options or upload your own.</li>
<li>Input the desired simulation time.</li>
<li>Use the rotation control to view the plant model from different angles.</li>
<li>Click the simulation button to start the simulation.</li>
<li>Download the VTP file of the plant model after simulation.</li>
</ol>
<h2 id="technical-details">Technical Details</h2>
<p>The tool is implemented in JavaScript and WebAssembly, compiled from the wasm branch of the CPlantBox GitHub repository.</p>
<h2 id="browser-compatibility">Browser Compatibility</h2>
<p>The tool is optimized for Chrome, Edge, Opera, or Safari. Firefox users may experience limited functionality.</p>
<h2 id="license">License</h2>
<p>This project is licensed under the GPL-3.0 license.</p>
<h2 id="contact">Contact</h2>
<p>For any inquiries or support related to the CPlantBox Visualization Tool, please contact Xiaoran Zhou at [email protected].</p>

</div>
<div class="modal-footer">

</div>
</div>
</div>
</div>









<div class="" style="background-color: black; position: absolute; top:calc( 0% );left: 50%;transform: translate(-50%, 0%); ">
<nav class="navbar navbar-dark navbar-expand-lg" style="background-color: #000000;">

Expand All @@ -36,22 +95,45 @@

<ul class="navbar-nav mb-2 mb-lg-0 d-flex justify-content-end">

<li class="nav-item">
<form class="d-flex">

<form class="nav-item d-flex justify-content-end">

<label for="simTimeInput" class="me-2 nav-link">Simulation time</label>
<input class="form-control-sm " id="simTimeInput" type="text"
<label for="simTimeInput" class="me-2 nav-link">Time</label>
<input class="form-control-sm " id="simTimeInput" type="text" style="width: 4em"
onchange="simTime=this.value; " placeholder="10" onkeydown=" if (event.keyCode == 13){event.preventDefault(),runSimulation( XMLParameter, this.value); }";>
</form>

<li class="nav-item d-flex justify-content-end">
</li>
<li class="nav-item">
<button class="nav-link" id="simButton" onclick='loadingModal1.show();runSimulation( XMLParameter, simTime); '>Run Simulation</button>
</li>

<li class="nav-item d-flex justify-content-end">
<button class="nav-link" id="vtpDownloadButton" onclick="saveButton()">Download VTP</button>

<li class="nav-item dropdown">
<button id="toolsDropdown" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Tools
</button>
<ul id="tools" class="dropdown-menu">
<li class="nav-item ">
<button class="nav-link" id="vtpDownloadButton" onclick="saveButton()">Download VTP</button>
</li>
<li class="nav-item ">
<button class="nav-link" id="vtpDownloadButton" onclick="saveData( XMLParameter , simParamName);">Download XML parameter</button>
</li>

<li class="nav-item">
<button class="nav-link" style="cursor: pointer" data-bs-toggle="modal" data-bs-target="#aboutModal" id="aboutButton" >About</button>
</li>


</ul>
</li>
<li class="nav-item dropdown d-flex justify-content-end">





<li class="nav-item dropdown">
<button id="paramDropdown" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Parameters
Expand All @@ -68,9 +150,11 @@

</ul>
</li>
<li class="nav-item d-flex justify-content-end">
<li class="nav-item ">
<button class="nav-link" style="cursor: pointer" onclick="startOrStop()" id="rotationButton" >Rotation</button>
</li>


</ul>
<!--form class="d-flex" role="search">
<input
Expand Down Expand Up @@ -7316,7 +7400,7 @@ <h1 class="modal-title fs-5" id="loadingModalLabel">Simulation Running</h1>
backfaceCulling: !1,
frontfaceCulling: !1,
pointSize: 1,
lineWidth: 8,
lineWidth: 6,
lighting: !0,
shading: !1,
materialName: null,
Expand Down
42 changes: 42 additions & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# CPlantBox Visualization Tool

## Introduction

The CPlantBox Visualization Tool is a web-based application designed for the visualization of plant growth simulations. It is part of Xiaoran Zhou's PhD thesis and is hosted at [xrzhou.com/cpb](http://xrzhou.com/cpb).

## Features

- Interactive simulation of plant growth with a variety of plant parameters.
- Ability to select or upload parameters for simulation.
- Parameter editor for detailed control over simulation inputs.
- Simulation time input for controlling the duration of the simulation.
- Rotation control to view the plant model from different angles.
- Downloadable VTP (Visualization Toolkit Polygon) output of the plant model.
- Guided tour for new users to learn how to use the tool.

## Usage

To use the tool, follow these steps:

1. Visit the hosted page at [xrzhou.com/cpb](http://xrzhou.com/cpb).
2. Choose from a list of clickable plant parameter options or upload your own.
3. Input the desired simulation time.
4. Use the rotation control to view the plant model from different angles.
5. Click the simulation button to start the simulation.
6. Download the VTP file of the plant model after simulation.

## Technical Details

The tool is implemented in JavaScript and WebAssembly, compiled from the wasm branch of the CPlantBox GitHub repository.

## Browser Compatibility

The tool is optimized for Chrome, Edge, Opera, or Safari. Firefox users may experience limited functionality.

## License

This project is licensed under the GPL-3.0 license.

## Contact

For any inquiries or support related to the CPlantBox Visualization Tool, please contact Xiaoran Zhou at [email protected].

0 comments on commit 4a3bbb7

Please sign in to comment.