Created
November 21, 2024 17:11
-
-
Save psa-jforestier/d2f8e127dfda3589bd4e80280f0f95a4 to your computer and use it in GitHub Desktop.
Use WebHID to change color of the SteelSeris APEX 3 TKL keyboard. The infamous GG software is not needed anymore.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SteelSeries APEX Color Changer</title> | |
| </head> | |
| <body> | |
| <h1>Change Keyboard Color</h1> | |
| <button id="connect" onclick="requestDevice()">Connect to Keyboard</button> | |
| <input type="color" id="colorPicker" value="#ff0000"> <span id="kbname"></span> | |
| <br/> | |
| <input type="text" id="cmd1" value="0x21" size=4/> <input type="text" id="cmd2" value="0xff" size=4/> | |
| <hr/> | |
| Add a new tab with "about://device-log" to debug USB device.<br/> | |
| Compatible with SteelSeries APEX 3 TKL and probably other.<br/> | |
| <b>You must stop GG before trying this.</b> | |
| </body> | |
| <script> | |
| if (!('hid' in navigator)) { | |
| alert('WebHID API is not supported!'); | |
| } | |
| else | |
| { | |
| console.log('WebHID API supported'); | |
| } | |
| var device; | |
| async function requestDevice() { | |
| try { | |
| const devices = await navigator.hid.requestDevice({ filters: [{ vendorId: 0x1038 }] }); | |
| console.log(devices); | |
| if (devices.length === 0) | |
| { | |
| console.error("No device found"); | |
| return; | |
| } | |
| // Search for device with feature report | |
| for (i=0; i < devices.length; i++) | |
| { | |
| fr = devices[i].collections[0].featureReports.length; | |
| if (fr != 0) | |
| device = devices[i]; | |
| } | |
| document.getElementById('kbname').innerText = device.productName; | |
| device.open(); | |
| } catch (e) { | |
| console.error(e); | |
| } | |
| } | |
| document.getElementById('colorPicker').addEventListener('input', async (event) => { | |
| const color = event.target.value; | |
| const r = parseInt(color.slice(1, 3), 16); | |
| const v = parseInt(color.slice(3, 5), 16); | |
| const b = parseInt(color.slice(5, 7), 16); | |
| cmd1 = parseInt(document.getElementById('cmd1').value); | |
| cmd2 = parseInt(document.getElementById('cmd2').value); | |
| /** | |
| based on https://github.com/ScepticDope/AntiBloatLight | |
| **/ | |
| await device.sendReport(0x00, new Uint8Array( | |
| [cmd1, cmd2, | |
| r, v, b, | |
| r, v, b, | |
| r, v, b, | |
| r, v, b, | |
| r, v, b, | |
| r, v, b, | |
| r, v, b, | |
| r, v, b, | |
| 0x0, 0xff, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0 ])); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is exactly what I want but I can't seem to get it to work. I see my keyboard when I hit "connect to keyboard" and it shows paired, but changing the color does nothing. The device log shows
output report buffer too long ( 52 > 33 )every time I change the color.Does this still work for you?