Talk In Code

Yesterday I talked about creating some simple Flex elements in your application. Today I will introduce a new element called Script.

The Script element, if you haven’t already guessed is used to run your application function and should be contained within the Application element. You can either put script inline like this.

<mx:Script>
// some code here
</mx:Script>

Or you can use the source attribute and link it with an external ActionScript source file.

<mx:Script source="myactionscriptfile.as">
</mx:Script>

The simplest thing you can do is use the function trace(). This is a debugging function that will output information into the debugging Window in your Flex IDE. To print out a message when your application is first run do the following.

<mx:Script>
trace('Flex program running.');
</mx:Script>

To capture a mouse click on a Button element you need to use the attribute click, the value of which can be either come code or a callback to a function. To use inline code using the following, which will print out a trace.

<mx:Button id="abutton" label="A button" click="trace('Button clicked');" />

To use a callback function do the following.

<mx:Button id="abutton" label="A button" click="clicked();" />

In your script section you can now add the function that you want, and perhaps do more than just a simple trace() call. The following script will send a trace message to your output and then open a browser window to the talk in code page. If you embed this application within a web page then the current browser window will redirect to the URL.

<mx:Script>
public function clicked():void
{
 trace('Button clicked');
 navigateToURL(new URLRequest('http://www.talkincode.com'));
}
</mx:Script>

To create a function you need to use the following syntax:

scope function functionName():return type
{
}

The scope is how the application will see the function. For a function like this that is outside the scope of a class (which is another topic) it should have public scope. The return type is the type of value that is returned by the function, and if no value is to be returned then void is used. If the function adds two numbers together and returns the result then the return type would be Number.

Use the following snippet to convert any jpeg image into the equivalent image in ASCII format. It works by loading an image using the PHP GD2 library function ImageCreateFromJpeg() and then figures out the height and width of it. It then uses these values to loop through every pixel in the image and figures out the colour of that pixel. It uses this value to create a <span> element that uses the text colour of a # to change the colour of the text.

An additional time (and space) saver for this function is that it detects any pixels that are just off white and simply displays a &nbsp; character instead.

$img = ImageCreateFromJpeg('logo.jpg');
 
// get height and with of the image.
$width = imagesx($img);
$height = imagesy($img);
 
echo '<pre style="font-size:1px;">';
for($h=0;$h<$height;$h++){
 for($w=0;$w<=$width;$w++){
  if($w == $width){
   echo '<br>';
   continue;
  }
  // get image at pixel location
  $rgb = ImageColorAt($img, $w, $h);
  // convert colour into usable format
  $r = ($rgb >> 16) & 0xFF;
  $g = ($rgb >> 8 ) & 0xFF;
  $b = $rgb & 0xFF;
  // check for white/off-white colour
  if($r > 200 && $g > 200 && $b > 200){
   echo '&nbsp';
  }else{
   echo '<span  style="color:rgb('.$r.','.$g.','.$b.');">#</span>';
  }
 }
}
echo '</pre>';

As an example, take the following, quite recognisable, image.

This is transformed into the text on the following page.

The Google logo in ASCII format

Beware that although this works will for small image sizes if you try to convert a very large image you will find that the script takes a long time. This is because it looks at every pixel in turn and converts the colour into something usable, so if there are a lot of pixels it takes a long time to look at every one. Not only this, but you will also find that the size of the page generated will grow significantly due to all of the span elements being created.

To include a JavaScript file into a HTML page you can use the script tag with the src parameter pointing towards the source code file. However, there is a subtle difference between the script tag in HTML and XHTML. This is because the language attribute is not supported in XHTML, so if you just copy the code from HTML to XHTML the page won’t validate. The solution here is to just leave it out.

For HTML.
<script language="JavaScript" type="text/javascript" src="scripts/javascript.js"></script>

For XHTML
<script type="text/javascript" src="scripts/javascript.js"></script>

The type attribute is the mime type of the script, which is always text/javascript. Although there is come discussion about what the mime type is supposed to be, best results are usually obtained by just sticking with text/javascript.