Aventures Logicielles

ClassGrapher

2012-01-14T11:16:00.001+01:00

I have developped a small utility command line application able to generate simple class diagrams out of any set of namespaced PHP files. The goal being to have a quick way to figure out how some PHP classes were structured without browsing too much code. This is not very accurate but give you a quick big picture of the code structure.

The code can be found on github:
https://github.com/sixty-nine/ClassGrapher

The PHP parser

The class grapher does not use PHP reflection to gather inheritance information about the classes. Indeed, in order to work, PHP reflection needs to be able to instanciate the classes it loads. This is not possible if you have missing dependencies in your project.
The goal of the grapher was to draw the structure of any PHP files.
Thus I implemented a simple recursive parser for only the parts of the PHP language that were needed for the grapher (basically any "use", "namespace", "class" and "interface" statement).

Using composer to download vendors libraries

Composer is a PHP utility used to manage project dependencies.
See composer website.

The idea is simple.

You download the composer.phar binary to the root of your project, then create a composer.json file describing the dependencies of the project and finally run the command:

./composer.phar install

This will automatically download the dependencies as well as create an autoload file for your project.

Example of composer.json file

The grapher project uses the smyfony/console component from the Symfony2 framework. Additionnaly we would like to autoload the files of the project.

The corresponding composer.json file looks as follow:

{
    "require": {
     "symfony/console": "2.0.7"
    },

    "autoload": {
        "psr-0": {
            "LazyGuy\\ClassGrapher": "src"
        }
    }
}

This file will indicate to composer that the library "symfony/console" version "2.0.7" must be downloaded to the project directory. Furthermore any class in the namespace "LazyGuy\ClassGrapher" will be searched in the "src" directory.

Be carefull, this is JSON, you cannot add extra coma at the end of a list if there is no successor in the list (in PHP you can).

Using travis for continuous integration

Travis is a free, lovely continuous integration online service that provides seamless integration with github.

All you need to do is:

Register to travis
Go to github and enable the travis hook
Create a .travis.yml file to indicate to travis how to run the tests of your app

This will cause any github commit in your project to trigger a build on the travis continuous integration server. Travis will run your tests in two PHP environments:

PHP 5.3
PHP 5.4

The .travis.yml file

This file must indicate to the travis server how to build your project.

In our case, travis must download the dependencies with composer and then run the tests

language: php
php:
  - 5.3
  - 5.4

before_script:
  - wget http://getcomposer.org/composer.phar
  - chmod +x composer.phar
  - ./composer.phar install

script: phpunit -c src/LazyGuy/ClassGrapher/Tests/

The language section indicates which is the language of the project. The "php" key lists the PHP versions to run the tests against. The section "before_script" tells to travis what to do before running the tests (here it will download composer and then run the install command). Finally the "script" section indicates the command to run the tests.

Once you configured travis, any commit to github will cause travis to build the project, run the tests, and report success or failure.

Isn't that lovely?

Experiments with the Arduino - Multiplexed leds

2011-12-08T10:31:00.001+01:00

Introduction

In a previous experiment I was controlling 5 leds using 5 outputs of the Arduino. With the help of a 4051 multiplexer it is possible to control up to 8 leds using only 3 outputs.

Basically a multiplexer is an electronic device that can send it's single input to one of it's height outputs. The active output is selected by sending a binary number from 000 to 111 to the three control pins of the multiplexer.

Wikipedia will tell you everything you ever wanted to know about multiplexers.

The schematic

This image was generated with the awesome Fritzing application.

The code


int pinA1 = 8;
int pinA2 = 9;
int pinA3 = 10;

void setup() {                

  for(int i = 1; i <= 10; i++) {
    pinMode(i, OUTPUT);
    digitalWrite(i, LOW);
  }

  digitalWrite(2, LOW);  // Ground
  digitalWrite(3, HIGH); // Power
  digitalWrite(4, HIGH); // Mux input to send to the leds
}

void ledOn(int nr)
{
  int r0 = nr & 0x01;
  int r1 = (nr >> 1) & 0x01;
  int r2 = (nr >> 2) & 0x01;

  digitalWrite(pinA1, r0);
  digitalWrite(pinA2, r1);
  digitalWrite(pinA3, r2);
}

void loop() {
  for (int j = 0; j < 8; j++) {
    ledOn(j);
    delay(50);
  }
  for (int j = 7; j >= 0; j--) {
    ledOn(j);
    delay(50);
  }
}

Demo

Website screenshots with PhantomJS

2011-11-01T09:48:00.010+01:00

Introduction

PhantomJS is an headless (i.e. without frontend) web browser based on Webkit with a Javascript API. It is mainly used for headless testing of webpages. It also allows the capture of a webpage into PNG, JPEG, and PDF files.

Compiling PhantomJS

Please follow the instructions here.

sudo apt-get install libqt4-dev libqtwebkit-dev qt4-qmake
  git clone git://github.com/ariya/phantomjs.git && cd phantomjs
  git checkout 1.3
  qmake-qt4 && make

Rasterize a website

The script to render a website to a file is provided as an example of PhantomJS. The code and explanations can be found here.

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 600, height: 600 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

Now run:

bin/phantomjs rasterize.js http://aventures-logicielles.blogspot.com test.png

And magically you will see the file test.png appear on your disk.

This is absolutely awesome, we just created a screen capture of the website. However this will capture the whole page, and that means for a blog, a very long image. The above will produce an image of 1000 pixels per 15'000+ pixels (2.3Mb).

Getting only the head of the page

With a small modification to the script we can render only the first part of the page. This is possible by setting the clip rectangle before rendering the page. Let's use the page.clipRect function just before calling render as explained on StackOverflow.

var page = new WebPage(),
    address, output, size;

if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 800, height: 600 };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
  // ----- CHANGE HERE -------------------------------------------
  page.clipRect = { top: 0, left: 0, width: 800, height: 600 };
  // -------------------------------------------------------------
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

This will produce images of 800 x 600 pixels with an acceptable size (here 360Kb).

Here we go

Let's try the script on my three blogs.

First observation, the third screenshot contains a big grey area where there was originally a youtube video. Apparently the rasterize script is not able to grab it.

Create a screenshot from Apache

The next step is to try to grab a screenshot from within a php script running in Apache. The following snippet searches for the PhantomJS binary and the rasterize script on the same path as the PHP file.

$phantomjs = __DIR__.'/phantomjs';
$script = __DIR__.'/rasterize.js';
$url = 'http://http://aventures-logicielles.blogspot.com';
$outfile = 'webss_' . uniqid() . '.png';

$command = "$phantomjs $script $url $outfile 2>&1";
$output = shell_exec($command);
header('Content-Type: image/png');
echo file_get_contents($outfile);

If you try to run the above script you will not get any result. To understand what's going on you have to var_dump the $output of the shell_exec command. You will get the following error message: "phantomjs: cannot connect to X server".

Strange, isn't PhantomJS supposed to be a headless web browser? The reply can be easily found by googleing the error string. There is an open issue with PhantomJS on *nix systems, Ariya Hidayat, the creator of PhantomJS says: "PhantomJS is not 'pure headless' yet. On Unix, it still needs X Server for font stuff, etc.".

Fortunately there is a quite simple workaround using XVFB. See here for the full explanation.

Once you have set XVFB up following the above explanations, you can modify the PHP script to use XVFB as X server.

$phantomjs = __DIR__.'/phantomjs';
$script = __DIR__.'/rasterize.js';
$url = 'http://http://aventures-logicielles.blogspot.com';
$outfile = 'webss_' . uniqid() . '.png';

$command = "DISPLAY=:0 $phantomjs $script $url $outfile 2>&1";
$output = shell_exec($command);
header('Content-Type: image/png');
echo file_get_contents($outfile);

The sequel

I wanted to play a bit more with PhantomJS and the rasterize script so I created a small Symfony2 bundle using it to create web pages screenshots on the fly. You will find the sources on github.

Take a look here !

Portability

The above code works well on my Ubuntu workstation but a friend of mine just reported the following facts:

The rasterize script causes a segmentation fault on my mac
On Debian 5 (lenny) the QT libraries are too old to use the rasterize script
On Debian 6 (squeeze) everything runs fine

Experiments with the Arduino - Led Matrix

2011-09-21T13:53:00.000+02:00

This one was way harder to implement, I wanted to simulate a led matrix with my Arduino.

The circuit

The circuit is not so difficult, basicaly you connect the anode of each row of leds to the same digital output of the Arduino and the cathode of each column of leds to the same digital output. Each led is then connected to a unique pair of digital output.

To turn a led on you just need to set the digital output for the correct row to HIGH and the output for the correct column to LOW.

This means that you can turn on several leds of the same row at the same time but you cannot turn on leds of different rows at the same time. Indeed if you set several rows to HIGH and several columns to LOW, all the intersecting pixels will be turned on, and this is not what we want.

A workaround for this problem is to use a technique named Row Scanning.

The idea is to turn on the leds of each row alternatively. If this is done fast enough, we will not perceive any flickering and we will have the feeling that all the pixels are on at the same time.

The code

The Row Scanning mechanism described above is not so difficult to implement. I decided to use a buffer to store the actual state of the pixels. The demo does not try to change the state of the digital outputs directly. Instead it changes the state of the pixels in the buffer. Then I added a refreshScreen routine that is responsible actually set the state of the digital outputs in a loop.

The problem is that the refreshScreen routine must be called periodically. This is not a problem if we don't have any delay statement in our code, because the delay statement will stop the screen refresh. Unfortunately to create a led matrix demo we definitely want to use some delay so that the user can actually see something on the led matrix.

The solution is to use an interrupt library (TimerOne) that allows to set a routine as callback for a periodic interrupt. So we set refreshScreen as the callback and we have no more problems.

#include "TimerOne.h"

const int XMIN = 2;
const int XMAX = 4;

const int YMIN = 8;
const int YMAX = 10;

int screen[3][3] = 
{
  { 0, 0, 0 },
  { 0, 0, 0 },
  { 0, 0, 0 }
};

int patterns1[][3][3] = {

  {
    { 1, 0, 0 },
    { 0, 0, 0 },
    { 0, 0, 0 }
  },
  {
    { 0, 1, 0 },
    { 1, 0, 0 },
    { 0, 0, 0 }
  },
  {
    { 0, 0, 1 },
    { 0, 1, 0 },
    { 1, 0, 0 }
  },
  {
    { 0, 0, 0 },
    { 0, 0, 1 },
    { 0, 1, 0 }
  },
  {
    { 0, 0, 0 },
    { 0, 0, 0 },
    { 0, 0, 1 }
  },
  {
    { 0, 0, 0 },
    { 0, 0, 0 },
    { 0, 0, 0 }
  },
};

int patterns2[][3][3] = {

  {
    { 0, 0, 0 },
    { 0, 1, 0 },
    { 0, 0, 0 }
  },
  {
    { 1, 1, 1 },
    { 1, 0, 1 },
    { 1, 1, 1 }
  },
  {
    { 0, 0, 0 },
    { 0, 1, 0 },
    { 0, 0, 0 }
  },
  {
    { 0, 0, 0 },
    { 0, 0, 0 },
    { 0, 0, 0 }
  },
};

int patterns3[][3][3] = {

  {
    { 0, 0, 0 },
    { 0, 0, 0 },
    { 0, 0, 0 }
  },
  {
    { 1, 1, 1 },
    { 1, 1, 1 },
    { 1, 1, 1 }
  },
};

int patterns4[][3][3] = {

  {
    { 1, 0, 0 },
    { 1, 0, 0 },
    { 1, 0, 0 }
  },
  {
    { 0, 1, 0 },
    { 0, 1, 0 },
    { 0, 1, 0 }
  },
  {
    { 0, 0, 1 },
    { 0, 0, 1 },
    { 0, 0, 1 }
  },
  {
    { 0, 0, 0 },
    { 0, 0, 0 },
    { 0, 0, 0 }
  },
};


// ----- MATRIX MANAGEMENT --------------------

void refreshScreen()
{
  for(int i = 0; i <= 3; i++) { // For each row
  
    digitalWrite(i + XMIN, HIGH);

    for(int j = 0; j <= 3; j++) { // For each column
    
      if (screen[i][j] == 1) {
        digitalWrite(j + YMIN, LOW);
      } else {
        digitalWrite(j + YMIN, HIGH);
      }
      
      digitalWrite(j + YMIN, HIGH);
    }
    
    digitalWrite(i + XMIN, LOW);
  }

}

void setPixel(int i, int j, int value = 1) {
  screen[i][j] = value;
}

void clearMatrix() {
  for(int i = 0; i < 3; i++) {
    for(int j = 0; j < 3; j++) {
      setPixel(i, j, 0);
    }
  }
}

void showPattern(int pattern[3][3]) {
  for(int i = 0; i < 3; i++) {
    for(int j = 0; j < 3; j++) {
      setPixel(i, j, pattern[i][j]);
    }
  }
}

// ----- DEMO FUNCTIONS -----------------------

void walkMatrixH(int wait, int repeat = 1) {
  for(int k = 0; k < repeat; k++) {
    for(int i = 0; i < 3; i++) {
      for(int j = 0; j < 3; j++) {
        clearMatrix();
        setPixel(i, j);
        delay(wait);
      }
    }
  }
}

void walkMatrixV(int wait, int repeat = 1) {
  for(int k = 0; k < repeat; k++) {
    for(int i = 0; i < 3; i++) {
      for(int j = 0; j < 3; j++) {
        clearMatrix();
        setPixel(j, i);
        delay(wait);
      }
    }
  }
}

void animatePattern(int wait, int patterns[][3][3], int steps, int repeat = 1) {

  for(int k = 0; k < repeat; k++) {
    for(int i = 0; i < steps; i++) {
      showPattern(patterns[i]);
      delay(wait);
    }
  }
}

// ----- MAIN PROGRAM -------------------------

void setup() {               
  
  for(int i = XMIN; i <= XMAX; i++) {
    pinMode(i, OUTPUT);
  }
  for(int i = YMIN; i <= YMAX; i++) {
    pinMode(i, OUTPUT);
  }
  clearMatrix();

  Timer1.initialize(10);
  Timer1.attachInterrupt(refreshScreen);
}

void loop() {
  
  // -------------------------------------------
  animatePattern(10, patterns3, 2, 3); // Flash

  walkMatrixH(10, 2);
  walkMatrixV(10, 2);
  
  // -------------------------------------------
  animatePattern(10, patterns3, 2, 3); // Flash
  animatePattern(10, patterns4, 4, 5);

  // -------------------------------------------
  animatePattern(10, patterns3, 2, 3); // Flash
  animatePattern(10, patterns1, 6, 5);

  // -------------------------------------------
  animatePattern(10, patterns3, 2, 3); // Flash
  animatePattern(10, patterns2, 4, 5);
}

Demo

Experiments with the Arduino - Controlling 5 LEDs

2011-09-18T15:07:00.000+02:00

The circuit

The code

void ledOn(int nr, int high = HIGH, int low = LOW) {

  for(int j = 1; j <= 5; j++) {
    if (nr == j) {
      digitalWrite(j, high);
    } else {
      digitalWrite(j, low);
    }
  }
}

void ledsOn(
  int wait,
  int l1 = LOW, 
  int l2 = LOW, 
  int l3 = LOW, 
  int l4 = LOW, 
  int l5 = LOW) {

  digitalWrite(1, l1);
  digitalWrite(2, l2);
  digitalWrite(3, l3);
  digitalWrite(4, l4);
  digitalWrite(5, l5);
  delay(wait);
}

void backAndForth(int nr, int wait, int high = HIGH, int low = LOW) {

  for(int t = 1; t <= nr; t++) {
    for(int i = 2; i <= 5; i++) {
      ledOn(i, high, low);
      delay(wait);          
    }
    for(int i = 4; i >= 1; i--) {
      ledOn(i, high, low);
      delay(wait);          
    }
  }
}

void fallingBrick(int wait, int high = HIGH, int low = LOW) {

  for(int i = 1; i <= 5; i++) {
    for(int j= 1; j <= 6 - i; j ++) {
      ledOn(j, high, low);
      for(int k = 7 - i; k <= 5; k++) {
        digitalWrite(k, high);
      }
      delay(wait);
    }
  }  
}

void boing(int nr, int wait) {
  
  for(int i = 1; i < nr; i++) {
    ledsOn(wait, 0, 0, 1, 0, 0);
    ledsOn(wait, 0, 1, 1, 1, 0);
    ledsOn(wait * 2, 1, 1, 1, 1, 1);
    ledsOn(wait, 0, 1, 1, 1, 0);
    ledsOn(wait, 0, 0, 1, 0, 0);
    ledsOn(wait * 2, 0, 0, 0, 0, 0);
  }
}

void wave(int nr, int wait) {
  
  for(int i = 1; i < nr; i++) {
    ledsOn(wait, 1, 0, 0, 0, 0);
    ledsOn(wait, 1, 1, 0, 0, 0);
    ledsOn(wait, 1, 1, 1, 0, 0);
    ledsOn(wait, 1, 1, 1, 1, 0);
    ledsOn(wait * 2, 1, 1, 1, 1, 1);
    ledsOn(wait, 1, 1, 1, 1, 0);
    ledsOn(wait, 1, 1, 1, 0, 0);
    ledsOn(wait, 1, 1, 0, 0, 0);
    ledsOn(wait * 2, 1, 0, 0, 0, 0);
  }
}

void setup() {                
  for(int i = 1; i <= 5; i++) {
    pinMode(i, OUTPUT);
  }
}

void loop() {
  
  int baf_wait = 50;
  int fb_wait = 100;

  wave(5, 50);
  delay(1000);
  backAndForth(5, 50);
  delay(1000);
  fallingBrick(100);
  delay(1000);
  backAndForth(5, 50, LOW, HIGH);
  delay(1000);
  fallingBrick(100, LOW, HIGH);
  delay(1000);
  boing(5, 50);
  delay(1000);
}

The result

Experiments with the Arduino

2011-09-18T12:51:00.003+02:00

Lately I became the happy owner of an Arduino Sidekick Basic Kit.

I will post here some experiments with this lovely device.

What is the Arduino

Arduino is a tool for making computers that can sense and control more of the physical world than your desktop computer. It's an open-source physical computing platform based on a simple microcontroller board, and a development environment for writing software for the board.

Arduino can be used to develop interactive objects, taking inputs from a variety of switches or sensors, and controlling a variety of lights, motors, and other physical outputs. Arduino projects can be stand-alone, or they can be communicate with software running on your computer (e.g. Flash, Processing, MaxMSP.) The boards can be assembled by hand or purchased preassembled; the open-source IDE can be downloaded for free.

The Arduino programming language is an implementation of Wiring, a similar physical computing platform, which is based on the Processing multimedia programming environment.

Playing with a tricolor LED

The circuit

The code

void fade(int r1, int g1, int b1, int r2, int g2, int b2, int steps, int wait)
{
  float dr = (float)(r2 - r1) / steps;
  float dg = (float)(g2 - g1) / steps;
  float db = (float)(b2 - b1) / steps;
  
  float r = r1; float g = g1; float b = b1;
  
  for(int i = 0; i < steps; i++) {
    analogWrite(9, r);         
    analogWrite(10, g);         
    analogWrite(11, b);
    
    r = r + dr;
    g = g + dg;
    b = b + db;
    
    delay(wait); 
  }
}

void setup()  { 
} 
 
void loop()  {

 fade(255, 0, 0, 0, 255, 0, 100, 50);
 delay(1000);
 fade(0, 255, 0, 255, 0, 0, 100, 50);
 delay(1000);
}

The result

Conclusion

I'm an absolute beginner in electronics, but I already felt in love with this micro-controller board. Looking forward to experiment and understand some more :-)

Resign Patterns

2011-05-20T09:07:00.002+02:00

For all the design patterns lovers...

http://fuzz-box.blogspot.com/2011/05/resign-patterns.html

PhpcrCommandsBundle

2011-04-25T11:38:00.000+02:00

I started implementing a set of utility commands to manipulate a Jackrabbit content repository from the Symfony2 command console.

The code is on github.

Python MiniMVC

2011-04-25T11:35:00.000+02:00

Going further with the concepts exposed in my last post I coded a basic Micro framework for Python running above mod_python for Apache.

MiniMVC is a Python micro MVC framework inspired by Symfony2 from the PHP world.

MiniMVC is lightweighted
MiniMVC uses dependency injection
MiniMVC is configured with YAML
MiniMVC is tested (partially)

MiniMVC features:

A configurable service container
A flexible and configurable request router based on pyroutes
Powerful logging mechanism based on logbook
Basic SQL Alchemy binding
Cheetah and Mako templates, new templating engines can be added very easily

TODO

Don't render the content files through the kernel
Write more tests
Reorganize imports
Configure SQLAlchemy with the ServiceContainer
Generate table classes
Generate entities
Read XML configuration in addition to yaml
More templating engines
...

You can find the code on github.

A very simple HTTP server with basic MVC in Python

2011-04-10T11:15:00.003+02:00

This is a simple proof of concept of a very simple HTTP server implementing a very basic MVC model (actually only routing and controller) in Python.

We will use the BaseHTTPServer as the web server.

The controller base class

All the controller needs is a reference to the BaseHTTPServer so that it can access the web request and write out the response.

class Controller(object):

    def __init__(self, server):
        self.__server = server

    @property
    def server(self):
        return self.__server

The router

The router needs to manipulate the request and response but also instanciate the controllers, that is why it receives an instance of BaseHTTPServer.

The routes are defined by 3 components:

- A regular expression that must be matched to trigger the route
- A controller class to be instanciated
- A method name to be called on the controller

The tricky part here is to instanciate the controller and call a method on it.

class Router(object):

    def __init__(self, server):
        self.__routes = []
        self.__server = server

    def addRoute(self, regexp, controller, action):
        self.__routes.append({'regexp': regexp, 'controller': controller, 'action': action})
        
    def route(self, path):
        for route in self.__routes:
            if re.search(route['regexp'], path):
                cls = globals()[route['controller']]
                func = cls.__dict__[route['action']]
                obj = cls(self.__server)
                apply(func,(obj, ))
                return

        # Not found
        self.__server.send_response(404)
        self.__server.end_headers()

The request handler

All the request handler needs to do is to instanciate the Router and add to it the routes it needs to manage.

This simple request handler is only able to reply to GET requests.

class MyRequestHandler(BaseHTTPRequestHandler):

    def __init__(self, request, client_address, server):
        
        routes = [
            {'regexp': r'^/$', 'controller': 'HomeController', 'action': 'indexAction'},
            {'regexp': r'^/content/', 'controller': 'ContentController', 'action': 'showAction'}
        ]
        
        self.__router = Router(self)
        for route in routes:
            self.__router.addRoute(route['regexp'], route['controller'], route['action'])

        BaseHTTPRequestHandler.__init__(self, request, client_address, server)
    
    def do_GET(self):
        self.__router.route(self.path)

A simple Hello World controller

class HomeController(Controller):

    def __init__(self, server):
        Controller.__init__(self, server)

    def indexAction(self):
        self.server.send_response(200)
        self.server.send_header('Content-type', 'text/html')
        self.server.end_headers()
        self.server.wfile.write('Hello world')

By the way, in MVC a controller should not do View stuff, see "Going further with a templating engine" below to make the separation better using a view layer.

A controller rendering a file

This controller will serve a file in the "public/" directory. Be carefull there is not enough error checking in this code...

class ContentController(Controller):
    
    CONTENT_BASE_PATH = 'public/'

    def __init__(self, server):
        Controller.__init__(self, server)
        
    def showAction(self):
        filename = ContentController.CONTENT_BASE_PATH + self.server.path[9:]
        if os.access(filename, os.R_OK) and not os.path.isdir(filename):
            #TODO: is there any possibility to access files outside the root with ..?
            file = open(filename, "r")
            content = file.read()
            file.close()
            
            #TODO: set correct content type
            self.server.send_response(200)
            self.server.send_header('Content-type', 'text/html')
            self.server.end_headers()
            self.server.wfile.write(content)
        else:
            self.server.send_response(404)
            self.server.end_headers()

Running the server

What we have defined here is a simple http server that will reply "Hello world" when the URL "/" is accessed, and return the content of a file named myFile (if it exists) when the URL "/content/myFile" is reached.

def main():
    try:
        httpd = HTTPServer(('', 8000), MyRequestHandler)
        print 'Server started...'
        httpd.serve_forever()
    except:
 print 'Server shutting down'
 httpd.socket.close()

if __name__ == '__main__':
    main()

Going further with a templating engine

It is quite simple to integrate a templating engine like Cheetah in this code.

Here is a example of controller rendering a template:

class TemplateController(Controller):

    def __init__(self, server):
        Controller.__init__(self, server)

    def listAction(self):
        self.server.send_response(200)
        self.server.send_header('Content-type', 'text/html')
        self.server.end_headers()
        self.server.wfile.write(Template ( file = 'templates/hello_world.tmpl', searchList = [{ }] ))
        return

Conclusion

That's the reason why I love Python so much, in very few lines we could implement basic MVC over a simple web server.

Implement your own phpdoc annotations

2011-03-03T20:58:00.004+01:00

The goal is to be able to implement our own phpdoc annotations for custom use.

Access the doc block of a method

...
  $method = new ReflectionMethod('MyClass', 'myMethod');
  $doc = $method->getDocComment();
  ...

A note from the php.net documentation about getDocComment():

In order to retrieve a comment with this method, the comment must be imediately before the class, function or method, start with /** and end with */

Does the method have the annotation?

...
  if (preg_match('/@my_annotation/, $doc) {

    // Do something interesting with $method

  }
  ...

Putting it all together

A function that dumps the public methods of a class unless they are marked with the @ignore annotation:

function listMethods($class_name) {

    foreach(get_class_methods($class_name) as $method_name) {

      $method = new \ReflectionMethod($class_name, $method_name);
      $doc = $method->getDocComment();

      if (! preg_match('/@ignore/', $doc)) {
        echo "$class_name.$method_name";
      }      
    }

  }

PHPUnit - detect failing, skipped and incomplete tests

2011-03-03T10:37:00.003+01:00

Sometimes when extending PHPUnit it might be useful to test assertions that are supposed to fail or mark the test as incomplete or skipped. However one wouldn't want the whole test case to fail when testing such assertions. Here is a simple way to achieve this.

Please be warned that this technique should be used carefully in order not to "mask" real failing tests.

To illustrate the method let's write a simple test case extension.

class CustomTestCase extends \PHPUnit_Framework_TestCase {

  // Failing assertion
  public function assertMeantToFail() {
    $this->assertTrue(false);
  }

  // Test incomplete assertion
  public function assertMeantToBeIncomplete() {
    $this->markTestSkipped();
  }

  // Test skipped assertion
  public function assertMeantToBeSkipped() {
    $this->markTestIncomplete();
  }

}

Now we would like to write a test case to check if the above assertions actually do what they are expected to do.

The point is that PHPUnit will use Exceptions to notify the test runner of a failing, skipped or incomplete test. Thus it is possible to intercept the correct Exception to check if the test does what we expect.

class CustomTestCaseTestCase extends CustomTestCase {

  public function testFailingTest() {
    try {
      $this->assertMeantToFail();
    } catch (\PHPUnit_Framework_ExpectationFailedException $ex) {
      // As expected the assertion failed, silently return
      return;
    }
    // The assertion did not fail, make the test fail
    $this->fail('This test did not fail as expected');
  }

  public function testSkippedTest() {
    try {
      $this->assertMeantToBeSkipped();
    } catch (\PHPUnit_Framework_SkippedTestError $ex) {
      // As expected the assertion was skipped, silently return
      return;
    }
    // The assertion did not mark the test skipped, make the test fail
    $this->fail('This test was not skipped as expected');
  }

  public function testIncompleteTest() {
    try {
      $this->assertMeantToBeIncomplete();
    } catch (\PHPUnit_Framework_IncompleteTestError $ex) {
      // As expected the assertion was marked as incomplete, silently return
      return;
    }
    // The assertion did not mark the test incomplete, make the test fail
    $this->fail('This test was not incomplete as expected');
  }

}

The above code is meant to work with PHP 5.3 and namespaces. To make it work on other PHP versions remove the \ at start of the class names.

I should not tell you, but...

Alternately you can use the @expectedException annotation to make a failing test succeed. Although this seems to be a very bad practice, because it can hide problems in your code, I present it here for sake of completeness.

/**
     * This test will succeed !!!
     * @expectedException PHPUnit_Framework_ExpectationFailedException
     */
    public function testSucceed()
    {
        $this->assertTrue(false);
    }

This last method does not work for incomplete or skipped tests.

Enable CTRL-C / CTRL-V in gnome-terminal

2011-02-05T17:10:00.001+01:00

gconftool-2 -t str -s /apps/gnome-terminal/keybindings/copy "c"
gconftool-2 -t str -s /apps/gnome-terminal/keybindings/paste "v"

From http://geekybits.blogspot.com/2007/10/gnome-tip-changing-keyboard-shortcuts.html

Playing with HSV colors and HTML5

2010-11-03T17:03:00.010+01:00

In a previous post I explained how to draw points on an HTML5 canvas. This time I will use this technique to draw colored bars.

The idea behind this post is to implement a color picker with HTML5 and Javascript.

The HSV color model

HSL and HSV are the two most common cylindrical-coordinate representations of points in an RGB color model, which rearrange the geometry of RGB in an attempt to be more perceptually relevant than the cartesian representation.

Citation from wikipedia

HSV stands for hue, saturation, and value.The hue can variate from 0 to 360°, the saturation and the value must be between 0 and 1. When the full range of these values is walked through, it generates a color cylinder as in the following image:

Image from wikipedia

If a hue is selected (i.e. the main color is fixed), going through the range of S and L will produce a 2D slice of the cylinder.

Converting from HSV to RGB

Using the algorithm exposed in the above wikipedia page we can implement a function that will convert a color given in HSV to a RGB color.

function colors.hsv_to_rgb(h, s, v) {
    var c = v * s;
    var h1 = h / 60;
    var x = c * (1 - Math.abs((h1 % 2) - 1));
    var m = v - c;
    var rgb;
    
    if (typeof h == 'undefined') rgb = [0, 0, 0];
    else if (h1 < 1) rgb = [c, x, 0];
    else if (h1 < 2) rgb = [x, c, 0];
    else if (h1 < 3) rgb = [0, c, x];
    else if (h1 < 4) rgb = [0, x, c];
    else if (h1 < 5) rgb = [x, 0, c];
    else if (h1 <= 6) rgb = [c, 0, x];
    
    return [255 * (rgb[0] + m), 255 * (rgb[1] + m), 255 * (rgb[2] + m)];
  }

Selecting a color

The idea of the color picker is to show a bar with all the colors (hue).

Once the color is choosed, we have to choose a saturation and value to refine the selection.

Drawing a hue bar

Because we use the HSV color model it is very simple to draw the hue bar. We simply go through the possible values of the hue (0 to 360) using a saturation and a value of 1.

// imgd represents the image data of the canvas object 
  function draw_horizontal_hue_bar(imgd, x, y, width, height) {
    var inc = 360 / width;
    for (var h = 0; h < 360; h += inc) {
      for (var i = 0; i <= height; i++) {
        var rgb = hsv_to_rgb(h, 1, 1);
        point(imgd, x + Math.round(h/inc), y + i, rgb[0], rgb[1], rgb[2]);  
      }
    }
  }

Drawing a slice of the color cylinder

Now that we have fixed hue let's draw a slice of the color cylinder in order to choose the saturation and the value. This is also very simple since we can go through the values of the saturation and value (0 to 1) keeping the hue fixed.

function draw_sv_grid(imgd, hue, x, y, size) {
    var inc = 1 / size;
    for (var v = 0; v <= 1; v += inc) {
      for (var s = 0; s <= 1; s += inc) {
        var rgb = this.colors.hsv_to_rgb(hue, v, s);
        this.point(imgd, x + Math.round(v * size), y + Math.round(s * size), rgb[0], rgb[1], rgb[2]);  
      }
    }
  }

What's next
With the above algorithm we should have everything we need to implement an HSV color picker.

Some interesting problems remain though, as how to get the color of a pixel clicked in the canvas.

This will be for another post. Meanwhile, happy coding... ;-)

Drawing a point on an HTML5 canvas

2010-09-14T16:25:00.016+02:00

Drawing a single point seems to be the easiest task to do on any graphic device. However it's not as easy as expected on a simple HTML5 canvas element. Even if the HTML5 canvas provides advances graphic primitives to draw lines or images, it does not have any function to draw a single point.

In order to draw a single point you'll have to:

obtain a portion of the image data
calculate the index of the pixel in the image data
set the RGB and alpha component of the pixel
write back the data to the image

Getting a portion of the image data that can be processed and written back is a powerful procedure that allows for example to write image filters. However it's quite too complicated when you just want to draw one or more pixels.

Here is a real example:

// Get a reference to the canvas element 
  var elem = document.getElementById('canvas');
  if (!elem || !elem.getContext) return;

  // Get the 2D graphic context   
  var context = elem.getContext('2d');    
  if (!context) return;     

  // Obtain a portion of the graphic data
  function get_image_data(context, w, h) {     

    // Not all browsers implement createImageData. On such browsers
    // we obtain the ImageData object using the getImageData method. 
    // The worst-case scenario is to create an object *similar* to
    // the ImageData object and hope for the best luck.     
    if (context.createImageData) {      
      return context.createImageData(w, h);     
    } else if (context.getImageData) {       
      return context.getImageData(0, 0, w, h);     
    } else {       
      return {'width' : w, 'height' : h, 'data' : new Array(w*h*4)};     
    } 
  }

  // Draw a pixel on the canvas   
  function point(imgd, x, y) {          

    // Calculate the pixel offset from the coordinates     
    var idx = (x + (y * imgd.width)) * 4;      

    // Modify the graphic data     
    imgd.data[idx] = 0;     // Red     
    imgd.data[idx+1] = 0;   // Green     
    imgd.data[idx+2] = 0;   // Blue     
    imgd.data[idx+3] = 255; // Alpha channel   
  }      


  var imgd = get_image_data(context, 400, 300);   
  point(imgd, i, j);  // Replace i and j with real coordinates
  context.putImageData(imgd, 0, 0);

Wordle-like PHP script

2010-09-14T13:40:00.001+02:00

Introduction

Tag clouds (or word clouds) are very trendy in the fashionable web 2.0.

But very often those clouds are rendered via HTML / CSS and are quite ugly.

I discovered recently the website http://www.wordle.net and was fascinated by the beautiful images it can generate. However they are rendered through a Java applet and the only way to use them is to take a screenshot and extract the image. I wanted clickable tag clouds, and, unless you manually create an HTML image map, it's not possible with Wordle. So I decided to create my own tag cloud generator using PHP.

I started crawling the web to get some information, and I found out an interesting post on StackOverflow from a guy asking how to implement "something like Wordle". Suprisingly, Jonathan Feinberg, the creator of Wordle, replied to the post explaining the basic idea:

Each word "wants" to be somewhere, such as "at some random x position in the vertical center". In decreasing order of frequency, do this for each word:

place the word where it wants to be
while it intersects any of the previously placed words
move it one step along an ever-increasing spiral

That was all I needed to start coding a proof of concept, but a lot of problems still needed to be solved...

Bounding Boxes

In his reply Jonathan Feinberg says: "The hard part is in doing the intersection-testing efficiently, for which I use last-hit caching, hierarchical bounding boxes, and a quadtree spatial index".

Well that was quite too much for me, I needed to find a less efficient but simplier way to test for intersection.

So I came up with this idea:

Each time a word is drawn, store its bounding box in an array
To test if a new box intersects with the already drawn boxes do this:

For each bounding box in the array:

If the new box intersect the bounding box there is an intersection

This leads to another problem to solve: how to test if two rectangles intersect.

Rectangle Collision Detection

The scipt I wrote only allows to draw words either horizontaly or verticaly. Thus we need to test the collision of axis-aligned boxes. This is quite simple to do.

Two axis-aligned boxes do not intersect when their projection on one of the axis are disjoint. This is not the case for rotated boxes!

if ($box1->bottom > $box2->top) return false;
if ($box1->top < $box2->bottom) return false;
if ($box1->right < $box2->left) return false;
if ($box1->left > $box2->right) return false;

return true;

For arbitrarily rotated boxes you will need some more 2D geometry to test the collision, but for now let's keep it simple.

Searching a place for the new word

We have now all the pieces to write down the routine searching for a free space to draw the new words. We start in the center of the image and move the word along a spiral until it does not intersect with the words already drawn.

$i = 0;  
$x = <image_center_x>; 
$y = <image_center_y>;
while (! $place_found) {
  $x = $x + ($i / 2 * cos($i));
  $y = $y + ($i / 2 * sin($i));
  $new_box = <place the word at x,y >;
  $place_found = <the new word does not overlap with existing words>;
  $i += 1;
}

return array($x, $y);

Changing the center of the spiral or its equation will lead to another distribution of the words in the image.

Since the PHP functions to draw text and to get its drawn dimension work with the top left corner as reference point, the above algorithm will tend to place all the vertical words on the left of the image. To prevent this I added a little bit of noize (random numbers) when selecting the center of the spiral for the vertical words.

Clickable images?

As stated at the top of this post, I wanted the generated tag clouds to be clickable. In other words I needed a mechanism to detect which word was clicked.

Since we store the bounding boxes of all the words we draw to detect the collisions, we can use this data to generate an HTML image map.

The problem is that each generation of a tag cloud will generate a different image. This is caused by the noize added when searching for the position of the words, but also to some randomness I added in the calculation of the font sizes.

That means that the tag cloud image and the image map must be rendered and sent to the client in a single call. Unfortunately it is not possible to send back to the client browser an encoded image at the same time as some HTML.

To solve this issue I used an advanced feature of the HTML img tag that allow to embed a base-64 encoded image in the URL.

First render the image in a temporary file and encode its content in base 64:

$file = tempnam(getcwd(), 'img');
imagepng($cloud->get_image(), $file);
$img64 = base64_encode(file_get_contents($file));
unlink($file);

Then set the data as the image URL

<img usemap="#mymap" src="data:image/png;base64,<?php echo $img64 ?>"
  border="0" alt="" />

Unfortunately this does not work in ... well, as usual ... Internet Explorer... This is out of the scope of this article but you can find more information on how to fix this problem here: Embedding Base64 Image Data into a Webpage

Since we now return HTML instead of a PNG image, we can as well send back the HTML image map.

See it in action

Sorry IE users this wil not work... ;-(

Get the code

The source code of the complete script can be found on GITHub.

AI-Junkie

2008-12-27T02:35:00.001+01:00

Réseaux neuronaux, algoritmes génétiques, agents, une bonne source d'information sur l'intelligence artificielle.

AI-Junkie

fValidate - Type Reference

2008-12-26T23:13:00.004+01:00

Référence de la syntaxe des validateurs de la bibliothèque JavaScript fValidate.

A utiliser avec le composant de validation fourni avec MonoRail.

fValidate - Type Reference

Aventures Logicielles

ClassGrapher

The PHP parser

Using composer to download vendors libraries

Example of composer.json file

Using travis for continuous integration

The .travis.yml file

Experiments with the Arduino - Multiplexed leds

Introduction

The schematic

The code

Demo

Website screenshots with PhantomJS

Introduction

Compiling PhantomJS

Rasterize a website

Getting only the head of the page

Here we go

Create a screenshot from Apache

The sequel

Portability

Links

Experiments with the Arduino - Led Matrix

The circuit

The code

Demo

Experiments with the Arduino - Controlling 5 LEDs

The circuit

The code

The result

Experiments with the Arduino

What is the Arduino

Playing with a tricolor LED

The circuit

The code

The result

Conclusion

Resign Patterns

PhpcrCommandsBundle

Python MiniMVC

A very simple HTTP server with basic MVC in Python

The controller base class

The router

The request handler

A simple Hello World controller

A controller rendering a file

Running the server

Going further with a templating engine

Conclusion

Implement your own phpdoc annotations

Access the doc block of a method

Does the method have the annotation?

Putting it all together

PHPUnit - detect failing, skipped and incomplete tests

I should not tell you, but...

Enable CTRL-C / CTRL-V in gnome-terminal

Playing with HSV colors and HTML5

Drawing a point on an HTML5 canvas

Wordle-like PHP script

AI-Junkie

fValidate - Type Reference