-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 8a024b3
Showing
7 changed files
with
1,249 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
name: Release version | ||
|
||
on: | ||
push: | ||
tags: | ||
- 'v*' | ||
|
||
jobs: | ||
build: | ||
name: Create Release | ||
runs-on: ubuntu-latest | ||
steps: | ||
- name: Checkout code | ||
uses: actions/checkout@v2 | ||
- name: Install Node v12 | ||
uses: actions/setup-node@v1 | ||
with: | ||
node-version: '12.x' | ||
- name: Install NPM Packages | ||
run: npm install | ||
- name: Build | ||
run: npm run build --if-present | ||
- name: Create Release | ||
id: create_release | ||
uses: actions/create-release@v1 | ||
env: | ||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
with: | ||
tag_name: ${{ github.ref }} | ||
release_name: Release ${{ github.ref }} | ||
body: | | ||
Changes in this Release | ||
- First version | ||
draft: false | ||
prerelease: false | ||
- name: Upload Release Asset | ||
id: upload-release-asset | ||
uses: actions/upload-release-asset@v1 | ||
env: | ||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
with: | ||
upload_url: ${{ steps.create_release.outputs.upload_url }} | ||
asset_path: ./dist/StreamDeckSDK.js | ||
asset_name: StreamDeckSDK.js | ||
asset_content_type: text/javascript | ||
- name: Publish NPM | ||
uses: pascalgn/npm-publish-action@4f4bf159e299f65d21cd1cbd96fc5d53228036df | ||
with: | ||
tag_name: "v%s" | ||
tag_message: "v%s" | ||
env: | ||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }} |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
/.idea | ||
/dist | ||
/node_modules/ |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,138 @@ | ||
# Stream Deck SDK | ||
|
||
This project is a **not official** SDK for Elgato's Stream Deck. | ||
|
||
The idea behind was that there are few "files" or projects which want providing an layer for the Stream Deck. | ||
But I want to develop some plugins as easy as possible and as fast as possible. | ||
|
||
## Features | ||
|
||
- Automatic setting management (Loading & Saving values in Property Inspector with 2 lines of code) | ||
- Setting image easily via URL | ||
- Drawing management (Canvas) | ||
- HTTP Module (http.get/http.post/... easily instead of fetch) | ||
|
||
# Installation | ||
|
||
$ npm install streamdeck-sdk | ||
|
||
After that add the script to header of your html files. (i.e. `plugin.html`/`index.html` and `property-inspector.html`) | ||
|
||
<script src="node_modules/streamdeck-sdk/dist/StreamDeckSDK.js"></script> | ||
|
||
When you downloaded only the `StreamDeckSDK.js` you can easily add them, too. | ||
|
||
<script src="StreamDeckSDK.js"></script> | ||
|
||
# Registration Procedure | ||
|
||
Read the steps for the plugin and for the property inspector. | ||
|
||
## Plugin | ||
|
||
The plugin is easily load via: | ||
|
||
<script> | ||
var plugin = new StreamDeckPlugin(); | ||
</script> | ||
|
||
## Property Inspector | ||
|
||
The property inspector is easily load via: | ||
|
||
<script> | ||
var propertyInspector = new StreamDeckPropertyInspector(); | ||
</script> | ||
|
||
### Automatic setting management | ||
|
||
For enabling the property inspector setting management you must add this line to your `<script>`: | ||
|
||
propertyInspector.enableSettingManager(); | ||
|
||
Behind the scene it loops all your `input`, `textarea` and `select` elements. | ||
Then it checks for the `name` or `id` attribute and if it's already set in the `settings` of your Stream Deck. | ||
|
||
If yes, it automatically set's the `value` of your element to the stored value. | ||
On change event it will automatically store the value. | ||
And in case of closing the property inspector there is a listener for the `beforeunload` event. | ||
(which sends the settings to the plugin which stores it then automatically) | ||
|
||
You can disable the automatic loading and saving for single elements by adding the `sdk-ignore` class. | ||
|
||
This logic supports also `file` inputs. | ||
You can show the `file` then in the plugin via `instance.setImageURL(instance.settings.myname)`. | ||
|
||
### Example: Simple counter (with stored and changable value) | ||
|
||
This demonstrates how easy you can develop a plugin with property inspector view. | ||
|
||
_Do not forget to add the StreamDeckSDK.js in plugin and property inspector files as described in Installation!_ | ||
|
||
#### Plugin | ||
|
||
The plugin shows a number (counter) and on each key press (keyUp) it will count the number plus one. | ||
But when we got a new value from property inspector we also want to use this number. | ||
|
||
// First we initialize the Stream Deck Plugin | ||
var plugin = new StreamDeckPlugin(); | ||
// Then we listen to the initialization process | ||
plugin.on('init', function(event) { | ||
// Each init gives one instance (instance = 1 button on the Stream Deck) | ||
// Instances having an `action` which you can check when you have multiple actions! | ||
// i.e. if (instance.action === 'org.examle.firstaction') { } | ||
var instance = event.detail.instance; | ||
// Then we setting the title of the instance to the counter - else 1 | ||
instance.setTitle((+instance.settings.counter) || 1); | ||
// Now we're going to listen for keyUp, so whenever we press the button and release this is called | ||
instance.on('keyUp', function() { | ||
// Lets get the current value and count + 1 | ||
var count = ((+instance.settings.counter) || 1) + 1; | ||
// Now lets set the title of our instance to the number | ||
instance.setTitle(count); | ||
// And then lets save the new number | ||
instance.setSetting('counter', count); | ||
}); | ||
// We want also to listen for changed settings from the property inspector | ||
instance.on('didReceiveSettings', function() { | ||
// So when property inspector changes the counter value set the title to it | ||
instance.setTitle(instance.settings.counter || 1); | ||
}); | ||
}); | ||
|
||
#### Property Inspector | ||
|
||
In the property inspector we add the element with the input to the `<body>`. | ||
|
||
<div class="sdpi-item"> | ||
<div class="sdpi-item-label">Counter Value</div> | ||
<input class="sdpi-item-value" name="counter" /> | ||
</div> | ||
|
||
And in the `<script>` (maybe before closing `</body>`) we add our logic. | ||
|
||
<script> | ||
var plugin = new StreamDeckPropertyInspector(); | ||
plugin.enableSettingManager(); | ||
</script> | ||
|
||
#### Done | ||
|
||
Et voilà - we created a simple logic which sends the counter value to the plugin which shows it. | ||
And the plugin count it up on each keypress. | ||
The property inspector will also be updated on each `keyUp` because it's listening to the setting change event. | ||
|
||
# Build | ||
|
||
Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory. | ||
|
||
# Sample plugins | ||
|
||
* Coming May 2020: Toggl | ||
* Coming May 2020: INSTAR Camera Viewer | ||
|
||
# Contributing | ||
|
||
Feel free to open issues, pull requests or something else. | ||
|
||
When you need a plugin feel free to request it via the issues. |
Oops, something went wrong.