A modern web-based user interface framework for Sprocket devices, providing real-time control, visualization, and management capabilities through a responsive web interface.

Overview

The Sprocket UI Framework is a comprehensive web application that enables users to interact with Sprocket devices through an intuitive browser-based interface. It features real-time communication, component-based architecture, and modern web technologies.

Features

Real-Time Communication: WebSocket-based live updates and control
Component-Based Architecture: Modular, reusable UI components
Responsive Design: Works on desktop and mobile devices
Live Data Binding: Real-time synchronization with device state
Plugin Integration: Support for various Sprocket plugins
Modern Web Stack: Built with ES6+, Webpack, and Less

Architecture

Core Components

App: Main application controller
Mediator: Event-driven communication system
Component System: Modular UI component framework
Data Store: State management and persistence
WebSocket Client: Real-time device communication

UI Components

Form Controls: Input fields, sliders, switches, and selectors
Color Picker: Advanced color selection with gradients
Chat Interface: Real-time messaging and logging
Parameter Controls: Dynamic parameter adjustment
Preset Management: Save and load device configurations

Technology Stack

Frontend

JavaScript: ES6+ with Babel transpilation
CSS: Less preprocessor for styling
Build Tools: Webpack for bundling and optimization
Dependencies: jQuery, Mustache, WebSocket

Development

Build System: Webpack with hot reloading
CSS Processing: Less compilation
Development Server: Live-server with auto-reload
Docker Support: Containerized development and deployment

Getting Started

Prerequisites

Node.js (v12 or higher)
Yarn package manager
Modern web browser

Installation

# Install dependencies
yarn install

# Setup development environment
yarn setup

# Start development server
yarn dev

Build Commands

# Build frontend assets
yarn build:frontend

# Build specific components
yarn build:js      # JavaScript bundle
yarn build:css     # CSS compilation
yarn build:html    # HTML templates

Development Workflow

File Structure

src/
├── app/           # Application logic
│   ├── core/      # Core framework
│   ├── components/ # UI components
│   └── main.js    # Entry point
├── pages/         # HTML templates
├── styles/        # Less stylesheets
└── data/          # Generated assets

Component Development

Components are modular and follow a consistent pattern:

HTML Template: Structure and markup
JavaScript Logic: Behavior and event handling
CSS Styling: Component-specific styles
Data Binding: Integration with data store

Real-Time Features

WebSocket Communication: Live device updates
Event System: Component-to-component messaging
State Synchronization: Automatic UI updates
Live Controls: Real-time device control

Configuration

WebSocket Endpoint

Configure the WebSocket connection endpoint:

let endpoint = '/ws';  // Default WebSocket path

Component Registration

let app = new App($('body'))
    .components(components)
    .websocket(wsConnection);

Deployment

Docker

# Build container
yarn docker:build

# Run locally
yarn docker:run

# Release to registry
yarn docker:release

Production Build

# Build optimized assets
yarn build:frontend

# Deploy to web server
# Copy data/ directory to web root

API Integration

WebSocket Events

Device Status: Real-time device state updates
Control Commands: Send commands to devices
Configuration: Update device settings
Monitoring: Live sensor data and metrics

REST Endpoints

Device Control: POST commands to devices
Status Information: GET device status
Configuration: GET/SET device settings
System Management: Restart, update, etc.

Customization

Themes

Color Schemes: Customizable color palettes
Layout Options: Flexible component arrangement
Responsive Breakpoints: Mobile-first design
Component Styling: Individual component customization

Plugins

Component Extensions: Add new UI components
Data Sources: Integrate with external systems
Communication Protocols: Support for various protocols
Storage Backends: Different data persistence options

Browser Support

Modern Browsers: Chrome, Firefox, Safari, Edge
Mobile Support: iOS Safari, Chrome Mobile
ES6 Features: Arrow functions, classes, modules
WebSocket: Real-time communication support

Performance

Code Splitting: Lazy loading of components
Asset Optimization: Minified and compressed assets
Caching: Browser caching strategies
Lazy Loading: On-demand component loading

Troubleshooting

Common Issues

WebSocket Connection: Check device connectivity
Build Errors: Verify Node.js and Yarn versions
Component Loading: Check component registration
Styling Issues: Verify Less compilation

Debug Mode

Enable debug output for troubleshooting:

// Enable debug logging
app.debug = true;

Contributing

Fork the repository
Create feature branch
Implement changes
Add tests if applicable
Submit pull request

License

See LICENSE file for details.

Support

Documentation: Check the docs/ directory
Issues: Report bugs via GitHub issues
Community: Join the Sprocket community
Examples: See examples/ directory for usage patterns