Skip to content

AppsIframe

Jump to bottom Edit New page
Augustin Roux edited this page Jul 15, 2015 · 6 revisions

External application that live in an iframe inside the webapp are regular website, composed of the classic trio HTML, CSS & Javascript.

External applications cannot access directly to the api of the STB, for security reasons. Depending on the configuration, external apps can be automatically loaded on a channel (autostart mode or full screen) or loaded when the user presses the "Enter" button (user start mode or floating mode).

Example

To stay in sync, we advise you to use a tool like bower. Here is the way to add the r7extlib to your project:

bower init
bower install --save git://github.com/canalplus/r7extlib.git

In the bower.json file you will see a new line that would look like this:

{
  "r7extlib": "git://github.com/canalplus/r7extlib.git#~0.0.2"
}

The lib is now available from the path bower_components/r7extlib/lib/r7extlib.js Your folder would look like this:

extApp/
  ├─ bower_components/
  │   └─ r7extlib/
  │       └─ lib/
  │           └─ r7extlib.js
  ├─ css/
  ├─ js/
  └─ index.html

And the index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="css/style.css" rel="stylesheet">
    <script src="bower_components/r7extlib/lib/r7extlib.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
  </body>
</html>

You can use bower to manage common libraries such as jQuery, backbone, underscore...

Simple application

So let's build a very simple external app

We will grab the following keys: Rewind, Play and Forward and change the color of the screen depending on which button was pressed.

The directory structure will be like this:

extApp
  ├─ bower_components/
  ├─ css
  │   └─ style.css
  ├─ js
  │   ├─ app.js
  │   └─ boot.js
  └─ index.html

You can grab the code of the r7lib in the Setup page

The index.html file will be like so:

<body>
  <div id="main">
  <!-- HTML body where the dynamic code is injected -->
  </div>
</body>

This is the skeleton so everything that will appear in the application will be injected in the <div id="main"></div> tag. For this example we will only inject a simple div tag that will display a big color square.

Then comes the app.js. The code will be largely commented.

// This is a wrapper. Variables declared inside won't polute the global scope.
// Then you can export exactly what you need in the global scope
// Check: http://oli.me.uk/2012/03/14/writing-great-javascript/
(function(exports) {
  // First we will declare our HTML templates in the JST namespace
  // A namespace here is a simple JS Object, a hash.
  JST = {
    index: function(obj) {
      return '<div class="' + obj.class + '"></div>';
    },
    ready: function() {
      return '<article><h1>Application ready</h1></article>';
    }
    // You could add more templates here
  }
  // Then we can declare a simple function whose purpose is exactly to render
  // templates
  function renderTemplate(template, obj) {
    return JST[template](obj);
  }

  function getMainElement() {
    return document.getElementById('main');
  }

  // Then we will declare the functions that will be called on key presses
  function rewindAction() {
    var mainEl = getMainElement(),
        div = mainEl.getElementsByTagName('div')[0];
    if (div) { div.className = 'red'; }
    else { mainEl.innerHTML = renderTemplate('index', { class: 'red' }); }
  }
  function playAction() {
    var mainEl = getMainElement(),
        div = mainEl.getElementsByTagName('div')[0];
    if (div) { div.className = 'blue'; }
    else { mainEl.innerHTML = renderTemplate('index', { class: 'blue' }); }
  }
  function forwardAction() {
    var mainEl = getMainElement(),
        div = mainEl.getElementsByTagName('div')[0];
    if (div) { div.className = 'green'; }
    else { mainEl.innerHTML = renderTemplate('index', { class: 'green' }); }
  }

  // Finally, we will export only what we need.
  // We will also namespace our action functions.
  exports.Actions = {
    rewind: rewindAction,
    play: playAction,
    forward: forwardAction
  };
  exports.getMainElement = getMainElement;
  exports.renderTemplate = renderTemplate;
  // We could export any other useful thing.

  // "exports" points here to the global object, which is "window" in a web
  // browser
})(this);

Then the boot.js file

R7.ready(function() {
  R7.grabKey("Rewind", Actions.rewind);
  R7.grabKey("Play", Actions.play);
  R7.grabKey("Forward", Actions.forward);
  getMainElement().innerHTML = renderTemplate('ready');
});

R7.ready(function() { ... }); is in a way quite similar to $(document).ready(function() { ... }); in jQuery.

R7.grabKey(Key, callback(){...})can take as many key as the remote controller has. Here is a list of the keys and their corresponding keyboard keys on chrome:

'Back',     // Back
'Enter',    // Enter
'Exit',     // Esc       ;
'NextProg', // Page Up   ; fn + ↑
'PrevProg', // Page Down ; fn + ↓
'Vdown',    // End       ; fn + →
'Vup',      // Home      ; fn + ←
'Left',     // Left      ; ←
'Up',       // Up        ; ↓
'Right',    // Right     ; →
'Down',     // Down      ; ↓
'Numeric0', // 0
'Numeric1', //
'Numeric2', // .
'Numeric3', // .
'Numeric4', // .
'Numeric5', // .
'Numeric6', // .
'Numeric7', //
'Numeric8', //
'Numeric9', // 9
'Rewind',   // F1
'Play',     // F2
'Forward',  // F3
'Stop',     // F4
'Pause',    // F5
'Rec',      // F6
'Zoom',     // F7
'Mute',     // F8
'Menu',     // F9
'Guide',    // F10
'TV',       // F11
'Shutdown', // F12
'Shutdown', // Front panel
'NextProg', // Front panel
'PrevProg'  // Front panel

Upload this code, and then try it on the channel you are working on.

You should have an "Application ready" message and then be able to use the Rewind, Play and Forward keys.

Add a custom footer
Add a custom sidebar
Clone this wiki locally