agl-demo-control-panel: Update Documentation

    - Explain new Config options
    - Provide Tips and Workarounds to CARLA playback steps
    - Update Steps required to run Qt6 version of Demo Control Panel
    - Add new Screenshots to documentation

Bug-AGL: SPEC-5161

Change-Id: I1005b216bda6e5515137eb549dc38e1d4b72b90b
Signed-off-by: Suchinton Chakravarty <suchinton.2001@gmail.com>
Reviewed-on: https://gerrit.automotivelinux.org/gerrit/c/AGL/documentation/+/30444
Tested-by: Jan-Simon Moeller <jsmoeller@linuxfoundation.org>
Reviewed-by: Jan-Simon Moeller <jsmoeller@linuxfoundation.org>

10 files changed, 83 insertions, 35 deletions

diff --git a/docs/06_Component_Documentation/09_AGL_Demo_Control_Panel.md b/docs/06_Component_Documentation/09_AGL_Demo_Control_Panel.md
index 2b99242..04f8e0a 100644
--- a/docs/06_Component_Documentation/09_AGL_Demo_Control_Panel.md
+++ b/docs/06_Component_Documentation/09_AGL_Demo_Control_Panel.md
@@ -25,6 +25,8 @@ $ source control-panel/bin/activate
 - Step 2
 ```bash
 $ pip3 install -r requirements.txt
+$ /usr/lib64/qt6/libexec/rcc -g python assets/res.qrc | sed '0,/PySide6/s//PyQt6/' > res_rc.py
+# OR
 $ pyside6-rcc assets/res.qrc -o res_rc.py
 ```
 ## Setup
@@ -66,7 +68,7 @@ To set up the CAN interface between the Host system and the target machine(s) we
 
 	You should now be able to send and receive CAN messages between the two machines using the vcan interface and cannelloni.
 
-### 3. Configuration for Kuksa-val-server/ Kuksa databroker
+### 3. Configuring the Demo Control Panel
 
 Run the `kuksa-val-server`/`databroker` on `0.0.0.0` by either restarting the server, editing `/etc/default/kuksa-databroker` or add the `agl-demo-preload` as a feature to your build of AGL.  The server should be started using the `--address 0.0.0.0` argument.
 
@@ -76,27 +78,46 @@ Now, you can create a custom configuration to save your specific preferences for
 	
 ```python
 [default]
-preferred-config=AGL-kuksa-val-server
-
-# [cutom-config-template]
-# ip=<ip address>
-# port=<port number>
-# protocol=<ws|grpc>       # ws/grpc -> kuksa-val-server, grpc -> databroker
-# insecure=<true|false>    
-# cacert=<default|/path/to/CA.pem>
-# token=<default|/path/to/token>      
-# tls_server_name=<name>
-
-[kuksa-val-server]
-ip=localhost
-port=8090
-protocol=ws
-insecure=false
-token=default
-tls_server_name=
+fullscreen-mode = true			# launches app in fullscreen mode
+hvac-enabled = true
+steering-wheel-enabled = true
+file-playback-enabled = true	# if not, vcar simulator will be used instead
+file-playback-path =			# Add path to can_messages.txt file generated (Refer Step 4. Playback)
+dbc-file-path =
+can-interface =
+
+[keypad-feature]
+enabled = true					# If false, keypad UI is not shown
+keypad-only = false				# only Keypad page is shown
+ip =
+port =
+keys-to-hide = 3				# hide keys by specifying 1,2,3,4
+
+[vss-server]
+ip = localhost
+port = 55555
+protocol = grpc
+insecure = False
+token = default
+cacert = default
+tls_server_name = Server
 ```
 
-### 4. Start AGL Demo Control Panel
+### 4. Playback (Demo mode)
+
+This mode is configured via the `config.ini` file as shown above, using the `file-playback-enabled` and `file-playback-enabled` fields.
+
+![Playback Demo](images/AGL-Demo-Control-Panel/PlaybackDemo.gif)
+
+The playback Mode runs in two ways:
+
+1. CARLA File Playback: In this mode, a pre-recorded sequence of CAN messages is used to feed values into the Demo apps.
+
+Follow the [CARLA with AGL](13_CARLA_with_AGL.md) steps to generate the **can_messages.txt** file, which is populated during a CARLA session.
+
+_Note_: While generating the playback file, it is recommended to run both **record_playback** and **carla_to_CAN** scripts with a python version supported by CARLA.
+
+### 5. Start AGL Demo Control Panel
 
 1. To start the control panel
 	```
@@ -121,14 +142,10 @@ tls_server_name=
 	- Reconnect
 	- Page settings: Configure the visibility of pages and switch between CAN and Kuksa messages by using the toggle for the same.
 
-![Layers_And_Extensions](images/AGL-Demo-Control-Panel/Settings_Page.png)
-
 1. Navigate to the desired page using the provided buttons at the bottom
 
-|  |
-|---|
-| ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/IC.png) |
-
 |  |  |
 |---|---|
-| ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/HVAC.png) | ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/SC.png) |
+| ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/IC1.png) | ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/IC2.png) |
+| ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/HVAC.png) | ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/Keypad.png) |
+| ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/SC.png) | ![Layers_And_Extensions](images/AGL-Demo-Control-Panel/Settings_Page.png) |
\ No newline at end of file
diff --git a/docs/06_Component_Documentation/13_CARLA_with_AGL.md b/docs/06_Component_Documentation/13_CARLA_with_AGL.md
index 075da80..7e699e0 100644
--- a/docs/06_Component_Documentation/13_CARLA_with_AGL.md
+++ b/docs/06_Component_Documentation/13_CARLA_with_AGL.md
@@ -1,13 +1,21 @@
 ---
 title: CARLA with AGL
 ---
-# CARLA with AGL (WIP)
+# CARLA with AGL
+
+![Playback Demo](images/AGL-Demo-Control-Panel/CARLA_CAN.gif)
+
+As part of the [agl-demo-control-panel](https://gerrit.automotivelinux.org/gerrit/admin/repos/src/agl-demo-control-panel,general) application, `carla_to_CAN` and `record_playback.py` scripts provide a way to record CAN messages generated during a CARLA simulation. The `can_messages.txt` playback file generated, can then be used to to playback the messages via CLI or GUI.
+
+![Playback Demo](images/AGL-Demo-Control-Panel/PlaybackDemo.gif)
 
 ## Setting up CARLA
 
 You can follow the steps provided in the [CARLA documentation](https://carla.readthedocs.io/en/latest/start_quickstart/#carla-installation) for installing CARLA.
 
-We recommend using the [latest release](https://github.com/carla-simulator/carla/releases/), and using the supported Python version to run the `carla_to_CAN.py` Script.
+We recommend using the [CARLA V0.9.15](https://github.com/carla-simulator/carla/releases/tag/0.9.15), and using the supported Python version to run the `carla_to_CAN.py` script (Other releases have not been validated).
+
+_Note_: Use a version of python compatible with CARLA to create the venv **(Python 3.9 tested with CARLA V0.9.15)**
 
 1. Running the CARLA Server
 
@@ -43,6 +51,29 @@ We recommend using the [latest release](https://github.com/carla-simulator/carla
 	# Start the manual_control.py script
 	$ python3 manual_control.py
 	```
+_Tip_: If facing issues running the `manual_control.py` script, you may try removing `numpy` version from `requirements.txt` and comment out line `385` from the script.
+```python
+.
+.
+.
+
+class KeyboardControl(object):
+    """Class that handles keyboard input."""
+    def __init__(self, world, start_in_autopilot):
+        self._autopilot_enabled = start_in_autopilot
+        self._ackermann_enabled = False
+        self._ackermann_reverse = 1
+        if isinstance(world.player, carla.Vehicle):
+            self._control = carla.VehicleControl()
+            self._ackermann_control = carla.VehicleAckermannControl()
+            self._lights = carla.VehicleLightState.NONE
+            # world.player.set_autopilot(self._autopilot_enabled)    <<------ # disable autopilot
+            world.player.set_light_state(self._lights)
+        elif isinstance(world.player, carla.Walker):
+.
+.
+.
+```
 
 ## Converting CARLA data into CAN
 
@@ -56,13 +87,14 @@ To access these scripts, clone the [AGL Demo Control Panel](https://gerrit.autom
 
 ```bash
 # Move to the Scripts directory
-$ cd /path/to//agl-demo-control-panel/Scripts
+$ cd /path/to/agl-demo-control-panel/
 
 # Fetch the agl-vcar.dbc file
-$ wget -nd -c "https://git.automotivelinux.org/src/agl-dbc/plain/agl-vcar.dbc"
+$ wget -nd -c -P Scripts "https://git.automotivelinux.org/src/agl-dbc/plain/agl-vcar.dbc"
+$ cd Scripts/
 ```
 
-Create a Python virtual environment and resolve dependencies
+Create a Python (3.9) virtual environment and resolve dependencies.
 ```bash
 $ python3 -m venv carlavenv
 $ source carlavenv/bin/activate
@@ -75,9 +107,9 @@ $ ./vcan.sh
 1. Converting CARLA Data into CAN
 
 	```bash
-	$ python -u carla_to_CAN.py
+	$ python -u carla_to_CAN.py --interface vcan0
 	# OR
-	$ python -u carla_to_CAN.py --host <carla_server_ip> --port <carla_server_port>
+	$ python -u carla_to_CAN.py --interface vcan0 --host <carla_server_ip> --port <carla_server_port>
 	```
 
 2. Recording and Playback of CAN messages
@@ -94,7 +126,6 @@ $ ./vcan.sh
 	- 2: Replays captured CAN messages
 	- 3: Exit
 
-
 ## CAN interface to AGL Demo Platform
 
 To use the **`carla_to_CAN.py`** and **`record_playback.py`** scripts to send messages on the CAN interface, one can use the CAN bus or use CAN over Ethernet using **cannelloni**.
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/CARLA_CAN.gif b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/CARLA_CAN.gif
new file mode 100644
index 0000000..4e94fee
--- /dev/null
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/CARLA_CAN.gif
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Dashboard.png b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Dashboard.png
index e31024e..3477dbe 100644
--- a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Dashboard.png
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Dashboard.png
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/HVAC.png b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/HVAC.png
index c4db3b2..420f5b2 100644
--- a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/HVAC.png
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/HVAC.png
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC.png b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC.png
deleted file mode 100644
index 72555dc..0000000
--- a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC.png
+++ /dev/null
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC1.png b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC1.png
new file mode 100644
index 0000000..e93e6b8
--- /dev/null
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC1.png
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC2.png b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC2.png
new file mode 100644
index 0000000..500c760
--- /dev/null
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/IC2.png
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Keypad.png b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Keypad.png
new file mode 100644
index 0000000..04f20f5
--- /dev/null
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/Keypad.png
diff --git a/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/PlaybackDemo.gif b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/PlaybackDemo.gif
new file mode 100644
index 0000000..d2e796f
--- /dev/null
+++ b/docs/06_Component_Documentation/images/AGL-Demo-Control-Panel/PlaybackDemo.gif