chore(README.md): update readme & add examples

README.md

@@ -6,9 +6,131 @@
 git submodule update --init --recursive
 ```
 
-- **DS4Windows**: DS4Windows is a gamepad input mapper and virtual xInput emulator designed to connect, use and customize your PS4/PS5 Controller on Windows 10/11 PC.
+## Features
-- **DualShock Tools**: Debug, Calibrate &Test DualShock/DualSense gamepads.
+- **DS4Windows**: DS4Windows is a gamepad input mapper and virtual XInput emulator designed to connect, use and customize your PS4/PS5 Controller on Windows 10/11 PC.
+- **DualShock Tools**: Debug, Calibrate & Test DualShock/DualSense gamepads.
 - **Gamepad Tester**: Simple HTML gamepad input tester.
 - **Gamepad Viewer**: Displays real-time gamepad inputs. (doubles as an input tester and debugger). [OBS Browser Overlay Compatible]
 - **hidusbf**: Driver/Program to overclock USB mice and HID devices.
-- **xinput-test**: Displays analytics for recorded xInput samples.
+- **XInput-test**: Displays analytics for recorded XInput samples.
+
+## Prerequisites (optional)
+> [!NOTE]
+For *dualshock-tools*, *gamepad-tester*, *gamepad-viewer* ***ONLY***
+
+- [Chromium](https://github.com/ungoogled-software) (for HID interface support)
+
+- [Node.js](https://nodejs.org/) (v14.x or higher) ***(Preferred)***
+
+    **OR**
+
+- [Python 3.x](https://www.python.org/downloads/)
+
+## Instructions
+
+**Node:**
+1. Run the command `node app.js` in the directory
+2. Visit http://127.0.0.1:8080 in your browser
+
+## Adding the *gamepad-viewer* Overlay to OBS Studio
+> [!IMPORTANT]
+For the gamepad-viewer to work in the background while OBS is not in focus, you must launch OBS with this CLI argument!<br>
+CLI Argument: 
+```--disable-features=EnableWindowsGamingInputDataFetcher```
+
+1. Ensure your controller is plugged in and visible
+2. Navigate to the directory using `cd gamepad-viewer`
+3. Start the app with either:
+    - **Node:** `node app.js` *(preferred)*
+    - **Python:** `python -m http.server --bind 0.0.0.0 8080`
+4. Go to http://127.0.0.1:8080 in your browser, focus the window & press a button on your controller
+5. Customize your controller scheme and copy the finalized URL
+6. Create a new browser source in OBS Studio and paste the link you just copied (i.e. http://127.0.0.1:8080/?color=white&triggers=meter&type=dualsense)
+7. Ensure these settings:
+   - [ ] Shutdown source when not visible
+   - [x] Refresh browser when scene becomes available
+
+    **Page permissions**: Full access to OBS (Start/Stop streaming without warning, etc.)
+8. Add the source, keep OBS Studio focused and press a button on your controller
+9.  You're gamepad with the template should appear and display in real time
+
+> [!TIP]
+You can also add the local IPv4 address of the machine running the app to another OBS Studio browser source somewhere else on the network!<br>
+Example: http://192.168.0.141:8080/?color=white&triggers=meter&type=dualsense
+
+## Showcase
+
+</details>
+
+<u>**DS4Windows:**</u>
+
+<details>
+<summary>Click to expand</summary>
+<p align="center">
+  <img src=".gitea/assets/ds4_2.png?raw=true" />
+  <img src=".gitea/assets/ds4_3.png?raw=true" />
+  <img src=".gitea/assets/ds4_1.png?raw=true" />
+</p>
+
+</details>
+<br>
+
+<u>**DualShock Tools:**</u>
+
+<details>
+
+<summary>Click to expand</summary>
+<p align="center">
+  <img src=".gitea/assets/dstools_1.png?raw=true" />
+  <img src=".gitea/assets/dstools_2.png?raw=true" />
+</p>
+
+</details>
+<br>
+
+<u>**Gamepad Tester:**</u>
+
+<details>
+
+<summary>Click to expand</summary>
+<p align="center">
+  <img src=".gitea/assets/gpad-tester_1.png?raw=true" />
+</p>
+
+</details>
+<br>
+
+<u>**Gamepad Viewer:**</u>
+
+<details>
+
+<summary>Click to expand</summary>
+<p align="center">
+  <img src=".gitea/assets/gpad-viewer_1.png?raw=true" />
+  <img src=".gitea/assets/gpad-viewer_2.png?raw=true" />
+  <img src=".gitea/assets/gpad-viewer_3.png?raw=true" />
+</p>
+
+</details>
+<br>
+
+<u>**hidusbf:**</u>
+
+<details>
+
+<summary>Click to expand</summary>
+<p align="center">
+  <img src=".gitea/assets/hidusbf.jpg?raw=true" />
+</p>
+
+</details>
+<br>
+
+<u>**XInput Tester:**</u>
+
+<details>
+
+<summary>Click to expand</summary>
+<p align="center">
+  <img src=".gitea/assets/xinput-test.png?raw=true" />
+</p>