Sometime around 2013 I wrote a clone of the GBA game bit Generations SoundVoyager called audventure. SoundVoyager is actually a collection of mini-games where sound is the main focus. You can actually play the game blind, and at some point, that’s pretty much what happens.

sound catcher

The signature mini-game in SoundVoyager is sound catcher. In the mini-game, you can only move left and right at the bottom of the stage, while a “sound” falls from the top. Your goal is to catch the sound which is signified by a green dot. When you catch it, the sound or beat becomes part of the BGM and a new dot appears with a different sound.

You can of course use your eyes and move accordingly, but if you put on earphones, you can actually hear where the dot is, either on your left or right, with it getting louder as it gets close to you. As you collect more sounds, the dot gets more and more transparent. Eventually (and this is where it gets fun), you won’t be able to see the sounds anymore and will have to rely mostly on your ears.

You can see what the original game looks like in this video or you can play it under sound safari in audventure.

WebAudio vs Flash

At the time I wrote audventure, only Chrome supported WebAudio. Also, the API looked (and still looks) quite complicated. Flash on the other hand, was starting to die, but still well-supported so I went with that. For the most part, it worked okay though Chrome actually had timing issues when playing sounds. Now, it doesn’t work in any browser. I tried to debug the issues but ultimately ended up just rewriting it to use WebAudio instead.

For the game, I needed to simulate the source of the sound in 2D/3D space. Flash only really gives you stereo panning and volume control. With some maths, we can actually get an acceptable solution. Less importantly, I needed to be able to get frequency data of the currently playing “sound” to pulse the background. For this, I actually had to implement the feature in the Flash library I was using.

With WebAudio, spatial audio is already built-in and you can simply give it the coordinates of the sounds and the listener. There are some other options to tweak, but for the most part, no complex math is needed. Getting frequency data for a sound is also actually built-in and didn’t take too long to integrate.

Overall, I was impressed by how much you can do with WebAudio out-of-the-box. I kind of understand why it’s complicated, but there’s some simple functionality that I wish was included. For example, there is no API to pause and then resume playing an audio buffer. You have to manually save the elapsed time and play from there.

Other mini-games

So far I’ve only actually implemented the sound catcher mini-game. There are around 4 different categories with slight variations in between.

sound catcher / sound slalom

I’ve explained sound catcher a while ago; sound slalom is a minor variation on that. Instead of waiting for the “sound” to reach you, you now have to guide yourself in between 2 “poles” of sound, as in slalom skiing. But this time, you can also accelerate forward. The goal is to finish the course before the time runs out.

sound drive / sound chase

In sound drive, you’re driving against the flow on a 5 lane road. You have to avoid oncoming cars, trucks and animals until you reach the end. You’re allowed to change lanes and accelerate, and the game tracks your best time. Sound chase is pretty much the same, except you’re trying to catch up to a “sound”.

sound cannon

In sound cannon, you’re immobile but can rotate within a 180 degree angle. Your goal is too shoot down “sounds” which are heading your way. If a sound reaches you, it’s game over. You win when you kill all the sounds.

sound picker / sound cock

In sound picker, you can move in a giant square field where various sounds are scattered around. Your goal is to pick up all the sounds within the time limit. Sound cock is similar, except the sounds are chickens and you have to chase them around.

Source Code

If you want to see the source code, you can check it out here. The sound files aren’t in the repo though, since I’m not quite sure about the licensing. If you want to contribute music or sound effects, I’d gladly appreciate it.

Smart electronics and IoT (Internet of Things) are all the rage these days. You have a lot of companies sprout up trying to make the next big thing, which also leads to a lot of failures big and small. Pebble, the maker of my smartwatch, got bought out by Fitbit recently. This left watch owners without any official support, but thankfully, community members stepped up to continue maintaining it.

Another casualty of the IoT boom was the Orange Chef Prep Pad. It’s a bluetooth connected weighing scale to make it easy to track your calories and carb/fat/protein intake. My dad bought it last year only to find out that the app was incredibly buggy. The search function doesn’t work which makes the whole thing practically useless. I also found out later that you can’t even download the app to use the scale anymore.

Note I just found out as I was writing this post that it may get supported by another company.

So the app is useless, but at least you can use it as a scale, right?

Nope. The device has no display whatsoever. The only controls on it are the on/off button and a green LED that isn’t even that useful at telling you whether it’s on or not. At this point, it’s just a giant paperweight.

Reverse Engineering

Since I essentially had nothing to lose, I tried poking at the thing to figure out how it works. I didn’t really have experience with bluetooth besides trying to get my bluetooth mouse connected on Linux. The main thing I used then was bluetoothctl which is essentially a CLI for managing bluetooth devices so I started there.

I started up bluetoothctl and turned on the Prep Pad. And it showed up!

[bluetooth]# power on
[CHG] Controller ... Class: 0x00010c
Changing power on succeeded
[CHG] Controller ... Powered: yes
[bluetooth]# scan on
Discovery started
[CHG] Device 1C:BA:8C:21:7C:BB RSSI: -51
[CHG] Device 1C:BA:8C:21:7C:BB Name: CHSLEEV_00
[CHG] Device 1C:BA:8C:21:7C:BB Alias: CHSLEEV_00

I then connected to it, which was surprisingly easy.

[bluetooth]# connect 1C:BA:8C:21:7C:BB
Attempting to connect to 1C:BA:8C:21:7C:BB
[CHG] Device 1C:BA:8C:21:7C:BB Connected: yes
[CHG] Device 1C:BA:8C:21:7C:BB Name: CH BTScale_00
[CHG] Device 1C:BA:8C:21:7C:BB Alias: CH BTScale_00

Now normally, when you turn the device on, the green light flashes occasionally. Once I connected to it, the green light stayed on permanently. Clearly, I was making progress. A lot of services were also discovered but I had no idea what those things were at that point.

After a lot of poking around, I could check the general device information. You could get the hardware, software and firmware version. There’s also the device serial number which was nowhere on the actual physical device.

[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017
[CH BTScale_00:/service0010/char0017]# attribute-info
Characteristic - Firmware Revision String
	UUID: 00002a26-0000-1000-8000-00805f9b34fb
	Service: /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010
	Value: 0x31
	Value: 0x2e
	Value: 0x31
	Value: 0x33
	Value: 0x41
	Value: 0x00
	Flags: read
[CH BTScale_00:/service0010/char0017]# read
Attempting to read /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x31
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x2e
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x31
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x33
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x41
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x00
  31 2e 31 33 41 00                                1.13A.
[CH BTScale_00:/service0010/char0017]#

There was also a service which contained Accel Enable, Accel Range, Accel X-Coordinate, Accel Y-Coordinate, and Accel Z-Coordinate. I guess it stands for accelerometer, which is probably what it uses to weigh things.

[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026
[CH BTScale_00:/service0023/char0024/desc0026]# read
Attempting to read /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x41
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x63
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x63
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x65
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6c
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x20
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x45
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6e
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x61
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x62
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6c
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x65
  41 63 63 65 6c 20 45 6e 61 62 6c 65              Accel Enable

I couldn’t read from any of the Accel Coordinates. It kept saying permission denied. I could however, notify on them. But that didn’t yield anything as well. What I could read was Accel Enable, which was set to 00. I guess that means it was off. After writing 01 to Accel Enable, I found I could get values out of Accel X-Coordinate! Also, the green LED which was permanently on turned off.

[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024
[CH BTScale_00:/service0023/char0024]# write 01
Attempting to write /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024
[CH BTScale_00:/service0023/char0024]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a
[CH BTScale_00:/service0023/char002a]# notify on
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Notifying: yes
Notify started
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x5b
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x55
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x59
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
[CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00

I tried pressing the scale down a few times, and the values changed accordingly. Now, I just had to figure out how to convert the values into grams. It looked like the values were 32-bit integers sent as 4 bytes. In the above example it would be 0x0002a35b, 0x0002a355, 0x0002a359 or 172891, 172855, 172899. The values also decrease as you exert more effort on the scale. So assuming you take the initial value as tare, you simply subtract any succeeding value from that tare and you get the “weight”.

The values I got didn’t seem to be in grams though. After weighing some things on an actual scale and comparing the values I got, I found I can just divide the values by 14 and get something in grams. That 14 is entirely a magic number though and I have no idea whether other Prep Pad’s would have the same constant.

OpenPrepPad

With all that figured out, I went ahead and made a simple CLI application to interface with the Prep Pad. Ironically, node was the simplest thing I found that had nice bluetooth library support so that’s what I wrote it in. I also added most of the technical details in the README for that as well.

While this is all well and cool, I doubt the intersection of Linux users and people who got ripped off bought the Prep Pad is anyone besides me. In light of that, I’m in the process of making a React Native version of the app, but that’s still a work in progress. Who knows, if the new owners of Prep Pad are good, I might not even need to finish it.

A common problem we encounter is for things like ñ not showing up correctly. This actually caused some issues in the recent Philippine elections, but this isn’t about hash codes or anything like that.

By default, we use UTF-8 for text storage and rendering. A problem is that browsers don’t assume UTF-8 as the default and you need to have either a <meta charset="utf-8" /> in the HTML or Content-Type: text/html; charset=utf-8 in the headers. A few of our services don’t set the Content-Type with the charset=utf-8 part so you’d get piñata instead of piñata.

Being lazy, we usually just correct this at the reverse proxy side. It’s trivial to do in nginx. You just need to add charset utf-8; to your configuration and you’re good. For haproxy though, I couldn’t readily find a solution for it and had to go through the docs to see what I could do.

After a bit of experimenting, I had success with this:

# set content-type to utf-8 if not already
acl has_charset hdr_sub(content-type) -i charset=
rspirep (Content-Type.*) \1;\ charset=utf-8 unless has_charset

This is probably not the best way to do it. Arguably, we should just fix our services to have the correct Content-Type in the first place, but I can do that some other time.

An old client of ours managed to convince a telco to zero-rate the data for their app. In order to whitelist it though, we needed to use plain HTTP for domain whitelisting. For HTTPS, they can only whitelist by IP address. Like any good developer, we were using HTTPS. Also, like any good developer, we put our server behind Cloudflare.

Now the problem is that Cloudflare can put you behind any IP they own, which is a huge range. There’s no guarantee that the IP we have now is going to be the same later on. So we did the reasonable thing and asked them to whitelist all of the Cloudflare IPs. And the telco agreed! We were in total disbelief when that happened. But hey, if life gives you free internet, you take it.

We never actually empirically tested whether other sites hosted on Cloudflare were also actually zero-rated. But I like to think that we saved a lot of people on their data costs from browsing Reddit and 4chan. But alas, good things must come to an end.

A few months after we started beta testing the app, Cloudflare added more IPs to their range. Unfortunately, our server got moved to those new IPs which were not whitelisted yet. Apparently, the telco whitelisting process was incredibly convoluted and time consuming. Our client didn’t want to bother asking them to whitelist more IPs. We also tried asking Cloudflare to move us back to the original IP range, but they could only do that if we were in their enterprise tier. We couldn’t really afford that, so we looked for other options.

Since Cloudflare was essentially just a giant reverse proxy, theoretically there should be no distinction between one IP address from another. The specific IP we get is probably just for load balancing. So we tried accessing the IPs in the range directly and just setting the Host header and it worked! But we get SSL errors because the IP itself doesn’t have its own certificate.

After more testing, we figured out that you could actually use any Cloudflare backed domain so long as we properly set the Host header. We just needed to find one still in the old range. Coincidentally, 4chan.org was. Which led to this wonderful commit

commit 123456789abcdef
Author: ~~~~~~
Date:   ~~~~~~

    4chan hack

diff --git a/src/com/client/common/Util.java b/src/com/client/common/Util.java
--- a/src/com/client/common/Util.java
+++ b/src/com/client/common/Util.java
@@ -210,7 +210,8 @@ public class Util {
        }

        public static String getServerAddress(Context context) {
-               String address = "https://backend.client.com";
+               // String address = "https://backend.client.com";
+               String address = "https://4chan.org";
                if(!isDebug(context)) return address;
                try {
diff --git a/src/com/client/common/logging/APIClient.java b/src/com/client/common/logging/APIClient.java
--- a/src/com/client/common/logging/APIClient.java
+++ b/src/com/client/common/logging/APIClient.java
@@ -101,6 +101,7 @@ public class APIClient {
        private HttpResponse postInternal(String url, List<NameValuePair> data, boolean forRegistration) throws ClientProtocolException, IOException {
                HttpPost request = new HttpPost(Util.getServerAddress(mContext)+"/api/"+url);
                request.setHeader("X-API-VERSION", apiVersion);
+               request.setHeader("Host", "backend.client.com");

                if(data == null) {
                        data = new ArrayList<NameValuePair>();

Eventually, we did decide to just abandon Cloudflare for the server. We probably weren’t going to be the target of a DDOS or anything. This also allowed us to do more secure things like pinning the server certificate in the application itself. Clearly, this is what we should have just done in the first place, but at the time we just wanted a stopgap solution.

I just still find it funny we were making people’s phones go to 4chan.org everyday for more than a year.

I’ve always liked TiddlyWiki. Back when it first came out, it was really amazing. A wiki all in one file, that worked in the browser. It didn’t need a backend, it would just save itself as an all new HTML file with all your posts inside. I’ve used it a lot over the years, as a personal wiki/journal and a class notebook. I even had a blog with it at one point using one of the server-side forks.

Now, there’s TiddlyWiki5 which is a rewrite of the original TiddlyWiki that looks a whole lot snazzier, and I assume has better architecture overall. It also has experimental support for all the server-side platforms (particularly TiddlyWeb) that have cropped up.

If you’re just looking for a simple server setup for TiddlyWiki5, it has native support for that on its own. There’s plenty of documentation on the site. But if you’re looking for more advanced features (like storing your posts in git or a database), then you’ll need to use it with TiddlyWeb. The problem is that most of the documentation for TiddlyWeb still refers to the old TiddlyWiki.

To support TiddlyWiki5, we’ll need a version of the wiki which has the TiddlyWeb plugin already installed and configured. After that, some tweaking is necessary to get TiddlyWeb to provide what the wiki requires.

Setting Up TiddlyWiki

TiddlyWiki5 provides a command line tool via npm that allows building custom versions of the wiki. In fact, it comes with templates, called “editions”, that we can use for our setup. Assuming you already have it installed, create the wiki using

tiddlywiki mywiki --init tw5tank          # create wiki from template

This creates a wiki intended for use with Tank, which is built on top of TiddlyWeb. From here, you should look in mywiki/tiddlers/system which contain the entries for SiteTitle, SiteSubtitle, DefaultTiddlers, and tiddlyweb-host. The first 3 should be configured however you want. These are necessary because they’re needed before the wiki can load them from the server. tiddlyweb-host contains the location of the TiddlyWeb server, this should be http://localhost:8080/ if you’re just testing locally. With everything configured, you can build the new wiki by running

tiddlywiki mywiki --build

This will output the wiki to mywiki/output/tw5tank.html. You can now serve it using your favorite local webserver, like python -m http.server.

Setting Up TiddlyWeb

The TiddlyWeb tutorial recommends using tiddlywebwiki which has all the plugins setup for a nice wiki instance for the old TiddlyWiki. It has a lot of features that aren’t really needed, so we won’t go with that. So first, we’ll need to install TiddlyWeb and any plugins we might want to use.

pip install tiddlyweb tiddlywebplugins.status tiddlywebplugins.cherrypy tiddlywebplugins.cors

Next, we’ll need the tiddlyweb configuration in tiddlywebconfig.py

# A basic configuration.
# `pydoc tiddlyweb.config` for details on configuration items.

import tiddlywebplugins.status

config = {
    'system_plugins': ['tiddlywebplugins.status', 'tiddlywebplugins.cors'],
    'secret': '36c98d6d14618c79f0ed2d49cd1b9e272d8d4bd0',
    'wsgi_server': 'tiddlywebplugins.cherrypy',
    'cors.enable_non_simple': True
}

original_gather_data = tiddlywebplugins.status._gather_data

def _status_gather_data(environ):
    data = original_gather_data(environ)
    data['space'] = {'recipe': 'default'}
    return data

tiddlywebplugins.status._gather_data = _status_gather_data

The tweaks involved are:

• using the status plugin which the wiki requires
• monkeypatching the status plugin for the wiki to use the correct “recipe”
• using cherrypy server instead of the buggy default one
• using cors since we’re not hosting the wiki itself on the same server

With that, we just need to create the store that will hold our data

twanager recipe default <<EOF
desc: standard TiddlyWebWiki environment
policy: {"read": [], "create": [], "manage": ["R:ADMIN"], "accept": [], "write": ["R:ADMIN"], "owner": "administrator", "delete": ["R:ADMIN"]}

/bags/default/tiddlers
EOF

twanager bag default <<EOF
{"policy": {"read": [], "create": [], "manage": ["R:ADMIN"], "accept": [], "write": [], "owner": "administrator", "delete": []}}
EOF

Finally, we can start the TiddlyWeb server

twanager server

Putting it all together

Once you have the TiddlyWeb server running, you can just go to wherever you’re hosting the wiki html and it should work. You can try creating some posts, and the check mark on the sidebar should be red for a while and then turn black. Once that’s done it’s saved. You can refresh your browser and your posts should still be there.

At this point, you can start customizing your TiddlyWeb instance, by changing your store to something like a database, or adding authorization. You can also tweak the server setup so you won’t need CORS anymore.

TiddlyWiki5 is still relatively new. I hope that eventually, support for server-side and the plugin ecosystem grows to be as great as the old TiddlyWiki.