First look at developing for Mirror, ask me anything!

Mirror
1

Hey all!

Last week, I posted a sneak-peek at what building apps with Estimote Mirror is gonna look like:

How Mirror works: first look at developing for Mirror

I’m curious what you all think, and I’ll be happy to answer questions about developing for Mirror (:

Here’s a TL;DR if you don’t have time to read the whole post:

  1. Mirror uses HTML to render things on screen.
  2. We’ll provide built-in HTML “views”, or you can build your own.
  3. You then use our iOS/Android Mirror SDK to pick which view to show and what data to populate it with.

For example, when somebody goes into subway, and there’s a screen there, mobile app could tell Mirror to show a “table view” and populate it with a list of trains that go exactly where the app’s user needs to go. (All of this happens over Bluetooth.)

3

I have the following Questions!

  1. Will the Mirror also support Javascript alongside the HTML5 and CSS3 combo? If So, will the SDK allow us to directly call a JS Function. (There is mention of JS in the blog post, but only in regards to creating and testing a view)
  2. Will we be able to play HTML5 Audio and Videos? (So that I can play a chime to engage the Users attention when their app connects to the Mirror)
  3. Can we use the Mirror’s WiFi to obtain data directly from the Internet? Can we also use this to Updates assets on Device Directly?
  4. Assuming Relevant Permissions have been granted, will the SDK be able to work if the App is in the background?
  5. Can we set the Mirror to have a ‘Idle’ state for when no users are currently interacting with it? (Such as switching to a screen that has details to download the App, or entering power saving mode)
  6. What happens when two people with the same App are in range of the Mirror at the same time?

Cheers

4

Amazing questions, thanks for posting!

Will the Mirror also support Javascript alongside the HTML5 and CSS3 combo? If So, will the SDK allow us to directly call a JS Function. (There is mention of JS in the blog post, but only in regards to creating and testing a view)

Yes, you can add JavaScript to your Mirror views. We also have an events system in place, where your JavaScript can be informed when e.g. a sticker associated with the screen started moving, etc. We can easily extend that system with custom events triggered from the smartphone.

Will we be able to play HTML5 Audio and Videos? (So that I can play a chime to engage the Users attention when their app connects to the Mirror)

Mirror has processing power equivalent to a low-mid smartphone, and pushing full HD video at 30 fps doesn’t currently work well. We’ve been testing 720p recently, and there’s been slight tearing, but much closer to a smooth playback. All in all, we’ll keep hammering on it, but can’t promise smooth video playback in v1. Maybe it’d come later in a software update, if we can find some trick to pull it off, or it might turn out to require a hardware spec bump.

Audio, yes, no problem here.

Can we use the Mirror’s WiFi to obtain data directly from the Internet? Can we also use this to Updates assets on Device Directly?

Yes, WiFi is there, and we will allow controlled access to the Internet via JavaScript. We’re still hashing out the security details, e.g., whitelisting, CORS.

It’s important to understand though that in our opinion, the “load things to show on Mirror from the Internet” should be happening on the smartphone. For example, if I approach the screen in a subway, my mobile app loads a list of trains going where I want to go, and pushes that list onto Mirror. We don’t see any advantage in having the mobile app push my user ID to the Mirror, and the Mirror itself fetches the list of trains going my way. What do *you* think?

Updating assets: not in v1. Down the line, we’re definitely thinking about some “fleet management” system where you can easily update your Mirror views or load entire new Mirror views on your Mirrors.

Assuming Relevant Permissions have been granted, will the SDK be able to work if the App is in the background?

Yes.

Can we set the Mirror to have a ‘Idle’ state for when no users are currently interacting with it? (Such as switching to a screen that has details to download the App, or entering power saving mode)

Yes, there is currently a concept of a “default view”, which is what’s being shown when there’s nobody around with an app to trigger some other view. Not sure if we can trigger power-saving/standby on the TV from Mirror over HDMI, we might look into that.

What happens when two people with the same App are in range of the Mirror at the same time?

We’re building in mechanisms that’ll allow more than one view to be shown on the screen at the same time, e.g., by splitting the screen horizontally or vertically. For example, in your app, you may say you want to allow up to 3 simultaneous views in a vertical split.

For more complicated cases, you can always disable split screen and write a custom view, that’ll use the events system mentioned above (“new user connected, with data: name = Peter, flight number = XYZ123”) and adapt the HTML/DOM itself.

5

Thanks for your answers!

I can see two potential use cases for obtaining data without the use of an mobile app

  1. Fetching new data for the idle screen (Such as Session Times for a Movie, Score Results for a game, Flights and cancellations etc. Content that you would want to keep up to date but may not be able to predict)
  2. Fetching Data from a Local or Closed off Server (So if I wanted to load an Image, it would be faster for the device to load it locally then over the enduser’s device and internet connection. In addition, the content may be ‘Exclusive’ to the actual presence of the device being in communication with that Mirror, and the Mirror could load the content directly from a closed Network, therefore not exposing the file to the Enduser’s Device)

Basically, I see the Mirror being a useful device for many Commercial sites, such as Stores, Stadiums, Airports etc. But I’d like for them to provide an up to date experience even for users without the relevant app.

I look forward to experimenting with the Mirrors once they are available!
Cheers

6

Both very good points. Thanks for sharing!

7

Hi heypiotr!

A few days ago I opened a new topic about the functionality of Estimote Mirror’s wifi but I didn’t receive any response, so I hope you can help me.
How can I open a web page or an image from the web via javascript using the Mirror wi-f?

Thank you.

8

Loading assets from an external server is as simple as:

<img src="http://path.to.the/image.jpg">

You can also make AJAX requests to your API.

Note that by default, when you change your Mirror’s Access Mode from “Development” to “Deployed & Protected”, all network requests are gonna be blocked, and you need to whitelist your servers. In “Development”, all network requests are allowed for convenience.

You can’t load an entire web page onto the screen at the moment, but you can easily replicate the behavior of your website locally, and use AJAX to refresh it with new data from your backend periodically. (Or maybe even use Web Sockets to refresh in real time.)

9

Hi heypiotr!

Thank you for your reply!
And what about files? Can the estimote mirror open a pdf from the web?

10

Not really. Why a PDF?

11

ok, and how to reset the Mirror?

12

Unplug it from USB and then plug it again. Remember to unmount Mirror drive first in your host operating system.

13

Is there an example for build-in table view?

14

@yingwangbupt,

You can create a TableView element, based on built-in views, in the similar way you are creating a PosterView: by using appropriate view data and style builders.

In that scenario we are making use of TableViewData and TableViewStyle classes to define its’ look and content. Here you can find a simple example in Kotlin, using Android Mirror SDK:

    //Here you can define table data...
    val tableViewData = TableViewData
            .Builder()
            .setHeader("This is header!")
            .setColumns(arrayOf("Name", "Score"))
            .setRows(
                    listOf(
                    arrayOf("Alice", "10"),
                    arrayOf("Bob", "8")
            ))
            .create()

    //... then you set style attributes...
    val tableViewStyle = TableViewStyle
            .Builder()
            .setBackgroundColor("#00FF00")
            .setFontColor("#AA3300")
            .create()

    //... and create and object.
    val tableView = TableView(tableViewData, tableViewStyle)
    
    //Here you are displaying it!
    mirrorClient.forAnyDevice().take(tableView).display()

One important note: TableView is available only in Android SDK at the moment.

15

Hi arek,

Thank you for your reply and the sample code. So the tableview doesn’t work on iOS device? May I ask if I would like to show the similar view to the “crowd” in the estimote app “mirror demos” on iOS device, is there a way to do this?

Best Regards,
Ying

16

@yingwangbupt,

Yes, right now iOS Mirror SDK does not support TableView - however, we are really open the developers feedback about their ideas and needs.

You can post any kind of question or enhancement to our tools on our Github repository:

Feel free to share more thoughts on that! :woman_technologist::man_technologist:

Speaking of handling multiple users by Estimote Mirror, it’s possible both for iOS and Android as it’s on the Estimote Mirror development part.

Please take a look at the code snippet below:

    mirror.listen(Mirror.Events.USER_DATA, {

    ondata: function(event) {

            //You can obtain user identifier from an event object by calling event.from.
            //Each mobile application has a unique one. 
            //That's how you can recognize users
            var userIdentifier = event.from

            //This is data package that comes from unique user tagged with userIdentifier
            var userData = event.data
         }
})

When you are listening to the upcoming data and you get an event from the mobile application user nearby, you’ll get:

  • A mobile application user unique identifier - you can receive it with event.from object
  • Data passed from the mobile application - you can obtain it from event.data object

As you get that data with every single event, it’s possible to recognize who is a sender of the message; Right now, it’s up to you how you will interpret and store that data locally on the Mirror :slight_smile:

17

Hi Arek,

Thank you very much for your help! We will try that today. Is there way to see debug/logging information on the mirror side?
Another question is when the mirror is listening to the event, which method should we use to start the event from mobile device? We are currently using
self.mirrorClient.display(content, onMirror: “mirror id”)
but this will take over the mirror display and other other mobile device won’t be able to communicate. Should be use some other method?

Best Regards,
Yin

18

display is the only method to send data to Mirror. It does not take over display it just delivers data to template.
If you skip template parameter in dictionary it will deliver data to currently displayed template.
If you set template parameter it will switch to new template only if necessary and then deliver data to listener. So if you make several requests to the same template it won’t switch but will call listener several times.
If you want to display data from several mobile devices you will have to create a custom template that will handle the task of properly joining data (like ordering, removing duplicates) and displaying it.

19

Hi pober,

Thank you very much! That is very clear instructions. We will try it out today.
Thank you again for your great help!

Ying

20

Currently, in poster view, the image doesn’t show. Could you give us some instructions on where to store the image, and how to show it?
Ying