13. September 2017

SDL2_mixer for Android playing WAV file

In previous articles, we were talking about PNG and JPEG support in SDL2 for Android. Let’s add some sounds to our application.

The initial steps are same as in case of SDL2_image.

Register library in settings.gradle:

include ':SDL2_mixer'

The library should be stored in SDL2_mixer directory with build.gradle that written in style for a library.

Now update our C application.

First of all, it is necessary to initialize the library. Then it is possible to load the sound file.

    if (Mix_OpenAudio(22050, MIX_DEFAULT_FORMAT, 2, 4096) == -1 ) {
        SDL_LogError(SDL_LOG_CATEGORY_APPLICATION,
                     "Couldn't open mixer: %s", SDL_GetError());
        return 2;
    }
    Mix_Chunk *sample = Mix_LoadWAV("cuckoo.wav");
    if (sample == NULL) {
        SDL_LogError(SDL_LOG_CATEGORY_APPLICATION, 
                     "Unable to load wave file\n");
        return 3;
    }

The file WAV should be stored in app/src/main/assets. Just small reminder: this is just a virtual directory, and you won’t be able to access it from other application on Android.

Playing the sound is simple:

Mix_PlayChannel(-1, sample, 0);

The last important thing about SDL2_mixer is that you should close SDL2_mixer when exiting the main. Otherwise, when you relaunch SDLActivity, it won’t be able to play any sound.

Mix_CloseAudio();

You can find the source code at GitHub in sdl2-android-example repository. Further articles about SDL2 and android are available under the tag SDL2.

8. July 2017

SDL2_image for Android with XPM image format

In the previous article, we were discussing how to start building SDL2 application for Android. Let’s add some images.

SDL2 library does not contain support for any image formats, you have to add further library SDL2_image which has support for several formats.

In order to add SDL2_image into Android project it is necessary to add a new module to settings.gradle:

include ':SDL2_image'

The module itself will be stored in SDL2_image directory with build.gradle which contains reference to main SDL2 library:

model {
    repositories {
        libs(PrebuiltLibraries) {
            SDL2 {
                headers.srcDir "../SDL2/include"
                binaries.withType(SharedLibraryBinary) {
                    sharedLibraryFile = file("${lib_distribution_root}/SDL2/lib/${targetPlatform.getName()}/libSDL2.so")
                }
            }
        }
    }

SDL2_image has support for several formats. You need to turn them on based on your requirements. It’s easy, just add proper define to compiler. Let’s start with simplest format XPM:

ndk { 
...
   CFlags.addAll(["-DLOAD_XPM"])
...
}

X PixMap (or XPM) is very simple image format which could be embedded directly into the source code.

static char * icon_xpm[] = {
        "32 23 3 1",
        "     c #FFFFFF",
        ".    c #000000",
        "+    c #FFFF00",
        "                                ",
        "            ........            ",
        "          ..++++++++..          ",
        "         .++++++++++++.         ",
        "        .++++++++++++++.        ",
        "       .++++++++++++++++.       ",
        "      .++++++++++++++++++.      ",
        "      .+++....++++....+++.      ",
        "     .++++.. .++++.. .++++.     ",
        "     .++++....++++....++++.     ",
        "     .++++++++++++++++++++.     ",
        "     .++++++++++++++++++++.     ",
        "     .+++++++++..+++++++++.     ",
        "     .+++++++++..+++++++++.     ",
        "     .++++++++++++++++++++.     ",
        "      .++++++++++++++++++.      ",
        "      .++...++++++++...++.      ",
        "       .++............++.       ",
        "        .++..........++.        ",
        "         .+++......+++.         ",
        "          ..++++++++..          ",
        "            ........            ",
        "                                "}

The next step is to transform XPM from the source code into memory structure which could be rendered on the screen.

SDL_Surface *surface;
surface = IMG_ReadXPMFromArray(icon_xpm);
texture = SDL_CreateTextureFromSurface(renderer, surface);

The last part is to call render function. You can find whole source code at https://github.com/georgik/sdl2-android-example.

We will discuss how to use further SDL2 libraries in next articles. You can find more under topic SDL2.

5. July 2017

SDL2 application for Android built by Gradle 4

SDL2 is a well known library for making games or interactive application for Linux, Windows or macOS. The library has also support for mobile devices. Building application for Android requires a little bit more effort than build for desktops.

Let’s go step-by-step.

First of all download Gradle 4 and add bin directory with gradle to your PATH environment variable.

Download and install Android Studio.

Clone sdl2-android-example – branch gradle-4-using-android-experimental-plugin project from GitHub.

Open the repo in Android Studio and open SDK Manager. Go to Tools, select menu Android, and select item SDK Manager.

In the lower right corner check option Show Package Details. Install Android SDK Build Tool e.g. version 28.0.0 and NDK.

When you open the sdl2-android-example you will see following structure. There are two gradle files in the top level directory. The first is build.gradle. The file contains a dependency on gradle-experimental plugin which is recommended for NDK builds for Android.

buildscript {
    repositories {
       jcenter()
    }
    dependencies {
        // Android native build plugin compatible with Gradle 4
        classpath 'com.android.tools.build:gradle-experimental:0.11.0-alpha-preview-02'
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

The second Gradle file is settings.gradle. The file contains a list of modules which are in the project. One module is SDL2 library. Then there are two further modules app and main. The app module is the bridge between Java and SDL2. The main module contains C code for the application.

gradle.ext.sdkVersion = 21

include ':app'
include ':SDL2'
include ':main'

These two files provide a skeleton for the build of the application. Each module SDL2, app and main are stored in the directory that matches the name a of module. Each module contains its own build.gradle which describes how to build the module.

The module file SDL2/build.gradle is interesting because it contains many excludes. It does not make sense to build all C files from SDL2 for Android.

The module file main/build.gradle contains information for linking the C application with SDL2 library.

The module file app/build.gradle contains information how to wrap all the C source code into final application.

First of all, it is necessary to build the libraries (.so files):

gradle distributeLib

If you want to build just one library, you can type:

gradle :SDL2:distributeLib

Gradle will build all flavors. If you’re experiencing problems with Android Studio, just sync the project after executing this command from command line.

Now you can deploy the application to a device or an emulator. Go to Gradle projects, expand :app module, expand Tasks, expand install and double click installDebug target.

We will discuss how to use further SDL2 libraries in next articles. You can find more under topic SDL2.

Note: the sample projet at GitHub already contains reference to other libraries like PNG. Please follow instructions described in the article SDL2_image for Android with PNG image format. The other option is to clone older version of application without PNG.

31. May 2017

How to debug C/C++ code in Android Studio

Android Studio has support for debugging Java and also C/C++ code. The problem is that in default configuration the debugger might not work. There is a quick way how to fix the issue.

Go to your application and select Edit Configurations…

Select tab Debugger and change Debug type to value Dual. Press Ok.

Android Studio will check installed packages and in the case of missing debugger it will prompt you to confirm the fix. Just click Yes.

After installation of necessary packages, the debugger will start and you’ll be able to debug even C/C++ code.

2. April 2017

Custom font for OLED display connected to ESP8266 via SPI

Small OLED displays can easily extend the functionality of ESP8266.

I made an experiment with 128×64 OLED display from Com-Four.

The first challenge was how to connect the display to ESP8266. The recommended way for high performance is to use Serial Peripheral Interface Bus (SPI). The advantage of this approach is the speed, the disadvantage is that it will take more pins.

The display could be connected in following way (also described in the example of ESP8266_SD1306 library):

ESP8266 - SD1306
GND     - GND
3V      - VDD
D5      - SCK (also known as CLK)
D7      - SDA (also known as MOSI/DOUT)
D0      - RES
D2      - DC
D8      - CS

If you’re using PlatformIO, just add ESP8266_SD1306 library to dependencies in platfromio.ini:

lib_deps =
 ESP8266_SSD1306

Now you can run any example from Squix78 library. The library contains 3 sizes of Arial font: 10, 16 and 24px.

My goal was to display temperature from Observatory in Brno. Retrieving temperature and sending it to MQTT for ESP8266 was quite easy.

#!/usr/bin/env python3

import paho.mqtt.publish as publish

import urllib.request
f = urllib.request.urlopen('http://www.hvezdarna.cz/meteo/lastmeteodata')
content = f.read().decode('utf-8')

items = content.split(' ')

publish.single('/home/monitor/display/0', items[4], hostname='localhost')

I used default Arial 24 font. The problem was that the number was too small and barely readable from a distance. Luckily Daniel Eichhorn published great online tool which is able to generate font of any size for OLED display: http://oleddisplay.squix.ch.

My first attempt was to generate Roboto Light 54px font. It was working, just number 4 was not visible. I discovered a bug in the generator, that too big font will overflow default size of char in the jump table.

After several attempts I’ve found the right font for me DejaVu Sans 52px. This font was far more readable.

The last touch to make the font more readable was to tune down contrast little bit by the command:

display.setContrast(10);

I can definitely recommend this type of OLED display. It has good readability even during a sunny day. The code is available at GitHub in LampESP project.