Property Inspector

Configurable settings for plugins

Stream Dock integrates an HTML5 Property Inspector, allowing you to communicate with your plugin through the Stream Dock software. You can even build a Property Inspector using Vue. Here is an example using Vue:

<script setup lang="ts">
  import { usePropertyStore, useWatchEvent, TabView } from '@/hooks/property';
  import { useI18nStore } from '@/hooks/i18n';

  const i18n = useI18nStore();
  const property = usePropertyStore();
  useWatchEvent({
    didReceiveSettings(data) {},
    sendToPropertyInspector(data) {}
  });
</script>

<template>
</template>

<style lang="scss" scoped></style>

Communication with Plugins

To achieve full interactivity between the Property Inspector and the plugin, the Property Inspector must be able to send messages to the plugin.

Since the Property Inspector is just a regular webpage, you can use common scripting techniques to facilitate communication between the Property Inspector and Stream Dock, and then to the plugin, and vice versa.

property.sendToPlugin({ test: 'test' })

Persistent Data

For Vue templates, the Property Inspector directly listens to changes in the settings and persists the updated settings.

const preventWatch = ref(false);
const settings = ref(window.argv[4].payload.settings);
watch(
    settings,
    () => {
      if (preventWatch.value) return;
      server.send(
        JSON.stringify({
          event: 'setSettings',
          context: window.argv[1],
          payload: settings.value
        })
      );
    },
    { deep: true }
);

So for data that needs to be persisted, you can directly use Vue's two-way data binding to bind data in the settings, and it will be persisted automatically without any additional operations. Below is an example:

<script setup lang="ts">
  import { usePropertyStore, useWatchEvent, TabView } from '@/hooks/property';
  import { useI18nStore } from '@/hooks/i18n';

  const i18n = useI18nStore();
  const property = usePropertyStore();
  useWatchEvent({
    didReceiveSettings(data) {},
    sendToPropertyInspector(data) {}
  });
</script>

<template>
  <TabView :title="i18n.title">
    <input type="text" v-model="property.settings.text">
  </TabView>
</template>

<style lang="scss" scoped></style>

Registration

After instantiating the Property Inspector, the Stream Dock application sends a message containing various information required for communication between the Property Inspector and the Stream Dock software.

// To ensure compatibility with Elgato, we use the same function names as theirs, so your developed plugin can be compatible with Elgato software.
function connectElgatoStreamDeckSocket(
    inPort, 
    inPropertyInspectorUUID, 
    inRegisterEvent, 
    inInfo, 
    inActionInfo
);

TIP

• The parameters inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, and inActionInfo will be stored in an array in window.argv.
• Each time a user selects a button to configure, the Property Inspector will be instantiated.

Debugging

By default, you can debug at http://localhost:23519/.

For more information on how to activate debugging, follow the instructions in the Debugging section of the Getting Started guide.