Mar

8

Linking to Twitter and Facebook from a website

March 8, 2010 | Leave a Comment

This week I’ve worked on a social lightbox for Teeorama allowing our visitors to tweet or write on their Facebook walls from our tee-shirt shop.The lightbox itself is built using ColorBox, a powerful and customizable lightbox library built on JQuery (MIT License). The Twitter tool is fairly easy to setup, I used bit.ly to generate the shortened URL of the current page and placed it, along with a default content, in the text box. When the user clicks on submit, he or she is redirected to twitter. The update box contains what was typed in the teeorama box and one click on the update button is enough to validate the tweet.The follow button is even simpler, it is nothing but a link to teeorama’s twitter account.Facebook is both more powerful (you can publish to your wall without leaving the teeorama page) and a bit trickier to setup.First, you need to head over to developers.facebook.com/setup.php to register your site as a Connect enabled website. Upload the xd_receiver.htm file to your server and validate. You now have access to your Facebook Connect Tools, API documentation and sandbox as well as to a gallery of widgets or code samples you can use. I chose to use the Comment Box.

Feb

28

Zend Server Community Edition for Mac OS X – MySQL problem

February 28, 2010 | 1 Comment

I switched my dev. environnement at work from MAMP to Zend Server Community Edition a while ago but was disappointed that my Mac Book could not migrate because of a MySql error. Every time I would try to run the server, I would get the following error:

1
ERROR! MySQL PID file could not be found!

Googling this error, all kinds of solutions came up: privileges on the files, misconfiguration issues, installation problems…
It seems to be a generic message. After trying to understand what might have happened to the missing PID file, I tried re-installations and all the common MySql on Mac OS X tips I could find on Google. No luck. At least, MAMP worked.

Eventually, the same error occured on alheim’s computer. He eventually found a solution which worked for him (SnowLeopard running on Mac Book Pro) for my own laptop as well (Snow Leopard on a black MacBook).

So here are the steps we took:

1
2
3
4
5
cd /usr/local/zend/mysql
sudo scripts/mysql_install_db
sudo chown -R zend:wheel data
cd ..
sudo bin/zendctl.sh start-mysql

Hopefully, you’ll get a “SUCCCESS” message, too. Thanks to Alheim for the tip.

Feb

22

Where are your users from, part 2

February 22, 2010 | 1 Comment

Recently, I wrote about geolocalisation of your users/visitors based on the IP to Country table. After using it for a couple of months, I found it painful to have to regularly update the table (even if some people came up with an automatic work around based on PERL scripts for example).

So, I decided to find another way to solve the problem and gave the GeoIP Apache module by MaxMind a try. The installation is as simple as can be:

1
2
3
aptitude install libapache2-mod-geoip
a2enmod geoip
/etc/init.d/apache2 restart

Once the module is setup, you can use the following PHP code to obtain the Country Code (2 letters)

1
$countryCode == $_SERVER["GEOIP_COUNTRY_CODE"];

Finally, here is a list of country codes and the associated country names.

If yo

That’s it, quick and simple.

Feb

14

CodeColorer List of supported languages

February 14, 2010 | 1 Comment

A very quick post to list the languages supported by Code Colorer which I use on this blog. Everytime I write I find myself wondering which language is supported and how I should write it out for the plugin to work so here it is, for the record:

  • ABAP
  • ActionScript
  • ActionScript 3.0
  • Ada
  • Apache
  • AppleScript
  • Apt sources.list
  • asm
  • asp
  • autoit
  • avisynth
  • bash
  • basic4gl
  • bf
  • bibtex
  • blitzbasic
  • bnf
  • boo
  • c
  • c_mac
  • caddcl
  • cadlisp
  • cfdg
  • cfm
  • cil
  • cmake
  • cobol
  • cpp-qt
  • cpp
  • csharp
  • css
  • d
  • dcs
  • delphi
  • diff
  • div
  • dos
  • dot
  • eiffel
  • email
  • erlang
  • fo
  • fortran
  • freebasic
  • genero
  • gettext
  • glsl
  • gml
  • gnuplot
  • groovy
  • haskell
  • hq9plus
  • html4strict
  • idl
  • ini
  • inno
  • intercal
  • io
  • java
  • java5
  • javascript
  • kixtart
  • klonec
  • klonecpp
  • latex
  • lisp
  • locobasic
  • lolcode
  • lotusformulas
  • lotusscript
  • lscript
  • lsl2
  • lua
  • m68k
  • make
  • matlab
  • mirc
  • modula3
  • mpasm
  • mxml
  • mysql
  • nsis
  • oberon2
  • objc
  • ocaml-brief
  • ocaml
  • oobas
  • oracle11
  • oracle8
  • pascal
  • per
  • perl
  • php-brief
  • php
  • pic16
  • pixelbender
  • plsql
  • povray
  • powershell
  • progress
  • prolog
  • properties
  • providex
  • python
  • qbasic
  • rails
  • rebol
  • reg
  • robot
  • ruby
  • sas
  • scala
  • scheme
  • scilab
  • sdlbasic,
  • smalltalk
  • smarty
  • sql
  • tcl
  • teraterm
  • text
  • thinbasic
  • tsql
  • typoscript
  • vb
  • vbnet
  • verilog
  • vhdl
  • vim
  • visualfoxpro
  • visualprolog
  • whitespace
  • whois
  • winbatch
  • xml
  • xorg_conf, xpp
  • yaml
  • z80

An impressive list which should be handy next time I post anything.

Feb

14

Enable Full Text Search with MySQL

February 14, 2010 | Leave a Comment

Before you jump and get a real Search Engine for your website, you might try the MySQL full text search feature.

It is incredibly easy to set up. All you need to do is setup the table and fields to be searchable as full text with the following command:

1
ALTER TABLE Table_Name ADD FULLTEXT(field1, field2);

Then, simply write a query using “match” to run your searches:

1
SELECT * FROM Table_Name WHERE MATCH (field1, field2) AGAINST ('search_query')

Happy Valentine’s Day

Feb

13

Setting up Code Igniter

February 13, 2010 | 1 Comment

A few months ago, we jumped into Teeorama, a PHP based online tee-shirt store front end for Spreadshirt. We finally completed the project and we’re planning on opening it to the public tomorrow. By the way, if you feel you could use a new Geek shirt, please head over to teeorama.com before reading on…

When I started the development, I decided to use both a PHP and a Javascript framework I didn’t know. I had two reasons for doing that:

  • It’s always interesting to play with new code. You get to see how other people/framework solved common problems, how some libraries make this or that easier  to use for the developer. You also sometimes realize some other things are carried out better in the framework you are used to. Either way, it is a good learning experience.
  • Also, I wanted to stay away from the stack we use at work to not be tempted and not be able to just copy over bits of our blueKiwi framework into my code

So, I picked CodeIgniter and jQuery to build my website. In the end, I am very pleased with the experience of working with these two tools. CodeIgniter is exactly what it claims to be: a very light but powerful framework that does not try to command the way you work. Of course, jQuery is just as powerful as its reputation. It’s incredibly easy to get used to and I haven’t found anything it couldn’t do.

Anyway, this post is about setting up Code Igniter. There is a Code Igniter user_guide (included in the downloaded zip file) to do just that and it would take you about two seconds to get going. The thing is, I did not like the way Code Igniter was laid out in my folder. I wanted to be able to place the framework in a library folder within my application folder and make my web folder (containing the images, javascript and css files) the document root therefore keeping my application folder out of exposure to the Web.

This is also possible though it does involve some minor tweaking of CodeIgniter base code.

First, here is my chosen folder layout

Second, as I said, I made the web folder the target of my Apache virtual host.
Here is my virtual host for this application

1
2
3
4
5
6
7
8
ServerAdmin your_email
ServerName project_domain
AddDefaultCharset UTF-8
DocumentRoot /var/www/project/web

RewriteEngine On
RewriteCond $1 !^/?(index\.php|test|images|web|js|css)
RewriteRule ^(.*)$ /index.php/$1 [L]

Finally, in order for all this to work, you need to tweak a couple of CodeIgniter files

define the system and application folders paths as follow in index.php:

1
2
3
$docRootPath = dirname($_SERVER['DOCUMENT_ROOT']);
$system_folder = $docRootPath."/application/libraries/codeigniter";
$application_folder = $docRootPath."/application";

Also, modify the CodeIgniter.php file at the bottom of index.php to:

1
require_once BASEPATH.'CodeIgniter'.EXT;

Finally, edit CodeIgniter.php in order to replace all occurrences of “codeigniter/” by “” (nothing)

You should be setup. Happy coding!

Feb

11

Code Syntax Highlighter for Open Office

February 11, 2010 | 1 Comment

Today I tried a new task at work. Instead of coding, I wrote about coding. This is a scary thing to attempt, especially if your writing is aimed for people from the other side of the wall. Those who look with suspicion at your screen when all you have showing is a dark console window, those who do not understand how in the world a semi-colon could mean so much. The worse thing is, when we share what we do with these people, we are not really giving them a chance to realize how clear and simple it all is. Send a php file to a non developer, he’ll open it with Notepad (if not Microsoft Office) and immediately close it thinking it’s a virus. That’s why I decided to add some syntax highlighting to my API documentation I was writing with Open Office. Maybe it can look appealing to “real” people, too.

By the way, I must say I am very impressed by the evolution Open Office.org shows now in it’s 3.1 installment. I used it since version 1.0 and regularely had to go back to my student edition of Microsoft Office to complete my thesis and reports for school. I do not feel that need anymore. OOo just became stable and powerful enough.

So, anyway, there is an OpenOffice.org extension to do just that, code syntax highlighting. It is called COOoder

Download and open it with OpenOffice then confirm the installation process and validate the User Agreements. Finally, restart OpenOffice.

Now you can create a document (with Writer) and start pasting your code. In the toolbar, you should see the COOoder button. Select your code and click the button. Pick your language from the drop down list and click “OK”.

Awesome! Now your non-developing audience can enjoy neat looking geek stuff.

Jan

24

Yamaha DTXPlorer Kit with Rock Band (or Guitar Hero) on Xbox 360

January 24, 2010 | 14 Comments

So I play guitar (a little) and I used to play Guitar Hero on PS2 from time to time. Last year, for Christmas we got an XBox 360 and it was my intention all along to get Guitar Hero World Tour or Rock Band to try the drums. Little did I know where it would take me. I played passionately for a year, every week end. I made it pretty far in Rock Band 2 playing in Hard or Expert mode and I finished the awesome Rock Band the Beatles in expert mode. I survived the war declared by my neighbors and totally abandoned my plastic guitar.

A year later, my Christmas present was a real electronic drum kit. I picked the Yamaha DTXplorer. I understand it isn’t the best instrument on the planet (neither am I the best drummer) but it is a complete, well built kit. It is a good price and a great way to learn to play for real. I got the drums and look forward to taking some lessons though my weeks are a bit too busy at the moment for me to insert that in my schedule. So, in the meantime, I work on my own thanks to a couple of learning DVDs.

Still, sometimes, I want to plug the drum kit to the game(s) to get some help as to what to try and play. I like the Beatles beats lessons in the Rock Band training mode. Whenever I can, I plug the drum to the game and practice away with the metronome.

How to Do It ?

So, if any of you out there are in the same situation (you like the game, you have a real kit) and you are wondering if they can be used together : they can. They are several solutions on how to achieve this (depending on your drum model, your console and your plastic rock gear). So, let’s get some solutions out of the way:

  1. If you have a PS2, I understand you need to upgrade your console, sorry
  2. If you have a WII or a PS3, a hardware solution exists for you to make this a little bit easier though the solution I will describe here will work for you, too
  3. If you have a drum kit that allows midi remapping, the whole setup is a lot easier for you, you can skip the computer part
  4. Solutions on the web describe how you can tweak your drum kit (taking the sensors off the plastic rock kit and placing them on the real one) or tearing up the plastic kit and hooking wires to it. I decided to not take any chances with my electronic skills and not build/destroy anything. Some solutions involve soldiering either on the plastic rock kit or on the real drums themselves. There was no way I’d touch the new kit ;-)

For more infos on these other solutions, run a little search for “DTXPlorer” or “real drums” on the Rock Band forums for example

What do you need ?

The solution described in this post works for both Guitar Hero and Rock Band.

  1. A real electronic drum kit
  2. A midi cable
  3. A computer
  4. A Guitar Hero drum kit or at least, the best part of it

When I bought my plastic rock game, I checked out the instrument compatibility matrix for Xbox and got the Guitar Hero World Tour pack because the Guitar Hero instruments would allow me to play all the games I could ever buy on Xbox anyway. Then, I bought the Rock Band games alone. Okay, later on, I gave in and traded the guitar hero guitar for the Rock Band George Harrison Gretsch. Actually, Derrick done that for me and I got the good looking Gretsch for Christmas, too.

Anyway, the point is, because Xbox uses a closed source system to communication between the controllers and the console, it can not be reproduced by any home made hardware (as it is possible for PS3). The great thing about the GH drums, though, is that it has a MIDI In plug. It allows you to do just what we want, plug a real electronic kit to the GH kit and let the GH kit send the signal to the console. So, what if you don’t have the GH kit ? Well, that’s where you can tweak your RB kit with a soldiering gun or buy this little GH drum kit “module” online. Personally, I sold my GH drum kit on ebay for 50 euros and bought the little GH box online for 60 dollars and came out even (quick shipping, great product).

So, all you gotta do is plug the DTXPlorer to that box and start rocking… Well, yes and no. The game expects some basic information: yellow, red, orange, blue or green. The real kit, on the other hand, has more notes to offer. So we need to map these notes and describe which is yellow, which is red, etc… If your module allows you to map the notes, everything is simple. If not (and the DTXplorer doesn’t) you need to add a computer in the mix to tackle the job. I use a MacBook running Midi Pipe to do that but I heard of a similar software for PC. As for the midi cable, I suppose you can use any which one. Here is a link to mine (Prodipe Midi USB 1i10).

The remapping

Again, if your drum kit enables midi remapping, you can skip this step altogether and you do not need a computer to connect your kit to the game. If not, here we go.

A little theory

Rock Band and Guitar Hero try to be compatible with each others instrument controllers which is great news for users like me. I don’t think I would have spent the money to get two plastic drum sets and I know for a fact my living room couldn’t hold another of these bulky controllers. That’s why I bought the Guitar Hero Pack. The Guitar Hero controller was an obvious choice since it has the “Orange” pad needed to play GH:WT while allowing to play Rock Band. What I didn’t know at the time was that the GH:WT would prove to be an even better choice because it has the MIDI IN plug.

Midi is a standard protocol that enables musical instruments (such as keyboards, electronic drums) and computers to communicate and control each other. Midi data is not an audio signal or media, it refers to “event messages” such as the pitch and intensity of musical notes to play, control signals for parameters such as volume, vibrato and panning, cues, and clock signals to set the tempo. (more about Midi on Wikipedia)

So, the Guitar Hero controller understands Midi and is the bridge between the signal sent by your drum kit (Midi) and the signal expected by the XBox (some wireless Microsoft proprietary protocol). If  GH:WT input is midi note 38, the signal sent to each box will be “the red button has been pressed” just as if you had pressed the red button on the regular XBox controller or hit the red pad on the GH:WT drum kit.

The games use 5 (Rock Band) or 6 colors. Their Midi equivalences are noted below:

  • RED: MIDI Note 38
  • YELLOW- MIDI Note 46
  • BLUE- MIDI Note 48
  • GREEN- MIDI Note 45
  • ORANGE- Midi Note 49
  • KICK- MIDI Note 36

The Yamaha drum kit on the other hand, is more subtle. It acknowledges a difference between hitting the center of the snare or its rim, it plays a different sound if you play the center or edge of the clash and ride and offers more toms. Each of these actions also have a matching Midi note that the drum kit can send out to a computer using the Midi out plug.

Yamaha download center offers the DTXPlorer drumkit user guide which lists the notes sent out by each pad.

In order to play the games with the DTXplorer we simply need to map what each pad on the DTXPlorer should trigger in the GH:WT module. For example, the DTXplorer snare sends out the midi note 31. I want it to control the “red” pad in the game. So I must transform the midi note 31 sent out into a 38 for the game to register the hit. That’s what the computer will do for us.

Snare 31 G# 2 Red 38 D 3
Snare open rim 34 A# 2 Red 38 D 3
Snare close rim 37 C# 3 Red 38 D 3
Hi Tom 48 C 4 Blue 48 C 4
Mid Tom 47 B 3 Blue 48 C 4
Low Tom 43 G 3 Green 45 A 3
Ride 51 D# 4 Orange 49 C# 4
Ride edge 52 E 4 Orange 49 C# 4
Clash 49 C# 4 Yellow 46 A# 3
Clash edge 57 A 4 Yellow 46 A# 3
Hi Hat Open 46 A# 3 Yellow 46 A# 3
Hi Hat Close 42 F# 3 Yellow 46 A# 3
Kick 33 A 2 Purple 36 C 3

Setting up Midi Pipe (Mac OS X)

Midi Pipe is a Mac OS X software that allows to do just that. It reads the Midi In, alters it (if necessary) and sends it back out. A PC alternative exists, it is called eDrum Midi Mapper.

Once your drum kit is successfully connected to your Mac (see Troubleshooting section below for help on that) launch Midi Pipes.

You will have a tool list on the left and a pipe list on the right. Start by dragging the Midi In to the right and click ‘Hijack’. The hijack option will allow us to trick the signal before it is send out. Then, add the Keyboard and check the ‘highlight’ box in order to visualize the signal as you hit your drums. Finally, add the Midi out and uncheck the ‘pass through’ to send out the tweaked signal.

Now it’s all a matter of adding Key Mappers for each note that needs to be remapped to its GH:WT equivalent. Add a keymapper element to the pipes and select the drum kit note of a given pad on the left and the matching note for the games on the right. Below is the example for the snare which we map from midi note 31 to midi note 38 (red) in the game.

You can now name your pipe and save your setup. Next time, all you have to do is launch Midi Pipe and load your configuration back.

Warning: the order is important. As you can see from the table above, for example, we map the 49 into a 46 (clash) and the 51 into a 49 (ride). Make sure to remap the the clash to a 46 first and the ride second or you ride will remap to 46 (yellow).

If you don’t want to create your own configuration, just download mine (see diagram below for color codes)

You are free to assign the pads you want to any of the colors you want in the game. It is possible also to have a set of different Midi Pipe configuration to use for different songs in the game as well. Below is a diagram showing the color repartition I chose.

Getting it all together

  1. Plug your Midi In to the DTXplorer
  2. Plug the USB to the computer
  3. Enable the remapping
  4. Plug the Midi Out to the GH box
  5. Turn everything on… You Rock! (Do not let your mac go to sleep while you play or eventually you’ll loose the connection between the kit and the game)

Enjoy!

Trouble Shoot

I hit the “green” on the real drum kit and nothing happens in the game.

Two possibilities: the signal doesn’t make it to the computer or the signal doesn’t make it to the GH box. On Mac OS X, you can make sure that the signal at least gets to the computer by running Garage Band. If Garage Band sees your drum kit and allows you to record yourself, the signal makes it that far and the problem is with your GH box. Check the connections. If Garage Band doesn’t see your drum kit, you have a midi connection problem which I usually solve by launching the Audio Midi Setup application. Go in Window and click on  “show MIDI window”. The Prodipe Midi USB appears.  I then click on Default (in the configuration section) and select “Create New Configuration). I name it Prodipe and it usually somehow turns the MIDI on.

I was rocking and suddenly when I hit the pads, nothing happens in the game

Don’t let your computer go to sleep. At least, with my MacBook, the midi signal is not sent out anymore when the Mac enter sleep mode. If you are using a laptop, you might just be out of battery, too. That would never happen to me though, I’ll get shot by the neighbors if I ever played long enough to exhaust my battery.

When I play, some hits don’t seem to register in the game

Electronic kits try to emulate real (acoustic) kits. Some of them will handle two or more signals for the same pad depending on where you hit it (center, side, etc). If you want all these to register with the game you must map these extra notes as well. The hi-hat for example needs to be mapped whether it’s hit when closed or open. You can refer to your kit user guide to get a full list of the notes it uses. I have included the one for the DTXplorer earlier in this post.

Some links

I read a lot (more than a lot) about plugging a real drum kit to the games before I bought mine for Christmas. As much as I wanted to play the real thing, I knew being able to play the games would be important to me to access the training mode or just jam with the Beatles. So I read until I was sure it was possible to plug the real drum in the game. When I was reading, I came across several links of interests. Here they are:

Jan

22

CKEditor, enable the image or flash upload

January 22, 2010 | 1 Comment

CKEditor is a greatly improved version of the famous FCKEditor. The generated source code is clean and well indented, the whole thing loads faster and feels less buggy. It even looks better.

What I really like though, is the new settings that allow for precise definition of what we want to encode or not and how we wish to handled pasted code (expecially coming from Word processors)

CKeditor is a rather recent version and some documentation will surely arrive soon, in the meantime, the file upload isn’t very documented.

Nevertheless, with some Stack Overflow help, it all comes together pretty quickly :

  • enable the file upload in the configuration by adding the following to your configuration file
1
config.filebrowserUploadUrl = '/fckupload';
  • Code your upload method that will be called when the URL defined in the configuration is called upon
  • Then, that’s the undocumented part, in JavaScript, call method required by CKEditor which is sent to you in the URL (below is a PHP example)
1
2
3
4
5
private function upload() {
    // do upload
    // get file Url
    echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$this->getHttpParam("CKEditorFuncNum").', "'.$fileUrl.'");</script>';
}

Jan

21

Where are your users from?

January 21, 2010 | 1 Comment

If you ever wonder where your readers are from, if you ever need to adjust your application to the origins of its users; you can determine the geographic location of a connection by using an IP to Country table.

I should start by saying that I do not always like the way websites use this feature. As much as I appreciate, let’s say, Yamaha, to redirect me from www.yamaha.com to fr.yamaha.com based on my location ; I can not stand for Google or Wikipedia to assume that I either speak French or intend to search French speaking contents.

Another thing I absolutely can not stand is of Skype (for example) to prompt me to download the French version of its application just because I am browsing the Web from France. I can not tolerate any French speaking applications to be installed on my computer. Actually, Mac OS X is such a treat on that point because I can have a French bought CD of Snow Leopard and still install my system in English. All the OEM Windows systems I purchased in my country of residence were bound to remain in (poorly-translated) French. I actually would always keep my license number handy but use a pirated English (but otherwise equivalent) version just so that my Start button would actually spell ‘Start’.

Anyway, the IP to Country determination can still come in handy and here’s how I made it work for me (using PHP/MySQL). I am aware that it is possible to do the www.yamaha.com to fr.yamaha.com redirection simply using geolocated aliases. Hosting providers such as OVH usually provide this functionality.

  1. Download the IP to Country.csv database (and update it there after) from http://ip-to-country.webhosting.info/
  2. Create a table to hold the data
  3. Import the data from the csv file into that table
1
2
mysql> CREATE TABLE iptocountry (ip_from int(4), ip_to int(4), country_code2 char(2), country_code3 char(3), country_name varchar(50));
mysql> LOAD DATA INFILE 'ip-to-country.csv' INTO TABLE iptocountry FIELDS terminated BY ',' ENCLOSED BY '"' LINES terminated BY '\n';

Then, from your PHP code, you can get the country code for example, using the code below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function _ipAddressToIpValue($ip) {
    if ($ip == "") {
        return 0;
    }
    $ips = split("\.", $ip);
    return $ips[3] + $ips[2] * 256 + $ips[1] * 256 * 256 + $ips[0] * 256 * 256 * 256;
}

$ipValue = $this-&gt;_ipAddressToIpValue($_SERVER["REMOTE_ADDR"]);
$queryResults = $this-&gt;db-&gt;query("SELECT country_name FROM iptocountry WHERE ".$ipValue." BETWEEN ip_from AND ip_to");
$res = $queryResults-&gt;result_array();
if (count($res)) {
    $countryCode = $res[0]["country_name"];
}

The code above is using Code Igniter to query the database. I suppose it is self explanatory enough to be transposed to any other DAO you might be using.


Next Page >>