Adding section to documentation explaining how to run the web user in…

…terface
agencyenterprise · Sep 18, 2023 · b365f4b · b365f4b
1 parent 8bd8f1a
commit b365f4b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 0 deletions.
diff --git a/docs/contributing.md b/docs/contributing.md
@@ -42,6 +42,16 @@ If you don't want to install NDK's dependencies on your machine, you can run it
 
 * Connect to the jupyter notebook directly in your browser or with your IDE.
 
+
+Alternatively, you can start the web user interface with:
+
+   ```
+   docker compose up ndk-ui
+   ```
+
+* Open the address `http://127.0.0.1:5000/` in your browser to access it.
+
+
 #### Running locally
 
 This project requires Python `>=3.9` and `<3.11` to be installed. You can find the Python version you have installed by running `python --version` in a terminal. If you don't have Python installed or are running an unsupported version, you can download a supported version from [python.org](https://www.python.org/downloads/).

diff --git a/docs/images/web_ui.png b/docs/images/web_ui.png
diff --git a/docs/images/web_ui_first.png b/docs/images/web_ui_first.png
diff --git a/docs/user_interface.md b/docs/user_interface.md
@@ -0,0 +1,61 @@
+!!! note
+    This functionality is currently under development.
+
+# User Interface
+
+Neurotech Development Kit has a built-in web server that allows you to create and run simulations using your web browser.
+
+
+<figure markdown>
+  ![Web UI](./images/web_ui.png){ width="900" }
+</figure>
+
+
+
+## Running
+
+There are multiple ways of running the web server, you can choose between:
+
+### Pip
+
+1. Follow the [installation tutorial](installation.md)
+
+1. Open a terminal and execute
+
+    ```
+    ndk-ui
+    ```
+
+### Virtual environment
+
+1. Follow the *running locally* section of the [contributing tutorial](contributing.md#running-locally)
+
+1. Open a terminal in the project location and run the following command
+
+    ```
+    make web-development
+    ```
+
+### Docker
+
+1. Install [Docker](https://docs.docker.com/engine/install/#desktop).
+
+1. Open a terminal and run the following command:
+
+   ```
+   docker run -p 5000:5000 -w "/ndk" -it ghcr.io/agencyenterprise/neurotechdevkit:latest python src/web/app.py
+   ```
+
+
+## Using
+
+After executing the last step of any of the options described above you will be able to open the address `http://127.0.0.1:5000/` in your browser.
+
+You should be able to select one of the pre-defined scenarios and see its layout:
+
+
+<figure markdown>
+  ![Web UI First](./images/web_ui_first.png){ width="900" }
+</figure>
+
+
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -29,6 +29,7 @@ theme:
 nav:
   - Home: index.md
   - Installation: installation.md
+  - User Interface: user_interface.md
   - Usage:
       - Scenarios: usage/loading_scenarios.md
       - Sources: usage/defining_sources.md