More Pi Adventures - Icing on the cake

Navigating the XBMC menus

So by now, I have Raspbmc installed and working, and hopefully know the limits on what it can and cannot play. Now to customise/configure the xbmc install to how I want it (to match other installations on xbmc that I have through the house).

One thing that was bugging me, was the fact I needed to have a keyboard attached to actually use it. That in itself is no big deal, but im currently using the RaspPi in the bedroom, and having to use a keyboard whilst in bed gets to be a chore after a while.

So, I began to investigate what 3rd party remote controls I could purchase to use in it place. Remotes like the Harmony's apparently work great, but I don't have one, and I don't really want to spend £70+ on a remote control - even if it can control upto 15 devices.. as I say, im using this in the bedroom, so I've only got the Pi, amp, and TV..  seems a little overkill to me.

That's when I discovered that the latest version of Raspbmc also includes HDMI-CEC (Consumer Electronics Control). This essentially means that you can control multiple devices connected via HDMI with ONE remote control. I'd heard of CEC before, back when XBMC announced a year or so ago, that it was supporting CEC via an external 3rd-party attachment. Now, as it turns out, the R-Pi can also function as a CEC client out of the box, and the Raspbmc flavor of xbmc has support for CEC built-in.

Most of you with newer flat-screen TV's may already have CEC-enabled sets, the different manufactures call it by different names, Sony, for example call it 'Bravialink', and Samsung calls it 'Anynet+'

The TV that the Pi is attached to is a Toshiba, which has its own version, called 'Regza-Link'. On the remote control for the tv, there is a switch to turn it to 'Regza-link'. so, flicking the switch, I started pressing buttongs to see what would happen. Low and behold, things started to happen!

Flicking to Regza-link, I can use the D-Pad, and center button to control the Pi - No need to purchase and use another remote control, I can simply use my existing TV remote control to navigate the XBMC menus! now that is cool!

XBMC Plug-ins

On previous installs of XBMC, I've installed the BBC iPlayer add-on, and had some (mostly good) success with it. I can browse all of the iPlayer content, and stream directly onto the TV without having to hook up another machine with a web-browser to access the content.

I came across a blog post on djb31st.co.uk, that detailed what you need to do/install to get it up and running.

Following these step-by-step instructions, I had the BBC iPlayer, ITV Player, 4od and Demand 5 catchup services running in no time, with no issues!

And, by using the HDMI-CEC above, I have effectivley got one of the newer swanky 'Smart-TVs', with just a £25 computer.

More Pi adventures - streaming videos

More adventures with the Raspberry Pi

So, in my previous post, I showed how to get XBMC media center installed onto the SD Card for your Raspberry Pi.

Now comes my thoughts, after using it for a short while.

Non-x264 encoded files

I only have xvid-encoded video files to test with, so i'm not sure how other encoded files will perform.
Streaming xvid-encoded files over the network provided rather pleasing results.. for the most part, I can play these files just fine.

I did have a couple of files that would buffer every few seconds, effectivly making watching the show impossible. However, I couldn't be sure if it was a) an issue with the Pi, b) an issue with that particular file, or c) network-related issues. - more investigation is required at a later date.

Generally speaking, playing xvid files is nigh on perfect.

Verdict: Awesome!

x264 encoded files

So onto x264 encoded files. If the file has been encoded with the x264 codec, then the Pi can use its hardware-accelerated GPU to do all of the decoding (which is good), leaving the rather weak CPU to do other things. I have a few different files that have been encoded this way, namely:

• 256-400mb TV shows (contained within the Matroska format)
• 5-8GB bluray rips (again, contained within the Matroska format)
• 15-40GB .m2ts files, ripped straight from a bluray disc.

The TV Show files all played without issue, with hardly a burp from the Pi. So far so good!

The bluray rips also played without issue, which was a suprise. I was expecting these to either fall over, or start buffering left,right and center.. but no, they were all good.

The only issue comes with the full-fat Mpeg streams taken directly off a bluray disc, with no re-coding or converting. My other HTPC plays these fine over a wired network.. wireless is a different matter (but thats for another post).
Most, if not all exhibited some form of stuttering, showing itself as buffering every few seconds. Now, at this point I'm not sure if its network related issues, or the Pi just can't cope with the rather large bit-rates found in these epicly big files.
At some point, i'm going to try copying a file to the SD Card, and running from there, to see what happens.

Verdict: For the most part, Awesome! - .m2ts files don't work too well, but I wasn't expecting it all to work on such a low powered device.

Rich's adventures with the Raspberry Pi

Rich's Adventures with the Raspberry Pi

For the un-initiated, the Raspberry Pi is a small, credit-card sized computer designed for low-cost entry for children/students to get the ball rolling with computer programming.

The Raspberry Pi contains:

• HDMI socket
• RJ45 (Ethernet) port
• Micro-USB socket
• Composite video output
• 2x USB sockets
• SD card socket
• 256MB Ram (newer models now contain 512MB) 
• 700Mhz CPU
• 3.5mm Headphone jack for audio-out

The best thing about the Pi, is that it also contains a hardware-accellerated GPU, so that the playing of x264-encoded video files will play absolutly fine (even 1080p ones!)

With no internal storage, all software is installed and executed from the SD card, so a card of at least 4GB is recommended.

XBMC

This leads me on to the reason I purchased one. A small, cheap, media center.
It was never my intention to start coding on it (I do enough coding as it is, as part of my day job ;)
If you've not come across XBMC before, then its well worth a look. XBMC is an open-sourced media center application that has installers for Windows, Mac, iOS (iPhone, iPad, Apple TV/Apple TV2), Linux, and now, ARM-based processors.

I've been using XBMC for years, ever since it first started on the original Xbox 1, way back when it was called 'Xbox Media Player'. The original Xbox has now been dropped, but losing a 10+ year old console has enabled them to branch out, and add more and more features.

Installing XBMC

Doing a little research beforehand, I discovered Raspbmc, a small Debian-based linux package that has most of the the un-needed elements removed, and the XBMC code added.

Installing XBMC to the SD Card is simple enough.. download the installer from the download section of Raspbmc. Once downloaded, just run the installer. (if your installing from windows, and you have UAC active, then you should run it as Administrator)

Execute the installer, and you should end up with a screen like below:



Your SD card should be the only item displayed on the list, so go ahead and select it, and hit 'Install'.

This will download the installer files, and create a bootable image directly on the SD Card.
Once this is done, bop over to your Pi, pop in the SD Card, and boot up.

One thing to note, is that a network connection is required for this install, so make sure that your network cable is plugged in prior to powering on.

The installer should then start running. What it does here, is connect to the Raspbmc site and download the latest version of XBMC (which at the time of writing, is v12 [frodo] beta).

This will take a few minutes, so like the installer says, go grab a coffee ;)

Just leave it to do its thing, and all being well, when you return XBMC will be all correctly installed and ready to go.

Simples!

PHP + MSSSQL issues

PHP + MSSQL unicode issues...

Last night, I was tinkering with using MSSQL with PHP.
All was going great.. created my database tables, created the stored procedures that were required for the project etc.

Now, the time to test out these stored procs was here. Slap a little php code together to connect to the database, and execute the stored procedure, when I was greeted with the following error message:

 Warning: mssql_execute(): message: Unicode data in a Unicode-only collation or ntext data cannot be sent to clients using DB-Library (such as ISQL) or ODBC version 3.7 or earlier. (severity 16)  

Well.. this wasnt what I expected to see!

A bit of googling later, and the overwhelming suggestion was to cast my NTEXT fields as TEXT.
There's just one problem with this. None of my fields were NTEXT. (They were all NVARCHAR)

I gave it a whirl, modified my stored procs to cast to text, and retried. And the same error.Back to the drawing board. (in this case, more Googling).

A few more posts read later, FreeTDS 4.2 doesnt support unicode data. V8.0 does. So, lets change the version. Edit your freetds.conf file.. mine was located in

 /etc/freetds.conf  

I SFTP'ed the file down to my machine, and opened in text editor.

Mine looked a little like this:

 #  $Id: freetds.conf,v 1.12 2007/12/25 06:02:36 jklowden Exp $  
 #  
 # This file is installed by FreeTDS if no file by the same   
 # name is found in the installation directory.   
 #  
 # For information about the layout of this file and its settings,   
 # see the freetds.conf manpage "man freetds.conf".   
 # Global settings are overridden by those in a database  
 # server specific section  
 [global]  
     # TDS protocol version  
 ;     tds version = 4.2  

Ah-ha! 4.2! - lets change that bad boy to 8.0.

 ;     tds version = 8.0  

Re-upload, and refresh my page...
..
..
And, still the same.

Thats when I noticed the semi-colon at the start. Now, me not being particularly up on linux, or tinkering with linux config files, I wasnt sure what the semi-colon meant.
As things turn out, its a comment.. so all text after it is ignored.  I knew that hashes (#) were comments, but didnt know about semi-colons. So what's the difference? Comments starting with # are a proper comment, and those starting with a ; character, indicate that this is a default value for an attribute.

Ah-ha! so, this is saying that the default value for the 'tds version' is 4.2.. I don't want to set a comment to show its default value, I want to set it.. simply remove the semi-colon, save, and re-upload.

 #  $Id: freetds.conf,v 1.12 2007/12/25 06:02:36 jklowden Exp $  
 #  
 # This file is installed by FreeTDS if no file by the same   
 # name is found in the installation directory.   
 #  
 # For information about the layout of this file and its settings,   
 # see the freetds.conf manpage "man freetds.conf".   
 # Global settings are overridden by those in a database  
 # server specific section  
 [global]  
     # TDS protocol version  
      tds version = 8.0  

Refresh your page, and BINGO! proper text coming through from your stored procs :)

A few Google Maps tools / handy websites

I've been working with Google Maps a fair bit recently, and during my researching / development, I've come across a few handy websites.

http://www.birdtheme.org/useful/v3tool.html

Useful site for plotting points on a map. I've used this for generating "custom-routes", that do not stick to streets/paths

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

This is very useful site for styling the actual maps. from Google, this allows you to hide/show elements, and change colours of just about everything. Once you are done, you can click the 'show JSON' button to get a json object of your styles that you can import into your project.

http://www.cycloloco.com/shadowmaker/shadowmaker.htm

Handy site for generating shadows for custom placemarker images. Upload your image, and it will generate a shadow image. The second handy part, is that it will give you the code to place into your page for your marker, shadow et al.

Let me know if you discover any more!

Extending Google Maps' InfoWindow

Google Maps' InfoWindow...

... is good, in that you don't really need to do any extra work to get a popup to appear on a map.

But, What happens when you want to customize it? - sure, you can put whatever content you like inside the infowindow, but your stuck with the standard white box with trail arrow.. you know the one..



yeah.. that one!

I came across a very handy plugin the other day, the InfoBox plugin.

This plugin replaces the default InfoWindow object in google maps, but crucially, allows you to specify the complete HTML that makes up your popup window.

To use the infobox plug, download a copy of the source, and reference in your page:

 <script src="/path/to/infobox.js" type="text/javascript"></script>  

Then, in your code, create an instance of this object:

 var ib = new InfoBox();  

You can then call that in place of the regular infoWindow.open()

 ib.open(theMap, marker);  

however, the power of this control comes with the options. Have a check over the API Reference for the full details.

with the InfoBox options, you can

Here's a snapshot of the example from the InfoBox site:

     var myOptions = {  
          content: boxText 
         ,boxClass : 'infoBoxClass' 
         ,disableAutoPan: false  
         ,maxWidth: 0  
         ,pixelOffset: new google.maps.Size(-140, 0)  
         ,zIndex: null  
         ,boxStyle: {   
          background: "url('tipbox.gif') no-repeat"  
          ,opacity: 0.75  
          ,width: "280px"  
          }  
         ,closeBoxMargin: "10px 2px 2px 2px"  
         ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"  
         ,infoBoxClearance: new google.maps.Size(1, 1)  
         ,isHidden: false  
         ,pane: "floatPane"  
         ,enableEventPropagation: false  
     };  

The main ones you want to look at are the 'content', and infoBoxClearence.

the "content" option specifies the actual HTML content that will be displayed in the popup.
Define your HTML markup inside your script, and then point it to the "content" element.

Here, I've taken the example from the API examples page:

     var marker = new google.maps.Marker({  
      map: theMap,  
      draggable: true,  
      position: new google.maps.LatLng(49.47216, -123.76307),  
      visible: true  
     });  
     var boxText = document.createElement("div");  
     boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";  
     boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";  
     var myOptions = {  
          content: boxText  
         ,disableAutoPan: false  
         ,maxWidth: 0  
         ,pixelOffset: new google.maps.Size(-140, 0)  
         ,zIndex: null  
         ,boxStyle: {   
          background: "url('tipbox.gif') no-repeat"  
          ,opacity: 0.75  
          ,width: "280px"  
          }  
         ,closeBoxMargin: "10px 2px 2px 2px"  
         ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"  
         ,infoBoxClearance: new google.maps.Size(1, 1)  
         ,isHidden: false  
         ,pane: "floatPane"  
         ,enableEventPropagation: false  
     };  
     var ib = new InfoBox(myOptions);  
     ib.open(theMap, marker);  

 You can see that 'boxText' variable contains HTML elements. This is what is output to your infobox.
One thing to bear in mind, is that the HTML you provide here, will be wrapped inside of a <div> element.
If you do not specify a 'boxClass' option, then the default will be ".infoBox". Of course, specify your own if you like.

This means that you can style both the outter element, and the inner content as you please.

So, with some custom CSS, you can make rather fetching (or at least, different to the standard infowindow)

Footnote: 

Writing out your markup directly in javascript like above, can be tedious. Especially if you want to put a large amount of content into said infobox.

A better alternative to this is to use Templating. One plugin we've used recently is Handlebars. Go check it out. It makes working with HTML inside of javascript/jquery much much easier