Cast content to Mirror from a mobile app

Mirror Display SDK for iOS and Android allows your mobile app to take control of the nearby screen. The SDK simply sends display instructions to Mirror over Bluetooth. It can happen with the app both in the foreground and the background.

An airport app could highlight the user’s flight info as they approach the airport display. A conference app could show the upcoming talks that the user has previously bookmarked. Or how about a quiz app, where the question is shown on the big screen, and the host sees the answer on their phone or tablet?

What’s ahead (aka Table of Contents)

You will need…

  • 1 x iPhone 4S or newer, or 1 x smartphone with Android 4.3 or above
    • iOS and Android simulators don’t support Bluetooth
  • 1 x Estimote Mirror
  • 1 x TV or other display with HDMI and USB ports
    • you can twist and bend your Mirror to make it fit into the ports
    • alternatively, you can power it from your computer’s USB port, or use a USB wall charger
    • use a USB extension cable if needed

Quick start

1. Integrate Display SDK

iOS

  1. Clone or download Mirror iOS SDK repo.
  2. Copy the SDK into a subdirectory of your project, e.g., MyProject/MirrorSDK.
  3. Open your project, e.g., MyProject/MyProject.xcodeproj. Drag the MirrorDisplay.xcodeproj and MirrorContextSDK.framework from the MirrorSDK folder into the Project Navigator. Verify that the checkbox next to your app’s target is selected.
  4. Go to your project’s settings, the General tab.
  5. Add MirrorDisplay.framework and MirrorContextSDK.framework into the Embedded Binaries section.

You can check out one of the bundled Examples’ Dependencies group to see what it should look like.

If you want your app to cast content to Mirror in the background, also enable the “Uses Bluetooth LE accessories” Background Mode in your project’s settings, on the Capabilities tab.

Android

Add Estimote’s Maven repo to your project’s build.gradle:

allprojects {
    repositories {
        google()
        jcenter()
        // add this:
        maven { url  "http://estimote.bintray.com/android" }
    }
}

Then add the Display SDK dependency to your module’s build.gradle:

dependencies {
    // ...
    compile 'com.estimote:display-sdk:0.1.5'
}

2. Define your view

Mirror and the Display SDKs come with a bunch of built-in views, which you can immediately start using and showing on the big screen. Here, we’ll use the Poster view.

iOS

In your view controller’s viewDidLoad, add:

override func viewDidLoad() {
    let poster = Poster() { p in
        p.header = "Hello, world!"
        p.body = "Programmable screen is here."
        p.image = .preloaded(path: "shoe_big.jpg")

        p.style = PosterStyle() { ps in
          ps.textAlign = .center
          ps.textPosition = Position(
              horizontal: .center, vertical: .bottom(offset: 80))
          ps.imagePosition = Position(
              horizontal: .center, vertical: .top(offset: 80))
        }
    }
}

Android

In your activity’s onCreate, add:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    PosterViewData posterData = new PosterViewData.Builder()
        .setHeader("Hello, world!")
        .setBody("Programmable screen is here.")
        .setImage("assets/shoe_big.jpg")
        .create();

    PosterViewStyle posterStyle = new PosterViewStyle.Builder()
        .setTextAlign("center")
        .setTextPosition(new Position(Horizontal.center(), Vertical.bottom(80)))
        .setImagePosition(new Position(Horizontal.center(), Vertical.top(80)))
        .create();

    PosterView poster = new PosterView(posterData, posterStyle);
}

3. Queue it for casting to Mirror

Now that we have our view defined, we simply pass it to a MirrorClient. This will queue it up for showing it on the screen when the device comes in range.

iOS

In your view controller’s code:

// create and store a strong reference to a MirrorClient
let mirrorClient = MirrorClient()

override func viewDidLoad() {
    let poster = /* ...
    ... code from the previous step
    ... */

    // add this at the end of the method:
    mirrorClient.display(poster, inProximity: .near)
}

Android


private MirrorClient mirrorClient;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    PosterViewData posterData = /* ...
    ... code from the previous step
    ... */
    PosterView poster = new PosterView(posterData, posterStyle);

    // add this at the end of the method:

    this.mirrorClient = new MirrorClient.Builder()
        // replace with your own Mirror's ID
        .useMirrorWithIds("9f1a787ad3764057311e043f63921917")
        .setDebugModeEnabled(true)
        .setRepeatableDisplayRequests(true)
        .build();

    this.mirrorClient.when(MirrorZone.NEAR).thenShow(poster, new DisplayCallback() {
        @Override
        public void onViewOperationDone(ViewOperation viewOperation,
                com.estimote.display.view.View view) {
            Log.d("Mirror", "Yay!")
        }

        @Override
        public void onViewOperationFailed(ViewOperation show,
                com.estimote.display.view.View view, String message) {
            Log.d("Mirror", "Oh no!")
        }
    });
}

That’s it! Run the app on your device, and go near the screen. Your poster should pop up shortly. Now move away, out of the “near” zone, and the popup should disappear, replaced by the “idle” view.

What built-in views are available?

We’re starting out with a small set, and expect to enlarge the collection in the future updates. Let us know on forums and/or Display SDKs GitHub what other built-in views you’d like to have at your disposal!

Poster

A simple image + text view.

Includes customizable fonts, colors, background, and the text and image positions.

Table

A simple table view, for some row-by-row content.

Includes customizable fonts, colors, background, table header, rows and columns.

Can I build my own view?

If the built-in views are not enough, then…

  • (a) let us know! Tweet at @Estimote, send an email to contact@estimote.com, or post on our forums. We need your feedback to know what new views/options to add.

  • (b) You can build your own UI with a custom Mirror template. Templates are HTML5 pages/web apps with access to Mirror JavaScript API, which allows them to receive data from mobile apps, and more.

Build your own template