Gecko Deck

All of the following is to be done on the computer you want to control -- eg. the computer that is running Streamlabs OBS.

1. Download Gecko Deck.
2. Unzip it wherever you want it to be.
3. Install Node.js.
4. Install nut.js in your Gecko Deck folder.
5. Recommended: make a shortcut to launch it. For example, on Windows, if you installed Gecko Deck in a folder named "geckodeck" inside your user folder, and Node.js is in your Program Files folder, you would make a shortcut with "Target" set to C:\Program Files\nodejs\node.exe" geckodeck-server.js and "Start in" set to C:\Users\your-username\geckodeck. I suggest setting "Run" to "Minimized". (To create a shortcut, right click on the place where you want to create it and select New > Shortcut.)

After you've installed and configured Gecko Deck (see below) and created a shortcut to it, you can launch it by double clicking the shortcut. You exit it by closing the window that it opens in, which will, if you set it to run minimized, be in your Task Bar. (Its window will be empty -- this is normal.)

If you launch it by typing the command to launch on the command line, you can exit by typing Ctrl-C (possibly twice -- not sure why it doesn't always exit after the first time.)

Gecko Deck is controlled by accessing it in a web browser. To do this, you'll need to know the IP address of the computer it's running on. (If you can set a static IP address for your computer, that will make your life easier, because you won't have to create a new shortcut on your tablet every time your IP address changes to run Gecko Deck full screen.)

By default, Gecko Deck runs on port 8080. This can be changed by editing the port number at the top of geckodeck-server.js.

If, for example, your IP address is 192.168.1.10 and you're running Gecko Deck on the default port, you will access it by loading http://192.168.1.10:8080/ in a web browser on another device on your network.

In order to run Gecko Deck full screen on Android with no address bar or other widgets clutting it up, you'll need to create a home screen shortcut for it and launch it using that shortcut. To do that:

1. Load it in your browser.
2. Tap the 3 vertical dots in the upper right corner of your browser.
3. Tap "Add to Home screen".
4. Close the browser window.
5. Launch Gecko Deck using the home screen shortcut you just created.

Here are the basic steps needed to set up your button sets:

1. Find the images you want to use on your buttons and copy them into Gecko Deck's "img" folder.
2. Create a file in your Gecko Deck "layout" folder for each button set you wish to create. The file must contain nothing but valid JSON code (more details below), with the exception that you can include comments by typing "//" followed by your comment. Everything on the line following "//" will be ignored by Gecko Deck.
3. For each button set that you wish to be able to navigate directly to from your Gecko Deck home screen, add a line like the following to the "buttons" section of home.json (in the layout folder,) replacing the example contents.
   {"layout":"fortnite.json","img":"folder.png","label":"Fortnite"}
   • If you enter multiple button sets, be sure to separate the lines with commas.
   • As you might imagine, in this example, "fortnite.json" is the name of the button set file created in step 2, "folder.png" is the image to be displayed on the button, and "Fortnite" is the text label to be displayed on the button.
4. To create a button set file, you might start by copying demo.json in the layout folder. Then, replace the contents of the "buttons" section with the definitions for each of your buttons (see below).
5. Depending on your desired grid size, you may wish to change the name of the stylesheet on the "css" line at the top of the file. To use a grid size we haven't defined, or to change the color scheme or other details, you can make your own stylesheets in the "css" folder.

As you can see in home.json and demo.json, a button that is used to switch button sets must contain something like "layout":"layout-filename.json". It may also specify an image (eg. "img":"image-filename.png") and/or a label (eg. "label":"label text").

Any images directly inside of Gecko Deck's "img" folder are specified without a path. Images inside of subfolders will need their paths specified too, using a colon as the folder separator. For example, as you'll see in demo.json, "public-domain-icons-master:building-home-house-dashboard-index.svg". (The folder name "public-domain-icons-master" comes from the place that I got the icons in the folder from. I left their filenames the same...even though they're sometimes painfully long...but changed them all to white. You can see all of the images in that folder on one page by opening the index.html file inside the folder in your web browser. Most of them are probably useless for this purpose, but I left them in anyway in case someone wants them.)

To leave a square on your grid blank, simply enter ,{} (ie. an empty button -- the comma before it is to separate it from the previous button).

To specify a button that triggers keypresses, enter an image and/or label, and then include an "actions" section such as this:

"actions":[ // type n in Interact window
{"c":"kdu","k":["LeftAlt","Tab"]}
,{"c":"w"}
,{"c":"t","k":"N"}
,{"c":"w"}
,{"c":"kdu","k":["LeftAlt","Tab"]}
]

The actions section above specifies 5 things that happen, in order, when the button is pressed:

1. Press and release Alt-Tab (technically, using the left Alt key, but RightAlt could have been used.)
2. Wait 25 milliseconds (the default wait time.)
3. Type the letter "N".
4. Wait 25 milliseconds
5. Press and release Alt-Tab

This is a sequence I use to switch from the game I'm playing to the previously opened window (the Interact window in Streamlabs OBS for my Conversation Starters widget), press "N" to tell the widget to display the next question, and switch back to my game.

"// type n in Interact window" is a comment that I entered to remind me what this sequence of actions is intended to do.

Command Details:

• "c" stands for "command. Valid values are:
  • "kd": key down
  • "ku": key up
  • "kdu": key down, up (with a delay in between)
  • "t": type some text (similar to a series of "kdu" events, but depending on the window that you're sending keypresses to, one or the other may sometimes work where the other doesn't)
  • "w": wait for a specified number of milliseconds (default: 25)
  • "skd": set key delay (the default delay time between keypresses, and for the "w" command)
• "k" stands for "keys". It is used to specify the key or keys to be pressed or released by "kd", "ku" and "kdu".
  • For a single key, it may be a string instead of an array of strings.
  • To press or release multiple keys simultaneously, it must be an array.
  • The keys must be specified using the names in the "keymap" at the bottom of geckodeck-server.js. For most purposes, you'll probably only need "LeftControl", "LeftAlt", "LeftShift", and uppercase letters. See the file if you need numbers or other keys.
  For the "t" (type) command, "k" specifies the string to type. For example, "k":"Type this text."
• To use a non-default wait time for a single command, or to set a new default wait time using the "skd" command, specify the number of millseconds like "t":100