diff --git a/AGENTS.md b/AGENTS.md index 6c747f6..65f49a8 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -137,6 +137,7 @@ cd server && go vet ./... && go test ./... && govulncheck ./... |---|---| | `SPECS.md` | journal: architecture, status, signals the car lacks, to-dos, dated done-log | | `README.md` | user-facing overview, install, setup, config file | +| `THEMES.md` | the Overview styles: two screenshots each (`screenshots/themes/`, sample values) and what inspired them | | `OTA.md` | releases, the updater's checks, USB install | | `FIRMWARE.md` | the head unit, firmware generations, display | | `server/README.md`, `k8s/README.md` | API, configuration, deployment | diff --git a/README.md b/README.md index 4e47174..0d97ed7 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ APIs. ## Contents - [Screenshots](#screenshots) +- [Overview styles](THEMES.md) (separate page) - [How it fits together](#how-it-fits-together) - [The app](#the-app) - [Install on the car](#install-on-the-car) @@ -38,6 +39,14 @@ APIs. ## Screenshots +**Overview styles:** the Overview comes in twelve looks, from an 80s fluorescent display to a +starship console and a watch face. [THEMES.md](THEMES.md) shows each one, with and without the +navigation, and what inspired it. + +

+ The Retro Overview style in full screen: turquoise seven-segment digits for speed, charge, range and usage, amber labels +

+ Version 2.18.1 in the car's app window (1778×640 dp next to the MG4's own sidebar), full screen, on the Android 9 emulator. There is no vehicle there, so every value shows as a dash. Every tab fits the window without scrolling. @@ -79,7 +88,7 @@ with the server using a token of its own, obtained by pairing with a phone (belo | Tab | What it shows | |---|---| -| **Overview** | Battery, range, power and speed; range, usage and energy since start; 5-minute averages of range, usage, power and speed; vehicle info (odometer, climate setpoint) and tyre pressures. Read five times a second. Looks to choose from in Settings → Overview style: Tiles, Gauges, Cockpit, Retro, Futuristic, Sci-fi, Cartoon, MG, Minimal, Terminal, Nixie tubes and Chronograph. A style with its own colours (Sci-fi, Cartoon, Nixie tubes, and Retro and Terminal with "Original") colours the whole app to match, e.g. turquoise for Retro. The small button next to the MG4 logo in the navigation hides the navigation for a full-width Overview; swipe in from the left edge (a faint handle marks it) to bring it back; with Settings → Full screen off, the car's own sidebar sits at that edge, so tap the small tab at the left edge (›) instead. Pages change only by the navigation, not by swiping sideways | +| **Overview** | Battery, range, power and speed; range, usage and energy since start; 5-minute averages of range, usage, power and speed; vehicle info (odometer, climate setpoint) and tyre pressures. Read five times a second. Looks to choose from in Settings → Overview style: Tiles, Gauges, Cockpit, Retro, Futuristic, Sci-fi, Cartoon, MG, Minimal, Terminal, Nixie tubes and Chronograph ([THEMES.md](THEMES.md) shows them all). A style with its own colours (Sci-fi, Cartoon, Nixie tubes, and Retro and Terminal with "Original") colours the whole app to match, e.g. turquoise for Retro. The small button next to the MG4 logo in the navigation hides the navigation for a full-width Overview; swipe in from the left edge (a faint handle marks it) to bring it back; with Settings → Full screen off, the car's own sidebar sits at that edge, so tap the small tab at the left edge (›) instead. Pages change only by the navigation, not by swiping sideways | | **Consumption** | Lifetime, last 7 and 30 days, Trip A and B (distance, energy, average consumption and speed, SOC change), and a daily log of the last four months | | **Charging** | The current session (SOC, voltage, current, power, energy into the battery and from the grid, time, cost) and its SOC/power curve | | **Live data** | Live data on/off, ABRP credentials for sending directly from the car, upload frequency | @@ -246,6 +255,7 @@ flake.nix dev shell, build-car, publish-car, car-emulator | Document | What it covers | |---|---| +| [THEMES.md](THEMES.md) | The Overview styles: screenshots and what inspired each | | [SPECS.md](SPECS.md) | Journal of this fork: architecture, status, to-dos, done log | | [OTA.md](OTA.md) | Publishing releases, the updater's checks, USB install | | [FIRMWARE.md](FIRMWARE.md) | MG4 firmware generations and how the app reads each | diff --git a/SPECS.md b/SPECS.md index 94ae25b..6730afe 100644 --- a/SPECS.md +++ b/SPECS.md @@ -138,6 +138,14 @@ tyre pressures, GPS (lat, lon, elevation, heading) and the is_* flags. It does * confirmed car facts, app structure, UI conventions, build/test/ship, documents. It replaces upstream's EVABRPUploader text. The test emulator is now in the flake: `nix run .#car-emulator` (Android 9 AOSP at 1920×720, 160 dpi; the car build installs as the system user — checked). +- 2026-10-25 — App 2.35.2: the full-screen button is round. Its disc was an even inset in a + 64 × 72 dp (narrow: 64 × 76) area, so an oval; the area is now a square 72 × 72 dp (inset + 18 dp, a 36 dp disc), pulled 8 dp into the panel's padding in the wide layout so "MG4" keeps + its line. **THEMES.md**: the twelve Overview styles, each with and without the navigation + (`screenshots/themes/`, 1920 × 720 from the emulator with sample values from a throwaway build, + never committed), with what inspired each and how it takes colour; linked from README.md + (Screenshots, Contents, Project documents) and AGENTS.md. Emulator: the round button, the + header with "MG4" on one line. Not tried on the car. - 2026-10-25 — App 2.35.1: **Aviation removed** (owner's choice: `AviationView`, its palette and string; a stored "AVIATION" opens Tiles). The Sci-fi palette for the app is now the lilac of the console frame's lower elbow (`scifi_lilac` #CC99CC) instead of the orange of the upper one. diff --git a/THEMES.md b/THEMES.md new file mode 100644 index 0000000..8431b6c --- /dev/null +++ b/THEMES.md @@ -0,0 +1,145 @@ +# Overview styles + +The Overview can look twelve ways: pick one under **Settings → Overview style**. Every style shows +the same readings (battery, range, power, speed, gear, usage, trip, climate, odometer, time) and +shows "—" for anything the car did not answer, never a made-up zero. + +Each style has two screenshots: with the navigation, and in the Overview's own full screen (the +button beside the MG4 logo; swipe in from the left edge to come back). They come from the test +emulator at the car's resolution with **sample values** (87 km/h in D, 76 %, 18.4 kW), since the +emulator has no car; on the car the values are live. + +**Colours.** Most styles are drawn in the accent colour you pick from the MG4 paints (Settings → +Accent colour; shown here in Dynamic Red). Retro and Terminal can also show their original +colours, and Sci-fi, Cartoon and Nixie tubes always do; while one of those is shown, the whole app +(navigation, buttons, switches) takes on its colours too. + +| Style | Look | Colours | +|---|---|---| +| [Tiles](#tiles) | the app's own cards | accent | +| [Gauges](#gauges) | analogue needles | accent | +| [Cockpit](#cockpit) | segment rings, power trace | accent | +| [Retro](#retro) | 80s fluorescent display | original or accent | +| [Futuristic](#futuristic) | holographic HUD, energy flow | accent | +| [Sci-fi](#sci-fi) | starship console | own | +| [Cartoon](#cartoon) | comic panels | own | +| [MG](#mg) | octagonal MG dials | accent | +| [Minimal](#minimal) | one big number | accent | +| [Terminal](#terminal) | green-screen shell | original or accent | +| [Nixie tubes](#nixie-tubes) | glowing glass tubes | own | +| [Chronograph](#chronograph) | a watch face | accent | + +## Tiles + +The app's original look, from the design it was forked from: glass cards on OLED black, one tile +per value, with the averages over the last five minutes and since the start, vehicle info (with +the lease allowance) and the tyre pressures on a little top view of the car. The most +information on one screen. + +![Tiles with the navigation](screenshots/themes/tiles-panel.png) +![Tiles, full screen](screenshots/themes/tiles.png) + +## Gauges + +Three round instruments with needles, like a classic analogue dashboard: power on the left, +speed in the middle, charge on the right (E to F), and a strip below with gear, climate, time, +usage and a small battery. The needles glide to new values instead of jumping. + +![Gauges with the navigation](screenshots/themes/gauges-panel.png) +![Gauges, full screen](screenshots/themes/gauges.png) + +## Cockpit + +After the digital clusters of modern EVs: rings of lit segments for battery, power and usage. +The power ring in the middle is centred on zero (regeneration lights up anticlockwise in green) +and carries the speed and gear inside it; along the bottom, a strip with the power of the last +two minutes. + +![Cockpit with the navigation](screenshots/themes/cockpit-panel.png) +![Cockpit, full screen](screenshots/themes/cockpit.png) + +## Retro + +An 80s digital dashboard: a vacuum fluorescent display behind smoked glass, as in the +digital-instrument cars of that decade. Slanted seven-segment digits with the unlit segments +faintly visible, bar graphs for charge and power, amber labels and a lit P R N D. In its original +turquoise (shown) or in the accent colour. + +![Retro with the navigation](screenshots/themes/retro-panel.png) +![Retro, full screen](screenshots/themes/retro.png) + +## Futuristic + +A holographic head-up display in hairlines: the battery as a capsule on the left, the speed in a +ring of dashes that turns with it on the right, and between them an energy channel in which +particles flow from the battery to the wheels while driving, and back in green while +regenerating, faster with more power. + +![Futuristic with the navigation](screenshots/themes/futuristic-panel.png) +![Futuristic, full screen](screenshots/themes/futuristic.png) + +## Sci-fi + +A starship console, after the look of the computer screens in 90s science-fiction TV: rounded +"elbow" frames in orange and lilac, pill-shaped labels, condensed capitals and blocky bar graphs +on black. Below 20 % charge the frames turn red: red alert. The app takes on the lilac of the +lower frame. + +![Sci-fi with the navigation](screenshots/themes/scifi-panel.png) +![Sci-fi, full screen](screenshots/themes/scifi.png) + +## Cartoon + +Comic panels in flat colours with thick ink outlines on a night-blue page: a battery with a face +(happy, unsure, then worried and sweating as it empties), a chunky speedometer whose needle +wobbles into place, and the "zap-o-meter" for power with a sound word: PURR, VROOM, ZOOM! or +RECHARGE! while regenerating. + +![Cartoon with the navigation](screenshots/themes/cartoon-panel.png) +![Cartoon, full screen](screenshots/themes/cartoon.png) + +## MG + +After the classic MG dashboards, whose dials sat in octagonal bezels: three octagonal dials with +chrome rims and cream scales (battery, speed, power), needles in the accent colour, and a line of +odometer, trip, usage, climate and time separated by small octagons. + +![MG with the navigation](screenshots/themes/mg-panel.png) +![MG, full screen](screenshots/themes/mg.png) + +## Minimal + +One number and almost nothing else: the speed, very large and thin, the gear above it, power as a +short line growing from the centre, and the battery as a hairline along the bottom edge. For calm +driving. + +![Minimal with the navigation](screenshots/themes/minimal-panel.png) +![Minimal, full screen](screenshots/themes/minimal.png) + +## Terminal + +As if a shell printed the car's state: `watch -n 0.2 vehicle-status` on a green-phosphor screen +with faint scan lines, each value on a row with an ASCII bar, the gear as `[D]`, and a prompt with +a blinking cursor. A low battery turns its row amber. In green (shown) or in the accent colour. + +![Terminal with the navigation](screenshots/themes/terminal-panel.png) +![Terminal, full screen](screenshots/themes/terminal.png) + +## Nixie tubes + +The glow of nixie tubes, the neon number displays of 50s to 70s lab instruments: orange digits in +glass tubes, the unlit numerals faintly behind the lit one, on a dark walnut panel with brass name +plates. Speed, gear and battery on top; power, range, usage and the time below. + +![Nixie tubes with the navigation](screenshots/themes/nixie-panel.png) +![Nixie tubes, full screen](screenshots/themes/nixie.png) + +## Chronograph + +A watch face, after a chronograph wristwatch: a deep-blue dial with a steel bezel carrying the +speed scale, the long main hand for the speed, sub-dials for battery, power and usage, and the +gear in a date window. Engraved columns either side carry range, trip, time, climate and +odometer. + +![Chronograph with the navigation](screenshots/themes/chronograph-panel.png) +![Chronograph, full screen](screenshots/themes/chronograph.png) diff --git a/app/build.gradle b/app/build.gradle index 503ef7d..693aac2 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -34,8 +34,8 @@ android { applicationId "com.stinnesbeck.nilsmg4" minSdk 27 targetSdk 36 - versionCode 136 - versionName "2.35.1" + versionCode 137 + versionName "2.35.2" // Nothing about the server ships in the APK: its URL and ingest token are entered in // the app's Server tab (ServerConfig), and the database is only reachable by the server. diff --git a/app/src/main/res/drawable/bg_fullscreen_button.xml b/app/src/main/res/drawable/bg_fullscreen_button.xml index 6544c2c..1d359c3 100644 --- a/app/src/main/res/drawable/bg_fullscreen_button.xml +++ b/app/src/main/res/drawable/bg_fullscreen_button.xml @@ -1,6 +1,7 @@ - - + + diff --git a/app/src/main/res/layout-w1000dp/activity_main.xml b/app/src/main/res/layout-w1000dp/activity_main.xml index 23b3359..9d12761 100644 --- a/app/src/main/res/layout-w1000dp/activity_main.xml +++ b/app/src/main/res/layout-w1000dp/activity_main.xml @@ -10,7 +10,7 @@ - + diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml index ad05550..d08e89f 100644 --- a/app/src/main/res/layout/activity_main.xml +++ b/app/src/main/res/layout/activity_main.xml @@ -17,7 +17,7 @@ - + diff --git a/screenshots/themes/cartoon-panel.png b/screenshots/themes/cartoon-panel.png new file mode 100644 index 0000000..e1d172e Binary files /dev/null and b/screenshots/themes/cartoon-panel.png differ diff --git a/screenshots/themes/cartoon.png b/screenshots/themes/cartoon.png new file mode 100644 index 0000000..87f277c Binary files /dev/null and b/screenshots/themes/cartoon.png differ diff --git a/screenshots/themes/chronograph-panel.png b/screenshots/themes/chronograph-panel.png new file mode 100644 index 0000000..704d236 Binary files /dev/null and b/screenshots/themes/chronograph-panel.png differ diff --git a/screenshots/themes/chronograph.png b/screenshots/themes/chronograph.png new file mode 100644 index 0000000..324260c Binary files /dev/null and b/screenshots/themes/chronograph.png differ diff --git a/screenshots/themes/cockpit-panel.png b/screenshots/themes/cockpit-panel.png new file mode 100644 index 0000000..69ecfa7 Binary files /dev/null and b/screenshots/themes/cockpit-panel.png differ diff --git a/screenshots/themes/cockpit.png b/screenshots/themes/cockpit.png new file mode 100644 index 0000000..344beab Binary files /dev/null and b/screenshots/themes/cockpit.png differ diff --git a/screenshots/themes/futuristic-panel.png b/screenshots/themes/futuristic-panel.png new file mode 100644 index 0000000..901036c Binary files /dev/null and b/screenshots/themes/futuristic-panel.png differ diff --git a/screenshots/themes/futuristic.png b/screenshots/themes/futuristic.png new file mode 100644 index 0000000..10fd94b Binary files /dev/null and b/screenshots/themes/futuristic.png differ diff --git a/screenshots/themes/gauges-panel.png b/screenshots/themes/gauges-panel.png new file mode 100644 index 0000000..ade65a4 Binary files /dev/null and b/screenshots/themes/gauges-panel.png differ diff --git a/screenshots/themes/gauges.png b/screenshots/themes/gauges.png new file mode 100644 index 0000000..56c79b7 Binary files /dev/null and b/screenshots/themes/gauges.png differ diff --git a/screenshots/themes/mg-panel.png b/screenshots/themes/mg-panel.png new file mode 100644 index 0000000..d893814 Binary files /dev/null and b/screenshots/themes/mg-panel.png differ diff --git a/screenshots/themes/mg.png b/screenshots/themes/mg.png new file mode 100644 index 0000000..9ed045f Binary files /dev/null and b/screenshots/themes/mg.png differ diff --git a/screenshots/themes/minimal-panel.png b/screenshots/themes/minimal-panel.png new file mode 100644 index 0000000..3026bb0 Binary files /dev/null and b/screenshots/themes/minimal-panel.png differ diff --git a/screenshots/themes/minimal.png b/screenshots/themes/minimal.png new file mode 100644 index 0000000..2afb6d7 Binary files /dev/null and b/screenshots/themes/minimal.png differ diff --git a/screenshots/themes/nixie-panel.png b/screenshots/themes/nixie-panel.png new file mode 100644 index 0000000..01db77c Binary files /dev/null and b/screenshots/themes/nixie-panel.png differ diff --git a/screenshots/themes/nixie.png b/screenshots/themes/nixie.png new file mode 100644 index 0000000..a5ea5d2 Binary files /dev/null and b/screenshots/themes/nixie.png differ diff --git a/screenshots/themes/retro-panel.png b/screenshots/themes/retro-panel.png new file mode 100644 index 0000000..51bd385 Binary files /dev/null and b/screenshots/themes/retro-panel.png differ diff --git a/screenshots/themes/retro.png b/screenshots/themes/retro.png new file mode 100644 index 0000000..2ef06ca Binary files /dev/null and b/screenshots/themes/retro.png differ diff --git a/screenshots/themes/scifi-panel.png b/screenshots/themes/scifi-panel.png new file mode 100644 index 0000000..034f83e Binary files /dev/null and b/screenshots/themes/scifi-panel.png differ diff --git a/screenshots/themes/scifi.png b/screenshots/themes/scifi.png new file mode 100644 index 0000000..b9c5843 Binary files /dev/null and b/screenshots/themes/scifi.png differ diff --git a/screenshots/themes/terminal-panel.png b/screenshots/themes/terminal-panel.png new file mode 100644 index 0000000..dde0fd1 Binary files /dev/null and b/screenshots/themes/terminal-panel.png differ diff --git a/screenshots/themes/terminal.png b/screenshots/themes/terminal.png new file mode 100644 index 0000000..115cd6b Binary files /dev/null and b/screenshots/themes/terminal.png differ diff --git a/screenshots/themes/tiles-panel.png b/screenshots/themes/tiles-panel.png new file mode 100644 index 0000000..caebcf1 Binary files /dev/null and b/screenshots/themes/tiles-panel.png differ diff --git a/screenshots/themes/tiles.png b/screenshots/themes/tiles.png new file mode 100644 index 0000000..a43c509 Binary files /dev/null and b/screenshots/themes/tiles.png differ