rweich / streamdeck-ts-template

A template to create streamdeck plugins in typescript
MIT License
41 stars 13 forks source link

multiple buttons? #25

Closed albinotonnina closed 1 year ago

albinotonnina commented 1 year ago

Hello, just started to fiddle with stream deck and your repo. My question is: what steps to have two separate buttons (actions?!) in the same plugin?

I'd assume manifest.json would need changes, namely a new Action in the Actions array?

image

rweich commented 1 year ago

heya,

yep, exactly, you need to start with adding another action in the manifest.

The UUID is important there, as that's the identifier sent with most events as "action" key.

So let's say you listen to the keydown event like this:

plugin.on('keyDown', ({ row, column }) => console.log(`key down on ${row} / ${column}`));

With multiple actions, you'll need to check the action property to distinguish the different buttons:

plugin.on('keyDown', ({ row, column, action }) => {
  console.log(`key down on ${row} / ${column} - ${action}`);
  if (action === 'reverse.dns.formatted.namespace.action') {
    // some code ...
  }
});

same for the PI, when you want to show a different form for both buttons:

// using didReceiveSettings as an example
pi.on('didReceiveSettings', ({ action }) => {
  if (action === 'reverse.dns.formatted.namespace.action') {
    // show form for button 1
  } else {
    // show form for button 2
  }
});

hope that helps

albinotonnina commented 1 year ago

@rweich I see! Thank you, that was quite clarifying and it definitely make sense. By the way shout out for the SDK and the template, possibly the best boilerplate repo I've found for stream deck plugin development. TS and GitHub actions being the cherry on top. 🙏

rweich commented 1 year ago

Thanks for your kind words! I'm glad it's useful.