Actually I got nothing (better) to do today so I just post this random blog post. Actually, I blogged less in the past two months (well, I didn’t blog at all in the past two months!), because during that time, I felt more like coding than blogging (spent most of my time with stuff on GitHub or StepMania 5).

And also I feel like I should put up more random blog posts, like this one! ^^

One that does the simplest things that a GPS tracker can do: record the coordinates and let me get these data out to do stuff with it.

I Haven’t Found Any Which Works for Me

Many GPS trackers are not free (and has a lot of features I don’t really want), or relies heavily on their own server.

I prefer to have full control over my data. I would like to only send them when I want, and have full access to them.

My Simplest GPS Tracking Webapp

This is the simplest GPS tracking webapp that works for me.

What it does: It logs your location and time in localStorage and submits them to any URL when you click “Submit”. That’s it.

Without much talking, let’s see the code (or the live version).

It has got no map display, speedometer, or whatever. It just logs your coordinates locally into the textarea and localStorage and submits to the URL specified at the top.

This app won’t communicate with the server (the URL specified at the top) unless you click the submit button.

Usage (for GPS-equipped iDevices)

• Turn off “Auto-Lock” in the Settings app (set it to Never). This app won’t track your location when your device is off or locked.
• Open Safari and navigate to the web app’s URL.
• Specify the server’s URL.
• Tap the “Start Tracking” button.
• When tracking, no connection to the Internet is needed.
• Once finished, tap the “Submit” button to submit them to the server.

Receiving The Log

My GPS tracker sends the log (contents of the textarea) to the URL specified at the top by using the coords POST variable.

Your script should be able to handle it easily. Here is the script that runs on my server:

<?php file_put_contents('/path/to/gps.log', $_POST['coords']);

Parsing The Log Format

There are 4 kinds of line. A comment line, a start line, a coordinate line, or the failing line.

A comment line starts with --. Your log parser should ignore these lines. For example:

-- this is a comment

A start line indicates the time that the user pressed the “Start Tracking” button. The format is [time] // start. For example:

1302263615830 // start

A coordinate line looks like [time] // [lat] // [lng]. A example of this line:

1302263698765 // 13.797455945576084 // 100.61361547747381

Finally, a failure line indicates that the tracker wasn’t able to track the position at a specified time. For example,

1302263678901 // fail

Have Fun With Your Data

Use it with Google Maps API or whatever. Have fun!

You can take a look: https://github.com/dtinth

I also moved several old projects to GitHub:

• oauthdamnit
• DtBMS

This month, I’m staying at a computer camp, so I might not blog much.

#!/bin/bash
NOGZ=`wget "$1" -q -O- | wc -c`
echo "Without gzip:       $NOGZ"
YESGZ=`wget --header="Accept-Encoding: gzip, deflate" "$1" -q -O- | wc -c`
echo "With gzip:          $YESGZ"
RATIO=`echo "scale=3;$YESGZ/$NOGZ" | bc`
echo "Compression ratio:  $RATIO"
if [ $YESGZ -ge $NOGZ ]; then
    echo "Gzip is not enabled for this URL. Go check."
fi

To use it, run it, passing URL as the argument

httpgztest http://dev.tw.dt.in.th/thaiWitter/js.js

and it shows the compression ratio.

Without gzip:       79851
With gzip:          20839
Compression ratio:  .260

And if the first and the second number are the same, i.e., the compression ratio is 1, then your gzip is not working.

Without gzip:       1820
With gzip:          1820
Compression ratio:  1.000

Note: These command are to be executed as root.

Preparing for the environment

I created a /hg directory to hold the repositories.

mkdir /hg
cd /hg

Setting up a skeleton

mkdir skel
mkdir skel/.ssh
mkdir skel/repo
echo > skel/.ssh/authorized_keys
chmod 600 skel/.ssh/authorized_keys

This creates a skeleton directory.

Creating A New User

I do this by copying the skeleton, well, actually, I like doing this manually:

cp -Rp skel hg-rwb
chown -R hg-username:hg hg-username/

Add the new user to /etc/passwd

hg-username:x:3001:3000::/hg/hg-username:/bin/sh

Take note of the group ID 3000, we’ll add it in /etc/group

hg:x:3000:hg-username

Add the password:

passwd hg-username

Tell the SSH server to allow only Mercurial

Edit /etc/ssh/sshd_config and add these lines:

Match Group hg
    ForceCommand hg -R ~/repo serve --stdio
    AllowAgentForwarding no
    AllowTcpForwarding no
    X11Forwarding no

Initialize the repository

su hg-username
cd ~/repo
exec hg init

Use it!

hg init
hg add
hg commit
echo '[paths]' >> .hg/hgrc
echo 'default-push=ssh://hg-username@my.secret.server/' >> .hg/hgrc
hg push

I would like it to ask if I want to restore them or not at startup time, not at closing time, so I came up with this hack:

Warning: This is a very ugly hack! Perhaps someone can make it into a Firefox extension?

Go to your Firefox installation folder, navigate to components directory, and open nsSessionStore.js. Search for this:

  /**
   * write a state object to disk
   */
  _saveStateObject: function sss_saveStateObject(aStateObj) {

Add this code after it:

    aStateObj = { windows: [{ tabs: [{ entries: [{
      url: "about:sessionrestore",
      formdata: { "#sessionData": this._toJSONString(aStateObj) }
    }] }] }] };

The above code will force Firefox to always save the session data wrapped inside the session store page. That will force Firefox to show the “Well, this is embarrassing” page when restoring.

    $.fn.toggleCheckboxes = function() {
        var state = false;
        $('input:checkbox', this).each(function() {
            if (!this.checked) {
                state = true;
                return false;
            }
        }).each(function() {
            this.checked = state;
        })
    };

It toggles all the checkboxes inside the matched elements all at once.

This allows you to do something like

$('.toggle').click(function() {
    $(this).closest('tr').toggleCheckboxes();
});

I ended up using just jQuery, CoffeeScript, and my version of iScroll on the client.

I’m not the only one who go this way, the iPad version of WPtouch Pro also uses jQuery and iScroll to provide iPad experience.

crew-to-play

And this application is the result. It uses YQL to fetch the current weekly courses from DJMAX TECHNIKA 2: Crew Race website, and let the user search for crews by music.

I also use Compass for quickly styling the web application.

In this blog post I will be highlighting common issues on achieving this and will be posting some code snippets. They are in CoffeeScript.

Scrolled Columns

The scrolled columns are made possible using iScroll.

My iScroll clone makes it feels more native on iDevices, and added support for more advanced event handling.

Check them out!

Tapping Without a Delay

On MobileSafari, tapping on a link or any clickable element will have 150ms delay to allow double tapping or other actions. This is unwanted on my application, so I wrote a simple function that replaces the default behavior.

It always fire a click event when touchend. I did not make it detect that the finger is still on the control or not. It will just fire. Some improvement could be made by checking if the finger haven’t moved too far before firing.

iScroll.js also does this for you automatically. To prevent the element from being clicked 2 times, my iScroll.js stops the event before letting it reach the document.

    cancel = (e) ->
        e.preventDefault()

    up = (e) ->
        # taken from iScroll.js
        ev = document.createEvent('MouseEvents')
        for point in e.changedTouches
            ev.initMouseEvent('click', true, true, e.view, 1,
                point.screenX, point.screenY, point.clientX, point.clientY,
                e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                0, null)
            ev._fake = true
            point.target.dispatchEvent(ev)
        e.preventDefault()

    document.addEventListener 'touchstart', cancel, false
    document.addEventListener 'touchmove', cancel, false
    document.addEventListener 'touchend', up, false

Touch Feedbacks

Because :hover is not good enough, I had to make my own touch handler that displays feedbacks. It looks for elements with an attribute called data-tappable and will add a class tapping when is being tapped. CSS is then used to style it.

jQuery.fn.tappable = ->
    $fe = (e) ->
        for point in e.changedTouches
            el = point.target
            while el and el != document.body
                if el.hasAttribute and el.hasAttribute('data-tappable')
                    return $(el)
                el = el.parentNode
        return
    this.each ->
        down = (e) ->
            el = $fe(e)
            if el then el.addClass('tapping')
        up = (e) ->
            el = $fe(e)
            if el then el.removeClass('tapping')
        this.addEventListener 'touchstart', down, false
        this.addEventListener 'touchcancel', up, false
        this.addEventListener 'touchend', up, false

    return this

Usage:

$(document).tappable()

On the HTML side, the tappable elements needs an extra attribute to indicate that it can be tapped.

<div class="back" data-tappable="true">Back</div>

There seems to be problem with my version of iScroll.js which stops propagation, you need another .tappable() in each iScroll instance.

new iScroll($('#element').tappable()[0])

Hardware Accelerated Stuff

You need to use hardware acceleration when you want to do smooth transitions on devices. This is done by using -webkit-transform: translate3d(x, y, 0); instead of left: x; top: y;.

You can check if the browser supports this 3d transform by checking for has3d, which came from iScroll.js:

# has3d from iScroll.js
has3d = `('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix())`

The 3 Column Layout

In the web application, I wanted to have 3 evenly spaced columns. I have tried a lot of CSS stuff, but the most effective way to achieve this is to use the old <table> with table-layout: fixed, and then assign to each <td> a same width.

In Closing

And that’s pretty much all. I hope that these snippets can be useful when you make your own iPad web apps.

As the code is hosted on GitHub, feel free to look at the source codes!

This is mainly because of the way the tapcharts are made: It plays the song, the user records the tapchart as the song plays. When the song finishes, you get a tapchart ready to play. In Tap Studio 3, it has a basic UI for editing taps, but you can’t be sure that it syncs well with the song, and it fells unresponsive too.

Few days ago, I tried making my own taps, but each song took me a lot of time, because when I record, there will be an error in some point in the song (missing taps, extra taps, offbeat taps).

StepMania is Much Better At Making Notecharts!

Making stepcharts in StepMania is much more fun. You can record notes into your stepchart, or you can choose to add notes one by one. It has a lot of tools that you can use to fine-tune and sync your stepchart.

Also, most of the already available simfiles on the Internet are pretty time-accurate.

So I made a small Python script to convert my .sm files to be playable on Tap Studio, so I can play them anywhere.

Prerequisites

To be able to convert .sm files for playing in Tap Studio, you need:

• A Mac.
• A jailbroken iDevice, with an SSH server installed.
• Tap Studio (either version 2 or version 3 will do).
• sm2tap.

Converting Stepcharts

Song Initialization

First, you need to have the song you want to convert in your device.

Then, you need to initialize a song. Open Tap Studio, then go to your song library and pick a song you want. After that, press Record. After the song starts, record only one note and save it.

Copying the Song to Your Mac

Then, SSH to your device, or run a terminal on your device as mobile user, and then issue this command:

find Applications -name '*.tapd'

This should list all the tapfiles you have and the locations where they reside in. Copy the tap file you just created (the one with the song name) to your Mac.

Converting StepMania Notes to Tap Studio Notes

On your Mac, you need to convert the .tapd file into an XML file.

Open a Terminal, and then type in

plutil -convert xml1

then press space, then drag the .tapd file into the terminal window, and then press Enter. You will see that the .tapd file will be slightly bigger.

After that, type in:

python

Press space, and drag these files into the terminal window in order:

1. My convert.py file.
2. The .sm file.
3. The .tapd file.

Then go back to terminal and press enter. You should see a list of available step types that can be converted. Type in the name of the step type and press enter. Your .tapd file should be a lot bigger by now.

Finally, to convert it back into binary format,

plutil -convert binary1

then press space, then drag the .tapd file into the terminal window, and then press Enter. The size of the .tapd file will be reduced.

Copying the Modified Notes Back to Device

Copy this file back into your device. You can now play your simfile on your device!

Enjoy!

However, I stumbled upon a question on StackOverflow asking about CoffeeScript, then I looked at CoffeeScript’s home page.

When I saw the example CoffeeScript in that page, compared to the compiled JavaScript, I had a feeling that I want to try to use it. The code indeed looked a lot less messy! And because CoffeeScript works with Node.js (it is available as a Node.js package), I went on with Node.js.

First Round

The first round started after I first knew CoffeeScript for less than 1 day. A day before that, I ported my old library for use in Code Jom written in JavaScript into CoffeeScript and used it.

Surprisingly, I felt very comfortable. I felt like I still have all the power of JavaScript, but in a new, cleaner syntax. I finished the first round with a score of 9 (out of 14, ranked third).

Final Round

I prepared for the final round by familiarizing myself with CoffeeScript. I made a simple mashup webapp called Crew Standings in CoffeeScript and using jQuery and YQL.

Because I planned it a bit wrong and went on working on the main scope, things got messed up when I create functions as sometimes it use the variables outside the function’s scope (because I used a variable name outside that scope.

But JavaScript (and CoffeeScript) is specialized in string handling, for example, when I need to get the first digit of a number, I can just convert the number to a string and use it. When I want to match a pattern from a string, I simply check the string if it matches a regular expression.

I couldn’t do some questions that is based on some algorithm, where some others would be able to do it easily. For example, I was a bit too excited to be able to do the knapsack question.

Also, a lack of fixed multidimensional arrays in JavaScript made things a bit harder, my solution is to put it in an object:

price[p + '-' + m] = ......

But that looked ugly and less straightforward than built-in fixed multidimensional arrays like in C where you can int price[1000][1000];

However, I did it. My team got the first place for the student level.

The Library

I ported the last year’s library to CoffeeScript, so that I don’t have to learn all the new set of functions.

I used a simple hack for forcing functions into the global scope

(-> # force global scope

    @print = (x...) ->
        sys.print y + '\n' for y in x

).call null

Anything that got added to this will be added to the global scope, thanks to CoffeeScript, this.name can be called @name, so the above code added print function to the global scope.

Here is the full library script:

And a small example:

require './LIBRARY'

for testcase in [1..scanNumber()]
    n = scanNumber()
    print (n * (n + 1)) / 2