Hodgkin-Huxley model simulation for the browser! https://nmjs.yarmo.eu
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
8.2 KiB

<!DOCTYPE html>
<html>
<head>
<title>NeuroModelJS</title>
<meta name="description" content="Interactive Javascript Simulation of the Hodgkin-Huxley Model for Action Potential Generation in the Squid Giant Axon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="css/styles.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/dependencies/jquery.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.event.drag.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.canvaswrapper.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.colorhelpers.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.drawSeries.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.saturated.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.browser.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.uiConstants.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.legend.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.hover.js"></script>
<script type="text/javascript" src="js/dependencies/jquery.flot.navigate.js"></script>
<script type="text/javascript" src="js/dependencies/bootstrap.min.js"></script>
<script type="text/javascript" src="js/model/getSimulationParams.js"></script>
<script type="text/javascript" src="js/model/getModelPreset.js"></script>
<script type="text/javascript" src="js/model/HodgkinHuxleySim.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link href="fonts/overpass/overpass.css" rel="stylesheet" media="screen">
<link href="fonts/open_sans/open-sans.expanded.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="main">
<h1>NeuroModelJS — <span>Action Potential</span></h1>
<div id="modelSimContainer">
<div id="modelSim"></div>
<div id="modelSim--snapshots"></div>
</div>
</div>
<div class="config">
<div class="panels">
<div class="panel panel--monitor">
<h2>Monitor</h2>
<p class="monitor--mp clr--mp"></p>
<p class="monitor--iinj clr--iinj"></p>
<p class="monitor--ik clr--ik"></p>
<p class="monitor--gk clr--gk"></p>
<p class="monitor--ina clr--ina"></p>
<p class="monitor--gna clr--gna"></p>
</div>
</div>
<div class="panels">
<div class="panel panel--simulation">
<h2>Display</h2>
<div class="panel__checkboxes">
<input type="checkbox" name="disp--mp" id="disp--mp" checked="checked"><div class="panel__input panel__input--checkbox clr--mp"><span class="label"><label for="disp--mp">Vm</label></span></div>
<input type="checkbox" name="disp--iinj" id="disp--iinj" checked="checked"><div class="panel__input panel__input--checkbox clr--iinj"><span class="label"><label for="disp--iinj">Iinj</label></span></div>
<input type="checkbox" name="disp--ik" id="disp--ik" checked="checked"><div class="panel__input panel__input--checkbox clr--ik"><span class="label"><label for="disp--ik">IK</label></span></div>
<input type="checkbox" name="disp--gk" id="disp--gk" checked="checked"><div class="panel__input panel__input--checkbox clr--ik"><span class="label"><label for="disp--gk">GK</label></span></div>
<input type="checkbox" name="disp--ek" id="disp--ek"><div class="panel__input panel__input--checkbox clr--ik"><span class="label"><label for="disp--ek">EK</label></span></div>
<input type="checkbox" name="disp--ina" id="disp--ina" checked="checked"><div class="panel__input panel__input--checkbox clr--ina"><span class="label"><label for="disp--ina">INa</label></span></div>
<input type="checkbox" name="disp--gna" id="disp--gna" checked="checked"><div class="panel__input panel__input--checkbox clr--ina"><span class="label"><label for="disp--gna">GNa</label></span></div>
<input type="checkbox" name="disp--ena" id="disp--ena"><div class="panel__input panel__input--checkbox clr--ina"><span class="label"><label for="disp--ena">ENa</label></span></div>
</div>
</div>
</div>
<div class="panels">
<div class="panel panel--stim">
<h2>Stimulus 1</h2>
<div class="panel__input"><span class="label">Start <span class="unit">(ms)</span></span><input type="number" name="inj1Start" value="1"></div>
<div class="panel__input"><span class="label">Duration <span class="unit">(ms)</span></span><input type="number" name="inj1Dur" value="0.25"></div>
<div class="panel__input"><span class="label">Amplitude <span class="unit">(nA/cm^2)</span></span><input type="number" name="inj1Amp" value="100" step="5"></div>
</div>
<div class="panel panel--stim">
<h2>Stimulus 2</h2>
<div class="panel__input"><span class="label">Start <span class="unit">(ms)</span></span><input type="number" name="inj2Start" value="8"></div>
<div class="panel__input"><span class="label">Duration <span class="unit">(ms)</span></span><input type="number" name="inj2Dur" value="0.25"></div>
<div class="panel__input"><span class="label">Amplitude <span class="unit">(nA/cm^2)</span></span><input type="number" name="inj2Amp" value="0" step="5"></div>
</div>
</div>
<div class="panels">
<div class="panel panel--model">
<h2>Model</h2>
<div class="panel__input"><span class="label">Total length <span class="unit">(ms)</span></span><input type="number" name="dur" value="10" step="2"></div>
<div class="panel__input"><span class="label">VRest <span class="unit">(mV)</span></span><input type="number" name="VRest" value="-50.8"></div>
<div class="panel__input"><span class="label">V0 <span class="unit">(mV)</span></span><input type="number" name="V0" value="-60.8"></div>
<div class="panel__input"><span class="label">EK <span class="unit">(mV)</span></span><input type="number" name="EK" value="-73.3"></div>
<div class="panel__input"><span class="label">ENa <span class="unit">(mV)</span></span><input type="number" name="ENa" value="41.3"></div>
</div>
<div class="panel panel--advanced">
<h2>Model (advanced)</h2>
<div class="panel__input"><span class="label">C <span class="unit">(uF/cm^2)</span></span><input type="number" name="C" value="1"></div>
<div class="panel__input"><span class="label">GKMax <span class="unit">(mS/cm^2)</span></span><input type="number" name="GKMax" value="36"></div>
<div class="panel__input"><span class="label">GNaMax <span class="unit">(mS/cm^2)</span></span><input type="number" name="GNaMax" value="120"></div>
<div class="panel__input"><span class="label">Gm <span class="unit">(mS/cm^2)</span></span><input type="number" name="Gm" value="0.3"></div>
</div>
</div>
<p class="source">Made by Yarmo Mackenbach (<a href="https://git.yarmo.eu/yarmo/neuromodeljs">Source code</a>)</p>
</div>
</div>
</body>
</html>