Skip to content
Snippets Groups Projects
Commit f8490444 authored by JuanPi Carbajal's avatar JuanPi Carbajal
Browse files

doc: first draft html ui

parent 3d6e45ea
No related branches found
No related tags found
No related merge requests found
Pipeline #238386 passed
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
dataloggerui/templates/datalogerui.html
+ 55
− 51
View file @ f8490444
......@@ -22,20 +22,20 @@
<h2>data-logger configuration</h2>
<form method="GET" action="">
<div class="flexRow">
<button class="baseButton data" name="reload_btn">download configuration</button>
<button class="baseButton data" name="reload_btn">Get configuration form logger</button>
<button class="baseButton" name="clear_btn">Clear</button>
<button class="baseButton" name="default_btn">Defaults</button>
</div>
</form><br>
<form method="POST" action="" enctype="multipart/form-data">
<fieldset class="inputField">
<legend>Configuration</legend>
<div class="flexRow">
<input class="baseButton data upload" type="submit" name="submit_btn" value="upload">
<button class="baseButton" name="clear_btn1">Clear</button>
<button class="baseButton" name="default_btn1">Defaults</button>
<button class="baseButton data" name="reload_btn1">download configuration</button>
<!--<button class="baseButton" name="clear_btn1">Clear</button>
<button class="baseButton" name="default_btn1">Defaults</button>-->
<button class="baseButton data" name="reload_btn1">Save to file</button>
</div>
<p>
<label for="config_import">
......@@ -49,6 +49,7 @@
{% endif %}
</p>
</fieldset>
<fieldset class="inputField">
<legend>Device</legend>
<label for="device_name">Name:</label>
......@@ -75,6 +76,51 @@
readonly
>
</fieldset>
<fieldset class="inputField">
<legend>Analog channel names</legend>
<label for="adc_in8_name">ADC_IN08:</label>
<input type="text"
name="adc_in8_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in8_name %}
value="{{ adc_in8_name }}"
{% endif %}
><br>
<label for="adc_in9_name">ADC_IN09:</label>
<input type="text"
name="adc_in9_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in9_name %}
value="{{ adc_in9_name }}"
{% endif %}
><br>
<label for="adc_in10_name" >ADC_IN10:</label>
<input type="text"
name="adc_in10_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in10_name %}
value="{{ adc_in10_name }}"
{% endif %}
><br>
<label for="adc_in11_name">ADC_IN11:</label>
<input type="text"
name="adc_in11_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in11_name %}
value="{{ adc_in11_name }}"
{% endif %}
><br>
</fieldset>
<fieldset class="inputField">
<legend>Logging</legend>
<div class="flexRow">
......@@ -91,12 +137,11 @@
></label>
<label for="interval_units">Units:
<select name="interval_units">
<option value="m" {% if interval_units == 'm' %} selected {% endif %}>months</option>
<option value="w" {% if interval_units == 'w' %} selected {% endif %}>weeks</option>
<option value="d" {% if interval_units == 'd' %} selected {% endif %}>days</option>
<option value="h" {% if interval_units == 'h' %} selected {% endif %}>hours</option>
<option value="T" {% if interval_units == 'T' %} selected {% endif %}>minutes</option>
<option value="s" {% if interval_units == 's' %} selected {% endif %}>seconds</option>
<option value="s" {% if interval_units == 'ms' %} selected {% endif %}>milli-seconds</option>
</select></label>
<label for="auto_sample">Activated:<input type="checkbox"
name="auto_sample"
......@@ -116,6 +161,7 @@
readonly
>
</fieldset>
<fieldset class="inputField">
<legend>Battery</legend>
<div class="flexRow">
......@@ -142,49 +188,6 @@
></label>
</div><br>
</fieldset>
<fieldset class="inputField">
<legend>Analog channel names</legend>
<label for="adc_in8_name">ADC_IN08:</label>
<input type="text"
name="adc_in8_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in8_name %}
value="{{ adc_in8_name }}"
{% endif %}
><br>
<label for="adc_in9_name">ADC_IN09:</label>
<input type="text"
name="adc_in9_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in9_name %}
value="{{ adc_in9_name }}"
{% endif %}
><br>
<label for="adc_in10_name" >ADC_IN10:</label>
<input type="text"
name="adc_in10_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in10_name %}
value="{{ adc_in10_name }}"
{% endif %}
><br>
<label for="adc_in11_name">ADC_IN11:</label>
<input type="text"
name="adc_in11_name"
placeholder="<spring name | wabeID>(sensor ULAG label).<physical magnitude>(<SI units>)"
size="64"
maxlength="64"
{% if adc_in11_name %}
value="{{ adc_in11_name }}"
{% endif %}
><br>
</fieldset>
</form>
<form method="POST" action="">
<fieldset class="inputField">
......@@ -203,7 +206,8 @@
>
<div class="flexRow">
<input class="baseButton" type="submit" name="get_clock_btn" value="Get from computer">
<input class="baseButton data upload" type="submit" name="sync_clock_btn" value="Set clock">
<input class="baseButton data upload" type="submit" name="set_clock_btn" value="Set clock">
<input class="baseButton data upload" type="submit" name="sync_clock_btn" value="Sync with computer">
</div>
</fieldset>
</form>
......
doc/source/_static/htmlui_overview.png 0 → 100644
+ 0
− 0
View file @ f8490444
doc/source/_static/htmlui_overview.png

104 KiB

doc/source/htmlUI.rst
+ 178
− 2
View file @ f8490444
=====================
HTML user interface
=====================
.. contents:: :local:
This module provides an HTML user interface to interact with the logger.
The interface is experimental, os use with care.
Currently it uses `flask <https://flask.palletsprojects.com/en/1.1.x/>`_ to
Currently it uses Flask_ to
execute python code via HTMl requests.
The page is served with a development server.
To start the server run::
wsdl_htmlui.py
python -m dataloggerui.htmlui
then go to http://localhost:5000/wabesense_datalogger with your internet browser.
The page you will see looks like the figure below
.. figure:: _static/htmlui_overview.png
:alt: Overview of the HTML interface
Overview of the HTML user interface
This is the HTML user interface (henceforth just UI).
The different parts of the UI are
- `Top buttons`_
- `Configuration`_
- `Device`_
- `Analog channels`_
- `Logging`_
- `Battery`_
- `Internal clock`_
which you can recognize from the graphical representation of the UI.
The UI is a form that needs to be filled to configure the logger.
**Blue buttons** change the information shown in the form.
**Buttons with a gradient** modify information in the logger on in the computer disk.
When you put the mouse pointer on top of a gradient the button, the gradient moves.
A motion to the **right** indicates that data will be **uploaded to** the logger.
A motion to the **left** indicates that data will be **retrieved from** the logger
or **stored in** the computer.
.. note::
The configuration of the logger is only modified after the `Upload <upload-btn>`_
button is pressed.
Top buttons
-----------
The buttons on the top of the UI perform the following actions
.. _get-config-btn:
**Get configuration from logger**
Reads the configuration file stored in the logger and fills the form in the
UI using this data.
.. _clear-btn:
**Clear**
Clear all the contents in the form (it does not affect the logger)
**Defaults**
Fill the form using default values.
Not all fields have a default value.
Configuration
-------------
This section is dedicated to the administration of the configuration of the logger.
.. _upload-btn:
**Upload**
When this button is pressed the current data in the for is uploaded to the
logger.
After this action the logger is modified.
You can check that everything went well by clearing the form using the
`Clear <clear-btn>`_ button, and then getting the configuration from the
logger using the `Get configuration <get-config-btn>`_ button.
.. note::
The internal clock is not set by this action.
**Save to file**
This button saves the current data in the form to a YAML file.
After this action, the path to the file appears at the bottom of this section.
The file is saved to the current working directory by default.
**Load file**
This button loads the contents of a selected file.
To select the file press the **Choose file** button next to this button.
Then press the **Load file** button to read the contents of the file into the
current form.
Device
-----------
This section shows information about the device.
The only field that can be modified are the ``Name`` of the device.
The other fields show read-only information about the logger.
**Name**
The name of the device.
In the context of the WABEsense project all loggers should be named
following the `Naming convention`_.
The naming convention is shown in greyed characters when the device name is
empty.
**Firmware version**
The version of the firmware running on the data-logger.
The firmware versioning follows the convention: major.minor.bug
**Unique ID**
This is the unique ID of the logger. This number unequivocally identifies the
logger.
Analog channels
---------------
This section is for the administration of the analog channel names.
The analog channels carry the data measured by the sensors connected to the logger.
In the context of the WABEsense project all channels should be named following
the `Naming convention`_.
The naming convention is shown in greyed characters when the channel name is empty.
Logging
-----------
This section is to configure the logging behavior of the logger.
**Interval**
The sampling interval. an integer number indicating how often a measurement
will be taken.
**Units**
This drop-down menu can be usud to select the units of the interval.
The default value is 10 minutes.
.. note::
Only minutes are support on Firmware version 1.0.0 or below
**Activated**
Whether logging is activated or not.
Check it to activate logging.
The default value is activated
.. note::
If logging is not activated, the logger will not take samples.
Battery
-----------
This section is used to indicates the battery configuration.
**Nominal voltage**
The nominal voltage of a single cell (e.g. single battery) in volts.
This number can have decimals, use a ``.`` (point) for the decimal places.
**Number of cells**
The number of cells connected to the logger.
Internal clock
--------------
This section shows the state of the internal clock. The date and time corresponds
to the moment when the `Get configuration <get-config-btn` button was pressed.
The values are always in UTC.
.. warning::
The internal clock of the logger cannot track daylight saving times nor time
zones. Hence, for correct logging, use UTC values for date and time.
**Get from computer**
This button loads the current UTC time from the connected computer.
**Set clock**
This button will upload the value to the internal clock of the logger.
**Sync with computer**
This button will sync the loggers internal clock with the one of the current computer.
.. note::
To minimize delays in the synchronization use this button instead of the
sequence: ``Get from Computer`` and ``Set clock``
Links
-----
.. _Flask: https://flask.palletsprojects.com/en/1.1.x/
.. _Naming convention: https://hsr-iet.gitlab.io/wabesense/wabesense/installation.html#id11
.. target-notes::
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment