-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
297 lines (281 loc) · 17.2 KB
/
index.html
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LUCST</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
<meta http-equiv="Pragma" content="no-cache" />
<!-- <meta http-equiv="Expires" content="0"/> -->
<meta name="Authour" content="Alex Rigby">
<!-- <meta name="description" content="a test of how to use CSS"> -->
<!-- <meta name="keywords" content="CSS, HTML, Learning"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/CSS" href="CSS/main.css" />
<!--leaflet.css, always put before link to leaflet.js-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<!-- vega lite for visualization -->
<script src="https://cdn.jsdelivr.net/npm/vega@5.19.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"></script>
<!-- leaflets.js for maps-->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- <script src="/js/plugins/Leaflet-Select-Polygons.js"></script> -->
<script src="/js/plugins/jquery.js"></script>
<!--leaflets plugin to lasso objects on map-->
<script src="https://unpkg.com/leaflet-lasso@2.2.3/dist/leaflet-lasso.umd.min.js"></script>
<!-- leaflets plugins for reading Shapefiles-->
<script src="/js/plugins/catiline.js"></script>
<script src="/js/plugins/leaflet.shpfile.js"></script>
<script src="/js/plugins/shp.js"></script>
<!--d3.js plugin for converting txt files to objects-->
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<!--main js-->
<script defer async type='module' src="js/main.js"></script>
</head>
<body class="wrapper">
<div class="background">
<header>
<div class="logo"><a href="#">LUC SWAT+ Toolkit</a></div>
<div class="upload" id="upload">
<form>
<input type="text" id="myFile" name="filePath">
<button type="button" id="link" style="color:black"> link </button>
</form>
</div>
<nav>
<ul>
<!-- <li>
<a href="" id="download" download>Download<br> hru-data.hru</a>
</li>
<li class="luDownload">
<a href="" id="downloadLanduse" download>Dowload <br> landuse.lum</a>
</li>
<li class="plantDownload">
<a href="" id="downloadPlant" download>Download <br> plant.ini</a>
</li> -->
<!-- <li>
<div id="uploadButton">Link <br> Catchment</div>
</li> -->
<li class="createScenario">
<a href="" id="createNewScenario">Create New Scenario</a>
</li>
</ul>
</nav>
</header>
<main id="popUpClose">
<div class="flex1" id="popupClose">
<div id="map"></div>
<div id="lassoControl"></div>
<div class="changes" id="hruChange">
<table id="hruTable">
<thead>
<tr>
<th>HRUs</th>
<th>Current Landuse</th>
<th>New Land Use</th>
</tr>
</thead>
<tbody id='result' class='scrol'></tbody>
</table>
</div>
</div>
</main>
</div>
<footer>
<div class="flex2">
<div class="pop-up-plant" id="plantForm">
<form title="New plant_comm">New plant Community<br><br>
<label title="plt_name: SWAT+ plant types
file: plant.ini" for="plant_name">Plant Name</label> <br>
<select title="plt_name: SWAT+ plant types
file: plant.ini" id="plantNames">
</select><br>
<label title="pcom_name: Name of the plant community">Plant Community Name</lable> <br>
<input type="text" name="plantComName" id="plantComName"> <br>
<!-- <label for="plt_cnt">Types of Plant in Community</label><br>
<input type="number" id="plt_cnt" name="plt_cnt"> <br> -->
<label title="rot_yr_ini: year of simulation plant first comes into rotation"
for="rot_yr_ini">Rotation Begining Year</label><br>
<input title="rot_yr_ini: year of simulation plant first comes into rotation" type="number"
id="rot_yr_ini" name="rot_yr_ini"> <br>
<!-- <label for="plt_name">Plant Name</label><br>
<input type="text" id="plt_name" name="plt_name"> <br> -->
<label title="lc_status: do the plants provide land cover at the beginning of the simulation"
for="lc_status" class="lc_status">Landcover Status</label><br>
<!-- <input list="lc_status" name="lc_status" id="lc_statusDatalist"> -->
<select title="lc_status: do the plants provide land cover at the beginning of the simulation"
id="lc_status">
<option value="y">y
<option value="n">n
</select> <br>
<label title="lai_init: initial leaf area per unit of ground/trunk area of a plant"
for="lai_init">Initial Leaf Area Index</label><br>
<input title="lai_init: initial leaf area per unit of ground/trunk area of a plant" type="number"
id="lai_init" name="lai_init"> <br>
<label title="bm_init: initial dry biomass in kg/ha " for="bm_init">Initial Dry Biomass</label><br>
<input title="bm_init: initial dry biomass in kg/ha " type="number" id="bm_init" name="bm_init">
<br>
<label title="phu_init: number of growing degree days needed to bring plant to maturity "
for="phu_init">Heat Units to Maturity</label><br>
<input title="phu_init: number of growing degree days needed to bring plant to maturity "
type="number" id="phu_init" name="phu_init"> <br>
<label title="plant_pop: plant population" for="plnt_pop">Plant Population</label><br>
<input title="plant_pop: plant population" type="number" id="plantPop" name="plnt_pop"> <br>
<label title="yrs_init: number of years until plant is mature" for="yrs_init">Years to
maturity</label><br>
<input title="yrs_init: number of years until plant is mature" type="number" id="yrs_init"
name="yrs_init"> <br>
<label title="rsd_init: initial residue cover/stover in kg/ha" for="rsd_init">Initial Residue
Cover</label><br>
<input title="rsd_init: initial residue cover/stover in kg/ha" type="number" class="rsd_init"
id="rsd_init" name="rsd_init"></input> <br> <br>
<button type="button" id="newPlantButton">Make</button>
<button type="reset" id="newPlantReset">Reset</button>
</form>
</div>
<div class="pop-up-lu" id="luForm">
<form title="New Landuse" id="landuseForm">New Land Use<br><br>
<label title="name: land use name, must have '_lum' suffix" for="luName">Name</label><br>
<input title="name: land use name, must have '_lum' suffix" type="text" id="luName" name="name">
<br>
<label title="cal_group: specify if land use belongs to specific calibration group"
for="calGroup">Calibration Group</label><br>
<input title="cal_group: specify if land use belongs to specific calibration group" type="text"
id="calGroup" name="calGroup"> <br>
<label title="plnt_com: plant community present in land use, if urban select ‘null’
file: plant.ini" for="luplantCom">Plant Comunity</label><br>
<!-- <input id="luPlantCom" list="luPlantComDatalist" name="plantCom"> -->
<select title="plnt_com: plant community present in land use, if urban select ‘null’
file: plant.ini" id="luPlantCom" class="luRequired" required="">
</select> <br>
</input>
<label title="mgt: management operations, leave as 'null' if no mgt operations are defined
file: managment.sch" for="mgt">Managment</label><br>
<input title="mgt: management operations, leave as 'null' if no mgt operations are defined
file: managment.sch" type="text" id="luMgt" name="mgt"> <br>
<label title="cn2: run-off curve number, parameter to predict direct run-off or infiltration from rainfall
file: cntable.lum" for="cn2">Curve Number</label><br>
<!-- <input list="cn2" id="cn2Datalist" name="cn2"> -->
<select title="cn2: run-off curve number, parameter to predict direct run-off or infiltration from rainfall
file: cntable.lum" id="cn2Options" class="luRequired">
</select><br>
<label title="cons_prac: code for conservation practices, uses USLE (universal soil equation)
file: cons-practice.lum" for="cons_practice">Conservation Practice</label><br>
<select title="cons_prac: code for conservation practices, uses USLE (universal soil equation)
file: cons-practice.lum" id="cons" class="luRequired">
</select> <br>
<label title="urban: urban land use, if plant use is selected then urban must be 'null'
file: urban.urb" for="urban">Urban</label><br>
<select title="urban: urban land use, if plant use is selected then urban must be 'null'
file: urban.urb" name="urban" id="urbanLUList" class="luRequired">
</select> <br>
<label
title="urb_ro: determines how urban runoff is calculated, used to estimate sediment and nutrient loadings"
for="urb_ro">Urban Run-Off</label><br>
<select
title="urb_ro: determines how urban runoff is calculated, used to estimate sediment and nutrient loadings"
id="urbRo" name="urb_ro" class="luRequired">
<option disabled selected value>-- select -- </option>
<option value="usgs_reg">usgs_reg</option>
<option value="buildup_washoff">buildup_washoff</option>
<option value="null">null</option>
</select><br>
<label title="ov_mann: overland manning’s n value, estimate of flow over hillslope
file: ovn_table.lum" for="ov_mann">Mannings n</label><br>
<select title="ov_mann: overland manning’s n value, estimate of flow over hillslope
file: ovn_table.lum" id="manN">
</select><br>
<label title="tile: presence of tile drains/drainage of subsurface water, usually from agricultural land
file: tiledrain.str" for="tile">Tile Drainage</label><br>
<select title="tile: presence of tile drains/drainage of subsurface water, usually from agricultural land
file: tiledrain.str" id="tile" name="tile" class="luRequired">
</select> <br>
<label title="sep: presence/type of onsite wastewater system
file: septic.str" for="septic" for="sep">Septic Tanks</label><br>
<select title="sep: presence/type of onsite wastewater system
file: septic.str" for="septic" id="sep" name="sep" class="luRequired">
</select><br>
<label title="vfs: presence/type of filter strip, strip of dense vegetation on hillslope to intercept run-off from upslope pollutant
file: filterstrip.str" for="vfs">Filter Strip</label><br>
<select title="vfs: presence/type of filter strip, strip of dense vegetation on hillslope to intercept run-off from upslope pollutant
file: filterstrip.str" id="vfs" name="vfs" class="luRequired">
</select><br>
<label title="grww: presence/type of grassed waterways, vegetation within channels
file: grassedww.str " for="grww">Grassed Waterways</label><br>
<select title="grww: presence/type of grassed waterways, vegetation within channels
file: grassedww.str " id="grww" name="grww" class="luRequired">
</select><br>
<label title="bmp: no built in SWAT+ options, allows removal of constituents from model based on user defined management practice
file: bmpuser.str" for="bmp">Best Managment Practices</label><br>
<input title="bmp: no built in SWAT+ options, allows removal of constituents from model based on user defined management practice
file: bmpuser.str" type="text" id="bmp" name="bmp"> <br> <br>
<button type="button" id="newLuButton">Make</button>
<button type="reset" id="newLuReset">Reset</button>
</form>
</div>
<div class="popups">
<button class="openPlantForm" id="openPlantForm">New Plant Community</button><br>
<button class="openLuForm" id="openLuForm"> New Land Use</button>
</div>
<div class="runSWAT">
<div class="visControls">
<form title="Channel select">Plot Time Series <br>
<label for="channel">channel </label>
<select name="channel" id="channel">
</select> <br>
<!-- <button id="mainChan" type="button">main</button><br> -->
<label for="output">output </label>
<select name="output" id="output">
</select> <br> <br>
<!-- <button id="floOut" type="button">flo_out</button> <br> -->
<a class="downloadPlot" id="downloadPlot">Download CSV </a>
<!-- <button id="resetPlot" type="reset">reset</button> -->
</form>
<form title="Choropleth">Plot Choropleth <br>
<label for="month">month</label>
<select name="month" id="month">
</select> <br>
<!-- <button id="aa" type="button">annual average</button> <br> -->
<label for="wbOutput">output</label>
<select name="wbOutput" id="wbOutput">
</select>
<!-- <button id="percip" type="button">percip</button><br> -->
<!-- <button id="plotChloro" type="button">plot</button> -->
<!-- <button id="resetChloroPlot" type="reset">reset</button> -->
</form>
</div>
<div class="runSwatContainer">
<div id="runswatbuttonviscontainer">
</div>
</div>
<!-- <form title="runSWAT" id="runSWATform">Run SWAT+ <br> <br> -->
<!-- <label for="warmUp">warm up</label>
<input type="number" id="warmUp" value="1"> <br> <br> -->
<!-- <label for="routing">routing method</label>
<input type="text" id="routing"> <br>
<label for="PET">PET method</label>
<input type="text" id="PET"> <br> -->
<!-- <label for="startDate">start</label>
<input type="date" id="startDate"> <br>
<label for="endtDate">end</label>
<input type="date" id="endDate"> <br><br>
<button type="button" id="timeSimButton">set parameters</button><br>
<button type="button"><a href=""id="prtDownload"> download print.prt</a></a> </button> <br>
<button type="button"><a href="" id="simDownload">download time.sim</a></button> -->
<!-- </form> -->
</div>
</div>
<div class="hydrograph" id="vispanel">
<div class="tab" id="scenarioTab"></div>
<div id="vis" class="timeSeries"></div>
<div id="vis2" class="timeSeries"></div>
<div id="choro" class="choropleth"></div>
</div> <br>
</div>
</footer>
</body>