Skip to content

Commit

Permalink
Remove all mentions of StreamDeckView in docs and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
r-dent committed Sep 20, 2024
1 parent 8ba1335 commit 644b186
Show file tree
Hide file tree
Showing 10 changed files with 44 additions and 56 deletions.
7 changes: 3 additions & 4 deletions Documentation/GettingStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,14 @@ This code snippet demonstrates rendering a blue color across all buttons and dis



To render content on specific areas, utilize the [Stream Deck Layout](Layout/README.md) system. `StreamDeckLayout` with the `@StreamDeckView` Macro provides predefined layout views to position content on a Stream Deck.
To render content on specific areas, utilize the [Stream Deck Layout](Layout/README.md) system. `StreamDeckLayout` provides predefined layout views to position content on a Stream Deck.

```swift
import SwiftUI
import StreamDeckKit

@StreamDeckView
struct MyFirstStreamDeckLayout {
var streamDeckBody: some View {
struct MyFirstStreamDeckLayout: View {
var body: some View {
StreamDeckLayout {
// Define key area
// Use StreamDeckKeyAreaLayout for rendering separate keys
Expand Down
30 changes: 15 additions & 15 deletions Documentation/Layout/Animated.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Basic animations

As described in [Handling state changes](./Stateful.md), the `StreamDeckLayout` combined with the `@StreamDeckView` Macro is used to automatically update the image rendered on your Stream Deck Device on view state changes.
As described in [Handling state changes](./Stateful.md), the `StreamDeckLayout` is used to automatically update the image rendered on your Stream Deck Device on view state changes.

Due to the underlying transformation of an SwiftUI view to an image that can be rendered on your Stream Deck device, SwiftUI's animations do not work as you might expect. However, the following example shows how you can create animations regardless, leveraging incremental state changes over time.

Expand All @@ -19,10 +19,9 @@ For Stream Deck +, this layout will be rendered and react to interactions as fol
import StreamDeckKit
import SwiftUI

@StreamDeckView
struct AnimatedStreamDeckLayout {

var streamDeckBody: some View {
var body: some View {
StreamDeckLayout {
StreamDeckKeyAreaLayout { _ in
// To react to state changes within each StreamDeckKeyView, extract the view, just as you normally would in SwiftUI
Expand All @@ -42,19 +41,20 @@ struct AnimatedStreamDeckLayout {
}
}

@StreamDeckView
struct MyKeyView {
struct MyKeyView: View {

@State private var isPressed: Bool?
@State private var scale: CGFloat = 1.0
@State private var rotationDegree: Double = .zero

@Environment(\.streamDeckViewContext.index) var viewIndex

var streamDeckBody: some View {
var body: some View {
StreamDeckKeyView { pressed in
self.isPressed = pressed
} content: {
VStack {
Text("\(viewIndex)") // `viewIndex` is provided by the `@StreamDeckView` macro
Text("\(viewIndex)")
Text(isPressed == true ? "Key down" : "Key up")
}
.scaleEffect(scale) // Update the scale depending on the state
Expand Down Expand Up @@ -103,15 +103,16 @@ struct AnimatedStreamDeckLayout {
}
}

@StreamDeckView
struct MyDialView {
struct MyDialView: View {

@State private var isPressed: Bool?

@State private var position: CGPoint = .zero
@State private var targetPosition: CGPoint?

@Environment(\.streamDeckViewContext.size) var viewSize

var streamDeckBody: some View {
var body: some View {
StreamDeckDialView { rotations in
self.position.x += CGFloat(rotations)
} press: { pressed in
Expand Down Expand Up @@ -151,15 +152,14 @@ struct AnimatedStreamDeckLayout {
if isPressed == nil || isPressed == true {
self.position = CGPoint(
x: viewSize.width / 2,
y: viewSize.height / 2 // `viewSize` is provided by the `@StreamDeckView` macro
y: viewSize.height / 2
)
}
}
}
}

@StreamDeckView
struct MyNeoPanelView {

struct MyNeoPanelView: View {

@State private var offset: Double = 0
@State private var targetOffset: Double = 0
Expand All @@ -168,7 +168,7 @@ struct AnimatedStreamDeckLayout {

let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

var streamDeckBody: some View {
var body: some View {
// Use StreamDeckNeoPanelLayout for Stream Deck Neo
StreamDeckNeoPanelLayout { touched in
targetOffset -= touched ? 50 : 0
Expand Down
7 changes: 3 additions & 4 deletions Documentation/Layout/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

The `StreamDeckLayout` view is a fundamental component for building layouts for Stream Deck devices using SwiftUI. It provides a way to define the key area view with its keys and window view with its dials for a Stream Deck layout. This layout can be used to draw a customized layout onto a Stream Deck device and to recognize Stream Deck interactions in the SwiftUI way.

A `StreamDeckLayout` combined with the `@StreamDeckView` Macro does the heavy lifting for you by automatically recognizing view updates, and triggering an update of the rendered image on your Stream Deck device.
A `StreamDeckLayout` does the heavy lifting for you by automatically recognizing view updates, and triggering an update of the rendered image on your Stream Deck device.

The general structure of `StreamDeckLayout` is as follows:

Expand Down Expand Up @@ -39,10 +39,9 @@ Here's an example of how to create a basic static `StreamDeckLayout`. For exampl
import SwiftUI
import StreamDeckKit

@StreamDeckView
struct StatelessStreamDeckLayout {
struct StatelessStreamDeckLayout: View {

var streamDeckBody: some View {
var body: some View {
StreamDeckLayout {
// Define key area
// Use StreamDeckKeyAreaLayout for rendering separate keys
Expand Down
32 changes: 15 additions & 17 deletions Documentation/Layout/Stateful.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# Handling state changes

As described in [The layout system](./README.md), the `StreamDeckLayout` combined with the `@StreamDeckView` Macro does the heavy lifting for you by automatically recognizing view updates, and triggering an update of the rendered image on your Stream Deck device.

To update your `StreamDeckLayout` on events like key presses or dial rotations, the view that should react to state changes needs to be extracted in its own view, just as you would normally do with SwiftUI. If that view is annotated with the `@StreamDeckView` Macro, context-dependent variables like the `viewIndex` and `viewSize` are available in that view's scope.
As described in [The layout system](./README.md), the `StreamDeckLayout` does the heavy lifting for you by automatically recognizing view updates, and triggering an update of the rendered image on your Stream Deck device.

## Example

Expand All @@ -19,10 +17,9 @@ For Stream Deck +, this layout will be rendered and react to interactions as fol
import StreamDeckKit
import SwiftUI

@StreamDeckView
struct StatefulStreamDeckLayout {

var streamDeckBody: some View {
var body: some View {
StreamDeckLayout {
StreamDeckKeyAreaLayout { _ in
// To react to state changes within each StreamDeckKeyView, extract the view, just as you normally would in SwiftUI
Expand All @@ -42,17 +39,18 @@ struct StatefulStreamDeckLayout {
}
}

@StreamDeckView
struct MyKeyView {
struct MyKeyView: View {

@State private var isPressed: Bool = false

@Environment(\.streamDeckViewContext.index) var viewIndex

var streamDeckBody: some View {
var body: some View {
StreamDeckKeyView { pressed in
self.isPressed = pressed
} content: {
VStack {
Text("\(viewIndex)") // `viewIndex` is provided by the `@StreamDeckView` macro
Text("\(viewIndex)")
Text(isPressed ? "Key down" : "Key up")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
Expand All @@ -61,13 +59,14 @@ struct StatefulStreamDeckLayout {
}
}

@StreamDeckView
struct MyDialView {
struct MyDialView: View {

@State private var offset: CGSize = .zero
@State private var scale: CGFloat = 1

@Environment(\.streamDeckViewContext.size) var viewSize

var streamDeckBody: some View {
var body: some View {
StreamDeckDialView { rotations in
self.scale = min(max(scale + CGFloat(rotations) / 10, 0.5), 5)
} press: { pressed in
Expand All @@ -78,7 +77,7 @@ struct StatefulStreamDeckLayout {
} touch: { location in
self.offset = CGSize(
width: location.x - viewSize.width / 2,
height: location.y - viewSize.height / 2 // `viewSize` is provided by the `@StreamDeckView` macro
height: location.y - viewSize.height / 2
)
} content: {
Text("\(viewIndex)")
Expand All @@ -89,16 +88,15 @@ struct StatefulStreamDeckLayout {
}
}
}

@StreamDeckView
struct MyNeoPanelView {

struct MyNeoPanelView: View {

@State private var offset: Double = 0
@State private var date: Date = .now

let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

var streamDeckBody: some View {
var body: some View {
// Use StreamDeckNeoPanelLayout for Stream Deck Neo
StreamDeckNeoPanelLayout { touched in
offset -= touched ? 5 : 0
Expand Down
4 changes: 2 additions & 2 deletions Example/Example App/Examples/2_StatefulStreamDeckLayout.swift
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ struct StatefulStreamDeckLayout: View {
self.isPressed = pressed
} content: {
VStack {
Text("\(viewIndex)") // `viewIndex` is provided by the `@StreamDeckView` macro
Text("\(viewIndex)")
Text(isPressed ? "Key down" : "Key up")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
Expand Down Expand Up @@ -70,7 +70,7 @@ struct StatefulStreamDeckLayout: View {
} touch: { location in
self.offset = CGSize(
width: location.x - viewSize.width / 2,
height: location.y - viewSize.height / 2 // `viewSize` is provided by the `@StreamDeckView` macro
height: location.y - viewSize.height / 2
)
} content: {
Text("\(viewIndex)")
Expand Down
4 changes: 2 additions & 2 deletions Example/Example App/Examples/3_AnimatedStreamDeckLayout.swift
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ struct AnimatedStreamDeckLayout: View {
self.isPressed = pressed
} content: {
VStack {
Text("\(viewIndex)") // `viewIndex` is provided by the `@StreamDeckView` macro
Text("\(viewIndex)")
Text(isPressed == true ? "Key down" : "Key up")
}
.scaleEffect(scale) // Updating the scale depending on the state
Expand Down Expand Up @@ -142,7 +142,7 @@ struct AnimatedStreamDeckLayout: View {
if isPressed == nil || isPressed == true {
self.position = CGPoint(
x: viewSize.width / 2,
y: viewSize.height / 2 // `viewSize` is provided by the `@StreamDeckView` macro
y: viewSize.height / 2
)
}
}
Expand Down
7 changes: 3 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ This code snippet demonstrates rendering a blue color across all buttons and dis
### Rendering Layouts

To render content on specific areas, utilize the `StreamDeckLayout` system with the `@StreamDeckView` Macro. `StreamDeckLayout` provides predefined layout views to position content on a Stream Deck.
To render content on specific areas, utilize the `StreamDeckLayout` system. `StreamDeckLayout` provides predefined layout views to position content on a Stream Deck.

```swift
import StreamDeckKit
Expand All @@ -86,10 +86,9 @@ StreamDeckSession.setUp(newDeviceHandler: { $0.render(MyFirstStreamDeckLayout())
import SwiftUI
import StreamDeckKit

@StreamDeckView
struct MyFirstStreamDeckLayout {
struct MyFirstStreamDeckLayout: View {

var streamDeckBody: some View {
var body: some View {
StreamDeckLayout {
// Define key area
// Use StreamDeckKeyAreaLayout for rendering separate keys
Expand Down
2 changes: 0 additions & 2 deletions Sources/StreamDeckKit/Layout/StreamDeckViewContext.swift
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@
import Foundation

/// Provides information about the current context (screen, key-area, key, window, dial) in SwiftUI environments.
///
/// This is used internally by the ``StreamDeckView`` macro and the ``StreamDeckLayout`` system.
public struct StreamDeckViewContext {

/// The Stream Deck device object.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,6 @@
import SwiftUI
import StreamDeckKit

// The explicit implementation of the `StreamDeckView` protocol is a workaround. Normally we would use the `@StreamDeckView`
// macro here. But due to a bug in XCode 16 and 16.1 betas, the `if #available` check that the macro implemented,
// always threw an error.
// If you read this and XCode 16 was finally released, please check if just using the macro is working again.

struct SimulatorDialTouchView: View {

@Environment(\.streamDeckViewContext) private var context
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import SwiftUI
public extension StreamDeckSimulator {
/// A wrapper view to use ``StreamDeckSimulator`` in SwiftUI previews.
///
/// This code will show a Stream Deck Mini simulator that renders a view conforming to `StreamDeckView`.
/// This code will show a Stream Deck Mini simulator that renders some layout view.
/// ```swift
/// #Preview {
/// StreamDeckSimulator.PreviewView(streamDeck: .mini) { device in
Expand Down

0 comments on commit 644b186

Please sign in to comment.