# CFD Penney - Collaborative Annotation Tool

## Overview
CFD Penney is a free, open-source collaborative annotation tool that enables real-time drawing, screen sharing, and image annotation. Available as both a web application and desktop application (Windows, macOS, Linux), it's designed for teams, educators, developers, and anyone who needs to collaborate visually.

## URLs
- **Production Website**: https://codefrydev.in/CFDPenney/
- **Web Application**: https://codefrydev.in/CFDPenney/canvas.html
- **Infinite Canvas (Penney)**: https://codefrydev.in/CFDPenney/penney.html
- **Privacy Policy**: https://codefrydev.in/CFDPenney/privacy.html
- **Terms & Conditions**: https://codefrydev.in/CFDPenney/terms.html
- **GitHub Repository**: https://github.com/codefrydev/CFDPenney/
- **Desktop Downloads**: https://github.com/codefrydev/CFDPenney/

## Description
CFD Penney is a comprehensive annotation platform that allows multiple users to collaborate in real-time using peer-to-peer WebRTC connections. Users can draw on whiteboards, annotate shared screens (desktop app), use infinite canvas mode, engage in video calls, chat with team members, or upload and annotate images. The tool supports various drawing modes, advanced selection tools, shape drawing with fill options, stickers, video/camera sharing, real-time messaging, and provides a seamless collaboration experience with no account required.

## Key Features

### Three Distinct Modes
1. **Screen Annotation Mode** (Desktop App): Turn your actual desktop into a canvas. Draw over any app (CAD, IDEs, browsers). Perfect for code reviews and tutorials. Remote peers see your screen + drawings.
2. **Virtual Whiteboard Mode** (Web & Desktop): A clean slate for fresh ideas. Standard canvas for brainstorming. Works locally even if server is offline. Works instantly in any web browser.
3. **Infinite Canvas Mode (Penney)** (Web): Unlimited canvas space with pan and zoom capabilities. Perfect for large projects, extensive brainstorming, and creative work that requires unlimited space. All drawing tools available with collaborative editing support.

### Drawing Modes
1. **Board Mode**: Draw on a blank whiteboard canvas with infinite possibilities
2. **Screen Mode**: Share your screen and annotate over it in real-time (desktop app feature)
3. **Image Mode**: Upload images and annotate them collaboratively

### Drawing Tools
- **Pen**: Freehand drawing tool with customizable stroke width
- **Eraser**: Remove parts of drawings precisely
- **Text**: Add text annotations with custom positioning
- **Shapes**: Line, Arrow, Rectangle, Circle, Ellipse, Triangle, Diamond, Star, Pentagon, Hexagon, Octagon
- **Fill Support**: Fill shapes with custom colors
- **Stickers**: Add fun stickers to your canvas
- **Select Tool**: Select and manipulate drawn elements, with grouping support

### Collaboration Features
- **Real-Time Collaboration** via WebRTC peer-to-peer connections
- **Room-Based System**: 6-character room codes for easy sharing
- **Host & Join**: Host a session or join existing ones instantly
- **Connection Status**: Visual indicators for connection state
- **Session Discovery**: Find and join active sessions
- **Peer-to-Peer**: Direct connections using WebRTC (no data stored on servers)
- **Screen Sharing**: Desktop app allows screen annotation overlay
- **Video Calls & Camera Sharing**: Face-to-face video calls with camera and microphone support. Peer-to-peer video streams that are not recorded or stored
- **Chat Messaging**: Real-time text messaging with file attachments (images, documents, PDFs up to 5MB), emoji reactions, and message history during active sessions
- **No Account Required**: Jump in and collaborate immediately
- **Cross-Platform**: Web users can join desktop host sessions and vice versa

### Customization Options
- Color picker with preset colors and custom color selection
- Adjustable stroke width (2-30 pixels)
- Dark and light theme support
- Responsive design for various screen sizes

### Additional Features
- Undo/redo functionality for drawing history
- Snapshot capture to save current canvas state
- Clear all functionality to reset the canvas
- Touch-friendly interface for mobile devices
- Device selection for camera, microphone, and speakers
- Camera/microphone mute controls
- Chat message notifications and unread badges
- Participants panel showing all connected users with video status

## Use Cases

1. **Team Collaboration**: Remote brainstorming, design reviews, agile ceremonies, and team meetings with video calls and chat
2. **Code Reviews**: Annotate code directly on screen, perfect for pair programming and technical discussions with real-time video and messaging
3. **Education**: Online teaching, presentations, interactive learning, and student collaboration with video calls and chat support
4. **Design Feedback**: Annotating designs, mockups, visual assets, and prototypes in real-time with team video calls
5. **Screen Tutorials**: Creating visual guides, walkthroughs, and tutorials with screen annotations and video explanations
6. **Visual Communication**: Expressing ideas visually in real-time for remote teams with face-to-face video and instant messaging
7. **Technical Support**: Help users by annotating their screens during support sessions with video calls and chat
8. **Presentations**: Enhance presentations with live annotations, highlighting, and interactive Q&A via chat
9. **Large-Scale Projects**: Use infinite canvas (Penney mode) for extensive brainstorming, project planning, and large visual workflows

## Technical Requirements

- **Platform**: Web browser (cross-platform)
- **Browser Support**: Modern browsers with JavaScript and HTML5 support
- **Permissions**: Screen sharing permissions required for screen annotation feature
- **Network**: Internet connection required for collaboration features
- **No Installation**: Fully web-based, no software installation needed

## Technology Stack

- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Canvas API: For drawing functionality
- WebRTC: For real-time collaboration, screen sharing, video calls, and data channels for chat
- PeerJS: For peer-to-peer connections and signaling
- MediaStream API: For camera and microphone access
- Responsive Design: Mobile and desktop compatible

## How to Use

1. **Start Drawing**: Select a mode (Board, Screen, or Image) and choose a drawing tool
2. **Collaborate**: Click "Collaborate" to host a session or join an existing one
3. **Customize**: Adjust colors and stroke width using the sidebar controls
4. **Share**: Use snapshot feature to capture and share your annotations

## SEO & Structured Data

CFD Penney includes comprehensive SEO optimization:

### JSON-LD Schemas
- **Organization Schema**: Defines CodeFryDev as the publisher
- **WebSite Schema**: Main website information and navigation
- **SoftwareApplication Schema**: Desktop app details for Windows, macOS, Linux
- **WebApplication Schema**: Web app features and capabilities
- **Product Schema**: Product offering with free pricing
- **HowTo Schema**: Structured 3-step collaboration guide
- **BreadcrumbList Schema**: Navigation hierarchy on all pages
- **FAQPage Schema**: Comprehensive FAQ with answers

### Meta Tags
- Complete SEO meta descriptions and keywords
- Open Graph tags for Facebook/LinkedIn sharing
- Twitter Card tags for enhanced Twitter sharing
- Canonical URLs for all pages
- Proper favicon references

### Sitemap
Complete sitemap.xml including:
- Landing page (index.html)
- Web application (canvas.html)
- Privacy Policy (privacy.html)
- Terms & Conditions (terms.html)

## Legal Pages

### Privacy Policy
Comprehensive privacy policy explaining:
- Peer-to-peer architecture (no data collection)
- WebRTC technology usage
- Third-party services (PeerJS, STUN/TURN servers)
- Local storage usage
- Security disclaimers
- No account or personal information collection

### Terms & Conditions
Complete terms of service including:
- AS-IS disclaimer with no warranties
- Limitation of liability
- User responsibilities
- WebRTC connection disclaimers
- Open source transparency
- Usage prohibitions

## Pricing
**FREE** - No cost, no registration, no account required. Completely free forever.

## Version
1.1 - Enhanced with video calls, camera sharing, chat messaging, and infinite canvas (Penney) mode. Updated privacy policy and terms to reflect new features.

## Open Source
The project is open source on GitHub. Users can:
- Review the complete source code
- Audit privacy and security practices
- Contribute to development
- Fork and modify for their own use

## Contact & Support
- **Website**: https://codefrydev.in/CFDPenney/
- **GitHub**: https://github.com/codefrydev/CFDPenney/
- **Support**: Open issues on GitHub repository
- **Privacy**: See privacy.html for detailed privacy practices
- **Terms**: See terms.html for complete terms of service

## How to Get Started

### Quick Start (3 Steps)
1. **Start Session**: Open the desktop app or web browser and click "Host"
2. **Share Link**: Share the URL or 6-character code with your team
3. **Annotate Together**: Everyone's cursor is visible. Draw, highlight, and collaborate

### Time to Start
Under 30 seconds from landing page to active collaboration

## Technical Architecture

### Modular Structure
```
js/
├── main.js                 # Application entry point
├── state.js                # Global state management
├── config.js               # Configuration constants
├── canvas.js               # Canvas rendering
├── drawing.js              # Drawing logic
├── tools.js                # Tool management
├── collaboration/          # Collaboration modules
│   ├── collaborationCore.js
│   ├── dataConnection.js
│   ├── videoCall.js        # Video calls and camera sharing
│   ├── chat.js             # Chat messaging system
│   ├── messageHandler.js
│   ├── messageSender.js
│   ├── participantsPanel.js # Participants and video display
│   └── ...
├── penney/                 # Infinite canvas (Penney mode)
│   ├── penneyMain.js
│   ├── penneyCanvas.js
│   ├── penneyDrawing.js
│   └── ...
├── camera.js                # Camera and video management
├── shapes/                 # Shape tools
├── stickers/               # Sticker system
└── selection/              # Selection and manipulation
```

### Desktop App
- Built with Electron
- Screen capture capabilities
- Overlay functionality
- Same collaboration features as web app (video, chat, drawing)
- Runs on Windows, macOS, and Linux

### Penney Page (Infinite Canvas)
- Dedicated page for infinite canvas mode (penney.html)
- Pan and zoom functionality for unlimited canvas space
- All standard drawing tools available
- Real-time collaboration support
- Viewport controls for navigation
- Optimized for large-scale projects and extensive brainstorming