# EveretPTZ Live Production UI

A professional web-based control interface for up to 3 EveretPTZ cameras, designed specifically for live production environments. Built with TypeScript, Vite, and the everetptz npm package.

## Features

### 🎥 Multi-Camera Support
- Support for up to 3 EveretPTZ cameras simultaneously
- Independent control for each camera
- Real-time connection status monitoring
- Easy IP address configuration

### 🕹️ Intuitive PTZ Controls
- **NippleJS Joystick Interface**: Smooth pan and tilt control with variable speed
- **Zoom Controls**: Dedicated in/out buttons with hold-to-zoom functionality
- **Focus Controls**: Manual near/far focus with auto-focus option
- **Real-time Movement**: Responsive controls for live production scenarios

### 🎨 Comprehensive Image Settings
- **Exposure Control**: Auto, manual, iris priority, shutter priority, brightness priority modes
- **White Balance**: Auto, indoor, outdoor, manual, and temperature modes
- **Image Enhancement**: Adjustable brightness, sharpness, contrast, and saturation
- **Live Updates**: Changes apply in real-time during production

### 💻 Professional UI
- **Dark Theme**: Optimized for studio lighting conditions
- **Responsive Design**: Works on various screen sizes
- **Status Indicators**: Visual feedback for camera connection states
- **Accessible Controls**: Large, clearly labeled controls for easy operation

## Supported Cameras

- Everet EVP212N (Black) - EAN: 8719327137901
- Everet EVP212N-W (White) - EAN: 8719327137956

## Quick Start

### Prerequisites
- Node.js 18+ and npm
- EveretPTZ cameras on your network
- Modern web browser

### Installation

1. **Clone or download this project**
2. **Install dependencies**:
   ```bash
   npm install
   ```

3. **Start the development server**:
   ```bash
   npm run dev
   ```

4. **Open your browser** to `http://localhost:3000`

### Camera Setup

1. **Configure Camera IPs**: Enter the IP address for each camera (e.g., 192.168.1.100)
2. **Click Connect**: The status light will turn green when connected
3. **Start Controlling**: Use the joystick and controls to operate your cameras

## Usage Guide

### Connection
- Enter the camera's IP address in the input field
- Click "Connect" to establish connection
- Status lights indicate: Red (disconnected), Orange (connecting), Green (connected)

### PTZ Control
- **Joystick**: Click and drag to pan and tilt the camera
- **Zoom**: Hold the +/- buttons to zoom in or out
- **Focus**: Use NEAR/FAR for manual focus, or AUTO for automatic focus

### Image Settings
- **Exposure**: Choose from various exposure modes and adjust brightness
- **White Balance**: Select the appropriate white balance for your lighting
- **Enhancement**: Fine-tune sharpness, contrast, and saturation in real-time

## Development

### Project Structure
```
src/
├── main.ts          # Main application logic
├── style.css        # Professional UI styling
├── nipplejs.d.ts    # TypeScript declarations
└── ...

index.html           # Main HTML structure
package.json         # Dependencies and scripts
vite.config.ts       # Vite configuration
```

### Key Components
- **PTZController**: Main application class managing all cameras
- **Camera Management**: Connection handling and error management
- **Joystick Integration**: NippleJS-based PTZ control
- **Settings Management**: Real-time image parameter control

### Build for Production
```bash
npm run build
```

### Preview Production Build
```bash
npm run preview
```

## API Integration

This application uses the [everetptz](https://www.npmjs.com/package/everetptz) npm package for camera communication. The package provides:

- **Zero Dependencies**: Pure TypeScript implementation
- **Complete PTZ Control**: Pan, tilt, zoom, and focus operations
- **Image Settings**: Exposure, white balance, iris, shutter control
- **Advanced Features**: WDR, noise reduction, gamma correction
- **Type Safety**: Full TypeScript support

## Troubleshooting

### Connection Issues
- Verify camera IP addresses are correct
- Ensure cameras are on the same network
- Check camera credentials (default: admin/admin)
- Confirm cameras are powered on and responsive

### Performance
- Use Chrome or Firefox for best performance
- Ensure stable network connection to cameras
- Multiple simultaneous connections may impact responsiveness

## Contributing

This is a production-ready interface. For customizations:

1. Modify camera settings in `src/main.ts`
2. Adjust styling in `src/style.css`
3. Update UI layout in `index.html`

## License

ISC - See package.json for details.

## Camera Documentation

For detailed camera specifications and setup, visit:
- [EveretPTZ Package Documentation](https://www.npmjs.com/package/everetptz)
- [EVP212N Datasheet](https://www.everetimaging.com/support/kb/evp212-ndi/datasheet-evp212n/)