属性检查器

插件的可配置设置

Stream Dock 集成了 HTML5 属性检查器允许您通过 Stream Dock 软件与您的插件进行通信，您甚至可以用 Vue 构建一个属性检查器，以下是一个 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>

与插件通信

要获得从属性检查器到插件的完全交互性，属性检查器必须能够向插件发送消息。

由于属性检查器只是一个常规网页，因此您可以包含常见的脚本技术，以便在属性检查器到 Stream Dock 再到插件之间进行通信，反之亦然

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

持久化数据

对于 Vue 模板在属性检查器部分是有直接监听 settings 的改变，并直接持久化改变后的 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 }
);

所以对于需要持久化的数据可以直接利用 Vue 的数据双向绑定直接绑定 settings 里面的数据就可以直接持久化了，不需要进行额外的操作，以下是一个示例

<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>

注册

实例化属性检查器后，Stream Dock 应用程序会向其发送一条消息，其中包含属性检查器和 Stream Dock 软件之间通信所需的各种信息

// 为了兼容Elgato我们使用和他们一样的函数名称这样您开发的插件可以兼容elgato的软件
function connectElgatoStreamDeckSocket(
    inPort, 
    inPropertyInspectorUUID, 
    inRegisterEvent, 
    inInfo, 
    inActionInfo
);

TIP

• inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo 这5个参数会被以数组的形式存储在window.argv中
• 每次用户选择要配置的按钮时，都会实例化属性检查器，

调试

默认情况下，您可以在 http://localhost:23519/ 进行调试

有关如何激活调试的更多信息，请按照开始中的调试部分进行操作