0byt3m1n1
Path:
C:
/
wamp64
/
www
/
RAT_Kerala_CWRDM
/
backups
/
[
Home
]
File: documentation_12MAY2024.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RAT - Documentation</title> <!-- Chart.js extension for plotting --> <script src="https://cdn.plot.ly/plotly-2.25.2.min.js" charset="utf-8"></script> <!-- Plotly plugin for plotting --> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Leaflet CSS --> <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Leaflet JS --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <!-- Script --> <script src="script_download.js"></script> <style> /* Set body and html to 100% height */ body, html { height: 100%; margin: 0; padding: 0; } /* Set the content to flex layout */ body { display: flex; flex-direction: column; } /* Set the main content area to grow, pushing the footer to the bottom */ main { flex: 1; } </style> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0 fixed-top"> <div class="container-fluid"> <a class="navbar-brand py-0" href="https://depts.washington.edu/saswe/rat/"> <img src="./assets/images/RATLogo_white.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <div class="navbar-text mt-2 ms-0 py-1"> <h5 class="dark text-white">Reservoir Assessment Tool WQ<sup>2</sup> (<strong>RAT-WQ<sup>2</sup></strong><span class="text-warning"> 3.0</span>) - <strong>Kerala</strong></h5> </div> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="download.html" target = "_blank">Data Download</a> </li> <li class="nav-item"> <a class="nav-link" href="documentation.html">Documentation</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> </ul> </div> </div> </nav> <div class="container my-2 py-5 my-5"> <div class="row py-0"> <h4>Documentation:</h4> <p2>For full documentation on the installation and operationalisation of RAT, please refer to the RAT 3.0 documentaion available at: <a href="https://rat-satellitedams.readthedocs.io/en/latest/" class="inline-link"> <strong>www.rat-satellitedams.readthedocs.io</strong> </a> <br> RAT-Kerala is part of the RAT-Global tool that houses information on various reservoirs across the world, avaialble at: <a href="https://depts.washington.edu/saswe/rat/" class="inline-link"> <strong>www.satellitedams.net</strong> </a> </p2> <p2> </p2> <hr> <h5><strong> How to use RAT WQ<sup>2</sup> - Kerala Website interface</strong></h5> </div> <div class="row"> <div class="col my-0 py-0"> <img src="./assets/images/documentation/docs_homePage.png" class="img-fluid" alt="Doc_image1" width="80%"> </div> </div> <div class="row"> <div class="col mt-2"> <p style="text-align: justify";> The landing page of the website contains the following elements and functionalities: <br> <ol> <li> <strong>Zoom controls:</strong> The + and - symbols can be used to zoom-in and zoom-out of the map. </li> <li> <strong>Navigation Bar:</strong> This sections contains links to the Data Download page, the Documentation, the About section, and a link back to the Home page. The RAT logo on the right takes the user to the RAT Global website. </li> <li> <strong>Dam Locations:</strong> The blue markers indicate the various reservoirs across Kerala that is currently available in RAT 3.0. </li> <li> <strong>Dam data:</strong> The markers when clicked displays the reservoir name along with a 'View Data' button. This can be clicked on to view the RAT data for the particular reservoir. </li> <li> <strong>Map Layers:</strong> This toggle can be clicked to view the various map layers available. The user can toggle between the various basemaps by cliking on the corresponding radio buttons <br> <img src="assets/images/documentation/docs_pic3_mapLayers.png" width = "40%"> </li> <li> <strong>Precipitation:</strong> When toggled, displays the distribution of rainfall over Kerala, for a selected date. </li> </ol> </p> </div> </div> <div class="row"> <div class="col"> <hr> <p><strong>Reservoir Data</strong></p> <img src="./assets/images/documentation/docs_damData.png" class="img-fluid" alt="Doc_image1" width="80%"> <p>The Reservoir data screen contains the following: <ol> <li> <strong>Plot Area:</strong> Displays the plot of the selected feature such as inflow, outflow, reservoir temperature etc. </li> <li> <strong>Plot selection:</strong> Users can click on the required feature to view the data on the plot area. </li> <li> <strong>Plot controls:</strong> Used to interact with the plot area. The controls provide options such as the ability to zoom in to parts of the plot, pan around the plot, save the plot as picture etc. The <strong>'Reset axes'</strong> option can be used to restore the plot to its full size if it is in a zoomed-in state. </li> <li> <strong> Download Data:</strong> Users can click the button to download the data in a tabular format as .csv files. </li> </ol> </p> </div> </div> <div class="row"> <div class="col"> <hr> <p><strong>Precipitation viewer</strong></p> <img src="./assets/images/documentation/docs_pic2.png" class="img-fluid" alt="Doc_image1" width="80%"> <p>The precipitation screen contains the following parts: <ol> <li> <strong>Legend:</strong> The colorbar indicates the mapping of the plotted colors with the intensity of the precipitaion. </li> <li> <strong>Precipitation Map:</strong> Shows the precipiation intensity over Kerala derived from the <a class="text-primary" href="https://gpm.nasa.gov/">NASA: Global Precipiation Measurement (GPM) IMERG</a> dataset at a spatial resolution of 0.0625° (~7km). </li> <li> <strong>Date picker:</strong> User can select the date for which the precipitation is to be displayed by clicking on the calendar icon and selecting the required date. <br> <img src="assets/images/documentation/docs_pic3_datePicker.png" width="15%"> </li> </ol> </p> </div> </div> <div class="row text-start my-5"> <div class="col">Updated on 23-08-2023</div> </div> </p> </div> <!-- Footer --> <footer class="bg-light text-center py-1 pb-0 my-0"> <div class="row my-0 py-0 d-flex justify-content-between"> <div class="col py-0 my-0 d-none d-md-block"> <div class="col py-0 my-2 d-none d-md-flex justify-content-center align-items-center"> <img src="./assets/images/University-of-Washington-Logo.png" alt="Footer Image 3" width="230"> </div> </div> <div class="col py-0 my-0 d-none d-md-block"> <div class="d-flex justify-content-center my-2"> <img src="./assets/images/saswe_logo.png" alt="Footer Image 1" width="200"> </div> </div> <div class="col py-0 my-0 d-none d-md-block mr-0"> <div class="d-flex justify-content-center"> <img src="./assets/images/nasaPartner_logo.png" alt="Footer Image 4" width="120"> </div> </div> </div> <div class="row"> <div class="col-11"> <div class="text-dark text-center"> Developed by <a class="text-primary" style="opacity: 1" href="https://www.linkedin.com/in/sarathsuresh96" target="_blank">Sarath Suresh</a> at <a class="text-primary" style="opacity: 1" href="http://www.saswe.net" target="_blank">SASWE Labs</a>, Department of Civil and Environmental Engineering, <a class="text-primary" style="opacity: 1" href="http://www.washington.edu/" target="_blank">University of Washington</a> </div> </div> <div class="col-lg-1 col-md-3 col-sm-3"> <a class="text-dark" style="opacity: 1" href="disclaimer.html">Disclaimer</a> </div> </div> </footer> </body> </html>