A Quick Experiment to Present Pictures with Ruby and Jekyll

Jekyll is an awesome tool with clear documentation that will let you generate static websites. It’s perfect if you love Ruby and you need to create something simple and quick.

I had this idea for a while, where I wanted to create a photo album starting from the pictures I have.

The requirements were:

  • HTML with the most possible clean approach – no frameworks on top
  • Easy to navigate also from mobile
  • Can support a huge set of pictures
  • The pictures can be organized in folders and each folder would represent a different gallery
  • The pictures have an optimized thumbnail that don’t drain all the bandwidth
  • The architecture would let you add more pictures easily on further iterations
  • (DESIRABLE) The pictures can be auto oriented using EXIF metadata

Apparently, on StackOverflow, I was not the only one looking for something like this.

I started the quest stupidly optimistic, thinking that would take me no more than an hour to find something fully working on Github. So the challenge was just investing a short amount of time to play with Jekyll and setting the proper configuration options to run it in my local LAN.

Well, long story short, I was wrong! I was so deeply wrong that I thought for a moment to give up and spend my free time doing something else.

You can, you should, and if you’re brave enough to start, you will.

Stephen King


Jekyll offers the option to include custom plugins, the concepts to grasp are just a few and there are tons of plugins available on Github.

After more thorough researches I condensed the requirements I needed into these plugins:


Whereas for the theme, Jekyll has an impressive theming system, and there are loads of resources on the web. Among the jungle of websites offering themes I selected these two:

In the end, I went for the leanest and minimalist I could find: Urban theme http://jekyllthemes.org/themes/urban/


After I gathered all the pieces that I needed, it came the tricky part; pull everything together into something working.

Many of the plugins were using RMagic to generate the thumbnails and optimize the images, but Minimagic proved to work better for my needs, it has a smaller memory footprint and was very easy to integrate.

Another pain point was the symlinks, I did not want Jekyll to copy all my images every time as some of my collections are huge, so I “took” inspiration (shamelessly copied) the same approach adopted by the Jekyll Gallery Generator, and improved the checks for not copying the same image twice.

As for last effort, I manage to make auto-rotation fully working, optimizing the algorithm from the Jekyll Gallery Generator and make it configurable in the _config.yml file.

Final Result: Azores Image Gallery

I created a new repository on Github and committed all my work: Azores Image Galley

If you want to see Azores Image Gallery in action check the demo.

To offer the site in your local network run 

jekyll serve --host

and all the devices connected to the same network can navigate the albums by typing <local_ip>:4000.

Connect to Genymotion Android emulator remotely

Even if this might appear as an edge case I know a lot of Android devs using Genymotion emulator for Mac in their daily work, but emulators in general, are RAM eater that slow down the entire system.

Genymotion is an awesome Android emulator, the support is good and the installation is fast and simple: it simply works out of the box!

After experimenting some configurations, I’ve accomplished to run Genymotion on a Windows PC and make it available for connection from my Mac.

The solution has been tested on a local trusted network nevertheless, an SSH tunnel would be preferable.

This solution can be convenient if you don’t want to overload your Mac with the heaviness of the emulator or/and a long test suite takes some time to finish and in the meantime you need to switch to another emulator.



  • Mac with Android SDK.
  • Windows with Genymotion installed.

First of all,  go to Genymotion settings > ADB > Select Use custom Android SDK tool and leave it empty, in this way Genymotion will not restart the local ADB when the external ADB will try to connect.

Set Genymotion SDK empty

Now you need to open port 5555 and 5554 to let ADB connects to Genymotion.

On Start, go to Windows System > Control Panel > System and Security > Windows Firewall > Advanced Settings.

ADB remote 5555

Right click on Inbound Rules > New Rule

Select Port


Select TCP

In Specific local ports type 5555


Select Allow the connection


Uncheck Domain and Public if you need this rule for your home network only


Add a name to the rule I’ve called it ADB remote 5555


Now right click on Inbound Rules > New Rule once again and repeat the process for port 5554.

Use the same configurations, just specify 5554 in Specific local ports, and in the end call the rule ADB remote 5554

It’s time to start Genymotion and run our Android emulator.

Take note of the IP address of the emulator, from now on I’ll call it <emulatorIP>.


And now it’s time to forward the incoming connections to the Genymotion emulator.

From the windows machine run command line as administrator: go to Start > type cmd > the first result will be Command Prompt right-click on it and select Run as administrator.


netsh interface portproxy add v4tov4 listenport=5555 connectport=5555 connectaddress=<emulatorIP>

and hit return.


netsh interface portproxy add v4tov4 listenport=5554 connectport=5554 connectaddress=<emulatorIP>

and hit return.

You can double check you typed correctly running this command

netsh interface portproxy show all

and you should see something like this


Now kill adb on Win

adb kill-server

And take note of the local IP typing

ipconfig | findstr IPv4

I’ll call it <windowsIP>.


Go finally to your Mac and restart the adb.

adb kill-server
adb start-server

And connect to Genymotion by typing the IP of the Windows PC

adb connect <windowsIP>:5555




This is the solution I found without using any external software for SSH tunnel or PuTTy, if you want to explore more solutions you can check these posts on StackOverflow


Overlap2D, a level editor for LibGdx Open Source

overlap2d level editor

Level Editor

A level editor for LibGdx is a rocky topic.

Coming from the Android world, I thought a clever move would have been sticking to Java for game development. Unfortunately, the panorama of level editing software for this language is still really poor. Many game engines, like Unity, contain awesome integrated solutions, stable and rock-solid for creating complex levels.

You will find a totally different scenario if you decide to develop your game using Java and LibGdx.

A stable level editor recognised from the community is somehow still missing in the LibGdx ecosystem. The choice is limited and some of them are not maintained anymore or unstable.

The top 3 most promising:

Far from being production ready, I decided to give it a shot with Overlap2D.

Now at its 0.1.3 version.



Even if not super stable, I have to admit I enjoyed using this editor. The learning curve is smooth and several tutorials are available on a youtube channel

A big problem I had, was related with rotations applied to a physical body, that feature was not working properly so I had to spend a while in the code base to figure out a solution and gladly the overlap team accepted my pull request 🙂

Among the changes, I decoupled overlap2D from physics and light, so now there is a way for managing outside the engine this two elements.

The project is open source available on GitHub.


Among the drawbacks that I found so far: the resizing. Sometimes after a window resize the editor becomes unusable. All the UI elements will become somehow misaligned with the mouse pointer. This is very frustrating and I hope the team will try to fix this really annoying issue.

The community forum is still small and sometimes the feedback may arrive after a while.


Overlap2D is not ready for big productions, but it can be a good solution for Indie Devs or small games based on LibGdx. Being open source is a big plus.

VisEditor looks promising also. It worth mentioning that Overlap2D is based on VisEditor.

I hope the community will embrace the potential of one of these two.

Considerations are always welcome.

If you have a direct experience with a level editor for LibGdx let me know in the comments below!




Character animation made with Spine2D

Main character animation completed!

The gif looks a bit clunky but it’s probably the acquisition software. The runtimes are based on LibGdx and render perfectly smooth on Mac, Window, Android and iOS.

Spine2D and LibGdx runtimes

The software used for the animations is Spine2D from Esoteric Software, it’s not free but it worth every penny! The UI is user-friendly and there is an awesome community behind in case of support.

The interpolations between every animation do the magic so the movements look always fluid and the spine-libgdx runtimes are stable and easy to use.

The character belongs to a game we’re working on at the moment, while the credit for the drawings goes to Yaara! A talented artist I have the pleasure to work with.

Even if the black background is just a placeholder, the environment will be intentionally dark.

The character is androgynous. It can be imagined as a boy or a girl, depending on the player, and I have to thank Yaara for this. The name of the character is still under discussion. I like Dexter, but suggestions are much appreciated 🙂

Character animation follows the pose-to-pose principle and this video provides a good explanation about it.

The final outcome will be post-processed with a shader effect for antialiasing so it will be even better in terms of quality.

I learnt a lot from this deep-dive into Spine2D but most of all I had loads of fun!

I’m proud of my main character but I’m sure this is just the first step of a long journey. I’m sure some minor tweaks will follow along the way and during the testing phase this week.

I need to make sure animation and antialiasing together are not too heavy on mobile devices.

Also, I want to put more effort on publishing content more often. New updates will come soon !!!


Android advanced ADB Show Layout Bounds

Show layout bounds can be activated by ADB and is a really helpful option especially when it comes to polish UI and check everything is alright.

Layout Bounds

This option can be activated by command line exiting the app, setting the property and starting the app again.

 adb shell am force-stop com.company.appname ; adb shell setprop debug.layout true ; adb shell am start com.company.appname 


An even easier way to achieve this is using a Groovy script available here


Commands are easy and in real-time:

  • devtools.groovy overdraw on/off (it will show/hide overdraw in current UI)
  • devtools.groovy layout on/off (it will show/hide layout bounds)
  • devtools.groovy gfx on/off (it will show/hide gpu rendering)


There is also a youtube video with a quick demonstration:



The second file in the project is another Groovy script to help connect your device with adb in Wifi mode.

(Precondition: android device and your Mac/PC must share the same WiFi Network)

These are the commands without using adbwifi.groovy script to achieve the same.

Connect the device via USB and from terminal type

 adb shell ip -f inet addr show wlan0 

Take note of the IP address of the device

 adb tcpip 5555 
 adb connect DEVICEIP:5555 

Disconnect the USB cable, the device should be connected via WiFi

Try to type

 adb devices 

Outcome will be

 List of devices attached
 DEVICEIP:5556 device

Using the script is much easier, simply connect your phone via USB (in best case with WiFi switched on), run adbwifi.groovy and wait until it tells you to disconnect and press enter.


Remember to install Groovy if you decide to use the script above.

Sparse Array vs HashMap

This is the answer I gave for a StackOverflow question.
I’d like to report it here for the records.


Sparse arrays can be used to replace hash maps when the key is a primitive type. There are some variants for different key/value type even though not all them are publicly available.

Benefits are:

  • Allocation-free
  • No boxing


  • Generally slower, not indicated for large collections
  • They won’t work in non-android project

HashMap can be replaced by the followings:

    SparseArray          <Integer,Object>
    SparseBooleanArray   <Integer, Boolean>
    SparseIntArray       <Integer, Integer>
    SparseLongArray      <Integer, Long>
    LongSparseArray      <Long, Object>
    LongSparseLongArray  <Long, Long>   //this is not a public class                                 
                                        //but can be copied from  Android source code 

In terms of memory here is an example of SparseIntArray vs HashMap for 1000 elements


class SparseIntArray {
int[] keys;
int[] values;
int size;

Class = 12 + 3 * 4 = 24 bytes
Array = 20 + 1000 * 4 = 4024 bytes
Total = 8,072 bytes


class HashMap<K, V> { 
Entry<K, V>[] table;
Entry<K, V> forNull;
int size;
int modCount;
int threshold;
Set<K> keys
Set<Entry<K, V>> entries;
Collection<V> values;

Class = 12 + 8 * 4 = 48 bytes
Entry = 32 + 16 + 16 = 64 bytes
Array = 20 + 1000 * 64 = 64024 bytes
Total = 64,136 bytes

Source: Android Memories by Romain Guy from slide 90.

The numbers above are the amount of memory (in bytes) allocated on heap by JVM. They may vary depending on the specific JVM used.

java.lang.instrument package contains some helpful methods for advanced operation like checking the size of an object with getObjectSize(Object objectToSize).

Extra info are available from official Oracle documentation

Class = 12 byte + (n instance variables) * 4 byte
Array = 20 byte + (n elements) * (element size)
Entry = 32 byte + (1st element size) + (2ns elements size)

Android ADB commands to locate Activities

Sometimes during debug or bug fixing I need to locate the activities in the source code.

The Android Debug Bridge provides some commands to help us.

Make sure your device is USB connected and the activity to locate is in foreground.

From terminal:

 adb shell dumpsys activity activities | grep mFocusedActivity 

It will print out something like this:

mFocusedActivity: ActivityRecord{44ff17b u0 com.youpackagename/.ActivityName t14533}

It’s so simple!
I realized I used it so often I created a script.

 echo "adb shell dumpsys activity activities | grep mFocusedActivity" >> locator.sh
chmod a+x locator.sh 

From now on, every time you need to locate the activity in the source code just type from terminal ./locator.sh

Some clever tools for a Java Dev

Here are some tools I use or I’m going to use to save time and be more productive


  • Jumpcut  (Mac only) –  An application that provides “clipboard buffering” very useful.
  • PushBullet – Easy and fast way to send data across your devices and receive notifications.
  • Messenger (unofficial) – A small chrome extension to send and receive facebook messages.
  • Vysor.io – A window of your Android on your Desktop. Not tested  extensively yet, but looks very promising.
  • Codota – The perfect place to save your code snippets.


First Post


Sarpex.co.uk is live! In these pages you’ll find information about Sarpex Ltd and day to day blogs about Java, Android and LibGDX development.

Blog section will cover development topic with ideas, concepts, tutorials and code snippet.

Comments and suggestions are encouraged from who wants to share his point of view.