Leaf-Glucose-Simulation

A simulation that demonstrates what happens inside a leaf during Photosynthesis with emphasis on glucose production/storage/usage

Demo

Lights On,Off

Lights Full,3/4,1/2,1/4,Off

Lights Full,3/4,1/2,1/4,Off, No Graph

Lights On,Off, Water control enabled

Simulation Configuration

You can configure the simulation at the beginning by passing in these GET parameters to the model:

• numDays={1+} (default: 20)
• numLightOptions={2,3,5} (default: 2)
• showEnergyNeeds={true,false} (default: false). Toggles energy needs indication section and battery animation
• showGraph={true,false} (default: true)
• showGraphBackground={true,false} (default: false). Toggles plot band background
• showLineGlucoseMade={true,false} (default: true)
• showLineGlucoseUsed={true,false} (default: true)
• showLineGlucoseStored={true,false} (default: true)
• showOrganelles={true,false} (default: true)
• showPlant={true,false} (default: true)
• showSpeedControls={true,false} (default: false)
• showWater={true,false} (default: false)
• enableInputControls={true,false} (default: true)
• lightLevelLabels={comma-separated string} (default: "OFF,ON")
• waterLevelLabels={comma-separated string} (default: "NO,YES") Ex: "250mL,500mL"

Screenshots

Simulation Start

Day 3 (light on)

Day 15 (light off)

Development

You will need NPM (https://www.npmjs.com) and Git.

1. Checkout the project

$ git clone https://github.com/WISE-Community/Leaf-Glucose-Simulation.git

2. Install gulp globally

$ cd Leaf-Glucose-Simulation
Leaf-Glucose-Simulation$ npm install -g gulp-cli

3. Install dependencies

Leaf-Glucose-Simulation$ npm install

4. Start gulp task. This will start a running process to copy files and compile changes to typescript files.

Leaf-Glucose-Simulation$ gulp

5. See the model on the browser by going to path_to_Leaf-Glucose-Simulation/dist/index.html . (e.g. file:///Users/myusername/dev/Leaf-Glucose-Simulation/dist/index.html)

6. Make changes with your favorite IDE. Changes to typescript will be immediately compiled to the dist folder.

7. See you change in the browser by refreshing the page.

Resources

This is a good resource on using Gulp and TypeScript: https://www.typescriptlang.org/docs/handbook/gulp.html