GoHarsha.com

Historical Evolution of Android AppBar

Fri, 14 Jan 2022 00:00:00 +0000

Yesterday when I was lurking in the Coding In Flow Discord, someone posted a question there.

This is confusing the hell outta me. So actionbar is the default one and toolbar is the custom one that is also recommended to use because of higher compatability. And the appbar is just a categorization name for the actionbar and the toolbar. Did I get that right? 😅

This was a pretty good question, and one that I had when I was getting into Android as well. So even though he got it right, I decided to answer it with a bit of the history lesson on how things evolved, as history lessons are pretty interesting and people will never forget the answer in future.

The introduction of `ActionBar`

In the older versions of Android, up until API 11, every window used to have a title bar. This just used to show the name of the activity which is being shown and you can control it by using the android:label property in XML Manifest when you declare the activity.

See the simple title bar on the screens saying New contact? That is the title bar and up until API 11, each and every activity used to have it.

In API 11 (Honeycomb) this was enlarged and new options were added to show a logo or an icon. In order to control this, new class called ActionBar was introduced. This class is part of the Android Framework itself. An interesting thing is, this ActionBar also supported tab based navigation (now deprecated) which was used in the Android Browser.

This is a screenshot from the add email account screen from a tablet running Android 3.0 Honeycomb (API 11). In the title you can see the icon and the large area for the name. Apart from this, the ActionBar also supported 3 different navigation modes.

Normal mode with label
Tab based navigation
Dropdown based navigation

Since Fragments are introduced in the same API level 11, the tab based navigation is implemented based on fragments. It is deprecated now, but if you are interested, you can take a look at this YouTube video which demonstrates how they used to be.

It is pretty old, and deprecated now, but is an interesting history lesson nonetheless.

The introduction of `Toolbar`

In API 21 (Lollipop) the Toolbar class is introduced. This is because of the move to Material Design which introduced the UP button (the left siding arrow that you see today in most apps) and built-in ActionBar never supported that. Also, the navigation aspect of the app is completely re-imagined and standardized. Now, this Toolbar is implemented as a Custom View (also built-into the framework) and can be placed anywhere you want in your app (in a layout even nested). Google Maps is a notable app that made use of Toolbar right from the start.

So, is all that changed is the name? No, there are other changes as well.

Remember that I said there were other navigation methods that are supported by the ActionBar? This is now generified using support for custom views.
Along with the title, now we can also show a second label just below that, as a subtitle.
A arbitrarily wide logo image which can fill the entire height of the toolbar.

Remember that this class is only introduced in API 21? That is why we have the Toolbar class from the AppCompat library instead, allowing us to use these toolbar features on API 16+.

The introduction of `AppBar`

Now comes the part of AppBar. Material design came out originally in 2014 and it is in 2018 they released second version of material design, the M2. The design language of M2 called a Toolbar as an AppBar. Just a name change.

So in essence:

AppBar is the design component name.
ActionBar is the older implementation.
Toolbar is the newer implementation.

Hope this clears up now.

New Theme Updates

Tue, 21 Dec 2021 00:00:00 +0000

It has been a while since I wrote anything in this site and I wanted to give it back some love. Both in establishing a personal brand and also share some things about what I love. Also, since I have last updated my website in 2016 and that is 5 years ago, I thought, well let me first give my site a make over. So I started in last April, but this time, decided to go with the proper way.

Why I needed to make this makeover?

Back when I first made this website, I was a student. But today, I’m a working professional Software Engineer with 4 years of experience. Every project that I was part of at work, always started with a design. Seeing that, I also started to read more about design thinking.

To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatise, to persuade, and perhaps even to amuse.

Paul Rand, Author, Graphic Designer, Teacher

So, what did I want to clarify? What did I want to simplify? As much as this is interesting quote, my thoughts are actually pretty simple. I went back to the basic question, which is, what do I want this site to be viewed as?

And the differences are quite a lot.

I wanted people to see my site as a reflection of myself. And I wanted them to see me as a professional software engineer and not as a hacker.
I wanted people to see the site with ease. However, I used stark different colours before, like Blue for the UI and Green for Headings.
When people first saw my site, I wanted them to make a connection with me in the first sight. And I don’t want them to go to home page to find out who I am.

The Design Phase: To the drawing board!

The early design phase wasn’t great. But expected of course. I went on to learning how to make designs in Figma and started with what I needed the most. Since what most people look for in my site is actually either the blog section or the tutorials section (deduced from Google Analytics data), I started with the blog page.

Initial layout for blog page

When you’re making designs for the first time, it is pretty easy to get carried out. I got carried away too, and spent almost a month trying to pick colours. After a lot of time trying out different things after day work in office, I made these designs. Don’t even assume I took too much time to design just this – firstly I’m not a designer, and secondly I have my day work as a full-time software engineer.

I did get carried away, also made the dark theme

This makes sense in Figma, and looks beautiful to the eye too, but then UX comes into the picture.

What happens if this page is running on a desktop with very large screen space?
What happens if this page is running on a mobile device with small screen space?
Are the colours really easy to be viewed by the users?

So after thinking about those two questions for a while, I came to the following conclusions.

If the screen is large, then the sidebar has to stick to the left edge, and the pagination should attach to the right edge of the screen.
If the screen is small, then the sidebar will be omitted and the pagination should convert to the horizontal one, like in the existing website.
This one is hard to tell, so I have tried to use different tools. After careful observations from me and also some of my colleagues, I decided that the dark mode is not easy on the eyes.

Saying hi to the Implementation Hurdles!

Let’s first get this fact out: I’m not a web developer. Professionally I’m an Android Developer, and sometimes I work on iOS apps too. Even though I got this design sense since mobile apps are also in the front-end realm, there are a lot of striking differences too.

Like if you see the sidebar today and compare it to the design, it was hard to push the credentials to the bottom of the screen. And after I did that, I got a 4k monitor and stretching it to the very end made it hard for people to read them. If you still didn’t understand, think why did Linus failed to ZIP up and send files in his Linux Daily Driver challenge.

Bootstrap 5, even though it made writing layouts for different screen sizes a lot easier, it still meant that I have to have both the layouts in the single HTML file and only the right one will be visible depending on the media queries. This is bad from the UX point of view. First, the HTML file will become too long the more layouts I support making it hard. Second, my original design has different fonts for mobile and desktop layouts.

This also meant three places to place the paginator making it harder to debug. So, don’t push the profile text to bottom, no more side pagination and no more too complex layouts.

These aren’t all, there are countless hours spent browsing through StackOverflow for some of the issues which regular Web Developers might think are petty small issues. After a lot of searching and hacking on styles, the current MVP of the site is born and I rushed to deploy it to GitHub Pages.

Deployment is done, what next?

There are still a few bugs to be honest. Like in the mobile layout, the code snippets cause the user to be needing to pinch out zoom. I tried with the box-sizing attribute and setting it to both border-box and content-box but then this still happened. This never happened in Bootstrap 4 which I was using in my original theme for instance.

There are some places where I had to use a hack of using a .container inside a .container-fluid element to acheive the desired spacing around the post. Also had to hard code the max-size of the container on desktop since I feel Bootstrap’s default value is too big for desktop layouts (yes, even on my 4k screen).

There are places where because of improper organization, this site is importing fonts in multiple places although it compiles down to a single CSS file. This causes loading delays, so have to fix it out.

These will be ironed out over the coming few days. But hey, no site is perfect here isn’t it? Anyways, this is the update that I wanted to give you guys.

Thanks for stopping by, and reading it through!

Simple way to define ViewModel Factories

Tue, 16 Feb 2021 00:00:00 +0000

I started working on my final project for Udacity’s Kotlin Android Developer Nanodegree, where I started noticing that my ViewModel factories are becoming large and complex. So I wanted to keep them simple.

What did I already have?

To have an idea of how complex they have become, see the following ViewModelProvider.Factory that I have created for VoterInfoViewModel that I have in my project.

class VoterInfoViewModelFactory(
        private val context: Context,
        private val election: Election
) : ViewModelProvider.Factory {
    override fun <T : ViewModel?> create(modelClass: Class<T>): T {
        val database = ElectionDatabase.getInstance(context)
        val repository = ElectionRepository(database.electionDao)

        val followString = context.getString(R.string.follow_election)
        val unFollowString = context.getString(R.string.unfollow_election)

        return modelClass.getConstructor(
                ElectionRepository::class.java,
                Election::class.java,
                String::class.java,
                String::class.java
        ).newInstance(repository, election, followString, unFollowString)
    }
}

The problems I have with it are the following:

It is too long for a simple ViewModel creation.
Getting the constructor and creating a new instance isn’t intuitive.
I don’t want to write a class every time I make such simple factories in the project.

How did I abstract it out?

The first thing I noticed is that the structure is almost the same for all the factories I currently have in the project, and am sure that only part that changes is the body of the factory. So I created a class which delegates the body to a provider.

class SimpleViewModelFactory(
        private val `class`: Class<*>,
        private val provider: () -> ViewModel
) : ViewModelProvider.Factory {

    override fun <T : ViewModel?> create(modelClass: Class<T>): T {
        if (!modelClass.isAssignableFrom(`class`)) {
            throw IllegalArgumentException("ViewModel type is non assignable")
        }

        @Suppress("UNCHECKED_CAST")
        return provider() as T
    }
}

So what is changed here? I delegated the body of the function to a provider which is a lambda. Also, the check is now done before hand, and now a proper exception is thrown in case of a misfire, which is pretty nice.

Also, I didn’t want to provide the class to the constructor always, so I made one inline function using reified generics to help me out.

inline fun <reified T : ViewModel> viewModelFactory(noinline provider: () -> T) =
        SimpleViewModelFactory(T::class.java, provider)

The use of reified generics is only allowed for inline functions, but care has to be taken so that provider doesn’t get inlined.

What is the end result?

So after adding this utility, I was able to refactor the factory to an even simpler and nice blob of code. See it for yourself.

fun voterInfoViewModelFactory(context: Context, election: Election) = viewModelFactory {
    val database = ElectionDatabase.getInstance(context)
    val repository = ElectionRepository(database.electionDao)

    val followString = context.getString(R.string.follow_election)
    val unFollowString = context.getString(R.string.unfollow_election)

    VoterInfoViewModel(repository, election, followString, unFollowString)
}

Now it is a lot more cleaner and easy enough to follow! Do let me know what you think about this in the comments. Happy hacking!

Multi Lingual Support

Fri, 20 Jan 2017 00:00:00 +0000

It’s been a while since I last posted, and in the new year, I’m back with a new addition to the site code. As you can see here in this page, there is now a language selector. Use it to read the same post in a different language.

ఇకపై మరిన్ని భాషలు

Fri, 20 Jan 2017 00:00:00 +0000

మీకు తెలుసు నేను పోస్ట్ చేసి చాలా రోజులయింది. అందుకే ఈ కొత్త సంవత్సరం లో ఈ వెబ్సైట్ కి ఒక కొత్త ఫీచర్ ని పరిచయం చేస్తున్నాను. ఇకపై నా బ్లాగ్ పోస్టులు మరిన్ని భాషలలో చదవచ్చు. మీరు చూసినట్లయితే ఈ పోస్ట్ పైన ఒక language-selector ఉంది. ఈ పోస్టును ఇతర భాషలలో చదివేందుకు దానిని ఉపయోగించండి.

अब ज्यादा भाषायें

Fri, 20 Jan 2017 00:00:00 +0000

आप को पता हे की में ज्यादा दिन के बाद एक पोस्ट लिख रहा हूं। इसलिए इस नया वर्ष में मेँ इस वैबसाइट को एक नया फीचर परिचय कर रहा हूं। आज से मेरे ब्लोग पोस्ट्स ज्यादा भाषाएं मेँ आप पड़ जायेंगे। इस पोस्ट की ऊपर हें की एक language-selector, इसी पोस्ट को और भाषा में पड़ने केलिए उसकी उपयोग करें।

Collision Detection కోసం AABB Trees

Sun, 25 Dec 2016 00:00:00 +0000

వీడియో గేమ్ ప్రోగ్రామింగ్ లో collision detection అనేది చాలా సంక్లిష్టమైన అంశం. అంతే కాకుండా ఇక్కడే చాలా performance సంపాదించుకోవచ్చు. ఇందుకోసం మనకి అనవసరమైన కంపారిజన్స్ ని వదిలేసే చాలా డాటా స్ట్రక్చర్లు ఉన్నాయి, QuadTrees, Grids, BSP Trees, OcTrees వంటివి వీటికి మంచి ఉదాహరణలు. ఈ పోస్టులో మనం collisions ని చాలా వేగంగా కనిపెట్టే AABB Trees గురించి చదువుదాం.

Erin Catto (Box2D) కి మరియు Nathanael Presson (Bullet3D) కి వారి ఒరిజినల్ ప్రాజెక్టులను open-source గా విడుదల చేసినందుకు కృతజ్ఞతలు తెలుపుకుంటున్నాం. ఈ డాటా స్ట్రక్చర్ ని చదివేందుకు వాటిని స్ఫూర్తి గా తీసుకోవడం జరిగింది.

AABB Trees అంటే ఏమిటి?

ఈ AABB Tree అనేది మనం మామూలుగా ఉపయోగించే binary tree లాంటిదే, కాకపోతే ఇక్కడ మనం మన AABB లను leaf nodes లో ఉంచుతాం. దీని వల్ల మనకి కొన్ని ఉపయోగాలున్నాయి. అదేంటి అంటే మనం మిగిలిన collision డాటా స్ట్రక్చర్లతో పోలిస్తే ఇందులో పరిధులను ఉంచనవసరం లేదు. దీనిని చెప్పేకంటే చూపిస్తే బాగా అర్థమవుతుంది, ఈ బొమ్మ ను చూడండి.

మీ వద్ద పైన చూపిన విధంగా ఒక scene ఉంది అనుకోండి. అందులో A, B, C మరియు D లు మన గేంలోని క్యారెక్టర్లను కలిగి ఉండే AABB లు అనుకోండి. ముందే చెప్పిన విధంగా మన ట్రీలో AABB లు చివరలో ఉంటాయి, అంటే leaf nodes అన్నమాట. అయినప్పటికీ మనం మధ్యలోని నాడులకి కూడా AABB లను తమ కింది వాటిని కలిగి ఉండేలా అమర్చుతాం. అంతే కాకుండా ప్రతీసారీ కదిలిన వాటిని తీసివేయాల్సిన అవసరం లేకుండా మధ్యలోని నాడులని కొంత వదులుగా చేస్తాం. అదే మీరు ఈ క్రింది బొమ్మలో చూడచ్చు.

ఇక్కడ మీరు చూసినట్లైతే A మరియు B అనేవి ఎడమ నాడివి, అలాగే C మరియు D అనేవి కుడి నాడికి చెందినవి. ఇందువలన మనకు వీటి లోనుండి కంపారిజన్స్ చాలా వేగంగా జరుగుతాయి. ఇప్పుడు మనం మన node ని ఎలా రిప్రెజెంట్ చేస్తామో చూద్దాం.

నోడ్ ని కోడ్ లో ఎలా వ్రాయాలి?

నా మిగతా టూటోరియల్స్ లాగానే ఇక్కడ కూడా నేను మీకు అసలైన కోడ్ ని ఇవ్వను. నేను మీకు psuedocode ని మాత్రమే ఇస్తాను, మరియు మీకు ఇది ఎలా పని చేస్తుందో వివరిస్తాను. దీన్ని మూలంలో array లను ఉపయోగించి వ్రాసినా, మనం ఇప్పుడు దీన్ని linked-list విధానం లో వ్రాద్దాం. ఆ కోడ్ ఇలా ఉంటుంది.

struct Node
{
    // The link to the parent Node
    struct Node* parent;

    // The AABB of the current Node
    struct AABB aabb;

    // The left and right children
    struct Node* left;
    struct Node* right;

    // The user data, can be used to identify the nodes
    void* userData;

    // The height, for maintaining balance
    int height;
};

ప్రతి నాడికి ఒక పేరెంట్, ఒక AABB, పిల్ల నాడులు, ఒక డాటా ఫీల్డ్ ఉంటాయి. మొదటి నాడి (root నోడ్) కి NULL పేరెంట్ అవుతుంది. అలాగే leafs కి పిల్ల నాడులు ఉండవు. ముందు నేను మీకు queries ఎలా చేయాలో చెప్పి ఆ తరువాత insert చేయడం, delete చేయడం ఎలాగో వివరిస్తాను.

AABB tree నుండి query చేయడం ఎలా?

AABB tree నుండి query చేయడం అన్నింటి కన్నా చాలా సులభమయిన పని. ఈ ఫంక్షన్ కి మనం root ని, మనం వెతకాల్సిన పరిధులని, మరియు ఒక లిస్టును ఇస్తే intersect అయ్యే అన్ని AABBలను ఆ లిస్టులోకి చేరుస్తుంది. ఎలాగో మీరే చూడండి.

void aabbTreeQuery(struct Node* node, struct AABB aabb, struct List* list)
{
    // Test for NULL node
    if (node == NULL)
        return;

    // Only process the node if it intersects the given AABB
    if (aabbIntersect(node->aabb, aabb))
    {
        if (node->left == NULL && node->right == NULL)
        {
            // It is a leaf node, add it to the list
            listAdd(list, node);
        }
        else
        {
            // Query the child nodes recursively
            aabbTreeQuery(node->left, aabb, list);
            aabbTreeQuery(node->right, aabb, list);
        }
    }
}

ఇంత కన్నా సులభంగా మరేదీ ఉండదు. మనం root తో మొదలు పెట్టి root యొక్క AABB మన పరిధి లోనే ఉందో లేదో చూస్తాం. ఇలా ప్రతీ నోడ్ లోనూ అది మనం వెతికే పరిధులలో ఉంటే దాన్ని మాత్రమే ప్రాసెస్ చేస్తాం. ఈ విధానంలో మన దగ్గర చాలా entities ఉన్నప్పటికీ మనం మన tree ని బాలన్స్ చేస్తాం కాబట్టి మనం చాలా తక్కువ కంపారిజన్స్ చేస్తాం.

AABB లను ఇన్సర్ట్ చేయడం ఎలా?

ఇప్పుడు మనం AABB లను ఇన్సర్ట్ చేయడం ఎలాగో చూద్దాం. ఇక్కడ మనం ఇన్సర్ట్ చేయడం మాత్రమే కాకుండా ఇన్సర్ట్ చేసిన తరువాత నాడి లోని లింక్స్ ను కూడా సరి చేస్తాం. ఈ ఇన్సర్ట్ ఫంక్షన్ మనకు ఇన్సర్ట్ చేసిన కొత్త నాడి యొక్క పాయింటర్ ను తిరిగిస్తుంది. ఇప్పుడు మనం ఆ కోడ్ ను చూద్దాం.

struct Node* aabbTreeInsert(struct Node** root, struct Node* node)
{
    node->left = NULL;
    node->right = NULL;
    node->parent = *root;
    node->height = 0;

    // If the root is NULL, create the node and set it to the root
    if (*root == NULL)
        *root = node;

    // If the root is a leaf node, replace root with a temporary parent
    else if (*root->left == NULL && *root->right == NULL)
    {
        struct Node* newParent = (struct Node*) malloc(sizeof(struct Node));
        newParent->parent = *root->parent;
        newParent->left = *root;
        newParent->right = node;

        // Replace links in newParent's parent
        if (newParent->parent->left == *root)
            newParent->parent->left = newParent;
        else
            newParent->parent->right = newParent;
    }

    // Otherwise we have to select whether to insert in left or right
    else
    {
        // TODO!! We have to find where to insert, left or right?
    }

    aabbTreeRecalculateUp(node);

    // Return the node
    return node;
}

ఇప్పుడు మనం ఒక సమస్య గురించి మాట్లాడుకుందాం. మనం మన కొత్త నాడిని ఎటు వైపున ఇన్సర్ట్ చేయాలి? ఎడమ వైపు చేయాలా? లేక కుడివైపు చేయాలా? ఇది కొంత జటిలమైనదిగా అనిపించవచ్చు, కానీ కాదు, ఇది చాలా సులభమైన సమస్య. దీని కోసం మనం ఒక cost ఫంక్షన్ని ఉపయోగిస్తాం. దాన్ని ఉపయోగించి ఎడమవైపున ఇన్సర్ట్ చేస్తే cost ఎంత, కుడివైపున ఇన్సర్ట్ చేస్తే cost ఎంత అని కనుక్కుని ఆ తరువాత ఎటువైపు తక్కువ cost ఉంటుందో అటువైపున ఇన్సర్ట్ చేస్తాం.

అంతా బాగానే ఉంది కానీ ఈ cost ఫంక్షన్ అంటే ఏంటి? దాన్ని మనం ఎలా ఎంచుకోవాలి? ఇంటీజర్స్ కి అయితే మనం ఒక హాష్ ఫంక్షన్ ని ఉపయోగించవచ్చు, కానీ ఒక AABB కి cost ని ఎలా కనుక్కోవడం? అందుకోసం మనం ఇక్కడ ఆ AABB యొక్క చుట్టుకొలతను ఉపయోగించబోతున్నాం. మనం ముందు ఒక టెంపరరీ AABB ని ఉపయోగించి ఎడమవైపున అయితే cost ఎంత, కుడివైపున అయితే cost ఎంత అని చూసి ఎటువైపున తక్కువగా ఉంటే అటువైపున ఇన్సర్ట్ చేస్తాం.

// We need to propagate down until we find the leaf node
struct Node* parent = *root;

// Loop until parent becomes a leaf node
while (parent->left != NULL || parent->right != NULL)
{
    struct AABB combinedAABB;
    float cost1, cost2;

    // Test the cost with left child
    combinedAABB = aabbCombine(node->aabb, parent->left->aabb);
    cost1 = aabbPerimeter(combinedAABB);

    // Test the cost with the right child
    combinedAABB = aabbCombine(node->aabb, parent->right->aabb);
    cost2 = aabbPerimeter(combinedAABB);

    if (cost1 < cost2)
        parent = parent->left;
    else
        parent = parent->right;
}

// Insert in parent
return aabbTreeInsert(&parent, node);

ఈ విధంగా మనం కొత్త నాడులని ఇన్సర్ట్ చేస్తాం. ఇది మీకు కొంచెం క్లిష్టంగా అనిపించవచ్చుకానీ నిజానికి ఇది చాలా సులభమైనది. ఈ ఫంక్షన్ చివరలో మనం aabbTreeRecalculateUp అనే ఫంక్షన్ ని ఉపయోగిస్తాం, అది మన AABB Tree లోని ప్రతి నాడి వద్ద లింకులను మరియు height లను సరిచేస్తుంది. అంతే కాకుండా మనం తరువాత aabbTreeBalance అనే ఫంక్షన్ ని ఉపయోగించి మన ట్రీను బాలన్సుడుగా ఉంచుతాం.

ట్రీనుండి నాడిని తొలగించడం

నాడులను తొలగించే విధానం చాలా సులభమైనది. మన నాడులన్నీ ఎప్పుడూ లీఫ్ నోడ్స్ అయినందువల్ల మనం వాటిని చాలా సులభంగా తొలగించవచ్చు. మనం చేయాల్సినదంతా కేవలం నాడిని free చేసి దాని రిఫరెన్స్ ను NULL గా చేయడమే. ఆ కోడ్ ను మనం ఇప్పుడు చూద్దాం.

void aabbTreeRemove(struct Node** root, struct Node* node)
{
    struct Node* parent = node->parent;

    // If the node is root, then parent will be NULL
    if (parent == NULL)
    {
        free(node);
        *root = NULL;

        return;
    }

    // Replace the parent with sibling
    struct Node* sibling = NULL;

    if (parent->left == node)
        sibling = parent->right;
    else
        sibling = parent->left;

    // Check if there is a grandparent
    if (parent->parent != NULL)
    {
        struct Node* grandParent = parent->parent;

        if (grandParent->left == parent)
            grandParent->left = sibling;
        else
            grandParent->right = sibling;

        sibling->parent = grandParent;

        free(parent);
        free(node);
    }

    // Parent is the root, replace root with sibling
    else
    {
        *root = sibling;
        sibling->parent = NULL;
    }

    aabbTreeRecalculateUp(sibling);
}

అంతకుమించి ఇక్కడ మరింకెమీ లేదు. ఇప్పుడు మనం నాడులను తొలగించడం ఎలాగో కూడా తెలుసుకున్నాం. ఇంక ఒకే ఒక్క విషయం మిగిలుంది, ట్రీని బాలన్స్ చేయడం. దాన్ని మనం AVL ట్రీలో ఎలా ఎత్తుని ఉపయోగించి చేస్తామో ఇక్కడ కూడా అదే విధంగా చేస్తాం. మన నాడులలో ఎత్తును ఒక ఫీల్డ్ గా పెట్టిన కారణమే అది. ఈ టూటోరియల్ను విజయవంతంగా ముగించినందుకు శుభాకాంక్షలతో ఇంతటితో ముగిస్తున్నాను. మీ దగ్గర ఇప్పుడు ఒక పవర్ఫుల్ డాటా స్ట్రక్చర్ ఉంది.

చివరిగా ఒక చిన్న మాట: ఇక్కడ ఉన్న కోడ్ అంతా నేను స్వంతంగా గుర్తుపెట్టుకుని వ్రాసింది. దీన్ని ఏమాత్రం టెస్ట్ చేయలేదు. నేను నా ఇంజిన్లో దీన్ని Java లో, అసలైన Box2D కోడ్ లో వ్రాసిన విధంగా array విధానంలో వ్రాసాను.

AABB Trees for Collision Detection

Sun, 25 Dec 2016 00:00:00 +0000

Collision detection is one of the most complex and challenging parts of game programming, and is often the key area where performance is usually lost. To solve this, we have a lot of structures that eliminate unnecessary checks for collisions, like QuadTrees, Grids, BSP Trees, OcTrees, etcetera. In this post, we are going to study about AABB Trees, which are extremely fast for finding collisions.

Special thanks to the original Box2D author Erin Catto, and Bullet3D author Nathanael Presson for their open source implementations of AABB Tree. I used the original sources of Box2D as inspiration in studying this data structure.

AABB Trees, what are they?

An AABB tree is nothing but simply a binary tree, where all the AABBs are stored at the leaves. The main advantage for this kind of broad-phase is that this is a border-less data structure, and it doesn’t require you to explicitly specify an area which other kinds of data structures such as grids or QuadTrees require. They are better understood by looking at a visual rather than reading text, so here it is.

Assume that you have the above scene of objects, and A, B, C and D are the AABBs that wrap the objects in the scene. As said already, we have the AABBs that represent the objects only at the leaves. But still, all the intermediary nodes also have the AABBs, and they are just combined AABBs of their children. To allow for delayed re-insertions of the AABBs when they move, their parents use a bit of padding around them. The same above scene looks like this in hierarchy view.

The root AABB will contain all the child AABBs, the left node’s AABB will contain AABBs A and B, and the right node’s AABB will contain AABBs C and D. So querying from this data structure will be extremely fast. However let us go through the node data structure first.

The Node in the AABB Tree

I am not going to give you the complete code of the implementation, but only give psuedocode and describe how the data works. Though the original implementations keep the nodes in an array based representation, we are going to implement it in a linked-list based representation. The structure of the node will be as follows.

struct Node
{
    // The link to the parent Node
    struct Node* parent;

    // The AABB of the current Node
    struct AABB aabb;

    // The left and right children
    struct Node* left;
    struct Node* right;

    // The user data, can be used to identify the nodes
    void* userData;

    // The height, for maintaining balance
    int height;
};

Each node will have a parent (NULL for the root node), an AABB covering it, children (NULL for leaf nodes) and user data (NULL for intermediary nodes). I will first cover querying from the tree and then start about insertion and deletion of the nodes.

Querying from the AABB Tree

The querying is the simplest operation on the AABB tree, the user passes the root node, an AABB and a list, and the query function will add all the leaf nodes that intersect with the provided AABB into the list.

void aabbTreeQuery(struct Node* node, struct AABB aabb, struct List* list)
{
    // Test for NULL node
    if (node == NULL)
        return;

    // Only process the node if it intersects the given AABB
    if (aabbIntersect(node->aabb, aabb))
    {
        if (node->left == NULL && node->right == NULL)
        {
            // It is a leaf node, add it to the list
            listAdd(list, node);
        }
        else
        {
            // Query the child nodes recursively
            aabbTreeQuery(node->left, aabb, list);
            aabbTreeQuery(node->right, aabb, list);
        }
    }
}

This is how simple it can be. We start with the root node, test if the root node’s AABB intersects with the AABB provided. If it intersects then only the node is processed. When there are a lot of entities and we did properly balance the tree, we can keep these tests to be the minimum.

Inserting of AABBs

This is the most important part of the AABB tree, and here, we are going to not only insert the AABB, but also update the respective parents and combine the AABB of the parents so that our querying will work. The insert function will return the newly created node pointer which the user can cache.

struct Node* aabbTreeInsert(struct Node** root, struct Node* node)
{
    node->left = NULL;
    node->right = NULL;
    node->parent = *root;
    node->height = 0;

    // If the root is NULL, create the node and set it to the root
    if (*root == NULL)
        *root = node;

    // If the root is a leaf node, replace root with a temporary parent
    else if (*root->left == NULL && *root->right == NULL)
    {
        struct Node* newParent = (struct Node*) malloc(sizeof(struct Node));
        newParent->parent = *root->parent;
        newParent->left = *root;
        newParent->right = node;

        // Replace links in newParent's parent
        if (newParent->parent->left == *root)
            newParent->parent->left = newParent;
        else
            newParent->parent->right = newParent;
    }

    // Otherwise we have to select whether to insert in left or right
    else
    {
        // TODO!! We have to find where to insert, left or right?
    }

    aabbTreeRecalculateUp(node);

    // Return the node
    return node;
}

Woah, now we have an issue, where should we insert it? To the left? Or to the right? This looks tricky for us, but no it is not. To get after this issue, we employ a cost function, and find the costs of inserting it into the left and right children. Then we insert it into the child which gives the minimum cost.

Okay, this is cool, you might say, but what is the cost function? How can we choose it? For integers we can choose some sort of hash function, but for AABBs? We are going to use the perimeter of the AABB as the cost function. We first set a temporary AABB to be a combined AABB of the node with the left child and also the right child. Every time we calculate the perimeter of the combined AABB and select the minimum cost.

// We need to propagate down until we find the leaf node
struct Node* parent = *root;

// Loop until parent becomes a leaf node
while (parent->left != NULL || parent->right != NULL)
{
    struct AABB combinedAABB;
    float cost1, cost2;

    // Test the cost with left child
    combinedAABB = aabbCombine(node->aabb, parent->left->aabb);
    cost1 = aabbPerimeter(combinedAABB);

    // Test the cost with the right child
    combinedAABB = aabbCombine(node->aabb, parent->right->aabb);
    cost2 = aabbPerimeter(combinedAABB);

    if (cost1 < cost2)
        parent = parent->left;
    else
        parent = parent->right;
}

// Insert in parent
return aabbTreeInsert(&parent, node);

So that is how we insert a new node into the AABB tree. It might look so heavy, but in fact it is actually very easy. At the end we call the aabbTreeRecalculateUp function, which starts at the node, and walks up in the hierarchy fixing the AABBs and the tree heights. It will also make a call to aabbTreeBalance after doing it, so our tree remains balanced.

Removing a node from the tree

The removing process is actually quite simple, since the nodes are always leaf nodes, we can quite easily remove the nodes. All we have to do is to free the node, and set it’s reference to NULL. Let us see it in code now.

void aabbTreeRemove(struct Node** root, struct Node* node)
{
    struct Node* parent = node->parent;

    // If the node is root, then parent will be NULL
    if (parent == NULL)
    {
        free(node);
        *root = NULL;

        return;
    }

    // Replace the parent with sibling
    struct Node* sibling = NULL;

    if (parent->left == node)
        sibling = parent->right;
    else
        sibling = parent->left;

    // Check if there is a grandparent
    if (parent->parent != NULL)
    {
        struct Node* grandParent = parent->parent;

        if (grandParent->left == parent)
            grandParent->left = sibling;
        else
            grandParent->right = sibling;

        sibling->parent = grandParent;

        free(parent);
        free(node);
    }

    // Parent is the root, replace root with sibling
    else
    {
        *root = sibling;
        sibling->parent = NULL;
    }

    aabbTreeRecalculateUp(sibling);
}

And that is all there is to it. We now know how to delete a node in the tree. We are almost done, except for the one thing, balancing the tree. The tree balance needs to be done just like how you would balance an AVL tree, by checking the height. Once this is done, congratulations, you now have a powerful broad-phase data structure.

A small word of warning is that all the code here is written from my mind, and is not tested. My implementation for my game engine is done in Java, and is implemented in the form of array representation just like the original Box2D code.

Enabling Free SSL on GitHub Pages with Custom Domain

Tue, 06 Dec 2016 00:00:00 +0000

Jekyll and GitHub pages are amazing things, that they make the life of a blogger very easy where we can just focus on writing mostly, and yet have full control over the website. It is so nice that GitHub came forward and allowed us to host our websites for free using GitHub Pages project, and they do also allow for custom domains.

In case you’re looking for moving to GitHub pages with custom domain, then go read Moving to GitHub Pages for more details, and then come back here.

By default, my website will be named as sriharshachilakapati.github.io, and with this custom domain feature, I can make it appear as http://goharsha.com, but GitHub pages doesn’t offer HTTPS support for custom domains. This tutorial explains how to achieve that and how I did it exactly.

#0: The pre-requisites

Going to the pre-requisites, these are the things that I assume that you have already done:

A GitHub pages website.
You have associated a custom domain to it.

There is no necessary that you have sub-domains as well, but I do have different sub-domains running different websites. To be complete, I’ll give a listing of all my websites under the goharsha.com domain:

Website	Description
goharsha.com	This website, the root
jgorecovery.goharsha.com	The JGO recovery location
silenceengine.goharsha.com	The SilenceEngine project website, static as well
silenceengine.goharsha.com/forum/	The SilenceEngine forum
webgl4j.goharsha.com	Hosting of WebGL4J documentation

Among these, the sub domains point to the GoDaddy server, while this blog is hosted using GitHub pages (because I’d love the Git workflow). However, this is not necessary that you should have the sub-domains. They are optional, all you need to have is the root domain that points to the GitHub pages site.

#1: Creating a CloudFlare account

The first step is to create a CloudFlare account. They gives Flexible SSL even in their free plan, and that is what I’m using. Once you have registered for an account, it will ask to add a website, and do using your non-https custom domain. In my case, I entered http://goharsha.com. Then it took time to scan my DNS records.

Do not directly proceed with the automatically generated DNS records! In my case CloudFlare missed some of my sub-domains which are present in the host original DNS. Also add all the sub-domains you are having to CloudFlare, even the sub-domains you don’t want SSL for.

Even though there are multiple sub-domains, only click on the sub-domains you want SSL for, and make their corresponding cloud icons into orange color. For other ones, do not click them. Also more important, do not enable for the sub-domains created by c-panel, like mail, ftp, and other sub-domains, if you enable them, the services do not work until you disable SSL on them again.

You aren’t done yet, you still have to set the nameservers to the CloudFlare nameservers.

#2: Setting up nameservers and Enabling SSL

The next thing you have to do is to sign-in in your domain name provider, such as GoDaddy in my case. Then you have to find the nameservers assigned to you by CloudFlare, and set them as custom nameservers for your domain. This the is easiest step, and don’t make changes to the DNS.

Click on save, and wait for some time. In intervals of 15 minutes, keep checking with the CloudFlare dashboard. Once it says that the verification is ready, you are ready to ask it for SSL. In the dashboard, once you are done this, go to the Crypto section. Select the SSL option there, and set it to Flexible SSL.

Note that it takes up to 24 hours for the SSL to be issued depending on the load on CloudFlare servers, but in my case, it took me 4 hours for the SSL to become activated. Now at this point, you can access your site with https and also http protocols.

#3: Routing from HTTP to HTTPS

Once you have SSL version open, you will notice that all the links in the site might point to the HTTP version, while you want the HTTPS version of your site. To do that, as the step one, change all the URLs on your site to relative URLs, that doesn’t specify the protocol. For external resources such as scripts from CDNs, use the protocol-relative addresses. Also make the changes in your sitemap so that search engines see the HTTPS version instead.

The next step is to perform the routing of requests to the HTTPS versions by default. This can be done on the client side, but also with URL rewrites on CloudFlare. First go to the Crypto section and enable the Automatic HTTPS rewrites option. Additionally you are going to add two page rules in the Page Rules section so that all the URLs will get rewritten.

There are two page rules created here: The first one redirects all the requests in the sub-domains to the HTTPS versions, and the second one redirects all the remaining requests to the HTTPS version of the main site. And with this, the configuration is finished. It takes 5 minutes for the page rules to become effective, and you also might be needed to clear the site cache. Once this is done, you have SSL successfully working as expected on your website, go enjoy!

Conclusion

As many other tutorials point out on the internet, there is no need to set the enforce_ssl global variable in the site configuration. I’ve never seen any website ever use that variable, and also I haven’t seen it in the Jekyll documentation. Next, it takes time for SSL to be enabled, so be patient. And the final thing, is that even though I mention that this is for Jekyll sites, the process is same for other sites as well. So take your sites to HTTPS now!

Complete Website Theme and Tutorials Update

Mon, 05 Dec 2016 11:13:00 +0000

This post is to share with you about the changes to the website, and also what I plan to do in the future regarding the tutorials that I’m writing, especially LWJGL Tutorials and WebGL4J Tutorials. I agree it’s been a long time since I wrote the tutorials, and I have been kept waiting because the libraries they use were unstable and in alpha. It was so early that I jumped in, and wrote the tutorials, even while LWJGL is in alpha, and I think it is a mistake. Now that it got released, I’m now going to refactor them with the new API changes within a few weeks.

The Website Theme

There are also a lot of changes in the look and feel of this website, I completely re-did the theme, evaluating every factor of the website, and have done major work in modularizing the functionality with different includes. Of course, I tried to reuse as much code as possible, and hence I was able to get this final theme only by changing a few areas:

The background is now striped using CSS3
The navigation bar is now redesigned with a different tint of blue
The code blocks are now translucent and have a blue border on their left
All the font units are now in em
All the layout units are now specified in % unit

Apart from these, I did tweak a little bit of other areas like syntax highlighting fonts, they are now made to use a lot of fonts in preference. Take a look at the preview of some dummy code block.

// Some dummy pointless code in Java language
System.out.println("Hello World!!");

It looks cool isn’t it? Care has been taken that the code blocks doesn’t wrap text, but instead they overflow, allowing you to clearly read the text on mobiles, keeping track of the indentation easily. The following GIF shows the new navigation bar and the dropdown menu.

The new tweaked Dropdown menu

There you can see the new navigation bar, and the colors. It is essentially the same as the previous one, but the dropdown background color is made a dark blue, and selection is actually a translucent gray color which makes any color dark automatically.

LWJGL Tutorials

The LWJGL tutorials need some major changes in the API, and before changing the code in the tutorials, I’m going to first update the code in the repository. Once that is done, updating the articles is fairly easy. Here is my roadmap for the LWJGL tutorials.

Modify the code in the repository for the new API
Structure tutorials such that each tutorial is in its own module
Update existing tutorials on the website
Record videos for existing tutorials for those who prefer video tutorials over text
Add more tutorials later

This is planned to be done by the end of my current semester, as I have some roadblocks in the middle in the form of mid-term exams, a ludumdare event, a hackathon on MEAN stack, etc., I also plan to explain the math, and then use the JOML library in the tutorial.

WebGL4J Tutorials

The WebGL4J tutorials take more time, since the GWT gradle plugin seems not to be maintained anymore, and it doesn’t support the latest GWT version, which is 2.8.0 at the time of writing this post. In that context, I have been postponing the WebGL4J tutorials. The roadmap for that is the following:

Find a maintained fork of gwt-gradle plugin, or I’ll fork it myself
Make the code work with the latest GWT version
Try to get SuperDevMode to work with Gretty (Jetty is deprecated)
Structure tutorials such that each tutorial is in its own module
Update existing tutorials on the website
Record videos for existing tutorials for those who prefer video tutorials over text
Add more tutorials later

I’m planning to make it completely work by the mid of 2017. It’s a long time, I know, but that is required for the amount of work that is present. Additionally I’ll be adding a run task for the gradle projects so that one can easily run the tutorials from command-line.

Conclusion

So this is the new update, and this also taught me how to apply modern CSS, how the units work etc., where previously I used to use all the units in pixels with different media queries for mobile and desktop, but now, em units are easy to use in responsive designs.

I also got planned on updating the tutorials. In the mean time, I received many e-mails from people asking about the future of the tutorials, and also in the comments, thanks a lot to them for keeping me interested in all this tedious work.

GoHarsha.com

Historical Evolution of Android AppBar

The introduction of ActionBar

The introduction of Toolbar

The introduction of AppBar

New Theme Updates

Why I needed to make this makeover?

The Design Phase: To the drawing board!

Saying hi to the Implementation Hurdles!

Deployment is done, what next?

Simple way to define ViewModel Factories

What did I already have?

How did I abstract it out?

What is the end result?

Multi Lingual Support

ఇకపై మరిన్ని భాషలు

अब ज्यादा भाषायें

Collision Detection కోసం AABB Trees

AABB Trees అంటే ఏమిటి?

నోడ్ ని కోడ్ లో ఎలా వ్రాయాలి?

AABB tree నుండి query చేయడం ఎలా?

AABB లను ఇన్సర్ట్ చేయడం ఎలా?

ట్రీనుండి నాడిని తొలగించడం

AABB Trees for Collision Detection

AABB Trees, what are they?

The Node in the AABB Tree

Querying from the AABB Tree

Inserting of AABBs

Removing a node from the tree

Enabling Free SSL on GitHub Pages with Custom Domain

#0: The pre-requisites

#1: Creating a CloudFlare account

#2: Setting up nameservers and Enabling SSL

#3: Routing from HTTP to HTTPS

Conclusion

Complete Website Theme and Tutorials Update

The Website Theme

LWJGL Tutorials

WebGL4J Tutorials

Conclusion

The introduction of `ActionBar`

The introduction of `Toolbar`

The introduction of `AppBar`