Site Menu Animation Prototype
I have been playing around with MooTools recently and came up with an idea to allow users to change the orientation of the menu for my updated site with animation. MooTools is an Object Oriented JavaScript framework similar to jQuery. The main reason I chose this framework instead of jQuery is that it can easily create customized animations. Although I’m still learning how to use MooTools’ full features, I wrote a HTML page that toggles between vertical and horizontal menu with custom animations just by using MooTools framework. Note that this is a prototype to the upcoming updated site menu. It only contains the background color and doesn’t contain any content. Here is the MooTools code for the page:
window.addEvent("domready", function() {
$('hori').setStyle('opacity','0');
$("change").addEvent("click", function() {
$('change').setStyles({
'visibility':'hidden',
'opacity':0
});
var changeMenu = new Fx.Tween($('menu'));
changeMenu.start('width','50px')
.chain(function() {
changeMenu.start('height','400px');
})
.chain(function() {
changeMenu.start("left", "10px");
})
.chain(function() {
changeMenu.start("top", "40px");
})
.chain(function() {
$('hori').fade('in');
});
return false;
});
$("hori").addEvent("click", function() {
$('hori').setStyles({
'visibility':'hidden',
'opacity':0
});
var changeMenu = new Fx.Tween($('menu'));
changeMenu.start("top", "50px")
.chain(function() {
changeMenu.start("left", "100px");
})
.chain(function() {
changeMenu.start('height','50px');
})
.chain(function() {
changeMenu.start('width','600px');
})
.chain(function() {
$('change').fade('in');
});
return false;
});
});
Notice that I used CSS property names and MooTools functions to create animations. You can view the whole source code by right-click the prototype page since it is just a plain HTML and JavaScript page.
I created this prototype with the help of MooTools 1.2 Beginner’s Guide and MooTools Docs.
Text-to-speech web service Odiogo (Updated)
Update(06/01/2010 10:30 AM): The audio version of this post is now available. You can click the above “listen now” button to listen to this post.
Update (05/31/2010 11:25 AM):Â Apparently, Odiogo hasn’t converted this newest post to audio yet. According to their FAQ, they check the update several times throughout the day. However, it has been almost twelve hours since this post was written, the audio version of this post hasn’t been available yet. I will update this post as soon as the audio version of the post is available. In the meanwhile, you can checkout the TTS version for my other posts on this blog.
While I was reading the news today, I came across an article on freesoftwaremagazin.com. A feature on the site that interests me is the “listen now” button. When I clicked on it, a familiar male TTS (Text-To-Speech) voice began to read the current article aloud for me. This voice is very familiar to me because I always used TextAloud with this Neospeech Paul voice to read the articles online when I was a Windows user. This voice is very human-like compare to Neospeech’s own female voice. After I switched to GNU/Linux for the first time, I tried to install TextAloud and the Paul voice through Wine, but I failed. Because I was too relied on the TTS reading the articles for me, my reading speed have become slow. I then decided to challenge myself to read myself since that day when I gave up installing TTS engine and TextAloud onto GNU/Linux. However, I still think that my reading haven’t improve at all. When I heard this voice on the website, the above memory came up in my mind. I can’t help but to look for where to produce this voice. Fortunately, it contains an introductory voice in the audio that talks about the source of this feature. It’s odiogo.com. At first, I thought that this web site provides web services that can use TTS on other websites to help me read the articles just like TextAloud. However, it seems that it used to convert my own blog to podcasts. It disappoints me to know that it can’t work on websites other than my own site, but I think that it is a good idea to provide more accessibility to my blog through this web service. Therefore, I added a “listen now” button onto this blog to provide text-to-speech feature. Check it out now below the title of this post and tell me what do you think in the comment.
Created a new logo
I decided that the logo redesign is my next step for the project. Blender and GIMP are two editors that I used to design the current logo. The tools I used to create redesigned logo are Inkscape and GIMP. I used Inkscape to design the basic text and add shadow and reflection effects using GIMP. This is the first time I have used Inkscape so I only can discover its features through using it. I found out that it has the ability to directly change the font size without converting the text to image like GIMP does. This means that I can change the content of the text after I changed font size. Inkscape also has drag and drop feature to import different image files into the document, including JPG and PNG. Below is my finished text created using Inkscape:
Click to enlarge
The file saved by Inkscape is a SVG file. It can be imported into GIMP as an image file. By following this tutorial, I was able to create a shadow effect for the logo, as well as the reflection effect. Below is the logo with effects added:
This image is directly linked from beta.robbychen.com
Note that this logo might change based on the future development of the site. For instance, I might add or remove some open source software images, such as Ubuntu logo for letter o in my name. However, I will write a post about the change once I make a change on the beta site.
Color Theme Successfully Changed to Ubuntu Radiance (Beta Site)
As discussed in the last post, I’m beginning to update my main site’s layout and color theme. Today I was trying to apply the Ubuntu Radiance theme onto the color theme for the site. I’ve mainly focused on the window title bar where most of the colors are there.
Click to enlarge
The first draft of the new site layout can be viewed here: beta.robbychen.com
I have just changed color theme of the site based on the Ubuntu Radiance desktop theme. In addition, I have removed calender on the site because  it doesn’t serve much purpose other than displaying it to show this month’s calender. I haven’t change the layout of the site as well as the logo because I decided to change the color theme of the site first to get an idea on how the final results will look like.
Since this is the first draft, I might change color theme of the site to something else. However, I will keep posted on the latest development of the site. You also can checkout beta.robbychen.com to see the latest site development.
Played Around with Drupal, Upcoming Site Update, and more …
I hadn’t write any blog post since last Thursday. The reason is because I had been playing around with Drupal. Drupal is a Content Management System that is similar to WordPress, in my experience, because it can install additional plugins as modules, custom themes, and add pages. However, Drupal has few other features that need to be configured externally if using WordPress, such as the ability to optimize the performance of the site by enabling compression. Perhaps I used WordPress for long time and don’t know how to use Drupal yet, I have not discovered any usefulness of Drupal over WordPress yet. I will continue to learn more about Drupal and improve my Drupal site at diary.robbychen.com. As you can see through the URL, I originally planed to start another diary blog using a CMS app and change the daily post schedule for this blog to irregular post schedule just like my Tumblr-based blog. I decided first to try Drupal because I tried Joomla before and I can’t seem to use it. I think I will try other CMS if Drupal also won’t work for me.
I also plan to update my main site robbychen.com beginning tomorrow since the spring semester is over. I decided to make this site as a portfolio site that include all the programming works that I have done in the past instead of a tutorial site because this domain name is based on my name and it doesn’t suited for a tutorial website or a commercial website. The current layout on the site is based on a commercial website. I will try to create my own site layout and I have decided to apply the color theme of the site based on the new Ubuntu Radiance theme.
Click to enlarge
The ColdFusion to PHP project that I was promised back in January is not possible anymore because I couldn’t find the CA 278 files and can’t convert to PHP without these files. However, I’m organizing the CA 288 class files which is advanced ColdFusion programming. I will rewrote them with PHP as soon as the maintenance of these files is completed.
Variable Rules – C vs PHP
Here is my first post about C programming language which I decided to learn this summer. Today I compare the variable declaration rules between C and PHP. The main difference between C and PHP’s variable declaration process is that C’s variable name must be declared at the beginning of the code as well as its type, whereas PHP creates variables on the fly without indicating variable type. In C, variable name must be declared uniquely within the current code, except the same name can be declared inside the functions. This is different from PHP. Thanks to its dynamic variable type, a variable name can be used as a number and a string depending what’s the value inside the variable. The variable naming rules for C is the same as PHP. It also doesn’t allow to place digits first of the variable name. I also learned that the length of a variable name in C should not be longer than 31 characters. I never heard of this rule in PHP. However, I never used more than 10 characters for the PHP variable names. I will try to apply my 10-character policy to C once I have a real C programming project. I’m looking forward to programming with C and play around with some open source code when I understand C programming language a little more.
Create own VR Server with OpenSim
OpenSim is an open source VR (Virtual Reality) server that is similar to Second Life, but the land is hosted on your own computer rather than hosted on the Second Life server. This means that there is no more expensive monthly fee to pay to maintain the SL land. However, if your ISP doesn’t allow you to host your own server on the Internet such as Verizon like me, OpenSim is almost useless except for the testing and education purposes.
I’m running the server with CombineContiguousRegions turned on and setup of 3 X 3 mega-regions. The initial setup was quick and easy with no installation. Before starting up the server, however, you need to first install some components:
sudo apt-get install nant mono-gmcs libmono-microsoft8.0-cil libmono-system-runtime2.0-cil libgdiplus libmono-i18n2.0-cil libmono-oracle2.0-cil
After OpenSim was set up, you have to use either Second Life viewer or other open source viewers to connect to the server. I’m using Imprudence latest beta because I just discovered today that Imprudence has the option on the login screen to add the VR server yourself and the localhost server is already set up in the latest build. When you login to the server first time, the default avatar is female. You can easily change the gender by adding a new shape directly in the inventory. In the beta build, Imprudence would crash if make a new outfit inside the appearance window. The default land is only one small island or many if you setup as a mega-region like me. You can manually edit the land by raise or lower the terrain, or you can export the hightmap of the land to an image file described here and edit it in GIMP. One thing to note is that you first need to logon using a veiwer in order to import the hightmap successfully, otherwise you won’t be able to logon to the server after the import. Here is my land after the modification in GIMP:
3 by 3 mega-regions connected as one big island
Click the image to enlarge
Notice the red arrow in the image. This screenshot is taken 859 feet above the ground. It means that this island is very big. It seems that by enabling the CombineContiguousRegions option, all of the regions’ region names become the first region name according to Regions.ini file.
Overall, OpenSim can be used as an alternate Second Life server unless your ISP doesn’t allow hosting your own server. It is also a good testing and education environment to test and learn the basics of 3D creation and animation.
Starting to learn C Programming Language
I have decided to learn a new programming language during this summer break. I chose C because I have already learned the basics of C++. The C++ programming language is the object oriented version of C after all. Another reason I chose to learn C because the source code for many of the open source projects that I’ve read are written in C language. It seems that the language is very popular in open source community along with C++ and Java. I’m starting with VTC C Programming video tutorials. This is the first video tutorials that I came across when I was searching for C programming language tutorials online. Therefore I downloaded it and am beginning to watch and learn C language. I will post any tips that inspired by the tutorials as I learn instead of post what I learned from the tutorials.
Here are the ISO images of this video tutorial series if you are a copylefter or don’t care about the copyright:
http://www.downtr.net/162643-vtc-c-coding-video-tutorial.html
HTML Template PHP class
This is my first fully-written PHP class to ease my HTML page creation process by pre-set the DOCTYPE and other required tags in a normal HTML page. The class is inspired by this article where it talks about wp_header and wp_footer of WordPress. I thought that this is a great exercise to increase my OOP (Object-Oriented Programming) skill. Therefore I wrote the following code based on my creation habit for HTML pages:
<?php
class template {
public $title;
public $style;
function header($headerContent="") {
echo "<!doctype html>n";
echo "<html>n";
echo "<head>n";
echo "<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />";
echo "<title>";
echo $this->title;
echo "</title>n";
if (isset($this->style) || !empty($this->style)) {
echo "<link href='{$this->style}' rel='stylesheet' type='text/css' />n";
}
// Output additional header content if available
if (function_exists($headerContent)) {
$headerContent();
}
echo "</head>n";
}
function body($bodyContent="") {
echo "<body>n";
// Output body content
if (function_exists($bodyContent)) {
$bodyContent();
}
}
function script($script='') {
if (strstr($script, ".js") || strstr($script, "://")) {
echo "<script type='text/javascript' src='{$script}'></script>n";
}
else {
if (strstr($script, "()")) {
$function = str_replace("()", "", $script);
if (function_exists($function)) {
$function();
}
}
else {
echo "<script type='text/javascript'>n";
echo $script;
echo "</script>n";
}
}
}
function footer($footerContent="") {
if (function_exists($footerContent)) {
$footerContent();
}
echo "</body>n";
echo "</html>n";
}
}
?>
The header, body, and footer methods include an optional string variable. As you can see in the code above, this variable needs to be a function name. The function name in these three methods doesn’t require parentheses. However, the function name needs to have parentheses in the script method. The script method is different from the above three methods as it can be reused in the same HTML page. For example, the following is a simple page with the class applied:
<?php
$ca282 = new template();
$ca282->title = "Robby Chen CA 282";
$ca282->style = "styles/global.css";
$ca282->header("headerContent");
$ca282->body("bodyContent");
$ca282->script("http://www.google.com/jsapi");
$ca282->script("google.load('jquery','1')");
$ca282->script("jquery()");
$ca282->footer();
?>
Notice that the script method has three formats in the above example, external JS, on-line code, and a function. I didn’t pre-set the script tag between function because I need the syntax highlighting and auto-completion features in NetBeans. The following is my jquery() function in case you don’t know how to activate these two features within a PHP function:
<?php
function jquery() {
?>
<script type="text/javascript">
$(document).ready(function() {
$("#logo").html("Logo");
});
</script>
<?php
}
?>
Basically, the JavaScript code is outside the php tag but inside the PHP function. This way the script content will only appear after the jquery function is called.
You can download the class file here.
Use str_replace to Easier Delete Characters in a String with PHP
After I used the removeChars CF function yesterday, I was thinking that there should be a better way to delete the characters using words instead of numbers. I found an article that talks about using substr PHP function to delete the characters in a string with a negative number. For example, here is the code from the article:
$newstring = substr($string, 0, -4);
The output result removed last 4 characters in the string variable. However, this method is not what I need. I need a method to remove index file from the URL to form a complete URL. For instance, I would like to change example.com/account/index.php to example.com/account/.
After the extensive research on this topic, I came across with str_replace function on PHP.net. I thought I could use this function to easily delete the characters from a string without counting the number of characters to delete. I wrote the following code to delete the index.php in the SCRIPT_NAME string:
if (strstr($_SERVER['SCRIPT_NAME'], 'index.php')) {
$_SERVER['SCRIPT_NAME'] = str_replace("index.php", "", $_SERVER['SCRIPT_NAME']);
}
I used str_replace to replace “index.php” with an empty value in order to erase the selected characters. After the declaration of the new SCRIPT_NAME server string, I applied this variable to the home page link:
<a href="http://<?php echo $_SERVER['SERVER_NAME'].$_SERVER['SCRIPT_NAME']; ?>" title="Home Page">Home</a>
This method can be used to hide the file extension from users if you don’t want them to find out which server-side technology you are using 