Wednesday, November 30, 2011

Changing the color scheme of the map of Google Maps Component

If you have seen websites like Volkswagen "Think Blue." Road Trip before, you would probably have seen the Google Map that was in Blue color. So how do you actually do that in Flash? That would be my main objective of sharing this post today. :)


The following would be the source codes of my Flash File.
package com.TintGoogleMap
{
 //Import the classes required for Google Maps
 import com.google.maps.LatLng;
 import com.google.maps.Map;
 import com.google.maps.MapEvent;
 import com.google.maps.MapType;
 import com.google.maps.controls.MapTypeControl;
 import com.google.maps.controls.PositionControl;
 import com.google.maps.controls.ZoomControl;
 
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.filters.ColorMatrixFilter;
 import flash.geom.Point;
 
 //Import the Component Class for Numeric Stepper
 import fl.controls.NumericStepper;
 
 public class Main extends Sprite
 {
  private var myMap:Map;
  //Set the base width and height of the Flash File
  private var baseWidth:Number = 800;
  private var baseHeight:Number = 600;
  private var _mcMap:MovieClip;
  private var _mcColorControls:MovieClip;
  
  public function Main()
  {
   //execute the function 'addToStageEvent' when the flash file
   //have been added to stage.
   this.addEventListener(Event.ADDED_TO_STAGE, addToStageEvent); 
  }
  
  private function resizeEvent(event:Event):void
  {
   //Move the holder of the Map to the top left corner
   //of the flash file
   _mcMap.x = (stage.stageWidth - baseWidth) / -2;
   _mcMap.y = (stage.stageHeight - baseHeight) / -2;
   
   //Move the controls to the bottom right of the flash file
   _mcColorControls.x = baseWidth + 
    (stage.stageWidth - baseWidth) / 2;
   _mcColorControls.y = baseHeight + 
    (stage.stageHeight - baseHeight) / 2;
   
   //Resize the Google Map Component to fill up the flash file
   myMap.setSize(new Point(stage.stageWidth, stage.stageHeight));
  }
  
  private function addToStageEvent(event:Event):void
  {
   _mcMap = this.getChildByName("mcMap") as MovieClip;
   _mcColorControls = this.getChildByName("mcColorControls") as MovieClip;
   setupStepperControls();
   
   //setup the Google Map Component and add it to the map holder
   myMap = new Map();
   myMap.key = "your_api_key";
   myMap.sensor = "false";
   //execute the function 'onMapReady' when the map is ready 
   //or created success
   myMap.addEventListener(MapEvent.MAP_READY, onMapReady);
   resizeEvent(null);
   _mcMap.addChild(myMap);
   
   //execute the function 'resizeEvent' when the flash file
   //have been resized
   stage.addEventListener(Event.RESIZE, resizeEvent);
   resizeEvent(null);
  }
  
  private function onMapReady(event:Event):void {
   //add the respective Google Map Component controls
   myMap.addControl(new ZoomControl());
   myMap.addControl(new PositionControl());
   myMap.addControl(new MapTypeControl());
   updateColorScheme();
  }  
  
  private function setupStepperControls():void
  {
   var tempSelector:NumericStepper;
   for (var i:int = 0; i < (_mcColorControls.numChildren - 1); i ++)
   {
    tempSelector = _mcColorControls.getChildAt(i) as NumericStepper;
    
    //execute the function 'updateColorScheme' when the 
    //values of the NumericStepper have been changed
    if(tempSelector)
     tempSelector.addEventListener(Event.CHANGE, updateColorScheme);
   }
  }
  
  public function updateColorScheme(event:Event = null):void  
  {  
   var matrix:Array = new Array();
   var colorArray:Array = ["R","G","B","A"];
   var tempSelector:NumericStepper;
   //Create a fake matrix(Array) based on the values of the
   //NumericStepper on the bottom right of the screen
   for(var i:int = 0; i < colorArray.length; i ++)
   {
    for(var j:int = 0; j < 5; j ++)
    {
     tempSelector = _mcColorControls.getChildByName("mc" + 
      colorArray[i] + "" + j) as NumericStepper;
     matrix.push(tempSelector.value);
    }
   }
   
   _mcColorControls.txtOutput.text = "[" + matrix.toString() + "]";
   
   //Create a Color Matrix Filter and apply the filter to the
   //Google Map Component
   var CMF:ColorMatrixFilter = new ColorMatrixFilter(matrix);  
   mapArea.filters = [CMF];  
  }  
  
  //getter function to get the main map which will be used in
  //changing the colors
  public function get mapArea():*  
  {  
   var mapPart:* = myMap.getChildAt(1);  
   return mapPart.getChildAt(0);  
  }  
 }
}
* Click here to view the demo of this example.
^ Click here for the source files of this demo.

** Click here for the website of Volkswagon Singapore "Think Blue" Road Trip.
^^ Click here for the blog of JActionScripters, that have taught me about
   the secret behind this.
-- Click here to learn more about Color Matrix Filter in Flash.
~~ Click here to learn more about the Class ColorMatrixFilter in Flash.

Sunday, November 27, 2011

Saving Private Data

Have you encountered the following situation before? Hard Disk just crashed and you need to retrieve important data from the Hard Disk... Let's face it. No one is prefect and it is impossible for you to make a backup of all your data all the time.

Probably I'm a clumsy user or probably it's my luck. Seems that my Hard Disk drive are getting spoilt pretty easily. Ex: drop my external hard disk once... Game Over..., CPU suddenly... Game Over... etc.
And Hard Disk data retrieval services are super expensive and time consuming.
On top of that... Unreliable... I don't think anyone want to ended up like Hong Kong artiste E*****. Sending a hard disk to unknown personal may caused important data to be leaked.
Ex: you bank info, accounts like Facebook, Gmail, etc.

Hence after experiencing a few instance of facing the issue of Hard Disk Failure, I can conclude that there are some softwares that turn out to be pretty handy in data retrieval.


Image taken from Quetek Consulting Corporation,
which is the company behind File Scavenger

File Scavenger
Simple UI and probably one of the fastest data retrieval software.
If File Scavenger can't detect your Hard Disk, the problem might be
caused by components of the Hard Disk itself.


Image taken from Recover My Files

Recover My Files
Provides a lot of options to the type of Data that you want retrieve
and the data source. The drawback would be ... recommended for
professional users only. I find the UI quite confusing sometimes.

Oh and on top of the softwares listed in the above, you should try the following
steps before moving on to the step of data retrieval.

Try checking the following first:
  • Power have been transmitted to the Hard Disk
  • Hard Disk doesn't give out a loud 'Tick' sound after a few minutes of seconds
If you have encountered any one of the above, probably one of the components of your Hard Disk is spoilt. (You can try sending it to the respective Hard Disk Manufactures but...)

* Click here for the website of Quetek.
^ Click here for the website of Recover My Files.

Nightmare on File Comparison...

Being a developer, have you ever encountered the problem of making a major change in your files and suddenly the whole program or website was not working at all? If you have been making consistently making backups using a SVN or you have been consistently creating you own build for backups, you can always use the following software to do a file or folder comparison to easily identify or rollback your changes.



Image taken from the website of WinMerge

Although the above application only works on a Windows, it doesn't mean that there isn't similar softwares in a Mac or a Linux. For a Mac, there's always FileMerge and on a Linux, you can always try softwares like Meld.

Biggest similarity between the softwares mentioned in the above - all of them are FREE tools to install and try.
Yes, I am a Cheapo/Cheapskate...... :P

* Click here for the website of WinMerge.
* Click here for the website of Apple Developer Tools, that contains FileMerge as part of
  the toolkit.
* Click here for the website of Meld.

Sunday, November 20, 2011

Secret to display nicely formatted programming codes in your blogs/websites

If you have been following this blog for a short period of time, you probably would ask the question of how do I display programming codes in such a nicely formatted manner? I remembered the day that I had the same doubt as you do and there's a secret to it. Introducing... SyntaxHighlighter.


So what can SyntaxHighlighter do?
Click here for the demo of SyntaxHighlighter.

Isn't it interesting? On top of that, SyntaxHighlighter support programming language like as3, xml, php, C++, Javascript, etc... Isn't that nice?
Click here for a more precise list of programming language that SyntaxHighlighter supports.

So how do I configure it?
You just need to copy and paste the following codes into the <head> tag of your HTML Template of your blog.

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
     SyntaxHighlighter.all()
</script>
</head>

and and a <pre> tage like the following example will do.
<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

Click here for a more detailed explanation on how to setup SyntaxHighlighter in your blog.

Saturday, November 12, 2011

A year has past and here comes......

SiteX 2011. This was probably the biggest and the last IT show of the year 2011. So if you want to grab all the fantastic IT products of the year, this is probably your last chance.


Image taken from the website of SiteX 2011.

Note: it seems that Google Nexus might be launching at SiteX. So if you want to try of get one, you probably might want to visit SiteX which will be held at Singapore Expo starting from November 24 - 27.

* Click here for the website of SiteX.

Saturday, November 5, 2011

Simple PHP demo for file uploading (II)

I have shown you how to create a simple PHP file that will help you to upload a file into a server a few weeks ago. But if you take a look at the post a few weeks ago, you will realise that the output that you are getting after a successful upload isn't very useful at all. Hence, I have made some minor changes to the PHP file so that you will be getting an output in xml format.

This demo will start from a simple html file.
<html>
<body>

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file" /> 
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>
And a simple PHP file that will handle all the uploading...
<?php  
//Header for xml file
header ("Content-Type:text/xml");  

//Maximum filesize that can be uploaded through this file
$filesize = 1000;
//The folder that all the uploads will be place in
$folderName = "uploads/";

$output = "";

// detect slash/backslash nomenclature dirname
$path = dirname( __FILE__ );
$slash = '/'; strpos( $path, $slash ) ? '' : $slash = '\\';
define( 'BASE_DIR', $path . "/" );
$dirPath = BASE_DIR . $folderName;   // folder path
//If the filesize of the file is smaller than the maximum filesize
if ($_FILES["file"]["size"] < $filesize)
{
 //If there is an error
 if ($_FILES["file"]["error"] > 0)
 {
  //Create a xml node with the name of 'error' and write the type of error into the node
  $output = createDataXMLNode("error",$_FILES["file"]["error"]);
 }else{
  //Display more info about the uploaded file
  //Create a xml node with the name of 'name' and write the file name into the node
  $output = createDataXMLNode("name",$_FILES["file"]["name"]);
  //Create a xml node with the name of 'type' and write the file type into the node
  $output .= createDataXMLNode("type",$_FILES["file"]["type"]);
  //Create a xml node with the name of 'size' and write the file size into the node
  $output .= createDataXMLNode("size",($_FILES["file"]["size"] / 1024) . " Kb");
  //We don't need the info of the temp file.
  //echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";
  //If the folder hasn't been created yet, create it now
  if(!is_dir($dirPath))
   mkdir($dirPath,0777);
  //If the file already exist
  if (file_exists($dirPath . $_FILES["file"]["name"]))
  {
   //Create a xml node with the name of 'error' and indicate that a similar file has exists into the node
   $output = createDataXMLNode("error",$_FILES["file"]["name"]." file exist");
  }else{
   //Copy the uploaded file into the specified folder
   move_uploaded_file($_FILES["file"]["tmp_name"],
   $dirPath . $_FILES["file"]["name"]);
   //Create a xml node with the name of 'path' and write the file path into the node
   $output .= createDataXMLNode("path", removeFileName(). $folderName . $_FILES["file"]["name"]);
  }
 }
}else{
 //Create a xml node with the name of 'error' and write 'Invalid file' into the node
 $output = createDataXMLNode("error","Invalid file");
}
//Create a xml node with the name of 'file' and write all the values of $output into the node
echo createNormalXMLNode("file",$output);

//Function for creating a Generic XML node
function createNormalXMLNode($name,$value){
 return "<" . $name . ">" . $value . "</" . $name . ">";
}

//Function for creating a normal XML node that contains some values that might have illegal characters
function createDataXMLNode($name,$value){
 return "<" . $name . "><![CDATA[" . $value . "]]></" . $name . ">";
}

//Function to get the url of the current page
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["HTTP_HOST"].":";
  $pageURL .= $_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}

//Function to get the url of the current page and remove the filename of this page
function removeFileName(){
 $pageURL = curPageURL();
 $pieces = explode("/", $pageURL);
 $piecesLength = count($pieces);
 $pageURL = "";
 for ( $counter = 0; $counter < ($piecesLength - 1); $counter ++) {
  $pageURL = $pageURL. $pieces[$counter]."/";
 }
 return $pageURL;
}
?>

Note: after you have uploaded a file, you will realise that the output looks kinda strange. This is because I'm using a free web hosting services and it is adding some extra lines of codes to my output. But if you look at my source codes, you can easily find a neatly formatted xml in the output.

* Click here to view the demo of this example:
^ Click here for the source files of this demo.

~ Click here for the posts related to PHP Simple file upload.