A Map of the Chetpet Lake and Eco Park

Chetpet Lake has been developed into a nice waterfront park for walking a few years back. It is maintained diligently with water level balanced between the two parts of the lake depending on the availability, grass moved, plants cared for and the walkways washed off the bird droppings everyday morning. It opens for walkers as early as 4.30 in the morning every day. It is one of the places in Chennai, that I have walked into and really felt peaceful.

It has boating, children’s play area, angling points, 3D theatre, multilevel car park, and a food court. It is well connected by public transport. It has a bus stop, a railway station, and a metro station right outside its walls. But, it didn’t have a map. So, I downloaded a PDF from OpenStreetMap and created one which is now used in Chetput Lake Wikipedia article.

ChetpetLake

Creating an Icon for my blog

When I moved the site from Jekyll to WordPress, I was asked to create a site icon by WordPress. I was trying to play around with the letter from “t” from my screen name “tecoholic” in a couple of Vector editors using different fonts, handrawn symbols …etc., and finally landed on what I know best. Write a Python script for it. So here it is, my blog icon and the generator. It is just a stacking of “T”s but somehoe looks like the corner of ancient Chinese houses.

#!/usr/bin/env python
"""
A script to generate SVG icon for the personal blog.
"""
import svgwrite

width = 256
height = 256
mtop = mbottom = mright = mleft = 256/8

dwg = svgwrite.Drawing(filename="blog_icon.svg", size=(height, width))

def draw_pattern(width, color):
    xpos = 256/8 + mleft
    ypos = 256/8
    increment = 256*2/8
    vlines = dwg.add(dwg.g(id="vlines", stroke=color, stroke_width=width, stroke_linecap="round"))
    hlines = dwg.add(dwg.g(id="vlines", stroke=color, stroke_width=width, stroke_linecap="round"))
    while (xpos < 256*7/8):
        vlines.add(dwg.line(start=(xpos,ypos), end=(xpos, 256 - mbottom)))
        hlines.add(dwg.line(start=(mleft, ypos), end=(xpos+mright, ypos)))
        xpos += increment
        ypos += increment

draw_pattern(20, "black")
draw_pattern(8, "white")

dwg.save(pretty=True)

That creates the SVG, then it is just using imagemagick to create png files of all required sizes:

#!/usr/bin/env bash
python blog_icon_generator.py
convert -background none blog_icon.svg blogo_256.png
convert -background none -resize 512x512 blog_icon.svg blogo_512.png
convert -background none -resize 128x128 blog_icon.svg blogo_128.png
convert -background none -resize 64x64 blog_icon.svg blogo_64.png
convert -background none -resize 32x32 blog_icon.svg blogo_32.png

blogo_256

Thattachu – Open Source Typing Tutor

Typing tutor is a known ancient domain to work on. There are a number of places online/offline, tangible/intangible places to learn typing. But Srikanth (@logic) stumbled on a peculiar problem when worked for the Wikimedia Language Engineering team. The new age Indic input methods involved in computers seem to have no place to learn how to type on them. The only way seems to be – have a visual reference for the layout and begin typing one key at a time. This might be the most inefficient method of learning to input information. So what do we do?

Enter Thattachu

Thattachu is an open source typing tutor. It is built using the tool that Wikimedia Language Engineering Team have developed called jQuery IME. jquery.ime currently supports 62 languages and 150+ input methods. This is a JavaScript library which can be used on any web page. So we (I & Srikanth) set out to build a generic typing tutor which could employ any of the 62 languages or 150+ input methods. The project was conceived in May 2014 and was worked on only by May 2015 as I was busy with my Teach For India Fellowship. Thattachu borrows its tutor style from GNU Typist or gTypist which I used to learn touch typing in English.

Interface

Thattachu has three pages:

  1. Home page – A welcome page for those visiting the site and explaining what it is about.Thattachu_page1
  2. Course Selector – A place where you choose the course to learn. You select the language and the input method you want to learn and it lists the available courses.Thattachu_page2
  3. Workbench – A place where you practice typing. When you select a course in the Course Selector, the workbench loads with the course you selected and you can begin typing with the input method you chose. It remembers your most recent course and lesson so you can continue from where left it the previous session.Thattachu_page3

Course Structure

Each language has a set of input methods – each input method has a set of courses. The courses are classified based on their difficulty as “Beginner”, “Intermediate” and “Expert”. Each course has a set of lessons to complete and and each lesson is a collection of lines that have to be typed.

thattachu_courses

Thattachu Asiriyar

Creating the tool is the easier part of a content dependent system. The real work is generating the content that the tool can be used with. That way we faced the challenge of creating course.JSON files required for the tool. Hence a user friendly tool Thattachu Asiriyar was born.

Thattachu Asiriyar lets anyone author a course and generate a course file. If you want to author courses, go to Thattachu Asiriyar create the course file and mail it to
arun [at] arunmozhi [dot] in -mentioning “Thattachu course” in the subject.

Github savvy authors

Or if you have a Github account and know about pull requests. Kindly

  1. Fork the Thattachu repohttps://ghbtns.com/github-btn.html?user=tecoholic&repo=thattachu&type=fork&count=true
  2. Put the course file into the data/language_code folder
  3. Update the courselist.json in your folder with the metadata and the filename
  4. Send me a pull request.
  5. Feel awesome for helping the humanity learn typing

Developers

Here are a few points for those interested in the code or those who think they can improve Thattachu.

  • Thattachu is a web application written in HTML and JavaScript (AngularJS).
  • It is a completely static site with all the information stored as JSON files and served by XHR requests when requested by the Angular $http.
  • For input jQuery.ime is used.
  • It is a completely static site and can be hosted in any web server.
  • It uses localStorage of the user to track last worked on course and load it when the user opens the page next time.

Zimbalaka – Zim file creator for Offline Wikipedia

OpenZim is a Wikimedia developed format for offline reading of Wikipedia. Read more here. But the project was sadly sidelined and the support from MediaWiki, the software that runs Wikipedia sites, was also removed.

I came to know about all this from Bala Jeyaraman of Vasippu. He is planning to introduce tablets in a classroom of 6th standard students, with exceptional comprehension levels compared to average Indian classrooms, and wanted a way to load select material into the tablets. The OpenZim files have an excellent reading app called Kiwix, which also offers complete Wiki sites as downloads. Tablets can’t afford to have a huge amount of data, like full Wikipedia. There is no way to create a zim file with select topics. One has to request the OpenZim team to do it for him/her.

Enter Zimbalaka

Zimbalaka is a project which tries to solve just that. It creates offline wikipedia content files in zim file format. A person can input a list of pages that need to be created as a zim, or at least a Wikipedia category. Then Zimbalaka downloads those pages, removes all the clutter like sidebar, toolbox, edit links …etc., and gives a cleaned version as a zim file for download. It can be opened in Kiwix.

The zim is created with a simple welcome page with all the pages as a list of links. The openzim format also has an inbuilt search index and Kiwix uses this really well. So you can create zims of 100 articles and still navigate to them easily either way.

Zimbalaka has multi-lingual and multi-site support. That is, you can create a zim file from pages of any language of the 280+ existing Wikipedias, and also from sites like Wikibooks, Wiktionary, Wikiversity and such. You can even input any custom URL like (http://sub.domain.com/), Zimblaka would add (/wiki/Page_title) to it and download the pages.

It is currently hosted by my good friend Srikanth (@logic) at http://srik.me/zimbalaka

Screenshots

Here is how the content looks in Kiwix for Android.

navigate

multi

Pain points

  • A small pain point is that Zimbalaka also strips the external references that occur at the end of the Wikipedia articles, as I didn’t find it useful in an offline setup.
  • You cannot add a custom Welcome page in the zim file. Not a very big priority. The current file does its work of listing all the pages
  • You cannot include pages from multiple sites as a single zim file. The workaround is to create multiple files or use a tool called zimwriterfs, which has to be compiled from source (this is used by zimbalaka behind the scenes).

Developers

This tool is written using Flask – A simple Python web framework for the backend, Bootstrap as the frontend and uses the zimwriterfs compiled binary as the workhorse. The zimming tasks are run by Celery, which has been automated by supervisord. All the coordination and message passing happen via Redis.

Do you want to peek in how it is all done? Here is the source code [https://github.com/tecoholic/Zimbalaka]. Feel free to fork, modify and host your own instance.

Update

The OpenZim team has appreciated the effort I had put in and offered to host the tool on their server at http://zimbalaka.openzim.org. They have also pointed me to the desired backend called ‘mwoffliner’ that they have developed to download and clean the HTML. I will be working on it in my free time.

Icons/Font related to Indian Culture

There seems to be a clear lack in availability of icons and icon fonts for using in the Indian cultural context. I realized this when we were designing a wedding invitation and we couldn’t find any free available material. So I am creating a list of known objects with cultural relevance and create them in my free time. All the icons you see here are available in Wikimedia Commons in Public Domain License. Feel free to do whatever you want with it. I suggest you upload your derived works to keep the spirit.

  • Nadaswram – Nadaswaram
  • Mridangam – Mridangam
  • Murasu – Murasu
  • Bullock Cart – Bullock cart icon
    • Bullock face – Bullock face
    • Bullock Full – Bullock full
  • Tea Tumbler – Tea Tumbler icon
  • Catapult – Catapult Icon
  • Garland –
  • Pot –
  • Two hands Vanakkam –
  • Cycle Tyre –
  • Cycle tube Catapult –
  • Mango –
  • Banana tree –
  • Full Boil / Half Boil – Half boil Icon
  • Biriyani –
  • Betel Leaf –
  • Head with towel –
  • Head with ear rings and pottu –
  • Kumbam –
  • Banana Leaf with Food –
  • Kolam (Thanks Pravin) –

If you happen to read this and have an idea of what more could be included, kindly leave your suggestions as comments. Or if you happen to find these icons in some form for free usage post the link.

Live Transit Visualization

After a push from @logic, I started working on a project to show live location of suburban trains based on transit.js. The idea is to make a map similar to this for many cities, with a choice of schedules (weekday/sunday). But I found the jQuery plugin, transit.js, too hardcoded and disorganised to perform what I wanted to and also to my taste.

I found other projects like:

  • LiveBus which does a live status map using SVG maps based on d3.js library and GTFS feeds of the bus data.
  • TransitLive which uses LeafletJS as the map library with their own OSM tiles. The schdule data seems to come from the backend service.
  • NextBus which has a textual realtime status and route maps based completely on Google Maps.
  • King County Metro which again uses Google Maps for the map and a custom way of loading data from its servers. The best map I have seen so far and loads a ton of JS.

Each has its own technology stack solving the same problem.This blog post details the use of GTFS data or the lack of it for realtime visualization. So the generalized picture seems to be that everyone is rolling out a custom version of their own.

So, I am going to create a simple library that can do this.

Here is the mockup usage of the library:

// Create a new livetransit object with the map type
var lt = new LiveTransit();

// Assign a div for the map
var divId = "map";
var mapType = "google";

lt.setupMap(divId, mapType);

// Overloaded to perform both addRoute and initiateMovement
lt.initiateMovement("chennai_velachery.kml", "chennai_velachery_weekday.json");

// ------------------------------------
// other probable cases to deal with
// -----------------------------------
// Specify a different schedule like Sunday/Holiday Schedule
lt.changeSchedule( "chennai_velachery_sunday.json" );
// change the location - city
lt.changeLocation( "new.kml", "new.json" );

Session Signup – A Coding Project

Update: This project never took off from the drawing board.

I work for Teach For India as a Fellow now and we have Teacher Development workshops, City Conferences once in a month where there are multiple sessions which provide technical training on multiple things at the same time. So we have a system where the Fellow chooses the sessions he wishes to attend. Presently here is how the session signup process works.
Signup_Automation

I am thinking of automating the red circle region by writing a web application that can run on Google App Engine. Since our organization uses Google Apps account for its IT needs. I think the integration could be more easily done with almost no cost.

Update 1:

Initiated the project using the Google App Engine. Signed up for a 60 Day & $300 credit Free trail from Google Cloud Services. – December 2,2014