Skip to content

Commit 38a80d0

Browse files
tobiasmllrtobiasmllr
authored
feat: Tour changes (#204)
1 parent 4ba9bf0 commit 38a80d0

File tree

17 files changed

+231
-121
lines changed

17 files changed

+231
-121
lines changed

‎frontend/rctool/templates/rctool/rctool/import/rctool_import.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
8484
</div>
8585
<div id="csv-data-table-footer">
8686
<small class="text-small">
87-
If no uncertainty data is provided, missing values will be filled in as 0.05 (5%).
87+
If no uncertainty data is provided, missing values will be filled in as 0.1 (10%).
8888
</small>
8989
</div>
9090
<div id="error-messages">
@@ -184,7 +184,7 @@ <h6 class="card-header text-center" style="background-color: #758fa8; color: #FF
184184
{
185185
element: "#form-header-row",
186186
title: "Import Walkthrough",
187-
content: "Field data can be uploaded using a csv file with example column names specified on the right. When importing data, select which row has these column headings by adjusting the header. Choose the correct separator symbol between values in rows. If uncertainty data is uploaded, missing values will be filled in as 0.05 (5%)."
187+
content: "Field data can be uploaded using a csv file with example column names specified on the right. When importing data, select which row has these column headings by adjusting the header. Choose the correct separator symbol between values in rows. If uncertainty data is uploaded, missing values will be filled in as 0.1 (10%)."
188188
},
189189
{
190190
element: "#enter-data-button",

‎frontend/rctool/templates/rctool/rctool/tour/rctool_tour_intro.html‎

Lines changed: 15 additions & 117 deletions
Large diffs are not rendered by default.

‎frontend/rctool/templates/rctool/rctool/tour/slide1.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{% load static %}
2+
3+
<div class="carousel-item active" style="margin-bottom:15px;">
4+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">Let's Get Started</h6>
5+
<small class='text-description'>
6+
Hydrometric field work involves regular visits to a hydrometric gauging station across a range of streamflow conditions. A hydrometric gauging station typically consists of a stage sensor and benchmarks or reference gauge from which water level is referenced. Each field visit should collect three basic observations: reference of stage, measurement of discharge, and control observation. These observations are required to convert stage into discharge through the development of a hydrometric rating curve. (Note: Safety should be considered when collecting these observations, do not attempt any unsafe field work!).
7+
</br><br>The Hydrometric Rating Application (HydRA) is a tool for developing hydrometric rating curves based on observations of stage and discharge. HydRA allows the user to upload observations of stage and discharge and automatically fits a rating curve. Users can adjust the fit according to onsite observations. It then generates a rating equation that can be used for converting stage datasets into discharge.
8+
</small>
9+
<div style="display: flex; align-items: center; justify-content: center;">
10+
<img src="{% static 'images/intro00.jpg' %}" class="slideshow-figure">
11+
</div>
12+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide2.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% load static %}
2+
3+
<div class="carousel-item" style="margin-bottom:15px;">
4+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">Uploading Data</h6>
5+
<small class='text-description'>
6+
Users may input their hydrometric observations by uploading a .csv file.
7+
Use the comments section to indicate meta-data such as measurement quality or control condition.
8+
If the uncertainty field is left blank, HydRA assumes discharge measurement uncertainty of 10%.
9+
HydRA will plot all stage and discharge observations and then automatically fit a rating curve using the rating equation.
10+
</small>
11+
<div style="display: flex; align-items: center; justify-content: center;">
12+
<img src="{% static 'images/intro01_table.jpg' %}" class="slideshow-figure" style="height: 200px;">
13+
</div>
14+
<div style="display: flex; align-items: center; justify-content: center;">
15+
<img src="{% static 'images/intro01_graph.jpg' %}" class="slideshow-figure" style="height: 200px;">
16+
</div>
17+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide3.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{% load static %}
2+
3+
<div class="carousel-item">
4+
<div class="text-box" style="margin-bottom:20px;">
5+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">The Rating Equation</h6>
6+
<small class='text-description'>Stage-discharge ratings are generally based on Manning's simplified hydraulic equation below where <em>Q</em> is </small>
7+
<a class='key-term' style="font-weight:normal;" href='#' data-toggle="tooltip" data-placement="bottom" title="Volume of water transported in a certain amount of time.">discharge</a>
8+
<small class='text-description'>, <em>H</em> is </small>
9+
<a class='key-term' style="font-weight:normal;" href='#' data-toggle="tooltip" data-placement="bottom" title="Water height above the bed.">stage</a>
10+
<small class='text-description'>, <em>h<sub>0</sub></em> is the </small>
11+
<a class='key-term' style="font-weight:normal;" href='#' data-toggle="tooltip" data-placement="bottom" title="Gauge height at zero flow.">offset</a>
12+
<small class='text-description'>, C is the </small>
13+
<a class='key-term' style="font-weight:normal;" href='#' data-toggle="tooltip" data-placement="bottom" title="Calibration parameter influenced by channel characteristics.">coefficient</a>
14+
<small class='text-description'>, and b is the </small>
15+
<a class='key-term' style="font-weight:normal;" href='#' data-toggle="tooltip" data-placement="bottom" title="Calibration parameter influenced by the control geometry.">exponent.</a>
16+
</div>
17+
<div style="text-align:center;">
18+
<small class='text-equation'>Q = C ( H - h<sub>0</sub> ) <sup>b</sup></small>
19+
</div>
20+
<div class="text-box" style="margin-top:20px; margin-bottom:20px;">
21+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="bottom" title="Gauge height at zero flow."><em>h<sub>0</sub></em> - offset:</a>
22+
<small class='text-description'>Gauge height at zero flow. This is typically set by the user as the height of the bed.</small><br>
23+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="bottom" title="Calibration parameter influenced by channel characteristics."><em>C</em> - coefficient:</a>
24+
<small class='text-description'>Calibration parameter influenced by channel characteristics such as width, slope, bed roughness.</small><br>
25+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="bottom" title="Calibration parameter influenced by the control geometry."><em>b</em> - exponent:</a>
26+
<small class='text-description'>Calibration parameter influenced by the control geometry. </small>
27+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="bottom" title="Features downstream of the gauge which influence flow.">Controls</a>
28+
<small class='text-description'> are natural or constructed features located downstream of the gauge which influence flow.</small>
29+
</div>
30+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide4.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{% load static %}
2+
3+
4+
<div class="carousel-item" style="margin-bottom:15px;">
5+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">Fit for a Stream</h6>
6+
<small class='text-description'>
7+
The HydRA app offers the option to auto-fit rating curves by finding the best equation describing the uploaded field data. The auto-fit function uses a power law model with weights based on discharge measurement uncertainty. A least square method is used to define the auto-fit, this fit may be optimized by adjusting applicable measurements or offsets.
8+
</small>
9+
<br>
10+
<small class='text-description'>
11+
The uncertainty for each discharge measurement is used to weigh the importance of each measurement in the fit.
12+
Implementation details of the power law model can be found in the <a href="https://github.com/bcgov/nr-hydrometric-rating-curve">open source code</a> of HydRA
13+
and the documentation for the <a href="https://lmfit.github.io/lmfit-py/builtin_models.html#lmfit.models.PowerLawModel" target="_blank">lmfit</a> library and its
14+
<a href="https://lmfit.github.io/lmfit-py/model.html#lmfit.model.weights">weights</a>.
15+
</small>
16+
17+
<div style="display: flex; align-items: center; justify-content: center;">
18+
<img src="{% static 'images/intro01_graph.jpg' %}" class="slideshow-figure" style="height: 200px;">
19+
</div>
20+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide5.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{% load static %}
2+
3+
4+
<div class="carousel-item" style="margin-bottom:15px;">
5+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">To Fit and to Fiddle</h6>
6+
<div style="margin-bottom:5px;">
7+
<small class='text-description'>
8+
Common metrics can be used to assess the performance of your hydrometric rating curve. These include the following:
9+
</small>
10+
</div>
11+
<div style="margin-bottom:15px;">
12+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="top" title="The square root of the mean of the squared differences between observed and predicted values.">Root Mean Square Error</a><br>
13+
<small class='text-description'>
14+
The Root Mean Square Error (RMSE) is given by the equation below where <em>Q</em> is discharge and <em>N</em> is number of measurements.
15+
This provides an indication of the average error between observed and predicted discharge values.<br>
16+
In general, a lower RMSE means a better “fit” of the dataset.
17+
HydRA auto-fits the rating curve parameters to, in part, minimize the RMSE. However, there are many sources of uncertainty in hydrometric data and many ways to adjust the “fit” of a rating curve.
18+
Multiple rating curve parameter interpretations may be compared using the RMSE to assess which is the best fit.
19+
</small>
20+
</div>
21+
<div style="display: flex; align-items: center; justify-content: center;">
22+
<img src="{% static 'images/RMSE.png' %}" style="height:60px">
23+
</div>
24+
<div style="margin-bottom:15px;">
25+
<a class='key-term' href='#' "The difference between the predicted and the observed value, divided by the observed value, then multiplied by 100.">Percent Error</a><br>
26+
<small class='text-description'>Percent error is calculated by the following equation where <em>Q</em> is discharge and an example is shown by the figure below. This plot is useful for analyzing the error distribution and identifying outliers.</small>
27+
</div>
28+
<div style="display: flex; align-items: center; justify-content: center;">
29+
<img src="{% static 'images/QPE.png' %}" style="height:60px; margin-bottom:10px;">
30+
</div>
31+
<div style="display: flex; align-items: center; justify-content: center;">
32+
<img src="{% static 'images/fig_rating_error_legend.JPG' %}" class="slideshow-figure">
33+
</div>
34+
<div style="margin-bottom:15px;">
35+
<a class='key-term' href='#'>Mean Average Percentage Error</a><br>
36+
<small class='text-description'>
37+
The Mean Average Percentage Error (MAPE) is calculated similarly to the Percent Error, but averaged over all observed values.
38+
</small>
39+
<div style="display: flex; align-items: center; justify-content: center;">
40+
<img src="{% static 'images/MAPE.png' %}" style="height:60px">
41+
</div>
42+
</div>
43+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide6.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% load static %}
2+
3+
4+
<div class="carousel-item" style="margin-bottom:15px;">
5+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">Time for a Break</h6>
6+
<small class='text-description'>Stage-discharge relations may have multiple rating</small>
7+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="top" title="Region of a stage-discharge relation.">segments</a>
8+
<small class='text-description'>divided by</small>
9+
<a class='key-term' href='#' data-toggle="tooltip" data-placement="top" title="The transition point of connecting segments.">breakpoints</a>
10+
<small class='text-description'>
11+
. Each segment is a rating equation governed by unique hydraulic controls.
12+
In the example figure below, segment 1 applies to stage between 0.32 m and 0.52 m and is likely influenced by section controls such as channel constrictions, woody debris, or rock ledges. Segment 2 applies to stage values between 0.52 m and 1.4 m and is likely affected by channel
13+
controls such as channel geometry and bed roughness.
14+
</small>
15+
<div style="display: flex; align-items: center; justify-content: center;">
16+
<img src="{% static 'images/fig_breakpoint_example_slide3_greylabels.JPG' %}" class="slideshow-figure" style="height:550px;">
17+
</div>
18+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide7.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{% load static %}
2+
3+
4+
<div class="carousel-item" style="margin-bottom:15px;">
5+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">If the curve fits, use it</h6>
6+
<p>
7+
<small class='text-description'>
8+
<b>Step 1: </b>
9+
Upload field visit information for your period of interest including all relevant fields
10+
</small>
11+
</p>
12+
<p>
13+
<small class='text-description'>
14+
<b>Step 2: </b>
15+
Input the offset as the gauge height, or stage, at zero flow
16+
</small>
17+
</p>
18+
<p>
19+
<small class='text-description'>
20+
<b>Step 3: </b>
21+
Assess the quality of the auto-fit by adjusting curve parameters such as: end points, applicable measurements, offsets. Consult field visit notes, photos and discharge measurement meta-data to assess further. If applicable, add any breakpoints to account for channel complexity at higher or lower stages. Consider comparing multiple interpretations of the fit using the RMSE and MAPE parameters
22+
<br>
23+
<i>*Note: this may take some time, session settings can be saved in the export tab </i>
24+
</small>
25+
</p>
26+
<p>
27+
<small class='text-description'>
28+
<b>Step 4: </b>
29+
Export rating curve parameters as a .pdf or .csv
30+
</small>
31+
</p>
32+
<p>
33+
<small class='text-description'>
34+
<b>Step 5: </b>
35+
Use input values of stage with your rating curve equation to produce modelled discharge, remember to grade your output dataset according to provincial hydrometric RISC standards
36+
</small>
37+
</p>
38+
</div>

‎frontend/rctool/templates/rctool/rctool/tour/slide8.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% load static %}
2+
3+
<div class="carousel-item" style="margin-bottom:25px;">
4+
<div class="col-md-8 mx-auto">
5+
<div class="text-box" style="margin-bottom: 20px;">
6+
<h6 style="color: #003466; margin-bottom: 10px; font-weight:bold;">Data Review</h6>
7+
<small class='text-description'>HydRA is designed to ONLY produce a rating curve equation and summary report. The complete hydrometric data review process should include the review, correction, and grading of the input stage dataset and the output discharge dataset according to the <a href="https://www2.gov.bc.ca/assets/gov/environment/natural-resource-stewardship/nr-laws-policy/risc/man_bc_hydrometric_stand_v2.pdf" target="_blank">2018 BC Hydrometric RISC standards</a>
8+
</br></br>Applying RISC grades to the output discharge dataset may depend on the performance of the rating equation in predicting discharge or the range of discharge observed during the rating period. All hydrometric data should be reviewed and graded by a qualified professional according to the RISC standards. For more information, consult RISC Table 1-1.</small>
9+
</div>
10+
<div>
11+
<a class="btn btn-secondary btn-block custom-button" style="background-color: #6c747e !important; border-color: #FFFFFF;" href="{% url 'rctool_import' 1 %}"><small>Get Started</small></a>
12+
</div>
13+
</div>
14+
</div>

0 commit comments

Comments
 (0)