diff --git a/README.md b/README.md index c7cac29..53592e6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # gamepad-viewer -Displays live status about gamepads connected to your computer +Displays live status about gaming devices connected to your computer. ## Demo [gamepad.e7d.io](https://gamepad.e7d.io/) @@ -13,23 +13,97 @@ Displays live status about gamepads connected to your computer - `C`: Change active gamepad color - `D`: Toggle debug mode for active gamepad - `H`: Toggle help menu -- `T`: Toggle triggers meter mode +- `T`: Toggle triggers mode (opacity / meter) - `Delete` or `Esc`: Clear active gamepad -## Supported Gamepads +## Supported gamepads +- Sony DualSense* - Sony DualShock 4* +- Microsoft Xbox Series Controller* - Microsoft Xbox One Controller* - Microsoft Xbox 360 Controller - Nintendo Switch Pro Controller* - Xinput compatible gamepads -## How to use on OBS Studio -Please read below or use this video tutorial: https://youtu.be/vHzf_ESseTc -- Go to [gamepad.e7d.io](https://gamepad.e7d.io/) -- Activate the controller you want to use on OBS by long pressing one of its buttons -- Configure it as desired: adjust zoom, change color... -- Copy the resulting web page URL (i.e.: https://gamepad.e7d.io/?type=ds4&color=white) +## Parameters + +All the parameters are set in the URL. +| **Parameter** | **Description** | **Value** | **Default** | +|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------| +| gamepad | The controller ID of a specific gamepad to use. Please find the controller ID by using the help displayed using the `h` keyboard button. | i.e.: `Microsoft Controller (STANDARD GAMEPAD Vendor: 045e Product: 0b00)` | | +| type | The type of controller (the "skin") to display to the screen.
When possible, the type of controller is auto detected to display the corresponding skin. | - `debug`
- `dualsense`
- `ds4`
- `xbox-one`
- `telemetry` (beta mode for wheels that requires specific configuration) | | +| background | The background color. | - `transparent`
- `checkered`
- `grey`
- `black`
- `white`
- `lime`
- `magenta` | `transparent` | +| color | The displayed gamepad color. | Depending of the selected display `type`. | | +| triggers | The triggers display mode, when applicable. | - `opacity`
- `meter` | `opacity` | +| zoom | The zoom level of the display controller. | Any integer value from `0.1` to `4`, corresponding to a zoom value for 10% to 400%.
When no value is set, the zoom is auto adjusted to fit the window size. | | + +## Telemetry configuration + +The `telemetry` display mode is a beta mode, designed for wheels, that requires specific configuration. + +### Axes and buttons mapping + +The `telemetry` mode requires for you to determine which axes or buttons will be used used for each telemetry data: clutch, brake, throttle and direction. + +To help you do so, you need to access the Gamepad Viewer with the `debug` skin. To do so, you can go to https://gamepad.e7d.io/?type=debug, and press any button for detection. + +For each of the axes or buttons you want to use, activate them one by one, and proceed as following: +- observe the changing value in the `Axes` and `Buttons` sections to determine the correct entry +- note down its type (axis or button) and its index. +- for the clutch, brake and throttle, note down the minimum (when released) and maximum (when pressed) values +- for the direction, note down the minimum (left) and maximum (right) values + +For example with a **Thrustmaster T818**, you should get the following values: +- clutch: axis 6, min 1, max -1 +- brake: axis 1, min 1, max -1 +- throttle: axis 5, min 1, max -1 +- direction: axis 0, min -1, max 1 + +Another example with a **Xbox one controller** with the A button used as clutch, the triggers as brake and throttle, and the left stick as direction. You should get the following values: +- clutch: button 0, min 0, max 1 +- brake: button 6, min 0, max 1 +- throttle: button 7, min 0, max 1 +- direction: axis 0, min -1, max 1 + +### Telemetry parameters + +All the parameters are set in the URL. +| **Parameter** | **Description** | **Value** | **Default** | +|---|---|---|---| +| clutchType | The clutch type, either an axis or a button. | `axis` or `button` | `axis` | +| clutchIndex | The index of the clutch axis or button. | A positive integer. | | +| clutchMin | The minimum value when the clutch is fully released. | `-1`, `0` or `1` | `-1` | +| clutchMax | The maximum value when the clutch is fully pressed. | `-1`, `0` or `1` | `1` | +| brakeType | The brake type, either an axis or a button. | `axis` or `button` | `axis` | +| brakeIndex | The index of the brake axis or button. | A positive integer. | | +| brakeMin | The minimum value when the brake is fully released. | `-1`, `0` or `1` | `-1` | +| brakeMax | The maximum value when the brake is fully pressed. | `-1`, `0` or `1` | `1` | +| throttleType | The throttle type, either an axis or a button. | `axis` or `button` | `axis` | +| throttleIndex | The index of the throttle axis or button. | A positive integer. | | +| throttleMin | The minimum value when the throttle is fully released. | `-1`, `0` or `1` | `-1` | +| throttleMax | The maximum value when the throttle is fully pressed. | `-1`, `0` or `1` | `1` | +| directionType | The direction type, either an axis or a button. | `axis` or `button` | `axis` | +| directionIndex | The index of the direction axis or button. | A positive integer. | | +| directionMin | The value when the direction is fully on the left. | `-1`, `0` or `1` | `-1` | +| directionMax | The value when the direction is fully on the right. | `-1`, `0` or `1` | `1` | +| directionDegrees | The angle in degrees to represent the direction changes.
Common wheel values are `360`, `900` and `1080`. | A positive integer. | `360` | +| fps | The number of render calculations per second.
The default `60` is smoother but can be challenging for the CPU.
Can be reduced to `30` for performance. | A positive integer. | `60` | +| history | The duration in milliseconds of data to display in the history graph. | A positive integer. | `5000` | + +### Examples + +Some working examples: +- Thrustmaster T818, with 900 degrees direction: http://gamepad.e7d.io/?gamepad=044f-b696&type=telemetry&clutchIndex=6&clutchMin=1&clutchMax=-1&brakeIndex=1&brakeMin=1&brakeMax=-1&throttleIndex=5&throttleMin=1&throttleMax=-1&directionIndex=0&directionDegrees=900 +- DualShock 4 or Xbox Controller, with 180 degrees direction representation: http://gamepad.e7d.io/?gamepad=045e-0b00&type=telemetry&brakeType=button&brakeIndex=6&brakeMin=0&brakeMax=1&throttleType=button&throttleIndex=7&throttleMin=0&throttleMax=1&directionIndex=0&directionDegrees=180 +- DualShock 4 or Xbox Controller, with clutch as A or Cross button, and 180 degrees direction representation: http://gamepad.e7d.io/?gamepad=045e-0b00&type=telemetry&clutchType=button&clutchIndex=0&clutchMin=0&clutchMax=1&brakeType=button&brakeIndex=6&brakeMin=0&brakeMax=1&throttleType=button&throttleIndex=7&throttleMin=0&throttleMax=1&directionIndex=0&directionDegrees=180 + +## How to use with OBS Studio +Please read below: +- Open [gamepad.e7d.io](https://gamepad.e7d.io/) in your browser +- Activate the controller you want to display in OBS by long pressing one of its buttons +- Configure it as desired: change skin, controller color, gamepad color, zoom... +- Copy the resulting web page URL (i.e.: https://gamepad.e7d.io/?type=ds4&color=white&triggers=meter) - Go back to OBS Studio - Add a Browser source: Right click in "Sources" > "Add" > "Browser" - Name it as you want (i.e.: "Gamepad") @@ -41,3 +115,4 @@ Please read below or use this video tutorial: https://youtu.be/vHzf_ESseTc ## Credits DualShock 4 and Xbox One skins from [gamepadviewer.com](https://gamepadviewer.com/) +DualSense skin from [justEhCupcake](https://github.com/justEhCupcake/justEhCupcake.github.io/tree/main/PS5_Display_Pics) diff --git a/index.html b/index.html index 28e3af2..4cc851c 100644 --- a/index.html +++ b/index.html @@ -98,7 +98,7 @@ - + diff --git a/js/gamepad.js b/js/gamepad.js index d1ea89c..203387a 100644 --- a/js/gamepad.js +++ b/js/gamepad.js @@ -1109,7 +1109,7 @@ class Gamepad { } else if (level === 0) { // 0 means a zoom reset this.zoomLevel = 1; - } else if (level === '+' && this.zoomLevel < 2) { + } else if (level === '+' && this.zoomLevel < 4) { // '+' means a zoom in if we still can this.zoomLevel += 0.1; } else if (level === '-' && this.zoomLevel > 0.1) { diff --git a/samples.txt b/samples.txt deleted file mode 100644 index 68b9f6a..0000000 --- a/samples.txt +++ /dev/null @@ -1,4 +0,0 @@ -Samples: -- T818: http://localhost:8081/?gamepad=044f-b696&type=telemetry&clutchIndex=6&clutchMin=1&clutchMax=-1&brakeIndex=1&brakeMin=1&brakeMax=-1&throttleIndex=5&throttleMin=1&throttleMax=-1&directionIndex=0&directionDegrees=900 -- Xbox Controller: http://localhost:8081/?gamepad=045e-0b00&type=telemetry&brakeType=button&brakeIndex=6&brakeMin=0&brakeMax=1&throttleType=button&throttleIndex=7&throttleMin=0&throttleMax=1&directionIndex=0&directionDegrees=180 -- Xbox Controller with clutch: http://localhost:8081/?gamepad=045e-0b00&type=telemetry&clutchType=button&clutchIndex=0&clutchMin=0&clutchMax=1&&brakeType=button&brakeIndex=6&brakeMin=0&brakeMax=1&throttleType=button&throttleIndex=7&throttleMin=0&throttleMax=1&directionIndex=0&directionDegrees=180