The Airforce1 Proof of Concept has been developed by Aurélien Laval (@AurelienLaval) and Jean-Luc Antoine (me).
Basically, I wanted build an innovation based on Salesforce platform. Salesforce is already providing lots of innovations 3 times a year, through the Spring, Summer and Winter releases; we can use this to build on top new innovations. You just need to be creative and to find an idea.
In France, we have ideas (and taxes :( ). The idea is very simple : how to attract customers to your office when you have a B2C business ? The more they come to your shop, the more you can engage, interact, sell... That is why you absolutely need to manage the IRL-UX (In Real Life User Experience). If your office is not attractive, people will be reluctant to step into it. You need to be open, to be modern, to remove barriers.
To my opinion, as a customer, I prefer going to a shop which is modern, great appearance, and where I can interact with sales people to explain my needs. I dislike having them behind a screen, where I cannot see what they do, and when I speak to them they answer in the direction of their screen. Sometimes you don't see them behind their screens.
Stop this! Let remove the screens! Having the content displayed in front of me would be better. We already saw films like Star Wars or Minority Report, displaying content in the air, like an interactive hologram. This is the future, this is great, it makes me dreaming. I'm conviced that Films are not inspired by the future - future is inspired by films.
Let's build the future
Let's identify how we could build something to display a virtual holographic screen. Your car has probably such technology with the head-up display: a picture is appearing through the windscreen because of reflection. To prepare a similar device, we need to understand some physics.
A transparent surface catches the projected content (computer screen) and reflect the light to the user eyes. The subject rendered is perceived as being behind the transparent surface.
The longer distance between the projector and the reflecting surface, the farther the rendered subject seems to be.
If the eyes are not at the same height as the transparent surface, the transparent surface must have a different angle and the projector rendering should compensate the distortion.
As the result is floating in the air, based on a light source, black color will be interpreted as transparent ( there is no black light! ). Best rendering requires high contrast projector (lots of lumens) and not much ambient light.
A dark background in front of the user can be a benefit for the user experience
Tips to increase the user experience
Hiding the projector will increase the Wow effect:
Picture can be rendered from above
To avoid refraction and ghosting effect, use a slim surface
The bigger the screen is, the bigger can be the hologram
Double display
You can use 2 transparent surfaces to display 2 different pictures from the same projector or screen. Each person will see something different. For instance, the sales person could see selling tips added to the content.
The code
We use Salesforce console to host our code in a custom console component, in a Visualforce page. A custom controller will retrieve data that is rendered on client side as charts. For the demo we are using Google Charts. The custom console component must be poped out in a separate window, moved to the secondary screen (acting as a projector) and then displayed in full screen (just pressing F11 from the browser).
We display Salesforce data, that will react in real-time on lots of events:
When the user is changing his working context (switching from one tab to another). For this purpose we leverage the Console api (integration.js)
When the data being displayed is changing. We need to configure the console push notifications, based on the streaming api; the page is notified each time the data that we monitor is changed.
When the user is touching the graphic in the air (see Minority Report); for this purpose we have developed a custom motion detection system, leveraging the webcam
