The Stream Deck Kit logo

Stream Deck Kit

Stream Deck Kit 是一个 Swift 库,用于通过 iPadOS 应用程序控制物理 Elgato Stream Deck 设备。

Code checks workflow badge

功能

适用于 iPad 的 Stream Deck SDK 专为在 iPadOS 上实现无缝即插即用体验而量身定制。 在这里,您的应用程序将在前台时控制 Stream Deck 按钮的外观和功能,对于 Stream Deck +,则管理其旋转旋钮和触摸屏交互。

所有 Stream Deck 设备

具有 LED 按键的设备

具有旋转编码器的设备

具有触摸显示屏的设备

前提条件

要与物理 Stream Deck 设备交互,请确保您具备以下条件:

但是,如果您只想使用 Stream Deck 模拟器验证您的实现,则无需其他先决条件。

iOS 版本 Swift 版本 XCode 版本
>= 16 >= 5.9 >= 15

安装

Package

您可以通过 Swift Package Manager 将该库添加到您的 XCode 项目中。 请参阅“向您的应用程序添加包依赖项”。

如果您想将其添加到您自己的库 Package.swift 中,请改用此代码

dependencies: [
    .package(url: "https://github.com/elgatosf/streamdeck-kit-ipad.git", upToNextMajor: "1.1.0")
]

Entitlements

为了连接到 Stream Deck 驱动程序,您需要将“与驱动程序通信”(com.apple.developer.driverkit.communicates-with-drivers) 功能添加到您的应用目标。 有关指导,请参阅“向您的应用程序添加功能”。

快速开始

使用 SwiftUI 在 Stream Deck 上渲染内容非常简单,就像设计典型的应用程序 UI 一样。

import StreamDeckKit

StreamDeckSession.setUp(newDeviceHandler: { $0.render(Color.blue) })

此代码片段演示了在设备上的所有按钮和显示屏上渲染蓝色。

注意

StreamDeckSession 作为单例运行,这意味着您应该在应用程序的生命周期中仅调用 setUp 一次。

渲染布局

要在特定区域渲染内容,请使用 StreamDeckLayout 系统。 StreamDeckLayout 提供预定义的布局视图,用于在 Stream Deck 上定位内容。

import StreamDeckKit

StreamDeckSession.setUp(newDeviceHandler: { $0.render(MyFirstStreamDeckLayout()) })
import SwiftUI 
import StreamDeckKit

struct MyFirstStreamDeckLayout: View {

    @Environment(\.streamDeckViewContext.device) var streamDeck

    var body: some View {
        StreamDeckLayout {
            // Define key area
            // Use StreamDeckKeyAreaLayout for rendering separate keys
            StreamDeckKeyAreaLayout { keyIndex in
                // Define content for each key.
                // StreamDeckKeyAreaLayout provides an index for each available key,
                // and StreamDeckKeyView provides a callback for the key action
                // Example:
                StreamDeckKeyView { pressed in
                    print("pressed \(pressed) at index \(keyIndex)")
                } content: {
                    Text("\(keyIndex)")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(.teal)
                }
            }.background(.purple)
        } windowArea: {
            // Define window area
            if streamDeck.info.product == .plus {
                // Use StreamDeckDialAreaLayout for Stream Deck +
                StreamDeckDialAreaLayout { dialIndex in
                    // Define content for each dial
                    // StreamDeckDialAreaLayout provides an index for each available dial,
                    // and StreamDeckDialView provides callbacks for the dial actions
                    // Example:
                    StreamDeckDialView { rotations in
                        print("dial rotated \(rotations)")
                    } press: { pressed in
                        print("pressed \(pressed)")
                    } touch: { location in
                        print("touched at \(location)")
                    } content: {
                        Text("\(dialIndex)")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color(white: Double(dialIndex) / 5 + 0.5))
                    }
                }
            } else if streamDeck.info.product == .neo {
                // Use StreamDeckNeoPanelLayout for Stream Deck Neo
                StreamDeckNeoPanelLayout { touched in
                    print("left key touched \(touched)")
                } rightTouch: { touched in
                    print("right key touched \(touched)")
                } panel: {
                    Text("Info Panel")
                }
                .background(.yellow)
            }
        }.background(.indigo)
    }

}

A screenshot of a Stream Deck +, showing increasing numbers on it's buttons

有关如何对状态更改做出反应的说明,请参阅 处理状态更改

使用模拟器

SDK 配备了一个功能齐全的模拟器,提供了一种方便的方式来验证您在各种设备上的实现。 但是,我们建议也在真实设备上进行测试。

注意

模拟器连接到您正在运行的 StreamDeckSession,模拟常规设备的行为。

执行此代码会将 Stream Deck 模拟器显示为具有模拟 Stream Deck 的叠加层

import StreamDeckSimulator

Button("Show Stream Deck Simulator") {
    StreamDeckSimulator.show()
}

A screenshot of the Stream Deck simulator window

有关更多说明,请参阅 模拟器

预览

您可以在 XCode 预览中使用模拟器。

#Preview {
    StreamDeckSimulator.PreviewView(streamDeck: .mini) { device in
        device.render(MyStreamDeckLayout())
    }
}

验证 Stream Deck Connect 安装

在您的应用程序中,请考虑解决用户设备上未安装 Stream Deck Connect(以及因此未安装其驱动程序)的情况。 在这种情况下,您可以提示用户安装该应用程序并启用驱动程序,然后再将您的应用程序与 Stream Deck 一起使用。

要确定 Stream Deck Connect 是否已安装在您的项目中,请将以下代码段与 canOpenURL 及其方案一起使用

UIApplication.shared.canOpenURL(URL(string: "elgato-device-driver://")!)

确保在 Info.plist 文件的 LSApplicationQueriesSchemes 部分中包含 "elgato-device-driver"

贡献

本项目遵循 贡献者盟约行为准则。 通过参与,您需要遵守此代码。 请向项目所有者报告不可接受的行为。

许可证

Stream Deck Kit 在 MIT 许可证下发布。 有关详细信息,请参阅 LICENSE