أداة احترافية لتخطيط أنظمة كاميرات المراقبة مع عرض التغطية وإدارة الكابلات ودعم PDF
Security installers traditionally plan CCTV systems on paper or generic CAD tools — leading to coverage gaps, miscalculated cable lengths, and costly on-site adjustments. Camera Planner lets you upload a floor plan (image or PDF), drop cameras with realistic field-of-view cones, route cables, and hand a polished plan to clients before installation.
- 📐 Floor-plan import — JPG, PNG, and multi-page PDF support (page picker included)
- 📷 Camera placement — drag-to-position, rotate, FOV cone (30°–180°), aperture-based auto-FOV
- 🔄 360° cameras with full radial coverage rendering
- 📏 Real-world scale — calibrate from any known distance, get accurate metric measurements
- 🔌 Three cable types — camera-to-DVR, device-to-device, free-form with
Ctrl+Clickwaypoints - 🖥️ Device management — DVR/NVR with channel tracking, switches, routers
- 💾 Project save/load — export as JSON, reopen exactly where you left off
- 🌙 Dark mode — fully themed
- 🌐 Arabic-first UI with native RTL layout
| Capability | 🆓 Open Source (this repo) | ⭐ Full Edition (contact) |
|---|---|---|
| Floor-plan editor (image + PDF) | ✅ | ✅ |
| Camera placement & coverage cones | ✅ | ✅ |
| Cable routing & length calculation | ✅ | ✅ |
| Save project as local JSON file | ✅ | ✅ |
| Cloud database & user accounts | ❌ | ✅ |
| Project archive & client sharing | ❌ | ✅ |
| Polished PDF report export | ❌ | ✅ |
| Admin dashboard & analytics | ❌ | ✅ |
| Priority support & team training | ❌ | ✅ |
📩 The full edition (with database, multi-user accounts, reporting, and dashboards) is available on request — contact kosayalassaf@gmail.com or via pro-sss.com.
| Layer | Technology |
|---|---|
| Framework | React 19 |
| Styling | Inline styles + Tailwind utilities |
| State | Context API |
| Rendering | SVG (coverage cones), Canvas (PDF) |
| pdf.js (CDN-loaded, no bundle bloat) | |
| Storage | localStorage + sessionStorage |
| Deploy | Vercel |
git clone https://github.com/kusaisssd/camera-planner.git
cd camera-planner
npm install
npm startApp opens at http://localhost:3000.
src/
├── components/ # Reusable UI components
│ ├── PlanContainer.jsx # Main canvas with cameras/devices/cables
│ ├── CameraElement.jsx # Camera marker + rotation handle
│ ├── DeviceElement.jsx # DVR/NVR/switch markers
│ ├── ScaleSetupDialog.jsx # Two-step scale calibration
│ ├── PDFPageSelector.jsx # PDF page picker (pdf.js)
│ ├── CameraControlPanel.jsx # FOV / aperture / IP / credentials
│ └── ...
├── pages/ # Top-level routes
│ ├── MyPlans.jsx # Main editor
│ ├── HowItWorks.jsx # Feature walkthrough
│ └── ...
├── context/ # Theme provider
└── utils/ # Project save/load helpers
Contributions welcome! Read CONTRIBUTING.md before opening a PR.
MIT © 2026 Kosay Alassaf
شركات تركيب أنظمة المراقبة تخطّط عادةً على الورق أو ببرامج CAD عامة — مما يسبّب ثغرات في التغطية، أخطاء في حساب أطوال الكابلات، وتعديلات مكلفة في الموقع. Camera Planner يتيح لك رفع المخطط (صورة أو PDF)، وضع الكاميرات بمخاريط رؤية واقعية، رسم الكابلات، وتقديم خطة احترافية للعميل قبل التركيب.
- 📐 رفع المخططات — دعم JPG و PNG و PDF متعدد الصفحات مع نافذة اختيار الصفحة
- 📷 وضع الكاميرات — سحب وإفلات، تدوير، مخروط رؤية (30°–180°)، حساب FOV تلقائي حسب فتحة العدسة
- 🔄 كاميرات 360° بتغطية دائرية كاملة
- 📏 مقياس واقعي — معايرة من أي مسافة معروفة للحصول على قياسات دقيقة بالمتر
- 🔌 ثلاثة أنواع كابلات — كاميرا→DVR، جهاز→جهاز، كابل حر مع نقاط انعطاف بـ
Ctrl+Click - 🖥️ إدارة الأجهزة — DVR/NVR مع تتبع القنوات، Switches، Routers
- 💾 حفظ/فتح المشاريع — تصدير JSON واستعادة العمل بالكامل
- 🌙 وضع داكن متكامل
- 🌐 واجهة عربية بدعم RTL أصيل
| الميزة | 🆓 مفتوحة المصدر (هذا المستودع) | ⭐ النسخة الكاملة (للتواصل) |
|---|---|---|
| محرر المخططات (صور + PDF) | ✅ | ✅ |
| وضع الكاميرات وعرض التغطية | ✅ | ✅ |
| رسم الكابلات وحساب الأطوال | ✅ | ✅ |
| حفظ المشروع كملف JSON محلي | ✅ | ✅ |
| قاعدة بيانات سحابية وحسابات مستخدمين | ❌ | ✅ |
| أرشفة المشاريع ومشاركتها مع العملاء | ❌ | ✅ |
| تصدير تقارير PDF احترافية | ❌ | ✅ |
| لوحة تحكم وإحصائيات | ❌ | ✅ |
| دعم فني أولوي وتدريب الفريق | ❌ | ✅ |
📩 النسخة الكاملة (مع قاعدة البيانات، الحسابات متعددة المستخدمين، التقارير، ولوحات التحكم) متاحة عند الطلب — تواصل عبر kosayalassaf@gmail.com أو pro-sss.com.
git clone https://github.com/kusaisssd/camera-planner.git
cd camera-planner
npm install
npm startافتح http://localhost:3000 في المتصفح.
MIT © 2026 Kosay Alassaf
Kosay Alassaf — Senior .NET Developer · Full-Stack & IT Infrastructure 📍 Gießen, Germany
15+ years building enterprise systems for NGOs, ministries, and educational institutions. Specializing in ASP.NET Core, C#, React, Azure, and applied machine learning.
⭐ If you find this project useful, please consider giving it a star!
⭐ إذا أعجبك المشروع، لا تنسَ وضع نجمة!