Hello Moto 360 from Delphi XE7

I really like my Moto 360 watch. It looks fabulous, and does great as an extension of my Android phone, but of course the most important question is how to make an app for it. Turns out it just works with RAD Studio X7, Delphi or C++. Thanks to the new FireUI Multi-Device designer I can actually create a custom view in the UI to make designing the perfect user interface a breeze. Here are some of the details of what I discovered along the way, followed by a download of my sample and the custom view.

The bottom line is it just works, which really isn’t a surprise. Most new Android devices use ARMv7 and the NEON instruction set. (NEON is kind of like the MMX standard on the Intel platform. At first not everyone used those instructions, but once they caught on, everyone did.) So it is no surprise that the Moto 360 does too. Unlike some of the other watches, the Moto 360 does not have a micro USB port. So you have to use ADB over BlueTooth. This requires a few extra steps to setup, and is really slow to deploy over. So slow I canceled the first two deployments because I thought I set something up wrong.

First of all, the Moto 360 display is not perfectly round. It has a flat area on the bottom. If you look closely you can see the light sensor there. Not sure if that was why it wasn’t round, or if there was another design reason. In any case, the screen resolution is 320 x 290 pixels at 213 Pixels Per Inch. This means at design time you have a usable area of 240 x 218 pixels. This is the information we need to create a custom view. Just put the following code in a package.

  TDeviceinfo.AddDevice(TDeviceinfo.TDeviceClass.Tablet, ViewName,
    // The Moto360 is 320x290 phyiscal and 240x218 logical with 213 PPI
    TSize.Create(320, 290), TSize.Create(240, 218),
    TOSVersion.TPlatform.pfAndroid, 213,
    True); // Exclusive

The Device class enumeration actually has a Watch class, but looking in the code that detects the class at runtime and it doesn’t know how to detect a watch yet. So it defaults to Tablet. It makes sense if you think about the fact that XE7 was released before the Moto 360. I imagine an update will address this.

The requirement to get the custom view to show up in the IDE is you need to update the XML file found at %AppData%\Roaming\Embarcadero\BDS\15.0\MobileDevices.xml to reference the new view. Inside the MobileDevices element, add the following:

  <MobileDevice>
    <Displayname>Moto360</Displayname>
    <Name>Moto360</Name>
    <DevicePlatform>3</DevicePlatform>
    <FormFactor>2</FormFactor>
    <Portrait Enabled="True" Width="240" Height="218" Top="102" Left="29" StatusbarHeight="0" StatusBarPos="0" Artwork="C:\Users\jim\Documents\Embarcadero\Studio\Projects\HelloMoto360\Moto360.png" />
    <UpsideDown Enabled="False" Width="240" Height="218" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" />
    <LandscapeLeft Enabled="False" Width="240" Height="218" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" />
    <LandscapeRight Enabled="False" Width="240" Height="218" Top="0" Left="0" StatusbarHeight="0" StatusBarPos="0" Artwork="" />
  </MobileDevice>

You’ll need to update the path to that Artwork to point to the correct location of the PNG on your system. Or you can just leave it blank. Here is what it all looks like when setup in the IDE.

You’ll notice a red circle on the design surface. I added this to see where the corners are (since the display is round). At runtime you can just barely see the red if you hold the watch right. In production I’d hide this at runtime. I placed the TCircle at -1, -1 and set the size to 242 x 242. This way the circle follows the bezel and not the display area of the screen. I suppose if I bumped it out another pixel it would disappear completely at runtime.

To get the Moto 360 to show up as a target device you first need to enable Bluetooth debugging.

1. Hold the side button in until Settings appears
2. Swipe down to About and tap it.
3. Tap on build number until it tells you that you are a developer.
4. Swipe back to settings and then tap on Developer options.
5. Tap on ADB Debugging until it says Enabled.
6. Tap on Debug over Bluetooth until it says Enabled.
7. On your paired phone, go into Android Wear settings (gears in the upper right)
8. Enable Debugging over Bluetooth.
   1. It should show
      • Host: disconnected
      • Target: connected
   2. Target is the watch, Host is your computer.

Then you connect your phone that is connected to the Moto 360 via USB and run the following commands (assuming ADB is on your system path) to connect via Bluetooth. I made a batch file.

 @echo off
 REM optional cleaning up
 adb disconnect localhost:4444
 adb -d forward --remove-all
 REM this is the connection
 adb -d forward tcp:4444 localabstract:/adb-hub
 adb -d connect localhost:4444
 REM these lines are to see if it worked
 echo Here is the forwarded ports . . . .
 adb forward --list
 echo.
 echo Wait a second for it to connect . . . .
 pause
 adb devices

The ADB Devices list should show something like

List of devices attached 
123456abcd device 
localhost:4444 device

Now the Android Wear app on your phone should show

• Host: connected
• Target: connected

Be sure that your Moto 360 app uses the unit that defines the Moto 360 device (from your package). This way your app can select it at runtime. If you do all that, you’ll see something similar to this with it running on the Moto 360:

My camera had a hard time focusing on it, but rest assured it looks fabulous! I tried C++ too, and no surprises, it works as well. More experimenting to do, but it is nice to know I have a tool that will take me everywhere I want to go.

If you don’t have a Moto 360, you can setup an Android emulator (AVD) instead. I did that before mine showed up. You need to download the Android 4.4W (API20) SDK Platform and ARM System image.

Then create an AVD with the new Emulator.

It actually gives you the rectangle screen with a round bezel. Also it is 320 x 320 (so completely round) and 240 PPI. This means the view I created (since it was exclusive) won’t work on the emulator. You’ll need to create a new custom view for the emulator, but I’ll leave that up to to.

you can download all of my code for the custom view, Bluetooth ADB batch file, and sample apps from Github. (Update: Added a view for Galaxy Gear Live & LG-G) BTW, XE7 adds local Git support, which is another great new feature. Download the trial and check it out.