Bulkan Savun Evcimen

Thu 09 May 2013

Ive been developing a HTML5 game using the LimeJS framework. As I am targetting iPhone and iPod Touches I asked my lovely girlfriend to design me an app icon and hopefully In the near future she will also have give startup images too.

As I dont want to load the icon and startup images via the network every time the app loads, I thought I would cache it "offline". To do this you need to create a manifest file which your web server needs to set a specific content-type header which is just text/cache.manifest.

To load a manifest file you need to add an attribute called manifest that points to your manifest file. It can be a relative path.

<!DOCTYPE HTML>
<html manifest="mysite.manifest">
...

Here is how the rest of my HTML file looks like

...
<head>
    <title>site</title>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="apple-touch-icon" href="/assets/icon.png"/>
    <script type="text/javascript" src="site.js"/>
</head>
    <body></body>
</html>

The manifest file tells the browser which files to store locally, the syntax for it kind of reminds me of INI files, but not quite. My manifest file looks like following;

CACHE MANIFEST
/assets/icon.png

NETWORK:
site.js

This tells the site to cache/store the png image for the app icon. The file listing following the NETWORK: section tells the browser to always load the files from the network. More info is available in this link

If you are using Nginx like I am, then you need to change the file mime.types and add the following

text/cache.manifest       manifest;

Which just tells Nginx to serve up file resources ending with manifest with the content-type header of test/cache.manifest.

Hope this helps.

Mon 29 April 2013

Using Custom Events With LimeJS

LimeJS is an open source JavaScript HTML5 game creation framework built using Google Closure. In this article I will show you how to create a new event type and dispatch it, which is more so a Closure feature than LimeJS. I am going to assume you have installed LimeJS if not read the instructions here.

We will create a simple game that will display a Sprite with the same width and height as the viewport. We will listen to touch & click events on this Sprite, generate a random number when these events fired, between 0-256 and fire a custom event once this number is greater than 128.

This number will be than used to change the color of our Sprite.

The game we will create is kind of a contrived example with zero playability but I hope it will serve the purpose introducing custom events to you.

Let there be events

Create a new LimeJS project by typing the following, which will create a directory called events_tutorial which will contain two files, events_tutorial.html and events_tutorial.js

bin/lime.py create events_tutorial

I like to create a separate file to store all my event types and the dispatcher so lets start with that file.

Create a new file in the events_tutorial directory and call it events.js and copy/paste in the following.

Closure provides goog.events.EventTarget for dispatching events and listening to them. The documentation blurb writes;

Inherit from this class to give your object the ability to dispatch events. Note that this class provides event sending behaviour, not event receiving behaviour: your object will be able to broadcast events, and other objects will be able to listen for those events using goog.events.listen().

As goog.events.EventTarget provides the ability to dispatch events we just create a new instance instead of inheriting from it which is done on line 6.

To distguish between events we will need to create a subclass from goog.events.Event which is done on lines 8-10. The important part of that code block is the call to the base class on line 9. Make sure you use pass a unique string as this will be the string that will be used to identify the event.

Time to use this event in a new Sprite.

Create a new new file in events_tutorial called coloredsprite.js directory and paste in the following.

Here we create a subclass from lime.Sprite in which the constructor requires the width and height parameters that define it's size. The changeColor method will be the callback method which will be registered in the event listener when the user touches or clicks on the Sprite. This method is straight forward, generate a random number and if it is greater than 128 fire a new instance of our event class we defined in events.js.

Before we move on run the following so that we update our dependencies.

bin/lime.py update

Let us now connect all of this together in events_tutorial.js which will look like the following.

Most of the code above is boiler plate code. We create an instance of Director, Scene and Layer. The getting started guide for LimeJS describes what each of these objects do.

What is important is that we also create an instance of our ColoredSprite class on line 19 and add it to the Layer called target. We than listen to the custom event that is being dispatched on line 24 using the unique string we passed into the call to the base class on line 9 of events.js.

When the event fires we create a Label, add it to target and animate it.

Hope this blog post helped. If you have questions comment on the individual Gist's or send me a tweet bulkanevcimen

Tue 10 May 2011

Export Test Cases From Quality Center Using Python

Here is a Python script that will export out test cases in a folder from Quality Center into a CSV file.

The following script will not handle Attachments. Will work on that later when I have time.

Thu 18 March 2010

Building a Twitter Filter With CherryPy, Redis, and tweetstream

Background

all the code is available at https://github.com/bulkan/queshuns

Since reading this post by Simon Willison I've been interested in Redis and have been following its development. After having a quick play around with Redis I've been looking for a project to work on that uses Redis as a data store. I then came across this blog post by Mirko Froehlich, in which he shows the steps and code to create a Twitter filter using Redis as the datastore and Sinatra as the web app. This blog post will explain how I created queshuns.com in Python and the various listed tools below.

Tools

tweetstream - provides the interface to the Twitter Streaming API
CherryPy - used for handling the web app side, no need for an ORM
Jinja2 - HTML templating
jQuery - for doing the AJAXy stuff and visual effects
redis-py - Python client for Redis
Redis - the "database", look here for the documenation on how to install it

Retrieving tweets

The first thing we need to is retrieve tweets from the Twitter Streaming API. Thankfully there is already a Python module that provides a nice interface called tweetstream. For more information about tweetstream look at the Cheeseshop page for its usage guide.

Here is the code for the filter_daemon.py, which when executed as a script from the command-line will start streaming tweets from Twitter that contain the words "why", "how", "when", "lol", "feeling" and the tweet must end in a question mark.

In this script I define a class, FilterRedis which I use to abstract some methods that will be used by both filter_daemon.py and later by the web app itself.

The important part of this class is the push method, which will push data onto the tail of a Redis list. It also keeps a count of items and when it goes over the threshold of 100 items, it will trim starting from the head and the first 20th elements (or the oldest tweets).

The schema for the tweet data that gets pushed into the Redis list is a dictionary of values that gets jsonified (we can probably use then new Redis hash type);

{ 'id':"the tweet id", 'text':"text of the tweet", 'username':", 'userid':"userid", 'name': "name of the twitter user", 'profile_image_url': "url to profile image", 'received_at':time.time() }

'received_at' is important because we will be using that to find new tweets to display in the web app.

Web App

I picked CherryPy to write the web application, because I wanted to learn it for the future when I need to write a small web frontends that dont need an ORM. Also, CherryPy has a built-in HTTP server that is sufficient for websites with small loads, which I initially used to run queshuns.com it is now being run with mod_python. For templating, I used Jinja2 because its similair in syntax to the Django templating language that I am familiar with.

The following is the code for questions_app.py which is the CherryPy application.

The index (method) of the web app will get the all the tweets from Redis. The other exposed
function is latest which accepts an argument since which is used to get tweets that are newer (since is the latest tweets received_at value). nt is used to create a different URL each time so that IE doesn't cache it. This method returns JSON at.

The templates are located in a directory called templates :)

Here is the template for the root/index of the site; index.jinja

This template will be used to render a list of tweets and also assign the first tweets recieved_at value to a variable on the window object. This is used by the refreshTweets function which will pass it on to /latest in a GET parameter. refreshTweets will try to get new tweets and prepend it to the content div and then slide the latest tweets. This is the template used to render the HTML for the latest tweets;

I explicitly set the the latest div to "display: none" so that I can animate it.

Now we should be able to run questions_daemon.py to start retrieving tweets then start questions_app.py to look at the web app. On your browser go to http://localhost:8080/ and if everything went correctly you should see a list of tweets that update every 10 seconds.

Thats it. Hope this was helpful.

Fri 18 December 2009

Baş Taksım - Bulkan Evcimen - (736 Şeb-i Arus - Avusturalya)