Clay, Author at Hungred Dot Com

How to make animated GIFs extension file using Photoshop

Ever wonder how to make an animated GIFs extension image file using Photoshop? Animated GIFs image is useful in many different occasions. Especially when you wish to create a banner on the web and didn't know what to do. Normally, what all of us will do is to search for any program that can assist us with this task. But usually it is quite difficult to find something free and powerful enough to make an animated GIFs image without watermark or restrictions. Luckily, Photoshop is able to do this for you without any extension plugin or difficult procedure. In this article, we will look at how animated GIFs image can be achieved using Photoshop.

Scrolling Animated GIFs with Photoshop

Let's start with something really simple. All you need is something like a full screen shot of your website such as this.

Open this image with your Photoshop apps and it will appear as a new layer as shown below,

Now clicked on window->animation on the top menu bar and the animation bar will appear below.

Now create a new photoshop file with the height differ from the image as shown below,

Now, copy the image shown above to the new file and you should get something like this.

Next, create a new animation frame on the animation window as shown below,

Now, use the Move Tool to move the image right down to the bottom as shown above. Clicked on the first frame and press on "Tweens animation frames" and you will see the pop up as shown below.

Once you pressed "Ok" button, a list of frames will be added between the first and second frame. This means that it will animate from the first frame to the last frame by putting in additional frame to initialize the movement from the first to the last frame.

Now all you need to do is to clicked on the play button to see the animation from the first frame all the way to last last one. You can change the animation to forever, just once or 3 times by clicking on the below line. There are a few options to choose, just play around with it and you should have a good idea what each icon does.

Now its time to save the gif file. Clicked on File->Save on Web & Devices as shown below,

Clicked save and you will have something like this.

Normal Animated GIFs Image With Photoshop

CreativeTechs has an excellent tutorial on basic animated GIFs tutorial. Do read it up and you should get a very clear idea on how animated GIFs on Photoshop works 🙂

“You do not have sufficient permissions to access this page.” on plugin admin page after update to WordPress 3.0

Well, if you are having problem with your WordPress plugins after an upgrade to WordPress 3.0, this article might just help you. The error you will being seeing on your WordPress plugins will most likely be located on the admin side of WordPress. You will most likely see the message "You do not have sufficient permissions to access this page." and starts debugging and looking for clues on what is happened suddenly with the new upgrade of WordPress 3.0. (that what happens to me) You will most likely find yourself looking at the function user_can_access_admin_page() which return false and cause you debugging all these in the first place. Then, you will find yourself stuck at line 1407 of wp-admin/includes/plugins.php with the following code.

	if ( isset( $plugin_page ) ) {
		if ( isset( $_wp_submenu_nopriv[$parent][$plugin_page] ) )
			return false;

		$hookname = get_plugin_page_hookname($plugin_page, $parent);
		if ( !isset($_registered_pages[$hookname]) )
			return false;
	}

Now, the culprit is definitely caused by $_registered_pages[$hookname] array variable not being set. Hence, this keep you wonder, "why there wasn't any problem until now until WordPress 3.0?". How do we solve this?

Solutions for plugin "You do not have sufficient permissions to access this page." error

There is an obvious solution for this that is to set the global array varaible of $hookname into it so that it always return a true.

	GLOBAL $_registered_pages;
	$hookname = get_plugin_page_hookname( $plugin_file , '' );
	$_registered_pages[$hookname] = true;

This way, you will bypass the validation easily. This is easy but who want hack when there is a properly way of doing it?

My problem solution

Well, my plugins problems can be solved this way but i believe there is an easier way out. Hence, after some try and reading i suspect there is a stricter rules implemented on WordPress when creating your WordPress plugin. Finally, i get a hold on what is wrong with my plugins that is causing "You do not have sufficient permissions to access this page." on all my plugins admin page. Here's the culprit.

	#Before 3.0
	$plugin_page = add_options_page("Hungred Feature Post List", "Hungred Feature Post List", 10, "Hungred Feature Post List", "hfpl_admin");

	#After 3.0 onwards
	$plugin_page = add_options_page("Hungred Feature Post List", "Hungred Feature Post List", 10, "Hungred-Feature-Post-List", "hfpl_admin");

Take note that the slug parameter is being changed from spaces to dashes. WordPress get_plugin_page_hookname will remove all spaces on your slug parameter instead of leaving it which will give "Hungred Feature Post List" instead of "HungredFeaturePostList". Since there is only "Hungred Feature Post List" exist within the $_registered_pages global array and "HungredFeaturePostList" wasn't being registered. The validation fail and throw me an error page.

Java (J2SE) Universal Turing Machine And Multiplication/Factorial/Ackerman Simulator

This is an assignment questions to create a turing machine that perform a simple task, multiplication, factorial, n xn and ackerman function given an input. I am not going to give a lecture on what is universal turing machine and how my simulator work but this should gives people an idea on how you can build a simple universal turing machine and other simulator easily.

Universal Turing Machine

My universal turing machine is some how "cheap". It basically read a string and moves according to how the simulator has instructed it to do. Here is the code of my universal turing machine in Java(J2SE).

public String UTM(String input, String[][] simulator){
        int pointer = 0;
        int state = 0;
        boolean stop = false;
        while(true){
            String[] tmp = input.split("(?!^)");
            for(int i = 0; i < simulator.length;i++){
                if(simulator[i][1].equalsIgnoreCase(tmp[pointer]) && simulator[i][0].equalsIgnoreCase(String.valueOf(state))){
                    tmp[pointer] =  simulator[i][2];
                    if(simulator[i][3].equalsIgnoreCase("R"))
                        pointer++;
                    else if(simulator[i][3].equalsIgnoreCase("L"))
                        pointer--;
                    else if(simulator[i][3].equalsIgnoreCase("STOP"))
                        stop = true;
                    state = Integer.parseInt(simulator[i][4]);
                    break;
                }
            }
            if(stop){
                input = implode(tmp, "");
                break;
            }else{
                input = implode(tmp, "");
                System.out.println("Result = "+input + " AT state " + state + " looking at item = "+ pointer + " "+tmp[pointer]);
            }
        }
        
        return input;
    
    }
    public String implode(String[] ary, String delim) {
        String out = "";
        for(int i=0; i<ary.length; i++) {
            if(i!=0) { out += delim; }
            out += ary[i];
        }
        return out;
    }

The Universal turing machine takes in an input and a simulator in this case our simulator is an 2D array of instruction.

Simulator

My simulator is build in a 2D array of strings as mention previously. Here is an example of my simulator in an array.

 String[][] Q1 = {
            {"0", "_", "_","R", "0"},
}

And here is the explanation on what each column means.

Current State
Found Symbol
Replace Symbol
Move Direction (R - Right, L - Left)
Move to State

Basically my simulator is that simple.

Multiplication Simulator

Now, i will provide you with my multiplication simulator with the following number of state required to calculate the multiplication of two numbers.

String[][] Q1 = {
            {"0", "_", "_","R", "0"},
            {"0", "1", "1","R", "0"},
            {"0", "0", "_","R", "1"},
            {"1", "0", "0","R", "1"},
            {"1", "1", "0","L", "2"},
            {"1", "_", "_","STOP", "2"},
            {"2", "0", "0","L", "2"},
            {"2", "_", "_","L", "3"},
            {"3", "0", "0","L", "3"},
            {"3", "_", "_","STOP", "3"},
            {"3", "1", "0","R", "4"},
            {"4", "0", "0","R", "4"},
            {"4", "_", "_","R", "5"},
            {"5", "0", "0","R", "5"},
            {"5", "1", "1","R", "5"},
            {"5", "_", "_1_","L", "6"},
            {"6", "1", "1","L", "6"},
            {"6", "0", "0","L", "6"},
            {"6", "_", "_","L", "7"},
            {"7", "0", "0","L", "7"},
            {"7", "1", "0","R", "8"},
            {"7", "_", "_","R", "10"},
            {"8", "0", "0","R", "8"},
            {"8", "_", "_","R", "9"},
            {"9", "1", "1","R", "9"},
            {"9", "0", "0","R", "9"},
            {"9", "_", "_1","L", "6"},
            {"10", "0", "1","R", "10"},
            {"10", "_", "_","R", "11"},
            {"11", "0", "0","R", "11"},
            {"11", "1", "0","L", "13"},
            {"11", "_", "_","STOP", "12"},
            {"13", "0", "0","L", "13"},
            {"13", "_", "_","L", "7"}
        };

Well, you can see this takes 13 state to compute multiplication on a turing machine. The above doesn't make a sense to people who don't know what is a turing machine. It's like programming using your brain rather than a IDE editor when you are writing a simulator for a turing machine. Anyway, you can draw a diagram using the above instruction too. eg. input i placed in is "_1110111_". Calualte all the '1' on the right and stop when you see '_' to get your answer.

N x N Simulator

N x N simulator is fairly simple once you get multiplication to work. All you need to do is to clone the number into your input and perform a multiplication.

String[][] Q2 = {
            {"0", "_", "_","R", "1"},
            {"1", "0", "0","R", "1"},
            {"1", "1", "0","R", "2"},
            {"1", "_", "0","STOP", "99"},
            {"2", "1", "1","R", "2"},
            {"2", "_", "_","L", "3"},
            {"3", "1", "10","R", "4"},
            {"3", "0", "101","STOP", "99"},
            {"3", "_", "_","STOP", "99"},
            {"4", "0", "0","R", "4"},
            {"4", "_", "1_","L", "5"},
            {"5", "1", "1","L", "5"},
            {"5", "0", "_","L", "6"},
            {"6", "1", "1","L", "6"},
            {"6", "0", "0","L", "6"},
            {"6", "_", "_","R", "7"},
            {"7", "0", "0","R", "7"},
            {"7", "1", "0","R", "8"},
            {"7", "_", "_","L", "10"},
            {"8", "1", "1","R", "8"},
            {"8", "_", "_1","L", "9"},
            {"9", "1", "1","L", "9"},
            {"9", "0", "0","L", "9"},
            {"9", "_", "_","R", "7"},
            {"10", "0", "1","L", "10"},
            {"10", "_", "_","R", "11"},
            {"11", "1", "1","R", "11"},
            {"11", "0", "0","R", "11"},
            {"11", "_", "0","STOP", "12"}
        };

Above shows the simulator for duplicating your input from n to n x n. Once you have finish running this, run the multiplication simulator which will gives you a 24 state turing machine answer (11 + 13). eg. input i placed in is "_111_". Calualte all the '1' on the right and stop when you see '_' to get your answer.

Factorial Simulator

Factorial can be modified from n x n. All you need to do is to modify the graph a little to get factorial answer. Please take note that my answer has not been optimized (i'm simply lazy to optimize for an assignment).

String[][] Q3 = {
            {"0", "_", "_","R", "1"},
            {"1", "0", "0","R", "1"},
            {"1", "1", "0","R", "2"},
            {"1", "_", "_","STOP", "99"},
            {"2", "1", "1","R", "2"},
            {"2", "_", "_","L", "3"},
            {"3", "1", "10","R", "4"},
            {"3", "0", "1","STOP", "99"},
            {"3", "_", "_","STOP", "99"},
            {"4", "0", "0","R", "4"},
            {"4", "_", "1_","L", "5"},
            {"5", "1", "1","L", "5"},
            {"5", "0", "_","L", "6"},
            {"6", "1", "1","L", "6"},
            {"6", "0", "0","L", "6"},
            {"6", "_", "_","R", "7"},
            {"7", "0", "0","R", "7"},
            {"7", "1", "0","R", "8"},
            {"7", "_", "_","L", "10"},
            {"8", "1", "1","R", "8"},
            {"8", "_", "_1","L", "9"},
            {"9", "1", "1","L", "9"},
            {"9", "0", "0","L", "9"},
            {"9", "_", "_","R", "7"},
            {"10", "0", "1","L", "10"},
            {"10", "_", "_","R", "11"},
            {"11", "0", "0","R", "11"},
            {"11", "1", "1","R", "11"},
            {"11", "_", "0","R", "12"},
            {"12", "1", "1","R", "12"},
            {"12", "_", "_","L", "13"},
            {"13", "1", "_","L", "14"},
            {"14", "1", "1","L", "14"},
            {"14", "0", "0","L", "14"},
            {"14", "_", "_","R", "15"},
            {"15", "1", "1","R", "15"},
            {"15", "0", "_","R", "16"},
            {"16", "0", "0","R", "16"},
            {"16", "1", "0","L", "17"},
            {"17", "0", "0","L", "17"},
            {"17", "_", "_","L", "18"},
            {"18", "0", "0","L", "18"},
            {"18", "1", "0","R", "19"},
            {"19", "0", "0","R", "19"},
            {"19", "_", "_","R", "20"},
            {"20", "0", "0","R", "20"},
            {"20", "1", "1","R", "20"},
            {"20", "_", "_1_","L", "21"},
            {"21", "1", "1","L", "21"},
            {"21", "0", "0","L", "21"},
            {"21", "_", "_","L", "22"},
            {"22", "0", "0","L", "22"},
            {"22", "1", "0","R", "23"},
            {"22", "_", "_","R", "25"},
            {"23", "0", "0","R", "23"},
            {"23", "_", "_","R", "24"},
            {"24", "1", "1","R", "24"},
            {"24", "0", "0","R", "24"},
            {"24", "_", "_1","L", "21"},
            {"25", "0", "1","R", "25"},
            {"25", "_", "_","R", "26"},
            {"26", "0", "0","R", "26"},
            {"26", "1", "0","L", "27"},
            {"26", "_", "_","L", "28"},
            {"27", "0", "0","L", "27"},
            {"27", "_", "_","L", "22"},
            {"28", "0", "1", "R", "29"},
            {"28", "1", "1", "L", "28"},
            {"28", "_", "_", "R", "32"},
            {"29", "1", "1", "R", "29"},
            {"29", "_", "_", "R", "30"},
            {"30", "1", "1", "R", "30"},
            {"30", "_", "_1", "L", "31"},
            {"31", "1", "1", "L", "31"},
            {"31", "_", "_", "L", "28"},
            {"32", "1", "1", "R", "32"},
            {"32", "_", "_", "R", "33"},
            {"33", "1", "1", "R", "33"},
            {"33", "_", "_", "R", "34"},
            {"34", "1", "1", "R", "34"},
            {"34", "_", "_", "L", "35"},
            {"35", "1", "_", "L", "36"},
            {"36", "_", "_", "STOP", "36"},
            {"36", "1", "1", "L", "37"},
            {"35", "_", "_", "STOP", "35"},
            {"37", "1", "1", "L", "37"},
            {"37", "_", "0", "L", "38"},
            {"38", "1", "1", "L", "38"},
            {"38", "_", "_", "R", "15"},
        };

It takes 38 state to compute factorial in my case but this can obviously to optimized (i saw many redundancy when i was writing this but i need to save time as its quite a last minute work before exam). All of these shouldn't be a problem as the logic is fairly simple. The real problem comes when ackerman function required you to recursive multiple sections. eg. input i placed in is "_111_". Calualte all the '1' on the right and stop when you see '_' to get your answer.

Ackerman Function Simulator

This is not fun but its rewarding if you manage to get the answer. Here is the simulator.

String[][] Q4 = {
            {"0", "_", "_","R", "1"},
            {"1", "0", "0","R", "2"},
            {"1", "1", "1","R", "1"},
            {"2", "1", "0","L", "3"},
            {"2", "_", "_","L", "9"},
            {"3", "0", "_","L", "4"},
            {"4", "0", "0","L", "4"},
            {"4", "1", "0","R", "5"},
            {"4", "_", "_","R", "18"},
            {"5", "0", "0","R", "5"},
            {"5", "_", "_1","L", "6"},
            {"6", "_", "_","R", "7"},
            {"6", "1", "0","R", "5"},
            {"6", "0", "0","L", "6"},
            {"7", "_", "_","L", "8"},
            {"7", "0", "1","R", "7"},
            {"8", "1", "0","R", "0"},
            {"9", "0", "1","L", "10"},
            {"10", "1", "0","L", "11"},
            {"10", "_", "_","STOP", "99"},
            {"11", "_", "1","R", "13"},
            {"11", "1", "1","L", "12"},
            {"12", "1", "1","L", "12"},
            {"12", "_", "_","R", "1"},
            {"13", "1", "1","R", "13"},
            {"13", "0", "1","R", "13"},
            {"13", "_", "_","L", "14"},
            {"14", "1", "_","L", "15"},
            {"15", "1", "1","L", "15"},
            {"15", "0", "0","L", "16"},
            {"16", "_", "1","R", "17"},
            {"16", "1", "1","L", "12"},
            {"17", "1", "1","R", "17"},
            {"17", "0", "1","R", "17"},
            {"17", "_", "_","L", "14"},
            {"18", "_", "1","R", "19"},
            {"19", "0", "1","R", "19"},
            {"19", "1", "1","R", "19"},
            {"19", "_", "_","STOP", "99"},
        };

I manage to create an ackerman function with a 19 state while you might need to create 50-100 state to perfect an ackerman function (my classman has 120+ state). Anyway, this ackerman function IS buggy but it should be good enough to give you some hints or an idea after you have drawn the diagram of this simulator. You will find that this ackerman function ends with a missing starting symbol! Short to say, the turing machine ends when it hits an empty string while replacing the starting symbol as a value. I will show you rather than explaining. eg. input i placed in is "_11011_". Calualte all the '1' to get your answer. Do take note of the highlighted answer. The total seems correct but it actually violated the term 'turing machine' as it didn't stop at the halt state but stop due to the exception of access an empty index on the string array (-1 in this case). Hehe, good luck.

Input

Here is the explanation of my input.

"_" - this is the start and end point
"0" - this is the multiplication symbol (its not always the case when its IN the simulator, i'm talking about the input here 🙂
"1" - this is the value

pretty simple and i keep the same rule for the whole 4 question. All the answer can be found on the right side or left with the number '1'.

Java Code

here is the source code of the whole thing.

Conclusion

The material above is use to serve as a reference for your work. It serves as a starting point on "how to do?" question.

Get WordPress Author Page Url With User ID

Here is another WordPress tip for people who face problem finding the function to retrieves WordPress author page url using a particular user id. I did find a lot of WordPress functions that require them to be used within the loop. However, i need a particular function which takes in a user id as a parameter and provide the author page url to me outside the loop. I spend some time searching on Google but couldn't find a decent page that provide me with this information (well, i found a lot of junk page around the internet nowadays though.). Hence, i went into the core and look for it myself. Lucky there was such function!

WordPress Get Author Page Function

if you try to find the author core functions codes, it will lead you to wp-include/author-template.php file. Once you scan through the functions within the file, you will notice that there are only a few methods that take in parameters. Hence, its not that difficult to find. On line 197 you will notice the function get_author_posts_url as shown below,

function get_author_posts_url($author_id, $author_nicename = '') {
	global $wp_rewrite;
	$auth_ID = (int) $author_id;
	$link = $wp_rewrite->get_author_permastruct();

	if ( empty($link) ) {
		$file = get_option('home') . '/';
		$link = $file . '?author=' . $auth_ID;
	} else {
		if ( '' == $author_nicename ) {
			$user = get_userdata($author_id);
			if ( !empty($user->user_nicename) )
				$author_nicename = $user->user_nicename;
		}
		$link = str_replace('%author%', $author_nicename, $link);
		$link = get_option('home') . trailingslashit($link);
	}

	$link = apply_filters('author_link', $link, $author_id, $author_nicename);

	return $link;
}

And you can use this function this way

$curauth = get_userdata(get_query_var('author'));
$current_link = get_author_posts_url($curauth->ID,$curauth->display_name);

You can don't provide the second parameter, display_name but it is advisable to do so as you will notice above that the core function will try to retrieve from the database if you omit the second parameter which also means an additional sql query which is not something we want 🙂

Customize WordPress Avatar Using Filter Hook

WordPress have an excellent feature for providing individual thumbnail within your WordPress blog. However, most of us are aware that most users who have a customize thumbnail image are usually those who sign up with Gravatar and the rest of the user will only have their default image provided by WordPress. Some of us will want a customize WordPress Avatar for our logged in user or customize the default WordPress image rather than using the default one. This is possible using filter hook that is currently not documented in WordPress to provide a customize avatar for individual logged in user. On the other hand, default image can also be overwrite so that you can have your own set of avatar uniquely for your WordPress blog.

Default WordPress Avatar

Rather than using WordPress default avatar, there is an easy way to customize the default WordPress Avatar even without using any filter hook. Here is how you do it.

<?php echo get_avatar( $comment->comment_author_email, 100, get_template_directory_uri()."/images/face.jpg" ); ?>

Notice that get_avatar is the recommended way to get avatar from WordPress and this is usually located in your WordPress theme. This function allows you to change the default WordPress avatar by providing a customize path to the default WordPress avatar. You can also create your own set of random avatar using this method. (either using another table in your database or just use the php method random to randomly select an image)

Customize WordPress Avatar With Filter Hook

Another way of customizing WordPress Avatar is to use a filter hook provided by WordPress. I found this accidentally while customizing WordPress for one of my project needs. The filter hook that was given within the method of get_avatar was this.

			add_filter('get_avatar', array($this,'site_get_avatar'), 10, 5);

Notice that the new filter was get_avatar which is also the method given in WordPress to display any avatar. Take note that i also provide the third and fourth parameter. The fourth parameter is important so that our method site_get_avatar have the appropriate value for us to work with, without the fourth parameter, you won't be able to retrieve other information other than the avatar given by WordPress itself. You will understand this better after i have provided the method site_get_avatar as shown below,

function site_get_avatar($avatar, $id_or_email, $size, $default, $alt){
	//$avatar format includes the tag <img>
	$imgpath = "http://website.com/image/myownimage.jpg";
	$my_avatar = "<img src='".$path."' alt='".$alt."' height='".$size."' width='".$size."' />";
	return $my_avatar;
}

The above method contains 5 parameters which are describe below,

$avatar: the avatar given by WordPress with the tag . This is not the path of the default image.
$id_or_email: this is the email or id of the user
$size: size of the image
$default: this should be the default image provided by WordPress or the path given by us when we used get_avatar (third parameter as shown previously)
$alt: this is the alt value given in your img tag.

Previously, i mention that the fourth parameter in the filter hook is important right? The reason is that if the fourth parameter is not provided in your filter hook, the value for number 2 onwards will not be provided by WordPress to your custom method, site_get_avatar. You will only get the value $avatar in default. Hence, the fourth parameter is important 🙂

WordPress Customize Avatar

Depending on what you need, this action hook is actually quite useful for customizing WordPress avatar. You can abandon this hook if you just want to customize the default image provided by WordPress. However, if you wish to customize each user avatar without using Gravatar, you will definitely find this pretty useful! Good luck!