PillarSync - Technical Documentation

1. System Overview

PillarSync is a high-performance, centralized control system designed to synchronize complex visual experiences across multiple distributed machines. Specifically engineeried for immersive environments, it orchestrates content playback across Resolume Arena and TouchDesigner on multiple client stations, all controlled from a single, responsive web interface.

This system solves the challenge of managing multi-server visual installations by providing a unified "brain" that handles state management, network communication, and application window control.

---

2. System Architecture

The system follows a star topology where a central server broadcasts commands to distributed clients.

Core Components

1. Central Backend Server (Node.js)

   • Role: The system's controller. It maintains the current state of the installation (e.g., which scene is active).
   • Communication:
     • Input: Receives user commands from the Frontend via HTTP/REST.
     • Output: Broadcasts control signals to Client Machines via OSC (Open Sound Control) and UDP/TCP.
   • Features: Configurable client list, custom port management, and optimized message broadcasting.

2. Web Frontend (React + Vite)

   • Role: The control surface for the operator.
   • Tech Stack: React 19, TypeScript, TailwindCSS, Framer Motion.
   • Features:
     • Real-time status indicators.
     • Visual thumbnails for experiences.
     • Adaptive dark/light mode UI.
     • Responsive design for tablet or desktop control.

3. Client Machines (Python Helper Script)

   • Role: The bridge between the network and the visual software.
   • Functionality:
     • Listens for incoming OSC messages from the backend.
     • Window Management: Automatically brings the correct application window (Resolume or TouchDesigner) to the foreground based on the active content type.
     • Redundancy: Ensures visual software remains active and correctly layered.

---

3. Technology Stack

Backend

• Runtime: Node.js
• Protocols: OSC (via node-osc), WebSocket (via ws), HTTP (Express.js)
• Configuration: JSON-based topology mapping

Frontend

• Framework: React 19 (Vite)
• Language: TypeScript
• Styling: TailwindCSS
• Animation: Framer Motion
• Icons: React Icons

Client Automation

• Language: Python 3.12+
• Libraries: python-osc (communication), pywin32 (window control)
• Target Software: Resolume Arena 7, TouchDesigner

---

4. User Interface

The interface is designed for high-contrast visibility to be used during live events or permanent installations.

Key UI Features:

• Experience Groups: Logically separated into "Static" (Resolume) and "Immersive" (TouchDesigner) categories.
• Status Feedback: Visual confirmation when a scene is triggered.
• Thematic Styling: UI elements adapt to the aesthetic of the project.