25-02-2025
This commit is contained in:
parent
98084de7d0
commit
70a7776da5
53 changed files with 6719 additions and 833 deletions
|
|
@ -79,11 +79,11 @@ displayEvents ──@viewUpdate──► onViewUpdate()
|
|||
// Layout: screenToUV(sx, sy)
|
||||
// sx, sy = CSS-Pixel vom oberen linken Viewport-Rand
|
||||
function screenToUV(sx, sy) {
|
||||
const w = layoutWidth // = 100dvh Breite
|
||||
const h = layoutHeight // = 100dvh Höhe
|
||||
const w = layoutWidth // = 100dvh Breite
|
||||
const h = layoutHeight // = 100dvh Höhe
|
||||
return {
|
||||
x: (2 * sx - w) / h,
|
||||
y: (2 * sy - h) / h
|
||||
y: (2 * sy - h) / h,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -95,6 +95,7 @@ baseUv.y *= -1.0; // Y-Flip (CSS: top→bottom, GL: bottom→top)
|
|||
```
|
||||
|
||||
**GlowDot Y-Position:**
|
||||
|
||||
```
|
||||
yPercent = 50 - emotion * 35
|
||||
emotion +1.0 → top (15%)
|
||||
|
|
@ -103,6 +104,7 @@ yPercent = 50 - emotion * 35
|
|||
```
|
||||
|
||||
**Screen Y für Shader:**
|
||||
|
||||
```
|
||||
TIMELINE_TOP = 60px (CSS: .timeline { top: 60px })
|
||||
screenY = TIMELINE_TOP + (yPercent / 100) * containerHeight
|
||||
|
|
@ -131,6 +133,7 @@ v-model="ghostEmotion" ──► ghostEmotion (ref)
|
|||
### 3.3 Event-Farben
|
||||
|
||||
Jeder Event hat eine Glow-Farbe basierend auf:
|
||||
|
||||
1. `event.customColor` (falls gesetzt, hat Priorität)
|
||||
2. `emotionToColor(emotion, gradientPreset)` — interpoliert zwischen 3 Farben
|
||||
|
||||
|
|
@ -143,6 +146,7 @@ events.js: getGlowColor(event)
|
|||
```
|
||||
|
||||
Die Farbe fließt als `pointColor[8]` Uniform in den Shader:
|
||||
|
||||
- **Kreise:** `vec3 circCol = pointColor[p]`
|
||||
- **Liniensegmente:** `vec3 lineCol = mix(pointColor[s], pointColor[s+1], t_seg)`
|
||||
|
||||
|
|
@ -158,29 +162,30 @@ Die Farbe fließt als `pointColor[8]` Uniform in den Shader:
|
|||
|
||||
**Props:**
|
||||
|
||||
| Prop | Typ | Default | Beschreibung |
|
||||
|------|-----|---------|-------------|
|
||||
| `numPoints` | Number | 0 | Anzahl aktiver Punkte (max 8) |
|
||||
| `pointXValues` | Array | [] | X-UV-Koordinaten der Punkte |
|
||||
| `pointYValues` | Array | [] | Y-UV-Koordinaten der Punkte |
|
||||
| `pointColors` | Array | [] | Hex-Farben pro Punkt (z.B. '#ff0000') |
|
||||
| `lineCount` | Array/Number | [10] | Anzahl Wellenlinien |
|
||||
| `animationSpeed` | Number | 1 | Geschwindigkeit der Wellenanimation |
|
||||
| `lineSpread` | Number | 0.05 | Wellenamplitude |
|
||||
| `fanSpread` | Number | 0.05 | Fächerbreite der Linien |
|
||||
| `lineSharpness` | Number | 8.0 | Feinheit/Schärfe der Linien |
|
||||
| `waveFrequency` | Number | 7.0 | Welligkeit |
|
||||
| `bezierCurvature` | Number | 0.2 | Kurvenstärke der Bezier-Verbindungen |
|
||||
| `circleRadiusPx` | Number | 75 | Kreisradius in Pixeln |
|
||||
| `circleGlowSize` | Number | 18 | Glow-Ausdehnung um den Kreis |
|
||||
| `circleGlowStrength` | Number | 1.5 | Glow-Intensität |
|
||||
| `linesGradient` | Array | [...] | Hex-Farbwerte für Linien-Gradient |
|
||||
| `bgColorCenter` | String | '#0a0514' | Hintergrundfarbe Mitte |
|
||||
| `bgColorEdge` | String | '#000000' | Hintergrundfarbe Rand |
|
||||
| `backgroundImage` | String | '' | URL für Hintergrundbild |
|
||||
| `mixBlendMode` | String | 'screen' | CSS Blend-Mode des Canvas |
|
||||
| Prop | Typ | Default | Beschreibung |
|
||||
| -------------------- | ------------ | --------- | ------------------------------------- |
|
||||
| `numPoints` | Number | 0 | Anzahl aktiver Punkte (max 8) |
|
||||
| `pointXValues` | Array | [] | X-UV-Koordinaten der Punkte |
|
||||
| `pointYValues` | Array | [] | Y-UV-Koordinaten der Punkte |
|
||||
| `pointColors` | Array | [] | Hex-Farben pro Punkt (z.B. '#ff0000') |
|
||||
| `lineCount` | Array/Number | [10] | Anzahl Wellenlinien |
|
||||
| `animationSpeed` | Number | 1 | Geschwindigkeit der Wellenanimation |
|
||||
| `lineSpread` | Number | 0.05 | Wellenamplitude |
|
||||
| `fanSpread` | Number | 0.05 | Fächerbreite der Linien |
|
||||
| `lineSharpness` | Number | 8.0 | Feinheit/Schärfe der Linien |
|
||||
| `waveFrequency` | Number | 7.0 | Welligkeit |
|
||||
| `bezierCurvature` | Number | 0.2 | Kurvenstärke der Bezier-Verbindungen |
|
||||
| `circleRadiusPx` | Number | 75 | Kreisradius in Pixeln |
|
||||
| `circleGlowSize` | Number | 18 | Glow-Ausdehnung um den Kreis |
|
||||
| `circleGlowStrength` | Number | 1.5 | Glow-Intensität |
|
||||
| `linesGradient` | Array | [...] | Hex-Farbwerte für Linien-Gradient |
|
||||
| `bgColorCenter` | String | '#0a0514' | Hintergrundfarbe Mitte |
|
||||
| `bgColorEdge` | String | '#000000' | Hintergrundfarbe Rand |
|
||||
| `backgroundImage` | String | '' | URL für Hintergrundbild |
|
||||
| `mixBlendMode` | String | 'screen' | CSS Blend-Mode des Canvas |
|
||||
|
||||
**Shader-Architektur:**
|
||||
|
||||
- `drawCircle()` — Zeichnet weißen Kern + farbigen Glow + Fog
|
||||
- `waveFocal()` — Berechnet Wellenlinien entlang Bezier-Segmenten
|
||||
- `bezierClosestT()` — Findet nächsten Punkt auf quadratischer Bezier-Kurve
|
||||
|
|
@ -191,9 +196,10 @@ Die Farbe fließt als `pointColor[8]` Uniform in den Shader:
|
|||
**Zweck:** Klickbarer DOM-Overlay pro Event (weißer Kreis + optionales Bild).
|
||||
|
||||
**Größe:** Dynamisch aus `settingsStore.floatingLines.circleRadius`:
|
||||
|
||||
```js
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2)
|
||||
const dotSize = 2 * circleRadius / dpr // Matches shader circle
|
||||
const dotSize = (2 * circleRadius) / dpr // Matches shader circle
|
||||
```
|
||||
|
||||
**Kein Zoom-Scaling** — Größe ist konstant, unabhängig vom Zoom-Level.
|
||||
|
|
@ -207,12 +213,14 @@ const dotSize = 2 * circleRadius / dpr // Matches shader circle
|
|||
**CSS-Position:** `top: 60px; bottom: 70px` (unterhalb Header, oberhalb AddButton)
|
||||
|
||||
**Features:**
|
||||
|
||||
- Pinch-to-Zoom (Touch + Ctrl+Wheel)
|
||||
- Zoom-Range: 0.4x – 3.0x
|
||||
- Scroll-to-center beim Mount (letztes Event)
|
||||
- Ghost-Event-Insertion bei Panel-Open (Create-Mode)
|
||||
|
||||
**Emits:**
|
||||
|
||||
- `@dotSelect(eventId)` — Event angeklickt
|
||||
- `@viewUpdate({ scrollLeft, viewportWidth, containerHeight, events[] })` — Bei jedem Scroll/Zoom/Resize/Event-Change
|
||||
|
||||
|
|
@ -221,6 +229,7 @@ const dotSize = 2 * circleRadius / dpr // Matches shader circle
|
|||
**Zweck:** Haupt-Layout, orchestriert alle Komponenten.
|
||||
|
||||
**Verantwortlichkeiten:**
|
||||
|
||||
- Empfängt `@view-update` von TimelineView
|
||||
- Konvertiert Screen-Pixel → Shader-UV-Koordinaten
|
||||
- Berechnet `shaderNumPoints`, `shaderPointX[]`, `shaderPointY[]`, `shaderPointColors[]`
|
||||
|
|
@ -234,6 +243,7 @@ const dotSize = 2 * circleRadius / dpr // Matches shader circle
|
|||
**Zweck:** Einstellungs-Panel (Slide-Up, 75dvh).
|
||||
|
||||
**Sektionen:**
|
||||
|
||||
1. **Linien** — Speed, Anzahl, Wellen-Amp, Fächerbreite, Feinheit, Welligkeit, Kurve, Kreis, Glow Größe, Glow Stärke
|
||||
2. **Hintergrundbild** — 10 vordefinierte Bilder (`/images/bg-image-1.jpg` bis `10.jpg`)
|
||||
3. **Hintergrundfarbe** — BG Mitte + BG Rand (Color Picker)
|
||||
|
|
@ -246,6 +256,7 @@ const dotSize = 2 * circleRadius / dpr // Matches shader circle
|
|||
**Zweck:** Event-Erstellung und -Bearbeitung (Slide-Up, 75dvh).
|
||||
|
||||
**Features:**
|
||||
|
||||
- Key Image Upload (Platzhalter)
|
||||
- Titel-Input (inline, groß)
|
||||
- Datum-Picker (QDate mit deutscher Locale)
|
||||
|
|
@ -311,26 +322,36 @@ localStorage.setItem('thatsme-settings', JSON.stringify({...}))
|
|||
### 6.2 Quasar Theme (`quasar.variables.scss`)
|
||||
|
||||
```scss
|
||||
$primary : #d946ef; // Fuchsia — Slider, Toggles, aktive States
|
||||
$secondary : #a855f7; // Purple
|
||||
$accent : #ec4899; // Pink
|
||||
$primary: #d946ef; // Fuchsia — Slider, Toggles, aktive States
|
||||
$secondary: #a855f7; // Purple
|
||||
$accent: #ec4899; // Pink
|
||||
```
|
||||
|
||||
### 6.3 Wichtige CSS-Hinweise
|
||||
|
||||
**Timeline-Positionierung:**
|
||||
|
||||
```css
|
||||
/* TimelineView.vue — eigene Positionierung */
|
||||
.timeline { position: absolute; top: 60px; bottom: 70px; }
|
||||
.timeline {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 70px;
|
||||
}
|
||||
|
||||
/* LifeWaveLayout.vue — NUR z-index, KEIN inset: 0! */
|
||||
/* inset: 0 würde top/bottom der Timeline überschreiben (CSS Cascade) */
|
||||
.lifewave-layout__timeline { z-index: 5; }
|
||||
.lifewave-layout__timeline {
|
||||
z-index: 5;
|
||||
}
|
||||
```
|
||||
|
||||
**GlowDot — kein Zoom-Scaling:**
|
||||
|
||||
```css
|
||||
.glow-dot { transform: translate(-50%, -50%); }
|
||||
.glow-dot {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/* Breite/Höhe kommt dynamisch aus dem Settings-Store */
|
||||
```
|
||||
|
||||
|
|
@ -366,16 +387,16 @@ npm run build
|
|||
|
||||
### Dateien für die Weiterentwicklung
|
||||
|
||||
| Was | Wo |
|
||||
|-----|-----|
|
||||
| Shader-Code (GLSL) | `FloatingLines.vue` (Zeile ~67–366) |
|
||||
| UV-Konvertierung | `LifeWaveLayout.vue` → `screenToUV()` |
|
||||
| Event-Farben | `events.js` → `emotionToColor()`, `getGlowColor()` |
|
||||
| Settings-Defaults | `settings.js` → `FLOATING_LINES_DEFAULTS` |
|
||||
| Slider-Ranges | `LifeWaveSettings.vue` (`:min`, `:max`, `:step` auf jedem `q-slider`) |
|
||||
| Quasar-Theme | `quasar.variables.scss` |
|
||||
| Glass-Styles | `app.scss` → `.glass--panel`, `.glass--button` |
|
||||
| Dev-Referenz | `dev/init-fl.html`, `dev/floating-lines.js` (Original-Prototyp) |
|
||||
| Was | Wo |
|
||||
| ------------------ | --------------------------------------------------------------------- |
|
||||
| Shader-Code (GLSL) | `FloatingLines.vue` (Zeile ~67–366) |
|
||||
| UV-Konvertierung | `LifeWaveLayout.vue` → `screenToUV()` |
|
||||
| Event-Farben | `events.js` → `emotionToColor()`, `getGlowColor()` |
|
||||
| Settings-Defaults | `settings.js` → `FLOATING_LINES_DEFAULTS` |
|
||||
| Slider-Ranges | `LifeWaveSettings.vue` (`:min`, `:max`, `:step` auf jedem `q-slider`) |
|
||||
| Quasar-Theme | `quasar.variables.scss` |
|
||||
| Glass-Styles | `app.scss` → `.glass--panel`, `.glass--button` |
|
||||
| Dev-Referenz | `dev/init-fl.html`, `dev/floating-lines.js` (Original-Prototyp) |
|
||||
|
||||
### Nächste Schritte (offen)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue