limits/ltg.html at master · bit-player/limits · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Limits to Growth (1972)</title>
    <script type="text/javascript" src="html5slider.js"></script>
    <script type="text/javascript" src="ltg.js"></script>
    <link rel="stylesheet" type="text/css" href="ltg-styles.css">
  </head>
  <body onload="setUpModel();">
    <div class="container">
      <div class="content">
        <div id="header">
          <h2>The Limits to Growth</h2>
        </div>
        <div id="chart">
          <canvas id="cv" width="800" height="450">
            <h3>Sorry, this page requires the HTML "canvas" element, which your browser doesn't seem to support.</h3>
            <p>Browsers that should work include the latest versions of Firefox, Google Chrome, Safari and Opera. Version 9.0 of Internet Explorer may also work.</p>
          </canvas>
        </div>
        <div id="controls">
        	<div id="sliders">
	          <div class="slider-set">
            	<label for="duration">model duration (years)</label>
            	<input id="duration-slider" name="duration-slider" type="range" class="slider" min="100" max="500" step="50" value="200" onchange="changeDuration()"/>
            	<span id="duration-readout" class="slider-readout">200</span>
          	</div>
          	<div class="slider-set">
            	<label for="dt-slider">time step (years)</label>
            	<input id="dt-slider" name="dt-slider" type="range" class="slider" min="-4" max="1" step="1" value="-1" onchange="changeDt()"/>
            	<span id="dt-readout" class="slider-readout">1</span>
          	</div>
          	<div class="slider-set">
            	<label for="resource-slider">initial resources multiplier</label>
            	<input id="resource-slider" name="resource-slider" type="range" class="slider" min="-3" max="5" step="1" value="0" onchange="changeResources()"/>
            	<span id="resource-readout" class="slider-readout">1</span>
            </div>
          	<div class="slider-set">
            	<label for="consumption-slider">output consumed (fraction)</label>
            	<input id="consumption-slider" name="consumption-slider" type="range" class="slider" min="0.0" max="1.0" step="0.01" value="0.43" onchange="changeConsumption()"/>
            	<span id="consumption-readout" class="slider-readout">0.43</span>
          	</div>
          </div>
          <div id="checkboxes">
            <p style="text-align: center; height: 16px"><strong>Variables to Plot</strong></p>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="population-ck" name="population" type="checkbox" checked onchange="pollCheckBoxes()"/>population</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="resources-ck" name="nonrenewableResourceFractionRemaining" type="checkbox" checked onchange="pollCheckBoxes()"/>resources</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="food-ck" name="foodPerCapita" type="checkbox" checked onchange="pollCheckBoxes()" />food per capita</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="industry-ck" name="industrialOutputPerCapita" type="checkbox" checked onchange="pollCheckBoxes()" />industrial output</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="service-ck" name="serviceOutput" type="checkbox" onchange="pollCheckBoxes()" />services output</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="pollution-ck" name="indexOfPersistentPollution" type="checkbox" checked onchange="pollCheckBoxes()" />pollution index</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="life-expect-ck" name="lifeExpectancy" type="checkbox" checked onchange="pollCheckBoxes()" />life expectancy</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="birth-rate-ck" name="crudeBirthRate" type="checkbox" onchange="pollCheckBoxes()"/>birth rate</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="death-rate-ck" name="crudeDeathRate" type="checkbox" onchange="pollCheckBoxes()"/>death rate</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="arable-land-ck" name="arableLand" type="checkbox" onchange="pollCheckBoxes()"/>arable land</label><br/>
            </div>
            <div class="checkbox-line">
              <div class="color-sample"></div>
              <label><input id="land-yield-ck" name="landYield" type="checkbox" onchange="pollCheckBoxes()"/>land yield</label><br/>
            </div>
<!--
            <div class="select-line">
              <div class="color-sample"></div>
              <label><input id="select-var-ck" name="agriculturalInputs" type="checkbox" onchange="changeMenuVar()"/></label>
              <select id="menuOfVars" onchange="changeMenuVar()"> </select>
            </div>
-->
          </div>
          <button id="run" title="Run the model" onclick="runModel();">Run</button>
          <button id="reset" title="Erase the graph" onclick="resetModel();">Reset</button>
          <button id="defaults" title="All parameters to default values" onclick="setDefaults();">Defaults</button>
          <button id="fast-run" title="Run the model at full speed" onclick="fastRun();">Run Fast</button>
        </div>
      </div>
    </div>
  </body>
</html>