Pixel Bow

I made an image viewer using Flex and Actionscript 3 where you can view the images as thumbnails and select an image and annotate it and even download that image with your annotations on it or save it to my server. Since I can view these images later, this can be a good way to send me a secret message ;)

Anyway here you can view my pixel bow application or download it and embed it in your website. Or even better, you can download my source code and play around with it.

Your comments are appreciated :)

Me and my project mate Mies developed 2 different versions for this assignment.

• Version 1 – uses the GeoIPService, the Ruby programming language, Sinatra, soap4r, the jquery Javascript framework and the Yahoo Maps API and can be found here:
  iwa-wsdl2ruby
• Version 2 – uses the Fraudlabs IP2Location webservice, the PHP programming language, nusoap, Javascript and the Google Maps API and can be found here:
  DisplayGeographicalLocation.html

Version 1:
Since Version 1 was fully developed by Mies, I will not post the source code for this here. Maybe he can give a link to his code if he wants. So here is the explanation for the version 1:

The GeoIP WSDL-to-REST service is built using Sinatra, soap4r, the Ruby programming language, Yahoo Maps and the jquery javascript framework. Sinatra is an open source web application framework and domain specific language written in Ruby. As opposed to other web frameworks such as Rails (also in Ruby) or Django (written in Python), Sinatra is very minimal in its design and implementation. URL Routes in Sinatra are HTTP methods combined with some pattern matching and logic. The simplest URL route and thus web application in Sinatra is:

get '/' do
"Hello World"
end

which basically prints out “Hello World” if invoked via the web server using the root url (http://localhost/). As such Sinatra is ideal for building small REST services, API’s and web hooks, and thus a perfect candidate for completing this assignment.

All application logic resides in the ‘main.rb’ file. Using the soap4r library (an implementation of Soap 1.1 in Ruby), a request object is created using the provided .wsdl file. The IP address as provided by the user is passed as parameter to the getGeoIP method of the request object. Second a result object (in fact a key-value pair, or dictionary) is created using the getGeoIPResult method, invoked upon the same request object. The actual country name is the value of the CountryName key within the result key-value pair.

Two forms of URL routes are provided, one for the html representation and a second route for the REST API. The html representation is a simple .erb (a ruby templating language) template with a form. The IP address can be submitted and the result is displayed.

The second URL route provides the methods for the RESTful API. The following methods are supported: /api/location.?ip= where is the desired output format.
Current options are .xml and .json

For instance the url:

/api/location.xml?ip=62.69.184.53 will render a response NETHERLANDS

whereas

the location.json?ip=62.69.184.53 equivalent will render a {”CountryName”:”NETHERLANDS”} response.

The ajax response and yahoo maps calls are handled using jquery; a javascript framework.

Figure 1 displays an overview of the application’s architecture:

The final web application is deployed using Heroku, a cloud-based hosting environment for ruby applications at http://iwa-wsdl2ruby.heroku.com/. The initial version used the Google Maps Geocoding API for requesting a latitude and longitude and subsequently render the actual map. However as Heroku uses a reverse proxy (Nginx) and http caching layer (Varnish) to service and load balance requests, and being able to dynamically scale deployed web applications, the IP address used for this web application is not static. As such the Google Maps API key can not be coupled to this web application and thus an error message appears and the actual map is not rendered. The Yahoo Maps API is less strict in this sense about its usage and thus we ended up using this service in rendering the final map.

Version 2:
This version of the application makes use of Javascript in the front-end and PHP at the back-end and only works for IE  for now. This can be avoided by using a framework like prototypejs.

When the user browses to DisplayGeographicalLocation.html 2 new Ajax objects are created as the page is loaded(one for getting IP asynchronously and the other for getting the geographical location asynchronously).

The logic of the application resides in ipToMap function. If the ip input text field is empty, it makes an HTTP GET request to getUserIP.php which returns the user IP to the client.

The Javascript code for this would look like this:

The PHP code for getting user ip is as below:

After the ip is successfully assigned to the ip input text field, a new http GET request is made to getGeoLoc.php and ip is given as a parameter.

This php file makes use of nusoap library in order to create a soap client using the WSDL file provided by fraudlabs: ip2locationwebservice.asmx?wsdl and to call the fraudlabs IP2Location webservice with a message including the ip and licence key needed to use this webservice.

A sample call to getGeoLoc.php and its result would look like this:

And the source code for getGeoLoc.php which turns WSDL webservice into REST.

The result is then processed and turned into XML format within getGeoLoc.php and returned to the ajaxObject as a responseText. This text is than recognized as an XMLDOM and parsed and the latitude and longtitude are retrieved. These latitude and longtitude variables are then used for creating a map using the Google Maps API.

Please note that the free version of fraudlabs includes only 90 calls to their webservice per month, so when the credits are finished the result will not be accurate, it will return a latitude of 0 and longtitude of 0.

These examples are bound to external services though.
In practice, if it is a crucial functionality for your projects, I would recommend keeping the ip to geographical details on your database and write a service of your own, so that when these external services are down or you are out of credits, you wouldn’t be angry at other parties :)

Our first assignment for the Multimedia Authoring course was to make an interactive logo which navigates back to the home page when clicked. Nothing special, just an exercise to get familiar with Flex and AS3.

Since it had to be a portfolio page in the end, I wanted to use my name and initials. And while doing this I wanted a mascot for my logo, which happened to be an owl by using 2 different fonts. About the effects I used, I move the eyes of the owl according to the mouse position. And add blur effect when the logo is clicked.

You can download the source code for my logo component or check out the demo flex application.

Oh, and the documentation of my code is already embedded as comments in my files. Let me know if you have problems running the application or have any questions related..

The main page will only show a flash animation and the name of the program which will be linking to the “About” page for this program. Every small detail in this flash animation will lead the user to a different lesson.

The lessons page will be dynamically generated, passing a parameter from the main page to the lessons page will let the lessons page retrieve the respective xml file for that lesson. Each xml file will hold the information of the resources to be used in that lesson. Every lesson will have an information link, image and audio for the vocabulary, games and video and a test in the end.

I will also post the flow chart of this project soon.
You can follow the updates of this online program at Turkish.BloggingGeek.Com

Here is the design I made for the database:

2 tables only. Nothing fancy :-)
One for the images “TBLIMAGE”, and the other for the subjects “TBLSUBJECT”.

Image table has the columns below:

• imageID: unique id
• fileName: name of the file that we will show
• subjectID (key for getting the subject name from the subjects table)
• filePreTxt: Some text to display just before the image
• filePostTxt: Some text to display just after the image
• strImageQueue: Within the subject every image has a queue which shows their priority to be shown

TBLIMAGE

Subject table has the columns below:

• parentSubjectID
• subjectText: The title of the cartoon will use what ever text is in here
• strSubjectDate: We will order the cartoon files first according to their subject dates

TBLSUBJECT

And here are some parts of the PHP codes, that you may find useful:

Setting up the configuration file by assigning the dbname, username, password values to their variables respectively:

$dbhost = 'localhost';
$dbuser = 'yourdbusername';
$dbpass = 'yourdbpassword';
$dbname = 'yourdbname';


Opening the database connection to work with:

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);


And finally, defining and running my query:

$query = "SELECT filepretxt, fileposttxt, filename, subjecttext, strimagequeue FROM tblimage, tblsubject  WHERE subjectid = parentsubjectid order by strsubjectdate asc, strimagequeue asc";
$result = mysql_query($query) or die('Error, query failed');


Well, I didn’t forget to close the database connection of course.

mysql_close($conn);


So, here is my question:
Now that we have a chance to use a powerful and easy to integrate web application like Wordpress, would you rather use it, or make your own PHP Website for displaying your works/cartoons/etc.?
Or lets put it this way:
Which one is better?
Whibdatt [WordPress] or Whibdatt [HomeMade]?

Special thanks to W3Schools for their nice and explanatory web development tutorials ^^

Another project revised!
I developed this program for Computing and Art class, in 2005, so don’t expect too much of it -there is even a bug, you will see. I used Open Scene Graph as a graphics library and OpenAL as audio library. And we used Maya and Plant Studio to design the 3d models.

Jingle Jungle was ment to be the “Abstract Visualization of Interactive Sound Construction”, but for now it is only a demo of this sound construction visualization..

In further stages this could be adapted to help children learn sounds of nature faster.
Or even further stages of the program could use some human computer interaction through movement interpretation and people could make music while actually dancing.. A music that is adapting, changing speed and style according to your movements!
We could even project the camera views of 4 sides on the walls around the user and let the user navigate through the scene with his movements on a threadmill, or a WII board :-)

Or may be these are already done…
More ideas?

Can’t see the movie? Download it here