Car Control User Interface

Car Control User Interface

The Car Control User Interface

As soon as u access the Car Control UI the app is programmed to automatically connect to the broker that the car is also connected to. If there's no connection the camera will not display an image and you will get an error message letting you know connection failed. However if you successfully connect you will be given a pop up message telling you that you've successfully connected to the MQTT. But this does not necessarily mean the car is connected. Once the car has been connected to the app, the app will then display the camera footage.

The UI looks like this:

Control Pad

To control and drive the car we will be using the control pad:

The four navigation buttons highlighted in red:

• 🔼/🔽 : Forward/Reverse buttons.
  • Pressing 🔼 will make the car drive forward at 10% speed. Pressing the button more than once will increment the speed to a max of 10 levels based on the speed limiter.
  • Pressing 🔽 will make the car drive backwards at 10% speed. Pressing the button more than once will increment the speed to a max of 10 levels based on the speed limiter.
• ◀️/▶️ : Left/Right buttons.
  • Pressing ◀️ will make the car start turning left. Pressing the button more than once will make the turning more aggressive based on incrementing. There are 10 levels.
  • Pressing ▶️ will make the car start turning right. Pressing the button more than once will make the turning more aggressive based on incrementing. There are 10 levels.

The three smaller buttons with symbols highlighted in orange:

• The ✖️ symbol will break the throttle and stop the car.
• The two ➖ symbols underneath the Left/Right buttons will neutralize the steering angle.

Speed & Angle Meter

The speed display, highlighted in red:

• Will display the speed of the car. The value displayed is based on maximum throttle of the car motor.

The steering angle display, highlighted in green:

• Will display the steering angle of the car. The value displayed is the level of angle the car is turning and it will go up to 10.

Speed Limiter Editor

Getting access to the Speed Limiter Editor window

• By pressing the icon of the Speed Meter a pop up window will appear where the user can edit and change the speed limit of the car for both forward and reverse directions.

Orientation Changing Button

The button highlighted in red:

• If you click on the button you will change the orientation of the screen between portrait and landscape.

The window in portrait:

The window in landscape:

note: The reason why we added it as a button instead of an automatic sensor is because it could be a bit problematic if the screen changes erratically due to the orientation of the device being changed. So we made a solution where the screen's orientation is based on the click of a button rather than automatic sensing from the device's orientation.

Power ON & OFF Button and Indicator

The Power Buttons

• Right next to the forward button we can find the power buttons. Pressing respective button will either turn on(green) or off(red).

The Indicator:

• In the top right corner there's a power indicator that will show the user if the car is currently on or off based on color. Green for ON. Red for OFF.