From f36a7d10a80431d672c505c08e6a1b962cedce48 Mon Sep 17 00:00:00 2001 From: Michael Joyce Date: Tue, 20 Aug 2019 15:52:28 -0700 Subject: [PATCH] Issue #123 - Add 'user guide' to example index file --- ait/gui/static/index.html | 105 ++++++++++++++++++++++++++++++++++---- 1 file changed, 96 insertions(+), 9 deletions(-) diff --git a/ait/gui/static/index.html b/ait/gui/static/index.html index 45c4ec7a..eb920ad7 100644 --- a/ait/gui/static/index.html +++ b/ait/gui/static/index.html @@ -104,7 +104,102 @@
- + +
+
+

Welcome to the AMMOS Instrument Toolkit Telemetry Monitoring Interface!

+
+
+
+
+ The AMMOS Instrument Toolkit (AIT) UI provides a framework for building a custom website for realtime telemetry monitoring, commanding, and other MOS operations with only minimal HTML and configuration file changes. Built on top of the AIT Core libraries, AIT GUI provides web-development friendly access to the underlying telemetry, commanding, EVR, system logging, and other AIT Core functions in addition to a suite of pre-built UI Components and a REST API to handle common MOS use cases. +
+
+
+
+

This example UI aims to give you a high level overview of some of the functionality that AIT provides through its telemetry monitoring interface. Much of the information presented here is described in further detail in the AIT GUI Documentation.

+ + + + + + + + + +

The AIT UI is created from a number of components. These components are written in JavaScript and provided by the project to cover basic functionality needed in the user interface. Users can customize their interface by making minimal HTML or configuration file changes. If a user needs more control they can create their own components and include them in the interface.

+ + + + + +

+ The majority of the content that you're seeing is displayed in ait-tabset components. The tabset component helps keep our display split into logical blocks and displays additional status information to the user. + +

+  <ait-tabset>
+    <ait-tab title="tab1">
+      Content of Tab1
+    </ait-tab>
+    <ait-tab title="tab2">
+      Content of Tab2
+    </ait-tab>
+  </ait-tabset>
+
+

+ + + + +

When you're ready, click on the "AIT Field" tab above to continue

+ + +
+
+ + +
+
+

+

The ait-field Component

+

+

+ The ait-field component handles the processing and display of data for a given field in an AIT Packet definition. The majority of your interface customization is likely to be focused around ait-field components. +

+

+ An instance of ait-field is defined with the packet name, field name, and some optional parameters in HTML. Below is an example field defined for one of the data fields in the default Core telemetry dictionary. Below that is that same field defined in the interface. + +

+  <ait-field packet="1553_HS_Packet" name="Voltage_A" display_name="Voltage_A"></ait-field>
+
+ + +

+

+ Unfortunately you're not going to see anything interesting displayed here because there's no telemetry flowing to the user interface at the moment. AIT provides a command line program for generating fake telemetry and sending it to the user interface. Open your terminal and run ait-example. If your environment is configured properly you should see the above field displaying numbers incrementing by 1. You'll also notice that the display sometimes shows the field's value colored red or yellow. This indicates that the field is out of limit as defined by in our example limit.yaml dictionary. The tab that the field is displayed in will also reflect that it contains an out-of-limit field by displaying the same color. Click on the Voltage_A field's value to learn more about the telemetry field being displayed. This shows you the relevant chunk of the telemetry dictionary that defines the telemetry point. +

+

+ Click to the "Additional Components" tab above to continue +

+
+
+ + +
+
+

+

Additional UI Components

+

+

+ AIT provides a number of components out of the box to cover common monitoring interface use cases. From the clock in the top-right corner, to the commanding and script execution controls in the bottom (or side) of your display, to the telemetry point plots shows on the "Telemetry" tab above, all of the functionality in the user interface is provided for you with minimal configuration and headache. All of the included components are defined on the AIT GUI Widgets page in the AIT documentation along with information on how to configure and add them to your display. +

+

+ Be sure to click around the UI and explore the functionality provided. We do our best to document our toolkit and its features so please be sure to check out the Core, GUI, and DSN documentation. We hope all of your questions will be answered there but we know that's not always possible. If you run into any problems or have any questions for the team feel free to reach out on the project mailing lists. If you find any bugs please open a ticket for us or let us know on our mailing lists. Bug reports and pull requests are always welcome! +

+
+
+ +

1553 HS Voltages

@@ -153,14 +248,6 @@

1553 HS Currents

- - Bar - Baz - Bop - -

The current time

- -