1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
# Instrument Sheet Visual Redesign
**Date:** 2026-04-04
**Status:** Approved for implementation
## Overview
Redesign `layout_instruments_sheet.xml` and supporting code to replace the plain divider between the instrument grid and forecast section with an animated water-state canvas, enhance typography, add direction indicators, use imperial units, and prevent touch-through to the map.
---
## 1. Animated Wave Divider Canvas
Replace the static `View` divider (and `FORECAST` section header) with a `WaveView` — a custom `View` subclass that draws an animated ocean scene.
**Visual behaviour:**
- Height: ~72dp
- Top half gradient: surface background colour (`#1C1B1F`) → dark transitional blue (`#162433`)
- Bottom half gradient: ocean blue (`#0B3050`) → ocean section background (`#0D2137`)
- Primary sine wave: amplitude driven by **swell height (ft)**, wavelength proportional to **swell period (s)**
- Secondary high-frequency sine: amplitude driven by **wind wave height (ft)**, wavelength ~35% of swell wavelength
- Whitecaps: short curved strokes at wind-wave crests when amplitude exceeds threshold
- Surface shimmer: thin semi-transparent cyan stroke along the wave waterline
- Animated via `ValueAnimator` / `postInvalidateOnAnimation()` loop; paused when view is not visible
**Data inputs** (passed from `InstrumentHandler`):
- `swellHeightFt: Float`
- `swellPeriodSec: Float`
- `windWaveHeightFt: Float`
**File:** `android-app/app/src/main/kotlin/org/terst/nav/ui/WaveView.kt`
---
## 2. Typography Enhancements
**Instrument values (grid + depth/baro):**
- Value: `26sp`, weight `300` (light), colour `#E6E1E5`
- Unit label: `10sp`, weight `400`, colour `#79747E` — baseline-aligned, small gap after value
**Heading/COG special case:**
- The `°` symbol is part of the value string, not a separate unit label (e.g. `"247°"` rendered in the value style)
**Forecast values (ocean section):**
- Value: `22sp`, weight `300`, colour `#CAE8FF`
- Unit: `10sp`, colour `#3B6785`
**Forecast labels:**
- `10sp`, weight `500`, letter-spacing `1.2sp`, colour `#5B9EC2`, uppercase
---
## 3. Direction Indicators
A single reusable SVG-style drawable approach: a `DirectionArrowView` (custom `View`, ~14dp × 14dp) that draws:
- Thin circle outline (stroke only, no fill)
- Chevron arrow (notched polygon) pointing in the given bearing
- Rotated via `bearing` property setter
**Instrument section style:** outline `#3A3640`, arrow fill `#9A94A0`
**Forecast section style:** outline `#1E4A6E`, arrow fill `#6FC3E8`
Applied to:
- AWS, TWS (wind speed cells) — bearing = apparent/true wind direction
- HDG, COG (heading/course cells) — bearing = heading value itself
- Current, Waves, Swell (forecast cells) — bearing from forecast data
Cells without a direction (BSP, SOG, Depth, Baro) have no arrow.
**File:** `android-app/app/src/main/kotlin/org/terst/nav/ui/DirectionArrowView.kt`
---
## 4. Forecast Cell Layout
Each forecast cell (Current, Waves, Swell) is two lines:
```
CURRENT ← forecast-label style
0.8 kts ← value + unit baseline-aligned
[arrow] 185° ← DirectionArrowView + bearing text
```
Swell adds period to the direction line:
```
[arrow] 260° · 14s
```
`"Wave"` → `"Waves"`, `"Curr"` → `"Current"`.
No section header ("FORECAST" label removed).
---
## 5. Units: Feet Instead of Metres
All heights from the data layer are in metres and must be converted before display (`* 3.28084`):
- `DepthData.depthMeters` — converted in `InstrumentHandler.updateDisplay()`
- `MarineConditions.waveHeightM` — converted in `InstrumentHandler.updateConditions()`
- `MarineConditions.swellHeightM` — converted in `InstrumentHandler.updateConditions()`
The `WaveView` data inputs (`swellHeightFt`, `windWaveHeightFt`) therefore receive already-converted values.
---
## 6. Remove Reports Section
Remove from `layout_instruments_sheet.xml`:
- `reports_divider` View
- `label_reports` TextView
- `reports_row` LinearLayout (containing `btn_nav_pretrip` and `btn_nav_tripreport`)
Remove corresponding wiring from `MainActivity` / wherever the button click listeners are set up.
---
## 7. Prevent Map Touch-Through
The bottom sheet currently sits inside a `CoordinatorLayout`. Touch events on the sheet's non-interactive areas fall through to the `MapFragment` below.
**Fix:** Set `android:clickable="true"` and `android:focusable="true"` on the root `ConstraintLayout` of `layout_instruments_sheet.xml`. This consumes all touch events on the sheet, preventing drag gestures from reaching the map.
---
## 8. Colour Palette Summary
| Token | Value | Use |
|---|---|---|
| Surface | `#1C1B1F` | Instrument section background |
| Outline dim | `#2B2930` | Subtle dividers within instrument grid |
| Value | `#E6E1E5` | Instrument values |
| Label | `#CAC4D0` | Instrument labels |
| Unit | `#79747E` | Instrument unit labels |
| Arrow outline (sky) | `#3A3640` | Arrow circle border in instrument section |
| Arrow fill (sky) | `#9A94A0` | Arrow chevron in instrument section |
| Ocean bg | `#0D2137` | Forecast section background |
| Ocean value | `#CAE8FF` | Forecast values |
| Ocean label | `#5B9EC2` | Forecast labels |
| Ocean unit | `#3B6785` | Forecast unit labels |
| Ocean arrow outline | `#1E4A6E` | Arrow circle border in forecast section |
| Ocean arrow fill | `#6FC3E8` | Arrow chevron in forecast section |
| Bearing text | `#6FC3E8` | Bearing degrees in forecast section |
| Period text | `#4A7FA0` | Swell period in forecast section |
---
## Files Changed
| File | Change |
|---|---|
| `layout_instruments_sheet.xml` | Major restructure: wave canvas, cell layout changes, remove reports |
| `WaveView.kt` | New custom View |
| `DirectionArrowView.kt` | New custom View |
| `InstrumentHandler.kt` | Add `updateWave()`, `updateDirections()`, feet conversion for depth |
| `MainActivity.kt` | Remove report button wiring |
| `styles.xml` / `themes.xml` | Add/update `InstrumentLabel`, `InstrumentPrimaryValue` styles if needed |
|
