github.com/simpleiot/simpleiot@v0.18.3/docs/user/ui.md (about)

     1  # User Interface
     2  
     3  **Contents**
     4  
     5  <!-- toc -->
     6  
     7  ## Basic Navigation
     8  
     9  After Simple IoT is started, a web application is available on port `:8118`
    10  (typically [http://localhost:8118](http://localhost:8118)). After logging in
    11  (default user/pass is `admin`/`admin`), you will be presented with a tree of
    12  nodes.
    13  
    14  ![nodes](images/nodes.png)
    15  
    16  The `Node` is the base unit of configuration. Each node contains `Points` which
    17  describe various attributes of a node. When you expand a node, the information
    18  you see is a rendering of the point data in the node.
    19  
    20  You can expand/collapse child nodes by clicking on the arrow
    21  ![arrow](images/icon-arrow.png) to the left of a node.
    22  
    23  You can expand/edit node details by clicking on the dot
    24  ![dot](images/icon-dot.png) to the left of a node.
    25  
    26  ![node edit](images/node-edit.png)
    27  
    28  ## Adding nodes
    29  
    30  Child nodes can be added to a node by clicking on the dot to expand the node,
    31  then clicking on the plus icon. A list of available nodes to add will then be
    32  displayed:
    33  
    34  ![node add](images/node-add.png)
    35  
    36  Some nodes are populated automatically if a new device is discovered, or a
    37  downstream device starts sending data.
    38  
    39  ## Deleting, Moving, Mirroring, and Duplicating nodes
    40  
    41  Simple IoT provides the ability to re-arrange and organize your node structure.
    42  
    43  To delete a node, expand it, and then press the delete
    44  ![icon delete](images/icon-delete.png) icon.
    45  
    46  To move or copy a node, expand it and press the copy
    47  ![copy icon](images/icon-copy.png) icon. Then expand the destination node and
    48  press the paste ![paste icon](images/icon-paste.png) icon. You will then be
    49  presented with the following options:
    50  
    51  ![paste options](images/paste-options.png)
    52  
    53  - **move** - moves a node to new location
    54  - **mirror** - is useful if you want a user or device to be a member of multiple
    55    groups. If you change a node, all of the mirror copies of the node update as
    56    well.
    57  - **duplicate** - recursively duplicates the copied node plus all its
    58    descendants. This is useful for scenarios where you have a device or site
    59    configuration (perhaps a complex Modbus setup) that you want to duplicate at a
    60    new site.
    61  
    62  ## Raw Node View
    63  
    64  If a node is expanded, a raw node button is available that allows you to view
    65  the raw type and points for any node in the tree. It is useful at times during
    66  development and debugging to be able to view the raw points for a node.
    67  
    68  <img src="assets/image-20231205121809598.png" alt="image-20231205121809598" style="zoom:80%;" />
    69  
    70  After the raw button is pressed, the type and points are displayed:
    71  
    72  <img src="./assets/image-20231219103344798.png" alt="image-20231219103344798" style="zoom:67%;" />
    73  
    74  Unknown nodes will also be displayed as raw nodes.
    75  
    76  Points can also be edited, added, or removed in raw mode.
    77  
    78  A custom node type can also be added by specifying the node type when adding a
    79  node. This can be useful when developing new clients or external clients that
    80  run outside of the SImple IoT application.
    81  
    82  <img src="./assets/image-20231219103622737.png" alt="image-20231219103622737" style="zoom: 50%;" />
    83  
    84  ## Graphing and advanced dashboards
    85  
    86  If you need graphs and more advanced dashboards, consider coupling Simple IoT
    87  [with Grafana](graphing.md). Someday we hope to have dashboard capabilities
    88  built in.
    89  
    90  ## Custom UIs
    91  
    92  See the [frontend reference documentation](../ref/frontend.md).