klubhaus/sideline
2
0
Fork 0
forked from genewildish/Mainline
Code Issues 5 Pull Requests Projects 1 Releases Wiki Activity

Add web-based pipeline editor UI #33

New Issue
Closed
opened 2026-03-18 23:11:23 +00:00 by david · 2 comments
david commented 2026-03-18 23:11:23 +00:00
Owner
Copy Link

Summary

Create a web-based pipeline editor UI that allows remote configuration of the Mainline pipeline (stages, parameters, presets) via WebSocket connection.

User Story

As a user, I want to control my Mainline pipeline from a web browser so that I can:

  • Toggle effects on/off without leaving the terminal view
  • Adjust effect parameters with sliders
  • Switch between presets instantly
  • See a visual representation of the pipeline DAG
  • Control the pipeline from a tablet or secondary device

Motivation

Currently, Mainline has a terminal-based UIPanel (activated with border="ui" mode) that provides these controls, but it:

  • Takes up screen real estate in the terminal
  • Requires keyboard shortcuts rather than mouse/touch
  • Is not accessible from remote devices

A web-based editor would:

  • Enable remote control from any device on the network
  • Provide a richer UI with sliders, buttons, and visual feedback
  • Separate the control interface from the display (can be on different screens)
  • Allow future expansion with save/load preset functionality

Technical Approach

  1. Extend WebSocket backend (engine/display/backends/websocket.py) to:

    • Accept bidirectional commands from clients (not just frame output)
    • Provide state snapshots (current stages, params, preset)
    • Handle commands: toggle_stage, select_stage, adjust_param, change_preset, cycle_preset

  2. Connect WebSocket backend to UIPanel:

    • Set WebSocket controller reference to UIPanel
    • Forward WebSocket commands to UIPanel.execute_command()
    • Broadcast state updates after any UI state change

  3. Create web editor client (client/editor.html):

    • Connect to WebSocket on port 8765
    • Request initial state snapshot
    • Render controls: preset buttons, stage list with toggles, param sliders
    • Send commands on user interaction
    • Receive state broadcasts to update UI

Required Updates

  • websocket.py: Add command callback, controller reference, state snapshot, command handling
  • app.py: Connect UIPanel to WebSocket for remote control
  • Create editor.html with full UI
  • Test end-to-end pipeline control from browser
  • (Optional) Add DAG visualization of pipeline structure
  • (Optional) Preset save/load from web UI

Acceptance Criteria

  • Web editor loads at http://localhost:8766/editor.html
  • Shows current stage states, parameters, and preset
  • Toggling stage checkbox updates pipeline in real-time
  • Adjusting sliders updates effect parameters in real-time
  • Preset buttons switch to corresponding preset
  • Changes are reflected across all connected clients

Related Issues

Part of broader streaming/remote display work (see #26).

## Summary Create a web-based pipeline editor UI that allows remote configuration of the Mainline pipeline (stages, parameters, presets) via WebSocket connection. ## User Story As a user, I want to control my Mainline pipeline from a web browser so that I can: - Toggle effects on/off without leaving the terminal view - Adjust effect parameters with sliders - Switch between presets instantly - See a visual representation of the pipeline DAG - Control the pipeline from a tablet or secondary device ## Motivation Currently, Mainline has a terminal-based UIPanel (activated with `border="ui"` mode) that provides these controls, but it: - Takes up screen real estate in the terminal - Requires keyboard shortcuts rather than mouse/touch - Is not accessible from remote devices A web-based editor would: - Enable remote control from any device on the network - Provide a richer UI with sliders, buttons, and visual feedback - Separate the control interface from the display (can be on different screens) - Allow future expansion with save/load preset functionality ## Technical Approach 1. Extend WebSocket backend (`engine/display/backends/websocket.py`) to: - Accept bidirectional commands from clients (not just frame output) - Provide state snapshots (current stages, params, preset) - Handle commands: toggle_stage, select_stage, adjust_param, change_preset, cycle_preset 2. Connect WebSocket backend to UIPanel: - Set WebSocket controller reference to UIPanel - Forward WebSocket commands to UIPanel.execute_command() - Broadcast state updates after any UI state change 3. Create web editor client (`client/editor.html`): - Connect to WebSocket on port 8765 - Request initial state snapshot - Render controls: preset buttons, stage list with toggles, param sliders - Send commands on user interaction - Receive state broadcasts to update UI ## Required Updates - [x] websocket.py: Add command callback, controller reference, state snapshot, command handling - [x] app.py: Connect UIPanel to WebSocket for remote control - [x] Create editor.html with full UI - [ ] Test end-to-end pipeline control from browser - [ ] (Optional) Add DAG visualization of pipeline structure - [ ] (Optional) Preset save/load from web UI ## Acceptance Criteria - Web editor loads at http://localhost:8766/editor.html - Shows current stage states, parameters, and preset - Toggling stage checkbox updates pipeline in real-time - Adjusting sliders updates effect parameters in real-time - Preset buttons switch to corresponding preset - Changes are reflected across all connected clients ## Related Issues Part of broader streaming/remote display work (see #26).
david commented 2026-03-19 03:41:11 +00:00
Author
Owner
Copy Link

Progress Update (2026-03-18)

Completed (✅)

  • WebSocket backend command handling
  • State snapshots
  • WebSocket connected to UIPanel for remote control

Priority Clarification (from planning)

After reviewing, the following priorities have been established:

MUST HAVE:

  • ✅ Real-time preview - This MUST work (enables by Pipeline Mutation API #35)

NICE TO HAVE:

  • ✅ Stage order drag-and-drop
  • ✅ Parameter editing

LOW PRIORITY:

  • ✅ Preset management (save/load)

Remaining Work

  1. Real-time preview implementation:

    • Depends on Pipeline Mutation API (#35) for hot-swapping stages
    • Need to implement binary streaming protocol (#26) for efficient updates

  2. Frontend enhancements:

    • Drag-and-drop stage reordering
    • Parameter slider controls

  3. Testing:

    • End-to-end testing from browser

Dependencies

This issue depends on:

  • #35 (Pipeline Mutation API) - for live stage manipulation
  • #26 (Streaming display backend) - for efficient real-time updates

Should we proceed with implementing these dependencies first?

## Progress Update (2026-03-18) ### Completed (✅) - WebSocket backend command handling - State snapshots - WebSocket connected to UIPanel for remote control ### Priority Clarification (from planning) After reviewing, the following priorities have been established: **MUST HAVE:** - ✅ **Real-time preview** - This MUST work (enables by Pipeline Mutation API #35) **NICE TO HAVE:** - ✅ Stage order drag-and-drop - ✅ Parameter editing **LOW PRIORITY:** - ✅ Preset management (save/load) ### Remaining Work 1. **Real-time preview implementation:** - Depends on Pipeline Mutation API (#35) for hot-swapping stages - Need to implement binary streaming protocol (#26) for efficient updates 2. **Frontend enhancements:** - Drag-and-drop stage reordering - Parameter slider controls 3. **Testing:** - End-to-end testing from browser ### Dependencies This issue depends on: - #35 (Pipeline Mutation API) - for live stage manipulation - #26 (Streaming display backend) - for efficient real-time updates Should we proceed with implementing these dependencies first?
david commented 2026-03-19 05:34:47 +00:00
Author
Owner
Copy Link

Completed in Commit c57617b

  • ✅ client/editor.html - Full web-based pipeline editor UI
  • ✅ engine/display/backends/websocket.py - Command handling, state snapshots, bidirectional communication
  • ✅ Connected WebSocket to UIPanel for remote control

The web editor is now functional at http://localhost:8766/editor.html

## Completed in Commit c57617b - ✅ `client/editor.html` - Full web-based pipeline editor UI - ✅ `engine/display/backends/websocket.py` - Command handling, state snapshots, bidirectional communication - ✅ Connected WebSocket to UIPanel for remote control The web editor is now functional at http://localhost:8766/editor.html
david closed this issue 2026-03-19 20:13:18 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
epic:#2
epic:#20
epic:#3
epic:#4
epic:#5
epic:#6
epic:Data Source
epic:Display Backend
epic:Display Tools
epic:Effects
epic:Pipeline Architecture
epic:Sensors
status:feature-complete
status:in-progress
status:released
status:tested
type:epic
type:epic
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
david genewildish
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: klubhaus/sideline#33
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?