Thupten's Blog

Working on an Android Game

thupten — Sun, 26 Feb 2012 20:29:09 +0000

Lately Ali and I are planning to work together on a simple free android game. We thought of working on IPhone first, considering the volume of users we could reach. But eventually, we could not resist the simpler Java language over the cryptic Objective C. We will think about porting to IPhone after the Android version actually gets completed.
We have found a very good game framework called Libgdx. The game will be a side scrolling, avoid the enemies style game that will use the touch and accelerometer together.

Progress Bar to display server’s script execution: using JQuery/JQueryUI

thupten — Thu, 21 Jul 2011 01:36:35 +0000

Until now, you have been opening a shell or terminal to execute your script, but now your boss wants to be able to execute the script, but he doesn’t know anything about CLI(command line interface) commands. So, what can you do? how about having a web interface that allows him to easily activate the script. Yes, that would work and its easy too. But if the script takes 5 min to complete, we don’t want to show a blank page during those 5 mins. It would be better if there was a progress bar that showed how much percentage of the script is completed. Today, we will learn to do just that, Create a progress bar to display server’s php script execution using JQuery and JQueryUI.

In this tutorial, we will create a
1. For server side, php script that needs to be run. For the sake of simplicity we will create a script that need to count 1 to user input number.
2. For the client side or for your boss in this case, create a webpage with a form. The form will take a number till which we want the server to count. When submitted it will trigger the script in the server.
3. While the server is counter, we will update the total and the current count in the json file. We will use php function json_encode.
4. The client end javascript with jquery/jqueryui will collect the values from the json file and update the progress bar every few seconds.

Read the comments for more details.

serverscript/server.php

Server script contains the main script that does some work on the server. In this case the server script counts from 1 to user input.

'0', 'current'=>'0');

fwrite($fp, json_encode($arr));

fclose($fp);

//update the total
$arr['total'] = $num;

//start our simple main logic, ie...start counting. we will start counting from 1 till the num+1. since I am using $i<$num, thats why i add +1 here.
for($i = 1; $i < $num+1; $i++){
    //here you can do some other work as well.
  $arr['current'] = "$i";

  $fp = fopen($filename, "w");

  fwrite($fp, utf8_encode(json_encode($arr)));

  fclose($fp);

  //for safety we will make a copy and let client access the copy.
  copy('status1.json', 'status.json');

}
?>

index.html

index.html is the client side html form that gets the input and on submit triggers the server php. We include the jquery and jqueryui library script here. It is simple. link to jquery.min.js and jquery-ui.min.js in the head section. Our main script that uses the jquery will be in a different file. ie..external javascript.



  
  
  

  


count please

    Count to

js/myscript.js

this file contain our function to handle the client side. It uses the jquery library. We put all our code in $(‘#submit-button’).click’s callback function. That is because we want things like updating the progress bar, requesting data from server etc to happen only after user submit the form.

/*
when the submit button is clicked we will hide the message div. get the input provided by user and start processing.
*/
$(document).ready(function(){

    $("#submit-button").click(function(){

    /*hide the message div box. since we don't have anything to show at this time.*/
     $('#message').hide();
    /*grab the input by user and save in variable userinput*/
      userinput = $("#num").val();
    /*prepare a query string. We need to pass the userinput to the script. we grabbed the input from user, now we need to pass it to the */
      var dataString = "num=" + $("input#num").val();

      /*
         using ajax we will call the server.php script. dataString is the parameter we got from user.datatype is the data type we expect as return. when complete, set the progress bar to 100% and display the message 'complete'.
      */
      $.ajax(
        {

          url : "serverscript/server.php",
          type: "GET",
          data: dataString,
          datatype:"json",
          complete:function(){
               $("#progressbar").progressbar({
              value:100});
              $('#message').html('Complete');
              $('#message').show();
              }
        } );

    /*
    call the updateStatus() function every 3 second to update progress bar value.
    */
      t = setTimeout("updateStatus()", 3000);
    });

});

/*
.getJSON will get the json string being updated by the server.php in server. every 3 second, the 'total' and 'current' count will be parsed and updated to the progress bar.
*/
function updateStatus(){

          $.getJSON('serverscript/status.json', function(data){

                               var items = [];

                               pbvalue = 0;

                               if(data){

                                    var total = data['total'];

                                    var current = data['current'];

                                    var pbvalue = Math.floor((current / total) * 100);

                                    if(pbvalue>0){

                                        $("#progressbar").progressbar({

                                            value:pbvalue
                                        });

                                    }

                                }
                                if(pbvalue < 100){

                                   t = setTimeout("updateStatus()", 3000);

                                }
          });

}

Absolute beginner’s guide to Eclipse

thupten — Wed, 02 Feb 2011 04:04:38 +0000

Following article is a part of my Lab exercise for Eclipse course I am taking during Winter2011.

Click here for the java files used to create this tutorial

When Eclipse is run, it asks for a workspace location. I will use ./wksp/basics/labs. You can choose to use this workspace by default by ticking the checkbox. Eclipse starts with the Welcome tab. On this window, you can get more information about using Eclipse. Close the Welcome tab.

Preparing Eclipse

Since we will be working with java language we need to set up the JRE for compiling java programs. Select Window->Preferences to open Preferences dialog. We can setup various options for Eclipse. Choose ‘Installed JREs’ to display JREs installed. You can check mark the one you want to use. If none are displayed, you can add by press ‘Add…’ button. If you need to change the size of the font, on the same dialog, Select General->Colors and Fonts and ‘Text Font’. Click ‘Edit…’ to change the font size to 12.

Creating your first Java project

There are numerous ways to create a simple java project.

Click File->New->Project…Then select ‘Java Project’. You can also accomplish this by right-clicking on Project Explorer on the left side of Eclipse, and selecting New->Project… and select Java Project.

Then click Next. Next I will enter a Project Name, ‘Lab1′. Select your JRE environment. Click Next. Eclipse will create a folder for your project with a subfolder ’src’. Then click Finish.

Browsing Java elements using the Package Explorer.

The package explorer displays your java files organized in their packages. Eclipse will create a default package when creating a java class without a package name. You can expand the package names to display the files within by clicking on the ‘+’ on the left side of package names. Click on ‘-’ to collapse expanded packages.

Editing java elements

To edit a java element that contain text like java classes or properties files, doubleclick the filename, a new window with content of the file opens in the editor in center. You can edit the file and save to make changes.

Creating a Java class

Now lets create a java class to make a small program. We will make a class called Calculator.java that contains a Add() method. Right click ’src’ folder on package explorer and click New->Class. You can achive the same result by selecting File->New->Class too. I will class this class ‘Calculator’. Lets give it a package name ‘a24.labs.lab1′. Make sure ‘public static void main…’ is unchecked, I will create another class to create the main method which will use the Calculator class.

Click Finish. I will put a method that adds two numbers.

public int add(int a, int b){
                return a + b;
}

Renaming Java elements

To rename a file, in Package manager, right click ‘Calculator.java’, select Refactor->Rename. Rename the file to ‘Math’. By default Eclipse will update all the references that points to Calculator to the new Math class name. Notice in the source code, ‘public class Calculator’ is changed to ‘public class Math{‘. Eclipses take care of changing the class name within the java file.

Moving and copying Java elements

Files can be moved between packages by simply dragging them. It can also be done by right clicking the file, selecting Refactor->Move. Lets create a new package called ‘ecl500.a24.lab1′ and move Math.java file to that package. To create a new package, right click src folder, New->Package. Then drag the ‘Math.java’ from ‘a24.labs.lab1′ package to ‘ecl500.a24.lab1′. To create a copy of the java file. Right click on the file and select Copy. Then on destination location, say a24.labs.lab1, rightclick and select paste. Delete the old ‘a24.labs.lab1′ package along with its content by rightclick and selecting Delete.

Navigate to a Java element’s declaration

Eclipse’s right click context menu has several functions that are very useful. One of the functions is ‘open declaration’. Open declaration opens the declaration of a type.

To test this, lets use the Math class to perform some calculation. Create a new class called ‘Program.java’ in ecl500.a24.lab1 package. Right click on the package name and select New->Class. Call this class ‘Program’. Make sure to check ‘public static void main..’ option. Now right click on word Math and rightclick, Open declaration. Eclipse automatically opens the Math.java and highlights the class declaration. You can also accomplish this by selecting Navigate->Open Declaration

Viewing the type Hierarchy

You can right click on any java file and rightclick select Open type hierarchy to see the type hierarchy of the class file. In the image, Our Math class is a subclass of Object class.You can also accomplish this by selecting Navigate->Open Type Hierarchy.

Searching the workbench

Eclipse has a strong search feature. Open Search dialog by selecting Search->Search. There are 3 tabs for searching ‘Java Search’, ‘JavaScript Search’ and ‘Plug-in Search’.

To do a granular seach you can use wildcards like * and ?. You can search fo ‘Type’, ‘Method’, ‘Package’ etc. If you search for Math or M* or M???, you should be able to see Math resulted from all files. To search within a file, press Control+F in the text editor.

Running your programs

There are several ways to get your java program run. The easiest way is to click on the Run icon on toolbar. This can also be accomplish by selecting Run->Run or rightclick on file and Run->Run. You can also use keyboard shortcut Control+F11 to run the program. The output is displayed on Console view.

If your java application uses GUI, the output will be on a new window as a separate application. If you want configure how your java application runs, then you can create a run configuration.

For example if your program need to take some arguments when run, or if your program must include some other library like JDBC connector package, you can create a run configuration that sets these up every time your program is run.

Lets create a run configuration called ‘Program’ by clicking New icon. Let me change the JRE to my alternate JRE. Click apply to save and Run to run the program. Now to run this program with same configuration, you can quickly select the Program name on run icon.

Debugging your programs

To debug a program we put breakpoints in various lines of code and the program pauses the execution on that line of code. Then you can analyse values of variables or execute the rest of the program line by line. To debug in Eclipse, put a break point on a line in Math.java where the a+b is calculated. Now right click on the vertical grey bar on the left of editor and select toggle breakpoint. You can also do this by doubleclicking on the bar. Do the same process to remove a breakpoint.

Now click on the debug iocn on toolbar. Eclipse gives you option to switch to Debug perspective. Click Yes. The program executes and pauses on the line where we put the breakpoint.

If you hover over any variable, you can see the value of the variable. From here, you can execute the rest of the program step by step. Click on ‘Step into’ button several times. You will see the program moves forward line by line. To execute a full method without going into the method, you can press the ‘Step Over’ button.

Click stop to stop debugging and click on ‘Java’ button on perspective view on top right corner to return to normal view. Remove the breakpoint by double clicking on it.

Evaluating expressions

Put a breakpoint on the last line of Program class and press debug. The program pauses on last last. It has not executed this line yet. Now select the method call myMath.add(100,200) then rightclick and select Display. The value of result return value of this method 300 is shown on display popup. Press control+Shift+D to move this value to Display view. Now in display view, we can see what method was executed and what result was returned with its type information as well.

Evaluating expressions is useful during debugging a program. Stop the debugging and go to Java perspective view.

Evaluating snippets

Scrapbook is a file where you can test small pieces of expressions in your program. It is useful for checking values of systems value. like value of PI. Create a new Scrapbook Page, name it MyScrapbook and click Finish. A new file MyScrapbook.jpage appears in your package explorer. Open MyScrapbook.jpage

Type Math.PI , select the Math.PI, rightclick and select Display. To check 100+200 in our method call really should be 300. Type 100+200 in scrapbook, select the line, rightclick and select Display. You will see the value 300 which confirms your add method is working fine.

You can write some snippets and quickly check the result without creating a class file.

Using the Java browsing perspective

Java browsing perspective shows a drill down browsable view of your Project, Packages, Types, and Member methods. It displays the content of the method in the bottom editor. It is a built in perspective created by Eclipse. The look and feel is like a file browser. Some people may prefer to use this perspective for coding. The choice is yours.

Writing and running JUnit tests

With JUnit test, we can create programs using test driven software development approach. Test cases are conditions that testers create. The developer has to develop program that passes these test cases. When developer creates program which passes the test cases one by one, gradually the program is fully developed.

Lets create a subtract method to our program using JUnit test. Lets create a test for subtract method. We know (using a calculator) 300-100 = 200 for a subtract to be working good.

In Math.java, create an empty method for subtract.

public int subtract(int a, int b){
  //no code yet. waiting for test cases. just return 0.
  return 0;
}

Now lets create the Junit test. Select File->New->JUnit Test Case. Name this MathTest, click Next, select the subtract method, and click Finish. Click OK to add JUnit in build path.

Now select Run->Run as->JUnit Test. A new view is added to the perspective called JUnit. Since the subtract method is not implemented the test fails.

Lets create the test.

public class MathTest {
        @Test
        public void testSubtract() {
                Math math = new Math();
                assertEquals(100, math.subtract(300, 200));
        }
}

Now in Math.java lets write a wrong code for subtraction to test the case. we will return a*b instead of a-b. This should fail the test we wrote. Run the test by clicking on the Rerun test button on JUnit view. As expected the test fails again.

Now correct the subtract method code to

return a-b;

then rerun the test.

Click OK if asked to save and launch.

The test passes and the red bar changes to green. Failure is set to 0. In this way, we can use the JUnit test in Eclipse.

Click here for the java files used to create this tutorial

FYV8WTBXZEUG

Adapter design pattern

thupten — Sat, 15 Jan 2011 09:26:28 +0000

Adapter pattern adapts a piece of code to work with another. In real world, consider a battery charger for your phone. If you went for vacation to a somewhere in Europe, your charger won’t fit into the wall outlet. You would need a piece that can wrap your that fits into the socket in Europe.

Adapter pattern is usually helpful to create new code that is compatible with old legacy code. Using adapter pattern the old code do not need to be changed to work with new code.

In the world of the plugs, there is US plug

public class USPlug {
    public USPlug(){
        System.out.println("I am a US plug");
    }

    public void plugIn(){
        System.out.println("I fit into a square socket");
    }
}

And then there is Europe Plug

public class EuropePlug {
	public EuropePlug(){
		System.out.println("I am a Europe Plug");
	}
	public void plugIn(){
		System.out.println("I fit into circle socket");
	}
}

We need to put a US plug into a Europe socket. So we need an adapter called UStoEuropeAdapter. This adapter extends the feature of US plug to be compatible with european socket.
So here is the adapter

public class UStoEuropeAdapter implements USPluggable {

	EuropePlug eplug;

	public UStoEuropeAdapter(EuropePlug ep){
		this.eplug = ep;
		System.out.println("I am the UStoEurope Adapter");
	}

	public void plugIn() {
		this.eplug.plugIn();
	}

}

The USPluggable interface mandates a class which implements this to make sure to define method to plug into us socket. ie plugIntoSquareSocket()

public interface USPluggable {
	public void plugIn();
}

The caller program creates europe plug, wraps it into the adapter and plugs it into the square socket. But since the adapter overwrites the method plugIntoSquareSocket() by calling the plugIntoCircleSocket() instead, now this adapter plugs into circle socket.

public class MainProgram {
	public static void main(String[] args) {
		EuropePlug ep = new EuropePlug();
		USPluggable myAdapter = new UStoEuropeAdapter(ep);
		myAdapter.plugIn();
	}
}

This batch file will lessen your sqlplus login frustration at zenit server.

thupten — Thu, 23 Sep 2010 07:29:46 +0000

If you are in DBS501 like me, you must be frustrated with sqlplus command. Why did they remove the good old isqlplus and instead put sqlplus. The problem with the sqlplus for most of us is because of connection problem.

If you haven’t modified the ora file to include host address for neptune, you must do that before proceeding any further. Here is the link

https://cs.senecac.on.ca/~nconkic/db-oracle11g.html

Now lets create a batch file that will log into oracle using sqlplus

Here are the steps

Create a file login.bat
Type this cmd/k “sqlplus dbs501_xxxAxx/mypasswordhere@neptune”
Save the file

Warning: make sure you don’t name the batch file ’sqlplus.bat’ otherwise it call itself, not the sqlplus program in an infinite loop. If you don’t put password, it will prompt you to enter password. I just put it there because sometimes it takes 5-10 times before you can actually log into the zenit oracle server, and I really don’t like to waste any more time on typing passwords .

Now you can double click this file to open a cmd window which will log into zenit oracle server. If there is a connection problem, just close it and reopen it. You can even open multiple instances.
For testing, I opened three instances and one of them worked. The other two spit some connection errors. Common errors are timeout occurred error, host not listening error etc.

Bench project from scrap woods

admin — Fri, 03 Sep 2010 15:37:42 +0000

Helped my cousin make this bench.

CSS Layout without the hassle of div position

thupten — Thu, 22 Jul 2010 04:57:06 +0000

Tables are for tabular data. Div with CSS has been the new layout trend. With div and css, the code is much cleaner and accessible. But div positioning is something I always had problem with. But now using float attribute, I can create CSS Layout in much easier way.

I just watched a very good video on google about how to easily create CSS Layout. I hope you have enough time, its about an hour long video.
Check it out.

Reading about how to customize WordPress

thupten — Mon, 19 Jul 2010 05:14:34 +0000

I have been reading about WordPress this weekend.

WordPress is a Web CMS that can be used to create a blog. By default, it is set to create blog. But lots of website use WordPress as the base website and customize it to create amazing websites.
I still need to hone my CSS 2 skills, specially the layout skills. With a good knowledge of CSS, PHP, Photoshop and JQuery, WordPress can be customized to create very professional quality websites.

JQuery rocks !!!

thupten — Sat, 17 Jul 2010 18:59:24 +0000

JQuery is a libray of javascript functions that can be used for creating a website. Once JQuery is installed and included in your document, you have access to $ function or the jQuery(). I am reading a cookbook on JQuery on my ipod touch. Also got a cool ipod app with JQuery references.

One of the syntax to use JQuery is
$(element).attribute(function(){ //do something});

I never liked the use of function definition in a function parameter. Hopefully, I will start to get use to with it.

JQuery website also has a lot of tutorials, demos along with its extensive documentation.

Thanks to my prof Simon, I found jQuery.

..will post more about JQuery when I find something useful.

http://www.jquery.com

JQuery. write less do more..

Earthquake in Toronto

thupten — Wed, 23 Jun 2010 18:01:53 +0000

Wow, there was small earthquake in Toronto at about 1:40pm today. It lasted for about 10 seconds. I was not sure if the house I was in was shaking or was it really an earthquake. I was about to run out of the house but by then earthquake had stopped. So I turned on the tv and checked CP24. It was showing a live speech by Obama. As soon as Obama’s speech was over, CP24 breaking news talked about the earthquake.
There were people calling CP24 about the earthquake and telling their experiences. It was funny. Why did these people call the news amidst an earthquake? and they had the phone number of CP24 handy too? wow..these people are resourceful, they can get you a phone number of the tv news in the middle of an earthquake.