Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@martinius96
martinius96 authored Dec 18, 2024
1 parent 00d2666 commit 3cea3d4
Showing 1 changed file with 73 additions and 46 deletions.
119 changes: 73 additions & 46 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,17 +208,23 @@ <h2>Measure your water level using <span>Watmonitor webapp</span></h2>
<div class="row align-items-xl-center gy-5">

<div class="col-xl-5 content">
<h2>About Watmonitor</h2>
<p style="text-align: justify;">
<strong>Watmonitor is a universal web interface designed to efficiently store water level data</strong> collected from IoT sensor nodes into a centralized database.
It empowers users to monitor real-time water level and volume measurements of their water wells, tanks, or other water sources directly through its user-friendly web interface, but is suitable also for industrial-like solutions.
<strong>Accessible on both PC and smartphones (Android and iOS)</strong>, Watmonitor offers seamless compatibility with various sensors without interfering with their functionality. The sensor node is capable of transmitting the differential water level or the actual water level measurement from the bottom of the well.
<strong>System is powered by PHP, HTML5, Bootstrap and MySQL database and more libraries, such as JustGage (Raphaël), ApexCharts.js, highlight.js.</strong>
<h2>Key features:</h2>
<li><strong>Real-time Monitoring:</strong> View accurate water level and volume data</li>
<li><strong>Cross-platform Accessibility:</strong> Available on desktop and mobile devices</li>
<li><strong>Sensor Agnostic:</strong> Compatible with any sensor or industrial monitoring system</li>
<h2>About Watmonitor: Universal Water Level Monitoring System</h2>
<p style="text-align: justify;">
<strong>Watmonitor</strong> is an advanced universal web interface designed to efficiently store water level data collected from IoT sensor nodes into a centralized database. It empowers users to monitor real-time water level and volume measurements of their water wells, tanks, or other water sources directly through its user-friendly web interface. Watmonitor is also ideal for industrial-level applications.
</p>
<p style="text-align: justify;">
Accessible on both PC and smartphones (Android and iOS), Watmonitor ensures seamless compatibility with a variety of sensors without interfering with their functionality. The sensor node can transmit either the differential water level or the actual water level measurement from the bottom of the well, making it highly versatile.
</p>
<p style="text-align: justify;">
<strong>Powered by PHP, HTML5, Bootstrap, MySQL, and other libraries such as JustGage (Raphaël), ApexCharts.js, and highlight.js,</strong> Watmonitor provides a robust and scalable solution for water monitoring needs across various sectors.
</p>

<h2>Key Features of Watmonitor</h2>
<ul>
<li><strong>Real-time Monitoring:</strong> View accurate water level and volume data in real time, ensuring timely insights for better decision-making.</li>
<li><strong>Cross-platform Accessibility:</strong> Available on desktop and mobile devices (Android & iOS), providing users with the flexibility to monitor water levels anywhere, anytime.</li>
<li><strong>Sensor Agnostic:</strong> Fully compatible with a wide range of sensors and industrial monitoring systems, making it adaptable to any water monitoring setup.</li>
</ul>
</div>

<div class="col-xl-7">
Expand Down Expand Up @@ -361,9 +367,10 @@ <h3>The root (Overview) page</h3>
<p class="fst-italic">
The main overview of actual state of Watmonitor's sensor node data, connectivity
</p>
<p>
Watmonitor's main page displays in real-time last water level data, volume, and trends (increase/decrease). It also shows time of recording, and sensor node connectivity status.
</p>
<p>
Watmonitor's <strong>main page</strong> displays <strong>real-time water level data</strong>, <strong>volume</strong>, and <strong>trends</strong> (increase/decrease). It also shows the <strong>time of recording</strong> and <strong>sensor node connectivity status</strong>, providing users with up-to-date information for effective water monitoring.
</p>

</div>
</div><!-- Features Item -->

Expand All @@ -376,7 +383,10 @@ <h3>History & Records pages</h3>
<p class="fst-italic">
Whole data history, min / max recordings for set period of time
</p>
<p>The History page shows all water level measurements in table visualisation with option to delete any, while the Records page displays min and max values for the last 24 hours, 7 days, and 30 days in gauge visualisation.</p>
<p>
The <strong>History page</strong> in Watmonitor displays all <strong>water level measurements</strong> in a table format, with the option to delete any record. The <strong>Records page</strong> shows the minimum and maximum water levels for the last 24 hours, 7 days, and 30 days, presented in a <strong>gauge visualization</strong> for easy monitoring.
</p>

</div>
</div><!-- Features Item -->

Expand All @@ -389,9 +399,10 @@ <h3>Line Area Graphs</h3>
<p class="fst-italic">
Overview of water level data in different time series, up to 1 year ago.
</p>
<p>
Watmonitor's Graph page in Watmonitor lets users view and analyze time series data of water level. Users can download the entire graph or a specific section, and export it in .csv, .jpg, .png, or .svg formats for further analysis.
</p>
<p>
Watmonitor's <strong>Graph page</strong> allows users to easily view and analyze <strong>time-series water level data</strong>. Users can download the entire graph or specific sections and export the data in multiple formats, including <strong>.csv</strong>, <strong>.jpg</strong>, <strong>.png</strong>, and <strong>.svg</strong>, for further analysis and reporting.
</p>

</div>
</div><!-- Features Item -->

Expand All @@ -404,7 +415,10 @@ <h3>ESP32 program</h3>
<p class="fst-italic">
Automatically-generated source code for ESP32 (Arduino IDE)
</p>
<p>The Program page provides pre-generated source code for IoT sensor node based on ESP32, supporting WiFi or PHY Ethernet with FreeRTOS based on used protocol (HTTP or HTTPS). The system auto-configures routes to upload data to Watmonitor on your domain, source code compatible with Arduino core 3.0.X (2024).</p>
<p>
The <strong>Program page</strong> provides pre-generated <strong>source code</strong> for IoT sensor nodes based on the <strong>ESP32</strong> platform, supporting both <strong>WiFi</strong> and <strong>PHY Ethernet</strong> connectivity with <strong>FreeRTOS</strong>, depending on the selected protocol (HTTP or HTTPS). The system automatically configures routes to upload data to Watmonitor on your domain. This source code is compatible with <strong>Arduino Core 3.0.X (2024)</strong>, making it easy to integrate with your IoT water monitoring setup.
</p>

</div>
</div><!-- Features Item -->

Expand All @@ -417,9 +431,10 @@ <h3>Wiring diagram</h3>
<p class="fst-italic">
Wiring diagrams for all supported open-source hardware
</p>
<p>
Wiring diagrams available on this page is suitable for open-source hardware ESP32, ESP8266 and Arduino program implementations that are available on Github. Simplified pin-mapping tables are also provided for easier setup (non-technical people).
</p>
<p>
The <strong>wiring diagrams</strong> available on this page are designed for open-source hardware platforms such as <strong>ESP32</strong>, <strong>ESP8266</strong>, and <strong>Arduino</strong>, with program implementations available on <strong>GitHub</strong>. Simplified pin-mapping tables are also provided to help non-technical users easily set up the hardware for their water monitoring system.
</p>

</div>
</div><!-- Features Item -->

Expand All @@ -432,7 +447,10 @@ <h3>Options</h3>
<p class="fst-italic">
Options to set waterwell dimensions, language
</p>
<p>This page lets users input waterwell dimensions (depth, diameter) to calculate total water level and volume. Language options include English, Slovak, German, Russian, French, and Spanish.</p>
<p>
This page allows users to input <strong>water well dimensions</strong> (depth and diameter) to calculate the <strong>total water level</strong> and <strong>volume</strong> of the well. The page supports multiple <strong>language options</strong>, including <strong>English</strong>, <strong>Slovak</strong>, <strong>German</strong>, <strong>Russian</strong>, <strong>French</strong>, and <strong>Spanish</strong>, making it accessible to a wide range of users.
</p>

</div>
</div><!-- Features Item -->

Expand Down Expand Up @@ -553,56 +571,65 @@ <h3><span>Frequently Asked </span><strong>Questions</strong></h3>

<div class="faq-item faq-active">
<i class="faq-icon bi bi-question-circle"></i>
<h3>Do I need webhosting to run Watmonitor by myself?</h3>
<div class="faq-content">
<p>Yes, you will need local or internet webhosting. To execute PHP scripts of Watmonitor, you will need to have Apache / NGINX installed on your server. <strong>Make sure, you are using PHP in version 5.6 up to 7. For PHP version 8, system is NOT compatible.</strong></p>
</div>
<h3>Do I need web hosting to run Watmonitor on my own server?</h3>
<div class="faq-content">
<p>Yes, to run Watmonitor independently, you will need either local or internet <strong>web hosting</strong>. In order to execute the <strong>PHP scripts</strong> for Watmonitor, your server must have <strong>Apache</strong> or <strong>NGINX</strong> installed. <strong>Ensure that you are using PHP version 5.6 to 7, as Watmonitor is not compatible with PHP version 8.</strong></p>
</div>

<i class="faq-toggle bi bi-chevron-right"></i>
</div><!-- End Faq item-->

<div class="faq-item">
<i class="faq-icon bi bi-question-circle"></i>
<h3>Is it hard to configure the webapplication to make it working?</h3>
<div class="faq-content">
<p>A step-by-step guide in .pdf format simplifies setup for all users. It covers importing the .sql file into MySQL, configuring connect.php with database credentials, HTTP Auth data, and the device token.</p>
</div>
<h3>Is it difficult to configure the web application for Watmonitor?</h3>
<div class="faq-content">
<p>Configuring the web application for Watmonitor is made easy with a detailed, <strong>step-by-step guide</strong> in PDF format. This guide simplifies the setup process for all users, including instructions for importing the <strong>.sql file</strong> into <strong>MySQL</strong>, configuring <strong>connect.php</strong> with your <strong>database credentials</strong>, setting up <strong>HTTP Auth</strong> data, and entering the device token.</p>
</div>

<i class="faq-toggle bi bi-chevron-right"></i>
</div><!-- End Faq item-->

<div class="faq-item">
<i class="faq-icon bi bi-question-circle"></i>
<h3>Will Watmonitor automatically generate source code for my hardware?</h3>
<div class="faq-content">
<p>Watmonitor will automatically generate sketches for ESP32's WiFi or PHY Ethernet connection and supported ultrasonic sensors. It will automatically add MCU token into the sketch, it will calculate trace to the target PHP file and will automatically add your domain (for instance localhost will not work! You need to have it opened using IP protocol / domain name).
Root CA certificate (in case of HTTPS connection) is NOT changed, so you will need to keep an eye on that and add it yourself into the sketch for ESP32.</p>
</div>
<div class="faq-content">
<p>Yes, Watmonitor will automatically generate <strong>source code sketches</strong> for your hardware, including <strong>ESP32</strong> with <strong>WiFi</strong> or <strong>PHY Ethernet</strong> connection and supported <strong>ultrasonic sensors</strong>. The generated sketches will include the necessary <strong>MCU token</strong>, calculate the trace to the target <strong>PHP file</strong>, and automatically add your domain (note: localhost will not work—ensure you use an accessible IP or domain name). The <strong>Root CA certificate</strong> (for HTTPS connections) is not modified, so you will need to manually add it into the sketch for the ESP32.
</p>
</div>

<i class="faq-toggle bi bi-chevron-right"></i>
</div><!-- End Faq item-->

<div class="faq-item">
<i class="faq-icon bi bi-question-circle"></i>
<h3>Are there more source codes available except these directly in the Watmonitor app?</h3>
<div class="faq-content">
<p>There are different source codes on Github compatible with Watmonitor interface. Created for Arduino + Ethernet (ENC or Wiznet series), ESP8266 or ESP32 and more transmission technologies such as LoRaWAN, Sigfox IoT. You can open them using button "Sensor node examples" on the top of this page.</p>
</div>
<h3>Are there additional source codes available beyond those in the Watmonitor app?</h3>
<div class="faq-content">
<p>Yes, there are several additional <strong>source codes</strong> available on <strong>GitHub</strong> that are compatible with the Watmonitor interface. These include examples for <strong>Arduino</strong> with Ethernet (ENC or Wiznet series), <strong>ESP8266</strong>, <strong>ESP32</strong>, and other transmission technologies such as <strong>LoRaWAN</strong> and <strong>Sigfox IoT</strong>. You can access these source codes by clicking the "Sensor node examples" button at the top of this page.
</p>
</div>

<i class="faq-toggle bi bi-chevron-right"></i>
</div><!-- End Faq item-->

<div class="faq-item">
<i class="faq-icon bi bi-question-circle"></i>
<h3>What language options are included in the Watmonitor webapp?</h3>
<div class="faq-content">
<p>Watmonitor webapp includes full language translations to English, German, Russian, Spanish, French and Slovak</p>
</div>
<h3>What language options are available in the Watmonitor web app?</h3>
<div class="faq-content">
<p>The Watmonitor web app offers full <strong>language translations</strong> for the following languages: <strong>English</strong>, <strong>German</strong>, <strong>Russian</strong>, <strong>Spanish</strong>, <strong>French</strong>, and <strong>Slovak</strong>, making it accessible to a global audience.
</p>
</div>

<i class="faq-toggle bi bi-chevron-right"></i>
</div><!-- End Faq item-->

<div class="faq-item">
<i class="faq-icon bi bi-question-circle"></i>
<h3>Can I log data into other system from Watmonitor?</h3>
<div class="faq-content">
<p>Yes, there is JSON output provided from the web interface of Watmonitor that allows you to parse these data and use them in your system (Loxone, Grafana, Kibana, Domoticz, Node-RED, Home Assistant, Thingsboard...). Data provided from the system are the latest data of water level, water volume and time of record written into the database.</p>
</div>
<h3>Can I log data from Watmonitor into other systems?</h3>
<div class="faq-content">
<p>Yes, Watmonitor provides <strong>JSON output</strong> through its web interface, allowing you to easily parse and integrate the data into other systems. Supported platforms include <strong>Loxone</strong>, <strong>Grafana</strong>, <strong>Kibana</strong>, <strong>Domoticz</strong>, <strong>Node-RED</strong>, <strong>Home Assistant</strong>, <strong>Thingsboard</strong>, and more. The data includes the latest <strong>water level</strong>, <strong>water volume</strong>, and <strong>time of record</strong> stored in the database.
</p>
</div>

<i class="faq-toggle bi bi-chevron-right"></i>
</div><!-- End Faq item-->

Expand Down

0 comments on commit 3cea3d4

Please sign in to comment.