Not Now Nigel

LINQ to SQL Dynamic Stored Procedures

2012-01-27T18:15:00.001Z

[Concrete/Little bit interesting] I wanted to call stored procedures by name using a string parameter. Sounds simple and with ADO it's a breeze. But with LINQ to SQL, life is a little more complicated. Here is how I cracked the problem.

LINQ to SQL

In Visual Studio, when you add LINQ to SQL Classes to you project, you are creating a class that provides a convenient set of classes for managing tables, views, functions and stored procedures:

When you add LINQ to SQL Classes to your project, Visual Studio creates a .DBML file set. These files describe the managed entities with partial class definitions. The main class is derived from System.Data.Linq.DataContext and provides the link between your code and the database connection. LINQ to SQL works through defining class members that maps LINQ onto the entity and makes use of attributes to map columns, parameters and returns to .Net classes.

LINQ to SQL Classes takes a lot of code out of your application and is easy to use. For example, to call a stored procedure, simply open the .DBML, drag a stored procedure from a data connection on the Server Explorer or Toolbox over onto the Object Relational Designer: this creates the class entries that maps the entity onto LINQ, then from your code, call the stored procedure as shown below:

using (CatalogueDataContext db = new CatalogueDataContext())    
{
     db.usp_Biometrics_Update_OperatorFingerprint(input.OperatorId, input.Fingerprint, false);
}

In the above example, I’m calling the stored procedure usp_Biometrics_Update_OperatorFingerprint which is defined in a database called Catalogue, LINQ to SQL provides me with the data context on which the stored procedures are defined. All I need to do us use an instance of CatalogueDataContext and from this, call the stored procedure. Because it’s all about classes, Visual Studio can help me with the parameters and returns through Intellisense.

The Problem

Under most circumstances calling a stored procedure as described above is sufficient. But there are times when you need to call a stored procedure by name, not by class method. Say for example you have a bunch of stored procedures called:

usp_get_TableName_As_XML

where TableName is a name of a table, any table. The implementation of this stored procedure for any given named table may be complex, for example, they may include selecting output from child tables where foreign key are present. So in this example, a table called Customer may return the following XML:

<rows>
    <row>
        <customerId>1</customerId>
        <customerName>Nigel</customerName>
        <addresses>
            <address>First Postal Address<address>
            <address>Second Postal Address<address>
        </addresses>
    </row>
</rows>

So for each row of Customer data, there may be multiple address rows.

For another table called Car the data is simpler:

<rows>
    <row>
        <registration>AAAAAAA</registration>
        <make>Chrysler</make>
        <model>Grand Voyager</model>
    </row>
</rows>

So for each table, I need a specific stored procedure that returns table data as XML. Each one of these stored procedure returns the XML data as an output parameter and all the stored procedures have the same signature. Below is an illustration of the stored procedure for the table Car:

Create Procedure usp_get_Car_As_XML
    @xml XML OUTPUT
AS
BEGIN
    SET NOCOUNT ON

    set @xml = (
        Select
            registration, make, model
        From
            Car
    )
    For XML RAW('row'), Root('rows'))

    Return @@Error
END

So the problem is, from code, how do I call the stored procedure for a given table name, returning the XML representation of that table?

The Solution

Well of course I could use some sort of if…elseif… or big switch statement. This will work but I’m not keen on big switch statements. What I really want is to call the stored procedure by name. Fortunately, we can use .Net reflection to find the method in the data context and execute this method:

using (CatalogueDataContextEx db = new CatalogueDataContextEx())
{
    XElement xml = null;
    String script = String.Format("usp_get_{0}_As_XML", tableName);
    db.CallScriptByName(script, ref xml);
    
    //handle the results in xml variable
}

Notice that in this example, the data context is called CatalogueDataContextEx. This is a derived class based on CatalogueDataContext and implements the CallScriptByName() method:

public partial class CatalogueDataContextEx : CatalogueDataContext
{
    public void CallScriptByName(String script, ref XElement xml)
    {
        var sp = typeof(CatalogueDataContext).GetMethod(script);
        var result = this.ExecuteMethodCall(this, sp, xml);
        xml = (XElement)result.GetParameterValue(0);
    }
}

So what is going on here?

In my derived class I have access to all public and protected methods of the data context. This is important as I want to call the ExecuteMethodCall() method on the class, which is protected.

I’m using reflection to get a reference to the stored procedure by name, This is then executed using the ExecuteMethodCall. This call takes a list of the parameters to this stored procedure. In our case, there is only a single output parameter for the XML.

Once the call is made, the results are passed back in a IExecuteResult return parameter. This return can be used to access the call’s parameters, in our case the xml output parameter.

And that’s it.

Future Improvements

This implementation is not completely dynamic. Specifically, the CatalogueDataContext must have definitions for the stored procedures I’m going to call. A better implementation would use a generic data context and build up the method to call.

Using IActiveAware and INavigationAware

2011-09-21T16:29:00.001+01:00

[Concrete/Little bit interesting] The Microsoft Prism framework provides a couple of very useful interfaces for managing awareness of view activation and navigation.

IActiveAware

IActiveAware is a simple interface you can implement on your views to indicate that you want the view to be notified when it is made active or inactive. It looks like this:

public interface IActiveAware
{
    /// <summary>
    /// Gets or sets a value indicating whether the object is active.
    /// </summary>
    /// <value><see langword="true" /> if the object is active; otherwise <see langword="false" />.</value>
    bool IsActive { get; set; }

    /// <summary>
    /// Notifies that the value for <see cref="IsActive"/> property has changed.
    /// </summary>
    event EventHandler IsActiveChanged;
}

The IsActive flag lets you know if your view is active, and the IsActiveChanged event will fire when that state changes.

If you implement this on your view class, then you need to ensure the event gets fired when the state is changed by the region behaviour. You do this by adding the IActiveAware interface to your View-Model:

public class LoginViewModel : NotificationObject, IActiveAware, INavigationAware
{ 
}

An example of the implemented interface is shown here:

#region ViewModel activation
private bool _IsActive = false;
public bool IsActive
{
    get
    {
        return _IsActive;
    }
    set
    {
        _IsActive = value;
        if (value)
            OnActivate();
        else
            OnDeactivate();
    }
}

public event EventHandler IsActiveChanged;
#endregion

In the above example I use the changing state of IsActive to trigger the private methods OnActivate() and OnDeactivate(). These methods are thus called when the view active state changes.

IActiveAware Example - Managing Devices

A good example of the use of IActiveAware is the subscription to an control of devices. We use event aggregation to interface with physical devices, that is, we subscribe to device notifications. The simplest scheme is to subscribe to all the device events in the View-Model constructor:

//Subscribe to device events
eventAggregator.GetEvent<MagneticStripeReaderEvent>().Subscribe(MagneticStripeReaderInputReceived);
eventAggregator.GetEvent<ScannerEvent>().Subscribe(ScannerInputReceived);

Of course, this means that the View-Model will be called back on device events during the entire lifetime of the module housing the View-Model and the associated views.

To ensure you only act on the device events when your view is the active view, simply use the IsActive property appropriately in the event callback:

private void ScannerInputReceived(ScannerEventParameter param)
{
    //Handle input if active and OperatorId has focus
    if (IsActive == false || OperatorHasFocus == false)
        return;

    if (!string.IsNullOrEmpty(param.Barcode))
    {
        OperatorId = param.Barcode;
        ValidateLoginInput(false, null);
    }
    else
    {
        ProgressMessage = Resources.Message_InvalidInput;
    }
}

OnActivate() and OnDeactivate()

These methods when implemented should be used to handle the View-Model initialisation and termination state. For example, in a Login screen, during OnActivate(), the View-Model should initialise the various entry fields and properties used to control the view:

private void OnActivate()
{
    eventAggregator.GetEvent<ChangeTitleEvent>().Publish(Properties.Resources.Title_Login);
    ProgressMessage = String.Empty;
    ChangingPassword = false;
    NewBiometricEntry = false;
    LoginWithPassword = configurationManager.GetBool(ConfigurationNames.LoginWithPassword);
    ResetOperatorPassword();

    LogoutCurrentOperator();
}

Here we are setting the title through a published event, clearing the progress message, clearing some flags (used to control the visibility state of page elements), resetting the OperatorId and Password and ensuring we are logged off. These operations will be performed every time a view in this module is activated.

IActiveAware Limitations and INavigationAware

Responding to IActiveAware works fine in a module that supports a single view. In this scenario, the View-Model activation is one-to-one with the View activation. However, if there are more than one view associated with a View-Model, you will have to implement INotificationAware:

public interface INavigationAware
{
    bool IsNavigationTarget(NavigationContext navigationContext);
    void OnNavigatedFrom(NavigationContext navigationContext);
    void OnNavigatedTo(NavigationContext navigationContext);
}

This interface when implemented provides callbacks to handle the navigationContext switch in the form of OnNavigatedFrom() and OnNavigatedTo(). A typical implementation here is to keep a copy of the navigationContext passed to the OnNavigatedTo(). This can be used later to perform view-to-view navigation:

#region Navigation Aware for view switching in this module
private IRegionNavigationService navigationService;

public bool IsNavigationTarget(NavigationContext navigationContext)
{
    return true;
}

public void OnNavigatedFrom(NavigationContext navigationContext)
{
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
   navigationService = navigationContext.NavigationService;
}
#endregion

and to perform view-to-view navigation (for example, Go Back):

private void onGoBackHandler()
{
    if (navigationService.Journal.CanGoBack)
    {
       navigationService.Journal.GoBack();
    }
}

Note that in the above implementation of the interface we are returning true from the IsNavigationTarget() method. This method is called by the framework to determine if the current views should be reused for the navigation target. Returning true indicated the views should be reused. Since we pre-create all our views, you should return true.

This is a test Article on the blog

2011-09-08T13:50:00.001+01:00

[Concrete/Interesting]

Here is a picture

Like it?

Actually, this is a test for using Windows Live Writer to publish to SharePoint Wiki. Which sounds easy, but you guessed it, it’s not.

I’ll let you know how I get on.

Frankly, it’s all rather disappointing. I guess someone at Microsoft, looking to make SharePoint a little more useful thought “well it’s good at lists and HTML docs, if you add a template with an on-page editor, hey presto, you’ve got a Wiki”. Only, it’s not that simple and the editor is far too lightweight.

Windows Live Write (WLW) on the other hand is a well thought out, powerful tool. Clearly the best Blog editor in my mind. It’s the reason I have a Windows VM on my Mac.

So I gave it a go and WLW doesn’t want to talk to the Wiki because it’s not a blog, doesn’t support the APIs, just a list with an editor.

However, it was suggested that I could author my pages against my SharePoint blog. Great. It worked brilliantly. WLW talks to SharePoint blogs and does an excellent job of it.

Once published, all you have to do is open the blog in SharePoint for editing, copy the raw HTML and paste it to the Wiki.

It works, but it’s far from perfect

The main advantage of this is the editor in WLW. It’s excellent, support plug-in for styles, adopts site templates. I’m using it now and what I type is what I will see on the blog site.

A very useful benefit of this approach is image publishing. It’s a royal pain in the arse when editing on the SharePoint Wiki. Using this method, images are published to my blog and can be referenced in the Wiki without need to upload anything or mess around.

But the main problem is I’m publishing to a blog and have a second copy in the Wiki. I may even have a third local copy on my Mac saved by WLW. These copies can easily get out of step.

Worse still, the images are associated with a my blog and my account, not the Wiki. If my account gets deleted, I guess these resources will disappear.

Finally, the point of a Wiki is that the documents are live and through collaboration, the Wiki will change over time. So my copy on my blog is very likely to be out of step. This could result in changes being lost as the WLW view of the document is that of the blog, not the Wiki.

You could of course create a shared blog and keep this as the master document site. I thought of this and it occurred to me that if I was to do this, I might as well try to use that as my Wiki. Well that made the whole exercise seem pointless.

Improved on-page Editing

You can of course change the Wiki template to use a more advanced editor. This is a very satisfactory solution. One of the recommended ones is the Telerik RadEditor that can be integrated into SharePoint 2010:

http://www.telerik.com/help/aspnet-ajax/moss-installing_radeditor__radgrid_web_parts_on_sharepoint_2010.html

Problem is, it cost about $800. And I’ve already spent half that purchasing a better Forum web part because the out of the box solution from Microsoft is just rubbish. Starting to sound like throwing good money after bad,

Microsoft SharePoint Designer 2010

Ok, time to bring the big guns out. I’m only trying to update pages on the Wiki!

Well, this is a powerful tool. It’s also typical of the development/management tools from Microsoft. Yes, I can edit the Wiki, but it’s not easy. Ultimately, this tool provides a Visual Studio / Microsoft Expression type of view on the site and site document. Not really what you want.

Conclusion

I’ll keep looking for a better solution to editing on-page in SharePoint. Maybe Microsoft will provide a link between WLW and SharePoint Wiki.

However, until a solution is found, the SharePoint Wiki experience will be very disappointing.

Given that for a Wiki, the ease of authoring and content creation is as important as the content itself, you might just decide that SharePoint doesn’t even qualify as a Wiki.

Fermat’s Last Theorem

2011-05-30T00:58:00.001+01:00

[Concrete/Interesting] A while back I saw a BBC Horizon programme about Fermat’s Last Theorem and the mathematically heroic work by Andrew Wiles in raising the Taniyama-Shimura conjecture from a mere conjecture to a theorem and using this to show a contradiction between the predictions of the epsilon conjecture and Wiles’ proof that all such elliptic curves must be modular. This contraction implies there are no solutions to Fermat’s equation, hence Fermat’s equation is true.

Like many, I was excited about this proof and although difficult to follow (Elliptic Curves are hard to understand, no kidding), the proof was without a doubt a clever piece of late 20th century mathematical wizardry, full of deep insight and imagination.

But something was wrong. It was all to clever, all too complex, all to contemporary. So to mark the birth of my new baby boy, Khaliq, I decided to provide a simple proof, maybe not complete in mathematical rigor and probably nowhere near robust enough for Cambridge Mathematics, possibly not even correct, but something I think 17th century mathematicians would have found interesting. See what you think.

To my son, Khaliq George Mahmood, born 26th May at 11.24pm (7lb, 12oz). Hope you find life as fascinating as I have.

Fermat’s conjecture is so tidy, so elegant and simply described as:

That is to say, for all integers, except 2, the equation has no non-zero integer solutions. For 2, where we square x and y, the sum of the squares of x and y is equal to the square of z

For n = 2, this may be familiar to some of you, and is known as The theorem of Pythagoras. Pythagoras, mathematician, philosopher and scientist, provided a proof for his equation based on logic and simple geometry. In fact, the equation was known to many at the time, but is was the application of mathematical rigor that gave Pythagoras the title over the equation.

It is from the relationship between the equation and a right angle triangle that I will start my ‘proof’’.

Mathematical Rigor and Proof

Mathematics is complicated, at least for the majority of us.I don’t want to pretend I am a mathematician or blessed with anything but a cursory level of competence in mathematics.

For a proof to stand on it’s own two legs it must be a convincing argument and this must be based on deductive reasoning which shows a statement to be true in all cases. Ok, so I don’t think I’m going to be able to do that. But I hope I can present an somewhat unproven proposition that I believe to be true – that, at least is a conjecture, and is something others may be able to prove.

So away with the shackles of mathematical rigor, eyes down for what I hope is an interesting conjecture:

Not Now Nigel’s Conjecture

Above n=2 where n is the geometric dimension, there are no simple object with 3 ‘flat’ boundaries.

By way of explanation, for n=2, the equation maps to a 2 dimensional polygon with three flat or straight line boundaries, commonly known as a Triangle:

But for higher dimensions, there are no object with 3 ‘flat’ sides. For example, for 3 dimensions, there is no polyhedron with 3 planar surfaces. The nearest is something like a Tetrahedron with 4 sides.

In proving this conjecture and in saying that Fermat’s equation is represented by this geometry, there lies a simple proof to Fermat’s Last Theorem. Q.E.D.

Carving Rings

2010-12-25T16:31:00.001Z

[Abstract/ Sharing] To close off 2010, I’m posting an article on how to carve a pair of linked rings from a single block of wood. It’s very simple so if you have a chance, why not have a go yourself.

This post is dedicated to the memory of Julian Guy Tulloch, who died peacefully on the 12th December 2010, aged 78.

Julian first introduced me to carving.

We start with a small block of wood, 5cm by 5cm by 10cm. The exact dimensions are not too important, you just want a block of wood that is rectangular in nature with a square end:

I’m using Tilia or Basswood which is good for carving – not too dense and very little grain. You can find this type of wood at craft shops, often described as ‘Carving Blocks’.

Extruded Cross

The first step is to mark out an extruded cross using a pencil:

I made the cross 1cm wide. The cross is drawn on the two square ends of the block of wood and joined up over the length of the block. Note, the extruded cross is the shaded area on the diagram.

Now, using a small Tenon Saw, you should remove the four corner pieces. These are the un-shaded areas in the diagram above. This should leave the extruded cross:

Notice that I don’t cut right up to the line. I leave a little margin for error when using the saw. To finish off the extruded cross, I use a carving/milling tip on my Dremel hand tool:

So far, so good. Now for a little vacuuming!

Overlapping Discs

Next we need to transform our extruded cross into two overlapping discs. The discs are inside the cross, you can see them on the diagram below:

Because my cross was 5cm across the face, the discs are 5cm in diameter:

The important bit is the overlap. One disc needs to overlap the other. There needs to be sufficient overlap to carve out the rings, one from each disc. I have decided to have each disc overlap half way through the other disc.

Again, I will use my Tenon Saw to cut away the excess wood. First step is to remove two end pieces – ‘A’ and ‘B’ on the diagram below:

On the carving, the areas to remove are shown marked A and B:

After cutting away the wood with the saw we have the following:

Now we have to remove the rest of the excess wood. In the diagram below, this is marked ‘C’, ‘D’ and ‘E’:

‘C’ is a complete bit of the extruded cross and we remove this using the saw:

Can you see the two overlapping discs yet?

Ok, now remove the little pieces ‘D’ and ‘E’. This is the same as ‘A’ and ‘B’. Look, two overlapped blocks:

It is worth marking out the discs and removing the excess wood to reveal the discs. First, mark out the discs with a pencil. I’m draw these by hand:

Then remove the excess wood. I’ve used my Dremel for this but carving chisels or even sanding will work. And now we have two interlinked discs:

Again, let’s tidy up.

Finding the Rings

My discs are 1cm wide. Because of this, my rings are going to be roughly 1cm in diameter before any sanding.

At this point the rings are embedded in the edge of the discs. We need to define the rings by removing the centre of the discs. We are going to do this in two steps. The first step is to clear the majority of the centre of each disc. We will still be left with ring connected together. The second step is to finally free the rings.

For each disc we want to remove the shaded area ‘A’ from as shown in the diagram below:

You must be very careful not to remove any of the ring or any of the second ring. The result should look like this:

OUCH!!! I cut my hand – be careful.

Ok, tricky bit coming up so time to tidy up and have a rest.

Tricky Bit – Free the Rings

This bit is a little tricky and can go badly wrong. If you remove too much wood, you may break the rings. The two rings are joined, but only by a small wall of wood. Take a close look at the rings and you can make this out.

The process for removing this wall and separating the rings is a little hard to describe but I will give it a go:

In the diagram above I’m looking down on one of the rings. There are four points on the top surface that need to be chiselled – ‘A’, ‘B’, ‘C’ and ‘D’ Similarly, from the bottom side of this ring, there are four more points – ‘E’, ‘F’, ‘G’ and ‘H’.

Notice that these 8 points are the 8 corners of a cube. Not a normal cube with straight sides, rather one with concave sides:

Try to see this in the rings before you start to carve. You want to chisel into these eight points as evenly as possible and when chiselling, you need to chisel diagonally towards the centre of the cube. Bit, by bit you have to remove the cube from the corners, outside to the centre. When the cube has been chiselled away, the rings will magically free:

Remember, don’t rush it and it should work.

Another tidy up.

Last step – Sanding and Varnish

To complete the rings, you need to sand away excess wood to reveal the rings. You can sand away until you are happy with the results. Again, be careful as you don’t want to spoil the rings at this stage. Once you have sanded to reveal the rings, you need to varnish the rings.

The trick with varnishing is to apply a coat, then sand away the coat. Then repeat. The more times you repeat this, the harder the finish.

Here are my rings, not yet varnished but fully revealed:

And after Varnishing

After more than 15 repeated varnish and sanding cycles, here is the finished article. Very hard finish with the wood grain showing through like Tiger Stone:

I’m very pleased with the results

Have fun and Happy New Year.

WCF Self Hosted Duplex Service for Chubby Client

2010-09-24T01:30:00.003+01:00

[Concrete/Interesting] I received an email from a friend of mine. He was trying to build a Chubby Client, following some of the ideas I put down in my previous article. What was needed in this case was a Duplex Service that send data back from a thread outside of the main thread. My friend sent me his code and declared it couldn’t be done.

That sounded like a ‘dare’ to me, so I thought I’d have a go.

In this article I will take you through some of the major steps and discuss the overall architecture and solution. If you want the code, I've published this to Google Code so feel free to download and take a look: http://deviceservices.googlecode.com

The Goal

The main goal was to develop a device service that can be called from a Silverlight in or out of browser client. The device service would have initialization and action methods similar to those supported by an Windows OPOS device such as a scanner, printer, cash draw, customer display or MSR. For more details about Microsoft OPOS and POS device support, see Microsoft POS for .NET Overview

The full implementation is a chubby client with a Silverlight browser client capable of running in or out of browser. This client would be launched from a console or service based service host. The host provides all application and devices services for the client through WCF Duplex Services. Within the host, the device services are responsible for abstracting and supporting the OPOS devices, application services provide APIs to application functions and databases:

Duplex Services

The key problem we need to address is handling asynchronous events at the service. Why? Well we want to build a Silverlight client. We want this because we may want to run in a thin client configuration with the client hosted in a browser calling network or web services. For the application services, a normal one way web service or REST service would be fine. The client would simply call the service and the service would return data. But there are some application services where asynchronous events are a better way forward. Take notifications in workflow as an example. Here you don’t want to hold up the client and wait for the service to notify you of a state change. This state change could come at any time. Another example is large list data. You don’t want to call and have returned back all the data to the client and bound to some UI element. The data transfers could be huge and the client would be required to hold all this data.

Now considering the support of devices in our service, we again need to think about an asynchronous notification architecture as we request an action at the device such as ‘Scan when a barcode is available’ and a some time in the future, when a barcode is presented to the scanner, the device wants to tell us ‘here is a barcode I just scanned’. A further complication here is that the event notifications are typically not raised in the same thread as that used to handle the client request.

In ASP.Net we would look towards AJAX to solve these problems. In the world of services, we need to implement Duplex or dual channel services. The diagram below illustrates this for a service supporting a POS scanner:

WCF Duplex Services allow us to define a client callback contract again the service contract. What this means is the client exchanges a service contract with the service; this allows the service to notify the client of service events.

Duplex Service Options

WCF provides a number of ways to implement duplex services against Silverlight 4 clients:

HTTP Polling Duplex Service

This is the one I’ll be looking at in more detail. It is suitable for Chubby Clients, however it doesn’t scale out client connections well and has trouble working across network boundaries. However, out of the box, this is the simplest duplex service to code and support in in a client.

Duplex Service using Sockets

You can also use private sockets to set up a duplex channel between Silverlight and the service. Very fast, scales well but only works on a limited range of ports (Silverlight sandbox restriction) and a lot of code needs to be hand forged both service and client side.

Duplex Service with Net.TCP Bindings

Ultimately, this is the best balance between non-functional like scalability, performance and network awareness. However, the code is more involved so I won’t be illustrating it here.

Proof of Concept

In the proof of concept, focus is given to the Device abstraction layer and support for events raised back to the client. These events would normally be raised outside of the main thread and the purpose of the proof of concept is to illustrate this can be done in a chubby Silverlight-WCF architecture. For this, I’m going to use a System.Threading.Timer to raise the client notifications.

To keep things simple, the implementation will also restrict itself to one client pre-service. Finally, no work will be done to provide application services or actual integration with Microsoft OPOS. I will leave that as an exercise for the reader.

Self Hosted Service

I’ll be honest, I like to see how things work, at least I do the first few times I do something.

Self Hosted WCF services let you get into the details as you have to write the service, not press a few buttons on a wizard.

Also, a self hosted service, all the bindings and endpoint behaviours are down to you. You have to code it rather than define it is a CONFIG file.

Lastly, we are building a console application so there is full control over the running, debugging and management of the application.

Of course, for a production system you may consider IIS hosted. This will provide the best performance and scalability and ease of deployment.

For chubby clients, self-hosted, either as console or service probably remains the choice solution as you need to package and deploy service and client together and for each service, there is likely to be only one client.

The Host

As ever, the host is simplicity itself:

class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("Starting WCF Host for DuplexDeviceEvent...");
        string baseAddress = "http://localhost:8000";
        DeviceEventRunner runner = new DeviceEventRunner();

        using (ServiceHost host = new ServiceHost(typeof(DeviceEventService), new Uri(baseAddress)))
        {
            host.AddServiceEndpoint(typeof(IPolicyRetriever), new WebHttpBinding(), "").Behaviors.Add(new WebHttpBehavior());
            host.AddServiceEndpoint(typeof(IDeviceEventService), new PollingDuplexHttpBinding(), "DeviceEventService");

            ServiceMetadataBehavior smb = new ServiceMetadataBehavior();
            smb.HttpGetEnabled = true;
            smb.MetadataExporter.PolicyVersion = PolicyVersion.Policy15;
            host.Description.Behaviors.Add(smb);
            host.Open();

            Console.WriteLine("WCF Host Running...");
            Console.WriteLine("Press  to shutdown");
            Console.ReadLine();

            host.Close();
        }
    }
}

All that’s going on here is a service host is being initialized and run. Since we are calling this host from Silverlight we need to ensure there is a default Policy available. Beyond that, we are creating an endpoint for the service that follows the PollingDuplexHTTPBinding protocol.

ServiceMetadataBehaviour

As a side note, this little bit of code enables the service to publish itself. This is very useful as it will allow us to create a service reference in our client.

Device Runner

You will see a static object defined in the programs main method. This is the device runner that will simulate the device events. The code behind this class simply starts a System.Threading.Timer. In the timer’s callback, if a client is connected, the callback event for the service is executed:

private static void updateClient(Object stateinfo)
{
    try
    {
        if (theClient != null)
        {
            Console.WriteLine("Updating Client {0}", clientId);
            DeviceEventData eventData = new DeviceEventData();
            eventData.message = "Test Data";
            eventData.timestamp = DateTime.Now;
            theClient.SendDeviceEventData(eventData);
        }
    }
    catch (CommunicationException ex)
    {
        //client error so dispose of client
        Console.WriteLine("Client Error: {0}", ex.Message);
        Console.WriteLine("Closing connection to client {0}", clientId);
        theClient = null;
        clientId = String.Empty;
    }
}

public static void Register(IDeviceEventServiceClient client, string id)
{
    theClient = client;
    clientId = id;
    Console.WriteLine("Client {0} registered.", id);
}

The service runner is also responsible for accepting the client registration through the Connect interface.

Notice that exceptions can be raised during the callback processing. The main exception is a failure to reach the client during callback, typically because the client has gone. This is picked up as a CommunicationException. In this implementation the service runner simply removed its reference to the client.

Service Contracts and Implementation

When we define the service contract we also name the callback contract. This is defined in the interface for the service:

[ServiceContract(Namespace = "Silverlight", CallbackContract = typeof(IDeviceEventServiceClient))]
public interface IDeviceEventService
{
    [OperationContract(IsOneWay = true)]
    void Connect(string id);
}

[ServiceContract]
public interface IDeviceEventServiceClient
{
    [OperationContract(IsOneWay = true)]
    void SendDeviceEventData(DeviceEventData data);
}

Two things happen when the client connects. First, a callback interface is created against the callback channel. This callback interface is then passed to the service runner where is is remembered and used during the service callback processing.

Callback data

In this example, the callback to the client is responsible for sending data back to the client for display. In this case, the data is a timestamp identifying when the event was fired and some test data. This is packed into a data structure called DeviceEventData

public class DeviceEventData
{
    public DateTime timestamp { get; set; }
    public string message{ get; set; }
}

...

DeviceEventData eventData = new DeviceEventData();
eventData.message = "Test Data";
eventData.timestamp = DateTime.Now;
theClient.SendDeviceEventData(eventData);

To get this data to the client, all that we need to do is create a data object, initialize it and pass the data as a parameter in the service callback interface.

Building a test client

Silverlight 4 really does make life easy, even when talking to duplex services. The key to this is to create a service reference.

The service reference takes care of all the low level stuff, including handling all asynchronous aspects of the relationship between the client and service.

Once we have a service reference, we can hook up to the service and service callback:

public partial class MainPage : UserControl
{
    ObservableCollection eventData;

    public MainPage()
    {
        InitializeComponent();

        eventData = new ObservableCollection();

        EndpointAddress address = new EndpointAddress("http://localhost:8000/DeviceEventService");

        CustomBinding binding = new CustomBinding(
            new PollingDuplexBindingElement(),
            new BinaryMessageEncodingBindingElement(),
            new HttpTransportBindingElement());

        DeviceEventService.DeviceEventServiceClient client = new DeviceEventService.DeviceEventServiceClient(binding, address);
        client.SendDeviceEventDataReceived += new EventHandler(client_SendDeviceEventReceived);
        client.ConnectAsync(Guid.NewGuid().ToString());
        EventListBox.ItemsSource = eventData;
    }

    void client_SendDeviceEventReceived(object sender, DeviceEventService.SendDeviceEventDataReceivedEventArgs e)
    {
        if (!eventData.Contains(e.data))
        {
            eventData.Add(e.data);
        }
    }
}

As you can see, the client is creating an ObservableCollection to hold the event data returned by the service callback. Next, the client connects up to the service endpoint, creates an implementation object for the service and initializes this object. Initialization means:

Associating the object with the endpoint binding,
Setting up a delegate to process the callback event and
Call the Connect service method. Note this call has an asynchronous implementation.

Note that the event data ObservableCollection is then bound to the clients visual component, in this case a ListBox.

Now when the callback delegate is fired, all that we need to do is add the event data to the ObservableCollection, and because this collection is observable, the ListBox is told about it.

In the XAML, the listbox binds the data to the list items:

<ListBox Grid.Row="1" x:Name="EventListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Width="770">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="1" Text="{Binding timestamp}"></TextBlock>
                <TextBlock Grid.Column="1" Text="{Binding message}" FontWeight="Bold" Foreground="Red" HorizontalAlignment="Right"></TextBlock>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

and hey presto…

Wow, that was easy, Silverlight 4 seems to be doing all the work!

Conclusion

As you can see, its easy to build duplex service under WCF. What’s more, Silverlight 4 is well matched to this technology, providing simple binding against the callback event.

Chubby RESTful Clients using Silverlight and WCF

2010-08-21T19:54:00.001+01:00

[Concrete/Interesting] Many years ago I was working on a project. We needed a application that worked in a browser but everything came from the local machine. Later I started to notice devices like Routers that had a web interface…just connect using HTTP to the device IP address and there you are.

I used a similar technique in my Ghostfiles Service application (http://www.lowrieweb.com/ghostfiles.htm).

Chubby Client Architecture

Ghostfiles is a Windows Service Application that runs as a lightweight HTTP server on a private HTTP port. If you point your browser at it, the service returns back application pages. It’s just like having Apache or IIS running, only lightweight with only the pages of the application supported. This is what I called a Chubby Client, a thin client interface delivered to a browser by a local web and application server.

The basic architecture used in Ghostfiles is shown here:

Page requests (GET/PUT) from the browser are handled by the light HTTP Web Server. This directs the calls to Page Service.

Page Services are responsible for mapping the request against a template page. The template defines the basic HTML resources associated with this request. The template can contain standard mark-up as well as JavaScript.

So far so good. The template may also contain meta-tags that are interpreted by the meta-tag handler. This sub-system is responsible for mapping the tags to calls down to the business services. So for example, a table on the page is defined by a meta-tag, <APP:DoSomething></APP:DoSomething>. This maps to a business function DoSomething();

Looks familiar – well it’s very similar to PHP or old style ASP in how it works. And it works well from an application and UI point of view. However, the code is hard to maintain, adding new user interfaces is an effort and the implementation is limited to HTML and JavaScript, so not an ideal platform going forward.

Chubby Client Grows Up

.Net provides us with a way to take the Chubby Client into the realm of Rich Internet Applications (RIA). To achieve this we need to look at two core technologies, Silverlight Out Of Browser Clients and Self Hosted WCF:

WCF Self Hosting

Windows Communication Foundation is a well balanced communication framework. One feature of WCF is the range of hosting options. A couple of these allow us to deploy a service implementation without the overhead of IIS. WCF Self Hosting enables us to deploy communication services fully encapsulated as a standalone executable or if preferred, Windows Service Application.

I’m going to focus on RESTful web services for HTTP JSON clients. For the purpose of this blog, I’m going to create a Console based REST service that exposes one simple interface called Colour:

URI:	http://localhost:8000/Chubby/Colour
MIME:	application/json
HTTP Method:	GET

The response to this call is a random colour reference in the form of:

{ “Colour” : “#FFRRGGBB” }

The steps to create the service are very easy under Visual Studio 2010:

Step 1

Create a new project based on a C# Console Application:

Next add references to System.ServiceModel, System.ServiceModel.Web and System.Runtime.Serialization to the console application and add the following statements to the top of your Program.cs file:

using System.ServiceModel;
using System.ServiceModel.Web;
using System.ServiceModel.Description;
using System.Runtime.Serialization;
using System.IO;

Note: You should check the Target Framework for the project, in Project Properties. This should be set to .NET Framework 4 to ensure the Reference filters are correctly set:

Step 2

Define and implement the service contracts. This defines the JSON services that will be exposed by this console application and the implementation behind these services.

Note: As well as the Chubby Service, we also need to define and implement Cross Domain Policies for our service. This is important because we are calling the service from Silverlight and Silverlight will need to be reassured that it can use the service:

#region Service Contract

    [ServiceContract]
    public interface IChubbyServices
    {
        [OperationContract]
        [WebGet(UriTemplate = "Colour", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
        JSONColour GetColour();
    }
    #endregion

    #region Service Contract for Cross Domain Policies

    [ServiceContract]
    public interface IPolicyRetriever
    {
        [OperationContract, WebGet(UriTemplate = "/clientaccesspolicy.xml")]
        Stream GetSilverlightPolicy();
        [OperationContract, WebGet(UriTemplate = "/crossdomain.xml")]
        Stream GetFlashPolicy();
    }
    #endregion
    
    #region Data Contracts
    
    [DataContract]
    public class JSONColour
    {
        [DataMember]
        public string colour = String.Empty;
    }
    #endregion

    #region Service Implementation

    public class ChubbyServices : IChubbyServices, IPolicyRetriever
    {
        public JSONColour GetColour()
        {
            //Return a random colour from the list below
            string[] colours = { "#FFFF0000", "#FF00FF00", "#FF0000FF", "#FFFFFF00", "#FFFF00FF", "#FF00FFFF", "#FF000000" };
            JSONColour colour = new JSONColour();
            Random rand = new Random();
            colour.colour = colours[rand.Next(7)];
            return colour;
        }
        Stream StringToStream(string result)
        {
            WebOperationContext.Current.OutgoingResponse.ContentType = "application/xml";
            return new MemoryStream(Encoding.UTF8.GetBytes(result));
        }

        public Stream GetSilverlightPolicy()
        {
            string result = @"<?xml version=""1.0"" encoding=""utf-8""?>
            <access-policy>
               <cross-domain-access>
                  <policy>
                     <allow-from http-request-headers=""*"">
                        <domain uri=""*""/>
                     </allow-from>
                     <grant-to>
                        <resource path=""/"" include-subpaths=""true""/>
                     </grant-to>
                  </policy>
               </cross-domain-access>
            </access-policy>";
            return StringToStream(result);
        }

        public Stream GetFlashPolicy()
        {
            string result = @"<?xml version=""1.0""?>
            <!DOCTYPE cross-domain-policy SYSTEM ""http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"">
            <cross-domain-policy>
               <allow-access-from domain=""*"" />
            </cross-domain-policy>";
            return StringToStream(result);
        }
    }
    #endregion

Quick note about the class JSONColour. The service is designed to respond with Mime type “application/json”. To do this we need to instruct WCF to serialize the data in JSON format. This is defined by the Operation Contract against the method, specifically:

ResponseFormat = WebMessageFormat.Json

Now to ensure there is something for WCF to serialize, we create a Data Contract for serialization and define a structure to be serialized. In our case we call the structure JSONColour. With WFC that is all that is required to ensure correct serialization for JSON.

Step 3

Now we need to implement the host responsible for running the service:

#region Host Implementation

    class Program
    {
        static void Main(string[] args)
        {
            string baseAddress = "http://localhost:8000";

            using (ServiceHost host = new ServiceHost(typeof(ChubbyServices), new Uri(baseAddress)))
            {
                host.AddServiceEndpoint(typeof(IPolicyRetriever), new WebHttpBinding(), "").Behaviors.Add(new WebHttpBehavior());
                host.AddServiceEndpoint(typeof(IChubbyServices), new WebHttpBinding(), "").Behaviors.Add(new WebHttpBehavior("Chubby"));
                ServiceMetadataBehavior smb = new ServiceMetadataBehavior();
                smb.HttpGetEnabled = true;
                host.Description.Behaviors.Add(smb);

                host.Open();

                Console.WriteLine("WCF Host Running...");
                Console.WriteLine();

                foreach (ServiceEndpoint endpoint in host.Description.Endpoints)
                    Console.WriteLine("Supported Endpoint for {0} at address {1}", endpoint.Binding.GetType().Name, endpoint.Address.Uri);

                Console.WriteLine();
                Console.WriteLine("Press  to shutdown");
                Console.ReadLine();

                host.Close();
            }
        }
    }
    #endregion

Here we are creating a host and setting up the appropriate WebHTTPBindings as required by REST.

Step 4

Now all we need to do is compile, run and test. When run the service should open a console window similar to that shown below:

The console should show the application started and the host running.

Since this is a REST host, we should be able to test the service from a browser. Open your browser and go to the URL shown below:

http://localhost:8000/Chubby/Colour

The browser should respond with the JSON response data. Typically the browser will not recognise the Mime type and will allow you to save the response in a file:

If you save the response to a file then open the file it should look like this:

Excellent, just what we were looking for.

Silverlight Out of Browser

The service is half the story. To complete our Chubby Client we need a client that calls on our service. For this we are going to use Silverlight and implement and Out of Browser client.

Our client will be simple, with a single showing a TextBlock and a Button. The code behind will implement the call to the web service and handle the response. Let’s create the client:

Step 1

Create the Silverlight Client App. We are going to choose the Silverlight Application Template:

We need a web page to host our apps. Let’s choose an ASP.Net Web Site:

Open MainPage.xaml and create our UI. All we need for this demo is a TextBlock to show the colour returned from our service call and a Button to kick things off:

<usercontrol xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:class="ChubbyClient.MainPage" mc:ignorable="d" d:designheight="300" d:designwidth="400">

   <grid x:name="LayoutRoot" background="White">
        <textblock height="68" horizontalalignment="Left" margin="65,74,0,0" name="textBlock1" text="TextBlock" verticalalignment="Top" width="264" fontfamily="Comic Sans MS" fontsize="32" fontweight="Bold" textalignment="Center"></textblock>
        <button name="button1" height="55" horizontalalignment="Left" margin="145,187,0,0" verticalalignment="Top" width="104" fontsize="18" content="Press Me">
    </grid>
</usercontrol>

Step 2

Now we can wire up the button. Double click on the button in the IDE to create an event handler in the code behind. In this event handler we are going to call the web service.

I’m going to use a WebClient() object to make an HTTP GET call to the web service. The data response will be given to us in an asynchronous handler:

private void button1_Click(object sender, RoutedEventArgs e)
{
   WebClient client = new WebClient();
   client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);
   client.DownloadStringAsync(new Uri("http://localhost:8000/Chubby/Colour"));
}

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
   if (e.Error != null)
      return;
}

The results are found in e.Results in JSON encoding. All we need to do now is lightly parse the results, pulling out the colour and apply that colour to our styles. First we have to add a reference for System.Json to the project and a using statement to the code. We will use the System.Json assembly to help us decode the results.

Now to parse the results and update the view:

private Color GetColorFromHexa(string hexaColor)
{
   return Color.FromArgb(
      Convert.ToByte(hexaColor.Substring(1, 2), 16),
      Convert.ToByte(hexaColor.Substring(3, 2), 16),
      Convert.ToByte(hexaColor.Substring(5, 2), 16),
      Convert.ToByte(hexaColor.Substring(7, 2), 16));
   }

   void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
   {
      if (e.Error != null)
         return;

      JsonObject jsonDoc = (JsonObject)JsonObject.Parse(e.Result);
      string colour = jsonDoc["colour"];

      //Update the view
      textBlock1.Foreground = new SolidColorBrush(GetColorFromHexa(colour));
}

Step 3

The last step is to make the Silverlight run Out of Browser. This is very simple. Open up the properties for the Silverlight client and select the Siverlight tab. All we need to do is check the ‘Enable running application out of browser’. You may also want to change the out of browser settings.

That’s it, job done.

Chubby Client Grows Up

As you can see, we can build Silverlight out of browser applications that are serviced locally by a WCF console application.

This concept can be taken further in a number of directions. We can package the WCF service as a windows service. We can make an installer that puts both client and services onto the local machine, registering the client to access the local services. We can take the same client and call a remote service – so chubby client for desktop and thin client for RIA.

From a code point of view, I’ve done a quick and dirty here. The client should be better architected to follow a MVC or MVVM patterns. The server should be more modular with the service contracts in separate assemblies. I’m sure there is a lot more that can be improved.

To help you get started, I’ve published the code above to Google Code.

http://code.google.com/p/chubbyclient/

Have fun.

cocos2d as an Application Framework - Part 4

2010-07-23T21:26:00.000+01:00

[Concrete/Interesting] So far I think the experiment to use cocos2d as an application framework has been successful. With little effort we have a very nice look and feel, excellent menu behaviour on an iPhone and a charming looking popup dialog.

Better than that, it seems relatively easy to mix UI framework into cocos2d – UI Views for example seem to behave well when added as nodes to a scene.

In this last part, I’m going to try something a little more challenging. What I want to build is a sexy About box. I ;want to mix animation, a scrolling text view and a background camera view using UIImagePickerController.

Containing cocos2d in a UIView

To show a camera surface as the background of our cocos2d scene, we are going to have to place the cocos2d as a subview of our window’s main view. We also need to make the cocos2d scene transparent. This is a little tricky but here’s how.

Look again at the selector applicationDidFinishLaunching: in the application delegate. The delegate manages the application window UIWindow *window, but there is no sign of the initialisation code for this window. That’s because the macro CC_DIRECTOR_INIT(); is doing all the work. The code behind this macro is:

window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

if( ! [CCDirector setDirectorType:kCCDirectorTypeDisplayLink] )
    [CCDirector setDirectorType:kCCDirectorTypeNSTimer];

CCDirector *__director = [CCDirector sharedDirector];
[__director setDeviceOrientation:kCCDeviceOrientationPortrait];
[__director setDisplayFPS:NO];
[__director setAnimationInterval:1.0/60];

EAGLView *__glView = [EAGLView viewWithFrame:[window bounds] pixelFormat:kEAGLColorFormatRGB565 depthFormat:0 preserveBackbuffer:NO];

[__director setOpenGLView:__glView];
[window addSubview:__glView];
window makeKeyAndVisible];

As you can see, an application window is allocated and initialized madeKeyAndVisible. Also a share CCDirector object is created and the OpenGL view is set to an EAGLView.

With a little modification we can inject a UIView between the window and the OpenGL view:

- (void) applicationDidFinishLaunching:(UIApplication*)application
{
	window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

	if(![CCDirector setDirectorType:kCCDirectorTypeDisplayLink])
		[CCDirector setDirectorType:kCCDirectorTypeNSTimer];

	CCDirector *director = [CCDirector sharedDirector];
	[director setDeviceOrientation:kCCDeviceOrientationPortrait];
	[director setDisplayFPS:YES];

	[director setAnimationInterval:1.0/60];

	EAGLView *glView = [EAGLView viewWithFrame:[[UIScreen mainScreen] bounds] pixelFormat:kEAGLColorFormatRGBA8 depthFormat:0 preserveBackbuffer:NO];
	[director setOpenGLView:glView];

	[glView setMultipleTouchEnabled:YES];
	glView.opaque = NO;
	glClearColor(0.0f,0.0f,0.0f,0.0f);
	glClear(GL_COLOR_BUFFER_BIT);

	overlay = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
	overlay.opaque = YES;
	overlay.backgroundColor = [UIColor blackColor];
	[overlay addSubview: glView];

	[window addSubview:overlay];
	[window makeKeyAndVisible];

	[CCTexture2D setDefaultAlphaPixelFormat: kTexture2DPixelFormat_RGBA8888];
	[director runWithScene: [LoaderScene scene]];
}

As you can see, I’m creating a UIVew called overlay and adding this to the window after making the OpenGL view a child of the overlay view. There are a couple of other tricks in this piece of code. By default the OpenGL view is created opaque. If this is the case, we won’t be able to see through the OpenGL view to the UIVIew layer below, so any camera surface rendered to this overlay will be obscured. To fix this we have to set the glView.opaque = NO, set a clear colour with zero alpha and clear the buffer before any rendering. Finally, we need to set the pixelFormat:kEAGLColorFormatRGBA8 when creating the EAGLView.

So now we have an UIView containing the a transparent background EAGLView.

Funky About Box

Finally, we are ready to put the about box together. I’m going to build three layers. I’m going to put three ‘cloud’ sprites onto the scene and set them animating. Next I will create a UIImagePickerController and attach this to the Overlay view, placing it below the EAGLView. Finally, I will create a UITextView and place this on top of the EAGLView:

-(id) init
{
	
	if( (self=[super init] )) {
		
		self.isTouchEnabled  = YES;
		CGSize windowSize = [[CCDirector sharedDirector] winSize];
		
		CCSprite *cloud1 = [CCSprite spriteWithFile:@"cloud.png"];
		cloud1.position = ccp(-64, windowSize.height/2);
		[self addChild:cloud1 z:1];
		id move1 = [CCMoveBy actionWithDuration:20 position:ccp(windowSize.width+128,0)];
		[cloud1 runAction:[CCRepeatForever actionWithAction:[CCSequence actions: move1, [move1 reverse], nil]]];		
		
		CCSprite *cloud2 = [CCSprite spriteWithFile:@"cloud.png"];
		cloud2.position = ccp(80, (windowSize.height/2)+80);
		[self addChild:cloud2 z:2];
		id bounce2 = [CCMoveBy actionWithDuration:.45 position:ccp(0,8)];
		[cloud2 runAction:[CCRepeatForever actionWithAction:[CCSequence actions: bounce2, [bounce2 reverse], nil]]];		
		
		CCSprite *cloud3 = [CCSprite spriteWithFile:@"cloud.png"];
		cloud3.position = ccp(windowSize.width-80, (windowSize.height/2)-80);
		[self addChild:cloud3 z:3];
		id bounce3 = [CCMoveBy actionWithDuration:.55 position:ccp(0,8)];
		[cloud3 runAction:[CCRepeatForever actionWithAction:[CCSequence actions: bounce3, [bounce3 reverse], nil]]];		
				
		UIImagePickerController* picker=[[UIImagePickerController alloc] init];  
		picker.sourceType = UIImagePickerControllerSourceTypeCamera;
		picker.showsCameraControls = NO;
		picker.toolbarHidden = YES;
		picker.navigationBarHidden = YES;
		picker.wantsFullScreenLayout = YES;
		picker.cameraViewTransform = CGAffineTransformScale(picker.cameraViewTransform, 1, 1.4);
				
		KaleidophoneAppDelegate *delegate = (KaleidophoneAppDelegate *)[[UIApplication sharedApplication] delegate];
		[delegate.overlay insertSubview:picker.view belowSubview:[[CCDirector sharedDirector] openGLView]]; 
		
		UITextView *description = [[UITextView alloc] initWithFrame:CGRectMake(20,(windowSize.height/2)-100,windowSize.width-40,200)];
		description.backgroundColor = [UIColor clearColor];
		description.text = @"This is some text that is shown in the text field.\r\rThis text is very long spanning a number of lines.\r\rorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
		[description setEditable:NO]; 
		description.font = [UIFont fontWithName:@"Marker Felt" size:24.0f];
		description.textColor = [UIColor whiteColor];
		description.showsHorizontalScrollIndicator = NO;
		description.alwaysBounceVertical = YES;
		[delegate.overlay insertSubview:description aboveSubview:[[CCDirector sharedDirector] openGLView]]; 
		[description release];
		
	}
	return self;
}

The Results

Here are the screen shots for the funky About box:

	Ooh, a camera view of my TV with animated clouds and the About text.
Look, the clouds move.
	And the text scrolls

Conclusion

Ok, not perfect but an excellent start. Some very funky user interface components and at very little cost. Some things need more work, the EAGLView animation freezes when handling the touch events for the UITextView, but I'm sure this can be improved upon.

For anyone interested, I’ve published the source code for the demo application on code.google.com:

http://code.google.com/p/iphone-cocos2d-application-framework/

Have fun experimenting with cocos2d and UIKit.

cocos2d as an Application Framework – Part 3

2010-07-22T17:45:00.001+01:00

[Concrete/Interesting] It’s all starting to come together. We have a application and a very interesting look and feel for the menu.

Now I want to really mix it up. I want to display something similar to that provided by UIAlertView, but the one from Apple just doesn’t fit the look and feel of the application under the cocos2d framework.

Custom Alert in UI Kit

Implementing a modal alert is relatively simple, I need create a XIB file with a single UIView:

My alert view has a title, message body and two buttons, all in a nice warm look and feel:

These tie back to the class definition as show in the code below:

#import <UIKit/UIKit.h>
#import "ColourfulButton.h"

@interface ModalAlert : UIViewController {
	IBOutlet UILabel *alertTitle;
	IBOutlet UILabel *alertMessage;
	IBOutlet ColourfulButton *alertCancel;
	IBOutlet ColourfulButton *alertOk;
	int nResult;  
}

@property (nonatomic, retain) UILabel *alertTitle;
@property (nonatomic, retain) UILabel *alertMessage;
@property (nonatomic, retain) ColourfulButton *alertCancel;
@property (nonatomic, retain) ColourfulButton *alertOk;
@property (nonatomic) int nResult;

- (IBAction)pressedOk;
- (IBAction)pressedCancel;

@end

int createModalAlert(NSString *title, NSString *msg, NSString *cancel, NSString *ok);

Before I move on, let’s have a little look at this class definition. First, there is a global method called createModalAlert(). This is the entry point that will be called to show an alert. It takes a title string, a message string and two button strings.

The class is simply an extension to UIViewController, used to manage the UIView and tie the controls to class members.

This is all standard UIKit stuff.

To make things look a bit more exciting I done 5 things:

Use a common application font, Marker Felt. This looks good as an application font.
Used a colourful background for my view.
Used a UINavigationBar to provide a nice header for the view and a placeholder for the title
Used a sub-class for the buttons called ColourfulButton. This gives the buttons a better look and feel.
Added rounded corners to the bottom of the dialog

Integrating with cocos2d

Ideally, I want a single modal entry point that loads the dialog, handles any processing, cancels the dialog on pressing a button and returns the button id of the pressed button.

The entry point createModalAlert() does this for us:

int createModalAlert(NSString *title, NSString *msg, NSString *cancel, NSString *ok)  
{  
	ModalAlert *view = [[ModalAlert alloc] initWithNibName:@"ModalAlert" bundle:nil];
	CGSize offSize = [UIScreen mainScreen].bounds.size;   
	CGPoint offScreenCenter = CGPointMake(offSize.width / 2, offSize.height /2);   
	view.view.center = offScreenCenter;
	view.view.alpha = 0.0f;
	view.nResult = -1;
	view.view.layer.cornerRadius = 15;
	
	view.alertTitle.text = title;
	view.alertMessage.text = msg;
	
	[view.alertCancel setTitle:cancel forState:UIControlStateNormal];

	if (ok != nil)
		[view.alertOk setTitle:ok forState:UIControlStateNormal];
	else 
		[view.alertOk setHidden:YES];
	
	
	[[CCDirector sharedDirector] stopAnimation];
	
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.5];
	view.view.alpha = 0.95f;
	[[[CCDirector sharedDirector] openGLView] addSubview:view.view];
	[UIView commitAnimations];
	
    	while ((!view.view.hidden) && (view.view.superview!=nil))  
    	{  
		[[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate: [NSDate dateWithTimeIntervalSinceNow:0.1]];
    	}  
	
	int nResult = view.nResult;
    	[view release];  
	[[CCDirector sharedDirector] startAnimation];
    	return nResult;  
}

The model method does a number of important things:

Create and position the UIView. I’m loading the view from ModaAlert.xib and locating the centre of the view in the centre of the scene.
Setup the text for the title, message and buttons. Note that if the function is passed nil for the second button, this button is hidden.
Tell cocos2d to stop all animation. This effectively pauses the application until the dialog has cleared.
Transition to show the view. The view is created with its alpha set to zero. I then set up a transition to fade in the view, add the view to the scene and commit the animation.
Run the modal loop. Because this is a modal dialog, we need to handle the message processing in this method. We use an NSLoop for this purpose and run until the view is hidden or removed.
Clean and return. Once the view has been removed, we exit the message loop, pick up the return result, start cocos2d animation and return the result.

The modal loop is controlled by the visibility of the view. To tie this into the button action and to set up the return values, we have the following implementations for the button events:

- (IBAction)pressedOk {
	nResult = 1;
	[self.view setHidden:YES];
}

- (IBAction)pressedCancel {
	nResult = 0;
	[self.view setHidden:YES];
}

That’s it – nothing more is required to present a modal view under cocos2d. As a test, I’m calling the dialog from the onQuit: selector:

-(void)onQuit: (id) sender
{
	if (createModalAlert( @"Quit", @"Are you sure you want to exit?", @"No", @"Yes")==1)	//Exit
		exit(0);
}

The results look great:

Transitions

Here we are using a UIKit animation to show the dialog. cocos2d supports a number of transition for Sprites, layers and scenes. Transitions include rotates, slides, fades, jumps, zooms and flips.

A nice technique is to have a splash screen that transitions into the menu. This is very simple. All you need to do is create a scene with a single layer and sprite on that layer. The sprite is set to cover the entire screen:

#import "LoaderScene.h"
#import "MenuScene.h"

@implementation LoaderScene

+(id) scene
{
	CCScene *scene = [CCScene node];
	LoaderScene *layer = [LoaderScene node];
	[scene addChild: layer];
	return scene;
}

-(id) init
{
	
	if( (self=[super init] )) {
		
		CCSprite *sprite = [CCSprite spriteWithFile:@"Default.png"];
		CGSize size = [[CCDirector sharedDirector] winSize];
		sprite.position = ccp(size.width/2,size.height/2);
		[self addChild: sprite z:0];
		[self schedule: @selector(done:) interval:2.5];
	}
	return self;
}

-(void)done:(ccTime)dt
{
	[self unschedule:@selector(done:)];
	[[CCDirector sharedDirector] replaceScene:[CCFlipAngularTransition transitionWithDuration:0.5f scene:[MenuLayer scene]]];
}

- (void) dealloc
{
	[super dealloc];
}

@end

By making this scene the first scene in your application, the scene is loaded, centred and added to the layer and made visible.

Notice also that after creating and positioning the splash screen sprite, a timer is created. This is done using cocos2d scheduling. It is advisable to use this mechanism rather than NSTimer because cocos2d scheduling is cocos2d aware.

When the timer fires, I simply stop the timer and change the scene using the replaceScene: selector. This selector allows us to specify a transition to use. I’ve used a CCFlipAngularTransition. Have fun!

In Part 4

In the next part we will look at a scene that support a UIImagePickerController view.

cocos2d as an Application Framework – Part 2

2010-07-21T15:33:00.001+01:00

[Concrete/Interesting] In the previous blog I looked at cocos2d and showed how a simple menu could be created with very little effort.

The menu is quite funky but not that exciting. cocos2d supports Sprites, so let’s build a menu with animated sprites, something like the Cover Flow you find in iTunes.

Cover Flow Menu

For a more exciting look and feel for the menu, I’m going to do a couple of things. First, I’m going to change the visual behaviour of the menu items – give them a sprite as well as text. Second, I’m going to modify the visual and input behaviour of the menu (the container for the menu items) to animate the menu items.

For the menu items, I have to first create a class that inherits from CCMenuItem:

#import <foundation/foundation.h>
#import "cocos2d.h"

@interface MenuItemComplete : CCMenuItem <CCRGBAProtocol> {
	CCLabel *title;
	CCNode<CCRGBAProtocol> *sprite;
	CCNode<CCRGBAProtocol> *spriteDisabled;
	float originalScale_;	
}

@property (nonatomic,readwrite,retain) CCNode<CCRGBAProtocol> *sprite;
@property (nonatomic,readwrite,retain) CCNode<CCRGBAProtocol> *spriteDisabled;
@property (nonatomic,readwrite,retain) CCLabel *title;

-(id) initFromImage:(NSString*)image title:(CCLabel *)title target:(id)target selector:(SEL)selector;
-(void) activate;
-(void) selected;
-(void) unselected;

@end

You can see that our class inherits from CCMenuItem and implements a couple of sprites and a label. One sprite for an enabled menu item, the other for a disabled menu item.

I’ve also declared an initializing selector called initFromImage:. In the implementation the important stuff is happening in this method and in the drawing method:

-(id) initFromImage:(NSString *)image title:(CCLabel *)t target:(id)target selector:(SEL)selector
{
	if( (self=[super initWithTarget:target selector:selector]) ) {
		
		originalScale_ = 1;
		
		self.sprite = [CCSprite spriteWithFile:image];
		self.spriteDisabled = [CCSprite spriteWithFile:image];
		[self.spriteDisabled setOpacity:80];
		[self setContentSize: [self.sprite contentSize]];
		
		self.title = t;
		self.title.position = ccp(self.contentSize.width/2 , -10);
		[self addChild: title z:100];
	}
	return self;	
}

-(void) draw
{
	if(isEnabled_)
		[sprite draw];				
	else
		[spriteDisabled draw];
}

In the init method we create the two sprites from and image past to the selector. The disabled sprite is just a copy of the normal sprite but I’ve set the opacity to 80%. Similarly, I’ve created a label from the text passed to the selector.

I’m using a variable called originalSize – this will be used later when controlling the sprite animation. Finally I’m positioning the label in this node.

Drawing is very simple, all that we do is draw the normal or disabled sprite according the the menu item’s enabled state.

We have to implement a few more selectors to support menu item behaviour, specifically, activate:, selected: and unselected:

-(void) activate {
	if(isEnabled_) {
		[self stopAllActions];
        
		self.scale = originalScale_;
        
		[super activate];
	}
}

-(void) selected
{
	if(isEnabled_) {	
		[super selected];
		[self stopActionByTag:kZoomActionTag];
		originalScale_ = self.scale;
		CCAction *zoomAction = [CCScaleTo actionWithDuration:0.1f scale:originalScale_ * 1.2f];
		zoomAction.tag = kZoomActionTag;
		[self runAction:zoomAction];
	}
}

-(void) unselected
{
	if(isEnabled_) {
		[super unselected];
		[self stopActionByTag:kZoomActionTag];
		CCAction *zoomAction = [CCScaleTo actionWithDuration:0.1f scale:originalScale_];
		zoomAction.tag = kZoomActionTag;
		[self runAction:zoomAction];
	}
}

These selectors support the visual behaviour of the menu item. When the menu item is activated, all I need to do is stop all animations, restore the active sprite to its original size and bubble up the event. When a menu item is selected I want the sprite to grow and shrink, so I stop the current animation, create a new animation action, a zoom, and set that going. Finally, unselected restores the default animation action. For a better visual effect, I've also decided to arrange the menu items horizontally through a call to the selector alignItemsHorizontally:

We can use the new class in our menu scene in place of the current menu items. We need to add a few images for our menu items and off we go:

-(id) init
{

	if( (self=[super init] )) {
		MenuItemComplete *mnuKaleidoscope = [[MenuItemComplete alloc] initFromImage:@"mnuKaleidoscope.png" title:[CCLabel labelWithString:@"Kaleidoscope" fontName:@"marker felt" fontSize:24] target: self selector: @selector(onKaleidoscope:)];
		MenuItemComplete *mnuAbout = [[MenuItemComplete alloc] initFromImage:@"mnuAbout.png" title:[CCLabel labelWithString:@"About" fontName:@"marker felt" fontSize:24] target: self selector: @selector(onAbout:)];
		MenuItemComplete *mnuQuit = [[MenuItemComplete alloc] initFromImage:@"mnuQuit.png" title:[CCLabel labelWithString:@"Quit" fontName:@"marker felt" fontSize:24] target: self selector: @selector(onQuit:)];
		CCMenu *menu = [CCMenu menuWithItems:mnuKaleidoscope, mnuAbout, mnuQuit, nil];
		[menu alignItemsHorizontally];
		[self addChild:menu];
		
		CCLabel * l = [CCLabel labelWithString:@"Main Menu" fontName:@"marker felt" fontSize:28];
		l.position = ccp(160,420);
		[self addChild:l];
		
	}
	return self;
}

The results look pretty good, the menu items behave well when selected, but no menu animation yet:

Now I need to add behaviour to the menu. I want the menu to respond to left and right swipes, these will drag the sprites. I want the menu to wrap to give a cylindrical effect. To complete the effect, the icons should shrink and dim as they move away from the centre.

First I need to create a new class that inherits from CCMenu. At this point I’m going to cheat. João Caxaria has created a very good one that responds to touches and accelerometer. You can read more about it from:

http://www.cocos2d-iphone.org/forum/topic/139

You can find the source for the looping menu from the following link:

http://dl.dropbox.com/u/3314174/loopingmenu.zip

With that now added to the project, all I need to do now is change my scene to use a looping menu as the menu item container. The results are very impressive:

Note: I did need to make a few more changes because LoopingMenu was designed for landscape, but after some simple tweaks, it all works well in portrait.

In Part 3

In the next part I will start to delve into the world of cocos2d / UI Kit hybrids. I will be implementing a modal dialog that uses standard UI Kit elements like UIViewController and a XIB resource file.

cocos2d as an Application Framework – Part 1

2010-07-20T22:58:00.001+01:00

[Concrete/Interesting] cocos2d is a multi-platform games engine written in C/C++. It has been ported to a number of environments including the iPhone under Objective-C.

Like all developers, I dream of creating the most popular game ever. I’m probably a little too late because Pac Man day’s have come and gone. However, I believe the foundation of a games engine has application outside of the realm of games.

In this first part I will be discussing the use of the cocos2d games engine as an application framework. In later articles I will expand on this to show how we can mix elements of cocos2d and the iPhone UI Framework.

Basic Elements of a Games Engine

Take a look at Adobe Air and even Microsoft Silverlight. Under these frameworks applications are better thought of as scenes, with layers and objects (nodes on the scene). These objects may be animation or sprites (for instance a ‘Busy’ animation) or they may be user interface elements like labels, button or menus. Layers are groups of nodes that exist on the same Z-index or plane. This could be backgrounds, foregrounds, even popup dialogs or input boxes. And scenes are the world or landscape upon which everything is displayed, like the application window:

cocos2d, like Adobe Air, has a time dimension. That is to say, object can be tested, modified, added or deleted to the scene over a timeline. Certain time functions are static in nature, such as a sprite animation or a transition from scene to scene. Some are less obvious such as the scaling and translations associated with a Carousel Menu.

Finally, cocos2d and other similar platforms allow you to tie up device events to objects. For example, using the accelerometer on the iPhone to control the direction and speed of a sprite, or making a button respond to touch input.

For a deeper introduction to cocos2d look at the documentation on their website: http://www.cocos2d-iphone.org/wiki/doku.php/

An Application Framework

So where am I going with all this. Well before I write the best game ever for the iPhone, I thought I’d release a cocos2d application. And I want to use cocos2d as an application framework, to take care of all my user interface management rather than a traditional games framework.

I also want to mix this with standard UI Framework elements. What I hope to get is a very innovative user interface with very little work.

What I will be covering in this article is:

cocos2d application framework
New Look Menus and Dialogs
Integrating UI into the scene
Responding to device events

Starting the Application

Cocos2D installs a number of templates into Xcode – this makes it easy to start your application. I’m using the standard ‘cocos2d Application’:

Running the wizard creates a simple ‘Hello World’ application which will server well as our staring point.

For the purposes of this article, I’m going to create a simple Kaleidoscope application based on a brilliant piece of code by Nori Nomura: http://github.com/norio-nomura

His implementation uses UIImagePickerController, Quartz and OpenGL, so this will test our ability to integrate UI framework into cocos2d and use cocos2d as an application framework.

Adding a Menu

Before I create a menu, let’s look at the structure of the application I’ve just created. There are two classes of interest. The application delegate and the HelloWorldScene.

In the application delegate, take a look at the applicationDidFinishLaunching: selector:

- (void) applicationDidFinishLaunching:(UIApplication*)application
{
	// CC_DIRECTOR_INIT()
	//
	// 1. Initializes an EAGLView with 0-bit depth format, and RGB565 render buffer
	// 2. EAGLView multiple touches: disabled
	// 3. creates a UIWindow, and assign it to the "window" var (it must already be declared)
	// 4. Parents EAGLView to the newly created window
	// 5. Creates Display Link Director
	// 5a. If it fails, it will use an NSTimer director
	// 6. It will try to run at 60 FPS
	// 7. Display FPS: NO
	// 8. Device orientation: Portrait
	// 9. Connects the director to the EAGLView
	//
	CC_DIRECTOR_INIT();
	
	// Obtain the shared director in order to...
	CCDirector *director = [CCDirector sharedDirector];
		
	// Turn on display FPS
	[director setDisplayFPS:YES];
	
	// Turn on multiple touches
	EAGLView *view = [director openGLView];
	[view setMultipleTouchEnabled:YES];
	
	// Default texture format for PNG/BMP/TIFF/JPEG/GIF images
	// It can be RGBA8888, RGBA4444, RGB5_A1, RGB565
	// You can change anytime.
	[CCTexture2D setDefaultAlphaPixelFormat: kTexture2DPixelFormat_RGBA8888];
		
	[[CCDirector sharedDirector] runWithScene: [HelloWorld scene]];
}

This is where the framework is initialized and starts the business of showing the first scene. In this case, the scene called ‘Hello World’.

The ‘Hello World’ scene is implemented in the HelloWorldScene class. The important function to look at is the init: selector:

// on "init" you need to initialize your instance
-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init] )) {
		
		// create and initialize a Label
		CCLabel* label = [CCLabel labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];

		// ask director the the window size
		CGSize size = [[CCDirector sharedDirector] winSize];
	
		// position the label on the center of the screen
		label.position =  ccp( size.width /2 , size.height/2 );
		
		// add the label as a child to this Layer
		[self addChild: label];
	}
	return self;
}

Pretty simple stuff. All it’s doing is setting up and positioning a label and adding this to the scene. Of course, under the hood the framework is doing the clever stuff of rendering the scene and the layers and nodes.

cocos2d supports some primitive node types like layers and labels as well as buttons and menus. I’m going to modify the HelloWorldScene to manage a menu node with menu items. I do this by creating a menu in the init: selector:

-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super init] )) {
		CCMenuItemFont *mnuKaleidoscope = [CCMenuItemFont itemFromString: @"Kaleidoscope" target:self selector:@selector(onKaleidoscope:)];
		CCMenuItemFont *mnuAbout = [CCMenuItemFont itemFromString: @"About" target:self selector:@selector(onAbout:)];
		CCMenuItemFont *mnuQuit = [CCMenuItemFont itemFromString: @"Quit" target:self selector:@selector(onQuit:)];
		CCMenu *menu = [CCMenu menuWithItems:mnuKaleidoscope, mnuAbout, mnuQuit, nil];
		[menu alignItemsVertically];
		[self addChild:menu];
		
		CCLabel * l = [CCLabel labelWithString:@"Main Menu" fontName:@"marker felt" fontSize:24];
		l.position = ccp(160,400);
		[self addChild:l];
		
	}
	return self;
}

Ok, not a bad start. The result is a main screen menu with three menu items, displayed vertically. The menu items have some funky behaviour and there is a label ‘Main Menu’ at the top.

Few things to note, we have a scene with a single layer. On the layer we are adding a label and menu. The label is being positioned relative to the centre of the label. All nodes have origins (their centre) and by default this is in the centre of the bounding rectangle for the node. For the menu, we are adding three menu items, each with an appropriate selector. One final note at this point, when you run the application you will see a number at the bottom left of the screen. This shows the screens per second rendering of the engine. This is useful in debug but you will want to remove this for production. Setting setDisplayFPS:NO in applicationDidFinishLaunching will do this for you.

In Part 2…

I will look at extending the menu for a more funky look and feel as well as looking at dialogs and popup windows.

Space and Time

2010-07-06T12:28:00.001+01:00

[Abstract/ Sharing] Here is a short poem about Space and Time. Someone said the present is brief and precious and we can never get back moment that are lost. I disagree

This poem offers an alternative view, talking about events in space/time with the present flowing through this landscape. I also make reference to the c-boundary confining all space and time.

Hope you enjoy:

Events frozen into the fabric of Space and Time,
The Present rushing past at the Speed of Light.

The Past and Future everywhere, less the edge of the Universe
Where possibility and history remains void.

Mac on a PC, are you mad?

2010-04-05T13:55:00.001+01:00

[Concrete/ Quite Interesting] Well probably, but that’s not important now. I came home from a short trip to Malaysia to find my Windows 7 desktop had crashed. We have a lot of laptops at home but the desktop is the family machine. It’s connected to my Samsung 6000 LED TV and we use it for music, pictures and 1080p movies.

After a day trying to recover a crashed registry, I finally decided it would be simpler to reinstall Windows. The data on this machine is important and lives mostly on a 1TB USB drive, so re-install is not a problem. Then I had a mad idea – why Windows, why not Mac OSX?

Mac OS - Why, because I can

As always, I’m very busy. I’ve got a couple of development projects running, some updates to write, articles, work and with the family away, a golden opportunity to clean the house from top to bottom. But I want to – why, because I can.

Not just because I can, but also because I like Mac OSX. I’m 90% Microsoft and very comfortable with their operating systems. I’ve worked with Windows since pre-release version 1 in 1984, matured alongside the operating systems, had a deep appreciation for Windows 3.1, briefly flirted with OS/2 and Presentation Manager then back to Windows NT through to the present day Windows 7. But the other 10% has an eye for Mac OS and over time I’ve been more and more seduced by the ‘I don’t know where the operating system is, and I don’t care’ attitude flaunted by Mac OSX.

Then there are my children – my two older kids only know Microsoft, the two little ones have had the opportunity to play with both operating systems – I think it’s important they all are able to experience the best of both operating systems.

iATKOS 7

So where to start. Well we need to install an x86 version of Mac OSX – known as Mac OSX86. I have a Mac Book running Mac OSX 10.6.3 – a.k.a Snow Leopard. So a single step installation of this operating systems would be good.

After some research, I settled on iATKOS v7 – this provides a one step installation of OSX 10.5.x on Intel/AMD chipsets. Ok, not Snow Leopard, but Leopard is close enough.

You can get a copy of iATKOS v7 from the internet, download from Torrent or RapidShare, just search for iATKOS v7.

Tip – Solve it with cheap hardware.

iATKOS is very good but takes some getting used to. After many days I still had a problem with my network card not being recognized. I tried vanilla install, selecting drivers, installing and applying drivers, following some very detailed hacks, but nothing worked. Either, no network, occasionally, no operating system.

Then I went out to PC World and bought a cheap 10/100 LAN card. The sales assistant treated me like an escaped lunatic but I found a cheap card with a Mac OSX symbol on the side.

I chose a Belkin F5D5000 32-bit PCI network card. It cost about £10 and Belkin have Mac OS drivers. Put the card in, did a vanilla install and it worked first time.

Almost done – Quartz Support

Great – all working. Well not quite. I noticed that screen savers were not running, but wasn’t too concerned since these are not important. I then installed iLife – great application suite, the best photo slideshows I’ve ever seen through iPhoto.

But iPhoto slideshows didn’t work. After some digging I found out that certain graphics functions require Quartz Extreme support.

Quartz Extreme is hardware accelerated graphics support based on OpenGL commands. For this you need an AGP 2X graphics card or better. (AGP 4X, 8X and PCI Express).

Again, the simplest solution was a trip to PC World and I picked up an NVIDIA GeForce 8400 GS for about £25 which did the trick. Simply replaced my graphics card and it worked first time.

The Results

So was it worth it. I think so. Take a look at the results:

Samsung 6000 LED and Virgin

Turn over to Mac OSX86 Leopard

Running iPhoto

and my favourite, XBMC media centre.

Give it a try for yourself.

Extract from “Echoes of a Dying Man”

2010-01-28T14:38:00.002Z

[Abstract/A bit interesting] - The book is about a man who dreams of his death and super beings who control his life.

Steeped in his own paranoia, often he misses what is really going on around him, until one day, it is gone.

I remember Dad saying, “never drink alone” – stupid old bastard. How did he know, maybe he’s one of them? No, not nearly smart enough. Of course, what he really meant was, he drank alone and he was a drunk. If you drink alone, you’re a drunk. He was right.

Rob got off the tube at Kings Cross, but instead of running to catch the crowd on platform 8, he walked out of the station and found himself at a local watering hole, the Kings Arms just off York Way. He had never been there before. This was Rob’s new game.

The usual pattern was to stop for a couple of pints on the main platform. Well usual, up until today. Today, Rob had turned over a new leaf. Nothing so grand as actually giving up the drink, but if he was going to drink, he would certainly make the effort of doing it in style. Rob hated patterns, he hated drinking in the same pub and he really hated drinking along side people he recognised. And he knew all the people in the shit-hole on platform 8.

Of course, he didn’t really know them, he hadn’t talked to any of them, but he recognised them, they all wore similar clothes, sported a five o’clock shadow. They all looked tired and fucked off - they were all called Rob and none of them wanted to live another minute of the day sober. So a new leaf and green pastures, only problem was, Kings Cross is not that green. But it is close.

Rob had no idea what he would find when he stepped through the sticky doors of the Kings Armpit. He was sickened, so much that he almost turned around and walked straight out to find another public house. On the short journey that lies between the station and the pub, Rob’s imagination went wild. By the time he had arrived, he had imagined a quaint old English Pub, the sort of welcoming Inn that Dick Turpin may have frequented, either before, during or after committing his infamous larceny - what a hero.

Nope, this place was best served by the title – ‘A Dive’. Maybe that was being generous. It was worse than the ‘shit hole’ on platform 8. Inside, the pub was bright – that is of course a very bad sign, bright pub means ‘beware of the violent crowd’ or ‘kid’s pub’ or both. At least half of the crowd looked violent – full of Builders, huge hands, fat faces and bellies, a sea of blue jeans and a strong stench of sweat, plaster and paint. Another quarter of the pub was filled with what could only be described as old tarts – absolute ‘bow wows’. ‘Maybe this is where they go for a good night out?’ mused Rob.

What made Rob nearly turn around and run for his little insignificant life was the last quarter of the pub’s regulars. For a moment, Rob didn’t know whether to cry or throw up. There they were, the 5 o’clock shadow crowd. Yes, he wasn’t the only sad fuck to try the ‘nearest pub to the station’ experiment.

‘Fuck’, he thought, ‘well just a quick one here’ and like a moth to a flame, he flew to the bar. The bar was crowded and of course, Rob didn’t want to be too pushy. He wasn’t scared of getting into a fight, not even a fight with a builder, not even a fight with a builder and his bitch. Rob told himself he wasn’t scared of anything, except being sober.

Rob had a technique of getting served fast, a technique he dearly now needed. He didn’t push to the bar and he never held the cash out in his hand. These were crude methods and Rob hated being crude in that way. His method was based on ‘appeal’. He knew the staff would see him, ‘good staff’ always knows who’s at the bar and who’s next. All he had to do was look charming and wait and usually, he didn’t wait long.

Today was one of those days – the bar staff were just interested in taking money, never mind etiquette. ‘Fuck’ he thought, ‘Fucking typical, I guess this goes with the territory’, Rob’s inner voice seemed rightly annoyed but it was still in control and somewhat resigned to the situation. He changed his tactic towards the crude end of the spectrum. He deemed to show the cash in his hand, leaned forward, and attempted to flash his eyebrows at the nearest member of the staff. But he still wasn’t been served.

‘Fucking Madhouse’. A particularly ape like creature was standing next to Rob and in his simple pattern of thought; he too was getting pissed off. ‘Yeah, be our go soon’ Rob replied, Rob didn’t want a conversation about football or plastering, he wanted a pint. Rob thought how getting the first pint in was worse that wanting a piss. When you are really desperate, the closer to the loo you get, the worse the desire to piss your pants, and right now, Rob was ‘busting’ for a pint. Just then, the Neanderthal to Rob’s left got served. ‘Cunt white trash’ thought Rob. He pulled back into himself for a moment, first to check he hadn’t said anything out loud, then to tick himself off for such an bad thought. It wasn’t the thought in itself, rather the locale.

The Ape Man placed his order – an extraordinarily large order of spirits and beers, crisps and peanuts, more beer and some ‘alco pops’ for his bitches. Now Rob was determined, he would be served next. As the girl serving returned to the Ape Man with his change, Rob shouted ‘yes love, I’ll have a pint of Stella’.

‘Who’s next’ asked the girl. She did this without making eye contact with anyone standing at the bar, the sort of skill you only find in an inner city pub located conveniently close to a mainline station. ‘Yeah Cheers’ shouted Rob. She looked at him and with a fleeting contact of their eyes, ‘Success!’ thought Rob.

After all that time and anguish, all Rob could think of was revenge, his need for alcohol was momentarily put aside and his fury was aimed at the bar girl. Rob now played a small game he been forced to learn as a child - ‘Make them feel worse than they made me feel’ a game he had made up to regain his self esteem and control in previous times like these. He would now make the bar girl wait for him, make her beg for forgiveness. ‘Yes Luv?’ – that was her opening gambit. Usually the poor fuck on the other side of the bar would be so ecstatic with being served they would blurt out their order. Not Rob. He wanted a pint badly, but he was pissed off now. He waited to answer, he wasn’t looking at her but he could feel her confusion. Confused at first, but the confusion would quickly lead to irritation, and then anger and back to confusion - a type of confusion that would have the girl questioning her very competence as a barmaid. Had the girl forgotten to say ‘Please’ or ‘Sir’? Wait a bit longer and she would be angry again and her anger would show in a pointless outburst like ‘Yes, you’re next’ or ‘Yes, what can I get you!’ or even ‘Yes fucker, what did I ever do to you’ – ‘You made me wait’ would be Rob’s response.

Rob may have been crap at getting served in a crowded London bar, but he was the quintessential expert at secretly pissing people off. He was causing her to sweat and in less than two seconds he had put the poor girl on an emotional rollercoaster – in her inner mind she was probably asking herself if she was even fit to do the job. Rob knows about the magic number e – 2.71828182845904. Rob loved Number Theory; he thought certain numbers almost mystic. In his dreams, numbers frequently appeared, almost as signposts pointing to the answer, always cryptic but most definitely there. If you want to make someone uncomfortable, if you want them to doubt themselves, leave between 2 and 3 seconds gap between their first request and your answer, preferably 2.72 seconds.

Just before the bar girl had regained her self belief and thought Rob a total Wanker, milliseconds before Rob had lost access to his first pint and like Snakes and Ladders, had plummeted back to square one, Rob replied, slowly, quietly and deliberately, ‘Yes, Cheer… Can I have a pint of your finest Stella?’

‘Wanker’ thought the bar girl as she turned towards the pump. Rob could hear what she was thinking, almost as if she had said it to his face, but it was too late now, Rob had his revenge and soon was to take a sip of his salvation.

C++ IS useful - Click Once workaround

2009-12-23T15:45:00.022Z

[Concrete/ Quite Interesting] Me and C++, we’re old mates – the sort you find on Friends Reunited. I was fortunate to work with Microsoft and Glockenspiel in the late 80’s, working in MFC 1.0 and beyond. Later I would teach C++ for QA Training and others. I really loved the language and managed to build some sizeable solutions in C++, MFC and ATL.

Then came .Net and C# and for me as with many others, we could now start to focus on the problem domain, design and patterns to solution rather than pointers, memory and language syntax.

In C# almost every line of code looks cleaner and addresses the issue at hand, something C++ never seemed to achieve. Look at this simple example taken randomly from the MSDN:

HTTPWebRequest in C++

#using <System.dll>

using namespace System;
using namespace System::Net;
using namespace System::Text;
using namespace System::IO;

// Specify the URL to receive the request.
int main()
{
   array<string^>^args = Environment::GetCommandLineArgs();
   HttpWebRequest^ request = dynamic_cast<httpwebrequest^>(WebRequest::Create( args[ 1 ] ));

   // Set some reasonable limits on resources used by this request
   request->MaximumAutomaticRedirections = 4;
   request->MaximumResponseHeadersLength = 4;

   // Set credentials to use for this request.
   request->Credentials = CredentialCache::DefaultCredentials;
   HttpWebResponse^ response = dynamic_cast<httpwebresponse^>(request->GetResponse());
   Console::WriteLine( "Content length is {0}", response->ContentLength );
   Console::WriteLine( "Content type is {0}", response->ContentType );

   // Get the stream associated with the response.
   Stream^ receiveStream = response->GetResponseStream();

   // Pipes the stream to a higher level stream reader with the required encoding format. 
   StreamReader^ readStream = gcnew StreamReader( receiveStream,Encoding::UTF8 );
   Console::WriteLine( "Response stream received." );
   Console::WriteLine( readStream->ReadToEnd() );
   response->Close();
   readStream->Close();
}

HTTPWebRequest in C#

using System;
using System.Net;
using System.Text;
using System.IO;

public class Test
{
    // Specify the URL to receive the request.
    public static void Main (string[] args)
    {
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create (args[0]);

        // Set some reasonable limits on resources used by this request
        request.MaximumAutomaticRedirections = 4;
        request.MaximumResponseHeadersLength = 4;
        // Set credentials to use for this request.
        request.Credentials = CredentialCache.DefaultCredentials;
        HttpWebResponse response = (HttpWebResponse)request.GetResponse ();

        Console.WriteLine ("Content length is {0}", response.ContentLength);
        Console.WriteLine ("Content type is {0}", response.ContentType);

        // Get the stream associated with the response.
        Stream receiveStream = response.GetResponseStream ();

        // Pipes the stream to a higher level stream reader with the required encoding format. 
        StreamReader readStream = new StreamReader (receiveStream, Encoding.UTF8);

        Console.WriteLine ("Response stream received.");
        Console.WriteLine (readStream.ReadToEnd ());
        response.Close ();
        readStream.Close ();
    }
}

Ok, not a huge difference, but enough of a difference to make C# easier to write, easier to read and so we can focus better on the implementation. I really liked C++ but for me there is no reason to work so hard – C# makes coding more enjoyable and productive.

No reason until…

Click Once Deployment – sounds simple – NOT

I have been developing an Office Outlook Plug-in for www.far2muchmail.com. Far2MuchMail is a solution to help people better manage their emails in Outlook and it’s free. What I wanted was to make it easy for people to download and install the plug-in from the Internet so naturally I thought ‘Click Once Deployment – just the puppy’. WRONG.

I want to encourage people to use my plug-in. Did I say it was free. Being free, the last thing I wanted was loads of messages during installation telling the user that the software was from an unknown publisher, couldn’t be trusted, would probably cause a fire in the house, sell your wife and kids to criminals, cause global warming, and so on. I mean, you would never install software, free or not, with that level of scare mongering.

I understood why the warnings were there and knew that if I bought a certificate, my problems would be over. But somehow I felt like I was being conned. A certificate felt like one of those Microsoft Taxes – like MSDOS. There had to be another way.

I knew I could create a certificate using MAKECERT. but to stop Click Once raising alarming messages, this certificate needed to be installed prior to installing the app.

I came across an article that talked about programmatically adding your certificate into the Trusted Installer list on a local machine. Great, all I needed to do was implement this and have it called at the start of installation as a pre-action.

But Click Once is locked down so I had to look at an alternative installer. I decided upon a standard Deployment Project in Visual Studio. Finally I was able to install my certificate prior to installing the plug-in. But there was a problem…

VS2008 and the Deployment Project Bootstrap.

Unfortunately, in VS2008 Microsoft changed the bootstrap program (setup.exe) as part of their deployment package. The change was subtle but important. Previous versions of the program would remain in memory until the installation ended. This allowed you to use a program like WinZip or IExpress to package the setup and MSI into a single executable. Setup.exe would remain in memory until the setup had completed so you could reliably let WinZip or IExpress wait until the setup had finished then automatically clean up any temporary files. Everything worked. In VS2008, the bootstrap setup.exe was designed to leave memory as soon as it had kicked off the MSI package. The result was the single package created by WinZip or IExpress would think the setup has finished and would start to pull temporary files, causing the setup to fail. Very frustrating.

I was nearly there, all I now needed to do was keep the package from terminating while the MSI was installing. C++ to the rescue.

WaitForProcess - C++ application

I decided to use IExpress to package my setup into a single executable deployable from my website. IExpress allowed me to name the components of the installation including the setup.exe bootstrap and MSI package. It also allows you to define post installation steps. It is here I named a program called WaitForProcess, written in C++.

WaitForProcess is very simple, it continues to run if a named process is still in memory. So calling WaitForProcess and naming msiexec.exe in the installation package is all I need to do to ensure the IExpress package remain in memory until the MSI package has completed installation.

The trick was to write WaitForProcess without any dependencies on .NET which may not be installed until after the setup has completed. Indeed, I needed to rely on as few components as possible. C++ without ATL/MFC only requires standard libraries like USER32 and KERNEL.

So here is the code to WaitForProcess:

// WaitForProcess.cpp : Defines the entry point for the application.
//

#include "stdafx.h"
#include "WaitForProcess.h"
#include <psapi.h>
#include <shlwapi.h>

bool IsRunning(LPCTSTR pProcessName) //findProcess should be 1,2 or 3 and tells us which of the predefined processes to look for (see searchString array below)
{
    DWORD Processes[1024]; //Buffer array where enumerated processes will go
    TCHAR ProcessPath[MAX_PATH] = _T(""); //Path of the examined process
    HANDLE hProcess = 0; //Handle of the examined process
    DWORD bytesNeeded; //bytes written into buffer array by EnumProcesses
    int nProcesses; //Number of actually enumerated processes calculated from bytesNeeded
    int i=0;
    bool found=false; //Stop examining further processes if found is true
 
    if(EnumProcesses(Processes, sizeof(Processes), &bytesNeeded))
    {
        nProcesses = bytesNeeded / sizeof(DWORD);
        while((i<nProcesses) && (!found))
        {
            if(Processes[i]!=0)
            {   
                hProcess = OpenProcess(PROCESS_QUERY_INFORMATION | PROCESS_VM_READ, FALSE, Processes[i]);
    
                if(hProcess)
                {
                    GetProcessImageFileName(hProcess, ProcessPath, sizeof(ProcessPath)/sizeof(TCHAR));
                    PathStripPath(ProcessPath);
                    found=!_tcsicmp(ProcessPath, pProcessName);
                }
            }
            i++;
        }
    }
    return found;
}

int APIENTRY _tWinMain(HINSTANCE hInstance,
                     HINSTANCE hPrevInstance,
                     LPTSTR    lpCmdLine,
                     int       nCmdShow)
{
    UNREFERENCED_PARAMETER(hPrevInstance);

    //TCHAR sMessage[1024] = _T("");
    //wsprintf(sMessage, _T("Process: %s"), lpCmdLine);
    //::MessageBox(0, sMessage, _T("Wait For Process"), MB_OK);
    ::Sleep(5000);

    if (IsRunning(lpCmdLine))
    {
        //::MessageBox(0, _T("Found"), _T("Wait For Process"), MB_OK);

        while(IsRunning(lpCmdLine))
            ::Sleep(500);
    }
    //::MessageBox(0, _T("Done"), _T("Wait For Process"), MB_OK);
    return 0;
}

Conclusion

Well, I still find C# a more productive language but it goes to show, when the going gets tough, the tough turn to C++.

Cosy Orbs – Web App Games in HTML5 for the iPhone

2009-12-15T00:20:00.001Z

[Concrete/Interesting] In this article I’m going to talk about HTML5 Canvas and graphics programming for web apps. I’ll be focusing on my experience and as way of example, I will be talking about ‘Cosy Orbs’ – a very simple, interactive graphics web application.

Installing Cosy Orbs

You can install Cosy Orbs onto your iPhone by following the link below in Safari:

http://www.lowrieweb.com/iphone/cosyorbs

Once the page has loaded, ‘Add to Home Screen’ by selecting the ‘+’ icon on the navigation bar at the bottom of the Safari page. Cosy Orbs will now be placed on your home screen and can be run by clicking the application icon.

About Cosy Orbs

In 1999, the moon was knocked out of its orbit by a nuclear waste explosion, sending all 311 inhabitants of Moonbase Alpha into outer space. Also, like a lot of other people, I was looking at Java and Java Applets. Working my way through the SDK and samples, I came across a sample called ‘Graph Layout’. I was quite impressed with Java but I was blown over by Graph Layout. It was so cool. Basically, a string parameter to the applet defined a number of nodes on a network graph. So the string ‘Nigel-Aiesha, Aiesha-Sophia, Sophia-Nigel, Sophia-Melina, Melina-Aiesha’ would define a graph with four nodes (Nigel, Aiesha, Sophia and Melina). In addition, it defines the relationship between these nodes.

The applet would graphically represent these nodes as boxes connected by lines. The lines represent the relationship between the nodes. So, with the example above, the graph would look like:

But that wasn’t the cool bit.

The cool bit was the applet applies an algorithm to the graph that worked to minimize the stress between the nodes. The stress is defined as the length of the connecting lines, measured against a desired value. So if two nodes have a desired distance of 100 and the actual distance is 150, the stress is 50.

Every cycle, the stresses are calculated and the nodes are moved relative to the other nodes so as to reduce the stress.The result is the graph gracefully reorganizes itself into the lowest stress state by moving the nodes about each other.

Because of the nature of the algorithm and the fact that it acts across the entire system of nodes, the process of reducing the stress or ‘relaxing the graph’ is indeed very graceful.

This applet has sat in a dusty corner of my mind waiting to be re-applied or re-engineered. Then came iPhone, HTML5 and Canvas and Cosy Orbs was born.

Cosy Orbs uses a similar algorithm to relax the stress across a network of nodes, but:

It is written in HTML5, JavaScript, jQuery
It is an iPhone Offline web app.
It is more graphical with ‘Orbs’ or shiny spheres rather than boxes with text
It uses a Touch enabled UI rather than mouse.

So how’s it all done?

Offline Web App

This is a must have feature for any web app, especially a game or fun app. No problem on the iPhone, with HTML5 all you need to do is set up a manifest file. Well, not that simple but I’ve blogged about it before so won’t repeat myself here. See iPhone Offline Web Apps – the RESTful Way – Part 1 of 2.

Initializing the Canvas

The Canvas is an HTML5 element that represents a drawing surface. In essence it is a bitmap. HTML5 currently support ‘2D’ drawing operations and some other useful functions over the canvas like streaming the canvas to a string.

I use the following code to initialize the canvas:

     myCanvas = document.createElement('canvas');

    myCanvas.id = 'myCanvas';

    myCanvas.width = 300;

    myCanvas.height = 300;

    $('#myDrawing').append(myCanvas);

After creating the canvas, the element is appended to a DIV on my page. I also remove a compatibility statement. This statement is shown if you run the app in an incompatible browser, otherwise it is removed:

    $("#notice").hide();

    <div id="notice" style="text-align:center"><strong>This application is designed for the iPhone. Link to this page in Safari on your iPhone.</strong></div>

Preloading the Orbs

Unlike the Java Applet, I am representing nodes with lovely coloured spheres. I have five different images for my Orbs; blue, red, green, purple and yellow. So when drawing a node, I will assign it one of the colours.

When drawing I want to work with Image elements, so I need to preload the images before any drawing starts. This was a bit tricky because loading an image requires going to the server to fetch the image data, so the Image.onload() is asynchronous. Because I wanted to wait for the images to finish loading before starting any drawing, I decided to set up a simple timer:

    var imageString = 'images/orb-blue.png,images/orb-green.png,images/orb-purple.png,images/orb-red.png,images/orb-yellow.png';

    var imagesToLoad = 0;

    function initImages()

    {

      $.each(imageString.split(','), 

        function(idx, val) {

          imagesToLoad++;

          var img = new Image();

          img.onload = function() {imagesToLoad--};

          img.src = val;

          images.push(img);

        });

        setTimeout('completeImageLoad()',500);

    }

    function completeImageLoad()

    {

      if (imagesToLoad > 0)

        setTimeout('completeImageLoad()',500);

      else

      {

        // Ready to go

      }

    }

The images are all named in the string ‘imageString’. When loading, I simply split this string, and for each image named, I create an Image element and load from the source. I also increment a load count, counting each image as it’s loaded. Finally I add the image to the list of preloaded images - this will be used when drawing the images.

During the Image.onLoad(), which is fired asynchronously once the image has loaded, I decrement the load count, signalling that this images has loaded completely.

Once all the images have been processed (but not necessarily completed loading), I call a complete method. This is called asynchronously using the setTimeout() method.

Now all I need to do is poll for the load count to reach zero, which will happen when all the images have completed loading. If the images are still loading, the complete method is called again under timer.

Once all the images have been loaded, I need to set up the nodes…

Initialize the Nodes and off we go

Nodes and their relationships are defined by a string called ‘edgeString’. The process of initializing the nodes involves reading this string, and building a list of Node() and Edge() objects. Each Node() object holds the canvas co-ordinates of the node and the image assigned to the node – these are used when drawing the network. Each Edge() object defines the stress between two Nodes(). As a node is created, an image from the list of images is assigned to the node in a round robin fashion.

Once the Nodes() and Edges() are initialized, the network is rendered to the canvas.

Finally, a timer is set to refresh the display:

    function drawCanvas()

    {

      setTimeout('drawCanvas()', refresh);

      relax();

      if (myCanvas.getContext) {

        var ctx = myCanvas.getContext('2d');

        ctx.fillStyle = 'rgb(0,0,0)';

        ctx.lineWidth = 2;

        ctx.fillRect(0,0,myCanvas.width,myCanvas.height);

        for(var j=0; j<nodes.length; j++)

          ctx.drawImage(nodes[j].img, nodes[j].x-21, nodes[j].y-21);

      }

    }

When fired, a function is called to Relax() the graph – that is, to process each node’s stresses, incrementally reducing the stress across the network. Once the stress has been reduced and the network is a little more relaxed, a call is made to render the network to the canvas. This happens every 150ms, which provides a smooth animation with the network slowly relaxing into its lowest stress state.

Rendering is simple, first, a ‘2d’ context is obtained on the canvas. With this context, the canvas is cleared with a black background through a call to the fillRect() function. Then for each node in our array of Nodes(), the image on the node is drawn to the canvas using the drawImage() method.

What about Touch Events

Not much fun if you can’t interact with the Orbs, so I implemented a simple touch interface:

    $('#myCanvas').bind('touchstart touchmove touchend', function(evt) {

      var touch = evt.originalEvent.targetTouches[0];

      switch (evt.type) {

        case 'touchstart':dragNode = findNodeByPos(touch.pageX-this.offsetLeft, touch.pageY-this.offsetTop);break;

        case 'touchend':dragNode = null;break;

        case 'touchmove':

          if (dragNode) {

            dragNode.x = touch.pageX-this.offsetLeft;

            dragNode.y = touch.pageY-this.offsetTop;

          }

          break;

      }

      evt.preventDefault();

    });

To do this I have to bind the touch events, touchstart, touchmove and touchend, to a callback function for the named element. jQuery make life very simple through the use of the bind() method.

In the event handler, the event type is determined and for touchstart events, the nodes are searched for a match to the touch position. That is to say, the nodes are searched for any node under the user’s finger.

Touchmove tracks the movement of a finger on the iPhone surface. I use this to update the screen position of the selected node (if one was found during touchstart). Finally, touchend stops the dragging operation. Job done.

Summary

CosyOrbs, not exactly a game for the iPhone, but I am impressed as to how easy it is to create interactive graphics under HTML5.

iPhone Offline Web Apps – the RESTful Way – Part 2 of 2

2009-12-01T23:09:00.002Z

[Concrete/Very Interesting] Ok, so hopefully you got the static application working offline. I was quite satisfied when I got it working, though not nearly as much fun as watching Push in HD on my Samsung 6000 LED TV (thinner than my laptop – wow).

Now for the RESTful part. We need to make REST calls when online and work from a cache when offline.

Cache Manifest White list

As well as defining the resources that are cached, you can specify resources that should not be cached in your manifest file:

     CACHE MANIFEST

    # Version 0.9.4.1129.007

    NETWORK:

    /iretailpassportsvc/clientservices.svc

    CACHE:

    index.htm

    images/arrow.png

Any resources named under the ‘NETWORK:’ label are considered white listed and should not be fetched from the cache.

Notice that you can name cached resources after a ‘NETWORK:’ section by using the ‘CACHE':’ label.

Naming white listed resources allows us to access resources in our web app that are not in the cache. This solves a serious problem for us. Imagine trying to add your first service call to an offline application with static only resources. You can’t name the service in the manifest as a cacheable resource. This wouldn’t work the first time you went offline and the app would fail to load with a ‘Internet not available’ error. If you omit the resource, the manifest is wrong and you will end up running the cached app, the one without the service call. Real bummer.

‘NETWORK:’ specifies a non-cached resource and one without fallback. There is a ‘FALLBACK:’ label that allows us to specify a non-cached resource and cached alternative. Useful if you want to put up a big banner when offline saying ‘Sorry, come back later’ but not what we are trying to do here.

One final point about the white list before I move on. Unlike the named cached resources, the white list is in fact a resource prefix. So, in the example above, I named my REST service, not the individual methods. This is useful because our methods are likely to have parameters and we don’t know necessarily know what the endpoint looks like until runtime.

The HTML5 Database

So now to storing the results of our RESTful calls. The solution lies in another HTML5 feature – HTML database. In Safari and on the iPhone this means SQLite.

I’m a real fan of SQLite. Great small footprint relational database. I’ve been using it for some time now under .NET as storage for my Outlook plug in.

Storing Service Results

I chose a very simple schema for my database – simple Key/Values in a table using TEXT field types. SQLite, jQuery and HTML5 make it very easy for me:

    function initDatabase()

    {

      db = openDatabase('iRetailPassport', '1.0', 'iRetailPassport', 1000000);

      db.transaction(

        function(transaction){

          transaction.executeSql('CREATE TABLE IF NOT EXISTS settings (k TEXT NOT NULL PRIMARY KEY ON CONFLICT REPLACE, v TEXT NOT NULL );');

        }

      );

    }

A couple of important points about the code above:

CREATE TABLE IF NOT EXISTS is very useful and part of the zero administration nature of SQLite. This statement means I can create and open a database in a single statement. And the transaction succeeds even if the database already exists.
CONFLICT REPLACE is also very useful. It allows me to do an insert even if the record exists. Also knows as an UPSERT or MERGE operation, this save time and code later on.

Because I’m making JSON service calls, the call results are both efficient and ready to store in my database:

    $.ajax(

    {

      type: "GET", url: "/iretailpassportsvc/clientservices.svc/passport",

      dataType: "json",

      cache: false,

      timeout: 1000,

      success: function(passport)

      {

        db.transaction(

          function(transaction){

            transaction.executeSql("INSERT INTO settings (k,v) VALUES ('passport',?);", [passport], null);

          }

        );

      },

      error: function()

      {

        setError(serviceUnavailableString);

      }

    });

Notice the jQuery AJAX call to the server is marked as JSON. It is also important to set a timeout to ensure this function returns if the server is unavailable.

The AJAX method has both ‘success:’ and ‘error:’ callbacks. In the error callback, I’m handling the error. A likely implementation here is to start some sort of dialogue with the user when the event is fired and to cancel that dialogue on error. A dialogue could be information on a status or progress bar for example.

The success callback does the work of posting the JSON response to the database. Because I used ‘CONFLICT REPLACE’ in the database definition, the ‘INSERT’ will be a merge insert.

The success case would also update the user interface with fresh data but I have omitted this from the example to keep things simple.

Storing Images

In my application I was making a call to the REST service to get an image of a barcode that represents the users’ unique identifier. My original design was based on making this call as and when required and for the service to generate the image at run time and stream the image to the client. The strategy to generate at run time meant I could keep storage requirements low at the server and meant I didn’t have to worry about any referential integrity between the user identifier and the image. I wanted to keep this strategy for the offline application and reuse the service interface.

This meant storing an image streamed by the service. Well again, HTML5 comes to the rescue with the <canvas> element.

A canvas is a bit oriented drawing area – a bitmap.

The DOM supports a number of drawing operations to the canvas and also provides methods for serializing the canvas:

    var src = "/iretailpassportsvc/clientservices.svc/barcode/" + passport;

    var canvasImg = document.createElement("canvas");

    var serializedVal = 'data:,';

    var img = new Image();

    img.onload = function() 

    {

      canvasImg.width = img.width;

      canvasImg.height = img.height;

      canvasImg.getContext("2d").drawImage(img, 0, 0);

      serializedVal = canvasImg.toDataURL();

      $("#barcode").replaceWith(img);

      db.transaction(

        function(transaction){

          transaction.executeSql("INSERT INTO settings (k,v) VALUES ('barcode',?);", [serializedVal], function (transaction, results){setTimeout("jQT.goBack()", 1000)});

        }

      );

    };

    img.src = src;

This is very cool. In the code above I am creating <canvas> and <img> elements. I’m then loading the image using a reference to the image service endpoint with img.src = src.

During the image onload() event I set up the canvas dimensions to match that of the image (remember, the canvas is really a bitmap) and then draw the image to the canvas with the drawImage() statement.

The result of this is the canvas is now a bitmap representation of the image loaded from the server.

Finally, I serialize the image to a data URL. A data URL is a BASE64 representation of a resource and can be used anywhere a resource is used. So in this case it will be something like:

    data:image/png;base64,……

So now I have a serialized string representation of the image generated at run time by my service. All I need to do now is save it to the database.

Later on, I can load this string and use a simple statement like:

    img.src = data

to display the image.

Asynchronous Everywhere

Remember that calls to the database and AJAX are asynchronous. Methods around these calls provide callbacks and you need to put your code inside the callback or you will see some very odd behaviour.

I got caught out when handling the image serialization. The call to load the image is delayed because the source is a network resource. So the img.onload() may take time to complete. My mistake was to write the serialized canvas data to the database in code following my img.src = URL. This had very strange results and was saving incomplete data (thank goodness for Web Inspector or I may still be sitting scratching my head).

The fix was to put all the serialization to database inside the img.onload().

Offline/Online Data Strategy

Now we know how to white list service calls, where to store the call results and how to store these results. One final point is around the offline/online data strategy.

A key benefit of a RESTful architecture is to provide fluid network applications without the need for holding vast datasets client side. So, if you need data or need to transition state, you call a service method. An offline model goes against this and necessitates storing data working with aged data.

But offline working cannot be ignored on mobile devices – just try using the internet on the train or underground.

The trick is to strike a balance between offline data fetches and online service fetches.

One strategy for offline/online data is to always make a service call and if the call fails or there is a timeout, read from the database. This helps keep the age of the data low but will result in a choppy user interface with a lot of ‘Please Wait’ timers.

A better strategy is to do things the other way round. That is, always read from the database. At the same time, issue a service call. If the call comes back with data, update the cache and user interface. To help with usability, you can always display a ‘Refreshing…’ message to the user is a status area.

Conclusion

As you can see from the this blog, the theory of offline RESTful applications is not a big challenge. The implementation raises a number of pitfalls which I hope I have been able to highlight.

But when it works, believe me…It’s all worth it.

iPhone Offline Web Apps – the RESTful Way – Part 1 of 2

2009-12-01T12:06:00.005Z

[Concrete/Very Interesting] Whist building a web application for the iPhone, I was presented with a problem. One of my team managed to replicate the work we've been doing using Objective-C. I looked at the code – didn't like it but it worked. The problem was, it worked offline.
‘Can't have this’ I thought, so I embarked on making my application offline capable.
Sounds easy – well in principle, it is. In practice, there were a few pitfalls that I thought I'd better blog about. Of course, I had a cold and had just received an H1N1 vaccination, so maybe on a good day…
Anyway, here is some background and my tips to Offline Web Apps, the RESTful way.

HTML5 Offline Application Cache

You can find out lots of good stuff about this on the Internet. The official reference from Apple can be found here. The key is to create an cache manifest file naming all your resources - HTML files, Scripts, Style Sheets, images, and so on… You then reference the manifest file (.manifest) in your HTML page(s) in the HTML tag:

<html xmlns="http://www.w3.org/1999/xhtml" manifest="app.manifest">

When the application runs, it follows (roughly) the logic outlined below:

Manifest Named – load the server manifest
If no response from server, load manifest from cache and all resources named in the manifest from cache
If server manifest found, compare to cached manifest – byte by byte comparison
If server manifest is different to cached manifest, load all the resources named in the manifest from the server

Using a manifest and application cache is easy enough but there are some gotchas, so here are some tips to help you along:

Tip1: Test in Safari 4 on your desktop

Safari is a really good emulator for the iPhone and is a excellent place to start. It is far easier to test your code, clear the cache, manage resources, and so on, while working on your laptop than it is on the iPhone. And you get Developer Tools which is a real bonus. Web Inspector is a superb debugging tool will give you everything you need to debug your app, resources and even the database.

Tip2: Add the manifest at the start of development

If you start with offline, you can quickly ensure you have got the basic structure of the manifest and resources correct. My tip is to implement the offline cache when there are only static resources to worry about, before we complicate matters with service calls. It’s much easier to validate.

Tip3: Version your app and manifest.

When working offline, your cache is only refreshed if the application fetches a newer manifest file from the server. I will say this again – changes to your application won’t be seen, that is, you will read from the existing cache up until the manifest changes. So to keep everything in line, it is a good idea to put a version string into your application, something you can see from the app or a debug menu, and a copy of that version in your manifest file. Every time you make a code change, change the version in the app and in the manifest.

    CACHE MANIFEST

    # Version 0.9.4.1129.004

    NETWORK:

    /iretailpassportsvc/clientservices.svc

    CACHE:

    index.htm

    images/arrow.png

    images/background.png

By doing this you ensure the manifest changes along with the application and because the manifest changes, your cache will update with your changes.

If you are generating your manifest server side in PHP, ASPX or similar, you should be able to automate this, creating a version with a unique number or date/time stamp (see Tip 5:).

One other thing. When you deploy and run your app after a change, the change is loaded to your cache for future executions. But the first time running after deployment, you won’t see a change in your app. Seems odd but it is just like releasing any program update – the update is sent down to your machine, but you only see the update the next time you run. So when you are testing, remember to:

Deploy
Run to refresh the cache
Re-run to see the change (check the app version).

Tip 4: Make sure the manifest file is served with type "text/cache-manifest"

You have to ensure your web server recognises the manifest file type and associates this with the required MIME type.

IIS 7 is especially irritating. It uses .manifest for ‘Click Once’ (now back off, don’t start me on that subject). So it recognizes this extension but associates it with the MIME type "application/x-ms-manifest". This won't work. You can change this at the server level or application/file level in IIS – either way, change the MIME type to "text/cache-manifest".

I found a very cool site to test the HTTP Response Headers – if you request the manifest file, you can check your web server is serving with the correct MIME type. The site is called http://web-sniffer.net/ . You can also use tools like Fiddler2.

Tip5: Make sure the manifest file contents are 100% correct

And I do mean 100% correct. You need to name ALL the resources used to serve up your app. If anything is missing, the app will not load from the cache. Worse still, if it was working and you subsequently make a mistake in the manifest file, it will load from the old cache, and you will not see your changes. You could be puzzled for hours trying to work out why you can't see your changes!

The simplest approach to ensure you have a correct manifest file is to list all the files in your project, including files in sub-directories. You need to specify the files and their paths relative to the manifest file and the manifest file should be placed in the application root.

As an alternative strategy, you can dynamically generate the manifest together using server side code (such as PHP or ASPX).

For example in PHP:

    <?php

    $version "3.1.0000";

    header('Content-Type: text/cache-manifest');

    echo "CACHE MANIFEST\n";

    echo "#Version: ".$version;

    $dir = new RecursiveDirectoryIterator(".");

    foreach(new RecursiveIteratorIterator($dir) as $file) 

    {

    if ($file->IsFile() &&

    $file != "./manifest.php" &&

    substr($file->getFilename(), 0, 1) != ".")

    {

    echo $file . "\n";

    }

    }

    ?>

Save the file in your app root as manifest.php, then in your HTML file(s):

    <html xmlns="http://www.w3.org/1999/xhtml" manifest="manifest.php">
  

Tip 6: Testing in ‘Airplane Mode’

You should be able to test your app at this stage. On the iPhone, you can place the phone into “Airplane Mode”. If your offline cache is working, you should be able to load and run you app.

If it is not, you will get an alert informing you you are not connected to the Internet.

A bit tricky but…

Ok, that was a bit tricky – especially if you have “Man Flu”, and part of the problem was I wasn’t convinced this “offline mumbo jumbo stuff’ really worked. But it does. And when it does it opens up a whole world of opportunities for writing applications for the iPhone.

But that’s not the whole story – I still hadn’t managed to build a offline RESTful app.

What about your service calls?

[Part 2 Discusses a strategy for RESTful caching].

RESTful Teamwork – Tips for Agile iPhone Development

2009-11-22T22:20:00.002Z

[Concrete/Interesting] I’ve been working with a small team on an iPhone project. I bet half of you out there are doing something similar. One member of the team is struggling with Objective-C – I need to understand the costs and benefits of native development on the iPhone. The rest of us are working on a WebKit browser app for the iPhone . Naturally, I decided we must use REST to provide a good balance of speed and functionality on the device. I’m using the jQTouch framework (based around jQuery 1.3.2)with a bit of AJAX on the device framework and the server is developed in C#. The REST service is implemented under WCF, so building server side is a dream (see REST in Windows Communication Foundation).

Team working is a breeze – we have a basic data model and use this for reference. However, under my direction we are building up the solution screen by screen, focusing on the end user application and looking server side when we need data or processor. The team works very well because all we need to do is agree on the REST interface – the server implementation and implementation of the data model comes second. And to test, just dummy up an interface – it proves the workflow and allows the device team to focus on usability and the server team to focus on the service implementation.

I chose this approach for speed – I want to engage our client as we explore the iPhone and to do this, we needed to be agile, developing our prototypes quickly. Web developments are quick, especially if you chose the right framework. REST allows us to focus on the client with our client while perfecting the implementation in a background mode.

So here are my tips for agile iPhone Development:

Develop the client as a web application, it looks good with WebKit extensions and can always be re-implemented as a native application as and when you firm up the implementation. No messing with Apple and Mac – you can even test using Safari under windows.
Use Web Services and a bit of AJAX– this helps you prototype because interfaces can easily be dummied up, then perfected in the background. And if your services are doing the real work for you, the client takes on a more disposable nature. If you want to rewrite native later on, you don’t have a lot of core implementation to throw away
REST under WCF allows for fast interface development. Server side in .NET opens up technologies like LINQ and magically, your server side code is a lot more fluent.
Don’t worry too much about the data model – focus on getting the interface correct. This will start to dictate the model requirements – if you need the data in the client, the XML on the interface provides a schema that will be close to your required data model. It all just unfolds before your eyes.
Have someone working on a native client in the background – this helps build skills but buffers you from having to experience any pain in front of your client.

Finally, it’s RESTful, but is it Agile? Don’t know but my client is happy.

The Squirrel on Cloud Computing

2009-10-24T21:22:00.008+01:00

[Concrete/Important] The Squirrel is pulling his tail fur out – I’m surprised he has any fur left. He’s been trying to convince the Bears that Cloud Computing is important and in paw’s reach but the little Acorn ERP is just too big to get up into the clouds.

The first push back came from Little Bear, and the Squirrel was expecting this. “Cloud Computing is not really aimed at us” said Little Bear.

Little Bear is scared, probably has too much on his plate. And he’s been nurturing the Acorn and building this huge Oak Tree. In a way, he’s right, though Squirrel. The Cloud is not for our type of ERP, not today. We need to be lean and we need to change if we’re going to live in the Cloud. And it’s the same for On Premise and Hosting – storage may be cheap, but the more structured the requirements, the higher cost per GB. And it’s costing us an arm and a leg to host our Oak Tree. “No way will we be able to manage a forest of Acorn ERPs, not unless we change...” replied the Squirrel.

“And we are not just chucking images onto a file system,” said Squirrel, “We need a relational store and that costs money. We need to think how we can move down to Structured Storage, where storage is cheaper, in the Cloud or otherwise”.

Now Squirrel has always and still believes that sense will prevail. Just then, Mummy Bear entered the debate. “I’ve talked to a number of bears and we think the Cloud is at least 2 year away” she said. “What the f***?” thought the Squirrel. “Possibly true,” he replied, “but not sure what that has to do with it.” Squirrel now wondered where this was going – it certainly didn’t look like the bears were convinced the Cloud was something they should take seriously. “The Cloud may be a way away, but we still need to get lean with our data, regardless of the Cloud. The point is, if we do, we will be Cloud ready and that has to be good”. Where the hell is Daddy Bear, thought the Squirrel?

Cloud Computing is not a fad, it is a step in the evolution of Software and the commerce of Information Systems. The move towards Software as a Service is driven by the commerce of lowering the total cost of ownership. This means I’m willing to “Pay per Click” because I don’t have to own the software, hardware, operations and support. But software companies will die if they just swap the billing model from “license and support” to “service utilization” while taking on the infrastructure costs. This is especially true of hosting but also for the Cloud. It’s not the license cost, it the cost of operations. And the key to this is data. A huge data set in a relational store requires not just disk space, but CPU and memory. And this means support services around the RDBMSs. Add in resilience and high availability and the costs will soar. By dropping down to unstructured or weakly structures storage, costs can be removed without sacrificing storage capacity, resilience or availability. And your scalability improves.

The thing about the Cloud is it forces you towards this discipline. The Squirrel knows this and at the risk of losing all his fur, he needs to ensure the Bears understand this too.

Is your code RESTful

2009-10-22T17:59:00.002+01:00

[Concrete/Important] Well nearly, but not 100% - well not yet.

A few years ago I wrote an HTTP GET/POST web service (sounds RESTful) between a Windows CE.Net client on a hand held device and an Apache server running a light SOAP Web Service. It wasn’t hard to write but the messages were specialized, so fell short of being a true RESTful implementation.

REST stands for REpresentational State Transfer and refers to an architectural style or pattern. In essence it describes clients served by services where state transitions or transfers in the client take place through the representation of a new state in the data returned by the service.

Web applications architected in this way have stateless servers and would typically map messages or web service requests onto the HTTP verbs GET/PUT/POST/DELETE.

At its core, my latest project http://www.far2muchmail.com/ , uses messaging between an Outlook desktop client and a web service. The web service is in PHP and not currently highly scalable. Over the last couple of years I’ve been using XML-RPC and make extensive use of this for messaging between my Outlook plug-in and the web service. However, I’m thinking about making a more RESTful approach.

But XML-RPC is cool. It is well supported by the guys at http://www.xml-rpc.com/ and others around the world. It provides remote execution interoperable between .Net and PHP and many others like Perl, Python, Ruby, Objective C... I really love it.

Client side under .Net, its asynchronous so you need to think about a RESTfully and this is typically how I use it.

So what’s wrong with XML-RPC, it certainly works for http://www.far2muchmail.com/.

Well it does now. However, XML-RPC has a few niggles. First it’s bound to HTTP, not really a problem but it might be if I want to move my services inside the cloud.

XM-RPC is also a bit verbose – the XML message that is. And it gets worse with binary data. This also leads to weak implementations and misinterpretation of the protocol. So if you want to talk to a public service, you may have to code for that particular implementation.

So, if you want to move to a more scalable service architecture, XML-RPC may not be your first choice.

REST based on HTTP verbs is now well established, very lightweight and simple to interpret. With the big players like Microsoft, Google and Amazon adopting the RESTful approach and providing a REST interface to anything that moves, it may be time to start thinking RESTfully.

And as REST builds momentum we are going to see a lot more services out there that speak to REST clients, including services hosted in the cloud (Cloud Services). This should mean that in the near future you should be able to benefit from high scale platforms running scalable services, on premise and in the cloud, ranging from business application services through to storage and bus and communication services... all speaking RESTfully.

So for me at least, I think it is worth taking a more RESTful approach.

"Better to say nothing and be thought a fool..."

2009-10-22T00:03:00.002+01:00

[Abstract/Important] "Better to remain silent and be thought a fool than to speak out and remove all doubt." - I read this on one of my colleague’s Skype. Made me wonder ‘why do people say this sort of thing?’ and I was reminded, this is something my Dad used to say to me.

I guess some people say this because they believe it to be true. Seems reasonable, maybe that’s why Dad used the phrase. Sometimes people use the phrase because they have nothing better to say – now that’s perverse.

Although not every topic attracts or even deserves debate, I believe that if a debate is offered, one almost has a duty to present one's views. More so, at the risk of saying something foolish, in any debate of weight, whether or not your view is solicited, you must speak up. To do otherwise is indeed foolish.