As it turns out, my understanding of how the device worked was very limited, and some of what I knew turned out to be wrong. My main fault was not understanding how the launcher.swf worked. It turns out that I only need to implement the ext_fscommand2 functions and not the functions starting with “gn_” (I found references to this function in some decompiled UCI’s). The “gn_” functions are in the launcher.swf which I simply load from the emulator (I had implemented about 25% of the launcher.swf in my emulator before I realized this :().

I’ve also figured out how I will make the file listing, or I’m down to 2 ideas. Both ideas include an AIR application that reads the device folders (which is going to be fun because I’ve never made an AIR application before).
The first solution (the one I’ll probably end up using), will have the application save an XML file with the folder and file structure. This XML is then loaded by the emulator and used to mimic the file system, requiring a manual update of the filesystem every time a file is changed (but like on the actual device the files don’t change that often).

After I get the filesystem up and running, it should be rather easy to emulate the actual playing of an MP3. But then again I thought a lot of the things that caused trouble in this project would’ve been easy.

Another thing I’ll give it a week or to and see if I get started up on the emulator again, if I don’t I’ll just release it in it’s current form, so you can see how it works for yourself. The current form however is a not to well documented and still in progress, set of classes with no actual UI everything I change I do code time.

Both players has an excellent sound quality, the best I’ve ever had in an mp3 player (I’ve owned a couple of different ones, Rio, Creative, iPod, Samsung and something that starts with F that I can’t remember the name of anymore).
My only problem with the 2 Cowons is the touch-screen user interface, which has gotten a lot better with the J3. The problem is, even though the touch UI is improved, the new button(buttons on the actual device) layout is not as good as it was with the S9 (my own opinion).

But to the point of it all. Both the S9 and J3 runs on a Adobe Flash UI, and Cowon have opened up for their API, so you can make your own UI with flash and Actionscript 2 (unfortunatly the UI runs on a AVM 1 in Flash Player 7, so you can’t use AS3).
So I started out making a simple SWF to test out what the J3 was capable of, and how to use the Cowon API. And everything was really straight forward, to call their API you use the ext_fscommand2 function, and passed along some arguments letting the device know what you want to do.
The main problem is the testing phase. You need to plugin the player, transfer your SWF to it, plug it out, turn it on and then test it. The first couple of times it wasn’t an issue, but the 5th time you do it, it gets annoying, and the 10th time I did it, I stopped. It was to much of a hassle. So I searched the net for an emulator so I could test my project right away.
Now the only emulator I could find had no download link, and no one seemed to update it. So I decided to start working on my own.

So far I’ve implemented the ext_fscommand2 function and have it working as intended. But I haven’t made any actual functionality that simulates the device yet. One of the things I’m still having a hard time with is the Key events. I need to catch all the events from the UserSWF (the SWF you wish to load onto the device), and handle them in my own emulated environment instead of having Flash doing it for me.

Anyway, that was a long post just to tell you that I had started work on a Cowon S9+J3 emulator. Hopefully I’ll have a running alpha version next time I post about the subject.

I’ll do a quick explanation of how the process, just to give an idea of how it all works.

1. The CSSParser class reads a given CSS, using a single preg_match_all call.
2. Now then class will start to build up an array of CSSSelector classes. This class will hold all the properties and identifiers of a CSS selector from the given CSS.
3. Each property of the CSSSelector will be held in a CSSProperty class or a class extended the CSSProperty like CSSBorder and CSSBox. This way it’s easy to add more specific output on properties, simply by extending the CSSProperty class and making your own property class.
4. Now all the data is structured in the CSSParser class. And by calling the printCSS() function with a CSSOut class as the argument, we can get the CSS out the way we want.

When printing the CSS a very primitive templating system is used, where the template simply is PHP that has access to the list of selectors after they’ve been run through a preProcess function optimizing the data for output.
An example can be the template1.php file (found in the downloadable zip):

1
2
3
4
5
6
7
8
9
10
11

<?php
foreach ($data as $selector) {
    echo implode(",\n", $selector->identifier);
    echo " {\n";
    foreach ($selector->properties as $property) {
        foreach ($property->getProperty($settings) as $key => $value) {
            echo "\t$key: $value;\n";
        }
    }
    echo "}\n";
}?>

In the bottom of the CSSParser.php file, there’s a small test which outputs a CSS file using 2 different templates. This little example shows you how you can easily use the parser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
$css = new CSSParser();
$css->readCSS(file_get_contents(dirname(__FILE__) . "/data/test.css"));
 
$settings = new CSSOut();
 
echo "Readability:\n";
$settings->templateFile = "data/template1.php";
var_dump($css->printCSS($settings));
 
echo "\nSmallest:\n";
$settings->templateFile = "data/template2.php";
var_dump($css->printCSS($settings));
?>

This project is far from done (or well tested), so even though it can read and parse the simple test.css file included in the zip, it’s not ready for an actual live deployment. It’s simply a piece of code that shows how I would’ve implemented a CSS Parser if I had the time to finish it all.

So if you decide to download the project, here’s a little guide with places of interest (code pieces in the project I feel is vital for this to work or had most fun writing).

• CSSParser->readCSS($cssString) This function is the heart of it all. It processes the CSS and sets up the selectors with the correct properties. I feel I’ve documented this function well, and since I don’t do regular expressions very often I’m particularly proud of the 2 patterns just at the start of this function!
• CSSSelector->getHandler($property) The function that makes sure the correct CSSProperty class is used for a property. It’s actually a bit confusing, and I had to read it a couple of times again before realising what I was trying to achieve when I wrote it. It’s important to note that it’s connected with the $propertyList variable at the top of the CSSSelector.php file.
• CSSBorder Yep the entire class. This was my first property class, then I wrote the CSSProperty class, so the CSSBorder could fit on it, and then wrote the CSSBox in between these to classes. The getBorderArray() function in this class, is also responsible for my Checking for a value speed test

I’ve been working a bit on my CSSParser (which I will rename to CSSReader og CSSHandler when I get around to it), and one thing I found out was, when reading shorthand values (like: border: 1px solid #00ffff;) you can’t assume they always come in the same order.
If we take a border property as an example:

.something {
  border-right: 1px dashed #00ff00;
  border-left: dashed 1px rgb(255,0,0);
  border-top blue solid 1px;
}

This shows that the border shorthand value can have a different order of subvalues, and the actual value data can change alot (notice the 3 different ways of defining a color, the rgb() still cause me a bit of trouble). So to set an array (mapped with ['width'], ['style'] and ['color']) I can’t just split the string and set it, I need to split the string and then try to guess every value. To guess the values I’ll be running through the following process:

I’ve tried to put the checks in the order I would assume most common, so I can continue the loop quickly after each check and skip the following ones.

The test

1. Having an array with all the predefined values, and checking it with in_array.
2. Having all the predefined values in a string separated by spaces, then using strpos to look for our value.
3. Flipping (array_flip) our array from earlier, and instead of in_array we use isset($array['our_value']).
4. Again using strpos to check, but instead of a string separated by spaces I tried a constant.
5. Tried a preg_match on a string of values.

I’ve run the test for the same dataset, but testing for values on different positions in the set.

• first value, is testing for the value which is placed as the first value in the dataset.
• mid value, is a value there’s somewhere the middle of the set.
• last value, is last value of the set.
• no hit, here I test for a value that doesn’t exist in the set.

The obvious winner is the isset method which is almost 5 times faster than checking for the value using the in_array (which was what I would have chosen to start with). To avoid using the array_flip you can always just write the array up with keys and then equal some value, like:

<?php
$arr = array("hidden" => 0, "dotted" => 0, "dashed" => 0);
?>

It’s just a hassle to write larger sets of data that way, so using the array_flip function really helps out here, which is also the method I’ve chosen for my CSS project.

Bench suite

I’ve also made my first test in my new (and not to pretty, but working) bench suite. The bench suite is a site where I can gather my different tests, and be able to easily access them later on for references. So far it’s a very simple setup, where I have:

• A list of the tests. This goes through a directory where each test has it’s own test file, and use some of the data in the file to make an informative list.
• A runner. Which will run each test, and output the results in an easy to read table, along with the actual source code of the test.

Down the road I would like to improve a bit on the interface which is lacking to say the least. I’ve also been planning on saving the test data so I can get an average result of all the tests run.

Empty loops test

So the very first test I’ve done is a simple empty loop(it will run the test every time you, so the result wont be identical to what I’ve displayed below) test. And it also works as a quick how-to for the class it self.
What I wanted to test with this bench, was the difference between the for, while and do..while loops, and as an added bonus I also tested a goto loop (more for the fun of things). I’ve also tested everything with a pre and post increment. Anyway the result of the test looks as following after it’s been through google docs:

To reach my conclusion I’ve run the test multiple times (the above chart is just from a single run), and it seems that the do..while is the fastest loop most of the time, followed by the while loop. A thing that I noticed was the for loop runs faster with pre incrementing(++$i) instead of post($i++). But the other loops tend to be faster with a post increment, don’t ask me why it’s just what I’ve observed.
Even though the do..while is notably faster (almost every time) I think I’ll stick to using the for loop for these kind of loops, unless I really need the speed. In case I needed the speed I would probably do a test with each loop to see what gain I actually would get in that specific case.

All in all a good first test, I think I’ll need to test fewer things in my next tests if possible. I could have skipped pre and post incrementing to make the chart a more readable, something I might keep in mind for my next bench.

Let me show a simple example where we test 2 empty for and while loops and a recursive function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?php
function recursive($c) {
    if ($c == 0)
        return;
    return recursive(--$c);
}
 
$b = new Bench();
 
$b->start("for loop", "1000");
for ($i = 0; $i < 1000; $i++) {
}
$b->end("for loop", "1000");
$b->start("for loop", "10000");
for ($i = 0; $i < 10000; $i++) {
}
$b->end("for loop", "10000");
 
$b->start("while", "1000");
$i = 0;
while ($i++ < 1000) {
}
$b->end("while", "1000");
$b->start("while", "10000");
$i = 0;
while ($i++ < 10000) {
}
$b->end("while", "10000");
 
$b->start("recursive", "1000");
recursive(1000);
$b->end("recursive", "1000");
$b->start("recursive", "10000");
recursive(10000);
$b->end("recursive", "10000");
 
echo $b->getResult();
?>

for loop 	0.000097	0.000810	0.000454	100.00%
while    	0.000074	0.000629	0.000351	77.48%
recursive	0.001844	0.016954	0.009399	2072.14%

The first column is the name of the test.
The following 2 columns is each sub test, so the first number is the time of our “1000″ iterations and the second number is “10000″ iterations.
The fourth column represents the average of all the sub tests (it’s not always this is informative, so there will be an option to remove this in future versions).
The last column is the difference between all the tests average. It will set the first test to 100%, the rest of the tests will be calculated in relation to this number.
With the output formatted this way, you can easily copy and paste it into a spreadsheet and display it in what ever chart that fits your purpose. Just remember not to use the percentage in your data set:

I still need to clean up and comment the class some more, before I’m comfortable with putting it up online. But it’s rather small so if I get some time this weekend I’ll run through it, and it will be up next week.

So I started working on a way to minify my CSS files. I know (or well I found out, just after I started working on my own project) that there’s a well written and very functional CSSTidy which does exactly what I want to do. I will anyhow still continue my own project, mostly for the learning process, but also because it’s been a long time since I’ve had a project of my own and I miss that.
My initial thought was to parse the CSS using regular expressions, but the lexical approach CSSTidy uses caught my eye.
I’ve decided to start out parsing with the regular expressions. I will eventually try to copycat the CSSTidy way, just to get a better understanding of lexical analysis, and having CSSTidy as a result sheet.

So far I’ve made the parser, and it seems to work on proper CSS I will need to test it up against some messy CSS.
I had my CSSParser class, with a $selectors array holding all the selectors (my CSSSelector classes). The CSSSelector class had a similar $properties array, holding all the properties (CSSProperties class) for the selector.
This seemed a bit overkill, the arrays were both using a key being the selector/property name and a value being the class, the class it self just being a class with a value property. So I will remove the 2(selector and property) classes, and just use a simpler array structure.
I do however still like the idea of having the selector and property classes, it fits nicely into the whole CSS principal. I’ve been planing to use them when it comes to outputting the CSS again, but in that case why not just use them to start with … I’m torn.

1. Introduction

So you’ve decided to learn XML-RPC^[1], or did the name just sound “freaky” and raised a little interest? If it did I suggest you read on, if you already know what XML-RPC is, then just skip the next intro part

1.1 What is XML-RPC

XML-RPC is a way to make web services, it packs the requests and responses in XML both the client and the server can understand.
For those who don’t know a web service is a function of some sort placed on the net (it could be a function to convert a string into all upper case letters, which we are going to make in the examples below). The smart thing is that, a web service can be programmed in any kind of language, and any other language can use it. Many big sites have a web service, for example Amazon has a web service that allows you to search books and information.
Another smart thing about XML-RPC (and to my knowledge all other web services), is that they can be run from a web server. Not only is this smart, because you don’t need to install some high-end server dedicated to the purpose. But you don’t have to worry about firewalls.

1.2 Installing XML-RPC

If you’ve installed an extension before, this should be no problem at all, just install the XML-RPC extension. But if this is your first time, the following links will help a bit:
Windows users: http://www.php.net/manual/en/install.windows.extensions.php
Unix users: http://www.php.net/manual/en/install.unix.php
OS X users: http://www.php.net/manual/en/install.macosx.php
For you guys(and gals) who compile PHP: –with-xmlrpc.

2. The Server

For obviusly reasons we start making the server, which contains the function our client will be calling later on.
I’ve decided to comment the code, this way I don’t have to explain it to you after you’ve read it. And you can by remember what it all does later on:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?php
/*****
 * We start witht the functions we wan't to be web services.
 * Each of them must have 3 arguments:
 * 1st: This is the method name, which the client requests.
 * 2nd: This one is the arguments, which the client sends with the request.
 * 3rd: This data is specified by the server it self.
 *****/
function xmlEcho($method, $args, $appData)
{
    return 'Come again: '. $args[0];
}
 
// Just for the fun of it, let's make 2 function:
function xmlAllToUpper($method, $args, $appData)
{
    for ($i = 0; $i < count($args); $i++) {
        $args[$i] = strToUpper($args[$i]);
    }
 
    return $args;
}
 
 
/*****
 * Next up we'll assign the XML-RPC server handle to a variable.
 * I've chosen this "sneaky" name: $xmlServer * But you can think of this
 * as any other handle, for example, when you're working with a database, 
 * you have the connection handle, it's the same thing.
 *****/
$xmlServer = xmlrpc_server_create();
 
 
/*****
 * Now that's done it's time to tell the server which functions the
 * client can request. This is done with the xmlrpc_server_register_method
 * function (why can't they come up with some short names!). This function
 * requires 3 arguments:
 * 1st: The server handle, we just specified above.
 * 2nd: The function name, which the client calls.
 * 3rd: The function name, to run.
 *
 * This means that your function dosn't have to be named the same as the
 * function the client calls.
 *****/
xmlrpc_server_register_method($server, 'echo', 'xmlEcho');
xmlrpc_server_register_method($server, 'goLarge', 'xmlAllToUpper');
 
 
/*****
 * We need to get what ever request the client send us.
 * This is done with the $HTTP_RAW_POST_DATA variable. Nothing more
 * to say about that, so I'll just give you yet another dumb ass
 * comment ... That was it.
 *****/
$xmlRequest = $HTTP_RAW_POST_DATA;
 
 
/*****
 * We have all we need now, for the server to call the function, the
 * client requested.
 * To call this function, we use this (again rediculesly long) function:
 * xmlrpc_server_call_method, which as always take 3 arguments:
 * 1st: The server handle.
 * 2nd: The client request we just got above.
 * 3rd: What ever data you (as the server) want to send, this
 *      will be passed into the $appData variable.
 *****/
$xmlResponse = xmlrpc_server_call_method($xmlServer, $xmlRequest, NULL);
 
// Prepare the header contents so it sends XML
header('Content-Type: text/xml');
 
echo $xmlResponse;
 
xmlrpc_server_destroy($xmlServer);
?>

All done with the server part. If you haven’t figured out exactly how the server works yet, then let me give you a little insight. In short terms, it’s just a php file, that is called by the client, through a normal URL. It then processes the contents which the client send, and return a result.

3. The Client

Well you made it so far, so why not make the client to test your server as well. Even though we made the server first, I must admit you’ll probably be using the client part a “wee” bit more. Of course it’s fun to mess around with the server, but chances are you’ll be using other webservices most of the time?
Anyway, as you might notice, the client code contains a little socket^[2] programming. If you’ve never worked with sockets before don’t think to much of it, it’s not that hard, and you’ll propably pick up the on the code anyway.
When I wrote this article I had no idea of the cURL library, which I would propably be using for an actual project instead of my own request function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<?php
/*****
 * First off we'll be making a function, to send our request to the
 * server.
 * This is where the feared socket programming makes it appearence,
 * take a notice at the default value for port, some people have
 * (for reasons only god may know).
 *****/
function sendRequest($host, $url, $request, $port = 80)
{
    // First off we open a connection to the server.
    if ( !$sock = fsockopen($host, $port, $errNo, $errString) ) {
        echo 'Error: '. $errNo . ' - '. $errString;
        return FALSE;
    }
 
    /*****
     * We prepare the HTTP header, in our request.
     * Notice we set the Content-Type to text/xml (just notice...).
     *****/
    $httpQuery = "POST ". $url ." HTTP/1.0\n";
    $httpQuery .= "User-Agent: xmlrpc\n";
    $httpQuery .= "Host: ". $host ."\n";
    $httpQuery .= "Content-Type: text/xml\n";
    $httpQuery .= "Content-Length: ". strlen($request) ."\n\n";
    $httpQuery .= $request ."\n";
 
    // Here we send the request to the server
    if ( !fwrite($sock, $httpQuery, strlen($httpQuery)) ) {
        echo 'Error while trying to send request';
        return FALSE;
    }
 
    // We get the response from the server
    while ( !feof($sock) ) {
        $xmlResponse .= fgets($sock);
    }
 
    // Closing the connection
    fclose($sock);
 
    // We strip the response from it's HTTP header
    $xmlResponse = substr($xmlResponse, strpos($xmlResponse, "\r\n\r\n") +4);
 
    /*****
     * To decode the XML into PHP, we use the (finaly a short function)
     * xmlrpc_decode function. And that should've done the trick.
     * We now have what ever the server function made in our $xmlRespnse
     * variable.
     *****/
    $xmlResponse = xmlrpc_decode($xmlResponse);
 
    // Returns the result.
    return $response;
}
 
/*****
 * The first thing we do, is encoding our request into an XML-RPC
 * string. This is done with the xmlrpc_encode_request function, which 
 * accepts 2 arguments:
 * 1st: Name of the function we wish to call from the server.
 * 2nd: The argument we want to parse into this function. If we
 *      wish to parse more than 1 argument, we put them into an array.
 *****/
$xmlRequest = xmlrpc_encode_request('echo', 'All hail Philip the almighty... Obey!');
 
/*****
 * Now we call the sendRequest function, with our XML request. Remember
 * to change the host if you're not on a local computer or what ever you use.
 * And remember to change the path, if you've not saved the server directly in
 * the root (which I suspect you havent). If you hav it in the "articles/php"
 * subdirectory, you use "/articles/php/xml_server.php"
 *****/
$xmlResponse = sendRequest('127.0.0.1', '/xmlrpc_server.php', $xmlRequest);
 
// And at last, we print out the response!
var_dump($xmlResponse);
?>

Hey, now wasn’t that funny! Ya I bet it was … Anyway let’s take one last example just to try out all of our functions. This time we parse more than one argument with the request, just to get the whole picture:

1
2
3
4
5
6
7

<?php
$xmlRequest = xmlrpc_encode_request('goLarge', array(1234, 'little', '1 small step'));
 
$xmlResponse = sendRequest('127.0.0.1', '/xmlrpc_server.php', $xmlRequest);
 
var_dump($xmlResponse);
?>

Well I don’t realy know how to explain this any better, so I guess all the practical stuff ends here.

4. Theory

I’ve chosen to place this section at the end of the article, because it’s just a little extra on how XML-RPC works underneath. And let me just tell you, that I quickly go through this, if you want more detailed information try the XML-RPC Specification^[3], which will go more in depth.

4.1 Request

I’ll start by pasting in our own request to the server (the echo request we made in the example above), leaving out the headers:

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="iso-8859-1"?>
<methodCall>
  <methodName>echo</methodName>
  <params>
   <param>
    <value>
     <string>All hail Philip the almighty... Obey!</string>
    </value>
   </param>
  </params>
</methodCall>

It’s pretty straight forward, the first thing we do is state that we would like to call a function <methodCall>.
We then tell the server which function we’re calling <methodName>, this is followed by out list of parameters.
A <params> can have any number of <param>, which each holds a <value>. In our case this value is a string (<string>), but it can be any one of XML-RPCs 5 supported data types:

XML-RPC also supports arrays and structures, but you’ll have to read about them in the XML specs.

4.2 Response

Again I’ve stripped the HTML header from the server response:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="iso-8859-1"?>
<methodResponse>
  <params>
    <param>
      <value>
        <string>Come again: All hail Philip the almighty... Obey!</string>
      </value>
    </param>
  </params>
</methodResponse>

Like with the request, this is rather understandable, so I wont add anything to this.
Sometimes an error happens, you might have supplied to many arguments, or you might misspelled a function so the server can’t find it. When this happen the server will return a fault code. I’ve (besides stolen the idea of showing this fault code here from the XML-RPC Specs) chosen to give you an example on a fault code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="iso-8859-1"?>
<methodResponse>
  <fault>
    <value>
      <struct>
        <member>
          <name>faultString</name>
          <value>
            <string>server error. method not found.&#10;&#10;echos</string>
          </value>
        </member>
        <member>
          <name>faultCode</name>
          <value>
            <int>-32601</int>
          </value>
        </member>
      </struct>
    </value>
  </fault>
</methodResponse>

Again, it’s easy to understand, but this shows the <struct> and how it works.

Conclusion

To be honest I don’t really know what to make of all this, except that it works like a charm. If you compare the XML-RPC protocol to some of the other web service protocols you can find “out there”, you’ll find that the difference is small. Some are a little bit more advanced, some are more compact, others are exactly the same and some are useless.
Finding the right web service, is all about what you like to work with, my personal favorit is XML-RPC (hence this article). So my suggestion is try some of the other big web services, and find the one you’re most comfortable with, and then stick with it!
Honestly I haven’t used XML-RPC since I wrote this article. And if I should make a service available, I would first search through any new alternatives, and find a solution that would fit my problem.

a. sources

[1] http://www.xmlrpc.com
[2] http://dk.php.net/manual/en/function.fsockopen.php
[3] http://www.xmlrpc.com/spec

1. Introduction

A long long time ago, I was a little trip by http://romanm.ch (no longer the same site), and well I must admit pretty impressing, try to take a look your self, especially the movies are well made.
Anyway, this gave me the idea of making an image to pure html code. My theory was that it would be simple to make a picture look good even with nothing but html (and as you’ll see later this was the truth, it’s possible to make 100% replicas), even though it’ll be size heavy.
Before we get going, remember to enable the GD library^[1], for PHP. If you don’t know how, consult the PHP manual. I wont be going into details about the different GD lib functions, so you’ll need to read up on the GD functions you’re not familiar with in the manual as well.

2. rgb2html

First off we need a function to change the RGB color code to HTML color code (or simple from decimal to hexadecimal^[2]). Lucky for us PHP is filled with a lot of helper functions, that sometimes turns out to be, well useful. This time it’s the great comeback for the dechex function, which convert a decimal number to hexadecimal. I’ve packed this down in a little function:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
function rgb2html($clrR, $clrG, $clrB, $intReturn = 2) {
    $clrR = substr("0" . dechex($clrR), -2);
    $clrG = substr("0" . dechex($clrG), -2);
    $clrB = substr("0" . dechex($clrB), -2);
 
    if ($intReturn == 1)
        return array('red' => $clrR, 'green' => $clrG, 'blue' => $clrB);
    elseif ($intReturn == 2)
        return $clrR . $clrG . $clrB;
}
?>

In our code, all we need is the function which spits out the color code as a string, but I got carried away and made a little extra (return as an array). And you can like any other of my functions in any of my articles, (ab)use them like a mad man, if that’s you desire, just as long as you don’t say you’ve written then your self. And just for the fun of it, lets try the code.

1
2
3
4

<?php
// #ff9600
echo '#'. rgb2html(255, 150, 0);
?>

And well it seems fine.

3. pic2html

And now this is where all the magic happens. In this function, we’ll be reading a picture pixel by pixel, and printing it out as HTML. I’ve made a couple of considerations about the HTML before I started:
I’ve used the <pre<, this way we save some valuable space, byt not having to use the evil <br /> code. And i’ve chosen to use the <font color=”#[COLOR]“>char</font> instead of the (now a days) “correct” <span>, again to save some Kb. The stylesheet i’ve chosen is the following:

1
2

font-size: 1px;
line-height: 1px;

For the less fortunate (this including myself. It took me several tries to find this obvious css syntax), this sheet will give it so that every character fills up 1 single pixel.
Anyway here you have it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php
function pic2html($img, $char = "#") {
    $imgX = imagesx($img) - 1;
    $imgY = imagesy($img) - 1;
    $lastIndx = imagecolorat($img, 0, 0);
    $clrRGB = imagecolorsforindex($img, $lastIndx);
 
    echo '<pre style="font-size: 1px; line-height: 1px;">';
    echo '<font color="#' . rgb2html($clrRGB['red'], $clrRGB['green'], $clrRGB['blue']) . '">';
 
    for ($y = 0; $y <= $imgY; $y++) {
        for ($x = 0; $x <= $imgX; $x++) {
            $clrIndx = imagecolorat($img, $x, $y);
            if ($lastIndx != $clrIndx) {
                echo '</font>;';
                $clrRGB = imagecolorsforindex($img, $clrIndx);
 
                echo '<font color="#' . rgb2html($clrRGB['red'],
                $clrRGB['green'], $clrRGB['blue']) . '">';
                $lastIndx = $clrIndx;
            }
            echo $char;
        }
        echo "\n";
    }
    echo "<"."/pre>"; // You don't need to . concatenate the string, but my WP-plugin brakes if I don't.
    return imagedestroy($img);
}
?>

It shouldn’t be that hard to understand, but I’ll run through the code in briefs below:
First of we find the size of the image, so we know how many times to run our loops.
Next we find the very first color. This is done outside our loops, this way we can optimize our code, so if the same color appears 2 times after each other, we will keep the same . This will in pictures with few colors make the size of the file dramatically less.
Now we print the selected character with the right color. Running from the top left corner till the lower right when it’s done.

1
2
3

<?php
pic2html(imagecreatefromjpeg('images/bigbee.jpg'));
?>