Archives for November 2012

The Raspberry Pi Works

November 30, 2012

My Raspberry Pi finally arrived yesterday, after what seemed like an eternity of waiting. I ordered it October 24. It was shipped November 20 and arrived on my doorstep November 29. That’s over a month! I had a few hours to play around with it. The first thing I did was placed the Raspberry Pi inside an Adafruit Rainbow Pibow enclosure that I’ve ordered several weeks back. It looks amazing. Here’s it is.

Once it was inside the Pibow enclosure, I downloaded the Raspberry image called Raspbian Wheezy. I loaded it to an old 4GB SD card that originally came with my Nikon D90 camera. Once the image was loaded, I inserted the SD card, connected a USB keyboard, a USB mouse, and a HDMI cable.

On a side note, I’m currently using a 5v 750ma USB adapter, which I know is sufficient, but the Raspberry Pi needs more ooomp with multiple USB devices connected to it. They recommend that you have at least a 5v 1amp power adapter.

Finally, I powered the Raspberry Pi. A blank screen! Not good. It turned out to be just a resolution issue. I ended up plugging my Raspberry Pi to my old TV, via a RCA composite cable. It worked, although a good portion of the screen was clipped. I started the GUI, then accessed the Terminal and changed the screen resolution from there.

I found this page with instructions how to change Raspberry Pi to 1680×1050 resolution.

Edit the /boot/config.txt file.

sudo nano /boot/config.txt

Add the following code to the end of the file. 58 is for screens with a 1680×1050 resolution.

hdmi_group=2
hdmi_mode=58

Reboot.

sudo reboot

My monitor works! All 1680×1050 pixels. I ran an update next by issuing the following commands.

sudo apt-get update
sudo apt-get upgrade

This process takes a good 20 minutes. Finally, I installed Apache.

sudo apt-get install apache2

Once installed. I checked if the web server works. It does.

Generate Random Characters

November 28, 2012

This article will show you how to generate random characters in PHP. Random characters are useful in a variety of ways, such as generating random passwords or filenames. The command that we are going to use to generate random characters is a function called mt_rand(). In addition, we will specify which characters we want to include in our random key.

I’ve decided to omit vowels, as well as the number zero, to make the random characters much more unpredictable. I’ve added some special characters in the mix, just for the fun of it. If you don’t want the special characters, you can just take them out. Here’s our list.

// List of random characters
$characters = array(
	"B","C","D","F","G","H","J","K","L",
        "M","N","P","Q","R","S","T","V","W",
        "X","Y","Z","b","c","d","f","g","h",
        "j","k","l","m","n","p","q","r","s",
        "t","v","w","x","y","z",
        "1","2","3","4","5","6","7","8","9",
	"!","@","#","$","%","^","*","(",")",
	"+","=","{","}","[","]","~"
);

Next, we will create a variable array to store our random key. We will run a loop 7 times, to generate a key that is 7 characters long. Inside the loop, we count the number of characters on our list, and generate a key, one by one, until the loop is done. Finally, we reveal our random key on the screen using the echo command. Just reload the page to generate a different key.

// Assign an array for our random key
$keys = array();
 
// generate random key 7 times
while(count($keys) < 7) :
	// count($characters)
	$x = mt_rand(0, count($characters)-1);
	if(!in_array($x, $keys)) :
		$keys[] = $x;
	endif;
endwhile;
 
foreach($keys as $key) :
	$random_chars .= $characters[$key];
endforeach;
 
// display random key
echo $random_chars;

Demo

2012 Mac Mini

November 27, 2012

About a month ago, I bought a Mac Mini at the Apple store in San Francisco. I remember it very well, because it was October 31, which happens to be Halloween. If that wasn’t enough, it was also the day of the victory parade of the World Champions San Francisco Giants. So, I headed out to the Apple store, at the corner of Ellis and Stockton after watching the last motorcade. I picked up the new 2012 Mac Mini, and carried it home, inside an Apple plastic bag.

The new Mac Mini is twice as fast versus its predecessor. It’s powered by a 2.3GHz quad-core Intel Core i7 (Turbo Boost up to 3.3GHz) processor with 6MB L3 cache. It comes with a 1TB (5400-rpm) hard drive, and 4GB RAM. I upgraded the memory to 8GB, which I thought was a good decision at the time. The Mac Mini also comes with a Thunderbolt port, four USB 3.0 ports, a Firewire 800 port, a Gigabit Ethernet port, and a 802.11n Wi-Fi wireless adapter.

The only gripe I have with the Mac Mini is, my widescreen monitor, a HP w2207h HDMI flat screen, doesn’t quite work quite well with the Mac Mini. When connected using a straight HDMI to HDMI cable, the screen would blink or flash every second. I think it’s a display driver issue with this HP monitor. In the end, I had to get a Mini DisplayPort to DVI Adapter, a DVI to HDMI cable, to connect my Mac Mini to the HP monitor. It’s quite a convoluted way to connect to a monitor, if you ask me, but it works. I tried using a Mini DisplayPort to VGA connection, but it’s not quite as sharp.

After a month, I can honestly say, I love my Mac Mini equally as much as my Linux desktop.

Sorting Arrays

November 27, 2012

I was working on a client project last night. I had to sort a multidimensional array. I came across a neat PHP function called asort. In the end, I had to use arsort instead of asort to get a reverse sort order. This short article will show you how to sort arrays in normal and reverse order. Here’s our array.

$animals = array("a" => "Giraffe", "b" => "Elephant", "c" => "Lion");

We will sort the array using the asort function. We print the array to view the results.

asort($animals);
print_r($animals);

The asort output is:

Array ( [b] => Elephant [a] => Giraffe [c] => Lion )

The arsort (reverse order) output is:

Array ( [c] => Lion [a] => Giraffe [b] => Elephant )

Google Web Fonts Plugin

November 26, 2012

I’m releasing a WordPress plugin called “Web Fonts.” This plugin takes advantage of the free and open-source Google Web Fonts. If you’re not familiar with Google Web Fonts, it’s a group of fonts that allows designers to customize the looks of their blogs or websites using hundreds of exotic fonts. With a gaggle of external fonts available for use, “Web Fonts” can transform the overall design of a website.

Install and Configure

Upload the “webfonts” folder to the WordPress plugins folder.
Activate the “Web Fonts” plugin from the “Dashboard > Plugins > Installed Plugins.”
Configure stylesheet link and CSS from the “Dashboard > Settings > Web Fonts.”
If you want multiple fonts, just add a second stylesheet link and additional CSS.
“Update Options” to save.

Screenshot

Version 1.1

Moved to “Appearance > Web Fonts”
Added some documentation

Download

Numbers And Currency On Forms

November 21, 2012

This article will show you how to limit currency and numbers only in a form. There are essentially two different approaches when validating data. One way is to validate before submitting the form. The other is to validate after submitting the form. Obviously, validating before submit has its own merits. Incorrect data can be corrected before hitting the submit button. In this article, we will validate a field to allow numbers and currency only. We will allow up two decimal places to reflect currency values. The HTML markup is detailed below.

HTML Form

We have a simple form with one input and a submit button. There are two Javascript functions in the input field. The blockNonNumbers function allow numbers only to be typed on the input field. Non-number characters are ignored. The extractNumber function formats the input to two decimal places.

<form id="login" method="post" action=""> 
<input type="text" name="username" value="" 
 onblur="extractNumber(this,2,false);" 
 onkeyup="extractNumber(this,2,false);" 
 onkeypress="return blockNonNumbers(this, event, true, false);" />
</form>

Javascript

I’ve included the validate.js Javascript code, which you can download. The code contains two functions: blockNonNumbers and extractNumber. In the markup, we can link to the Javascript file in the head section of the page using the following markup.

<script language="javascript" src="validate.js"></script>

All Together Now

Here’s the entire markup.

<!doctype html>
<html>
<head>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<form id="login" method="post" action=""> 
<input type="text" name="username" value="" 
 onblur="extractNumber(this,2,false);" 
 onkeyup="extractNumber(this,2,false);" 
 onkeypress="return blockNonNumbers(this, event, true, false);" />
</form>
</body>
</html>

Demo

Unsaved Changes On Forms

November 20, 2012

If you try to abandon a form, you’ll be reminded that you’ve made changes. In addition, a pop up message will come up, asking you whether to stay on the page or to abandon it. This feature is made possible using a Javascript function. This short article will show how to alert users if they made changes to a form, prior to canceling or going to another link.

The Form

In this example, I created a simple form with one input called “username.” I’ve added “onchange=’needToConfirm=True'” to monitor the input field. I also added a save and cancel button, as well as an internal link for testing the form later. The save button calls the “needToConfirm” function when the save button is clicked. The cancel button simply reloads the same page when the cancel button is clicked. Here’s the HTML markup.

<form id="login" method="post" action="">
<input type="text" name="username" size="40" value="" onchange="needToConfirm=true" /><br>
<input type="Submit" name="save" value="Save" onclick="needToConfirm=false;" />
<input type="button" value="Cancel" onclick="window.location='confirm.html'" />
<a href="confirm.html">Link</a>

Javascript

The unsaved changes feature is made possible using Javascript. The function starts out setting needToConfirm to false. A pop up window comes up notifying the user that they have unsaved changes on the form. The user is prompted whether to stay on the page or to leave the page. Add the following Javascript code at the end of the form. Go ahead, test the demo below.

<script>
needToConfirm = false;
window.onbeforeunload = askConfirm;
function askConfirm() 
{
 if (needToConfirm) 
 {
 return "You have unsaved changes.";
 }       
}
</script>

Demo