Sunday, 7 February 2010

Running Bottle Python Micro-Framework on Dreamhost

I've been experimenting with various micro-frameworks for a few weeks now and the one that really stands out is Bottle. Bottle is a single file framework with no external dependencies, this is perfect for my needs and allows for a nice clean application. However, as I chose Dreamhost as my hosting provider (not my smartest moment), running python applications on their environment can be a headache as I found when trying to install Django.

The good news is it's pretty simple to set-up Bottle on Dreamhost and I'm documenting the process here for future reference.
  1. First, manage you domain in the Dreamhost web panel, setting PHP mode: PHP 5 (FASTCGI).
    Note: I know you can use Passenger for better performance but I was just trying to get the framework running.

  2. SSH into your domain and download the latest version of Bottle (0.64 as of this post)
    cd example.com
    wget http://pypi.python.org/
    packages/source/b/bottle/bottle-0.6.4.tar.gz
    mv bottle-0.6.4/bottle.py ./
    
  3. Create an index page what will be used as your main application. This uses Python 2.5's wsgiref so make use you path to python2.5 in your file header.
    vim index.py
    #!/usr/bin/python2.5
    import bottle
    from bottle import route
    @route('/')
    def index():
        return 'Hello World!'
    if __name__ == '__main__':
        from wsgiref.handlers import CGIHandler
        CGIHandler().run(bottle.default_app())
    
  4. Make the Python script executable
    chmod +x index.py
  5. Add a .htaccess file to redirect URLs to your index.py application
    DirectoryIndex index.py
    <ifmodule mod_rewrite.c="">
    RewriteEngine on
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ /index.py/$1  [L]
    </ifmodule>
    
That should be all you need to get going. I've used the above method to get a test application up successfully but it's still early days. The Bottle tutorial is a useful starting point and Dreamhost's wiki page contains useful information about enviroment configuration.

    Saturday, 6 February 2010

    Building the Pong Electonics Kit

    After entering the world of electronics with my first project, I was eager to move onto something a little more complicated. Luckily, a Christmas gift from my girlfriend provided the answer, the Classic TV Game or Pong to you and me.


    The concept of the kit is simple but brilliant. Once you've put together and soldered all the componets in the kit you're rewarded by hooking it up to the TV and playing virtual tennis against the computer or friends.

    As with the previous MiniPOV kit, construction was relatively simple but that's kinda the point. These kits are designed as an introduction to electronics and allow you to practice soldering on real circuit boards. While I'm very new to electronics I have learnt some basics points:
    1. A clamp that holds the board in place is essential (magnifying glass is a bonus)
    2. Flux is your friend
    3. A multimeter is a trusted companion that helps put your mind at ease during a build
    4. Lighting is very important. Lots of good strong light on your build makes life a lot easier
    One of the unexpected outcomes I've noticed while building these kits is the relaxing effect they have. I spend a lot of time coding wed sites, jumping from social network updates to emails, only giving each one some of my attention. However, when building these kits I become very focused, especially when soldering. A steady hand, precision and full concentration is required for quality solders and I find this level of focus very relaxing.

    For my next project I've decided to ramp up the difficulty, and hopefully the fun, by building a robot. The term robot is a little misleading here as it's actually two motor powered wheels and half a ping-pong ball. Nevertheless, the construction and programming are significantly more complex and should provide a worthy challenge.

    Thursday, 21 January 2010

    Facebook Army ID Card Image Generator



    The Idea

    To explore what was possible using the Facebook Connect API, I decided to create a Army ID Card image generator. Users would either visit the Facebook application page or log-in via Facebook connect, then a JPEG image would be generated using their profile photo and details.

    Technology

    The application uses two core technologies, Facebook Connect's API and the PHP GD library. User's information is requested from Facebook via the API, this includes their profile photo, name, age, and home town. The JPEG image is then generated by a process of laying multiple PNG images, TrueType font rendering and a series of colour filters.

    Within Facebook an application is created that ties all the technologies together and allows users to visit, bookmark and discuss the application.

    Code

    The first task was to extract user information out of Facebook. Facebook helpfully provide a PHP library that ties into their API allowing for object-orientated access directly from your own application. Once I had setup a developer account with Facebook and generated the necessary API keys, accessing the gamut of user's data was relatively simple. With the user data to hand, the next step was to generate the image, this is where PHP GD came in.

    The idea was to start with a base image then add layers of text and imagery to create an authentic old looking Army ID card. I PhotoShopped a real World War II ID card, removing the photo and personal details. The coordinates for the photo location and text fields were recorded in preparation for later. Once I had a base background image, I began coding the PHP to load this image and then overlay the Facebook user's profile photo on top. It was then a process of adding additional layers on top, building up a composite image.



    Several colour filters are applied to both the user's profile photo and to the overall image, giving an old worn look. This was achieved using various PHP GD functions, allowed for a high level of customisation and visual tweaking.

    The final stage was to export the image as a JPEG image and render it to the HTML via an IMG tag.

    Conclusion

    I originally thought this project would be difficult. Compositing image layers in code and extracting user information from Facebook connect sounded like mammoth tasks. However, with a combination of well written documentation and access to software libraries, the project turned out to be a lot simpler than I had imagined.

    The code is not production level by any means. There are a lot of improvements that could be made, especially to CPU performance but as a proof of concept it turned out pretty well. I'd like to further this project, adding the ability for users to customise the image themselves, choosing which image to use, setting colour levels and then posisitioning elements via JavaScript drag and drop.

    The live demo can be viewed at:  http://apps.facebook.com/armyidcard/

    Wednesday, 20 January 2010

    Twitter Trends Web App



    The Idea

    Twitter is a fantastic source of real-time information. With millions of active users, receiving information can be difficult. While Twitter does provide search functionality, a site based embedded solution would provide greater flexibility for site owners and could act as secondary information for site visitors. With this in mind I set about coding a real-time twitter application what could filter live tweets and display them in a dynamic waterfall.

    Technology

    At the core of the application is Twitter's API. Search strings are passed to the API and the latest tweets that contain those keywords are returned. The API is polled every few minutes and newer tweets added to a queue.

    Both the AJAX polling and the HTML DOM displaying of the tweets are handled by jQuery. I created an object namespace which contain the variables and methods, this allows for the inclusion of the application with site that has additional JavaScript applications running. The whole application is initiated on page load and the polling starts upon a user search.

    As an added bonus, current trending topics are included on the page. These trends are an additional service of the Twitter API provides.

    Code

    The entire application uses client-side JavaScript to poll a remote server and display the returned results in the client's DOM.

    A unique URL is constructed using the API address and search keywords, this is then sent to the Twitter API via a GET request which is handled byjQuery's getJSON method. While cross-domain JavaScript calls can be troublesome, the jQuery getJSON method happily mitigates this issue.

    Once the JSON has been received, the tweets are added to an array. Then, using a setInterval, the first tweet in the array is removed and added the to DOM with a dynamic show animation.

    To prevent twitter user profile images from 'popping' in due to delayed loading, they are pre-cached upon a successful GET response. To achieve this the images are append to the DOM inside a DIV that is hidden from the users view. Added the images to the DOM causes the client browser to download and cache the image.

    I also added 'pause' function to allow users to pause the flow of tweets. At any time the user can click on a tweet and it will pause the flow, highlighting that particular tweet. Clicking on the tweet again willun-pause and return the flow into motion.

    Conclusion

    Overall I'm happy with how the application turned out. I created it to learn more about the Twitter search API and visualise the real-time nature of the twitter stream, which I achieved. I learnt a lot from the AJAXJSON GET requests, most important was the handling of error responses. Initially I was assuming I would always be receiving 200's but Twitter has a limit to the number of request you can ask from every hour. Therefore, catching error code and gracefully handling them is an important part of any web based application.

    Firebug's Net view was invaluable during development, providing detailed insight into variables passed via HTTP GET request and responses. Additionally, using Firebug's built in console.log() method to print variables to the console window helped speed up the debugging process.

    Going forward the application could be developed further by integration with CMS Widgets for the likes of Wordpress and iGoogle. Additionally, the search results are not being caches, so the hourly API limit is likely to be hit quickly under heavy use. Creating a intermediate layer that stored the results in a database would elevate this issue.

    You can view the application for yourself at http://experiments.coderonfire.com/live_twitter_search/

    Monday, 18 January 2010

    Building the MiniPOV v3

    For a long time I've been interested in electronics, it comes with the geek territory. So when I read about the Arduino electronics platform and it's ability to be programmed via Processing I was very excited. However, I decided to start small and build up my non-existent electronic skills.

    To develop my skills I bought a MiniPOV v3 kit, this is a little kit designed to teach soldering, programming micro-controls and is just fun play with. In total, the kit took around five to six hours to construct and flash.

    At first the soldering rather difficult and resulted in a few messy joints, but over time I got better, with faster and cleaner solders. While not perfect, it did work first time. I decided to document the process with a serious of photos and videos.




    Once the kit was built, the final stage was to program the micro-controller. The device is connected the the PC via USB to Serial port converter (bought with the kit) and flashed with a C compiled hex file. The message is stored in the source code as a two-dimensional array of eight binary values per row. Each binary value represents a single LED and each row is a strip of LEDs.

    For example:
    b8(00000001) # All LED's off except for the last one

    To write out a simple message such as "HELLO" you need to create each row and work out which LED's are on and which are off, this can become very tedious for longer messages. Therefore, I quickly coded a MiniPOV Online Text Generator. This tool allows you to simply build up a messages by clicking on boxes and then generating the required C code ready to be pasted into the source code. Nice and easy.

    I use the Linux distro Ubuntu as my OS, this made programming the MiniPOV relatively easy. The first thing is to install the required software: gcc, avrdude, avr-libc, binutils-avr and gcc-a (for Windows or Mac,  the official MiniPOV site has more details). With all the required software installed, it was a simple matter of overwriting the table image[] in mypov.c file with the custom code generated earlier, compiling the code and flashing the device.

    I thoroughly enjoyed the whole process, learnt a lot and developed a bunch of new skills. Now I'm really excited to move on to my next project, a two-player Pong kit that hooks up to your TV via  S-Video. It's going to be awesome.

    Wednesday, 13 January 2010

    In Search of a Simple Web Framework

    I've worked with many CMS and web framework solutions in my time, Wordpress, TypePad, Textpattern, CakePHP, Django to name but a few. And one of the things learnt is that the balance between functionality and complexity is difficult to achieve.

    The problem I've often encountered is websites often start of with limited requirements that grow over time. A four page static website might later want content management, then a blog, comment moderation, photo uploads and so on. Pick a too restrictive solution and you'll end up being locked out of later expansion. Choose a complex solution and you risk making updating content a chore. Solutions that support a plug-in architecture, such as Wordpress, elevate some these issues but they require regular maintenance and can be prone to security woes.

    In the past I would turn to PHP to fill the gap. A couple of includes here and there often gets the job done but the resulting mess is difficult to maintain. Dedicated web frameworks can help in these situations. Django and CakePHP are ones that spring to mind but again, because they aim to cater to a large audience they often feel bloated with a lot of redundancy for simple sites.

    As of now I'm looking at CherryPy and Bottle as lightweight solutions that will abstract the code from design while not being overkill for the simple sites I'm working on. I'll write up my experience with these solutions in a future post.

    Friday, 8 January 2010

    Borderlands: The Game that Brought Me Back to PC Gaming


    It has been a while since I've played any PC games seriously. Half-Life 2: Episode 2 was the last game I invested any real time into. Since getting a PS3, most of my gaming has been sunk into Call of Duty 4, Drake's Fortune and Wipeout HD. So, when a pub conversation with friends turned the merits of Borderlands and its exceptional co-op play, I had to investigate for myself.



    For those who don't know, Borderlands is a FPS/RPG. Think Diablo meets Serious Sam. There are four character classes, Solider, Sniper, Heavy and Mystic. While each class has tailored abilities, you are free to shape them to your own personal preference.

    There is a large emphasis on loot. Weapons are randomly generated and you will find yourself constantly debating which weapons to keep and which to sell. Weapons can all so have elemental bonuses such as Fire, Shock, Corrosion and Explosion. These elemental properties lead to a strong strategic part of the game as you will face ememies which are weak or immune to particular elements.



    What really got me excited and brought me back to PC gaming was the promise of four player online co-op play. At any point in the game you can invite up to three friends to join you in-game. The difficulty and loot will change dynamically to accommodate both the number of players and the varying character levels. We decided to each create a dedicated charter for co-op play and work through the game together. Using Skype for voice communication, we all fired up the game and started playing and it has been one of the most enjoyable PC gaming experiences I've every had.

    I guess I'm a little late to the co-op gaming scene, with several console games already supporting this mode. However, the wimiscal nature of the Borderlands' story and the stylised look struck a cord with me. The game gets the blance right between hardcore FPS, with extremly satisfying headshots and intense battles, and a RPG leveling system that sees you planning your progression and managing weapons and shields before each battle.

    With around ten hours sunk into the game so far, I can say that I'm enjoying Borderlands a lot more than other, more high profile games launched around the same time. Yes, there's a paper thin plot and some graphical issues, but there is an addictive quality that sees quick ten minutes games spin off into four hour sessions. Throw four player co-op into the mix and you've got one hell of a fun game.