Layering System

When discussing with Mathieu Virbel about the possibilities of implementing layering system in NUIPaint, he introduced me to this world of Design patterns. He gave this Wikipedia link and asked me to identify the pattern which is similar to the layer system I thought about. Even though I had a idea about implementing layering system, I failed to identify the right pattern. He then directed me to this pattern called Facade.

Facade Design Pattern (Source: Wikipedia)

Voila its was very similar to the structure I had in my mind. Then I realized how important it is to learn this important concept of Design Patterns eventhough I had heard the name in college 😛 I had never given much interest to it. Now I realise its potential.

So i planned to implement three main classes.

  1. Canvas Class: This is the main class which gets created by the app. Its hold all classes as well. And provides interfaces to access the layers, brush controls, Saving the manipulated images
  2. Layer Manager Class ( FACADE ): This class maintains the creation and deletion of the layers. It also maintains a list of layers currently available, number of layers in list.
  3. Layer: Basic Unit of Layer, which draws itself and handles touch input.

This method of using layer manager as facade works pretty well. Next problem was to create a UI for accessing the Layer Manager features like creation of layers, deletion of layers and even handling layer sorting. So I implemented a new class called LayerList Manager. This class provides UI to create new layers, delete multiple layers in a form of kinetic scrolling list.

Below is a  UML class diagram of the Layering system that I did

Class Diagram

Class Diagram

I really thank my bro Prashanth Patali and Mathieu for all the guidance they gave me in correcting this UML Diagrams, I’m now confident enough to draw the UML’s 🙂


1 thought on “Layering System

  1. Pingback: NUIPaint Pre Final Eval Report | UI Addict

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s