diff --git a/README.md b/README.md
index 7ac72a2..88a798d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# JS-DualShock3-Monitor
-Pure javascript-driven gamepad monitor (styled for Dualshock 3, NES, SNES, XBox 360)
+Pure javascript-driven gamepad monitor (styled for mini-Dualshock 3, NES, SNES, XBox 360)
Built to be used in OBS an an overlay.
That means the controller will be semi-transparent.
@@ -14,12 +14,23 @@ Compatible with any XInput device (xbox controllers, Mayflash Magic adapters in
- Click "Browse" and select the index.html from this repo
- Tick the "Shutdown source when not visible" box
- Tick the "Refresh browser when scene becomes active" box
-- Make suse the browser source has `body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }` in the `Custom CSS` field
+- Make suse the browser source has `body { background-color: rgba(0, 0, 0, 0)!important; overflow: hidden; }` in the `Custom CSS` field
### To change styles:
- Right click your browser source
- Pick the "Ineteract" options
-- Click on dropdown list utill it's open. Note that you won't see any actual items, instead there will be thick border inside the list 
-- Use up/down arrows to chose the desired style
+- Select "Controller type"
+- Adjust strokes and fill colors using sliders
+### Flatpack OBS
+Flatpack OBS is a weird beast (as all flatpacks surely are), but many consider it to be the only way to use OBS on their Linux system.
+At least on Manjaro, the default "permissions" of flatpacks disallow controller access.
+That *is* fixable, but [opens a can of worms of its own](https://docs.flatpak.org/en/latest/sandbox-permissions.html).
+If you're okay with that, add `--filesystem=/run/udev --device=all` to your .desktop file/launch script.
+Mine ended up looking like this:
+```
+/usr/bin/flatpak run --filesystem=/run/udev --device=all --branch=stable --arch=x86_64 --command=obs com.obsproject.Studio
+```
+
+### Screenshots
diff --git a/Screenshot.png b/Screenshot.png
index caf7e2e..650fc64 100644
Binary files a/Screenshot.png and b/Screenshot.png differ
diff --git a/Xbox.css b/XBOX.css
similarity index 100%
rename from Xbox.css
rename to XBOX.css
diff --git a/dropdown.png b/dropdown.png
deleted file mode 100644
index 8845094..0000000
Binary files a/dropdown.png and /dev/null differ
diff --git a/gpcon.js b/gpcon.js
index c5f281f..7b3e37e 100644
--- a/gpcon.js
+++ b/gpcon.js
@@ -78,7 +78,6 @@ function prep() {
border_box.addEventListener("change", border_box_change)
function border_box_change(event) {
let show_buttons_border = border_box.checked
- console.log(show_buttons_border)
if (show_buttons_border){
buttons_border_element.style.border = "1px solid red"
} else {
@@ -192,8 +191,7 @@ function prep() {
XBOX_option.addEventListener("click", style_change)
// this changes style by deleting an old element and creating a new one
- function style_change(event) {
- console.log("sdd")
+ function style_change(event) {
let head = document.getElementsByTagName( "head" )[0]
for (let child of head.children) {
@@ -230,9 +228,15 @@ function prep() {
lines_color_change()
darkmode_change()
border_box_change()
+
+
}
+function consent(){
+ let gamepads = navigator.getGamepads();
+ console.log(gamepads)
+}
let buttons = []; // remembers if button was added
@@ -245,6 +249,7 @@ function onFrame() { // gets repeatedly executed
let gamepads = navigator.getGamepads(); // this gets *all* gamepads that your browser was able to detect
// note: gamepad may stay undetected until you press a button on it
let gp = gamepads[0]; // we start with the 1st gamepad
+
if (!gp) { // but browsers can detect some NULL devices, so we check if there's really something
for (i = 0; i < gamepads.length; i++) { // cycling and checking every other gamepad seems good enough
gp = gamepads[i]; // we get a gemapad
@@ -263,6 +268,7 @@ function onFrame() { // gets repeatedly executed
if (typeof gp === "undefined") { // seems unnecessary, but hey, we need to be sure a gamepad exists
} else { // at this point gamepad is properly detected
+ gp.mapping = "standard"
let buttdiv = document.getElementById('buttons') // so, we get our container element (see index.html) and add 'buttons' to it
for (j = 0; j < gp.buttons.length; j++) { // we cycle through all detected buttons and add those to a 'buttons' array
if (typeof buttons[j] === "undefined") { // if jth button isn't added yet, we will do just that
diff --git a/index.html b/index.html
index d794705..be38359 100644
--- a/index.html
+++ b/index.html
@@ -55,8 +55,10 @@
}
+
+