Skip to content

Commit

Permalink
Initialized first release
Browse files Browse the repository at this point in the history
  • Loading branch information
patrickbussmann committed May 21, 2020
0 parents commit 8a024b3
Show file tree
Hide file tree
Showing 7 changed files with 1,249 additions and 0 deletions.
53 changes: 53 additions & 0 deletions .github/workflows/release.yml
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 }}
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/.idea
/dist
/node_modules/
138 changes: 138 additions & 0 deletions README.md
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.
Loading

0 comments on commit 8a024b3

Please sign in to comment.