Fixed: - Xbox style; - removed dropdown; - replaced screenshot; - added flatpack instructions; moved around declarations

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 ![looks like this](dropdown.png)
-- 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.<br>
+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
 ![screenshot](Screenshot.png)

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 <link> 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

index.html

@@ -55,8 +55,10 @@
 		}
 
 	</style>
+	<script type="text/javascript" src="./gpcon.js"></script>
 </head>
 <body onload="prep()">
+	<!--button onclick="consent()">consent</button-->
 	<div id="controller_SNES" style="z-index: -50;">
 		<svg style="position: absolute;" height="400" width="400">
 			<path stroke="rgba(var(--clr), var(--clg), var(--clb), var(--cla))" fill="rgba(var(--cbr), var(--cbg), var(--cbb), var(--cba))" d="m 115,120 200,0 c 84,-5 120,145 0,160 -44,0 -44,-20 -84,-20 h -64 c -44,0 -44,20 -84,20 -84,0 -120,-145 0,-160 z"> 
@@ -166,10 +168,6 @@
 	
 	
 	<div id="page" style="	top:15px; position:absolute; z-index: -100; background: (255, 255, 255, 1)">
-		
-
-		<script type="text/javascript" src="gpcon.js"></script>
-
 		<div id="controls" style="position:absolute; top: 0px; left: 500px; width:300px; padding: 0px; font-family: Arial; color: black; mix-blend-mode: difference; user-select: none;">
 			<div id="style_select_wrapper">
 				<div style="text-align: right; float: left;"><label for="darkmode_box">Dark mode:</label><input id="darkmode_box" type="checkbox" ></input></div>