أرشيف شهر يونيو 2008

جرافيكس/تصميم / SWE312 User Interface Design Project: E-Gov Portal

18 يونيو

_

_

_

_

Salam all,

هدف المشروع كان انه زي ما الجماعة يعرفه انه عندنا مراجعة الدوائر الحكومية = قلق وصف طابور وروح وجيب ولا تنسى تجيب وهذي السواليف

أولا نبدأ بأعضاء المشروع:

  • عبدالله كونش
  • يزيد السويلم
  • البراء العوهلي
  • أسامة القرارعة

طبعا المشروع بروتوتايب … يعني انه مو شغال مية مية … بس يوضح انه كيف المفروض يشتغل ، وهذا هو هدف المادة “تصميم الواجهات”

طبعا في المادة اخذنا كذا شيء علشان نراعيه في مرحلة التصميم … مثلا احدها الألوان:

_

_

_

هذي هي الألوان المستخدمة بشكل عام في المواقع … الفائدة في انه الواحد ما يستخدم ألوان كثير علشان المستخدم ما يضيع مع كثر الألوان + انه مو مريح :/ عاد ليش لا تسألوني في المادة الدراسات توضح كذا هع + انت/انتي جربو بنفسكم لمن تشوفو موقع فيه الوان كثيرة وش يصير فيكم

عاد اللي وده يستزيد الله يخليه لازم يكون يعرف انجليزي مالي خلق اقعد اترجم
:P

وتفضلوا بتجربة الموقع … عاد لا اوصيكم عطونا آراأكم

e-Gov Portal (491)

Introduction

Citizens in a lot of countries especially in our Arab countries suffer a lot from dealing with Governmental Offices where long queues and efforts are wasted because of the lack of knowledge by either citizens or government Employees in delivering the correct information to the citizens and save their time from coming back and forth to the Government Office.

  • Problem Statement

This System is implemented and Design to provide all of the Government Offices and Services and one Portal system between the citizens hand to provide easy accessing to the information needed and provide Filling forms and the ability to submit them ONLINE and also the ability to check the Statius of your Application, this can save a lot of time and effort for both citizens and government Employees.

  • Main Features of the system

1) Searching: You can directly search for a specific service though the search option.
2) Service Request: you will be filling a form of the service which you need
3) Check request status: you can check your current request status.
4) Instructions: Instructions will be provided to aid the user in navigating the site.
5) Latest updates and news: The system will provide the latest updates in the website and if there is any important news.
6) Progress Line: a map will be provided so that the user knows where he is and when will he finish.
7) Log in: Logging in will be provided for security reasons.
8) Help: You can chat directly with an employee for help.
Some telephone numbers will be provided.
Or you can browse the help center.

_

_

_

_

  • Task Description

A user will log into the system. Then he will select ministry which he require his service. After that, a list of services will be viewed to select from. After selecting a service, there will be the form-filling part. When you are done from filling, a screen which will indicate that will show. You can always check your request status anytime after filling the request.
Since the project is only concerned about the user Interface, no interface for the employees was implemented.

  • Usability Requirements

We used these usability Requirements to build our system:

1- Ease of learning

The language of the system is the native language. That will help in understanding the system for that specific country.
There is a progress bar which will help the user to know where he is and how many steps he got left. This Also prevent the user from getting lost.
The system will tell the user what he shall do every steep.
Usages of graphical icons with text help to visualize what ministry he needs.

2- Task efficiency

Instead of going to the ministry itself, and then forgetting something and going back to get it, the E-Gov system helps in giving everything the ministry needs by specifying the ministry’s requirements. The task is efficient in terms of that the user will be guided through every step
3- Ease of Remembering

The system’s steps are easy to remember because the user will be guided through the steps in which the system is based on.
4- Understandability

The user should easily understand what the system do, since it is the same reason what the system shall do.

Visit The Site:
e-Gov Portal (491)

Screenshots:

Thanks for browsing :D

ألعاب / SWE344 Project: Mazers Game

12 يونيو

Salam all,

Since some people asked me to see the game, it’ll be available to everybody now =)

I’ll start with a simple discription:

Mazers is a multiplayer game developed for Software Engineering 344 (Internet Protocol and Client Server Programing) course using a pre-developed game engine.

The game engine and the way to learn how to use it, and some concepts about 2D gaming can be found through this link Click Here.

Things you need to run the game:

  1. Microsoft DirectX Runtime (Click here)
  2. .NET Runtime Environment 3.5 (click here)

The game is developed using C#

Mazer meaning: Will Simply : Maze > Mazer > Mazers … so its from a maze!

How to play:

Collect the gems and prevent your opponent from getting a higher score then head to the exit to win, there is a TIME LIMIT, so you have to think fast.
Simply, you will be one of 3 characters: Pitz, Reena and Cid each with different and special abilities, Pitz the mid-aged boy who has the middle ability, he can shoot fire and walk in average ratio, Reena the young girl has the speed ability, her ability to walk through the maze is unbelievable, Cid the wise old man has the power ability, his ability to shoot fire is incredible.

Instructions:

  1. Launch the game
  2. Start a Server
  3. Join the started server (note: If you started the server please be sure to let the other player to join your server before you actually do) when the other opponent joins … you may join the game. don’t ask why you have to do this because I don’t know myself ;/
  4. you can chat now
  5. select your character type
  6. When you are ready, Press “Lets do it1!”
  7. KILL!

Once you are inside the game, start collecting gems . you will start with a score of ZERO so it will be a waste of bullets if you start shooting.

The values of the Gems Depends on its appearance. These are its values 10 (Red), 30 (Blue) and 50 (Silver)

The Boxes have 3 possibilities:

  1. you get 100 points prize
  2. you get 10 points prize and 2 shots
  3. its a TRAP you lose 1/2 of your points and you are sent the starting point

If you got Shot : you lose 1/2 of your points and you are sent the starting point

A Challenging Problem:

The game objects (which are called Sprites) usually do intersect each other with no problem at all, i mean that you can walk through a wall for example without any problems. well, this is not desirable since we don’t want the charecter to go through a wall.

A solution to this is this algorithm which I came up with:

I keep up a record of the position of the object in the previous frame.
That way whenever the character collides with a wall, All I have to do is set the character point to its previous frame points. Solved!!!

if (collidedSprites != null){

foreach (Sprite s in collidedSprites){

if (s is Wall){

Position = new PointF(preFramex,preFrameY);

}

Hope you enjoy the game :)

Here is the Download Link

Mazers Game (177) -

Team members:
Abdullah Konash
Yazeed Al-Swailem
Feras Al-Omaireen

مشاريع / ICS202 Data Structures Self Project

11 يونيو

Salam all,

Note: The following project was hard-coded using Java. By hard-coded I mean there was no helping tools)
This was simple project made in February 2007 after the 1st semester ended.
Since we studied graphs and stuff i thought it would be easier if i could just draw the graph instead of seeing it in this notation:

Vertex {A}
Edge {A->B}
Edge {A->C}
Vertex {B}
Edge {B->E}
Vertex {C}
Edge {C->A}
Vertex {D}
Edge {D->B}
Vertex {E}
Vertex {F}
Edge {F->B}

This notation might become hard to comprehend if there were too many verticies.
So I combined the knowledge from ICS201 and ICS202 and came up with this.

We can make the graph object by supplying *.txt file which have the following format (the previous graph is represented by this file)

6
A
B
C
D
E
F
A B
A C
B E
D B
C A
F B

So now in the program I made, you will supply the graph and it will simply draw it for you. like the following picture:

Graphical Graphs

I had this idea in mind while doing this:

1- Count the number of verteces
2- Have the center of the screen as my pivot point
3- Start placing verteces -90 degrees from the pivot
4- Depending on how many verteces I have, the location and the rotation degree of the next vertex will differ

.

Ok, seems simple? now there is another problem, how to draw a line from an edge of a circle to another edge of the circle, and that line should be the shortest line.

Well basically the shortest line is the line that intersect the centers

Ok, not another problem. Java’s drawing Oval method is specified using the upper-left point of a rectangle that contains it. So how can I locate the edge of the circle?

You can simply think it this way: you connect the circles through the center than remove whats inside the circle. Which means you’ll have to remove from the tips of of lines the same distance as the radius of the circle which the line is in it.

The calculations may see be be a bit complected for others but i’ll say it anyways for nerds like me =)

2D Rotation
A point can be rotated around the origin <0,0> by running it through the following equations
to get the new point :
x’ = cos(theta)*x – sin(theta)*y
y’ = sin(theta)*x + cos(theta)*y

Yea Baby! Math ;/

I’ve built a method takes DrawArrow(Graphics g, int circle1x, int circle1y, int circle2x, int circle2y)
The int(s) are the center points of the circles

The content is as follows:

The 2D rotation was essential in most of the stuff here

public static void drawArrow2(Graphics g, int x1, int y1, int x2, int y2){

double slope = (y2-y1)/(x2-x1);
int midX = (x1+x2)/2;
int midY = (y1+y2)/2;
double distance = Math.sqrt((x2-midX)*(x2-midX) + (y2-midY)*(y2-midY));

while(distance > 50){
midX = (midX+x2)/2;
midY = (midY+y2)/2;
distance = Math.sqrt((x2-midX)*(x2-midX) + (y2-midY)*(y2-midY));
}

int midX2 = (x1+x2)/2;
int midY2 = (y1+y2)/2;
distance = Math.sqrt((x1-midX2)*(x1-midX2) + (y1-midY2)*(y1-midY2));

while(distance > 50){
midX2 = (midX2+x1)/2;
midY2 = (midY2+y1)/2;
distance = Math.sqrt((x1-midX2)*(x1-midX2) + (y1-midY2)*(y1-midY2));
}
x1 = midX2;
y1 = midY2;

g.drawLine(x1, y1, x2, y2);
}

The algorithm is just as a said, all these calculations are just to find the point which i need to start my drawing with (which is the point on the circle) :)

This is just a small aspect of it but its the main idea, i will not go through how the arrows are drawn unless someone is interested in seeing its code.

Hope this is interested to somebody, specially when it contains math ;/

Here are some other samples for fun.

Graphical Graphs

.

كلام / وبسم الله نبدأ!

9 يونيو

سلام عليكم جميعا =)

أهلا بكم ومرحبا بكم في مدونتي البسيطة

A Faraway Promise

In this blog, I’ll use both languages English and Arabic. Feel free to reply in any language you would prefer.

أحب أشرك الأخ طلوووووو (طلال الأسمري) على مساعدته لي في فتح هذه المدونة. ما تقصر أبو شتاف (صحيح أبو شتّاف؟ احم) على العموم

ان شاء الله المواضيع اللي حتكلم عنها بسيطة … بما انه هدف المدونة في بالي اني اعرض الأعمالي وأستفيد من آاراء الشعب فمتوقع انكم تلاقو أشياء تخصص التصميم والبرمجة بشكل عام … امكن أشطح كم مرة عن الموضوع فعادي هع !

البحث في المدونة: