Intro to Estimote Mirror
Mirror is the world’s first video beacon.
-
It’s a video beacon, which means that it broadcasts its presence over Bluetooth to all nearby devices, such as smartphones. This way, apps running on these devices can detect when the user is in range of Mirror, and can also “talk” to it.
-
It’s a video beacon, which means that you plug it into a display via an HDMI port. This way, Mirror is in control of what’s shown on the screen.
The two things combined, Mirror enables you to build apps that control the screens around them! The apps detect and talk to Mirror over Bluetooth, and tell it what to show. Think about it as unlocking an API for the big screen, or a programmable display technology.
What’s ahead (aka Table of Contents)
- You could build …
- What platforms and devices does it support?
- Built-in views
- Roll your own UI with HTML5 templates
- App-less experiences with the Scanner API
You could build …
… an airport app, which highlights the user’s flight info when they approach the airport screen.
… a hands-free navigation for a mall or a department store, with directions showing up on the screens that the user is passing by. “Looking for sportswear from your shopping list? Go to the 3rd floor, the elevators are on your left.”
… a party quiz-game, where the host’s app casts the current question to a TV, and participants shout out their answers.
What platforms and devices does it support?
We have iOS and Android SDKs to quickly start sending display instructions to Mirror from your iOS and Android apps. A Bluetooth Low Energy device is required. Luckily, every modern smartphone and smartwatch has it.
It’s not just iOS and Android though. You can talk to Mirror from any Bluetooth-capable device and platform. It’s a bit more involved, since you’ll need to code the lower-level Bluetooth communication yourself. Join us on Estimote forums if you want to dive into that.
Built-in views
Similar to how iOS and Android provide some built-in views for you: UITableView
, ListView
, etc., Mirror does too! An example display instruction could be as simple as: “show me a Table
view with these rows and columns, and make the text white and the background black”.
Our iOS and Android SDKs give you quick access to those built-in views, via native classes. We take care of converting them to an appropriate format and transmitting to Mirror over Bluetooth.
Try it ⇒ Cast content from a mobile app
Roll your own UI with HTML5 templates
What if the built-in views are not enough? (Especially in the beginning, when we’re still growing the collection.) You can always roll your own UI using HTML5 templates.
We call them templates, because you can think of them as regular HTML5 pages that have some “blanks” to be filled in. For example, when writing a quiz game, the blank would be the question that the host’s mobile app sends to Mirror. Templates themselves are stored on Mirror’s flash memory.
Inside templates, we expose a Mirror JavaScript API, where you can subscribe to events such as: “there’s some data incoming from a nearby device”. Then, you simply take that data, and use it to fill in the blanks with regular DOM manipulation. Or code in something more interesting. Coming back to the quiz example, you could add a little thrill by not showing the question immediately, and instead doing a little count-down before a grand reveal. And sound, you could even play sound!
Try it ⇒ Build your own template
App-less experiences with the Scanner API
Templates can be filled in with data sent to Mirror over Bluetooth, or … You can scan for nearby Bluetooth devices directly in the template, and have it fill in “itself” based on the results.
This is most useful when used with other Bluetooth beacons. For example, the screen could react to nearby merchandise being picked up, if you tag it with the Estimote Sticker Beacons. The JavaScript would extract the identifier and motion data from the sticker’s advertisement, figure out which item is that, and display its details. If you configured your Mirror with WiFi, you could fetch photos and descriptions dynamically from your backend.