Developing the Internet of Things: Motorola Moto 360

The Multi-Device revolution is now in full swing and so is the Internet of Things. Wearable devices are at the forefront of this expansion with products like the Apple Watch, FitBit, Samsung Gear and the Motorola Moto360. These devices interface your smart phone with the wide world of devices through connected apps. Get your apps on the latest devices with Appmethod!

In this tutorial learn how the all-new FireUI Multi-Device Designer empowers developers to extend their existing applications to the Moto360.

In my previous blog post I covered an introduction to the FireUI Multi-Device Designer. In this tutorial, we will extend the Multi-Device Designer by creating a custom view for the Moto360.

Step 1: Create a Custom View for the Moto360

Update MobileDevices.xml

The MobileDevices.xml file needs to be updated for a new custom view to show up and be usable in the Appmethod IDE. It can be found at %AppData%\Roaming\Embarcadero\BDS\15.0\MobileDevices.xml

Inside MobileDevices.xml the available views are listed as MobileDevice elements. To add the new Moto360 custom view, find the root node MobileDevices and add the following XML as a child.

<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>

 Restart the Appmethod IDE.

Note that the Artwork attribute of the Portrait element points to the graphic file used to simulate the Moto360. Any image type can be used but PNG is a preferred format as it is lossless and contains an alpha channel for transparency. Save the below image to your project folder and point to it from within the above MobileDevices.xml file.

Design Time Moto360

In order to map the screen of the Moto360 into the Form Designer in the Appmethod IDE we need to create a package that contains the device specific resolution.

The Moto 360 has a physical screen resolution of 320x290 pixels at 213 pixels per inch. Because of the rounded screen not all of these pixels are available to the developer. Useable screen real estate is the difference between design pixels and physical pixels.

What exactly is a design pixel? 

According to this Android developer guide density-independent pixels are equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

So, the actual usable screen real estate in design time for the Moto360 is 240x218 pixels.

To create the custom view package for the Moto360, click File->New->Package C++

This will add Package1.bpl to the Project Manager.

Right click on Package1.bpl and rename it to Moto360View. Next add a new unit file to this package by right clicking on Moto360View and select Add New -> Unit – C++. Rename Unit1.cpp as Moto360ViewUnit.cpp. Double click on this new unit to open it up on the code editor and ensure the file contains the following:

//---------------------------------------------------------------------
#pragma hdrstop
#include "Moto360ViewUnit.h"
#include <System.Devices.hpp>
//---------------------------------------------------------------------
#pragma package(smart_init)
void initdevice() {
        // The Moto360 is 320x290 phyiscal and 240x218 logical with 213 PPI
    TDeviceInfo::AddDevice(
        TDeviceInfo::TDeviceClass::Tablet,
        "Moto360",
        TSize(320, 290), TSize(240, 218),
        TOSVersion::TPlatform::pfAndroid,
        213,
        True);
} 

 Next open up Moto360ViewUnit.h and set the code as:

//---------------------------------------------------------------------------
#ifndef Moto360ViewUnitH
#define Moto360ViewUnitH
//---------------------------------------------------------------------------
#endif
void initdevice();
#pragma startup initdevice 42

The view is ready to use. Right click on Moto360View.bpl and select install.

Step 2: Add New Blank C++ Project

From within the Project Manager right click on ProjectGroup1 and select Add New Project. Select C++ Projects -> Multi-Device Projects -> Blank Application.

From within the Project Manager rename Project2.exe as HelloMoto360.

The Master View opens on the Form Designer. Change the view from Master to Moto360. The Moto360 PNG file defined within MobileDevices.xml appears on the Form Designer.

Load DarkAndroid Styles

From the Tool Palette, add a Stylebook to the Form Designer.

From within the Structure window, double click on StyleBook1 and select Load.

Navigate to C:\Users\Public\Documents\Embarcadero\Studio\15.0\Styles\Android\AndroidDark.fsf

Next click on Form2_moto360 from the Structure window.

From the Object Inspector and set the StyleBook property as StyleBook1.

The background color of the Form Designer changes to black.

Say Hello To Moto360

From the Tool Palette, drag a TLabel onto the Form Designer.

From the Object Inspector set the Text property to Hello Moto 360 from Appmethod!

Change the Align property to Client. This will set the bounding box dimensions of the TLabel to the screen size of the current view.

Add left and right margins by setting the Margins->Left and Margins->Right properties to 25.

Step 3: Deploy App to Moto360

Applications are deployed to the Moto360 by pairing it to a smart phone. On your smartphone download Android Wear from the Play store. Note that Android 4.3+ is required to run Android Wear.

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

On the Moto360 watch:

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.

The Android Wear app on the smart phone should display

• Host: disconnected
• Target: connected

The Moto360 is now paired with your smart phone via Bluetooth.

Connect the smart phone to your computer via USB.

Query Moto360 Connectivity

If this is the first time using Appmethod to deploy to an Android device be sure to complete the following tutorial: set up your development environment on windows.

The state of any connected Android device can be queried via the Android Shell Command by using the Android Debug Bridge (adb) executable. This executable is bundled with Appmethod at the following path:

C:\Users\Public\Documents\Embarcadero\Studio\15.0\PlatformSDKs\adt-bundle-windows-x86-20131030\sdk\platform-tools

If there is only one emulator running or only one device connected, the adb command is sent to that device by default. If multiple emulators are running and/or multiple devices are attached, you need to use the -s option to specify the target device to which the command should be directed.

General use:
adb [-s serialNumber] command

To list all the devices attached:
adb devices -l

To list all the packages installed on your device:
adb shell pm list packages

To uninstall a package:
adb shell pm uninstall com.embarcadero.ProjectName

Create a .BAT file in the same directory as the adb.exe tool and use the follow commands:

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

 Execute the bat file.

Running adb devices should result in something like:

Now the Android Wear app on your phone should show:

• Host: connected
• Target: connected

To check what applications are currently installed on the Moto360 run the following command:
adb -s localhost:4444 shell pm list packages

Deploy Hello Moto360!

Appmethod will now discover the Moto360 as a target deployment platform.

Within the Project Manager open HelloMoto360 Target Platforms (Android) -> Android - Android SDK 22.3 32 bit -> Target right click and select Refresh. The Moto 360 should show up. Double click it to set the Moto360 as the deployment destination.

Deploying apps to the moto360 is done over Bluetooth and as such deployment times can take a lot longer than over USB cable.