DroidPad
Build Android control interfaces for Bluetooth Low Energy, Bluetooth, WebSocket, MQTT, TCP, and UDP protocols for your project
Install / Use
/learn @UmerCodez/DroidPadREADME
Check out my new Android project WebsocketCAM It lets you access your device’s camera through a WebSocket client API, enabling real-time AI and computer vision processing on a live video stream.
<div align="center">
<img src="https://github.com/user-attachments/assets/0f628053-199f-4587-a5b2-034cf027fb99" height="80"> <img src="https://github.com/user-attachments/assets/6d0d2095-876c-4248-89d5-43b53ad21c35" height="80"> <img src="https://github.com/user-attachments/assets/f311c689-cfd1-4326-8e7d-323e2e117006" height="80">
Create Customizable Control Interfaces for Bluetooth Low Energy, Bluetooth, WebSocket, MQTT, TCP, and UDP Protocols with Simple Drag-and-Drop Functionality.
<img src="https://github.com/umer0586/DroidPad/blob/main/fastlane/metadata/android/en-US/images/phoneScreenshots/1.png" width="250" heigth="250"> <img src="https://github.com/umer0586/DroidPad/blob/main/fastlane/metadata/android/en-US/images/phoneScreenshots/3.png" width="250" heigth="250"> <img src="https://github.com/umer0586/DroidPad/blob/main/fastlane/metadata/android/en-US/images/phoneScreenshots/2.png" width="250" heigth="250"> <br> <img src="https://github.com/umer0586/DroidPad/blob/main/fastlane/metadata/android/en-US/images/phoneScreenshots/4.png" width="400" heigth="400"> <img src="https://github.com/umer0586/DroidPad/blob/main/fastlane/metadata/android/en-US/images/phoneScreenshots/5.png" width="400" heigth="400">
</div>Key Features:
-
Drag-and-Drop Control Pad Creation
Design your control pads by dragging and dropping components like buttons, sliders, switches, Joystick and D-PAD. -
Multi-Protocol Support and Seamless Server Connections
Easily configure your control pad to support network protocols such as Bluetooth LE, WebSocket (Client/Server), MQTT, TCP, and UDP. Once connected, you can interact with the control pad’s components—including buttons, sliders, switches, joysticks, and D-PADs—to send real-time commands directly to the connected server or BLE client, where these commands can be processed. -
Switch Connection Type Anytime
You can change the connection type of a control pad at any time without creating a duplicate for a different connection. -
Update UI From your Script
You can change the state of SWITCH,SLIDER,LED and GAUGE from your script
Supported Components
- Switch
- Button
- Slider
- DPAD
- Joystick
- Steering Wheel
- LED
- GAUGE
- LOG
- Accelerometer and Gyroscope (If supported by the device)
How It Works (4 steps)
Step 1: Create a Control Pad
Start by creating a new control pad. Provide a unique name to identify your control pad.
<img src="https://github.com/user-attachments/assets/b0bb34e6-d2ab-4245-ada9-19a8a030ebdc" width="240" height="426" /> <img src="https://github.com/user-attachments/assets/e2ff23e0-cf4c-4c97-820f-69ec1efa935b" width="240" height="426" />Step 2: Design Your Control Pad
After creating the control pad, click on the Build icon and use the drag-and-drop interface to add components like switches, buttons, and sliders etc.
<img src="https://github.com/user-attachments/assets/d501e0db-1c4e-426c-b71c-506b6ab497c5" width="240" height="426" /> <img src="https://github.com/user-attachments/assets/41d1044b-6fbb-4153-9d6c-e2ece02ad540" width="240" height="426" />Assign a unique ID to each component. This ID will be sent to the server during interactions.
<img src="https://github.com/user-attachments/assets/7bec11c8-3b00-4386-9990-13cfcc9576ef" width="240" height="426"/>Step 3: Configure Connection Settings
Tap 'Settings, choose a connection type (TCP, Bluetooth LE, UDP, WebSocket, or MQTT), enter the server address and port. You can switch between connection types anytime
<img src="https://github.com/user-attachments/assets/2105f61a-b3e8-42f7-ab8d-c266728efe0c" width="240" height="426" /> <img src="https://github.com/user-attachments/assets/cbadcd5b-b8ba-4708-9347-fc2bb95497c2" width="240" height="426" />Step 4: Connect and Interact
a. Click on the Play icon to start interacting with your control pad.
b. Tap the Connect button in the bottom-right corner to establish a connection with the server.
Reading Interactions
When users interact with the control pad, JSON-formatted or CSV messages are generated based on the type of component used. These string messages enable receivers to understand and process interactions sent from the control pad. Below are the formats and details for each interaction:
SWITCH
Toggling a switch generates the following JSON:
{
"id": "the id you specified",
"type": "SWITCH",
"state": true
}
For Bluetooth and Bluetooth LE connections, toggling a switch generates a CSV message in the format: <id>,SWITCH,<state>.
- The
statefield indicates whether the switch is on (true) or off (false).
BUTTON
Pressing or releasing a button generates this JSON:
{
"id": "the id you specified",
"type": "BUTTON",
"state": "PRESS"
}
For Bluetooth and Bluetooth LE connections, pressing or releasing a button generates a CSV message in the format: <id>,BUTTON,<state>.
- The
statefield can have following values:- "PRESS": When the button is being pressed (finger on the button).
- "RELEASE": When the button is released (finger lifted off after pressing).
- "CLICK": Indicates tap gesture
DPAD (Directional Pad)
Pressing or releasing a button on DPAD generates this JSON:
{
"id": "the id you specified",
"type": "DPAD",
"button": "RIGHT",
"state": "CLICK"
}
For Bluetooth and Bluetooth LE connections, pressing or releasing a button on DPAD generates a CSV message in the format: <id>,DPAD,<button>,<state>.
- The
statefield can have following values:- "PRESS": When the button is being pressed (finger on the button).
- "RELEASE": When the button is released (finger lifted off after pressing).
- "CLICK": Indicates tap gesture
- The
buttonfield can be "LEFT","RIGHT","UP" or "DOWN"
STEERING WHEEL
Rotating a steering wheel generates this JSON:
{
"id": "your id",
"type": "STEERING_WHEEL",
"angle": 45.233445
}
For Bluetooth and Bluetooth LE connections the CSV is <id>,STEERING_WHEEL,<angle>
- where
angleis rotation angle of the steering wheel in degrees- Positive values indicate clockwise rotation
- Negative values indicate counter-clockwise (anti-clockwise) rotation
JOYSTICK
Moving joystick handle generates this JSON:
{
"id": "the id you specified",
"type": "JOYSTICK",
"x": 0.71150637,
"y": -0.13367589
}
For Bluetooth and Bluetooth LE : <id>,JOYSTICK,<x>,<y>
Note : Joystick is not rotatable in the Builder Screen
The values of x and y range:
- From -1.0 to 1.0 for both axes.
- Positive x values indicate movement to the right, and negative values indicate movement to the left.
- Positive y values indicate upward movement, and negative values indicate downward movement.
SLIDER
Dragging the slider thumb generates the following JSON:
{
"id": "the id you specified",
"type": "SLIDER",
"value": 1.4
}
For Bluetooth and Bluetooth LE connections, dragging the slider thumb generates a CSV message in the format: <id>,SLIDER,<value>.
- The
valuefield represents the current position of the slider. - The value is always within the range of the minimum and maximum values specified during the slider's configuration.
LED
To update the LED, send the following JSON message to the app:
{
"id": "the id you specified",
"type": "LED",
"state": "ON"
}
-
stateaccepts the following values:"ON"– Turns the LED on"OFF"– Turns the LED off"BLINK"– Makes the LED blink
🎥 Video Demo | Changing LED state in DroidPad
GAUGE
To update the Gauge, send the following JSON message to the app::
{
"id": "the id you specified",
"type": "GAUGE",
"value": 120
}
valueis a number input used to update the gauge reading (such as speed, temperature, or progress).
🎥 Video Demo | Updating GAUGE value in DroidPad
LOG
Each control pad includes an associated log terminal that displays logs sent from your script.
When you click the list icon on the control pad, a bottom sheet will appear showing these logs.
To send a log message from your script, use the following JSON payload:
{
"type": "LOG",
"message": "hello world"
}
Sensor Readings
. Overview The canvas tool lets you present web content on any connected node's canvas view. Great for: -
node-connect
334.1kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
82.1kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
334.1kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
