Bu klasör, TARET ESP32-CAM takip sisteminin web tabanlı kontrol arayüzüdür.
⚠️ Uyarı: Ana sistemmain-projectklasöründe bulunur. Bu UI sadece görüntü izleme ve manual kontrol için tasarlanmıştır.
my-app/
├── app/
│ ├── layout.tsx # Ana layout ve stil (Tailwind CSS)
│ ├── page.tsx # Ana sayfa
│ ├── globals.css # Global stil tanımları
│ ├── kamera/
│ │ └── page.tsx # Kamera akışı ve kontrol paneli
│ └── generated/ # Prisma otomatik oluşturulan dosyalar
│
├── components/
│ └── Sidebar.tsx # Yan navigasyon menüsü
│
└── public/ # Statik dosyalar (favicon, vb.)
npm installnpm run devTarayıcıda http://localhost:3000 açın.
npm run build
npm startnpm run lint| Teknoloji | Versiyon | Amaç |
|---|---|---|
| Next.js | 16.2.6 | React framework ve SSR |
| React | 19.2.4 | UI bileşenleri |
| TypeScript | 5 | Tip güvenliği |
| Tailwind CSS | 4 | Stil framework'ü |
| Prisma | 7.8.0 | Database ORM |
| ESLint | 9 | Kod kalitesi |
Kamera sayfası ESP32'den gerçek zamanlı görüntü alır:
// Kamera endpoint
const frameUrl = "http://192.168.4.1/photo";
// Servo kontrolü
const servoUrl = "http://192.168.4.1/servo?pan=90&tilt=45";| Dosya | Açıklama |
|---|---|
app/page.tsx |
Ana landing sayfası |
app/kamera/page.tsx |
Kamera akışı ve kontrol paneli |
components/Sidebar.tsx |
Navigasyon menüsü bileşeni |
app/globals.css |
Global stil ve Tailwind directives |
npx prisma migrate dev --name initial
npx prisma studio # Veritabanını görsel arayüzde yönetinGerekirse .env.local dosyası oluşturun:
DATABASE_URL="your_database_url"
NEXT_PUBLIC_API_URL="http://192.168.4.1"Kontrol arayüzü, ../main-project/ klasöründeki Python/ESP32 sistemine bağlıdır:
- Python Kodları: Gerçek zamanlı nesne takip
- ESP32 Kodu: Servo ve kamera kontrolü
- Bağlantı: HTTP/WiFi protokolü
- Tüm sayfa otomatik yenileme özelliği etkindir
- Tailwind CSS ile responsive tasarım yapılmıştır
- Prisma Client browser kullanımı için hazırlanmış
Sürüm: 0.1.0 | Ana Proje: ../main-project/