Jaw,B

New era of version control systems

noreply@blogger.com (Anonymous) — Sat, 19 Apr 2014 18:00:00 +0000

May Allah`s peace , mercy and blessing be upon you

"Revision control, also known as version control and source control ... is the management of changes to documents, computer programs, large web sites, and other collections of information". That what wikipedia says about VCS, also in the overview they define a VCS as "... any kind of practice that tracks and provides control over changes to source code."

Today, you can find many great, good, bad and ugly version control systems like Git, Mercurial, Bazzar, SVN, CVS [order is not arbitrary]... but It turns out none of them is good enough for the company, a company that a friend of mine has interned at and told me about their ultimate VCS.

In this company - a well known multinational company that I'm not going to name -, if you want to proceed with a change you don't need to fork or clone or pull. What you do is that you duplicate the lines that you are willing to change, then comment the old ones and put a comment before and after the new code where you put an ID. To get this ID you insert a record in a Microsoft Access database where you specify changes and reasons etc, then you get the ID of that record and put it back in the comment. Changes are copied manually and added to the master if they are correct and god knows what test system they have.

Wow, amazing !! I couldn't believe this reactionary VCS, and what are the reasons behind this choice. And yes I called it a VCS because it's a "... practice that tracks and provides control over changes to source code".

Blogger & AngularJs - Is it a better love story than Twilight ?

noreply@blogger.com (Anonymous) — Thu, 18 Jul 2013 00:31:00 +0000

May Allah`s peace , mercy and blessing be upon you

I shared recently a post about how I got that idea to use AngularJs with Blogger using RSS as a resource and modding comments. Today, I want to share with you my impressions after two weeks since I launched the experiment.

Disclaimer: The experiment was on this blog, it's a small personal blog with minimalistic design, limited number of posts and few visitors, so my judgement will be based on those facts. Behavior on larger blogs isn't guaranteed to be the same.

What I like about it ?

It's very light, swift and fast, the page is visible quickly even with using a custom font and many base64 resources, not to mention that Angular for a reason that I don't understand loads resources for all posts even if they aren't rendered nor in the DOM yet !!!
First time load :

From cache :

The first time load time is a bit high, but after that user can navigate almost instantly. For a blog it might not be a best practice because people usually look for a specific post so loading other posts isn't that brilliant. I'm planing to solve the problem by parsing portions of the XML from the RSS feed and not the whole file at once.

Comments are pretty too, I always hated Blogger's comment from it's an ugly thing with that terrible design and poor experience in an iframe. The wordpress inspired comments form seems like a usable one with Gravatar and URL.

What I don't like ?

The worst thing about this experiment is SEO, search engines aren't able to index pages because of dynamic content that changes in run time, which makes the pre-rendered HTML -in general empty- invalid for search engines. There is this great article that will work for you if you have your Angular app hosted on your server. Also, preview functionality doesn't work too

Moreover, Analytics doesn't work well with URLs with hashes, I can't get detailed analytics for a post anymore. I found a workaround that I will try later and post results.

There is a dark side for comments as well, sometimes it will redirect you to Blogger's comment form and display the supposed to be hidden JSON object and maybe impose a Captcha test, and it will redirect you to the old URL of the post.

It's sad that the Web still doesn't work well with hashbang URLs without fallback links, even if it's an old practice, I had a headache to make Twitter's button accept a URL with a hash !!! The bottom line is that search engines and Analytics should provide tools to support hashbang URLs in a time that many people are relying on javascript MVC frameworks.

Conclusion

Blogger and AngularJs, these two sons of Google doesn't seem to like each other so much -which make them good brothers by the way- but of course It's a better love story than Twilight (everything on earth is), loading time and improved comments (when they work correctly) are a gain. But SEO and Analytics make it not the best thing to do if you really want to spread your posts while keeping an eye on your blog.
For me a homeless dude like me should keep good care of his spot on blogspot until I get a host :) but having blogs on blogger for 4 years makes me understand the platform and keep improving and experimenting.

Rebuilding Jaw,B blog

noreply@blogger.com (Anonymous) — Mon, 01 Jul 2013 23:35:00 +0000

May Allah`s peace , mercy and blessing be upon you

Hello everyone, first of all, I think you noticed the comment's css bug, I don't know why the comments floats from the parent !! so I decided to redesign the blog and do some optimisations.

I didn't wanted the whole experience to be just old regular web development, like I used to do. Hence I decided to apply some of the great tools that I installed a long time ago but never used. I began with setting up directories and use Bower to download libraries, then I initialized Guard to watch javascript files and concatenate them and do Livereload. Also, I used Sass, Compass and Zen-grids for CSS.
I really liked the workflow, guard is terrific and did a great job keeping my finger away from F5. Sass is good too, I never liked preprocessors but Compass and Zen-grids succeeded in tempting me to try it. The workflow is surely optimized, but I'm not sure if I can say the same about the CSS that still need a review. To be fair, using a preprocessor implies learning the ins and outs of the tool because nesting selectors and media queries randomly or reproducing the DOM tree can generate a terrible CSS. One more tool ,that I'm not sure if I actually used it, is Git, I started the project doing some commits during the setup then I forgot about it till the end -_-' .

When the template was ready, fluid and responsive, I had to start making it a blogger template .. I couldn't accept the idea that I had to deal with those awkward XML tags and the "b:" things !! Then I had the idea to use AngularJs the awesome framework to manipulate Blogger RSS feed, it's XML on the same domain so why not. Few hours after and it's ready, everything Blogger offers : posts, pagination, tags, displaying comments, social sharing ...

Finally I decided to take it one step further by implementing the wordpress like comments system, the method is explained in the 2 parts tutorial that published a year ago part1 , part2 .

So, here it is a blog on blogger totally free from Blogger's XML specification you have only to give Blogger an empty b:skin and b:section, Blogger loves b:skin and b:section; That's the idea, I don't want to dig into the code because it's javascript and code is not minified for readability. These method allow to use Blogger as a database and store any type of structured data then read it from RSS, parse it and manipulate it. So if you are homeless like me, here is a new way to live under Blogger's wings :)

Guide : Installing Android Studio on Ubuntu

noreply@blogger.com (Anonymous) — Sun, 19 May 2013 16:16:00 +0000

May Allah`s peace , mercy and blessing be upon you

Hi, if you watched (or assisted -if you are that lucky-) the Google I/O then you couldn't resist installing the new Android development environment the early access preview. Android Studio the IDE built on IntelliJ IDEA with a lot of features for Android development and debugging, making the process faster and more productive. Coming with extensible build tools, powerful code editing, smoother and richer GUI .. you can read these stuff here.

So, if you are like me, an Eclipse/ADT user you must wonder why they went with IntelliJ IDEA instead of Eclipse ? they responded with : "Because when we did just Eclipse, people kept asking for IntelliJ support" , "We will support both Eclipse and the new IntelliJ-based Android Studio. Eclipse support is not going away". Eclipse is still supported but I'm not that loyal :) to the IDE to stick with it.
Then let's talk about installing on Ubuntu (this instructions are tested on 12.10 64-bit) :
First you'll need to install Oracle Java JDK (now 7.21u) from the official website For Linux 64-bit tar.gz , you don't need to install it if you have OpenJDK installed, so just copy it to a location :

tar xzvf ~/Downloads/jdk-7u21-linux-x64.tar.gz
sudo mv jdk1.7.0_21/ /usr/lib/jvm/

Maybe you'll need to install some libs because of some issues with adb

apt-get install lib32ncurses5 ia32-libs

Then you need to set JAVA_HOME to JDK location, to define it on login use .profile file if you don't have one copy the default one from /etc/profile.

cp /usr/profile ~/.profile

And add the definition and logout/login to apply changes :

export JAVA_HOME="/usr/lib/jvm/jdk1.7.0_21"

Now download Android Studio http://developer.android.com/sdk/installing/studio.html and extract it :

tar xzvf ~/Downloads/android-studio-bundle-130.677228-linux.tgz

then copy it to some location, I used /usr/bin

sudo mv ~/Downloads/android-studio  /usr/bin/android-studio

I added a bigger icon to the directory to use in launcher :

sudo mv ~/Downloads/AndroidStudioIcon-150x150.png  /usr/bin/android-studio/icon.png

To add the IDE to the launcher you need to define a desktop file in /usr/share/applications name it android-studio.desktop with the following content :

[Desktop Entry]
Type=Application
Encoding=UTF-8
Name=Android Studio
Comment=Android Studio IDE
Exec=/usr/bin/android-studio/bin/studio.sh
Icon=/usr/bin/android-studio/icon.png
Terminal=false
Type=Application
Categories=GNOME;Application;Development;

That's it, now you can start the app from the launcher on Unity or Gnome normally, also you can switch to the dark theme like the one in the I/O from View > Quick Switch Scheme > Switch Look And Feel > Darcula .

Pepper Pyramid - (Hologram) Experiment

noreply@blogger.com (Anonymous) — Sat, 09 Mar 2013 01:47:00 +0000

May Allah`s peace , mercy and blessing be upon you

Nothing nerdy this time, I just wanted to share this experiment about pyramid holograms. In fact, many people prefer to call it Pepper Pyramid, called on John Henry Pepper who created the Pepper's Ghost effect. The principle is simple, the four sides of the pyramid are made of reflective glass or plastic so they can reflect four images taken from the sides of the object or scene, and they reflect each others which makes the object looks in a 3D way.

So here are some not very well pics due to the poor camera and the darkness :

My setup :

You can get those images from here, and I made two videos but for some reason Youtube is throwing errors on processing them, here are the used videos : diamond, teapot.

And here is a making guide :

This looks a little bit flat on pictures, but I highly recommend that you make this and see it with your own eyes, have fun !!

MCPC 2012 - Problem D : Minimum bounding rectangle

noreply@blogger.com (Anonymous) — Fri, 07 Dec 2012 19:49:00 +0000

May Allah`s peace , mercy and blessing be upon you

P.S: This is not the original text, I rephrased and summarized the original one because I'm lazy and I couldn't type the whole text. if there is an error it's my mistake.

[D] SCPC:
We need to build a contest hall in the shape of a cuboid (3D rectangle). for economical reasons, we need to minimize the size (area) of the rectangle. So given the coordinates of the teams, calculate the minimum rectangle area of land for a building big enough to fit all the teams.

Input :
T: number of cases.
N: number of teams.
Xi Yi: coordinates of each team.
1<=T,N<=100,
-10000<=Xi,Yi<=10000

Output:
Single line starting with case number, followed by the area of the minimum rectangle rounded to 4 decimal places.

Example :
4
4
0 0
1 1
1 0
0 1
4
0 0
2 2
2 0
0 2
4
0 0
1 2
1 0
0 2
3
0 0
1 0
1 1
--->
Case 1: 1.0000
Case 2: 4.0000
Case 3: 2.0000
Case 4: 1.0000

Contest Analysis :
Actually I didn't read this problem during the competition, so this solution wasn't tested against judge's inputs and therefore it's not conclusive.
This is a classic problem called minimum bounding rectangle, minimum bounding envelope and in 3D called minimum bounding box. To achieve this I am going to use the convex hull, because there is a theorem that says "The minimum bounding rectangle's orientations are determined by the polygon edges". So the steps are :

Compute the convex hull of the cloud.
For each edge of the convex hull :
- Compute the edge orientation.
- Rotate the convex hull using this orientation in order to compute easily the bounding rectangle area.
- Store the orientation corresponding to the minimum area found.
Return the rectangle corresponding to the minimum area found.

Solution in C++:
A very long code in C++ , during a contest this should be done in Java.
To find the convex hull, I translated a Javascript code described by Teemu Korhonen in this blog post.

#include <iostream>
#include <iomanip>
#include <fstream>
#include <vector>
#include <algorithm>
#define  _USE_MATH_DEFINES
#include <cmath>
#include <stack>

#define For(i,n) for(int i(0),_n(n);i<_n;++i)

using namespace std;

class Point {
  public:
 double x;
 double y;
 double angle;
};

bool comp(double a,double b) {return (a<b);}
bool compy(Point p1,Point p2) {return (p1.y<p2.y);}
bool compx(Point p1,Point p2) {return (p1.x<p2.x);}
bool compangle(Point p1,Point p2) {return (p1.angle<p2.angle);}

void rotate(Point &point, Point pivot, double angle) {
 float s = sin(angle);
 float c = cos(angle);
 point.x -= pivot.x;
 point.y -= pivot.y;
 double newx = point.x*c - point.y*s;
 double newy = point.x*s + point.y*c;
 point.x = newx + pivot.x;
 point.y = newy + pivot.y;
}

double ptdistance(Point p1,Point p2) {
 return pow(p2.x-p1.x,2) + pow(p2.y-p1.y,2);
}

double calculate_angle(Point point, Point pivot) {
 double x = point.x - pivot.x;
 double y = point.y - pivot.y;
 if(x>0 && y>0) return atan(y/x);
 if(x<0 && y>0) return atan(-x/y) + M_PI/2;
 if(x<0 && y<0) return atan(y/x) + M_PI;
 if(x>0 && y<0) return atan(-x/y) + M_PI/2 + M_PI;
 if(x==0 && y>0) return M_PI/2;
 if(x<0 && y==0) return M_PI;
 if(x==0 && y<0) return M_PI/2 + M_PI;
 else return 0;
}

// Three points are a counter-clockwise turn if ccw > 0, clockwise if ccw < 0, and collinear if ccw = 0 
double ccw(Point p1, Point p2, Point p3) { 
 return (p2.x - p1.x)*(p3.y - p1.y) - (p2.y - p1.y)*(p3.x - p1.x); 
}

double parallelsurface(vector<Point> hull, Point point, Point pivot) {
 double angle = calculate_angle(point,pivot);
 vector<Point> newhull(hull);
 for(vector<Point>::iterator it=newhull.begin(); it!=newhull.end(); ++it) {
  if(angle < M_PI/2) rotate(*it,pivot,-angle);
  if(angle > M_PI/2 && angle< M_PI) rotate(*it,pivot,-angle+M_PI/2);
  if(angle > M_PI && angle< 3*M_PI/2) rotate(*it,pivot,-angle+M_PI);
  if(angle > 3*M_PI/2 && angle< 2*M_PI) rotate(*it,pivot,-angle+3*M_PI/2);
 }
 double minx = (*min_element(newhull.begin(), newhull.end(), compx)).x;
 double miny = (*min_element(newhull.begin(), newhull.end(), compy)).y;
 double maxx = (*max_element(newhull.begin(), newhull.end(), compx)).x;
 double maxy = (*max_element(newhull.begin(), newhull.end(), compy)).y;
 return (maxx-minx)*(maxy-miny);
}

int main(int argc, char const *argv[]) {
 long long T;
 fstream f("scpc.in");
 f >> T;
 For(t,T) {
  long long N;
  vector<Point> points;
  vector<Point> hull;
  vector<double> surfaces;
  f >> N;
  For(i,N) {
   Point pt;
   f >> pt.x;
   f >> pt.y;
   points.push_back(pt);
  }
  // All points with positive coordinates
  int minx = (*min_element(points.begin(), points.end(), compx)).x;
  int miny = (*min_element(points.begin(), points.end(), compy)).y;
  for(vector<Point>::iterator it=points.begin(); it!=points.end(); ++it) {
   if(minx<0) (*it).x += abs(minx);
   if(miny<0) (*it).y += abs(miny);
  }

  // Get reference point C (lowest leftmost) and remove it from points
  vector<Point>::iterator ref = points.begin();
  for(vector<Point>::iterator it=points.begin(); it!=points.end(); ++it) {
   if((*it).y < (*ref).y) ref = it;
   if((*it).y == (*ref).y)
    if((*it).x > (*ref).x) ref = it;
  }
  Point C;
  C.x = (*ref).x;
  C.y = (*ref).y;
  C.angle = 0;
  points.erase(ref);
  --N;

  // Stack to use for removing points to not interfere with the loop
  stack<vector<Point>::iterator> rmpts; 

  // Fill the angle field and 
  for(vector<Point>::iterator it=points.begin(); it!=points.end(); ++it) {
   (*it).angle = calculate_angle(*it,C);
   if((*it).x == C.x && (*it).y == C.y) {
    rmpts.push(it);
    --N;
   }
  }
  while(!rmpts.empty()) { // Effective removal
   points.erase(rmpts.top());
   rmpts.pop();
  }

  // Sort by angle
  sort(points.begin(), points.end(), compangle);

  // If two points have same angle remove the closest to C
  for(vector<Point>::iterator it=points.begin()+1, prev=points.begin(); it!=points.end(); prev=it, ++it) {
   if((*prev).angle == (*it).angle) {
    double d1 = ptdistance(C, *it);
    double d2 = ptdistance(C, *prev);
    if(d1 > d2) rmpts.push(prev);
    else rmpts.push(it);
    // I don't know why I keep updating N even if I'm done with it !!
    --N;
   }
  }
  while(!rmpts.empty()) { // Effective removal
   points.erase(rmpts.top());
   rmpts.pop();
  }

  // Building the convex hull
  hull.push_back(C);
  hull.push_back(points[0]);
  hull.push_back(points[1]);
  for(vector<Point>::iterator it=points.begin()+2; it!=points.end(); ++it) {
   Point pi = *it;
   while(ccw(hull[hull.size()-2], hull[hull.size()-1], pi) <= 0) {
    hull.pop_back();
   }
   hull.push_back(pi);
  }

  // Calculate MBR area for each side
  for(vector<Point>::iterator it=hull.begin()+1, prev=hull.begin(); it!=hull.end(); prev=it, ++it) {
   surfaces.push_back(parallelsurface(hull,*it,*prev));
  }
  surfaces.push_back(parallelsurface(hull,hull[hull.size()-1],hull[0]));

  cout << "Case " << t+1 << ": " << fixed << setprecision(4) << (*min_element(surfaces.begin(), surfaces.end(), comp)) << endl;
 }
 f.close();
 return 0;
}

MCPC 2012 - Problem C : Shortest path in a grid

noreply@blogger.com (Anonymous) — Wed, 05 Dec 2012 17:11:00 +0000

May Allah`s peace , mercy and blessing be upon you

P.S: This is not the original text, I rephrased and summarized the original one because I'm lazy and I couldn't type the whole text. if there is an error it's my mistake.

[C] LCPC:
Chief judge Fegla and Nicole are in a university and need to meet each other to smoke Shesha O_o' !!! the problem is that all the walkways in the campus form a rectangular grid that has some strange properties :
No one can walk elsewhere the cells of the grid.
Any person on a cell can only go the cell on his left, right, front, rear, the walk takes one second.
Person can't get out of the grid's boundaries.
If a tree is planted in a cell, no one can walk on this cell.
Fegla and Nicole are in two cells(not necessarily different and has no tree) they start looking for each other taking one action each second simultaneously, your job is to find the minimum number of seconds needed to meet.

Input :
T: number of cases.
R C: number of rows, number of columns.
r1 c1 r2 c2: Fegla's coordinates, Nicole's coordinates.
N: number of trees.
N lines : TRi TCi Tree i coordinates.
1<=R,C<=20, 0<=r1,r2<=R, 0<=c1,c2<=C,
0<=N<=R*C-2, 0<=TRi<=R, 0<=TCi<=C

Output:
Single line either the minimum number of seconds or -1 if they can never meet.

Example :
4
1 3
0 0 0 2
0
2 3
0 0 1 0
0
2 3
0 0 1 2
3
0 2
1 0
1 1
2 3
0 0 0 2
1
0 1

--->
1
1
-1
2

Contest Analysis :
Actually I didn't read this problem during the competition, so this solution wasn't tested against judge's inputs and therefore it's not conclusive.
The key word is Breadth-first search, but first you should notice that Fegla and Nicole are symmetric if Fegla can reach Nicole then Nicole can reach Fegla. Also, if one can't, then the other can't too. So we shouldn't care about both of theme moving, we can fix one and move the other. Now we can use Breadth-first search, but in a grid there is a derivation called the Lee algorithm. First we start from Fegla, then mark every possible(none tree) neighbor with 1, then mark all unlabeled and possible neighbors of 1 with 2 etc...
We stop if we reached the target or we can't mark any more points. In fact, that's it, if we didn't reach the target then, they are in different connected components (in problem's sense). Else, we already have the number of steps that Fegla do while Nicole is stopped. Then, if we make Nicole moves too the number will be divided by two (+1 if odd number).

Solution in C++:

#include <iostream>
#include <fstream>
#include <vector>

#define For(i,n) for(int i(0),_n(n);i<_n;++i)

using namespace std;

static const int P     = 0;
static const int EMPTY = -1;
static const int TREE  = -2;

int main(int argc, char const *argv[]) {
 long long T;
 fstream f("lcpc.in");
 f >> T;
 For(t,T) {
  long long R,C,N,r1,c1,r2,c2,r,c;
  vector<vector<int> > grid;
  f >> R;
  f >> C;
  For(i,R) {
   vector<int> row(C);
   For(j,C) row[j] = EMPTY;
   grid.push_back(row);
  }
  f >> r1;
  f >> c1;
  grid[r1][c1] = P;
  f >> r2;
  f >> c2;
  f >> N;
  For(i,N) {
   f >> r;
   f >> c;
   grid[r][c] = TREE;
  }
  int current = 0;
  bool still = true;
  bool found = false;
  while(still && !found) {
   still = false;
   For(i,R) For(j,C) {
    if(grid[i][j] == current) {
     still = true;
     int val = grid[i][j]+1;
     if(j+1<C) if(grid[i][j+1]==EMPTY)
      grid[i][j+1] = val;
     if(j-1>=0) if(grid[i][j-1]==EMPTY)
      grid[i][j-1] = val;
     if(i+1<R) if(grid[i+1][j]==EMPTY)
      grid[i+1][j] = val;
     if(i-1>=0) if(grid[i-1][j]==EMPTY)
      grid[i-1][j] = val;
     if(i==r2 && j==c2) {
      still = false;
      found = true;
     }
    }
   }
   ++current;
  }
  if(!found) cout << -1 << endl;
  else {
   if(grid[r2][c2]%2 == 0) cout << grid[r2][c2]/2 << endl;
   else cout << grid[r2][c2]/2 + 1 << endl;
  }
 }
 f.close();
 return 0;
}

MCPC 2012 - Problem B : Minimal and maximal rate

noreply@blogger.com (Anonymous) — Tue, 04 Dec 2012 21:40:00 +0000

May Allah`s peace , mercy and blessing be upon you

P.S: This is not the original text, I rephrased and summarized the original one because I'm lazy and I couldn't type the whole text. if there is an error it's my mistake.

[B] JCPC:
Chief judge was hospitalized, he was kept in until a test (that returns a positive real number) dropped to 2.0 or less. Given the current result H and number of days D and provided that he is tested every hour and released immediately if result <= 2.0 print the minimum and maximum rate of decrease in this measurement to be released from the hospital after D days, but not after D+1 days.
1 day = 24 hours, very useful information !!!

Input :
T: number of cases.
T lines : H(current measurement) D(number of days)
1<=T<=200, 3<=H<=100, 1<=D<=150

Output:
Single line for each case in the following format : <maximum rate> <minimum rate> rounded to 5 decimal places after decimal point.

Example :
1
5 2
--->
0.06250 0.04225

Contest Analysis :
The problem was the easiest one, for the maximum rate: H-max*24*D = 2 , so max = (H-2)/(D*24).
in the minimum case the result should drop to 2.0 before D+1 days so an hour before D+1 days then
min=(H-2.0)/(((D+1)*24)-1).

Solution in C++:

#include &ltiostream&gt
#include &ltfstream&gt

#define For(i,n) for(int i(0),_n(n);i<_n;++i)

using namespace std;

int main(int argc, char const *argv[]) {
 long long T,H,D;
 double max,min;
 string gc;
 fstream f("jcpc.in");
 f &gt&gt T;
 For(i,T) {
  f &gt&gt H;
  f &gt&gt D;
  max = (H-2.0)/(D*24);
  min = (H-2.0)/(((D+1)*24)-1);
  cout.precision(5);
  cout &lt&lt fixed &lt&lt max &lt&lt " " &lt&lt min &lt&lt endl;
 }
 f.close();
 return 0;
}

MCPC 2012 - Problem A : Pattern matching

noreply@blogger.com (Anonymous) — Mon, 03 Dec 2012 17:48:00 +0000

May Allah`s peace , mercy and blessing be upon you

P.S: This is not the original text, I rephrased and summarized the original one because I'm lazy and I couldn't type the whole text. if there is an error it's my mistake.

[A] ACPC:
One of your friends spilled coffee on a form, luckily it wasn't totally destroyed. You will tell him what the fields on his form say for him to fill. You are given all the fields in your form as two strings <label>: <info> and the given questions. Each question is a string that was originally a label in the form but got some of its letters covered by coffee.

Input :
N: number of labels.
N lines : <lable>: <info>
M: number of questions.
M lines: <question>
1<=N<=100, 1<=M<=100, M<=N
<label>,<info> : string of lowercase & uppercase English letters
<question> : string formed of lowercase & uppercase English letters and question mark '?'.

Output:
Single line for each question in the following format : <original label>: <original info> that contains the first matching label and the info that matches it.

Example :

4
Name: Amr Samir
Age: 21
University: Cairo Univ.
Smoker: no
2
?m????
??m?
--->
Smoker: no
Name: Amr Samir

Contest Analysis :
The problem seems very simple, the first thing that comes to mind is regular expressions. Yes that's the key, we generate a valid regex from each question by replacing '?' with '.', then look for a match between labels. But the real problem is in treating spaces while reading so you should pay attention to the parsing step. I use a string, usually called gc (garbage collector), to contain unneeded characters.

Solution in C++:

#include <iostream>
#include <fstream>
#include <string>
#include <regex>
#include <algorithm>

#define For(i,n) for(int i(0),_n(n);i<_n;++i)

using namespace std;

int main(int argc, char const *argv[]) {
 long long N,M;
 string gc,labels[100],infos[100],questions[100];
 fstream f("acpc.in");
 f >> N;
 getline(f,gc);
 For(i,N) {
  getline(f,labels[i],':');
  getline(f,gc,' ');
  getline(f,infos[i]);
 }
 f >> M;
 getline(f,gc);
 For(i,M) {
  getline(f,questions[i]);
 }
 For(i,M) {
  For(j,N) {
   replace(questions[i].begin(),questions[i].end(), '?', '.');
   if(regex_match(labels[j],regex(questions[i]))) {
    cout << labels[j] << ": " << infos[j] << endl;
    break;
   }
  }
 }
 f.close();
 return 0;
}

MCPC 2012 Just Another Wonderful Day, Briefly !!

noreply@blogger.com (Anonymous) — Mon, 03 Dec 2012 12:03:00 +0000

May Allah`s peace , mercy and blessing be upon you

Hi again, it's been a while. This time I'm going to talk about another fabulous experience, the ACM-MCPC 2012 (Moroccan Collegiate Programming Contest) it's the 1st edition of the local qualification programming contest to the ACM-ACPC (Arab Collegiate Programming. Contest).
First of all I'll like to thank my university ENSIAS and the ACM represented by Eng. Mohamed Fouad (Deputy Regional Contest Director) and the judges. Also I'll like to thank the organizing committee for the great work, and congratulate them for organizing the event in record time.

About the contest, ACM International Collegiate Programming Contest (abbreviated as ACM-ICPC or just ICPC) is an annual multi-tiered competitive programming competition among the universities of the world. The contest is sponsored by IBM. Headquartered at Baylor University, with autonomous regions on six continents, and operates under the auspices of the Association for Computing Machinery ACM. During contest, the teams are given 5 hours to solve between 8 and 12 programming problems (with 8 typical for regionals and 10 for finals). They must submit solutions as programs in C, C++, or Java. Programs are then run on test data. If a program fails to give a correct answer, the team is notified and can submit another program.

I had the chance to participate in the Google CodeJam , so what are the differences ?

The first obvious thing is the languages that you can use, ACM-xCPC insists on the classics C,C++ and Java whilst in CodeJam you can use any language (Assembly if you're a masochist :P). In my situation I used PHP and Python during the CodeJam it was really helpful, but in the ACM-xCPC I didn't know enough C++ or Java to deal with the problems so we used C (Yes it really hearts !!!). C fans hold your guns, I huge fan of C I'm not doubting the power of C, but as a contestant you have constraints of time and you'll need a language with tools that would be Python else it's C++ (or Java if you are Bad luck Brian, Java fans you can shout me :/ ).

Second thing, ... yes the "No electronic documents" thing !!! , for the record, they allow printed documents but let's face it who used them anymore (even the course, I only keep the electronic version ). I like electronic documents and internet at least you should be allowed to bring your libraries, snippets and cheat sheets with you, that makes the difference between contestants. I know it's creating equal opportunities but still !!
Internet is also very useful, a good coder is the one who can solve problems using resources not only his acquired knowledge. But it's difficult to control the data and prevent cheating.

The last thing which I couldn't tell if it's advantage or a drawback is the *.in file. In CodeJam you can download in files to generate the *.out file, but you can use this trick to check if you're missing a case or you have a bug in a special case. In ACM-xCPC you can't do that, the in file is generated and tested on the judge's side.

So, ACM-xCPC is an opportunity to test your skills offline and without libraries, it's an opportunity to test your knowledge in C,C++ and Java and no kidding you should master one of them if you're calling your self a coder. Finally the results, :Drum: , my team was 5th :/ a tie between the 2nd till 6th and her comes the rule "In case of a tie, the title goes to the team with the minimum penalties for that problem".
Ok, that was it for the day, I'll post an article for every problem with my solution as soon as possible for now here are some pics.

PHPLogger: Debugging PHP in console

noreply@blogger.com (Anonymous) — Thu, 06 Sep 2012 17:29:00 +0000

May Allah`s peace , mercy and blessing be upon you

Yesterday, I got nostalgic about PHP because recently I used too much JavaScript and some Python, and what these two have in common is real easy debugging beside coolness . Back to PHP days I didn't care about debugging because I was a beginner - and still :P - , so I was satisfied with the old tricks echo, print_r , var_dump, die ... - etc Like if there is many :) - .

Debugging PHP really sucks , I know that PHP fans will be furbishing their swords already and start praising their tools but additional software like Xdebug is not practical when used outside IDE. I hate to get confused by windows so I use only two : Browser/Editor or Terminal/Editor. Therefore, using other terminal(s) to debug makes me discomfortable.

Browser's console is the most awesome debugging tool: No more layout destruction, no more log file which needs refresh every time and no more unreadable output. So why not using it for PHP too, FirePHP is a good choice but I found implementations that uses PHP to output JavaScript code that use console to log :

Inspired by these codes I tried to write my own , actually I didn't like the fact that all those function can log one variable at once and always need extra arguments to specify type , which means I would use the func_get_args to make it multi-arguments. But first console has 4 methods : log , warn , info , error . The only difference is the name so the use of method overloading __call($name, $arguments) is appropriate , the benefit is that we already got the arguments so no need to use func_get_args and no need to specify type.
What's left is conversions :

Strings needs quotes.
Objects and arrays are JSON encoded.
Booleans get transformed to text.

The code :

<?php
class console {
     function __call($name, $args) {
         if(!in_array($name, array("error","log","info","warn"))) return;
         echo '<script type="text/javascript">';
         $log = "";
         foreach($args as $var) {
             if (is_object($var) || is_array($var)) $log .= json_encode($var).",";
             elseif (is_string($var)) $log .= '"'.$var.'",';
             elseif (is_bool($var)) $log .= ($var)?"true,":"false,";
             else $log .= $var.",";
         }
         $log = substr($log, 0,-1);
         echo "console.$name(".$log.");";
         echo '</script>';
     }
}
//Add an instance but needs "global" when called from functions
$console = new console();
?>

And here is the repo on Github , enjoy !!

Matrixify 1.1

noreply@blogger.com (Anonymous) — Wed, 22 Aug 2012 14:43:00 +0000

May Allah`s peace , mercy and blessing be upon you

Update : Matrixify now on Sublime Package Control.

Matrixify gets it's first update .. Oh Yeah !! :P , Seriously just a little update. I am new to Python and Sublime Text 2 plugins development but I used enough plugins to make me have the hunch that the method I'm using to read the format is not the genius one !!

I am lazy to look for solution so I asked on the ST2 forum and facelessuser answered : Sublime have an input form that prompt so it's a logical choice.

Another thing that come up is the indexes that I used for my arrays to output the matrix become much easier to calculate when the lines 0 is included.

output += separators[i%dim] + line + (lengths[(i%dim)] - len(line))*" "
if (i%dim) == dim-1:
    output += separators[dim] + "\n"

The full new code using show_input_panel :

import sublime, sublime_plugin

class MatrixifyCommand(sublime_plugin.TextCommand):
 def run(self, edit):
  def on_done(input):
   sels = self.view.sel()
   for sel in sels:
    lines = []
    separators = []
    lengths = []
    dim = 0
    lines = self.view.substr(sel)
    lines = lines.splitlines()
    lines = filter(None, lines)
    lines = [i.strip() for i in lines]
    separators = input.split('%')
    dim = len(separators) - 1
    lengths = [0] * dim
    for i in range(dim):
     for l in range(i,len(lines)-1,dim):
      lengths[i] = max(lengths[i] , len(lines[l]))
    output = ""
    for i in range(0,len(lines)):
     line = lines[i]
     output += separators[i%dim] + line + (lengths[(i%dim)] - len(line))*" "
     if (i%dim) == dim-1:
      output += separators[dim] + "\n"
    self.view.replace(edit, sel, output)

  self.view.window().show_input_panel("Enter matrix format", "", on_done, None, None)

Repository on github try it , fork it , develop it.

Matrixify - a Sublime text 2 plugin

noreply@blogger.com (Anonymous) — Thu, 16 Aug 2012 17:57:00 +0000

May Allah`s peace , mercy and blessing be upon you

Back to blogging ? No and yes , No because I never quit blogging and yes because I wasn't working on any exciting thing that worths sharing. for the past months I spent time on Android development - just some basic stuff - , and reading some C++ books . I found C++ very interesting whatever what people said about how complex it is , it's expressive and efficient that's what matters !!

Back to our talk for today, I was trying to build a Gameboy emulator with C++ . I am new to the experience of emulation so I decided to read a source code to understand the architecture of the device.
There is a lot of open source emulators but I couldn't found a simple documented one , here comes Imran Nazar he tried to write an emulator using javascript, so I'am translating the code into C++.

The implementation of the Z80 - cpu of the Gameboy - requires a set of cpu instructions each implemented as a method of the Cpu class. This set of functions is declared in the .h file of the class and that's more than 600 function prototype !!!!
It's a wast of space and lack of readability to put a prototype per line or all in a single line , so I thought to format the code like a matrix.

I am using Sublime Text 2 because it's awesome ,I am not even going to argue about that, So I think I am lazy enough to write a plugin to do that for me. Python, I started reading a book but I didn't finish it because I found out that's it's a natural language, it doesn't need a book just a cheat sheet and internet connection !!

This article from Nettuts+ is the best reference on the web on building ST2 plugins. The problem that I faced is input , how can I pass an input to my plugin ? I don't have limited number of inputs to use different commands , I think there is a prompt window but even if it exists it's not a good choice because I want to support multiple selections :/ .

My approach is to use the first line of each selection as an input and parse it to specify the format of the matrix, the code is simple :

import sublime, sublime_plugin

class MatrixifyCommand(sublime_plugin.TextCommand):
 def run(self, edit):
  sels = self.view.sel()
  for sel in sels:
   lines = []
   separators = []
   lengths = []
   dim = 0
   lines = self.view.substr(sel)
   lines = lines.splitlines()
   lines = filter(None, lines)
   lines = [i.strip() for i in lines]
   separators = lines[0].split('%')
   dim = len(separators) - 1
   lengths = [0] * dim
   for i in range(dim):
    for l in range(i+1,len(lines)-1,dim):
     lengths[i] = max(lengths[i] , len(lines[l]))
   output = ""
   for i in range(1,len(lines)):
    index = dim-1 if (i%dim)==0 else (i%dim)-1
    line = lines[i]
    output += separators[index] + line + (lengths[(i%dim) -1] - len(line))*" "
    if (i%dim) == 0:
     output += separators[dim] + "\n"
   self.view.replace(edit, sel, output)

On my Github repository you can find other files used to specify the command , the Edit menu item and the keyboard shortcut. I sent a pull request to sublime package control , when it's accepted I'll update.

Day 2 : InputCanvas 2.0

noreply@blogger.com (Anonymous) — Sat, 07 Apr 2012 21:01:00 +0000

May Allah`s peace , mercy and blessing be upon you

Hi , Last time I wrote the BasicShape object , today I think that I should add some proprieties : value & font in order to add text to shapes. Also a font's setter method :

/**
   * Set font proprieties.
   *
   * @param int size       : Size of border in pixel.
   * @param string color  : Color of border (Hex).
   * @param string family : Font family.
   * @return void
*/
BasicShape.prototype.Font = function (size, color, family) {
   this.font.size   = size   || 14;
   this.font.color  = color  || '#000000';
   this.font.family = family || 'Arial';
};

The next big thing is how to draw text on a shape while respecting border , border-radius , and padding ?!!

Canvas has a method called clip() which allow us to define clipping regions you can read more on 1.5.6 HTML5 Canvas Clipping Region Tutorial . we will define a region using Mcontrols method :

/**
    * Get mask's controls
    *
    * @return array
*/
BasicShape.prototype.Mcontrols = function () {
    var Mcontrols = [];
    Mcontrols[0]  = {x : this.x + this.padding[3] , y : this.y + this.padding[0] };
    Mcontrols[1]  = {x : this.x + this.width - this.padding[1] , y : this.y + this.padding[0] };
    Mcontrols[2]  = {x : this.x + this.width - this.padding[1] , y : this.y + this.height - this.padding[2]};
    Mcontrols[3]  = {x : this.x + this.padding[3] , y : this.y + this.height - this.padding[2]};
    return Mcontrols;
};

So the draw function become :

BasicShape.prototype.Draw = function () {
    ....
    // Clipping region
    this.context.save();
    this.context.beginPath();
    this.context.rect(Mcontrols[0].x, Mcontrols[0].y, Mcontrols[1].x - Mcontrols[0].x, Mcontrols[3].y - Mcontrols[0].y);
    this.context.closePath();
    this.context.clip();
    // Drawing Text
    this.context.font         = this.font.size+'px '+this.font.family;
    this.context.fillStyle    = this.font.color;
    this.context.textBaseline = 'middle';
    this.context.fillText(this.value, Mcontrols[0].x , Mcontrols[0].y + this.height / 2);
    this.context.restore();
};

That was quick , next time we will work on FormCanvas a form that contain different inputs and .

Blogger custom comment form [Wordpress like] - Part II

noreply@blogger.com (Anonymous) — Mon, 20 Feb 2012 01:03:00 +0000

May Allah`s peace , mercy and blessing be upon you

Last time we transformed all inputs to a single JSON object which would be stored in a plain text comment and sent to the server , this time we will try to display those comments.

Ok we need to get the JSON string stored in comment's body from Blogger's database using :

<b:loop values='data:post.comments' var='comment'>
      <data:comment.body />
</b:loop>

But first we want to add more information that we need to display. So we will define another JSON object that contains the previous one (which is into the body text of the comment)+ time & id :

{"root": {
    "comments": [
      {
      "id": "",
      "time": "",
      "text" : ""
      }
    ]
  }
}}

Using Blogger's data tags we build the JSON string :

<script type="text/javascript">
var json= {"root": { "comments": [
<b:loop values='data:post.comments' var='comment'>
{
    "id": <data:comment.id />,
    "time": "<data:comment.timestamp />",
    "text" :  <data:comment.body />
},
</b:loop>
]}}};
</script>

All we need to do now is to read data using a simple loop through the JSON object and fill a pre-defined HTML template :

for(i in json.root.comments){
    html='<dialog id=com'+json.root.comments[i].id+'>';
    html+='<dt>';
    html+='<h1>'+json.root.comments[i].text.name+'</h1>';
    html+='<h3>'+json.root.comments[i].text.email+'</h3>';
    html+='<a href="'+json.root.comments[i].text.url+'>' +json.root.comments[i].text.url+'</a>';
    html+='<img src="'+json.root.comments[i].text.avatar+'"/>';
    html+='<time datetime="'+json.root.comments[i].time+'">'+ json.root.comments[i].time+'</time>';
    html+='</dt>';
    html+='<dd>';
    html+='<p>'+json.root.comments[i].text.text+'</p>';
    html+='</dd>';
    html+='</dialog>';
    $("#comments").html($("#comments").html() + html );
}

You can use more effects like a loading image or anything else .. of course a CSS style is a must and HTML still need some work.

That's it using this method you can do anything with Blogger's comment box : add more inputs , advanced features like rating , sub-comments , bb code , comment using Twitter or Facebook ... It's up to you to innovate :)

Blogger custom comment form [Wordpress like] - Part I

noreply@blogger.com (Anonymous) — Sat, 11 Feb 2012 19:39:00 +0000

May Allah`s peace , mercy and blessing be upon you

I was playing with Blogger's comment form using Firebug . If you don't know, Blogger uses an iframe to display the form , So because of the Cross-domain we can't style the form neither apply any Javascript code on it .

First, you need to know the major inconvenient of this method : comments will be considered as spam , So you have to check Not spam manually every time to make the comment visible (if you already administrating comments then you are used to).

Let's look at the next HTML code :

 
<form id="commentForm" method="POST" action="http://www.blogger.com/comment-iframe.do">
    <input type="text" id="user" placeholder="User Name" />
    <input type="email" id="email" placeholder="email" />
    <input type="url" id="url" placeholder="Website" />
    <textarea id="text"  placeholder="Text..."></textarea>
    <input type="hidden" name="commentBody" id="commentBody" />
    <input type="hidden" name="security_token" value="AAAAAAAAAAAAAAAAAAAAAAAAAA:***********" />
    <input type="hidden" name="blogID" value="**************" />
    <input type="hidden" name="postID" expr:value="data:post.id" />
    <input type="hidden" name="identityMenu" value="ANON" />
    <button id="sub">Submit</button>
</form>

url : http://www.blogger.com/comment-iframe.do
security_token : It's a key used by Blogger to check the source of the request you can extract it from your comment box using Firebug or similar.
blogID : Blog identifier (you can get it easily from the admin panel )
postID : Post identifier (expr:value="data:post.id" is a data tag in Blogger )
identityMenu : This is the id of the select that displays different types of identifications we choose ANON which stands for Anonymous (you have to set Who can comment? to Anyone)
commentBody : the comment text.

Now you need to replace the <b:include data='post' name='comment-form'/> by the html code above.
Next step is to create a JSON object that will contains the dataset :

 
{
    "comment" :
    {
        "user" : "" ,
        "email" : "" ,
        "url" : "" ,
        "avatar" : "",
        "text" : ""
    }
}

And a function that will format the comment to be ready for saving as JSON :

$('#sub').click(function () {
        var text = '{' 
                    + '"comment":{'
                    + '"user": "' + $('#user').val() + '",'
                    + '"email": "' + $('#email').val() + '",'
                    + '"url": "' + $('#url').val() + '",'
                    + '"avatar": "http://www.gravatar.com/avatar/' + MD5($('#url').val()) + '?s=80&d=DEFAULT_AVATAR_URL",'
                    + '"text": "' + escape($('#text').val()) + '"}}';
        $('#commentBody').val(text);
        $('#commentForm').submit();
});

I used the Gravatar URL to get avatar from the email , so we need to encode the email using MD5 , I used the implementation from webtoolkit.info .
Don't forget to set the DEFAULT_AVATAR_URL it's the default avatar URL , What a surprise :D !!!

Now our comment form is ready to save comments , Next time we will create the parser that will load and display comments . See you soon !!

Part II : http://jawbfl.blogspot.com/2012/02/blogger-custom-comment-form-wordpress_20.html

Canvas : Shape + shadow

noreply@blogger.com (Anonymous) — Fri, 10 Feb 2012 16:37:00 +0000

May Allah`s peace , mercy and blessing be upon you

Hi, I've been working on InputCanvas and I faced an issue , finally I got to the solution and I'll share it with you .

I'll use this beautiful cloud from html5canvastutorials.com

the code :

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = "#8ED6FF";
context.fill();
context.strokeStyle = "#0000ff";
context.stroke();

To add a shadow we have to set shadow's proprieties :

context.shadowColor   = "#000000";
context.shadowBlur    = 3;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;

Our problem is how to place the shadow ?!! first thing I did was :

....
context.closePath();
context.lineWidth = 5;
context.fillStyle = "#8ED6FF";
context.strokeStyle = "#0000ff";
context.shadowColor = "#000000";
context.shadowBlur = 2;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();
context.stroke();

The result :

I was confused I tried to try all different kind of arrangements but all I got was weird results . So I posted the question at stackoverflow , @Neurofluxation proposed a solution using globalCompositeOperation :

....
context.closePath();
context.lineWidth = 5;
context.fillStyle = "#8ED6FF";
context.strokeStyle = "#0000ff";
context.fill();    
context.globalCompositeOperation = "destination-over";
context.shadowColor = "#000000";
context.shadowBlur    = 9; 
context.shadowOffsetX = 3; 
context.shadowOffsetY = 3;    
context.stroke();

:D what he really did her is to increase offset to hide the white space between the shape and the shadow . because it's the stroke's shadow not the fill's !!! http://jsfiddle.net/j8u8p/16/

I accepted the answer -but I wasn't convinced - so I did some experiments , Then I understood the issue ; the problem is that Canvas's shadow is defined to be applied to every drawing ( fill, stroke , .. ) Therefore what I need to do is to apply shadow on the fill then remove it so it wouldn't be applied to the stroke.
The Final solution :
http://jsfiddle.net/j8u8p/18/

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150); 
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;     
context.fillStyle = "#8ED6FF";
context.strokeStyle = "#0000ff";     
context.shadowColor = "#000000";
context.shadowBlur    = 5;
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.fill();    
context.shadowColor = 0;
context.shadowBlur    = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.stroke();

Day 1 : InputCanvas 2.0

noreply@blogger.com (Anonymous) — Tue, 07 Feb 2012 15:57:00 +0000

May Allah`s peace , mercy and blessing be upon you

Today I'll start redesigning InputCanvas , the old version wasn't clear and customisable. There was only 2 objects FormCanvas and InputCanvas , and only text input.
In this new version I'll try to create so match more objects that we can use separately. Also I'm going to use one of the most important feature in OOP which is inheritance , the most important object is BasicShape it's the parent object of all types of inputs with basic proprieties and methods.

First of all , I'll define a very useful function setNumArr(arg, max) , this function will be used to set some proprieties with the form of a 4x array like border, padding ... etc
Code speaks louder than words :

 
function setNumArr(arg,max)
{
    if(typeof arg === 'number')
    {
        var tmp = parseInt(arg);
        if(max && tmp > max) tmp = max;
        return [tmp, tmp, tmp, tmp];
    }
    else if(typeof arg === 'object' && arg.length == 4)
    {
        for(i=0;i<4;i++) {
            if(max && arg[i] > max) arg[i] = max;
        }
        return arg;
    }
    else return [0, 0, 0, 0];
}

Now the BasicShape definition :

// The basic shape element

function BasicShape(canvas,x,y,width,height)
{
    // Main proprieties
    this.canvas  = canvas;                                        // HTML canvas element
    this.context = canvas.getContext("2d");                       // Context of canvas
    this.x        = x || 0;                                       // Top left corner X
    this.y        = y || 0;                                       // Top left corner Y
    this.id       = '';                                           // Identifier
    this.mousein  = false;                                        // Mouse Status
    this.mouseinp = false;                                        // Mouse Previous Status
    this.focus    = false;                                        // Focus status
    this.view     = true;                                         // Visibility

    // Others
    this.width    = width;                                        // Width
    this.height   = height;                                       // Height
    this.padding  = [1, 1, 1, 1];                                 // Padding
    this.border   = {color:'#000000',size:2,radius:[1, 1, 1, 1]}; // Border
    this.shadow   = {color:'',blur:0,x:0,y:0};                    // Shadow
    this.bg       = '#FFFFFF';                                    // Background color
    
    // Event hundlers.
    this.onMouseMove = function (){};
    this.onMouseOver = function (){};
    this.onMouseOut  = function (){};
    this.onMouseDown = function (){};
    this.onMouseUp   = function (){};
    this.onKeyDown   = function (){};
    this.onKeyUp     = function (){};
    this.onKeyPress  = function (){};
    this.onBlur      = function (){};
    this.onFocus     = function (){};
    this.onClick     = function (){};
    this.onHover     = function (){};
}

Now we have to define some methods :

1- Setters :

 
/**
    * Set border proprieties.
    *
    * @param int size      : Size of border in pixel.
    * @param string color : Color of border (Hex).
    * @param int radius, array radius : Border radius [top,right,bottom,left].
    * @return void
*/
BasicShape.prototype.Border = function (size, color, radius) {
    this.border.size   = size  || 2;
    this.border.color  = color || '#000000';
    this.border.radius = setNumArr(radius,Math.min(this.width/2,this.height/2));
};

/**
    * Set padding.
    *
    * @param int padding, array padding : [top,right,bottom,left].
    * @return void
*/
BasicShape.prototype.Padding = function (padding) {
    this.padding = setNumArr(padding);
};

/**
    * Set shadow/light proprieties.
    *
    * @param string color : Color of border (Hex).
    * @param int x          : Offset x in pixel.
    * @param int y          : Offset y in pixel.
    * @param int blur     : Blur.
    * @return void
*/
BasicShape.prototype.Shadow = function (color, x, y, blur) {
    this.shadow.color  = color || '#000000';
    this.shadow.x      = x || 0;
    this.shadow.y      = y || 0;
    this.shadow.blur   = blur || 0;
};

2- Correcting X, Y, Width, Height :

Canvas's lineTo() defines a line , stroke() draws a stroke on the current sub-path using the current stroke style , which is not the desired result. The effect that we are looking for is similar to CSS's borders , so we have to translate the border by a (border's size / 2 ) offset.

 
/**
    * Get top left corner X.
    *
    * @return int
*/
BasicShape.prototype.X = function () {
    return this.x-this.border.size/2;
};

/**
    * Get top left corner Y.
    *
    * @return int
*/
BasicShape.prototype.Y = function () {
    return this.y-this.border.size/2;
};

/**
    * Get top right corner X.
    *
    * @return int
*/
BasicShape.prototype.WidthX = function () {
    return this.x+this.border.size/2+this.width;
};

/**
    * Get top right corner Y.
    *
    * @return int
*/
BasicShape.prototype.HeightY = function () {
    return this.y+this.border.size/2+this.height;
};

3- Lines coordinates ( To create the border radius effect ):

 
/**
    * Get lines start.
    *
    * @return array
*/
BasicShape.prototype.LineStart = function () {
    var linestart = [];
    linestart[0]  = {x : this.X() + this.border.radius[0] , y : this.Y()};
    linestart[1]  = {x : this.WidthX() , y : this.Y() + this.border.radius[1]};
    linestart[2]  = {x : this.X() - this.border.radius[2], y : this.HeightY()};
    linestart[3]  = {x : this.X(), y : this.HeightY() - this.border.radius[3]};
    return linestart;
};

/**
    * Get lines end.
    *
    * @return array
*/
BasicShape.prototype.LineEnd = function () {
    var lineend   = [];
    lineend[0]    = {x : this.WidthX() - this.border.radius[1] , y : this.Y()};
    lineend[1]    = {x : this.WidthX() , y : this.HeightY() - this.border.radius[2]};
    lineend[2]    = {x : this.X() + this.border.radius[3], y : this.HeightY()};
    lineend[3]    = {x : this.X() , y : this.Y() + this.border.radius[0]};
    return lineend;
};

4- Draw :

 
/**
    * Draw input's shape.
    *
    * @return array
*/
BasicShape.prototype.Draw = function () {
    var linestart = this.LineStart();
    var lineend   = this.LineEnd();
    var controls  = this.Controls();
    
    this.context.beginPath();
    this.context.moveTo(linestart[0].x, linestart[0].y);
    this.context.lineTo(lineend[0].x, lineend[0].y);
    this.context.arcTo(controls[1].x,controls[1].y,linestart[1].x, linestart[1].y,this.border.radius[1]);
    this.context.lineTo(lineend[1].x, lineend[1].y);
    this.context.arcTo(controls[2].x,controls[2].y,linestart[2].x, linestart[2].y,this.border.radius[2]);
    this.context.lineTo(lineend[2].x, lineend[2].y);
    this.context.arcTo(controls[3].x,controls[3].y,linestart[3].x, linestart[3].y,this.border.radius[3]);
    this.context.lineTo(lineend[3].x, lineend[3].y);
    this.context.arcTo(controls[0].x,controls[0].y,linestart[0].x, linestart[0].y,this.border.radius[0]);
    this.context.shadowColor   = this.shadow.color;
    this.context.shadowBlur    = this.shadow.blur;
    this.context.shadowOffsetX = this.shadow.x;
    this.context.shadowOffsetY = this.shadow.y;
    this.context.fillStyle     = this.bg;
    this.context.fill();
    this.context.lineWidth     = this.border.size;
    this.context.strokeStyle   = this.border.color;
    this.context.stroke();
    this.context.closePath();
};

That's all for today , next time we will create the FormCanvas object .

InputCanvas 2.0

noreply@blogger.com (Anonymous) — Mon, 06 Feb 2012 14:23:00 +0000

May Allah`s peace , mercy and blessing be upon you

Hi, I have been developing InputCanvas.js in the open (on github.com), It's the first Javascript Library to create real forms and inputs on the Canvas element . It's not HTML's native inputs and no CSS positioning .

What can I do with InputCanvas?

You can create forms and inputs that work exactly like usual html fields on canvas , with events and style support.

How can I use it ?

Using InputCanvas is really simple . just follow the steps :

1-Include the library in your page :

<script type="text/javascript" src="inputcanvas.js"></script>

2-Create a new instance of the FormCanvas object (a canvas should have one form).

var canvas = document.getElementById('myCanvas');
var form = new FormCanvas(canvas);
form.Init();

3-Add inputs to your form :

var inp = form.addInput(100,100,250,40);
var inp2 = form.addInput(100,200,200,30);

4-Styling :

inp.border.radius = [10,0,20,0];
inp.border.color = '#FF0000';
inp.border.size = 10;

inp.Border(10,'#FF0000',[10,0,20,0]);

5-Add Event Handlers :

inp.onFocus = function(){inp.border.color = '#DD0125';};

That's the old documentation you can try the Demo of InputCanvas 1.1 on Jsfiddle , now I am working on redesigning the whole library InputCanvas2.0.js is going to be too different , I'll post changes and major differences. Wish me luck !!

Why english ??

noreply@blogger.com (Anonymous) — Sun, 05 Feb 2012 14:32:00 +0000

May Allah`s peace , mercy and blessing be upon you

Ok, for a long time I was blogging in Arabic - I don't know yet but may be I'll continue - , for the moment I am trying to start blogging in English . Why? that's a good question.

First of all , I am working on some open source projects. So you guessed I need to write documentations, instructions , tutorials and so on . Writing those things in Arabic or French is against Freedom of information . English is international , that's a fact specially in technical domains , people all over the world can read and understand what I am writing : Africa , ME , US , UK , China , India , Japan ...

Secondly, I should switch my blogging efforts to English articles, in order to reach a wider audience , get more feedback and to have interesting discussions.

In the third place , Blogging and Tweeting are my only activities that needs writing :) , So I want to improve my English by writing articles .

I hope this blog will be good enough for you . Enjoy reading and reacting .