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

CSN jautājumi 1.1

New version up! I’ll share some technical notes here.

Mobile web dev, PhoneGap, jQuery Mobile and XUI

One feature that got requested was to include a reference of driving rules within the app. The reference is available on internet (i.e. I don’t have to scan books), as a long formatted HTML document. Formatting is bold, italic, font sizes, superscripts. For the mobile, it makes sense to keep format in HTML and use WebView to display it. But one long page is not easy to get around. So…

First, got python script running that splits the page in subpages, it uses both BeautifulSoup and regexps, whichever is easier in each case. It generates output with Mako templates.

Next, bundle the static HTML, JS and CSS in the app with PhoneGap. But, umm, phonegap.jar is big (158KB although ProGuard would probably shave some parts off). And phonegap.js is big as well at 146KB. I’m developing for mobile, I’m concerned with file sizes, kilobytes count! Scratch that, bytes count!

So I got rid of phonegap, as I didn’t really have use all the cool integration features, I just needed a WebView that loads local static content.

Next I stole some generic style rules from jQuery Mobile. Next I integrated the whole jQuery Mobile, which drags in jQuery itself too. Just to rip them out soon after. Because, again, for the little features that I needed (showing/hiding elements, handling onclick) this was definitely an overkill, dragging along IE compatibility stuff and everything. Next I picked up xui.js. Mostly because I was amused with the name and its meaning in Russian, but also because on the homepage it was described as being “super micro tiny”. At 10KB, I thought, it wasn’t all that super-micro-tiny. But it’s OK, and the library packs a (relatively) lot in those 10KB.

Yeah, and browsers these days. I’ve been out of the loop for some time, and look now, animations in CSS, gradients in CSS, nice nice nice.

The other things

Manipulating messy HTML and getting the taste of mobile web development was really the most interesting part, but there were few others.

Did the translation to Russian. Russian texts on average seem to be longer than Latvian so had to do some conditional font size tweaking. Also, they take twice the space on disk, because each character is two bytes in UTF-8! sqlite file with Latvian questions is 270KB, Russian version is 542KB for approximately the same number of questions. When compressed the difference goes down to about 30%.

I’ve fixed some bugs (one was to do with picture sizing on XHDPI devices like Galaxy Nexus. I want Galaxy Nexus. I want many things.), and am aware of some bugs still remaining.

In closing, an unrelated comment about the Go language! I haven’t written a single line of Go yet, but from the samples I’ve seen and articles I’ve read it looks like a sweet language. Low-level enough to be able to do interesting things fast–think data structures, pointers (I’m obsessed with optimizations if you haven’t noticed by now), and still feel reasonably high-level, readable and concise. I don’t have an immediate application for it, I however have a small hope that in the next IO Google annouces Go as supported on Android and releases SDK and everyone gets crazy writing impressively performant apps.

CSN jautājumi

Back in spring-summer when I was studying for motorcycle licence, I put together an app to try exam questions with. It was super-simple, and took about one-two days worh of work. Python script scraped exam questions and illustrations from the official, HTML-driven test site and packaged them up neatly in SQLite database. The database (about 3MB) would be distributed with the app. The most interesting aspect was that pictures were encoded in WebP format to get the APK size down. Android doesn’t have built-in support for WebP until ICS, so I had to get my hands dirty with NDK and JNI.

So that was that. A really bare-bones app, but a fun weekend project. Now I’ve got another fun weekend project to share! The same idea and codebase fixed up to look better, and work better! Here it is on Android Market.

The notable changes:

  • I’m still no artist/designer, but I think this one looks a bit better than the previous version
  • I’m using newer version of libwebp, and the JNI bindings that are supplied with it. Byte array to Bitmap conversion in Java land is a bit more efficient too. Details here
  • Move through question “cards” with swipes. I’m using ViewPager for this and I have to admit I’ve had a pleasant experience with it. Each question screen is a self-contained fragment. I wrote adapter that instantiates the fragments, and ViewPager takes care of the rest–creating new fragments when they are about to become visible, destroying fragments when they move further off-screen
  • Encoded WebP pictures are not in SQLite database any more but in separate file now. The reason is this: A SQLite database bundled with the app (in /assets/ or in /res/raw) cannot be used, even if read-only, from these locations. It first has to be copied to internal or external storage. By storing pictures separately, I can keep the database size low (200KB or so), and waste less space with the duplicate copy

Cool stuff, in other news my car has engine knock. Android development is enjoyable once you learn the ropes, but now when I think about it, it would be so so insanely cool if I had the necessary expertise to work on engines of motor vehicles. Yeah, well THAT would be something!

Hello Django

After long time with Android, I’m doing some part-time web development again, this time with Django. Being Django noob, I’m “OMG” about the vastness of the ecosystem around it. Some pointers and gotchas I’ve encountered in past couple days:

  • Django Best Practices document, and linked resources, e.g. Django Coding Style. This lead me to
    • Rearranging and renaming my templates
    • Splitting up my urls.py file
    • Getting I18N to work early. LOCALE_PATHS must be set in settings.py!
    • Moving my stuff into an virtualenv

    Also reassured some things I had done were right to do:

    • Start populating DEVELOP.txt and README.txt early on
    • Install requirements with pip from requirements.txt. My app doesn’t have setup.py yet, and it isn’t managed by Silver Lining, I’ll think about deployment options when it’s closer to being somewhat ready
  • There was a bit of mess with static files. I’m using django.contrib.staticfiles, and my STATIC_ROOT and STATICFILES_DIRS variables are set like here (except I have “whatever” instead of “bla” in STATIC_ROOT and this path doesn’t have to exist by the way).
  • I’m playing with django-cms. Some discoveries:
    • CMS toolbar didn’t show up in my templates, turns out had to add {{ cms_toolbar }} tag in templates.
    • South, the intelligent schema and data migrations thing seems nice. But it broke my tests, I had to add SOUTH_TESTS_MIGRATE = False in settings.py to fix this
    • Sekizai is a neat useful library. It’s used in django-cms for handling css and js imports in templates
  • When I run tests with ./manage.py test it appears all the included tests for Django and all of the things in my INSTALLED_APPS are run. Signifcant portion of them fail, and that’s apparently normal. For example, Sekizai ships with tests but with no templates that the tests use–in my setup these tests have no chance to succeed. So apparently I should only test my stuff, like so: ./manage.py test my_cool_app my_other_cool_app ...
  • I’m developing in Eclipse, with PyDev plugin. PyDev has special project type “Django project”. With that set up, I can run manage.py commands and development server from within Eclipse. That’s cool, but I’m so used to console…
  • Overall I’m impressed by readability of the code. When facing a problem, it’s sometimes more productive to view .py source than search on internets
  • That’s it for now, but there’s lot more to come, because, LOOK AT THIS


Follow

Get every new post delivered to your Inbox.