Create an Application Step-by-Step

Introduction

Follow these steps to develop a simple CloudTV™ application and get it running. 

Get a local web server running on your computer.

Configure the server to point to your computer, in order to automate uploading/updating.

Mac or PC?

Select your computer type and follow the specific instructions.

Web Server on Mac

For Mac OSX, the built-in Apache web server is already running (Mac OS comes with localhost enabled). Application developers just need to put their application files in the right folder. On the Mac, that folder is username/Sites. 
If you add files to your Sites folder, they will show up at localhost/~username.
In developing the sample app below, we will use the built-in web server. No setup steps are needed.

If you type http://localhost and press Enter, you should get a page that displays "It Works!"

If you type http://localhost/~username (your own username) and press Enter, the file structure containing the Sites folder should display, as in this example.

localhost-1


On older versions of Mac, in order to enable the web server, after going to localhost with no indication of success, then open System Preferences > Sharing > Enable Web Sharing, and place a checkmark in the Web Sharing checkbox to enable it, as shown below. The Apache web server will then start up.

mac-sharing

Web Server on PC

 Follow these instructions to confirm your PC already has a web server running, or to set one up.

  1.  In your browser, type "http://localhost" and press Enter. If a web server is installed, it will respond with an identifying page. Go on to the next topic heading "Create an App that features 2 buttons". If an error message displays, there is no web server installed. Continue to step 2.  
  2. Install WAMP web server onto your PC. Go to www.wampserver.com/en and download the PHP5.3 version, either the 32-bit or 64-bit version (depending on your OS). (You need to determine the OS of his computer, if not already known.) This will download the WAMP web server executable.  
  3. Select the downloaded .exe file for WAMP and run it.  (You will need administrator login privileges to do this.) When installed, have WAMP place an icon into your toolbar or taskbar.
  4. Click the icon for WAMP to start it the first time (from then on, it will start automaticallly when Windows is started.
  5. In your browser, type "http://localhost" and press Enter, to make sure the web server is working. (The WampServer version page should display.)
  6. Your app files will be stored in C:/WAMP/WWW (the WWW folder). If you installed WAMP to other than the default directory, the WWW folder will also be in the same directory.

Create an App that features 2 buttons

Create an app to feature two buttons, with initial focus on Button #1 when the page loads. Use CSS to show that the button is focused.

First, begin by setting up the simple HTML page with two buttons defined, as shown below.  

<html>
<body>
     <button id="button1">Button 1</button>
     <button id="button2">Button 2</button> 

</body>
</html>

Save your HTML app with a filename ending with the extension .html, such as  "buttons.html" and save this file in a folder that you create for your project (on PC, the WAMP > WWW directory). You may want to name this folder "test" as shown here (PC version).

pc-folder-test-buttons

Open your little app in the browser. It should show two buttons with no functionality, at this point, with this appearance:

button-1-2

Focus a Button on Load

Within an html page, "focus" refers to the element that the user agent (in this case, the button) has given focus to.  The browser will only allow one element at a time to be given focus, and with focus come some special CSS styling abilities, such as color. 

Insert this code segment into your app immediately following the initial <html> tag.

<script>
var onLoad = function(){
    document.getElementById('button1').focus(); 
}
window.addEventListener('load', onLoad);
</script>
 

Then, to add color when the button gains focus (signalling the user that the focus is on a button), add this code immediately following the </script> element of your app.

<style>
button{border:1px solid #333;}
:focus{background-color:yellow;}
</style>

Save and check your app in the browser.  It should look like this:

button-1f-2

Add Navigation to the App

Add a keydown handler to navigate between the two buttons.

After the end of the var onLoad segment of your app, add this onKey function. (Follow this link for a description of the keyCode event.)

var onKey = function(evt){
     console.log("Key pressed", evt.keyCode, evt.target, evt);

     if(evt.keyCode == 37){
        document.getElementById('button1').focus(); 
        }else if(evt.keyCode == 39){
        document.getElementById('button2').focus(); 
     }
}

And just before the </script> tag in your app, add this Event Listener for onKey.  (Follow this link for a description of the addEventListener element.)

window.addEventListener('keydown', onKey);

Save your html file.

Your App so far

Your app at this point should be identical to this:

<html>
<script>
var onLoad = function(){
    document.getElementById('button1').focus(); 
}
var onKey = function(evt){
     console.log("Key pressed", evt.keyCode, evt.target, evt);
     if(evt.keyCode == 37){
        document.getElementById('button1').focus(); 
    }else if(evt.keyCode == 39){
        document.getElementById('button2').focus(); 
     }
}
window.addEventListener('load', onLoad);
window.addEventListener('keydown', onKey);
</script>
<style>
button{border:1px solid #333;}
:focus{background-color:yellow;}
</style>
<body>
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button> 

</body>
</html>

Open it in your browser to observe the result. Button 1 should initially be in focus (yellow), but if you press the Right arrow key, focus should shift to Button 2 (shown below), and pressing the left arrow should return focus to Button 1.

button-1-2f

If you press the key combination Ctrl+Shift+J (on PC) or Cmd+Opt+J (on Mac), the Developer Tools panel will display, showing you the log of the key presses you have made. If you have never used the Developer Tools, it is a strong collection of application development tabs (network requests, console, benchmarking, etc.) that will become very useful for developing web applications. Key code 37 is left, and key code 39 is right.

Add av.js to simplify navigation

In this section we will see how the av.Navigation() helper can make navigation easy. We will accomplish these changes:

  1. Download the Framework.
  2. Add the Framework to your project folder.
  3. Add the 2 script tags (av.js and navigation.js) to your page to load the library. 
  4. Add 2 lines of javascript to magically connect all the buttons into a group of navigable buttons.

In the previous example, we added two buttons to the screen, and we added handlers for the left key and right key.  What if there were more buttons on the page, like 10 or 20? 

We will include a library and a couple lines of code to simplify navigation as we expand our example app.

In the next steps, we will download and add the ActiveVideo Framework (avhtml). First, it is necessary to register for the ActiveVideo Developer Community in order to downoad these files. If you have already registered, go on to "Download avhtml".  Otherwise continue with the registration.

Register for access to Developer Community

  1. Create an account on the Developer Community page.
  2. Go to your email and locate the auto-generated response, and click the link for Activation.
  3. Log into the Developer Community area.

Download avhtml

    1. Click the Tools tab on the Developer Community page.
    2. Select ActiveVideo Framework (avhtml) .
    3. Download av.js (the latest version) into the top level ("test") of your project.
    4. After downloading it, unzip it into a folder (named "avhtml")  in your project. (When you unzip it, it should automatically create the "avhtml" folder, as shown in the example below.)

avhtml-download-2

Modify your App

  1. If you wish to keep the app you have made so far (before expanding it), make a duplicate of your html file, giving it a new name such as "buttons2.html". However, we will continue to work with your "buttons.html" file.
  2. Right at the top, after the initial <html> tag, add these two lines:

<html>

<script src="/avhtml/av.js"></script>
<script src="/avhtml/navigation.js"></script>

       3.  Add these two lines (beginning with var nav) to your html file, where indicated, remove the onkey function from your app, as shown in the graphic below.

code-formatted

 

        4. Then in the <body> portion of your file, after the buttons, add the following <div> code.

code-formatted-2

 

Remember to save your html file often.

Add more buttons to the page

Next, remove the Button ID information from button2 (to create a generic button), and copy and paste the line of generic button code to form 24 buttons (4 rows of 6), as shown here. Insert a line break <br /> after each six lines to make rows.

<body>
<button id="button1">Button 1</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button><br />

<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button><br />

<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button><br />

<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button><br />

 Save your modified App and check it in the browser. This is what it should look like:

buttons2

And this is what your modified App html code should consist of:

<html>
<script src="/avhtml/av.js"></script>
<script src="/avhtml/navigation.js"></script>
<script>
    var onLoad = function(){
        document.getElementById('button1').focus();
        var nav = new av.Navigation(); 
        nav.addSelector('button','#somediv');
}
    window.addEventListener('load', onLoad);
 </script>
<style>
    button{border:1px solid #333;}
    :focus{background-color:yellow;}
</style>
<body>
   <button id="button1">Button 1</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button><br />
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button><br />
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button><br />
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button>
    <button>Button</button><br />
    <div id="somediv">
I am a div I am a div I am a div I am a div I am a div I am a div I am a div I am a div I am a div I am a div 
    </div>
</body>
</html>

 Get CloudTV Player™ 

You must be registered for the Developer Community in order to get the CloudTV Player. See Register for Access topic, above, if you have not yet registered.

  1. Go to the Tools/CloudTV Player section to get the CloudTV Player. 
  2. Install the Player. On Mac or PC, double-click the downloaded file and follow the instructions on the screen for installation. 
  3. At the end of the installation process, open the Player.

Create a Developer Sandbox Account

CloudTV provides a shared "Sandbox" environment for all developers to use (free of charge). The Sandbox enables you to look at your application as it would run on the CloudTV platform.

To create a Sandbox account, you must first have a Developer Community account. (See Register for Access topic, above, if you have not yet registered.)

        Note: Sandbox access requires a supplemental FTP account in addition to your developer account.

Then, to create a Sandbox account on the shared development server:

  1. On the Developer Community, open Dev Tools > Developer Sandbox. 
  2. In the "Create a Sandbox Account" area, you must create a username and password. (These can be the same as your Developer Community entries, if you wish.)
    When you have made your entries, an acknowledgement message will display. Then your unique information will populate the account area, as shown below.

new-sandbox

When you create a sandbox account, it will actually create an FTP account for you with the same username and password, and it creates a personal folder to house your uploaded files. 

Test CloudTV Player

We will test CloudTV Player by viewing a publicly-accessible website (Yahoo.com).

  1. Copy the Server URL from your Sandbox to the Server URL field on CloudTV Player.

player-2

        2.  Type the Yahoo address into the App URL (http://yahoo.com).

       3. Click the green arrow to the right of the App URL.  The Yahoo website should display in the Player.

Add your App to the Sandbox

In order to add your app to the Sandbox, you need to install a secure FTP utility (if you do not already have one). If you need to install a secure FTP utility, follow the instructions for your platform.

FTP for Mac

We recommend you install Cyberduck FTP utility on your Mac. Click the link and follow the installation instructions.

    1. Once installed, run Cyberduck and the default screen will display (a portion is shown below).

 mac-open-connect

    1. Click the Open Connection icon in the upper left corner.
    2. Select FTP-SSL (Explicit AUTH TLS) in the connection type dropdown menu, as shown below. The Port will automatically populate.
    3. Type the Server ID from your Sandbox account into the Server field.  
    4. Type your Sandbox FTPs username and FTPs password into the appropriate fields, then click Connect.

ftp-ssl2a

  1. Next, upload your entire "test" folder containing your app (buttons.html) and the avhtml folder, using Cyberduck. After uploading your folder, it will appear like the example below, when expanded.

add-your-app

Now that the "test" folder containing your app file and the avhtml folder has been uploaded to the Sandbox, you can view your app in the CloudTV Player (next topic).

FTP for PC

We recommend you install WinSCP FTP utility on your PC.  Click the link and follow the installation instructions.

    1. Once installed, run WinSCP and the default screen will display. In the File protocol field, select FTP, and in the Encryption field, select TLS Explicit encryption, as shown below.  The Port number field will automatically populate.
    2. Type the  Server ID from your Sandbox account into the Host name field.
    3. Type your Sandbox FTPs username and FTPs password into the appropriate fields, then click Login.

winscp-1a

A caution message may display regarding the server's certificate (shown below).  All file transfers will be encrypted. Click Yes to continue.

winscp-2

When WinSCP initially opens, the default setup is like this example (below).

winscp-3a

    1. In the left pane, navigate to the directory/folder that contains the "test" folder (as shown below).  In this example, the "test" folder contains the app file "buttons.html" and the folder avhtml.
    2. Select the entire "test" folder and drag-and-drop it to the right pane.  The FTP utility will copy the folder to the destination folder.

winscp-4c

Now that the "test" folder containing your app file and the avhtml folder has been uploaded to the Sandbox, you can view your app in the CloudTV Player (next topic).

Launch a CloudTV Player Session

Point CloudTV Player to your Sandbox.

    1. In the Server URL field, make sure the URL of the Sandbox server is inserted.
    2. In the App URL, copy and paste the App URL from your Sandbox account.  Then to the end of that path, add "/test/buttons.html" or the specific folder and filename of your app.

player-0

    1. Then click the green right arrow on the CloudTV Player (above the remote control). Your html app should display.

player-3d

  1. Navigate your app with your keyboard (U/D/L/R) or using the built-in remote.

You have successfully created a CloudTV application and tested it using CloudTV Player.

You loaded a web server onto your computer, created a simple 2-button html application, and added focus and navigation features. Then you increased the number of buttons, created a Sandbox account and downloaded and used an FTP utility to upload the necessary files. You downloaded CloudTV Player and tested your application.  Congratulations!

This is the end of the basic tutorial.

Advanced tutorials (coming soon)

  • Wednesday, 13 February 2013
  • Number of Views: 6757

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved