Skip to content

new GUI design and and change the overlay dot outlook#23

Merged
ganzvu merged 8 commits into
mainfrom
gui-revamp
Jun 10, 2026
Merged

new GUI design and and change the overlay dot outlook#23
ganzvu merged 8 commits into
mainfrom
gui-revamp

Conversation

@Mark21022007

Copy link
Copy Markdown
Collaborator

DriveSwipe: GUI Revamp Overview

This document provides a detailed overview of the design enhancements and architectural changes introduced in the gui-revamp branch compared to the stable main branch.


1. Hero Start/Stop Button Redesign

The core action interface on the Home Screen has been updated for a modern, automotive-inspired dashboard aesthetic.

Feature main Branch gui-revamp Branch
Labels Had explicit text labels ("START" / "STOP") below the icon. Text labels removed to clean up the layout and focus purely on visual cues.
Icon Size Compact size (60.dp). Hero size (100.dp), making the power symbol the primary visual target.
Orientation The power circle arc opening was upside down (gap at the bottom). Corrected the sweep angle (startAngle = -60f) to orient the gap symmetrically at the top.

2. Dynamic HUD Pill Status Overlay

The floating overlay, which acts as a heads-up display (HUD) for background gesture detection, has been completely overhauled from a simple colored dot to a fully interactive component.

graph TD
    A[Neutral State: 28dp Dot] -->|Gesture Detected| B[Smooth Dynamic Expansion]
    B --> C[Expanded Pill: 220dp x 36dp]
    C -->|Show Action & Gesture Name| D[Auto-Collapse after 2 seconds]
    D -->|Smooth Resize| A
Loading

Key Improvements:

  • Interactive Dragging: The overlay is now touch-responsive. Users can drag and position the overlay anywhere on their screen.
    • Code change: Implemented onTouchEvent dragging logic in StatusOverlayView.kt and removed FLAG_NOT_TOUCHABLE in GestureService.kt to intercept touch inputs.
  • Expanding Layout Animation: The overlay now animates smoothly using a DecelerateInterpolator from a neutral 28.dp circle to an expanded 220.dp x 36.dp capsule when a gesture is recognized.
  • Sleek Glassmorphic Styling: Replaced the plain solid color container with a premium semi-transparent round-rect (bgPaint) with a thin white border (borderPaint).
  • Active Status Details: Displays the triggered Android action (e.g. "VOLUME UP") alongside the mapping gesture name (e.g. "THUMB UP") inside the expanded pill next to a glowing cyan active dot indicator.

3. Settings Cockpit Card Optimization

The configuration settings UI has been consolidated using Bento-box layouts to improve information density.

  • Unified Telemetry Display: A new "cockpit card" layout has been added, grouping tuning presets, sensitivity factors, and background service flags into organized cards rather than long vertical lists.

4. Theme & Color System Updates

We aligned the color constants with a high-fidelity dark neon palette:

  • Teal Neon Theme: Swapped standard colors for stylized teal shades (AccentCyan = Color(0xFF57F1DB) and AccentSteel = Color(0xFF3CDDC7)).
  • Consistent Semantic Colors: Mapped state flags like ALERTING to Safety Amber (0xFFFF9100) and ACTIVE to Cyan (0xFF57F1DB).

5. Unit & UI Test Adjustments

To support the updated model definitions, overlay mappings, and revised gesture configs:

  • Updated AppSettingsTest.kt and DriveSwipeModelsTest.kt to reflect correct key configurations and verify gesture mapping stability.

@Mark21022007 Mark21022007 self-assigned this Jun 10, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR implements a GUI revamp across the app, including a redesigned Home “engine” control, refreshed theme/colors, and an upgraded gesture-status overlay that expands from a neutral dot into an informational HUD pill during gesture events.

Changes:

  • Reworked Home/Settings/History Compose UI styling (glassmorphic cards, hero power icon/button, bottom navigation, cockpit card).
  • Upgraded the overlay from a static dot to a draggable, animated expanding pill that displays action + gesture confirmation.
  • Updated default gesture mapping expectations in unit tests and adjusted platform/config details (Gradle property, system bar theming, Routine trigger activity manifest flags).

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
UX_VALIDATION_CHECKLIST.md Removed UX validation checklist document.
handoff.md Removed project handoff document.
gradle.properties Commented out local org.gradle.java.home override.
app/src/test/java/com/example/driveswipe/DriveSwipeModelsTest.kt Updated assertions for new default gesture mappings.
app/src/test/java/com/example/driveswipe/AppSettingsTest.kt Updated assertions for new default gesture mappings.
app/src/main/java/com/example/driveswipe/ui/theme/Theme.kt Updated system status/navigation bar colors and icon appearance settings.
app/src/main/java/com/example/driveswipe/ui/theme/Color.kt Updated palette to teal-neon scheme and adjusted semantic colors.
app/src/main/java/com/example/driveswipe/StatusOverlayView.kt Implemented expanding pill HUD, glass styling, and drag handling for overlay.
app/src/main/java/com/example/driveswipe/GestureService.kt Enabled overlay touch interaction and wired gesture confirmation details into overlay.
app/src/main/java/com/example/driveswipe/DriveSwipeApp.kt Major Compose UI redesign (GlassCard, BottomNavBar, hero power icon, cockpit card).
app/src/main/AndroidManifest.xml Changed RoutineTriggerActivity task/launch configuration and theme.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +47 to +51
private var currentWidthDp = NEUTRAL_SIZE_DP
private var currentHeightDp = NEUTRAL_SIZE_DP
private var expanded = false
private var displayText = ""
private var displaySub = ""
Comment on lines 68 to 72
fun setState(state: EngineState) {
if (expanded) return // Keep expanded visible during gesture animations
pulseAnimator?.cancel()
pulseAnimator = null
alpha = 1f
Comment on lines +141 to +147
private fun collapse() {
expanded = false
animateLayout(NEUTRAL_SIZE_DP, NEUTRAL_SIZE_DP) {
// Restore proper status color state
invalidate()
}
}
Comment on lines +102 to +107
fun showGestureConfirmation(gestureName: String, actionName: String) {
pulseAnimator?.cancel()
val prevColor = dotColor
val prevAlpha = alpha
transitionAnimator?.cancel()
removeCallbacks(collapseRunnable)

dotColor = Color.WHITE
alpha = 1f
invalidate()
expanded = true
Comment on lines +47 to +49
android:taskAffinity=""
android:launchMode="singleInstance"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
@ganzvu ganzvu merged commit f131002 into main Jun 10, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Overlay dot being too simple GUI Revamp PT.2

3 participants