Inspired by lolcommits
which takes a snapshot everytime you git commit code. For fun, we decided to make something similar by taking animated snapshots each time an app error occurs and overlaying the error message on the snapshot. Right now it only supports OS X.
When we get an error.
We also get a poor, struggling developer tearing his/her hair out :-)
brew install imagemagick
brew install ffmpeg
We can now install the gem by including it in the Gemfile in your app.
gem 'lolerrors', group: :development
Thats it! You are ready to take some funny snapshots of you fighting with your app. Resulting animations will be output in ~/lolerrors
GIF optimization issue and coalesced animation
We tried to convert the captured video MOV file to a GIF using FFmpeg and optimize it using ImageMagick. The file after optimization was still pretty large (~1 MB) compared to its MOV version(~150 KB). It apparently didn’t compress as much as it should have and additionally, it had some problems like the text overlay shaking on the animation.
Turns out that there is something to do with GIF animation type. The file converted by FFmpeg is an overlay animation, which is the simplest type of frame optimized animation which is the default when converting a movie file to a GIF. Each frame of animation only overlays new pixels currently displayed.
Unfortunately, since the nature of a captured movie file is not an overlay animation, this type of optimizing operation can go badly wrong. However, we can convert it to coalesced animation
that fills it out completely and displays full pixels each frames.
This type of animation is easier for later operations. It makes the optimized GIF smaller and preserves the quality. We can convert it just by adding a command line argument -coalesce to ImageMagick’s utility command convert.
This is an example command to convert a GIF to be a coalesced animation and put some text over it.
convert path/to/original/file \
-gravity South \
-fill white \
-stroke black \
-strokewidth 2 \
-pointsize 24 \
-annotate +0+10 "some text" \
The shaking text problem is now solved and the GIF can be optimized much smaller than before :-)