Appcelerator Titanium

A very TL;DR: of what I love about Appcelerator Titanium:

  • Appcelerator Titanium is a proprietary platform. You need to sign up, log in and possibly pay monthly fee. Sure they have a a Github repo. But for the Github version there are no builds, no documentation.
  • the “cross-platform” UI is very limited. Good luck building anything more sophisticated than a button, picture, a line of text or a colored rectangle (To be fair, building UI frameworks is hard. A cross-platform UI is harder, and also a stupid idea)
  • each application ships with V8 Javascript engine. On Android the apps ship 3 copies of V8 for different architectures. Minimum APK size for “hello world” application is around or close to 10MiB. An native “hello world” application would be 50KiB.
  • Shitty support for native platform features. Anything beyond the “look! we can display a button which runs alert(‘hello’)” is either painful or impossible without mending the Titanium Mobile SDK. You can file a feature request or bug report on Jira, where it will join thousands of others
  • it’s not doing a good job of hiding platform differences. It’s not even trying that hard. There are platform-specific modules, and for the missing functionality you get to write platform-specific code yourself!
  • No ecosystem. Want to use 3rd party service for cloud services, push messaging, image processing etc? 3rd party services usually have iOS and Android SDKs. Obviously they would have no Titanium SDK, but you’re welcome to roll your own Titanium module…

Hello Computer

I’ve been doing little bits of home improvement lately and I think this one is the nerdiest yet, by far.

Observation one: whenever I’m in apartment, I want the PC on and music going. Turning PC on is the first thing when I arrive, and turning it off is the last thing when I leave.

Observation two: right next to front door there is a light switch that does not appear to be hooked up with anything. And there’s a loose bit of cabling hanging from ceiling.

Enter home automation, idiot style.

First, I verified that the light switch controls the hanging bit of cable. Obviously it was intended for a light fixture that didn’t get installed. Next, I got an AC socket from home-depot type store and wired it up:

2015-01-02 15.24.09

Get the idea where this is going? Next up, let me present the “brains” of my home automation solution:

brainz

It’s an Android phone with busted screen that has been sitting around here and not doing anything useful. It’s an ideal device if you think about it: it has WIFI, it has internal battery, it has screen, and it is relatively easy to develop for. Crucially, it can sense whether it is being charged or not. Much easier to get going than rPi or Arduino-likes. And of course it is a complete overkill for what I’m going to use it for.

So, a phone hanging from ceiling… Looks bizarre for sure, but the ceiling is high there, and the spot is such that people would not normally look up and wouldn’t notice it.

Rest is simple, a custom Android app that sends Wake-on-LAN packets, and runs shutdown commands over SSH. (GitHub repo here). Now, as I come in, I can turn the light switch on and the PC turns on. Turn it off and PC shuts down gracefully.

I think next I should extend the app to have voice recognition. It would then wake the PC whenever it hears me saying “HELLO COMPUTER”.

A New Plan?

Remember that one time when I fried a 6850 graphics card? In short, I was switching to aftermarket cooler, and I had to fiddle with VRAM heatsinks so they would fit properly on my card. Something got shorted along the way and the card was done.

After which, I bought an Asus 6870 DirectCU. I was carefully choosing a card with good stock cooling so I wouldn’t need to touch it. Well, it is reasonably quiet, but by now all the other components have gotten quiet enough that the card is again the most noisy component. Hacking time again, eheheh?

Here are my options.

I could sell this card, and get a semi-passive Asus STRIX series card. The fans on these don’t even spin up at idle, which would be perfect. It’s a bit of investment, but, frankly, this is probably the sanest option to take.

I could do something about the stock cooler, stock heatsink, or the cooling profile. On reference-design cards you can use Radeon BIOS Editor to create a custom cooling profile and upload it to the card. The cooling profile could be something like “don’t spin fans until 65C, then ramp up, reaching full speed at 75C”. This would effectively convert a regular card into semi-passive card. The card would need to have a good heatsink to have thermal headroom, so it can run passive for useful amounts of time though.

Problem with custom desigs like my Asus DirectCU is they use custom cooling solution, and custom fan controller that you can only partially control from card’s BIOS. In particular, even at 0% duty cycle the fan will spin at 1300rpm. The fan controller is designed to range between 1300-3000rpm, which corresponds to 0%-100% duty cycle. What’s more, there is a feedback loop from tachometer to PWM signal. The fan controller will maintain fixed idle speed and will ramp up duty cycle if fan slows down. So, even if I replaced the stock fan with a slower-running, quieter fan, the controller would still spin it at 1300rpm.

Due to heatsink design, there is also not much improvement to be had from switching fans. It’s already about as good as it gets with this heatsink.

P_500

You cannot switch out from 8.5cm fan to a couple of silent 12cm fans because top of heatsink is not flat and the plastic shroud is also there for a good reason. The dual fans would probably do a worse job at cooling, and, yeah, they would still spin at 1300rpm.

An aside: an interesting observation was how the plastic shroud is attached. Its screws are located so inconveniently, you pretty much have to remove the whole heatsink to access them. Why make it difficult? I guess it is to stop people from removing the shroud, messing up airflow, overheating the card and then claiming warranty. It’s as if the card’s designers said: “there is no good reason to remove just the plastic. You would only be doing that if you’re also changing the whole heatsink”.

So you could change the whole heatsink but there’s no way I’m doing that, after what happened with 6850.

How about using motherboard’s chassis fan connectors for GPU? Well that might work, but there’s two potential issues. First, the GPU might get upset “dude where’s my fan” and throttle back its performance. Second, it would be a brittle setup, where some resident software polls GPU temperature and controls the chassis fan. This is a GPU meltdown waiting to happen.

Now, as I said, the rational choice is probably to splash out for a STRIX card and be done with it. But for one last idea, how about MitM-ing the GPU fan controller? It appears that Arduino style devices have the required hardware to read PWM signal (perhaps with a help of small resistor and capacitor, to convert to analog first). It can also output PWM signal for driving fan, and surely it can output pulses to imitate tacho. So there could be an Arduino sitting on the wire before GPU fan, listening on the trusty but way too conservative PWM signal from the card, then doing its own custom curve and reporting fake tacho numbers back to keep the card happy. Now that would be a hack!

GoPro & bike

Here’s the plan for kick-ass sports videos:

  • GoPro 3 Silver, chest mount, a bike
  • Shoot 1080p with ProTune
  • Video editing on Linux is lost cause, Windows all the way–
  • Join .mp4s into a single .mkv using Avidemux, no quality loss here!
  • Stabilize with VirtualDub / Deshaker
  • Bring into Vegas, chop into interesting bits and the rest, then remove the rest
  • Add music track
  • Move interesting bits around and tweak boundaries to semi-match beats
  • Brightness, levels, color correction, sharpness
  • Remove most of the wind noise with EQ
  • Bring volume up wherever I say anything, so there’s chance of hearing it
  • Render and youtube

Here’s my first attempt

I’ll be trying out other mounting options. Even after stabilization there’s plenty of jerkiness. There’s huge DIY hacking potential in how one mounts a GoPro.

I probably overdid colors a bit. And, come spring, there will be more interesting places to ride. Exciting times ahead!

Q: Why GoPro and not, say, Sony Action Cam?
A: Bitrate and flat color profile (ProTune). Sony’s in-camera stabilization is Very Nice, though.

Q: ProTune?
A: Shaky cycling videos need tons of bitrate. Also, sky is not blown out and can be fixed later

Q: Deshaker?
A: It’s slow as cow, but it’s good.

Q: Why stabilize all the footage and not just the fragments I’ll need?
A: Simplifies workflow, instead of fiddling with each separate clip I start with a single stabilized file

Scaling and animating CSS sprites

I’m working on a project called SnappyEverAfter. It’s a wedding photo sharing with mobile apps thing. Like disposable cameras. But with smartphones.

While working on this I had to deal with some tricky CSS bits, and I’m so proud with one particular trick that I want to share it there.

So, the task: on the website, I’ll have a grid of thumbnails, the thumbnails would have hover effect, and respond to clicks and drags.

OK, I’ll just start with UL and float its LI’s:

Inside each LI there would be IMG, centered using margins. At first my hover effect was just a border, later I added scale effect, and even animated it, because it’s just so easy to do with CSS3:

I’m omitting vendor prefixes and other stuff here for clarity. I added some rounded corners and drop shadows too and this is how my thumbnails looked, with one of them zoomed in:

Sweet, all done! Except, uh, … “transition: sclale” thing was making my Chromium crawl. Don’t know why. Anyway, instead of that, we can do the zoom effect by changing size and margins (and animate that too!):

Chromium was quick again, Firefox quick as ever, IE9 OK too, but no border or shadow cuteness in IE8! Also, with 20 separate thumbnails I was making 20 HTTP requests, not optimal.

At first, I did get IE8 stuff working with CSS PIE, but it’s a hack… There’s some flicker, and it interferes with my drag&drop. I guess, because it is sensitive to z-indexes. And still the 20 requests nastiness…

It was time for CSS sprites! CSS sprites is a technique of putting many small images in single big picture, so they download at once. At display time use “background-position” CSS rule to shift the big picture around. That’s the traditional approach. And I can pre-render rounded borders and drop shadows in the sprite image!

My problem with traditional approach is that one cannot get background to scale. There’s “background-size” CSS rule but that’s not well-supported. “transform: scale” is out because of performance problem. One interesting idea I encountered was to put icons in webfont. Clever, right, but only works for monochrome vector data. But then there’s an idea of using DIV and IMG inside. DIV would be “overlay: hidden” so it would work as a mask, IMG would be absolutely positioned so its correct region is seen through DIV:

See, IMG is like a filmstrip, and DIV lets you see only one frame of it. On hover, I adjust both vertical offset for IMG, and size of the DIV. And I animate both. Well it kind of works in Chrome and Firefox, a bit wiggley but works. I assume it is wiggley because there are several properties independently animated, these are in floating point values, and rounding errors cause things to jump forth and back a bit. In Chromium, I got an artifact with frames not lining up during animation. Again, the problem seemed to be with independently animating several properties and rounding problems.

Also, IE9 appears to be totally uncool about relatively positioned elements in large quantities. It gets slow, very slow.  OK, so here’s my fix to both problems:

First, IMG is offset with negative margin, not “top” rule. So DIV doesn’t need to be relatively positioned and IE is happy.

Second, offset is given as percentage. This way, I don’t need to animate offset, and the problems with animating several things at once go away. Looks nice and sweet on Chrome, Chromium and Firefox. Looks correct with shadows and all on IE too, no animation there though. And all thumbnails load in one request. And it’s fast, and fluid. It’s beautiful!

That’s it, now I’ll go back and hover over thumbnails and stare at the effect some more :-)

How I got a new graphics card

* rawwwwrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr: fan bearings on 6850 have worn out
* market research, acquisition of Accelero S1 Rev2
* screwdrivers out, case open, hammer time
* heatsink fit problem, like here, hacksaw and angle grinder saves the day
* bad temps, preapplied thermal compound on Accelero doesn’t cover all of the GPU
* bad temps, suspect worn out thermal pads under voltage regulators, make my own
* temps getting there, one last iteration, boom, my card now shorts motherboard

Time and money well spent…

* More market research, acquisition of Asus 6870 DirectCU
* With -30°C outside, might as well mine bitcoins…
* AMD APP SDK 2.6
* AMD Catalyst 12.1
* Order is important. On Fedora 16 at least, installing AMD APP SDK *after* Catalyst overwrites some files and OpenCL apps segfault happily
* Current mining settings that result in ~250MHash and nice, smooth desktop:

phoenix.py -k phatk2 -u http://user:pass@host:port DEVICE=0 WORKSIZE=128 \
VECTORS BFI_INT FASTLOOP AGGRESSION=4

With higher aggression it goes higher–270MHash/sec and probably even further with more tuning, but desktop gets a bit jerky. Total power consumption is around 280W.

CSN jautājumi 1.2

New version up, time to reflect on some of the more interesting aspects of its development.

Changelog is short and sweet:

  • Exam mode
  • Interface language switch in menu

The Exam Mode doesn’t sound like that much of a deal, but it took quite a bit of development effort. I had to rethink navigation, make the main activity stateful, and add “Exams” section in statistics screen.

Navigation changes

In the earlier versions the navigation model was rather simple. There was an “infinite” deck of questions (in my mental model and in code I call them “cards”, and they are implemented as fragments) that one can scroll through. The extra functions were stuffed in options menu. Now, with the exam mode there are a few problems:

  • Need to make clear when we’re in “Training” mode and when in the “Exam” mode.
  • When in exam mode, need to display exam progress (number of questions answered, elapsed time)
  • When user completes exam, need to show exam results and allow to review cards with mistakes

As for the exam progress, I came up with what I thought was great idea: when user swipes through exam cards, show a centered translucent window with progress information. Here’s how it looked:

The spinning strip of numbers was a custom widget that was fun to build. Ultimately I ended up using a different method for showing exam progress, and this one was dropped from codebase.

As for exam results, I had an idea of having a new type of “card” that displays exam results instead of question and answers. So the decks of cards could look like this, training mode:

And exam mode:

When user completes exam, we should allow reviewing questions, for the educational effect. At least this is how I used the official online exam webapp: complete exam, then look at every question again, memorize my reasoning that lead to answer, and memorize whether that reasoning was correct or not.

Instead of looking at all answers, some might want to look just at the wrong answers, so my app should allow for that. So I stretched my “deck of cards” metaphor further:

I actually had this implemented, but as with the exam progress overlay window, this didn’t make it into the app. Although the navigation model was perfectly clear in my head, I was worried it wouldn’t make such perfect sense to others.

Actionbar

The need to clearly indicate training and exam modes was what ultimately lead me to introducing actionbar in the interface. That, and then-recently launched Android Design site, which established actionbar as a standard component of typical Android app.

I had considered adding actionbar before, but was reluctant to do so, because actionbar takes vertical screen space, and I was already struggling to fit some of the more text-heavy questions into available space. Making things vertically scrollable of course is the easy way out. Anyhow, I set out to try add actionbar and still fit everything into the screen.

I picked up the beta version of ActionBarSherlock and got busy. Having actionbar opened new avenues of UX. Here’s the custom widget that shows exam progress:

Once the exam is over, there’s an “lightbulb” action item that cycles through the red cards:

ActionBarSherlock comes with tab support, perfect fit for the statistics screen:

Fitting everything

The questions have varying amount of content:

  • Some have illustrations, some do not
  • Each question has 2-5 answer variants. Each variant could be as short as “Yes” or “No”, or it could take a couple sentences
  • Questions and answers in Russian take considerably more screen space. It seems words in Russian are just longer on average

For the cards, I have my “ideal” layout with nice, readable font sizes, margins, and equal amounts of vertical space devoted to each answer. If I cannot fit content in the screen, I’m willing to gradually give these up:

  • Allow answers to have different screen heights. This is for situations where one answer could fit in, for example, two lines of text, and another answer needs three lines. Give just enough space for each one. Doesn’t look as neat as equal heights, but oh well
  • Question block has defined certain minimum height. If the content still doesn’t fit, remove that minimum height requirement
  • Last resort–drop down on font sizes and try everything again

I wrote a crazy-messy-looking “constraints solver” that implements this strategy. And it works, every screen eventually kinda fits, even if the font sizes have to be dropped down significantly:

Another nice tweak I did, is this: if there are 4+ answers, and all are really short, display them in two columns:

Making the main activity stateful

Before there was exam mode, the main activity could get away without keeping any state information–except for statistics kept in sqlite database. If user leaves the app, and Android system kills the app, and user comes back again, it’s OK to start a brand new deck of cards. It isn’t quite so for exam. If I’m midway of an exam, then take and incoming call, and upon returning to app, the exam state is gone–I’d be greatly disappointed. So I made my activity save its state in onSaveInstanceState(), and then restore it in onCreate(). To make this process clean and easy, I implemented the Parcelable interface for some of my data objects.

In the closing, I thought it would be interesting to compare LOC of an early version which had just two short .java files, and the current version. Then:

$ find . -name *.java | grep -v R\.java | xargs cat | wc -l
159

And now:

$ find . -name *.java | grep -v R\.java | xargs cat | wc -l
2398


Follow

Get every new post delivered to your Inbox.