Clicker – A simple app to record pedestrian footfall precisely

I have finally published an app on the app store! It is called Clicker and it is a simple app I made for my research to count pedestrians on the sidewalk but it can be used to count incidence of any activity over time. The interface is as simple as it gets – open the app,  touch the screen to record any activity and the timestamp for every click is recorded (appended) in a csv file named with the current date in the folder “Manual Counts”. This file can be accessed by a file manager later and exported for analysis. A demo for the app is shown below,

update v2: With version 2 the data can be sent directly with any application (Gmail, WhatsApp etc) by long pressing the screen.

update v3: With the version 3 pedestrian walking direction can be differentiated by left and right buttons at the bottom of the screen.

The app is on google playGet it on Google Play


Minimal Android app development environment with MacOSX

I have always wanted to develop simple one page apps for android but have been put off by the whole IDE stuff (Eclipse/Android Studio). Personally, I like working with just command-line tools to make and compile programs the way I do for linux. Recently I came across a simple minimal app development environment at which made me want to have a go at it. After a day of working on it, I put together a  barebones/ minimal environment for developing and building simple android app with just terminal in MacOS. As with everything I do lately, the text editing is done with vim and output is built with just command-line tools; no GUI, no fancy stuff.

First step is to get the software development kit (sdk) and the necessary development tools. This can be done in MacOSX using homebrew by,

brew install android-sdk
sdkmanager "platform-tools" "build-tools;27.0.3;" "platforms;android21"

We are going to use a example app called clicker which I made for my research to count pedestrians on sidewalk. It has a simple counter which can be increased by clicking anywhere on the screen. There are only three files which make the app, which has the app logic, activity_main.xml which has the layout on the screen and AndroidManifest.xml which pulls the .java and .xml together to make the app. The folder structure is shown below and the sample files with the folder structure are attached here.

Screen Shot 2017-12-31 at 15.37.50

package com.bala.clicker;
import android.view.View;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.LinearLayout;
public class MainActivity extends Activity {
    protected void onCreate(Bundle savedInstanceState) {
        ActionBar actionBar = getActionBar();
        TextView text = (TextView)findViewById(;
        LinearLayout layout = (LinearLayout)findViewById(;
        layout.setOnClickListener(new View.OnClickListener(){
            public void onClick(View view) {
                TextView text = (TextView)findViewById(;
                int count = Integer.parseInt(text.getText().toString());


<?xml version="1.0" encoding="utf-8"?>


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android=""
    <uses-sdk android:minSdkVersion="21"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <application android:label="Clicker">
        <activity android:name=".MainActivity">
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>

Before we can build the app, we need to make the required directories for the temporary files generated in the process. we do that by, mkdir -p build/gen build/obj build/apk. We also need a signature to sign the final app with before it can be installed on a device. This is generated by the keytool, keytool -genkeypair -keystore keystore.jks -alias androidkey -validity 10000 -keyalg RSA -keysize 2048 -storepass android -keypass androidFinally, for creating the building script we need to know the location of the android-sdk. this can be done by find command looking for “build-tools” as shown below sudo find / -name “build-tools”. This path (“/usr/local/Caskroom/android-sdk/3859397”) is defined as SDK in our script and used in our build script below. This is kept as in the root directory,

# Defining the environment variables
# Building the packages
"${BUILD_TOOLS}/aapt" package -f -m -J build/gen/ -S res -M AndroidManifest.xml -I "${PLATFORM}/android.jar"
javac -source 1.7 -target 1.7 -bootclasspath "${JAVA_HOME}/jre/lib/rt.jar" -classpath "${PLATFORM}/android.jar" -d build/obj build/gen/com/bala/clicker/ java/com/bala/clicker/
"${BUILD_TOOLS}/dx" --dex --output=build/apk/classes.dex build/obj/
"${BUILD_TOOLS}/aapt" package -f -M AndroidManifest.xml -S res/ -I "${PLATFORM}/android.jar" -F build/clicker.unsigned.apk build/apk/
"${BUILD_TOOLS}/zipalign" -f -p 4 build/clicker.unsigned.apk build/clicker.aligned.apk
"${BUILD_TOOLS}/apksigner" sign --ks keystore.jks --ks-key-alias androidkey --ks-pass pass:android --key-pass pass:android --out build/clicker.apk build/clicker.aligned.apk
# Sending the apk to phone and starting the app.
"${SDK}/platform-tools/adb" install -r "build/clicker.apk"
"${SDK}/platform-tools/adb" shell am start -n com.bala.clicker/.MainActivity

finally we give execute privileges on the file to ourselves by chmod u+x”, connect the phone to the Mac via usb and run the script by “./”. Thats it! the app should be now installed on the phone and started as shown below,


Mapping building footprints of Indian cities with OpenStreetMap and R

Recently I revisited work I did in 2012 (aosm.r)  where I made a function to extract features from OpenStreetMap data into R for plotting and analysis. When I was fixing the download links in the old script, I realised that it would be interesting to make building footprints for Indian cities. Spent a day on it and the results are below (click on thumbnail for high resolution image). The input data needed is a csv file with the following data (sample linked at the end of the post),

  1. Name of the city in mapzen osm metro extracts
  2. Latitude and longitude of the centre of the city
  3. Extent to which we want the city to be mapped (in km) from centre and
  4. Clean name of the city which will be printed on the map.

The required scripts and data are,

  1. cities.csv
  2. aosm.r
  3. cities.r

Once we have the required files in the working directory, we can plot the cities by,

mapdata <- getMapdata("cities.csv")

source: openstreetmap data

The Idea

The idea is simple and have been done by numerous people before. It is a map based directory for a group of small people. The idea is an extension of the work I did years ago (post link). I built this site waiting for an entire day in the university campus for a (very annoying) friend who kept postponing the meeting. We finally met at the end of the day and by that time I had finished the web app. I had recently learned to use server side coding (using PHP), databases (MySQL) and had figured out that hosting is not rocket science. Coupled with some previous experience with Google maps API and JavaScript. I quickly built this crowd sourced project where everyone enters their Name and City and the map shows all the people, aggregated based on the zoom level. Simple, Clear and nothing fancy.


Once this was posted to the common forums and people started using it. It became clear that I can do more with it. Suggestions kept coming in and after a point all the suggestions amounted to creating a whole new social network. Though I agreed there were loads of things which could have been improved with the app, I felt the usefulness of this map/visualisation was its simplicity and clarity. The things I felt could be improved were

  • data collection from users. Though it is simple as it is, I feel it can be improved by utilising availability of location data and connecting to other platforms (fb obviously). Also possible account management for users, edit and delete their own data.
  • Search and find people. This was never implemented. It could have been very useful for people to search and find others.
  • Some form of possible communication with other users. When you have a map like this and if you are able to find someone in the map, naturally you try to click on the person to see more details and communicate with them (even if it is a link to their email).

Things I specifically don’t want to do

  • Build a suite of information on the users and nag them to fill the information up. No body cares about someone’s primary school or their fourth work fax number. This will just make the whole thing a directory created with a aim to increase the amount of information rather than usefulness of the information.
  • Build a suite of interactions within the users and app while creating user interface elements for those interactions. This will lead into user being presented with loads of buttons& forms and when these UI elements starts covering the entire screen they will be folded into scores of menus. This just defeats the purpose of the entire thing. If people wanted millions of options to interact with the people they know, they can use Facebook or any social network for that.
  • Anything which is not location based or adds value based on location. Since location and mapping is the central theme of this project.

With all these things in consideration, I spent some time sketching out some preliminary ideas shown below,

I’ll explain them in detail in the following post.

P.S: I still think the idea shown in the sketch is too cluttered and needs significant simplification to be anywhere near neat and useful.

My first application – Introduction

After procrastinating for years, this week I started my first software project. This is supposed to be small web application which combines all my understanding in server management, web design, we development – front end and server side, database management, spatial analysis and visualisation, http and sockets to produce a very simple, single purpose application for a user base of around 100-200 people. The aim is to build and learn, while creating some value.

In the following months, I’ll post a series of blog posts summarising my progress with the app. I’ll start from the overall idea and detail out the design and building progress as I go along. The app would be online at my serverhttp:// ) and the code would be available on github (

Understanding Javascript Objects and JSON Data.

The first time I heard of JSON (JavaScript Object Notation) when was trying to get data out of twitter. At that time I was new to javascript and was figuring out a lot of stuff at once so the whole thing was very confusing and incredible hard to grasp. Now when I think back, It would have saved me a lot of time if someone just gave a clear overview of how objects worked in javascript and how the same pattern (jargon alert!) when used to transfer data becomes JSON. This is the reason why I am writing this post. As a disclaimer, I am not a programmer but an urban planner and my understanding of this subject is purely based on my practical experience trying to build things relevant in my field so bear with me if any of this is inaccurate or wrong. Please feel free to point out the mistakes.

To start, let us set up the environment for learning. Since objects in JavaScript and JSON data are abstract concepts there is no way for a normal person to understand these without actually seeing them in action. So it is time to open the console in your browser (preferably chrome) and start typing. The console in chrome can be started by pressing (cmd+alt+j or ctrl+shift+j) and you can just type in the commands one by one. It is as simple as that.

Chrome JS Console

By default the console opens in the global namespace of the tab which is open. In plain english the console is like a virtual space where you create, destroy, modify objects and these objects gets displayed in the browser window (rendering) based on their properties. For example the tab has an object associated with it, the html document, the body and every element (image, text etc) has an object associated with it. This is called DOM – Document Object Model which is used to manipulate HTML elements with JavaScript. The point is this is a virtual space to contain objects and this is where we would be working. This space already has a lot of objects and one shouldn’t confuse them with our own. To check our understanding lets type ‘window’ in the console and press return. It returns some text, this is the object which denotes the chrome window. When you click the triangle in the left side (expand it) you can see all the contents of the object.

Screen Shot 2014-12-03 at 16.01.29

Now typing window.innerHeight or window.innerWidth will give you the height and width of the window. You can resize the window and type it again to see it changing. Here the important things are, 1) We can create objects in this virtual space with properties to represent stuff we see (a window in this case) 2) the “.” denotes the property of an object (i’ll elaborate this later).

Now it is time for us to create our own object. Lets say this object is a digital representation of yourself. Lets start by creating the object by typing me = {}. This literally translates to english as ‘me’ is an empty object. The curly brackets denote that ‘me’ is an object and it is empty since it has nothing in it. Now typing ‘me’ again and pressing enter will return an empty object. Now lets go one step ahead and ask my name. Since it is a property, you use the “.”. So type “” and see the result. It says it is “undefined” because we have created the object but never defined any properties.  Lets set one by typing = ‘bala’ (note the single quotes. i’ll explain later) . Now asking will return the name “bala” and asking for the whole object ‘me’ will now give the properties as well.

Screen Shot 2014-12-03 at 16.16.35

If you have come this far then you understand object, its properties, how to create and return them. Now it is time to understand some data structures (this sounds way too complex than necessary). For practical purposes we just have to know 4 major data structures – Number, String (of characters), Array (of elements) and Boolean. Most of the data we use will fall under these data structure. Numbers are stored as is without any special way to mark them. for example, Typing in me.age = 25 will set the property ‘age’ in me as a number which is 25. Strings are denoted by double/single quotes around them if the quotes are not present then it is considered as a name of an object (variable) and will return an error if it cannot find one. for example, = london will return an error while = ‘london’ will be OK. Arrays are collection of data in a specific order and is denoted by square brackets. for example, me.address = [221,’b’,’Baker Street’] will set the address as an array of 3 elements. typing me.address will return and array, while typing me.address[0] will return 221. the square brackets with a number is the way of accessing an element within an array when you know its place (the counting starts at 0). Try to get the street name out of the ‘me’ object.

Screen Shot 2014-12-03 at 16.48.55

A string is like a special case of array (with only single characters) so you can do the array type of queries to strings as well. for example,[0] will return ‘l’. Boolean is either ‘true’ or ‘false’ (without quotes). for example, you can do me.graduate=true. This helps where you can directly use this instead checking for conditions (like if else statement). With this 4 basic data type you can create a model for almost every kind of objects we usually encounter. To sum up, we create objects with curly brackets, object is something which has properties, properties can be of various types of data (number,string, array, boolean), we set and access properties of objects by using the ‘.’, arrays are created by using square brackets and we set and access contents of array by using square brackets.

There is one more thing we need to know which is that there is a simpler way to create objects than setting properties one by one. which brings us closer to the JSON. instead of using the ‘.’ we can directly write the contents of the object using ‘,’ and ‘:’. So combining all the steps above in creating the me object, we just do,

Screen Shot 2014-12-04 at 18.23.37

With these basics we can now move to interesting stuff – Nesting and References.


When we talked about data structures though we talked about 4, we actually learned 5. The fifth one is objects. This means that a property of an object can be an object. This introduces amazing capabilities to javascript objects. for example, = {} will create an empty object for education. and = ‘kvp’ will set the property for This process can be theoretically repeated forever (if the memory permits).

Screen Shot 2014-12-04 at 17.56.38

This has two major significance. 1) While modelling sparse data, this makes our object memory efficient (this is the reason it is used in data transfer). for example, a table which shows scores of 5 students in 10 different courses and every student attends 3 courses can be modelled as a javascript object as shown below,

Screen Shot 2014-12-04 at 18.13.21

Screen Shot 2014-12-04 at 18.12.52

You essentially don’t need to have null/empty spaces. If something is null then it is just not there. 2) you can model infinitely rich objects by nesting different types of objects together. e.g. in the above example if some course has two markers and two scores you just introduce and object instead of the number, no need to change your structure of the data ( schema ).

Screen Shot 2014-12-04 at 18.28.44


This is another way javascript optimises memory usage. Every object’s association with its name is just a reference. for example create an variable a = 20, create another variable using this variable b = a , check both variables. now do b = 40 and check the value of a. The results are shown below. This is logical and is what you expect to happen.

Screen Shot 2014-12-04 at 18.34.36

Now try and do the same with objects, a = { name:’bala’, age:25 } ; b = a ; b.age = 27. Now check the contents of a!

Screen Shot 2014-12-04 at 18.42.44

This behaviour is because JavaScript does not duplicates objects in memory when assigned to variables but just references the object to the variable name. This allows us to create infinitely rich data structures with finite memory. Funny example is below,

Screen Shot 2014-12-04 at 18.43.53

That concludes our overall introduction to understanding objects in javascript. With this foundation, let us move to JSON.


To be brief, JSON is just a notation to create javascript objects. It is exactly the same as what we discussed above. The only thing which is new is the property names should be enclosed in quotes (since JSON has no concept of variables). You evaluate a JSON string and it gives you a JavaScript object thats it. Nothing more. While thinking about JSON, as an alternative you can think of it as a collection of key value pairs (this kind of thinking helps while working with php). Keys are always strings and values can be anything (even another collection of key value pairs).

Screen Shot 2014-12-04 at 18.51.11

The difference between JavaScript objects and JSON is that JSON is a notation i.e. it is a text file written outside javascript and cannot be executed. It is a normal data / text file like csv. You can essentially read a csv as a string, split it into parts using the newline and comma characters and create an object/array in javascript but with JSON it is much simpler (just do eval) and more powerful (nesting).

Thats it. Hope this helps absolute beginners as myself in understanding these concepts faster.

P.S. If you have come this far, congratulations! You now know how data is modelled and stored in mongodb! All you have to do to use mongodb is learn commands.

Complete graph creator using Raphael.js

update 27 Dec 2017: fixed mistake in code and fixed link.

Complete graph creator

This one is very similar to A Simple Gravity Model except that this one is made with javascript (Raphael.js)  and does not has the gravity model for the width of the links. I made this as a demonstration for how easy it is to make interactive graphics with javascript. With less than 40 lines of code, with raphael and javascript we can create this complete graph generator where you can click the canvas to create nodes and click and drag the nodes to move them. the links are generated and updated based on the position of the nodes. I am planning to create a full suite of tools for making and analysing networks online for which this is the first step. [ link]


<!DOCTYPE html>
	<script type="text/javascript" src=""></script>
<body >
		var paper = Raphael(0,0,'100%','100%');
		var background = paper.rect(0,0,'100%','100%').attr({'fill':'#ddd','stroke-width':'0'});
		var circles = [];
		var lines = [];{
			circles.push(new circle(event.clientX,event.clientY));
		function refreshLines(arr) {
			for (i in lines) {
			for (i in arr) {
				for (j in arr) {
					lines.push(new line(arr[i],arr[i],arr[j],arr[j];
		function circle (mx,my) {
					var color = this.attrs.fill=="#444" ? '#f00' : '#444';
					var color = this.attrs.fill=="#444" ? '#f00' : '#444';
		function line (sx,sy,ex,ey) {
			return  paper.path( "M"+sx+","+sy+" "+"L"+ex+","+ey ).attr({stroke:'#444'});