Abstract form

Canvas Intellisense in Visual Studio

Posted in Coding, Internet, JavaScript by Homam Hosseini on February 18, 2010

I was playing with HTML5 Canvas element to see how it could be useful in future web based game developments. I like that it is easier than GDI. I haven’t yet done much performance testing but it is definitely faster than making games by animating DOM elements.

Recently I had some free time so I decided to create vsdoc documention for Canvas element interface for Visual Studio. I added intellisense (auto competition) and some helps and tips.

Download canvas-vsdoc.js and canvas-utils.js from CodePlex.

It is tuned to work with VS2010, but we can make it work with VS2008 too.

canvas-vsdoc.js contains the intellisense documentation.

canvas-utils.js has a few utility functions (like detecting if the browser supports Canvas) and some enumeration types for things like Line Joins, Repeations, Text Aligns, etc.

To use the intellisense you need to reference canvas-vsdoc.js in the beginning of your JavaScript file, like this:

/// <reference path=”canvas-vsdoc.js” />

Note you can just drop the .js file and Visual Studio will write the reference.

Then use a utility method to get a reference to canvas element:

var canvas = Canvas.vsGet(document.getElementById("canvas1"));

Canvas.vsGet(element) receives a HTML element and returns the given element itself if it is in runtime. But in design time it returns Canvas.vsDoc.VSDocCanvasElement object that contains the documentations.

Then you can use the canvas element as usual:

var ctx = canvas.getContext("2d");
ctx.arc(50, 50, 25, 0, Math.PI, true);
…

Please note canvas-vsdoc.js must not be included  in runtime but canvas-utils.js should be included (if you want to use Canvas.vsGet() and other utilities).

In VS2008 you should trick the environment by assigning the variable that refers the 2D context to Canvas.vsDoc.Canvas2dContext, by something like this:

var ctx = canvas.getContext("2d");
if (typeof DESIGN_TIME != "undefined" && DESIGN_TIME)
ctx = Canvas.vsDoc.Canvas2dContext;

DESIGN_TIME global variable is defined inside canvas-vsdoc.js. In runtime it should be undefined or false.

Just a note: if you still want to work in IE, you will find this Google extension very interesting: http://code.google.com/chrome/chromeframe/

Update: Visual Studio 11 natively supports canvas intellisense.

 

 

 

 

 

 

Advertisements

Hollywood Principle

Posted in Coding, Development, Internet, JavaScript by Homam Hosseini on December 7, 2009

Today I was working on refactoring some names in Hyzobox In/Out API. It is my personal favorite piece of code in the whole platform. In summary it allows the publisher of the game to customize the game in runtime dynamically by injecting codes and executing some functions in the context of the game (In) and to get notified about the events that are occurring inside the game (Out).

Inversion of Control is very natural in JavaScript and it has been used extensively in In/Out API. It’s quite different from popular prototype pattern but most everyday JavaScript programmers use IoC even though they don’t usually notice it.

Here is a sample in our API:

We register an event listener in Hyzobox, waiting for landing view of the game to be loaded:

var hb = Hyzobox.createInstance();
var landingview_loaded = function(hbEvent) {
   // do something with hbEvent
}
hb.addEventListener('landingview_loaded', landingview_loaded);

It’s is clear that we don’t have control over when landingview_loaded event will be fired and its handler will be called.

hbEvent argument that is of type Hyzobox.Event has a data attribute that is of type Object. In this example the data is a LandingView instance. We can interact with this object in the event handler:

var landingview_loaded = function(hbEvent) {
   var view = hbEvent.data;
   view.inject('a-container-id', 'some text');
};

In this example we are injecting ‘some text’ to an element identified by ‘a-container-id’ inside landing view.

addEventListener() is part of Out and inject() is part of In API. If we want to listen to the events that are occurring inside a particular view, we should register their halnders after the view has been loaded:

var landingview_loaded = function(hbEvent) {
   var view = hbEvent.data;
   view.attachEventListener('playNow', function playNowHandler(playNowHbEvent) {
       // do something with playNowHbEvent
   });
};

And so on, we can have many nested Ins and Outs.

It’s easy to see that in these examples the control has been transferred to the event handlers. The caller raise the events but it’s the responsibility of the handlers to control the functionalities.

I don’t want to go into the the details now, because the work hasn’t yet been finished on these APIs. Once released, we will post them in Hyzobox documentations and Hyzonia tech blog in the following weeks.

Tagged with: , , ,

Microfinancing, Lending vs donating

Posted in Internet, Me, Politics by Homam Hosseini on November 29, 2009

I want to talk about what the brilliant idea microfinancing is.

I grew up in an Islamic family – however in my childhood they were not as conservative as they are now. It’s a tradition in Iran and I think it is also an Islamic rule to donate some portion of your surplus to poor people; usually the people you know from your work, or in the neighborhood. Currently in Iran there is a well systematic Islamic donation process, and I think people are obliged to donate one fifth of their yearly surplus to this system. And no matter where you are, we are all used to see charities everywhere and in different occasions (like thanks giving or new year). Just a disclaimer that I’m by far not an expert in this area, but I’ve always believed charities are not a solution to poverty, they make it worse, they distribute poverty. They keep poor people poor. If the poor person is jobless, donations don’t help him in getting hired, and if the poor person is receiving a very low wage, the charity doesn’t urge the employer to pay more.

During the past months there were times that I was finding myself dangerously inclined toward social ideas and then I was swinging back to ‘prosperity’ and capitalism. But this issue that you have to always start form some place bigger than zero to have a life in a capitalistic society had been bothering me. Now I think microfinancing is a reasonable solution for this problem.

Why do you want to donate to somebody and loose some money? Why don’t you lend him the money so he can start a business and pay you back? I understand that charities might be vital for some regions of the world, but I’m sure most of the donations that my family is doing in Iran will not be used in those regions.

‘Carlos needs $1,100 to buy some pigs’ he will return the loan in a year, but no bank is lending him, simply because the cost of processing the loan is higher than the profit. But this website: www.kiva.org is making it possible for Carlos to raise the money in a matter of a week. Carlos will not be another homeless beggar, he is starting his own business and his future depends on how hard he works and how well he manages the business. He will not need charity and in a few months he should be able to even hire employees and extend his business.

I was impressed that my like-minded people are among the top lenders of Kiva. Yeah! I think superstitious people have a hard time digesting this idea that they, not God, can help people to stand on their own two feet and overcome poverty. And of course the LGBT community that are helping their entrepreneurs to achieve their own equality.
That’s pretty all I wanted to say, I have something beautiful to think about tonight.

Why make an advergame for Hyzonia?

Posted in Architecture, Business, Coding, Development, Internet by Homam Hosseini on August 14, 2009

We have been working on a few cool features of Hyzonia in the past weeks. Hyzonia is a next generation internet ad service. Like traditional ad services Hyzonia receives advertisements from advertisers and distribute them in websites. But the ad materials in Hyzonia are not in the form of traditional banner or text ads. The ads would be placed inside games, in a way that players would interact and engage with the promoted subjects. This kind of games is being called an advergame. I don’t want to dig into the marketing stuff, but it worths mentioning that one interesting feature of Hyzonia is that it makes it easier for advertisers to utilize the power of advergaming, for less, as Hyzonia is providing a rich set of ready-to-use advergames. Using Hyzonia customers do not need to pay big moneys to interactive software companies to make and host an advergame as part of their online campaign.

We already have built a number of  favorite games, but Hyzonia is extensible by nature, meaning that it is easy to create an advergame for Hyzonia or integrate an already built game into it. Like almost every big web business we know, we found it is crucial for Hyzonia to be extensible and customizable. Hence we spent the last few weeks on making final touches on the first version of our APIs, improving security and testing it all by making sample games.

It’s no myth that most succesful indie developers are game makers. If you have some good ideas, you may find your two-week project shining on the top lists in Xbox Live or Apple Store.

In comparison with those programs, in Hyzonia you will start earning from the moment your game is added in the system. It would be based on a revenue sharing model, so as long as your game is attractive for promoters there would be some campaigns active in some instances of your game and a revenue stream for you. On the other hand contrary to Miniclip or Pogo, Hyzonia is not a single game portal, your game eventually will be displayed in our publishers’ websites. Hyzonia is a service that provides the infrastructure needed for this communication among advertisers, publishers, and developers to happen.

Currently in addition of standard Web Service interfaces we are providing .NET libraries that encapsulate all the basic functionalities that an advergame in Hyzonia platform should support. One exciting news is that you don’t need to make everything from scratch using Hyzonia APIs, but the required functionalities of an advergame in Hyzonia have been designed in a way to make it possible to take virtually any game, wrap it inside a shell (we call Island) and have it added in Hyzonia. The .NET libraries that we are shipping as part of the API have all the functionalities needed by this shell.

Because of its service oriented architecture, Hyzonia advergames (Islands) could be anywhere in the internet. But currently we are only activating the games that have been hosted physically in our datacenters, although exactly like a banner ad (hosted let’s say by DoubleClick) they could be displayed on other websites.

Obviously not any game can be converted into an advergame. This is another issue that we are adderssing it in the guidelines that will be released alongside the APIs.

A thousand words: Hyzonia connects developers, advertisers and websites.

Don’t put comments at the first line of a HTML document

Posted in Company, Internet by Homam Hosseini on June 27, 2009

Here’s a funny problem we faced:

When Lionel, a graphic designer in the company, added new graphics to a page of the website he noticed that there’s something terribly wrong in IE. All the contents of the page had been aligned left, and the layout has been disturbed. The diagnostic process was straightforward, because all the other pages were working properly before, we started removing the contents of this new page, to find what exactly caused the problem.

After the page’s been nearly totally robbed, and we didn’t find a clue, we noticed the only difference between it and other pages was that this page had a comment line automatically being generated at the first line. So that’s it, don’t put any comment before the declaration in HTML.

This is what happens when you have a comment in the first line

This is what happens when you have a comment in the first line

The fate of Iran is linked to Twitter

Posted in Internet by Homam Hosseini on June 21, 2009

I know it may seem rude for Iranians but it’s funny and true.

“The fate of Iran, is strangely entwined with the sleep schedules of the geeks that maintain the servers at Twitter and YouTube” – Hodgman (aka the PC)

Tagged with: , , ,

How to use cursors in web pages, painless

Posted in Coding, Development, Internet by Homam Hosseini on June 14, 2009

The shortcoming of current edition of HTML and the whole technologies we build the user interface of our websites on is no secret. Here is an example: If you want to put a custom cursor on an element use this markup:

element { cursor: url('pointer.cur'), default }

I know you may think custom cursors are not being supported in FireFox, but it’s not the case if you append a ‘, default’ (or any other standard CSS cursor value instead ‘default’).

If you are looking for a painless software to create mouse cursors, we fond AniTuner easy and useful. Don’t get it wrong it can be easily used to create static .cur files that can be displayed in major browsers.

Generally as a user experience point of view, it is not a good idea to have custom cursors  in web pages, but when you are developing an online game, a smart use of cursors can make it simply more attractive.

JQuery Wingooli Photo Gallery

Posted in Coding, Development, Internet by Homam Hosseini on May 10, 2009

I just want to introduce a JQuery photo gallery plugin I developed fro my profile. My main motivation for building this plugin was that I wanted it to be search engine friendly therefore I needed a clear separation between the photo gallery functionalists and the data describing the photos and the gallery. It is something that is easy to achieve using JQuery.

BTW these days I spend a part of my time discussing and teaching OOP JavaScript to our fellow programmers in RENA. It’s interesting for me to discuss the somewhat weird features of JavaScript for these guys who are already well experiencedand talented .NET developers. I try my best to convince them JavaScript is so fun when you get used to it, so fun and so powerful that you end up you want to kiss all the ASP.NET AJAX and UI functionalists a goodbye and develop the effects yourself and see how much you can improve the performance and the branding of your application.

We in RENA are looking for a Web UI Developer to handle such those tasks, it came out to be a very hard job finding a person for this position, mainly because it requires you to be a JavaScript God! to pass the first step in the recruitment process. Drop us a message if you fit the position.

Tagged with: ,

PR

Posted in Internet by Homam Hosseini on December 13, 2008

Computer world is full of acronyms. But this one is not ours. It is nearly three months that we are searching for a decent PR company to handle our rapports with the public.

I have not been involved in the talks, but since I heard the first buzz in the company I became sensitive on press releases and other PR jobs. Recently I noticed how Facebook publishes small interesting stories about how users use it in the bad way or how and where their system leaks. This is the most recent one: http://www.latimes.com/business/la-fi-facebook13-2008dec13,0,7506669.story

Tagged with: ,