streamdeck-typescript

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>streamdeck-typescript - v3.2.1</title> <meta name="description" content="Documentation for streamdeck-typescript - v3.2.1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> <script async src="assets/js/search.js" id="search-script"></script> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">streamdeck-typescript - v3.2.1</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> All <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <h1>streamdeck-typescript - v3.2.1</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/network/members"><img src="https://img.shields.io/github/forks/XeroxDev/Stream-Deck-TS-SDK?color=blue&style=for-the-badge" alt="Forks"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/stargazers"><img src="https://img.shields.io/github/stars/XeroxDev/Stream-Deck-TS-SDK?color=yellow&style=for-the-badge" alt="Stars"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/watchers"><img src="https://img.shields.io/github/watchers/XeroxDev/Stream-Deck-TS-SDK?color=lightgray&style=for-the-badge" alt="Watchers"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/graphs/contributors"><img src="https://img.shields.io/github/contributors/XeroxDev/Stream-Deck-TS-SDK?color=green&style=for-the-badge" alt="Contributors"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/issues"><img src="https://img.shields.io/github/issues/XeroxDev/Stream-Deck-TS-SDK?color=yellow&style=for-the-badge" alt="Issues"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/issues?q=is%3Aissue+is%3Aclosed"><img src="https://img.shields.io/github/issues-closed/XeroxDev/Stream-Deck-TS-SDK?color=yellow&style=for-the-badge" alt="Issues closed"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/pulls"><img src="https://img.shields.io/github/issues-pr/XeroxDev/Stream-Deck-TS-SDK?color=yellow&style=for-the-badge" alt="Issues-pr"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/pulls?q=is%3Apr+is%3Aclosed"><img src="https://img.shields.io/github/issues-pr-closed/XeroxDev/Stream-Deck-TS-SDK?color=yellow&style=for-the-badge" alt="Issues-pr closed"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/compare"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge" alt="PRs welcome"></a> <a href="https://sonarcloud.io/dashboard?id=XeroxDev_Stream-Deck-TS-SDK"><img src="https://img.shields.io/sonar/quality_gate/XeroxDev_Stream-Deck-TS-SDK?server=https%3A%2F%2Fsonarcloud.io&style=for-the-badge" alt="Sonar Quality Gate"></a> <a href="https://www.npmjs.com/package/streamdeck-typescript"><img src="https://img.shields.io/npm/dt/streamdeck-typescript?style=for-the-badge&logo=npm" alt="npm"></a> <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/blob/master/LICENSE"><img src="https://img.shields.io/github/license/XeroxDev/Stream-Deck-TS-SDK?style=for-the-badge" alt="GitHub license"></a> <a href="https://shields.io"><img src="https://img.shields.io/badge/badges-awesome-green?style=for-the-badge" alt="Awesome Badges"></a> <a href="#stream-deck-ts-sdk" id="stream-deck-ts-sdk" style="color: inherit; text-decoration: none;"> <h1>Stream Deck TS-SDK</h1> </a> A library that helps you develop plugins for Elgato's Stream Deck. <a href="#installation" id="installation" style="color: inherit; text-decoration: none;"> <h2>Installation</h2> </a> <ul> <li>Install via <a href="https://www.npmjs.com/"><code>npm</code></a>:</li> </ul> <pre><code class="language-bash">npm install --save streamdeck-typescript </code></pre> <a href="#decorators" id="decorators" style="color: inherit; text-decoration: none;"> <h2>Decorators</h2> </a> This Plugin adds a few decorators for classes and methods. <a href="#available-decorators" id="available-decorators" style="color: inherit; text-decoration: none;"> <h3>Available decorators</h3> </a> <ul> <li>methods<ul> <li><code>@SDOnPiEvent(event)</code> - Listens for specified event in the property inspector context and if triggered, calls method<ul> <li>Overhands EventData (*NameOfEvent*Event; Example: KeyDownEvent, KeyUpEvent, WillAppearEvent)</li> </ul> </li> <li><code>@SDOnActionEvent(event)</code> - Listens for specified event in the action context and if triggered, calls method<ul> <li>Overhands EventData (*NameOfEvent*Event; Example: KeyDownEvent, KeyUpEvent, WillAppearEvent)</li> </ul> </li> </ul> </li> </ul> <a href="#usage" id="usage" style="color: inherit; text-decoration: none;"> <h2>Usage</h2> </a> You can see an example in the <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/tree/master/example">example</a> folder or look through the <a href="https://xeroxdev.github.io/Stream-Deck-TS-SDK/">Source docs</a> <a href="#initializing-plugin" id="initializing-plugin" style="color: inherit; text-decoration: none;"> <h3>Initializing Plugin</h3> </a> Elgato uses 2 different files. The Action file (which handels all actions), and the Property Inspector file (which is for settings) <a href="#counterts" id="counterts" style="color: inherit; text-decoration: none;"> <h4>counter.ts</h4> </a> <pre><code class="language-typescript">import {StreamDeckPluginHandler} from '../src'; import {CounterAction} from './actions/counter.action'; export class Counter extends StreamDeckPluginHandler { constructor() { super(); new CounterAction(this, 'fun.shiro.counter.action'); } } new Counter(); </code></pre> <a href="#pluginhtml" id="pluginhtml" style="color: inherit; text-decoration: none;"> <h4>plugin.html</h4> </a> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <title>Test Plugin</title> <meta charset="utf-8"> <script src="dist/bundle.js"></script> </head> <body> </body> </html> </code></pre> Here you can see. After the build you have only one file (bundle.js in this case) and this gets loaded. <a href="#counter-pits" id="counter-pits" style="color: inherit; text-decoration: none;"> <h4>counter-pi.ts</h4> </a> <pre><code class="language-typescript">import {DidReceiveSettingsEvent, SDOnPiEvent, StreamDeckPropertyInspectorHandler} from '../src'; import {SettingsInterface} from './interfaces/settings.interface'; class CounterPi extends StreamDeckPropertyInspectorHandler { private count: HTMLInputElement; private stepsCount: HTMLInputElement; constructor() { super(); } @SDOnPiEvent('documentLoaded') onDocumentReady() { this.count = document.getElementById('count') as HTMLInputElement; this.count.addEventListener('keyup', () => this.settingsManager.setContextSettingsAttributes( this.actionInfo.context, {count: this.count.valueAsNumber}, 500)); this.stepsCount = document.getElementById('steps') as HTMLInputElement; this.stepsCount.addEventListener('keyup', () => this.settingsManager.setContextSettingsAttributes( this.actionInfo.context, {steps: this.stepsCount.valueAsNumber}, 500)); const settings = this.settingsManager.getContextSettings<SettingsInterface>(this.actionInfo.context); this.count.value = (settings?.count ?? 0).toString(); this.stepsCount.value = (settings?.steps ?? 1).toString(); } @SDOnPiEvent('didReceiveSettings') private onSettingsReceived({payload: {settings}}: DidReceiveSettingsEvent<SettingsInterface>) { if (Object.keys(settings).length <= 0) return; this.count.value = settings.count.toString() ?? 0; this.stepsCount.value = settings.steps.toString() ?? 1; } } new CounterPi(); </code></pre> <a href="#property-inspectorhtml" id="property-inspectorhtml" style="color: inherit; text-decoration: none;"> <h4>property-inspector.html</h4> </a> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <title>Test Plugin Inspector</title> <meta charset="utf-8"> <link rel="stylesheet" href="sdpi.css"> <script src="dist/bundle-pi.js"></script> </head> <body> <div class="sdpi-wrapper" id="mainSettings"> <div class="sdpi-item"> <div class="sdpi-item-label">Count</div> <input class="sdpi-item-value" type="number" id="count" value="0"> </div> <div class="sdpi-item"> <div class="sdpi-item-label">Steps</div> <input class="sdpi-item-value" type="number" id="steps" value="1"> </div> </div> </body> </html> </code></pre> <a href="#counteractionts" id="counteractionts" style="color: inherit; text-decoration: none;"> <h4>counter.action.ts</h4> </a> <pre><code class="language-typescript">import { DidReceiveSettingsEvent, KeyDownEvent, KeyUpEvent, SDOnActionEvent, StreamDeckAction, WillAppearEvent } from '../../src'; import {Counter} from '../counter'; import {SettingsInterface} from '../interfaces/settings.interface'; export class CounterAction extends StreamDeckAction<Counter, CounterAction> { private keyUpTimer: any; constructor(private plugin: Counter, private actionName: string) { super(plugin, actionName); } @SDOnActionEvent('willAppear') private onAppear({context, payload: {settings}}: WillAppearEvent<SettingsInterface>) { this.plugin.setTitle((settings.count ?? 0).toString(), context); } @SDOnActionEvent('keyUp') private onKeyUp({context, payload: {settings}}: KeyUpEvent<SettingsInterface>) { clearTimeout(this.keyUpTimer); const steps = settings.steps ?? 1; const count = (settings.count ?? 0) + steps; this.plugin.setTitle(count.toString(), context); this.plugin.setSettings<SettingsInterface>({steps, count}, context); } @SDOnActionEvent('keyDown') private onKeyDown({context, payload: {settings}}: KeyDownEvent<SettingsInterface>) { this.keyUpTimer = setTimeout(() => { const steps = settings.steps ?? 1; this.plugin.setSettings<SettingsInterface>( { steps, count: steps * -1 }, context ); this.plugin.setTitle('0', context); }, 2000); } @SDOnActionEvent('didReceiveSettings') private onSettings({context, payload: {settings}}: DidReceiveSettingsEvent<SettingsInterface>) { this.plugin.setTitle(settings.count.toString() ?? 0, context); } } </code></pre> <a href="#settingsinterfacets" id="settingsinterfacets" style="color: inherit; text-decoration: none;"> <h4>settings.interface.ts</h4> </a> <pre><code class="language-typescript">export interface SettingsInterface { count: number, steps: number } </code></pre> <a href="#building-the-plugin" id="building-the-plugin" style="color: inherit; text-decoration: none;"> <h2>Building the Plugin</h2> </a> I would suggest you to do it like in the example with browserify, terser, tsify, typescript and for development watchify See <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/blob/master/package.json">package.json</a> and <a href="https://github.com/XeroxDev/Stream-Deck-TS-SDK/blob/master/tsconfig.json">tsconfig.json</a> <pre><code class="language-json">{ "scripts": { "build": "tsc -p tsconfig.json", "build-example": "browserify -p tsify example/counter-pi.ts | terser -cm --comments false -o dist/bundle-pi.js && browserify -p tsify example/counter.ts | terser -cm --comments false -o dist/bundle.js", "watch": "start watchify --debug -p tsify example/counter.ts -o dist/bundle.js && start watchify --debug -p tsify example/counter-pi.ts -o dist/bundle-pi.js", "documentation": "typedoc src/index.ts", "test": "echo \"Error: no test specified\" && exit 1" } } </code></pre> <a href="#how-to-contribute" id="how-to-contribute" style="color: inherit; text-decoration: none;"> <h2>How to contribute?</h2> </a> Just fork the repository and create PR's, but we use <a href="https://github.com/conventional-changelog/standard-version">standard-version</a> to optimal release the plugin. standard-version is following the <a href="https://www.conventionalcommits.org">conventionalcommits</a> specification which follows the <a href="https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines">angular commit guidelines</a> </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class=" "> <a href="modules.html">Exports</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> <li class=" tsd-kind-enum"> <a href="enums/devicetype.html" class="tsd-kind-icon">DeviceType</a> </li> <li class=" tsd-kind-enum"> <a href="enums/eventtype.html" class="tsd-kind-icon">EventType</a> </li> <li class=" tsd-kind-enum"> <a href="enums/statetype.html" class="tsd-kind-icon">StateType</a> </li> <li class=" tsd-kind-enum"> <a href="enums/targettype.html" class="tsd-kind-icon">TargetType</a> </li> <li class=" tsd-kind-class"> <a href="classes/actionmanager.html" class="tsd-kind-icon">ActionManager</a> </li> <li class=" tsd-kind-class"> <a href="classes/settingsmanager.html" class="tsd-kind-icon">SettingsManager</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/streamdeckaction.html" class="tsd-kind-icon">StreamDeckAction</a> </li> <li class=" tsd-kind-class"> <a href="classes/streamdeckactionclass.html" class="tsd-kind-icon">StreamDeckActionClass</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/streamdeckhandlerbase.html" class="tsd-kind-icon">StreamDeckHandlerBase</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/streamdeckpluginhandler.html" class="tsd-kind-icon">StreamDeckPluginHandler</a> </li> <li class=" tsd-kind-class tsd-has-type-parameter"> <a href="classes/streamdeckpropertyinspectorhandler.html" class="tsd-kind-icon">StreamDeckPropertyInspectorHandler</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/acddata.html" class="tsd-kind-icon">AcdData</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/applicationdidlaunchevent.html" class="tsd-kind-icon">ApplicationDidLaunchEvent</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/applicationdidterminateevent.html" class="tsd-kind-icon">ApplicationDidTerminateEvent</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/coordinates.html" class="tsd-kind-icon">Coordinates</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/devicedidconnectevent.html" class="tsd-kind-icon">DeviceDidConnectEvent</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/devicediddisconnectevent.html" class="tsd-kind-icon">DeviceDidDisconnectEvent</a> </li> <li class=" tsd-kind-interface tsd-has-type-parameter"> <a href="interfaces/dialdownevent.html" class="tsd-kind-icon">DialDownEvent</a> </li> <li class=" tsd-kind-interface tsd-has-type-parameter"> <a href="interfaces/dialrotateevent.html" class="tsd-kind-icon">DialRotateEvent</a> </li> <li class=" tsd-kind-interface tsd-has-type-parameter"> <a href="interfaces/dialupevent.html" class="tsd-kind-icon">DialUpEvent</a> </li> <li class=" tsd-kind-interface tsd-has-type-parameter"> <a href="interfaces/didreceiveglobalsettingsevent.html" class="tsd-kind-icon">DidReceiveGlobalSettingsEvent</a> </li> <li class=" tsd-ki