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.

index.html 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>NeuroModelJS</title>
  5. <meta name="description" content="Interactive Javascript Simulation of the Hodgkin-Huxley Model for Action Potential Generation in the Squid Giant Axon">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  8. <link href="css/styles.css" rel="stylesheet" media="screen">
  9. <script type="text/javascript" src="js/dependencies/jquery.js"></script>
  10. <script type="text/javascript" src="js/dependencies/jquery.event.drag.js"></script>
  11. <script type="text/javascript" src="js/dependencies/jquery.mousewheel.js"></script>
  12. <script type="text/javascript" src="js/dependencies/jquery.canvaswrapper.js"></script>
  13. <script type="text/javascript" src="js/dependencies/jquery.colorhelpers.js"></script>
  14. <script type="text/javascript" src="js/dependencies/jquery.flot.js"></script>
  15. <script type="text/javascript" src="js/dependencies/jquery.flot.axislabels.js"></script>
  16. <script type="text/javascript" src="js/dependencies/jquery.flot.drawSeries.js"></script>
  17. <script type="text/javascript" src="js/dependencies/jquery.flot.saturated.js"></script>
  18. <script type="text/javascript" src="js/dependencies/jquery.flot.browser.js"></script>
  19. <script type="text/javascript" src="js/dependencies/jquery.flot.uiConstants.js"></script>
  20. <script type="text/javascript" src="js/dependencies/jquery.flot.legend.js"></script>
  21. <script type="text/javascript" src="js/dependencies/jquery.flot.crosshair.js"></script>
  22. <script type="text/javascript" src="js/dependencies/jquery.flot.hover.js"></script>
  23. <script type="text/javascript" src="js/dependencies/jquery.flot.navigate.js"></script>
  24. <script type="text/javascript" src="js/dependencies/bootstrap.min.js"></script>
  25. <script type="text/javascript" src="js/model/getSimulationParams.js"></script>
  26. <script type="text/javascript" src="js/model/getModelPreset.js"></script>
  27. <script type="text/javascript" src="js/model/HodgkinHuxleySim.js"></script>
  28. <script type="text/javascript" src="js/script.js"></script>
  29. <link href="fonts/overpass/overpass.css" rel="stylesheet" media="screen">
  30. <link href="fonts/open_sans/open-sans.expanded.css" rel="stylesheet" media="screen">
  31. </head>
  32. <body>
  33. <div class="container">
  34. <div class="main">
  35. <h1>NeuroModelJS — <span>Action Potential</span></h1>
  36. <div id="modelSimContainer">
  37. <div id="modelSim"></div>
  38. <div id="modelSim--snapshots"></div>
  39. </div>
  40. </div>
  41. <div class="config">
  42. <div class="panels">
  43. <div class="panel panel--monitor">
  44. <h2>Monitor</h2>
  45. <p class="monitor--mp clr--mp"></p>
  46. <p class="monitor--iinj clr--iinj"></p>
  47. <p class="monitor--ik clr--ik"></p>
  48. <p class="monitor--gk clr--gk"></p>
  49. <p class="monitor--ina clr--ina"></p>
  50. <p class="monitor--gna clr--gna"></p>
  51. </div>
  52. </div>
  53. <div class="panels">
  54. <div class="panel panel--simulation">
  55. <h2>Display</h2>
  56. <div class="panel__checkboxes">
  57. <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>
  58. <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>
  59. <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>
  60. <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>
  61. <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>
  62. <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>
  63. <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>
  64. <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>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="panels">
  69. <div class="panel panel--stim">
  70. <h2>Stimulus 1</h2>
  71. <div class="panel__input"><span class="label">Start <span class="unit">(ms)</span></span><input type="number" name="inj1Start" value="1"></div>
  72. <div class="panel__input"><span class="label">Duration <span class="unit">(ms)</span></span><input type="number" name="inj1Dur" value="0.25"></div>
  73. <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>
  74. </div>
  75. <div class="panel panel--stim">
  76. <h2>Stimulus 2</h2>
  77. <div class="panel__input"><span class="label">Start <span class="unit">(ms)</span></span><input type="number" name="inj2Start" value="8"></div>
  78. <div class="panel__input"><span class="label">Duration <span class="unit">(ms)</span></span><input type="number" name="inj2Dur" value="0.25"></div>
  79. <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>
  80. </div>
  81. </div>
  82. <div class="panels">
  83. <div class="panel panel--model">
  84. <h2>Model</h2>
  85. <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>
  86. <div class="panel__input"><span class="label">VRest <span class="unit">(mV)</span></span><input type="number" name="VRest" value="-50.8"></div>
  87. <div class="panel__input"><span class="label">V0 <span class="unit">(mV)</span></span><input type="number" name="V0" value="-60.8"></div>
  88. <div class="panel__input"><span class="label">EK <span class="unit">(mV)</span></span><input type="number" name="EK" value="-73.3"></div>
  89. <div class="panel__input"><span class="label">ENa <span class="unit">(mV)</span></span><input type="number" name="ENa" value="41.3"></div>
  90. </div>
  91. <div class="panel panel--advanced">
  92. <h2>Model (advanced)</h2>
  93. <div class="panel__input"><span class="label">C <span class="unit">(uF/cm^2)</span></span><input type="number" name="C" value="1"></div>
  94. <div class="panel__input"><span class="label">GKMax <span class="unit">(mS/cm^2)</span></span><input type="number" name="GKMax" value="36"></div>
  95. <div class="panel__input"><span class="label">GNaMax <span class="unit">(mS/cm^2)</span></span><input type="number" name="GNaMax" value="120"></div>
  96. <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>
  97. </div>
  98. </div>
  99. <p class="source">Made by Yarmo Mackenbach (<a href="https://git.yarmo.eu/yarmo/neuromodeljs">Source code</a>)</p>
  100. </div>
  101. </div>
  102. </body>
  103. </html>