{"id":3406,"date":"2025-04-16T12:15:46","date_gmt":"2025-04-16T16:15:46","guid":{"rendered":"https:\/\/techministry.blog\/?p=3406"},"modified":"2025-04-16T12:15:46","modified_gmt":"2025-04-16T16:15:46","slug":"gamepad-io-using-game-controllers-the-web-gamepad-api-electron-socket-io-and-a-custom-module-to-use-any-game-pad-or-controller-as-a-satellite-surface-for-companion","status":"publish","type":"post","link":"https:\/\/techministry.blog\/?p=3406","title":{"rendered":"gamepad-io: Using game controllers, the Web Gamepad API, Electron, socket.io, and a custom module to use any game pad or controller as a Satellite surface for Companion"},"content":{"rendered":"\n<p>I started on this over 6 months ago &#8211; and am excited to release this! Last year, I was approached by a programming client who had a simple ask: &#8220;Can I use an Xbox controller with Companion?&#8221; This of course got my wheels turning, for a few reasons. 1, It&#8217;s cool. 2, It hadn&#8217;t been done before. 3, Game controllers are inexpensive, and that excited me for anyone trying to do more while spending less, like so many of us are trying to do in church tech ministry.<\/p>\n\n\n\n<p>My first response to this client was: &#8220;I can make this &#8211; but I want to release it as an open source project for the community. You&#8217;ll effectively help to sponsor the creation of a new resource for everyone, while gaining the custom solution you need.&#8221;<\/p>\n\n\n\n<p>They agreed and I got started. I first created a small Electron app that runs a Renderer process with a Chromium window that accesses the Web Gamepad API. Any game controller that is connected to the computer (whether wired or wireless) will show up once a button on any controller is connected.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/techministryblog.wordpress.com\/wp-content\/uploads\/2025\/02\/screenshot-2025-02-10-at-11.05.08e280afam.png?w=1024\" alt=\"\" class=\"wp-image-3445\" \/><\/figure>\n<\/div>\n\n\n<p>All of this controller data is tracked and stored, and then sent via socket.io to any connected client. The app itself could be used to send this controller data to anything. In my case, I made a Companion module that listens to this socket and then the module itself emulates a Companion surface.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"3450\" src=\"https:\/\/techministryblog.wordpress.com\/wp-content\/uploads\/2025\/02\/screenshot-2025-02-10-at-11.05.54e280afam.png?w=1024\" alt=\"\" class=\"wp-image-3450\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"3448\" src=\"https:\/\/techministryblog.wordpress.com\/wp-content\/uploads\/2025\/02\/screenshot-2025-02-10-at-11.06.33e280afam.png?w=1024\" alt=\"\" class=\"wp-image-3448\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"3447\" src=\"https:\/\/techministryblog.wordpress.com\/wp-content\/uploads\/2025\/02\/screenshot-2025-02-10-at-11.06.54e280afam.png?w=1024\" alt=\"\" class=\"wp-image-3447\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"3449\" src=\"https:\/\/techministryblog.wordpress.com\/wp-content\/uploads\/2025\/02\/screenshot-2025-02-10-at-11.10.30e280afam.png?w=1024\" alt=\"\" class=\"wp-image-3449\" \/><\/figure>\n<\/figure>\n\n\n\n<p>My client needed a lot of variables and configuration options for what they were doing. Every button and axis movement is stored as a variable in the module. And, if you enable the option to use as a surface, you can press controller buttons and it will then in turn press the assigned button in Companion! I&#8217;ve been stress testing this with my client for a few months now and am super pleased with how well it works.<\/p>\n\n\n\n<p>Here&#8217;s a video of it in action:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"jetpack-video-wrapper\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/gIGSecme4Vo?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/div>\n<\/div><\/figure>\n\n\n\n<p>The module is in the Companion betas now, and you can download the app for free from my Github repository: <a href=\"http:\/\/github.com\/josephdadams\/gamepad-io\/releases\">http:\/\/github.com\/josephdadams\/gamepad-io\/releases<\/a><\/p>\n\n\n\n<p>It&#8217;s open source, so if you see something that could be better, submit a pull request!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I started on this over 6 months ago &#8211; and am excited to release this! Last year, I was approached by a programming client who had a simple ask: &#8220;Can I use an Xbox controller with Companion?&#8221; This of course got my wheels turning, for a few reasons. 1, It&#8217;s cool. 2, It hadn&#8217;t been &hellip; <a href=\"https:\/\/techministry.blog\/?p=3406\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;gamepad-io: Using game controllers, the Web Gamepad API, Electron, socket.io, and a custom module to use any game pad or controller as a Satellite surface for Companion&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[19,40,50,51,68],"class_list":["post-3406","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-companion","tag-nodejs","tag-production","tag-programming","tag-technology"],"_links":{"self":[{"href":"https:\/\/techministry.blog\/index.php?rest_route=\/wp\/v2\/posts\/3406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techministry.blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techministry.blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techministry.blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techministry.blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3406"}],"version-history":[{"count":0,"href":"https:\/\/techministry.blog\/index.php?rest_route=\/wp\/v2\/posts\/3406\/revisions"}],"wp:attachment":[{"href":"https:\/\/techministry.blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techministry.blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techministry.blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}