1. Skateboard Control UI Design

Accelerate

• Design: A large, easily accessible button or slider, preferably near the bottom or center of the screen for thumb access.
• Functionality: When pressed, it gradually increases the motor’s power. A visual feedback (like a bar or dial) shows how much power is being delivered to the wheels. The UI can feature an acceleration curve that gives a smoother user experience.
• Additional Features: Add a visual confirmation, like a pulsing animation or changing colors (green for active), to indicate acceleration is in progress.

Decelerate

• Design: Positioned close to the accelerate button for easy toggling. You could use a slider, where sliding up accelerates and sliding down decelerates.
• Functionality: When the decelerate button is pressed, the app reduces speed smoothly. A braking indicator (e.g., a bar or lights dimming) can give feedback on braking intensity.
• Additional Features: Integrate a “regen braking” indicator that shows if energy is being returned to the battery during deceleration.

Reverse (Boolean)

• Design: A toggle switch or button to flip between forward and reverse modes. The design can show a directional arrow that flips based on the mode.
• Functionality: If set to true, the skateboard will move backward. There should be a safety mechanism like a double-tap or hold-to-confirm to avoid accidental reversing. A sound alert or vibration can indicate when reverse mode is activated.

Recall (Return to Me)

• Design: This could be a prominent button at the top or center of the UI, designed with an icon like a home or an arrow pointing back. Use bold colors to differentiate it from other controls.
• Functionality: When tapped, the app initiates the pathfinding algorithm to return the skateboard to the user. A progress bar or map overlay can show the skateboard's real-time movement on a map, along with ETA and distance.
• Additional Features: Display warnings if the path is blocked or if the skateboard is too far to return, and integrate voice alerts or notifications to keep the user updated.

2. Real-time Data UI Design

Battery Life

• Design: A clear, prominent indicator, possibly a battery icon with percentage remaining displayed next to it. Use colors like green (high), yellow (medium), and red (low) to show battery status.
• Functionality: The indicator updates in real time, with warnings (e.g., vibration, sound alerts) when battery life is critically low. You could also display how many miles or minutes of riding are left based on the current usage.

Speed (Speedometer)

• Design: A central speedometer with a digital readout of current speed, along with a needle indicating speed levels.
• Functionality: Updates in real-time based on acceleration and deceleration inputs. Show the maximum speed reached during the trip for reference. Integrate speed limits or warnings when approaching maximum safe speed.

Trip Details (In One Trip)

• Design: A dashboard or tab showing trip statistics like distance traveled, average speed, time elapsed, and start/end points.
• Functionality: Each trip's data is tracked and displayed after the trip is completed. You could also include a “trip history” view to compare different rides. Incorporate a “Pause Trip” button in case the user stops midway but wants to resume.

Environmental Impact

• Design: A visual gauge or bar that represents CO2 savings or the environmental benefits of using an electric skateboard versus traditional gas-powered travel.
• Functionality: This can display cumulative environmental impact over time or for each trip, with fun graphics (like trees saved or gas emissions avoided). You could use a progress bar that shows milestones for reduced carbon footprint and achievements.

Data Retrieval for Skateboard Web App Components

1. Skateboard Control:

The skateboard control features like Accelerate, Decelerate, Reverse, and Recall require data input and feedback from hardware components.

• Data Source:

• The skateboard control commands (accelerate, decelerate, reverse) are sent from the web app via a wireless communication module (such as Bluetooth, Wi-Fi, or RF) to the motor controller (e.g., VESC or similar).
• The motor controller will process the input and control the motors accordingly. The real-time feedback on speed and motor status is sent back to the web app for display.
• For the Recall (Return to Me) feature, the skateboard would rely on GPS data to determine its current location and navigate a path back to the user. The pathfinding algorithm might run on a microcontroller (Arduino or similar) onboard the skateboard.

2. Real-time Data:

Battery Life:

• Data Source:

• The skateboard’s Battery Management System (BMS) will monitor battery health, voltage, and charge level. This data is then transmitted to the web app in real time, allowing the app to display the battery percentage and trigger low-battery warnings.

Speed (Speedometer):

• Data Source:

• The real-time speed data is gathered using the motor encoder or speed sensor attached to the wheels or the motor. The VESC (or similar motor controller) calculates the speed based on the rotation of the wheels and sends this data to the web app via a wireless connection.

Distance Traveled (In One Trip):

• Data Source:

• The distance is calculated by using the data from the speed sensor or motor encoder in combination with GPS data. The app tracks the total distance based on wheel rotations or the geographical movement of the skateboard from point A to point B.

Environmental Impact:

• Data Source:

• The environmental impact data can be calculated by the app based on a comparison between energy consumption (from the battery and motor data) and the CO2 emissions that would have occurred using a gas-powered vehicle. This could be a pre-defined algorithm, or you could use third-party APIs that estimate environmental impact based on travel distance and type of vehicle replaced.

Design and Functionality for the Connection Page

1. Connection Page Components:

Scan for Devices:

• Function: This button or component allows the app to scan for available electric skateboards within range.
• Design: A prominent button labeled "Scan for Skateboard" that initiates a scan for Bluetooth or Wi-Fi devices. You can display a loading spinner or animation while scanning.
• Feedback: After scanning, the app displays a list of nearby skateboards (or devices), showing their names and signal strength (if applicable).

Select Device to Connect:

• Function: Once the scan is complete, the user can select their skateboard from a list of devices.
• Design: A list or grid of devices with names and possibly icons showing connection strength. Each skateboard might have a label like "Skateboard [Model]" or a custom user-defined name.
• Feedback: Once the user selects a skateboard, it tries to establish a connection and displays "Connecting..." with a loading indicator.

Connection Status:

• Function: The app should show whether the connection is successful.
• Design: Once connected, display a success message (like "Connected to Skateboard [Model]") along with an option to disconnect if needed.
• Feedback: If the connection fails, show an error message with troubleshooting options (e.g., "Connection failed. Retry or check your skateboard’s Bluetooth/Wi-Fi").

Auto-reconnect Feature (Optional):

• Function: Once a device is paired, the app can remember the skateboard for future sessions, automatically reconnecting when the app is reopened.
• Design: A toggle switch on the connection page for enabling or disabling auto-reconnect. A brief message can indicate that auto-reconnect is enabled after a successful connection.

2. Connection Page Flow:

1. Initial State (Not Connected):

• A message prompts the user to connect to their skateboard with a "Scan for Skateboard" button.
• A brief description explains the need to connect before controlling the skateboard.

2. During Scan:

• The page shows a loading animation or spinner, with text like "Scanning for nearby skateboards..."
• A cancel button is available if the user wants to stop the scan.

3. After Scan (List of Devices):

• The page displays a list of detected skateboards, along with an option to select the correct one.
• If no devices are found, provide a message like "No devices found. Ensure your skateboard is powered on."

4. Connection Success:

• The app confirms a successful connection with a visual indicator (like a checkmark) and transitions to the main control screen or dashboard.
• The connection status (connected, disconnected) could always be visible in the app’s header.

5. Connection Failure:

• Display an error message explaining what went wrong, with options to retry or access troubleshooting steps.
• A button allows the user to return to the scan page.

How the Web App Retrieves Data

• The web app communicates with the skateboard’s onboard systems through a wireless module like Bluetooth, Wi-Fi, or LoRa (depending on range and environmental needs).
• For controls and real-time data, the app sends commands and retrieves feedback from:

• Motor controllers (e.g., VESC) for speed, motor direction, and acceleration.
• Battery Management System (BMS) for battery life.
• GPS Module for location data (especially for the Recall feature and distance tracking).
• Encoders/speed sensors for speed and distance traveled.

• The app could also integrate a cloud-based server or local storage to track trip data, environmental impact, and overall skateboard health over time.

Skateboard control

• Accelerate - Speeds up the wheels
• Decelerate - Slows down the wheels
• Reverse - Boolean, decides whether the wheels spin forwards or backwards
• Recall - Starts the return to me pathfinding

Real-time data

• Battery life
• Speed → speedometer
• In one trip

• Maybe distance traveled
• Environment impact