RaspberryPi 101: Part #3 – Uses #1: Media PC

(Apologies in advance for what will be an image-heavy post!)

Intro

XBMC (originally the XBox Media Centre) is an award-winning free and open source (GPL) software media player and entertainment hub for digital media. Raspbmc is a distribution of XBMC tailored specifically for the raspberry pi.

Using it you can easily stream audio and video from your local network, USB devices, and the interwebs for the price of a ‘pi, the cables needed, and an SD card.

Raspbmc Installer for Windows

Download the installer

There are various download options including getting the full ISO yourself and manually doing the install. The easiest and recommended option is to download the bootstrap installer which ensures you get the correct, and latest, version of XBMC and can also set up networking prior to the install, which saves the need to configure this manually from the pi itself.

The download options are all on the raspbmc download page

Run the installer

Insert the SD card you’re going to install raspbmc to; be sure you select the correct device in the setup screen as it does wipe the entire device during installation.

Set up networking

I think this is a great touch; allowing you to configure your network settings (wired or wireless) as part of the install process, so that your pi should just work after plugging in the power and SD card

Plug it in, Go Go Go!

Once the bootstrap installer has been written to your SD card, put the SD card into your pi, plug it into the HDMI port and turn on the pi. If it supports HMDI CEC, your TV should automagically turn on and change to the new HDMI input.

CEC (consumer electronics control) is the control protocol in HDMI which allow systems which run over an HDMI port to interact with the host device, either via the host’s remote control for input or transmitting similar input in order to control the host.

Automatically turning on your TV and changing to the correct HDMI source when you turn on you pi whilst running Raspbmc is one example of the device controlling the host.

Interacting with Raspbmc on your TV just using the TV remote control is an example of the host’s remote controlling the device.

This makes what could be a complex and nerdy device available to those other family members who may not be as nerdy as yourself; no need to ssh in to start a service to download a plugin, or VNC over to browse your network, or plug in a keyboard and mouse to search for some music. Pretty clever stuff!

After a lengthy wait to download the full latest XBMC distro (I presume) and setup your system you should be presented with the default XMBC home screen

From here you can do oh so many things! Stream your music from your network or attached USB device, stream video likewise (y’know, bog standard media centre stuff), if you have a PVR backend then you can use it to view live TV, the EPG, configure recording and pause of live TV.

You can install a selection of plugins for audio, video, themes, and other things like weather apps. If you choose to install video add onsyou can find such awesome plugins as Wired and TED (and Anime Vice.. there’s some weirdass cartoons on that one):

These can effortlessly stream HD video to your TV, which I think is pretty impressive for something so small and cheap!

The weather app is pretty decent too, except I could not for the life of me figure out how to change it from Fahrenheit to Centigrade.

ssh is running by default, but the default pi password doesn’t seem to be "raspberry". As such, I had to connect it to my tv to set the password (under Programs -> Add-ons -> System Configuration -> Password Management). I believe the default settings are username “root” password “root”

In summary

This is a fantastic use for a pi, especially if you don’t already have a media centre setup. However, as you can read from my Year of 101s #2 : Smart TV posts, I already have a media centre built into my TV for this sort of thing; it can already install apps (the TED app works great, as do all of the catch up tv ones) so I wouldn’t use Raspbmc myself.

RaspberryPi 101: Part #2 – Setup

So part 1 was a quick intro to what a pi is and what it can do. This post is about getting and setting yours up.

Installation

1. Get a raspberryPi

You can get one from a few places these days, but the big UK reseller is element14/Farnell

2. Get a linux distro

As mentioned in the last post, you can get a few different operating systems to run and the recommended ones to start with are on the raspberrypi website

3. Put the distro on a suitable SD card

3.1 Writing the image to the SD card

The methods for doing this differ depending on your dekstop OS;

Mac and Linux you can use the existing “dd” and “df” commands to check and write the image to the SD card
For Windows you need to use the Win32DiskImager “used for writing images to USB sticks or SD/CF cards on Windows”

3.2 BerryBoot

Steps 2 and 3 can actually be shortcut by either buying an SD card with a distro already installed, or installing BerryBoot bootloader which bootstraps your installation to give you the easiest possible route to installation:

Berryboot is OSS and you can even dig into the source over on github

Random tangent #1: HDMI CEC
BerryBoot supports the fantastic HDMI CEC which “is an HDMI feature designed to allow the user to command and control up-to ten CEC-enabled devices, that are connected through HDMI, by using only one of their remote controls”; this means that you don’t even need to connect a keyboard for most of the berryboot setup process and can just use your tv remote.

There’s more info over on elinux about just how important CEC is for HDMI capable devices and writing software for these devices.

Want to start understanding the CEC messages? Check cec-o-matic

This is the same feature that XBMC uses to allow full and simple navigation of the media centre features just using your remote control – more on XBMC later.

Checkpoint! Base Installation Complete

You’ll now have a version of linux (or RISC OS) running on your pi. If you’ve chosen RISC then I can’t really help you, since the last time I used it was playing games on my uncle’s computer as a young lad (check out those vids – classic 90s gaming at its “best”).

Anyway. From here on in I’ll assume you’ve gone with Raspbian. Wheezy should be pretty much the same I think.

Starting it all up #1: Raspbian

Plug it all in

Put the SD card in, the HDMI cable to your tv/monitor, the network cable in, your USB keyboard which you’ll need for the initial installation (unless you’re berrybooting with it’s CEC awesomeness), and finally the power cable; there is no power switch on the pi so once the cable is plugged in you’re running.

You should see the initial configuration screen where you can setup the locale and turn on SSH (do so).

Then you can choose to get to a terminal or boot into a desktop environment.

SSH

With raspbian this is just a case of enabling ssh from the config menu; after that you can ssh in from another machine on the same network. If you don’t know the IP address of your pi, either plug it in to an HDMI capable display and execute “ifconfig” or just check the devices attached to your router from the router admin screen.

more info on pi ssh

Bluetooth

Setting up a bluetooth keyboard may not be much use if you’ve already got ssh running and want to access the terminal only, however if you’re accessing the pi directly you will either need to plug in a USB HCI device (keyboard/mouse) or set up bluetooth.

1. Get a supported device

There’s a list of confirmed working devices over on elinux.

I went for the dinky little TOPDIGI UA01 Bluetooth USB Dongle from Amazon

2. Setup bluetooth on the pi

2.1 install bluetooth software

[code]pi@raspberrypi ~ $ sudo -s
root@raspberrypi:/home/pi# apt-get install bluez[/code]

2.2 scan for nearby devices

[code]root@raspberrypi:/home/pi# hcitool scan[/code]
Your device should appear in those found; use the MAC in the following steps.

2.3 pair your pi to the device

[code]root@raspberrypi:/home/pi# bluez-simple-agent hci0 00:11:22:33:44:55
RequestPinCode: 0000
Enter PIN Code: Release
New device (/org/bluez/3964/hci0/dev_00_11_22_33_44_55)[/code]

Obviously your MAC will be different to the dummy one I’ve used..

2.4 trust the paired device so it’ll auto connect in future

[code]root@raspberrypi:/home/pi# bluez-test-device trusted 00:11:22:33:44:55 yes[/code]

WiFi

Since I’m bored with swapping the ethernet cable from my tv to get this on the network (the switch has no spare ports.. too much living room tech..), I’ve just ordered an Edimax EW-7811UN 150Mbps Wireless Nano USB Adapter

Portable Power

Since I’m bored with swapping my phone charger over to power the pi, I’ve just ordered a PowerGen 5200mAh External Battery Pack High Capacity Power Bank Charger

I’ll report back on how they work out for me soon. I should find that having a fully portable pi will allow me to mess around with it even more!

Summary

That’s it for this one! You’re now set up with a Linux computer, bluetooth keyboard, and ssh. You can do with this whatever you would do with a normal low power distro (Puppy, DSL, #!.. or is it !#.. hmm..), but you can also interact wiht the outside world via GPIO.

Next Up

I’ll be installing XBMC and having a play. I play, so you don’t have to. See? I care.

Year of 101s: March – RaspberryPi

Part #1 – Intro

I’m committing to doing 12 months of “101”s; posts and projects themed at beginning something new (or reasonably new) to me. January was all about node development awesomeness. February was (sort of) all about Samsung Smart TV apps.

March is going to be about me playing with the raspberryPi!

So what’s a RaspberryPi?

The Raspberry Pi is a credit-card sized, single-board, low cost, barebones computer, intented to be mainly used within the classroom as a cheap way to teach programming.

There are more than one version of the Pi and I’ll be referring to Model B during these posts, as it’s what I have.

Hardware

A bare printed circuit board (PCB) contains:

a double USB port,
HDMI and composite video outputs,
an ethernet port,
SD slot,
headphone jack,
and a micro usb sized power socket (so chargers for most modern android or blackberry phones will work, as will a USB to MicroUSB cable plugged into a PC or even your TV)

It’s pretty low-power as it’s just got:

512MB RAM,
32-bit 700MHz ARM processor,
but – a GPU capable of decoding 1080p HD video!

Software

Since the Pi runs from the OS loaded on to the SD card, then it’s up to your level of hackery skill to determine what software you’re going to run. Check out the wiki page to see what OSs are being, or have already been, ported to run.

The most popular ones are most likely those recommended by the fine people at raspberrypi.org, namely: a version of Debian (Raspbian), RISC OS, or a version of Arch Linux.

Raspbian is easy to pick up if you’ve ever played with Linux before.

Uses

Media centre
There’s a fantastic port of XBMC called Raspbmc which allows you to easily make a Media Centre PC (I’ll cover this in a later post).

Arcade machine
Play really old games on a really underpowered device. YES!

High Performance Computing (HPC) environment
Want to get some more power? Buy a truck of Lego and 64 raspberyPis and network them together in a HPC stylee!

Loads of others!
Srsly. (At least) One guy has sent his almost into space. Amazeballs.

It’s all up to your imagination and time; I have one but not the other so let’s see what I come up with this month..!

How do you use it?

Knowledge of either Python of C++ seems to be the main way to get into working with the device; python is the recommended language for general development most likely due to it reading like a high level language and not needing compilation; just edit, save, execute.

Next up

Setting up the thing; getting an OS on it, getting a bluetooth keyboard working, setting up SSH – that sort of thing.

Smart TV 101: Wrap up

Year of 101s, Part 2 – Smart TV February

Summary – What was it all about?

February was my 101 on developing for the Samsung Smart TV; a bit of a random subject n the first place and I also managed to get quite off track by the end after a hiatus in the middle.

Part #1 – Intro

I started with an intro to what Smart TVs are.

Part #2 – App Development

Second was an overview of what apps are, how they’re developed and then got into developing a basic app.

Part #3 – Deploying Apps

Next I did a post about deploying the apps to your tv for testing

I had intended to give a detailed article on developing these apps since I had spent a lot of time in January researching these posts and couldn’t find a decent article anywhere containing this info.

However, during the writing of my second or third post I found a well hidden but utterly perfect article covering everything I had planned to write about; my post would have ended up being a reproduction of that article which is a waste of everyone’s time and not very nice for the author of the original article!

The more useful resources are:

As such I had to think of something still related to Smart TV apps, but also interesting and different enough to be worth writing.

This is where the plan to do without the IDE came in and I tried to dissect the process and implement it manually.

Part #4 – Creating Packages without the SDK

I finally attempted to do without, Apache (done), generate the package (uh.. not quite), and scrap Eclipse (no dice).

What I gained from this was more headaches related to node’s async fun, and also opened up a few other avenues for future development; essentially I’ll be able to link Jan’s 101, Feb’s 101, and also March’s 101 all together!

Summary

Once I realised that Smart TV apps were just webpages, the creation of apps become kinda boring for a blog series. Deploying apps was still quite interesting, so I liked that one. The detail of creating an app was covered wonderfully in the other articles I found, so no point repeating that stuff.

A few things I discovered that weren’t really related; if you start your node server on port 80 and get a failure related to “ENV” and “process” that looks like it couldn’t access the port and you’re not sure what process is stealing that port, try [code]netstat -anbo | findstr :80[/code]

Next Up

Hopefully March will be a more fruitful month – I’ll be getting stuck into a tasty slice of raspberryPi!

Smart TV 101 : Part #4 – Creating packages without the SDK

I’m committing to doing 12 months of “101″s; posts and projects themed at beginning something new (or reasonably new) to me. January was all about node development awesomeness. February is all about Smart TV apps.

To IDE or not to IDE

I’ve mentioned how I’m not the greatest fan of Eclipse, so working on a development method that doesn’t rely on it intrigued me.

Given that all the Smart TV apps consist of are pretty standard web pages, then surely it’s possible to do this without the integrated IDE and webserver?

Starting at the end and working backwards:

Web server

The SDK bundles Apache for serving the apps. I don’t really have any problem with Apache; it’s currently the most commonly used web server on the interwebs, free, and stable. I just don’t see why I’d need it to serve up an XML page and some zip files!

Looking into the contents of the widgetlist.xml from previous posts we can see that it’s just listing the contents of a Widget subdirectory. That should be easy enough to manage ourselves. I’ve decided to dive back into nodejs for a lightweight alternative.

The code I’ve used is the same as that from most of January. The one that I’ve changed is requestHandlers.js to serve the listing xml and the zip files:

requestHandlers.js[js]var fs = require(‘fs’);

// build the full xml file
function widgetlist(response, notused, request) {
console.log("Request handler ‘widgetlist’ was called");
var packageDir = "packages";

BuildPackageXml(__dirname, packageDir, request, function(packageXml){
var content = ‘<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r\n<rsp stat=\’ok\’>\r\n<list>\r\n’ + packageXml + ‘\r\n</list>\r\n</rsp>’;
var headers = {
"Content-Type": "application/xml",
"Content-Length": content.length
};
response.writeHead(200, headers);
response.end(content);
});
}

// build the xml for each package, getting the stats for each zip
function BuildPackageXml(directory, packageDir, request, callback){
var filesData =”;
var host = request.headers.host;

fs.readdir(‘packages’, function(err, files){
files.forEach(function(file){
console.log(‘found: ‘+ file);
var stats = fs.statSync(directory + ‘\\’ + packageDir + ‘\\’ + file)
filesData += ‘<widget id="’ + file + ‘">\r\n’ +
‘<title>’ + file + ‘</title>\r\n’ +
‘<compression size="’ + stats.size + ‘" type="zip" />\r\n’ +
‘<description>’ + file + ‘</description>\r\n’ +
‘<download>http://’ + host + ‘/Widget/’ + file + ‘</download>\r\n’+
‘</widget>’;
});
callback(filesData);
});
}

// serve the zip file
function widget(response, path) {
console.log("Request handler ‘widget’ was called for " + path);

var packageDir = "packages";
var packagepath = __dirname + ‘\\’ + packageDir + ‘\\’ + path.split(‘/’)[2];
var widget = fs.readFile(packagepath, ‘binary’, function(err, data){

var headers = {
"Content-Type": "application/zip",
"Content-Length": data.length // to avoid the "chunked data" response
};

response.writeHead(200, headers);
response.end(data,’binary’);
});
}

exports.widgetlist = widgetlist;
exports.widget = widget;[/js]

This will give us the same XML and also serve the Zip files; they don’t even need to be in the Widgets subdirectory since we’ve implemented basic routing here.

Problems encountered

my general inability to comprehend node’s inherently async implementation caused me much confusion throughout this development
xml generation node modules over-complicates what is a very basic file; hence why I went for inline
getting the content-length header is important if you want to avoid the "content chunked" response in your http request for the zip file; the smart tv isn’t so smart in this scenario.

Generating the packages

Moving backwards another stage we get to the generation of the zip files themselves. This should be easy, but again I over-complicated things by trying to implement js-zip using node-zip to recursively traverse the directory containing my work files. Async recursive archive creation was a bad idea for a Sunday evening so I should have instead opted for firing a command line call to the OS’s built-in archive-er.

Luckily my code had at least abstracted this functionality out so I could easily replace it with another implementation. The code in my git repo uses this implementation, which appears to create the archive, but that file is apparently corrupt/invalid; patches/forks/pull requests welcome!

pack.js
[js]var fs = require(‘fs’);

// main function – loop through the root package dir and create one archive per sub directory
// (assumption is that each sub dir contains one entire project)
function createPackages(rootDirectory)
{
fs.readdir(rootDirectory, function(err, files)
{
files.forEach(function(item){
if (item.indexOf(‘.’) != 0)
{
var file = rootDirectory + ‘\\’ + item;
fs.stat(file, function(err,stats){
if (stats.isDirectory()){
console.log(‘** PACKAGE **\n’ + item);
createPackage(item, file, rootDirectory);
}
});
}
});
});
}

// create each zipped archive
function createPackage(packageName, path, rootPath)
{
console.log(‘* PACKING ‘ + packageName);
var zip = new require(‘node-zip’)();

var archive = zipMe(path, zip);
console.log(‘** ARCHIVING’)
var content = archive.generate({base64:false,compression:’DEFLATE’});

fs.writeFileSync(rootPath + ‘\\’ + packageName + ‘.zip’, content);
console.log(‘saved as ‘ + rootPath + ‘\\’ + packageName + ‘.zip’);
}

// recursive function to either add a file to the current archive or recurse into the sub directory
function zipMe(currentDirectory, zip)
{
console.log(‘looking at: ‘ + currentDirectory);
var dir = zip.folder(currentDirectory);

var files = fs.readdirSync(currentDirectory)

files.forEach(function(item){
if (item.indexOf(‘.’) != 0)
{
var file = currentDirectory + ‘\\’ + item;
var stats = fs.statSync(file);
if (stats.isDirectory())
{
console.log(‘directory; recursing..’)
return zipMe(file, dir);
}
else
{
console.log(‘file; adding..’)
dir.file(file, fs.readFileSync(file,’utf8′));
}
}
});

return dir
}

exports.createPackages = createPackages;[/js]

Using a different IDE

This is slightly more difficult; the SDK creates a bunch of files automatically (.widgetinfo, .metadata, that sort of thing). This does add an extra manual step, but isn’t impossible.

One thing I couldn’t actually get around is the debugging and testing locally; the commands being passed to the emulator aren’t easy to manipulate. When you choose to run the emulator from within Eclipse the only parameter passed is something which tells it you’re running it from Eclipse; nothing handy like a path or filename, dammit!

Summary

I realise I went off on a tangent in this post and I’ll explain more in the next one. However, we’re now at a point where we can save our project files *somewhere* (locally, on the LAN, on the interwebs – so long as you have the IP on their location) and spin up a nodejs script to serve them upon request to our TV.

The code from this post is over on github here https://github.com/rposbo/basic-smart-tv-app-server

Next up

Conclusion of February – why I had that huge gap in the middle, and why it went off on a massive tangent!

Smart TV 101 : Part #3 – Deploying to TV

I’m committing to doing 12 months of “101”s; posts and projects themed at beginning something new (or reasonably new) to me. January was all about node development awesomeness. February is all about Smart TV apps.

Deploying to a TV

Now that we’ve got a basic Smart TV app this post will investigate how to get that app on to the TV itself.

Packaging using the IDE

During the initial installation of the IDE you will have been asked to installed Apache; this is what it’s all been leading up to! You actually just need a web server on your home network somewhere; doesn’t have to be apache, doesn’t have to be on your developer pc.

Prerequisites

Make sure you’ve configured your Server settings within the IDE preferences:

The packaging process will drop a zip file into a Widget/ subdirectory of this directory.

Initiating package creation

As for actually creating the package, if you’re using the Eclipse IDE then you’re spoiled for choice: highlight the project in your project explorer and then either

Click the Samsung App Packaging button
Click the Samsung Smart TV SDK menu, then click App Packaging
Right click the project in project explorer, Samsung Smart TV SDK, Packaging

Whichever you do you’ll end up with the same results:

Results

Assuming you’ve set up the server settings in your preferences then you’ll end up with:

a zip file placed within the SDK installation’s Package/ directory
the same zip file placed in a Widget/ subdirectory on your configured server
a new (or updated) widgetlist.xml file in the root of your configured server’s directory

Make sure that you can browse to this file and that Apache is running by opening a browser and putting in http://<your development pc’s IP>/widgetlist.xml

Anatomy of a package and a widgetlist

So what is a package made of? Looking at the image above for the the zip file that’s created you’ll see that it looks almost identical to the contents of your application within the workspace:

So essentially the packaging step is zipping up your project directory, putting it into a specified web server subdirectory, and updating an XML file. Obviously, you shouldn’t need an IDE or SDK to do this sort of thing and I’ll be getting on to this development & deployment process without using Eclipse or installing Apache in a later post.

Deploying!!

Now that we have a package it’s time to load it on to your Smart TV. For this post I’ll be talking about deploying from the development pc via your home network, and in a later post will be talking about loading in packages externally.

TV setup

Make sure your TV is connected to your network and that your development pc’s Windows Firewall is off (or at least configured to allow local network traffic).

Turn on the TV
Go to your app hub/Smart Hub
Press the Login button
Create an account using the username “develop” and set a password

After you’ve successfully created the develop user you need to

Open the Settings menu
Open the new Development sub menu
Choose Setting server IP and enter the IP of your development PC
Choose User application synchronisation to check the apps that are listed in widgetlist.xml and install (or update) them all

You should now find your application on the App Hub screen with a little red “user” banner over it; select it to run it, just like any other app.

Smart TV 101 : Part #2 – App Development

SDK

There is a wonderfully detailed SDK document for the current latest version (v4.0) which provides the environment to develop and test apps for the 2011, 2012, and 2013 series of TVs.

This consists of an IDE (a version of Eclipse), a selection of emulators for the three series of TVs it supports, automated test tools, app packaging facilities, and a few other tools.

There are examples and tutorials for projects ranging from gesture recognition, voice recognition, adaptive video streaming, through to advertisment embedding.

IDE – Ecplise

I’ve never been a fan of Eclipse as an IDE, but I’m stuck with it at the moment since it’s part of the Samsung SDK! To be fair, it does integrate into app development process quite well.

Once you’ve downloaded it from the SamsungDForum website and installed it you can create one of three types of application:

Basic – for the less codey-types, using as visual editor. A bit like Visual Studio in design mode.
Javascript – for writing the css, html, and js code yourself; this is the one I’ll be using
Flash – strangely enough, for embedding flash into your app

Within this flavour of Eclipse is the facility to launch the current application under development directly in an emulator, and also the ability to create a package for deployment (to be covered in the next post).

Emulator

As with any project in which you’re developing an application which will be running on a system that is different to the one on which you’re developing – such as iPhone or Android apps – you’re going to need a solid emulator.

The Samsung ones are actually reasonably good. There are some reasonably advanced debugging and testing facilities built into the SDK but even just having any javascript alert display within a debug window is extremely useful.

Developing a basic app

Right, let’s get down to business.

Install the SDK
Open up Eclipse
Create a new Javascript app
Make sure you’ve selected the project in the file explorer tab (i.e., not one of the js or html files)
Click the Samsung Smart TV menu and select Open current project in Emulator

aaaaannnnd

WOW! Nothing!

Ok, let’s make it do something.

Add in a new div, give it an id, and whack in some text. This still won’t actually appear so edit the css and give it a height, width, and garish background colour.

There’s still one thing that you may need to check; I believe that this is now part of the standard base project, but in previous versions of the SDK you had to edit the Main.onLoad event and wire up a call to let the application manager know it was now ok to start showing things:
[js]widgetAPI.sendReadyEvent[/js]

My resulting HTML looks a bit like:
[html highlight=”8,9″]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AlrightMate</title>

<!– TODO : Common API –>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

<!– TODO : Javascript code –>
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>

<!– TODO : Style sheets code –>
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">

<!– TODO: Plugins –>

</head>

<body onload="Main.onLoad();" onunload="Main.onUnload();">
<div id="content">Alright mate?</div>

<!– Dummy anchor as focus for key events –>
<a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>

<!– TODO: your code here –>
</body>
</html>[/html]

and the autogenerated Main.js script has this onLoad method:
[js]Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
}[/js]

Notice the $MANAGER_WIDGET files referenced in the head; these files allow access to common object modules and are on the TV itself and installed as part of the SDK.

Try running the emulator again –

Stonking.

Developing a slightly less basic app

Using the API created in my January posts on nodejs I’m going to create a tv app which will display the results of a product search on the Asos catalogue.

The main.js file now has an updated onload method, which makes a call to the API and then passes the returned data to a new method:
[js]Main.onLoad = function()
{
var URL = "http://rposbo-basic-node-api.apphb.com/products/socks?key=" + api_key;

if (this.XHRObj != null){
this.XHRObj.destroy();
}
this.XHRObj = new XMLHttpRequest();

if (this.XHRObj) {
alert("got XHR");
this.XHRObj.onreadystatechange = function () {
alert("State changed to " + Main.XHRObj.readyState);
if (Main.XHRObj.readyState == 4) {
alert("got data");
Main.recieveData();
}
};
this.XHRObj.open("GET", URL, true);
this.XHRObj.send(null);
}

// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
};[/js]

The new recieveData method which loops through the returned product data and creates some basic html elements to display the image and title in a list item:
[js]Main.recieveData = function () {

alert("alerting data…");
var data = JSON.parse(this.XHRObj.responseText);
for(var i=0; i<data.products.length; i++)
{
var product = data.products[i];
alert("adding " + product.title);

// image
var productImg = document.createElement("img");
productImg.setAttribute("src", product.image);

// text
var title = document.createTextNode(product.title);

// link containing both
var link = document.createElement("a");
link.appendChild(productImg);
link.appendChild(title);

// list item containing link
var listItem = document.createElement("li");
listItem.appendChild(link);

document.getElementById(‘listing’).appendChild(listItem);
}
};[/js]

No jQuery here, since I don’t want to have to load it up locally on to the tv and waste precious memory.

The single html file now looks like
index.html
[html highlight=”12″]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>rposboBasicTvApp</title>

<!– TODO : Javascript code –>
<script language="javascript" type="text/javascript" src="app/javascript/key.js"></script>
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>

<!– TODO : Style sheets code –>
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">

<!– TODO: Plugins –>

</head>

<!– Dummy anchor as focus for key events –>
<a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>

<!– TODO: your code here –>
</body>
</html>[/html]
The highlighted line is just where I define my API key and refer to it in Main.js.

This subtly changed code now looks something like:

Next up – deploying to a TV

We’ve got a basic app, now it’s time to get it on to the TV!

The code from this post is available on github

Year of 101s: February – Samsung Smart TV

Part #1 – Intro

I’m committing to doing 12 months of “101”s; posts and projects themed at beginning something new (or reasonably new) to me. January was all about node development awesomeness

February is going to be all about developing applications for the Samsung Smart TV.

So what’s a Smart TV?

“Smart TV” is a term used to describe a reasonably new series of internet connected televisions introduced over the past 3 or 4 years which have the facility to install applications; these can range from media streaming (e.g., free stuff from iPlayer, ITV Player, Demand 5, youtube and premium content from the likes of BlinkBox, LoveFilm, NetFlix, Curzon OD) to video chat and VOIP (e.g., Skype), and games, facebook, twitter, TED.

There are hundreds of such applications to choose from: even a pretend log fire. Srsly.

They will also stream media from your local network (DLNA or UPNP) or from USB attached devices, and some can use a USB HDD to make it a PVR.

Samsung?

Yeah, just because I have one. They started making clever TVs back in 2007 so have it working pretty well now. I also have a Samsung phone which makes streaming content to the TV (over DLNA) really easy. It’s great to take a few photos or videos on my phone and then promptly have them appear as a slideshow on the TV.

Apps

The apps that run on the Samsung TV are basically HTML pages; the app hub itself is an html page. They can be made interactive by using either javascript or flash (yes! FLASH! Who knew that was still useful for something?!).

They can be downloaded directly from the TV’s “Smart Hub” but can also be browsed online – the array and extent of what’s been made is fascinating; this is stuff you can install on your frikkin television! This is not like the TV I grew up with..

The apps can be developed using an SDK downloadable from Samsung, which I’ll go into detail about in the next post.

Interactivity

So wait, how can you create an interactive app using Javascript, but browsing a local html file? Everyone knows that you can’t make a cross domain ajax request, so how on earth can you get dynamic data into the page?

Well, here’s the interesting thing. If you run Fiddler you’ll see that running a cross domain ajax request from a local html file actually does the request just fine and the data is returned; it’s your browser’s security configuration that says “hell no, budday.”

local html making remote ajax call:
[html]<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "http://rposbo-basic-node-api.apphb.com/products/socks?key={snipped API key}",
success: function(data) {
$(‘#category’).html(‘<h1>’ + data.category + ‘</h1>’);
}
})
});
</script>
<body>
<div id="category" />
</body>
</html>[/html]

Chrome says no

Fiddler says yes!

App Engine

The Samsung Smart TV (at time of writing) runs a specific browser called App Engine 6.0 – from the blurb in the development documentation:

When an application is displayed and behaves on the screen, its image and text generation should be controlled and managed. For Samsung TVs with Samsung Smart TV installed, it is App Engine that performs such work. An application’s behaviors and displays are made by App Engine. While Internet Explorer and Firefox are PC-based browsers, App Engine is Samsung TV-based browser.

Supported web standards
* HTML4.01, XHTML1.0, XML1.0 Markup language specifications
* HTTP1.0/1.1
* CSS1, CSS2, CSS TV Profile 1.0
* DOM1, DOM2
* JavaScript 1.6

So, the interesting part is that the cross domain ajax request security feature isn’t enabled in App Engine, which means you can execute ajax calls from the local html page to your external service and use the returned data quite happily!

Next up – App development

I’ll cover the IDE and creating a basic app.

Node.js 101: Wrap up

Year of 101s, Part 1 – Node January

Summary – What was it all about?

I set out to spend January learning some node development fundementals.

Part #1 – Intro

I started with a basic intro to using node – a Hello World – which covered what node.js is, how to create the most basic of all programs, and mentioned some of the development environments.

Part #2 – Serving web content

Second was creating a very simple node web server, which covered using nodemon to develop your node app, the concept of exports, basic request routing, and serving various content types.

Part #3 – A basic API

Next was a simple API implementation, where I proxy calls to the Asos API, return a remapped subset of the data returned, reworked the routing creating basic search functionality and a detail page, and touched on being able to pass in command line arguements.

Part #4 – Basic deployment and hosting with Appharbor, Azure, and Heroku

Possibly the most interesting and fun post for me to work on involved deploying the node code on to three cloud hosting solutions where I discovered the oddities each provider has, various solutions to the problems this raises, as well as some debugging cleverness (nice work, Heroku!). The simplicity of a git-remote-push-deploy process is incredible, and really makes quick application development and hosting even more enjoyable!

Part #5 – Packages

Another interesting one was getting to play with node packages, the node package manager (npm), the express web framework, jade templating engine, and stylus css pre-processor, and deploying node apps with packages to cloud hosting.

Part #6 – Web-based development

The final part covered the fantastic Cloud9IDE, including a (very) basic intro to github, and how Cloud9 can still be used in developing and deploying directly to Azure, Appharbor, or Heroku.

What did I get out of it?

I really got into githubbing and OSSing, and really had to try hard to not over stretch myself as I had starting forking repos to try and make a few tweaks to things whilst working on the node month.

It has been extremely inspiring and has opened up so many other random tangents for me to explore in other projects at some other time. Very motivating stuff.

I’ve now got a month of half decent blog posts – I had only intended to do a total of 4 posts but including this one I’ve done 7, since I kept adding more information as it turned up and needed to split a few posts into two.

Also I’ve learned a bit about blogging; trying to do posts well in advance allowed me to build up the details once I’d discovered more whilst working on subsequent posts. For example, how Appharbor and Azure initially track master – but can be configured to track different branches. Also, debugging with Heroku only came up whilst working with packages in Heroku.

Link list

Node tutorials and references

Setting up a node development environment on Windows
Node Beginner – a great article, and I’ve also bought the associated eBooks.
nodejs.org – the official node site, the only place to go for reference

February – coming up, Samsung Smart TV App Development!

Yeah, seriously. How random is that?.. 🙂

Node.js 101: Part #6 – Web-Based Development

Web-Based Development

Following on from my recent post about doing something this year, I’m committing to doing 12 months of “101”s; posts and projects themed at begining something new (or reasonably new) to me

January is all about node, and I started with a basic intro, then cracked open a basic web server with content-type manipulation and basic routing, created a basic API, before getting stuck into some great deployment and hosting solutions and then an intro to using node packages including cloud deployment

In my previous posts I’ve been developing code locally, committing to a local git repo and pushing to a remote git repo. This is fine for the particular situation, but what about when I’m not at my own pc and feel the need to make some changes? Maybe I’m at my dad’s place using his netbook with no dev tools installed?

Cloud9IDE

Cloud9 is an incredible web-based development environment that is so feature-rich you’d usually expect to fork out wads of cash for the opportunity to use it: LIVE interactive collaborative development in the same shared IDE (see multiple people editing a file at once), code completion, syntax highlighting, an integrated console for those useful commands like ssh, git, npm.

It’s frikkin open source too, so you could install it on your own servers and have your own private IDE for your own code, based in a web browser. How amazing is that?

It’s built on Node.js in the back-end and javascript and HTML5 at the front. I’ve been playing around on there for the past year, and it’s been improving all the time – it’s just the best thing around. Go and start using it now. There are still some bugs, but if you find something you can always try to fix it and send a pull request!

So. That’s great for my web-based development, so how about if I need to collaborate on this project with people who I’m not sharing my C9 environment with?

GitHub

If you’re not already using github but are already using git (what the hell are you playing at?!), go and sign up for this exceptionally “powerful collaboration, review, and code management for open source and private development projects.”

You configure github as your git remote, push your code to it, and other users can pull, fork, edit, and send pull requests, so that you’re still effectively in charge of your own code repository whilst others can contribute to it or co-develop with you.

Great. So how do I deploy my code if I’m using this sort of remote, web-based development environment?

Azure/AppHarbor/Heroku

Deploying to an existing Azure/Appharbor/Azure site from Cloud9IDE is the same as from your local dev pc; set up a remote and push to it! C9 has a built in terminal should the bare command line at the bottom of the screen not do it for you.

As for creating a new hosting environment, C9 also includes the ability to create them from within itself for both Azure and Heroku! I’ve actually never managed to get this working, but am quite happy to create the empty project on Heroku/Azure/Appharbor and use git from within C9 to deploy.

Coming up

Next post will be the last for this first month of my Year of 101s: January Wrap-Up – Node.js 101; a summary of what I’ve learned in January whilst working with Node, as well as a roundup of the useful links I’ve used to get all of the information.

What’s in February’s 101?.. wait and see..!

Menu

Intro

Raspbmc Installer for Windows

Download the installer

Run the installer

Set up networking

Plug it in, Go Go Go!

In summary

Installation

1. Get a raspberryPi

2. Get a linux distro

3. Put the distro on a suitable SD card

3.1 Writing the image to the SD card

3.2 BerryBoot

Checkpoint! Base Installation Complete

Starting it all up #1: Raspbian

Plug it all in

SSH

Bluetooth

1. Get a supported device

2. Setup bluetooth on the pi

2.1 install bluetooth software

2.2 scan for nearby devices

2.3 pair your pi to the device

2.4 trust the paired device so it’ll auto connect in future

WiFi

Portable Power

Summary

Next Up

Part #1 – Intro

So what’s a RaspberryPi?

Hardware

Software

Uses

How do you use it?

Next up

Year of 101s, Part 2 – Smart TV February

Summary – What was it all about?

Part #1 – Intro

Part #2 – App Development

Part #3 – Deploying Apps

Part #4 – Creating Packages without the SDK

Summary

Next Up

To IDE or not to IDE

Web server

Problems encountered

Generating the packages

Using a different IDE

Summary

Next up

Deploying to a TV

Packaging using the IDE

Prerequisites

Initiating package creation

Results

Anatomy of a package and a widgetlist

Deploying!!

TV setup

SDK

IDE – Ecplise

Emulator

Developing a basic app

Developing a slightly less basic app

Next up – deploying to a TV

Part #1 – Intro

So what’s a Smart TV?

Samsung?

Apps

Interactivity

App Engine

Next up – App development

Year of 101s, Part 1 – Node January

Summary – What was it all about?

Part #1 – Intro

Part #2 – Serving web content

Part #3 – A basic API

Part #4 – Basic deployment and hosting with Appharbor, Azure, and Heroku

Part #5 – Packages

Part #6 – Web-based development