> ## Documentation Index
> Fetch the complete documentation index at: https://docs.liv.tv/llms.txt
> Use this file to discover all available pages before exploring further.

# Controls

> How to use LIV Camera Kit (LCK) advanced UI controls in Unreal Engine, including ULCKStepper for FOV/distance/smoothness, ULCKPad2D for directional input, ULCKDisplay for camera preview, and ULCKShowablesGroup for visibility management.

## ULCKStepper

Increment/decrement control for numerical values like FOV, distance, and smoothness.

### Properties

| Property       | Type   | Description                    |
| -------------- | ------ | ------------------------------ |
| `bUseDecimals` | `bool` | Show decimal values in display |

### Events

<ResponseField name="OnStepperValueChanged" type="FOnStepperValueChanged">
  Broadcast when value changes.

  ```cpp theme={null}
  DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnStepperValueChanged, int8, NewValue);
  ```

  | Parameter  | Type   | Description                             |
  | ---------- | ------ | --------------------------------------- |
  | `NewValue` | `int8` | Direction: -1 (decrease), +1 (increase) |
</ResponseField>

### Methods

| Method                     | Description                 |
| -------------------------- | --------------------------- |
| `Increment()`              | Increase value by one step  |
| `Decrement()`              | Decrease value by one step  |
| `UpdateCounterText(Value)` | Update displayed value text |

### Derived Classes

<CardGroup cols={3}>
  <Card title="ULCKFOVButton" icon="expand">
    Field of view adjustment
  </Card>

  <Card title="ULCKDistanceButton" icon="arrows-left-right">
    Camera distance control
  </Card>

  <Card title="ULCKSmoothnessButton" icon="wave-sine">
    Camera smoothness adjustment
  </Card>
</CardGroup>

### Example

```cpp theme={null}
ULCKStepper* FOVStepper = CreateDefaultSubobject<ULCKStepper>(TEXT("FOVStepper"));
FOVStepper->bUseDecimals = false;

FOVStepper->OnStepperValueChanged.AddDynamic(this, &AMyActor::OnFOVChanged);

void AMyActor::OnFOVChanged(int8 Direction)
{
    // Direction is -1 or +1
    CurrentFOV = FMath::Clamp(CurrentFOV + Direction * 5.0f, 60.0f, 120.0f);
    Camera->SetFieldOfView(CurrentFOV);
    FOVStepper->UpdateCounterText(CurrentFOV);
}
```

***

## ULCKPad2D

2D directional pad for camera or value control with 8-way input.

### Events

<ResponseField name="OnPad2DChanged" type="FOnPad2DChanged">
  Broadcast when direction changes.

  ```cpp theme={null}
  DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnPad2DChanged, FIntPoint, NewValue);
  ```

  | Parameter  | Type        | Description                                      |
  | ---------- | ----------- | ------------------------------------------------ |
  | `NewValue` | `FIntPoint` | Direction as (X, Y) where values are -1, 0, or 1 |
</ResponseField>

### Example

```cpp theme={null}
ULCKPad2D* CameraPad = CreateDefaultSubobject<ULCKPad2D>(TEXT("CameraPad"));

CameraPad->OnPad2DChanged.AddDynamic(this, &AMyActor::OnPadChanged);

void AMyActor::OnPadChanged(FIntPoint Direction)
{
    // Direction.X: -1 (left), 0 (center), +1 (right)
    // Direction.Y: -1 (down), 0 (center), +1 (up)

    FVector Movement = FVector(Direction.Y, Direction.X, 0) * MoveSpeed;
    Camera->AddLocalOffset(Movement);
}
```

***

## ULCKDisplay

Render target display surface with overlay effects for camera preview.

### Methods

| Method                      | Parameters                | Description                 |
| --------------------------- | ------------------------- | --------------------------- |
| `SetScreenOrientation`      | `ELCKScreenOrientation`   | Set landscape/portrait      |
| `SetScreenRenderTexture`    | `UTextureRenderTarget2D*` | Set source render target    |
| `SetOverlayFactor`          | `float` (0-1)             | Set overlay intensity       |
| `SetFlashFactor`            | `float` (0-1)             | Set flash intensity         |
| `SetFlashColor`             | `FColor`                  | Set flash color             |
| `SetShowNotificationFactor` | `float` (0-1)             | Set notification visibility |
| `SetUVOffset`               | `FVector2D`               | Set UV coordinates          |
| `SetTextLabelVisibility`    | `bool`                    | Show/hide text label        |
| `AddTextLine`               | `const FString&`          | Add text line to display    |
| `ClearTextLines`            | -                         | Clear all text lines        |

### Example

```cpp theme={null}
ULCKDisplay* Display = CreateDefaultSubobject<ULCKDisplay>(TEXT("Display"));

// Connect to scene capture
Display->SetScreenRenderTexture(SceneCapture->TextureTarget);

// Set orientation
Display->SetScreenOrientation(ELCKScreenOrientation::Landscape);

// Flash effect for photo capture
void AMyActor::OnPhotoTaken()
{
    Display->SetFlashColor(FColor::White);
    Display->SetFlashFactor(1.0f);

    // Fade out flash
    GetWorld()->GetTimerManager().SetTimer(FlashTimer, [this]() {
        float CurrentFlash = Display->GetFlashFactor();
        if (CurrentFlash > 0)
        {
            Display->SetFlashFactor(CurrentFlash - 0.1f);
        }
    }, 0.05f, true);
}
```

***

## ULCKShowablesGroup

Container for managing multiple showable components together. Implements `ILCKShowable`.

### Methods

| Method                   | Description                  |
| ------------------------ | ---------------------------- |
| `Show()`                 | Show all contained showables |
| `Hide()`                 | Hide all contained showables |
| `Add(NewShowable)`       | Add a showable to the group  |
| `SetUIActive(bIsActive)` | Batch enable/disable UI      |

### Example

```cpp theme={null}
// Create group for camera settings UI
ULCKShowablesGroup* CameraSettings = NewObject<ULCKShowablesGroup>(this);
CameraSettings->Add(FOVButton);
CameraSettings->Add(DistanceButton);
CameraSettings->Add(SmoothnessButton);

// Show all when entering settings mode
void AMyActor::EnterSettingsMode()
{
    CameraSettings->Show();
}

// Hide all when exiting settings mode
void AMyActor::ExitSettingsMode()
{
    CameraSettings->Hide();
}
```

<Tip>
  Use `ULCKShowablesGroup` to manage related UI elements together, reducing complexity in show/hide logic.
</Tip>

***

## UI System Integration

### ILCKUISystemable

Interface for UI system interaction coordination.

```cpp theme={null}
class ILCKUISystemable
{
public:
    virtual void SetCurrentOperatingButton(ILCKButtonable* InButtonable) = 0;
    virtual void PlayUIFeedback(bool InIsOnPressed, FVector NewTouchLocation) = 0;
    virtual bool IsCurrentOperatingButtonNull() = 0;
    virtual bool IsValidInteractor(UPrimitiveComponent* InInteractorComp) = 0;
    virtual bool CanBePressed(ILCKButtonable* InButtonable) = 0;
};
```

This interface allows UI components to coordinate with a central UI system for:

* Preventing multiple simultaneous button presses
* Playing haptic/audio feedback
* Validating interactor components (e.g., specific hand or pointer)

***

## Collision Setup

UI components use a specific collision profile for VR hand/pointer interaction:

```cpp theme={null}
// Set up collision for UI interaction
CollisionBox->SetCollisionProfileName(FLCKConstants::UICollisionProfileName);
// Default profile: "OverlapOnlyPawn"
```

<Warning>
  Ensure your project has the "OverlapOnlyPawn" collision profile configured, or update `FLCKConstants::UICollisionProfileName` to match your project's collision setup.
</Warning>