npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

streamdeck-sdk

v1.0.2

Published

Not official SDK for Elgato's Stream Deck with many features

Downloads

13

Readme

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.