Tesla Dashcam Viewer v1.1.0 - Een Complete Oplossing voor je Tesla Dashcam Opnames

Als Tesla-eigenaar weet je dat je auto continu opnames maakt met zijn 6 camera's. Of het nu gaat om Sentry Mode gebeurtenissen, SavedClips, of gewone TeslaCam opnames - je verzamelt al snel gigabytes aan videobeelden. Maar hoe beheer je deze enorme hoeveelheid data op een efficiënte manier?

Daarom heb ik **Tesla Dashcam Viewer** ontwikkeld - een moderne, gebruiksvriendelijke webapplicatie waarmee je al je Tesla dashcam opnames kunt bekijken, organiseren en analyseren. En nu met versie 1.1.0 is er zelfs volledige TeslaMate integratie met multi-auto ondersteuning!

## Belangrijkste Functies

### 🎥 Multi-Camera Weergave

De kern van Tesla Dashcam Viewer is de mogelijkheid om alle zes camera's tegelijk te bekijken. Geen gedoe meer met losse videobestanden - je ziet front, back, links en rechts in één overzichtelijk scherm met gesynchroniseerde afspeel.

**Kenmerken:**

- Gesynchroniseerde afspeel van alle 6 camera's

- Individuele camera's vergroten of verkleinen

- Frame-accurate navigatie

- Video snelheid aanpassen

- Automatische thumbnail generatie met FFmpeg

### 🗺️ Interactieve Kaart

Elke opname wordt automatisch op een kaart getoond, zodat je precies weet waar een gebeurtenis plaatsvond. Gebruik de kaart om opnames per locatie te filteren of om patronen te ontdekken.

**Kenmerken:**

- OpenStreetMap/Leaflet integratie

- Klik op een clip marker om direct naar de video te gaan

- Filter opnames per geografische locatie

- Toon adres en stad informatie

### ⭐ Favorieten & Organisatie

Markeer belangrijke opnames als favoriet voor snelle toegang. De favorieten lijst toont thumbnails en metadata, zodat je in één oogopslag ziet wat je hebt opgeslagen.

**Kenmerken:**

- Favorieten systeem met één klik

- Thumbnail preview van elke opname

- Compact datumformaat (DD/MM/YY - HH:MM)

- Snelle toegang via sidebar

### 🗑️ Trash/Soft Delete

Verwijder ongewenste opnames veilig met de soft-delete functie. Clips worden eerst naar de prullenbak verplaatst, zodat je ze later nog kunt herstellen. Permanente verwijdering verwijdert daadwerkelijk de bestanden van je NAS of harde schijf.

**Kenmerken:**

- Soft-delete met herstel optie

- Permanente verwijdering (inclusief bestanden op schijf)

- Bulk operaties

- Scanner respecteert verwijderde clips (geen duplicaten meer!)

- **Type:** Sentry, SavedClips, TeslaCam

### 🔍 Geavanceerde Filtering

Vind snel de opname die je zoekt met krachtige filters:

- **Type:** Sentry, SavedClips, TeslaCam

- **Datum:** Kies een specifieke datum of datumbereik

- **Locatie:** Filter op stad of adres

- **Status:** Favorieten, verwijderd, etc.

### 📊 TeslaMate Integratie (v1.1.0) - Experimenteel

Dit is de grote nieuwe feature in versie 1.1.0! We zijn begonnen met een TeslaMate integratie voor geavanceerde statistieken en analytics.

**Let op:** Deze functionaliteit is nog experimenteel en wordt actief doorontwikkeld. Het doel is om uiteindelijk een **volledige vervanger voor Grafana** te worden, waarbij je al je TeslaMate statistieken direct in de Tesla Dashcam Viewer kunt bekijken zonder een aparte Grafana installatie nodig te hebben.

**We zoeken jouw feedback!** Heb je ideeën voor nieuwe grafieken, statistieken of features? Laat het ons weten! Jouw input helpt ons om deze integratie nog beter te maken.

#### Multi-Auto Ondersteuning

Heb je meerdere Tesla's? Geen probleem! Met de nieuwe car selector dropdown kun je eenvoudig wisselen tussen je voertuigen en statistieken per auto bekijken - net zoals in Grafana.

*[Screenshot: Car selector dropdown met "Snowball" en andere auto's]*

#### Overzicht Tab

Een compleet overzicht van je Tesla gebruik:

- Totaal aantal ritten

- Totaal aantal laadsessies

- Totale afstand in kilometers

- Totaal energie verbruik in kWh

- Huidige voertuigstatus (batterij niveau, temperatuur, locatie)

#### Laad Statistieken

Analyseer je laadgedrag:

- Laadsessie overzicht (laatste 30 dagen)

- Gemiddelde energie per sessie

- Totale laadkosten

- Recente laadsessies met details

#### Batterij Gezondheid

Monitor je batterij degradatie over tijd:

- Ideal range vs. rated range trend

- Batterij gezondheidspercentage

- Historische data tot 90 dagen

- Interactieve grafieken

#### Ritten Statistieken

Krijg inzicht in je rijgedrag:

- Totaal aantal ritten

- Gemiddelde afstand

- Efficiency in Wh/km

- Recente ritten met details

- Gemiddelde buitentemperatuur

# Technische Specificaties

### Architectuur

**Frontend:**

- React + TypeScript voor type-safe development

- TailwindCSS voor moderne styling

- React Query voor efficiënte data fetching

- Recharts voor mooie grafieken

- Leaflet voor kaart integratie

- Vite voor razendsnelle builds

**Backend:**

- Python 3.11 met FastAPI

- SQLAlchemy ORM voor database operaties

- JWT authenticatie voor beveiliging

- FFmpeg voor thumbnail generatie

- PostgreSQL database

**Deployment:**

- Docker container (multi-arch: AMD64 + ARM64)

- Portainer stack support

- Health checks ingebouwd

- Automatische database migraties

## Installatie

### Met Docker Compose

De eenvoudigste manier om te starten is met Docker Compose:

```yaml

version: "3.8"

services:

tesla-dashcam-viewer:

image: gwillaert1983/tesla-dashcam-viewer:latest

container_name: tesla-dashcam-viewer

restart: unless-stopped

ports:

- "30551:8080"

environment:

- DATABASE_URL=postgresql://user:password@host:5432/tesla_viewer

- TESLAMATE_DATABASE_URL=postgresql://teslamate:password@host:5432/teslamate

- SECRET_KEY=your-secret-key-here-minimum-32-characters

- ADMIN_PASSWORD=YourSecureAdminPassword123!

- TESLACAM_PATH=/media/teslacam

volumes:

- /volume1/Cloud/Sentry:/media/teslacam:rw

- thumbnails:/app/thumbnails

volumes:

thumbnails:

```

### Met Portainer

1. Ga naar **Stacks** in Portainer

2. Klik **Add Stack**

3. Plak de bovenstaande docker-compose.yml

4. Pas de environment variabelen aan

5. Klik **Deploy the stack**

## TeslaMate Database Configuratie

Om de TeslaMate integratie te gebruiken, heb je toegang nodig tot de TeslaMate PostgreSQL database:

```yaml

environment:

# Je eigen database voor Tesla Dashcam Viewer

- DATABASE_URL=postgresql://teslaviewer:password@192.168.0.226:5432/tesla_viewer

# TeslaMate database (alleen lezen)

- TESLAMATE_DATABASE_URL=postgresql://teslamate:password@192.168.0.226:5432/teslamate

```

De applicatie maakt zijn eigen tabellen aan in de opgegeven database en leest alleen data uit de TeslaMate tabellen - geen conflicten!

# Volume Mounts - Belangrijk!

### TeslaCam Footage

Mount je Tesla dashcam folder als **read-write** (`:rw`) om delete functionaliteit mogelijk te maken:

```yaml

volumes:

- /volume1/Cloud/Sentry:/media/teslacam:rw

```

**Niet** `:ro` (read-only) gebruiken, anders kun je geen bestanden verwijderen!

### Thumbnails

Gebruik een named volume voor thumbnail opslag:

```yaml

volumes:

- thumbnails:/app/thumbnails

```

Dit zorgt voor persistente thumbnail cache tussen container restarts.

## Security & Authenticatie

Tesla Dashcam Viewer neemt beveiliging serieus:

### JWT Authenticatie

- Secure token-based login systeem

- Tokens in localStorage/sessionStorage

- Automatische token refresh

- Logout functionaliteit

### Admin Interface

- Gebruikersbeheer via web UI

- Rol-based access control

- Password hashing met bcrypt

- Environment-based configuratie

### Environment Variabelen

Gevoelige data wordt nooit hardcoded:

```yaml

- SECRET_KEY=b8f3a9c2e7d4f1a6b5c8d9e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2

- ADMIN_PASSWORD=YourSecurePassword123!

## Dark Mode Support

Volledige dark mode ondersteuning voor comfortabel werken in het donker:

- Automatische detectie van systeem thema

- Handmatige toggle in UI

- Alle componenten ondersteund

- TailwindCSS dark: variant

## Performance & Optimalisatie

### Thumbnail Generatie

Automatische thumbnail generatie met FFmpeg:

- On-demand generatie bij eerste view

- Gecached in persistente volume

- ~50-100KB per clip

- Snelle loading times

### Database Optimalisatie

- Indexes op vaak gebruikte queries

- Efficient pagination voor grote datasets

- Connection pooling

- Query caching met React Query

### Frontend Performance

- Code splitting met Vite

- Lazy loading van video's

- Virtual scrolling voor lange lijsten

- Optimistic UI updates

## Community & Support

### Links

- 🌐 **Website:** [www.willaert-cds.com](https://www.willaert-cds.com)

- 🐳 **Docker Hub:** (https://hub.docker.com/r/gwillaert1983/tesla-dashcam-viewer)

- 💻 **GitHub:** (https://github.com/gwillaert1983/TDV)

### Feedback & Feature Requests

We zijn actief bezig met de ontwikkeling van Tesla Dashcam Viewer en jullie feedback is ontzettend waardevol!

**We willen graag horen:**

- Welke TeslaMate statistieken mis je het meest in de huidige versie?

- Welke Grafana dashboards gebruik je het meest en wil je graag zien?

- Welke features zou je willen toevoegen aan de dashcam viewer?

- Ervaar je bugs of problemen? Laat het ons weten!

**Contact opnemen:**

- 💬 **GitHub Discussions:** Deel je ideeën en feedback

- 🐛 **GitHub Issues:** Meld bugs of feature requests

- 📧 **Direct contact:** Via [www.willaert-cds.com](https://www.willaert-cds.com)

### Vragen of Problemen?

Heb je vragen of loop je tegen problemen aan? Neem gerust contact op via:

- Website: [www.willaert-cds.com](https://www.willaert-cds.com)

- GitHub Issues: [github.com/gwillaert1983/TDV/issues](https://github.com/gwillaert1983/TDV/issues)