DigiTekXplorer - The Gemini Prompt

At the start of the app creation process, Gemini was "asked" if it could generate Android app code from an image of a User Interface (UI).  Gemini's response was:

" 

• No. My primary input modality is text. While multimodal models exist (like GPT-4 with Vision, Gemini, etc.), the standard interface I'm operating under right now is text-based. I cannot "see" an image file uploaded directly in this chat interface in the same way a human uses a file upload button."

Gemini suggested a detailed text-based description of the app's UI should be used instead.  Gemini needed details like layout, components, colors, text, and functionality. 

The following a list of items needed to help build an Android app:

1. Describe the Layout Structure:

Overall Arrangement: Is it a vertical list of items (like a Column), a horizontal row of items (like a Row), or a more complex grid-like structure?

Nesting: Are there sections within sections? For example, a Column containing Rows, or a Box with elements positioned inside it.

Scrolling: Is any part of the UI scrollable (like a LazyColumn or LazyRow)?

2. Describe the UI Elements:

Text: How many text elements are there? What is the content of each? Are they headings, labels, or body text?

Buttons: How many buttons? What are their labels? What should happen when they are clicked?

Input Fields: Are there any text input fields? What kind of input do they take (text, numbers, email, etc.)?

Images: Are there any images? Are they static or dynamic?

Sliders/Progress Bars: Are there any sliders or progress bars? What do they represent?

Checkboxes/Radio Buttons: Are there any checkboxes or radio buttons?

Other Elements: Describe any other UI elements you see (e.g., dropdowns, date pickers, etc.).

3. Describe the Spacing and Alignment:

Padding: Is there padding around the edges of the UI or around specific elements?

Spacing: How much space is there between elements?

Alignment: How are elements aligned (left, right, center, top, bottom)?

4. Describe the Behavior:

Interactions: What happens when the user interacts with the UI (e.g., clicks a button, types in a field, moves a slider)?

Dynamic Content: Does any of the content change based on user input or other factors?

The following is a copy of the text placed in Gemini's Prompt entry field to generate Kotlin code for the BLE B_Bot Controller App:

I want to build an Android app using Android Studio that communicates with a Raspberry Pi Pico W via Bluetooth Low Energy (BLE).  I already have code working on the Raspberry Pi Pico W that will accept BLE commands from an Android phone. The BLE commands are three ASCII lower case characters. If a comma follows the three-character command, a numerical parameter associated with the command is included. A return terminates the command input from the Android phone user. These are the two possible command formats:

1. ccc: Three ASCII lower case characters (e.g., "fwd”, “hlt”, ”rgt”), and command terminated with a return

2. ccc,NN: Three ASCII characters, a comma separator, an x-digit decimal number (e.g., “4”, “56”, “125”), and command terminated with a return

The app code shall be in Kotlin using composable UI items. No deprecated Android functions shall be used. Do not use any Java deprecated functions.

Use an Android Studio project name of: “BLE_proj9”.

The project should be divided into the following files:

• MainActivity.kt: The main activity of the app, responsible for displaying the UI and handling user interactions.
• BleApp.kt: A class that manages the BLE connection and communication with the Raspberry Pi Pico W.
• BleManager.kt: A class that handles the BLE scanning, connection, and communication.
• BleViewModel.kt: A view model that provides data and functionality to the UI.

The application must function correctly on Android 12 (API Level 31). Make sure no deprecated functions are used in the app code.

I want to have the ability to scan for BLE devices and select the correct Pico device for this application.

If the connection fails, display a Snackbar with the message 'Failed to connect to the Pico. Retrying...' and automatically retry the connection after 5 seconds.

I want to build an Android UI with the following layout structure, UI elements, spacing and alignment, and app behavior:

The app User Interface (UI) shall be arranged as one column, ten rows, and a top bar. 

The top bar heading shall have the text “BLE B_Bot Controller”. The top bar text shall be centered horizontally. 

Use Jetpack Compose code to implement this UI.

First UI row: One item on this row. A button with text “Scan”. The button shall be placed at the upper right-hand corner of the UI. When the Scan button is pressed a list of possible BLE devices, and their MAC address shall be displayed. When the user selects one of the devices, in our case a Pico device, the BLE shall attempt to connect to the device. When the app connects to the Pico, display 'Connected' in a Text view at the bottom of the screen. If the connection fails, display 'Connection Failed' in red. If the connection fails, display a Snackbar with the message 'Failed to connect to the Pico. Retrying...' and automatically retry the connection after 5 seconds.

Second UI row: Two items on this row. The two items shall be left-aligned with spacing between the items. A text entry item for commands from the Android phone to the Pico. Next to the text entry to the right is a button with text “Send Cmd”. When the button is pressed the phone’s BLE shall send the ASCII characters in the text entry to the Pico.

Third UI row: Two items on this row. The two items shall be left-aligned with spacing between the items. A text entry item for messages from the Android phone to the Pico. Next to the text entry to the right is a button with text “Send Msg”. When the button is pressed the phone’s BLE shall send the ASCII characters in the text entry to the Pico.

Fourth UI row: Three items on this row. The three items shall be left-aligned with spacing between the items. A slider with input from 0 to 10. Next to the right is a text field displaying the value of the slider. Next is a button with text “Speed”. When the speed button is pressed the phone’s BLE shall send an ASCII command with the following format: “spd,NNN” where NNN is the value displayed in the text box.

Fifth UI row: Three items on this row. The three items shall be left-aligned with spacing between the items. A slider with input from 0 to 180. Next element to the right is a text field displaying the value of the slider. Next is a button with text “Turn Angle”. When the turn angle button is pressed the phone’s BLE shall send an ASCII command with the following format: “trn,NNN” where NNN is the value displayed in the text box.

Sixth UI row: One item on this row. A button with text “Forward”. The button shall be centered horizontally. When the forward button is pressed the phone’s BLE shall send an ASCII command with the following format: “fwd”.

Seventh UI row: Three buttons on this row. The first button has text “Left”. The three buttons shall be centered horizontally with spacing between the buttons. When the left button is pressed the phone’s BLE shall send an ASCII command with the following format: “lft”. The second button has text “Halt”. When the left button is pressed the phone’s BLE shall send an ASCII command with the following format: “hlt”. The third button has text “Right”. When the left button is pressed the phone’s BLE shall send an ASCII command with the following format: “rgt”.

Eighth UI row: One item on this row. A button with text “Reverse”. The button shall be centered horizontally. When the forward button is pressed the phone’s BLE shall send an ASCII command with the following format: “rev”.

Ninth UI row: Two items on this row. Display a Pico HB count in a Text field labeled 'HB Count:’.  To the right of the text field place a button with text “Update”. When the “Update” button is pressed, the Android app shall send a request to the Pico asking for the value of the HB count. Only request the value of the HB count from the Pico when the button is pressed. After receiving the Pico HB count, update the value in the Text field.

Tenth row: This row shall have four elements.  The first is a text element with “LED Status”. The next element shall display the latest value, either “on” or “off”, that is read from the Pico.  The third element shall be a button with text “On”.  When the “On” button is pressed, the Android app shall send the ASCII characters “on” to the Pico. The Android app shall also send a request to the Pico asking for the LED status.  After receiving the LED status, update the status in the Text field. The fourth element shall be a button with text “Off”. When the “Off” button is pressed, the Android app shall send the ASCII characters “off” to the Pico. The Android app shall also send a request to the Pico asking for the LED status. 

The LED status shall only be requested from the Pico when the “On” or “Off” buttons are pressed. Do not overwhelm the Pico with too many requests. After receiving the LED status, update the value in the Text field. The elements on this row shall be left-aligned.

When the user exits the BLE app, the app shall disconnect the BLE from the Pico device. A message shall be displayed saying “Disconnected” before the app exists.

The Raspberry Pi Pico W is programmed to advertise the following Services and Characteristics:

Pico BLE Services and Characteristics

PRIMARY_SERVICE, GAP_SERVICE

CHARACTERISTIC, GAP_DEVICE_NAME, READ, "PICO_SERVER"

PRIMARY_SERVICE, GATT_SERVICE

CHARACTERISTIC, GATT_DATABASE_HASH, READ

See Pico code for B_Bot server Characteristics.