Implementing Facebook Paper UI in Sencha Touch

You have probably heard about the introduction of Facebook’s new application ‘Paper’ and seen the video demonstration. If not you can check out the video below before reading the rest of this post:

Specifically at around 00:52 there’s an innovative new UI feature introduced. The user can tilt the phone to view more of the photo, as if they were looking through a window. I feel that often there’s a perception that the user interface of cross platform applications is always going to be sub-par and lagging behind exciting new features like this. That’s certainly not the case though, and it wasn’t long before John Tregoning implemented the same feature using JavaScript.

You can see a demo of what he created

here (assuming you’re using a supported device with an accelerometer) or you can see the same functionality that I implemented in Sencha Touch here. John has also added the project, Photo Tilt, to GitHub. If you want to view my Sencha Touch version on GitHub you can go here.

Since his version of the photo tilting feature is just using JavaScript, we can certainly get it working within the Sencha Touch framework. Typical use would involve adding a section of code like the following to your web page:

var photoTilt = new PhotoTilt({
    url: 'photo.jpg',
    lowResUrl: 'lowRes.jpg', //optional it will load lowRes 1st if available
    maxTilt: 18, //optional, defaults to 20
    container: document.body  //optional, defaults to body
    reverseTilt: false //optional, defaults to false
});

But of course we’re going to have to do a few other things if we want to get it working within the Sencha Touch framework. First of all you’ll have to download the source file ’photoTilt.js’ and add the styles from ’style.css’ to your app.scss file. Once you have included the styles and rebuilt your css file we can include the functionality in a Sencha Touch way by doing the following:

Create a folder inside of your ‘app’ folder called ‘js’ (or whatever you would like, just make sure to modify the following steps appropriately) inside of that folder we are going to create a file called ‘photoTilt.js’ which will be defined as follows:

Ext.define('SenchaTilt.js.photoTilt', {
  singleton: true,

  //Photo Tilt code inserted here
});

The code from Photo Tilt code that you downloaded earlier will be inserted into here. I have left it out for the purpose of readability but it can almost just be pasted in with no code changes. You will however need to change the first like to PhotoTilt: function(options) { and remove the semi-colon from the end of the function declaration. You can have a look at the file in my GitHub repository if you are unsure about these changes.

Next, open up your ‘app.js’ file and include the new file we created under the ‘requires’ section:

requires: [
        'Ext.MessageBox',
        'SenchaTilt.js.photoTilt'
    ],

Finally, we want to actually trigger the code to run. I’ve just created a simple application with one view to do this so you may have to modify it to suit your needs. I simply included a panel with an initialize function attached to it to trigger the functionality, using the same settings that John provided:

Ext.define('SenchaTilt.view.Main', {
  extend: 'Ext.Container',
  xtype: 'main',
  config: {
    layout: 'card',
    items: [
      {
        xtype: 'panel',
        listeners: {
          initialize: function () {
            var photoTilt = SenchaTilt.js.photoTilt.PhotoTilt({
              url: 'http://farm5.staticflickr.com/4016/4251578904_f13592585c_b.jpg',
              lowResUrl:
                'http://farm5.staticflickr.com/4016/4251578904_f13592585c_m.jpg',
              maxTilt: 12,
            });
          },
        },
      },
    ],
  },
});

That’s it! The only downside to this code at the moment is that the device can not currently be stopped from changing orientation from portrait to landscape which will mess things up a bit. John is planning to try implementing the experimental Screen.lockOrientation feature to fix this. If you found this useful, leave a comment below and tell us how it went.