Welcome to my personal blog. If you're looking for my academic profile page, click the UCD in the upper right corner. Or maybe you're looking for my open source development blog?

First Android App

23 May 2015 / Filed under Writeup

I’ve finally gotten around to scratching this itch I’ve had and writing this Android app to lookup how to type Chinese characters in Cangjie.

Cangjie is a graphological input method, meaning you type out the character the way it looks rather than how it sounds, like with some Chinese input methods like Pinyin or with Japanese. Knowing Cangjie is handy for studying written language where you don’t know how a character is pronounced. You just decompose the character according to some rules and type it in. The problem is there are a lot of exceptions and tricky cases where you might get stuck. Well, a lot of times, characters reuse components, and you might know how a similar character is pronounced and so you can input it with another method, but at the same time you want to remind yourself of how to key it in with Cangjie. This is the problem I wanted to solve.

Here’s an example character I can easily key in in Japanese. I want to remind myself how to type it with Cangjie…


You take the code and you key it in with the Cangjie keyboard. Practice makes perfect.

I thought this was a simple enough app to get into Android with, so I started off with the Android starter tutorials. The first tutorial gave me pretty much everything I needed as far as UI – then I added a SearchView to the action bar.

The hard part was setting up the database. I decided to piggyback off masaruyokoi’s ChineseCharConverter project. He used Ruby to build a tokyocabinet database to hash Chinese characters to their pronunciations and their Cangjie codes. tokyocabinet is nice and simple database written in C that also has Java bindings, so my plan was to build it for Android and ship the library and the database file with my Android application and access it from there.

That did not really go according to plan.

I really had a tough time figuring out how to properly cross-compile the library. First of all, I didn’t get the Android NDK toolset right at the start but rather downloaded a generic gcc package for aarch64 (this is appropriate for the arm64-v8a architecture of the Samsung S6 that I’m working with). But after I realized that I needed it and got it, I just focused on manually building the library rather than bother with an NDK setup. I just focused on my phone, but NDK contains all the toolchains to support all the Android architectures. I will want to go back and set up the C sources with a proper NDK build as part of the Android project itself. It looks like white-gecko did this conversion a while ago, so I’ll have to refer to his setup.

There was a dependency on bzip2, and I had to build the library itself along with the Java bindings. bzip2 was a simple Makefile project, while tokyocabinet used autoconf. It was quite tricky to configure and I had to tweak the resulting Makefiles. For instance, I had to make sure the soname did not have the version number at the end, otherwise the dynamic libraries can’t resolve and I get a java.lang.UnsatisfiedLinkError from the application. Here are assorted links that helped me figure out how to get it built:

So I was able to get the prebuilt library and database shipped on the phone, but I was still having trouble because I couldn’t open the database. It took me a while trying different methods and locations of storing assets/resources, all the while wondering if I had a permission issue. Android takes care to abstract you from dealing with Files directly, but tokyocabinet actually wants you to give it a File to load its database from. In the end, after asserting I had permission to write, and I’d written a test database on the phone and sent it back to my desktop, I finally realized that the database itself was binary-incompatible across machines. I had to export what I needed from the database in a portable format and build the database up on the phone.

So I had a fun time with Ruby figuring out how to extract JSON from the HDB. This is when I remembered I had OBS set up and started recording a screencast. You can watch me export and import JSON and setup the database query in the Youtube video. Check the description for some timestamps at events leading up to the screenshots you see in this writeup up above. There’s no commentary in this video, so feel free to mute the music if it’s not your thing. I’ve always thought watching people code is cool, and I want to do this kind of thing more, possibly with commentary or just idle chatter with the mic on.

Anyways, I think I had a pretty fun coding session. Android Studio feels quite nice to work with, and I feel like I have gotten a good warmup with Android. As far as this app goes, I want to add a few more things before I put it up on Github, like search history.

Decide what to do, if its doable, do it, and repeat

10 May 2015 / Filed under Productivity

Recently, I’ve picked up my first smartphone and tweaked my work habits. I am now using a pomodoro timer to get myself to do things. The idea is to set a timer for 25 minutes, work on a task for this amount of time, and then break for 5 minutes. I find that there’s a lot of inertia when I sit down in front of the computer but not quite know what I should commit to working on. I feel like 25 minutes is a good unit of time where you can reasonably get something done, but not too much of a commitment that you can just re-evaluate at the end of that period of time and change your course.

I think the break serves a few purposes other than giving you the opportunity to take an actual break from work. It forces you to put a period at the end of the sentence you are writing, so to speak. If you have a point that you still feel is important to make, you can fast-forward the timer to start the next 25-minute interval so you can keep on working. This was what I ended up doing Tuesday morning before my lab presentation. I wanted to throw in a few introductory slides to illustrate some concepts and spent some pomodori to fix an example. I think after seeing the pomodori go by and my example still not finished, I knew that I had to make a decision to wrap it up and move on. It’s nice that there’s also a long 15 minute break is also available after a four-pomodoro run – this is probably the actual time you take a break, because 5 minutes really isn’t enough time to comfortably walk away and have a chat or anything.

In combination with the pomodoro timer, I use the bullet journal to log my progress. Though it’s an analog system, I find it useful to do it electronically, and I use tiddlywiki with a few useful plugins to do the job. You can check it out from my toolbox repository on github here.

TiddlyWiki column format and vocabulary learning

07 Feb 2015 / Filed under Code Snippets

I use TiddlyWiki Classic to keep notes on everything, including new vocabulary words when studying Japanese. I log a list of vocabulary while I’m reading, one per line, which I review by scanning with Perapera Firefox plugin. But screens don’t have a lot of vertical space and I can end up scrolling a lot really quickly if I’m reading something difficult. It would be nice to have the text automatically flow into multiple columns without having to do very much. That way, I can use all of the precious horizontal screen space.

Thankfully, I’m using Firefox and this is 2015 where CSS3 features such as column-width are implemented. So I basically make a class like so:

    column-width: 300px;
    column-gap: 20px;
    -moz-column-width: 300px;
    -moz-column-gap: 20px;

You add this to a the StyleSheet tiddler. Then, for a block of content you’d like to flow,

...content goes here...

This is TiddlyWiki syntax for wrapping a block of content in a div with class wordlist, which will have the style applied. You get equally sized columns like this:

This reminds me of the Vocabulary Builder on the Amazon Kindle.

What I like about it is that it actually records the context in which you see each word. I also like the Flashcards mode, which shows you the vocabulary word in the primary tab, and in a secondary tab, you can scan through the contexts in which you looked up those words. This is something I wish for the Perapera plugins. Currently, you can save wordlists, but as an extension, it should save the sentence it came from. Another thing I’ve been thinking about for a while (as a former student of Chinese) is for kanji lookups to show Cangjie input codes. I suppose it’s a moot point if you have it digitized and can mouse over it, but sometimes it’s helpful for hunting similar kanji that you don’t know how to pronounce. But I digress…

It’s hard to manage batches of words, though. You have to manage flashcards individually, it seems, and there isn’t anything obvious that you can edit by looking at the Kindle as a USB device. There’s enough delay and clunkiness in the interface to discourage me from managing it.

Jekyll Popup Image Helper Tag

21 Jan 2015 / Filed under Code Snippets

In LaTeX, you can define macros to help ease typing things that have low content-to-markup. (By the way, holy crap, how the hell do I include LaTeX snippets without making Liquid cry tears of blood?) Anyways, I needed to define a helper tag for myself to wrap my images so that they pop up. And it should optionally take a caption so when you mouse over, it shows up the text. Here’s what I did:

module Jekyll
    class PopupImageMacroTag < Liquid::Tag
        def initialize(tag_name, text, tokens)
            bits = text.split
            @href = bits[0]
            @title = ''
            if bits.size > 1
                @title = bits.slice(1, bits.size).join(' ')

        def render(context)
            baseurl = context.registers[:site].config['baseurl']
            @href = "#{baseurl}/#{@href}"
            img_text = "<img src=\"#{@href}\""
            if @title.size > 0
                img_text += " title=\"#{@title}\""
            img_text += " />"
            "<a href=\"#{@href}\" class=\"image-link\">#{img_text}</a>"
Liquid::Template.register_tag('popup_image', Jekyll::PopupImageMacroTag)

So it’s a little weird because you need to parse the arguments yourself, i.e. you can’t specify the different parameters like in LaTeX because it just comes in as a single string. So you need to be careful parsing it out manually and depending on what you’re doing, it might not work, but this is enough for simple cases.

Categories in Shiori

03 Jan 2015 / Filed under Code Reading

To kick off my code reading blog series for the year, I write about my first impression hacking on category pages to the Shiori theme that I use for my sites. You can view the demo for now for details about what I made – basically, the theme didn’t show the categories that the post belongs to, so I added those.

First, a code example to look at:

  # Adds some extra filters used during the category creation process.
  module Filters

    # Outputs a list of categories as comma-separated <a> links. This is used
    # to output the category list for each post on a category page.
    #  +categories+ is the list of categories to format.
    # Returns string
    def category_links(categories)
      categories = categories.sort!.map do |category|
        capitalized_category = category.split(' ').each { |word|
        }.join(' ')
        category_dir = category_link(category)
        "<a class='category' href='#{category_dir}/'>#{capitalized_category}</a>"

      case categories.length
      when 0
      when 1
        categories.join(', ')

It feels really nice to be able to chain apply transformations on categories as in the beginning of category_links. It flows a little bit nicer with the map attached to the List, so you can just type away, just a little nicer than Python map. Having done a lot of bash scripting in past months, the pattern is very familiar to the pipe chains feeding into while loops. It’s also familiar to be able to substitute variables into strings on the spot, too. Also, the return value being the value of the last expression in the block is familiar.

The other part that I really felt home with was working with Liquid.

<h1 class="category">Categories in Shiori</h1>
<ul class="posts">
{% for post in site.categories[page.category] %}
    <li><a class="post-title-archive" href="{{ post.url | prepend:site.baseurl }}">{{ post.title }}</a>
    <small class="text-muted">{{ post.date | date_to_string }}</small>
{% endfor %}

You can iterate over data and apply filters with a familiar pipe syntax, and that’s about it, which is a good idea. It forces you to write a custom filter if you need anything, which is straightforward (e.g. the first snippet defines the category_links filter).

When I was making reports a few months ago, I actually opted to use Jinja, which is Python’s Liquid. I didn’t really pursue it and wrote out a whole set of bash scripts because filesystem manipulation and unix tool usage was too clunky, but looking at what Ruby has [1] [2] strikes me as very nice. I really must take the plunge with Ruby for an object-oriented pipeline experience that I’m missing out on working with just bash.

  1. http://stackoverflow.com/a/166854/364977
  2. http://stackoverflow.com/a/2400/364977

← Older

Newer →

Alex Tsui

Alex Tsui

Computer science grad student at UC Davis, writes C++, enjoys learning languages, and occasionally video games.