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.

1. December 2016

ESP8266 WiFiManager gotchas

Thanks to PlatformIO it is very easy to add further functionality from libraries to the code for ESP8266. When you need to install library, just start Library Manager from ide and type:

pio lib install WiFiManager

PlatformIO will resolve dependencies and download all necessary stuff. Even better option is to add dependency to platformio.ini file:

[env:d1_mini]
platform = espressif8266
board = d1_mini
framework = arduino
lib_deps =
  ArduinoJson
  esp8266_mdns
  PubSubClient
  WiFiManager

PlatformIO will manage the installation after you save the file. That is very neat.

Then new problems occurred when I started with integration of WiFiManager. Do not take me wrong. WiFiManager is very handy library, but you may experience some tricky issues.

The first problem that I hit was that WiFiManager interface was not visible at 192.168.4.1 port 80. ESP was apparently running in AP mode for configuration, but there was no web interface. This issue was caused by this line in my code:

ESP8266WebServer server(80);

I had web server in the main code before I merged the code from WiFiManager. Web server was serving simple REST API for controlling relay. Unfortunately this construct blocked the port so the AutoConnect web server. The server was not able to bind the port. Solution was simple. It was sufficient to instantiate web server after WiFi was working.

The second problem was that AutoConnect from WiFiManager was always turning in AP mode. I was hunting the problem for several hours without any result. One idea was that WiFiManager is not saving the password. That was not true. Other idea was that the memory is corrupted and reformat would help. Unfortunately it didn’t. I gave up.

That solved the problem. Seriously. I gave up and that solved the problem. I let the device running and then ding. It was online. For some strange reason ESP8266 was not able to establish connection with particular WiFi router at first shot. Then it turned on AP mode and after timeout of Config Portal it connected to the WiFi network. Remedy? Just shorten ConfigPortalTimeout:

wifiManager.setConfigPortalTimeout(60);

The third problem was that Config Portal was not displaying information stored as extra custom parameters. I stored there host name of MQTT broker and other options so they won’t be hardcoded. The problem was caused by WiFiManagerParameter constructed in global scope. Issue was similar the first problem with web server.

Solution was to move construction of WiFiManagerParameter to the method after loading configuration values from file config.json stored on file system.

File configFile = SPIFFS.open("/config.json", "r");
...
WiFiManagerParameter custom_mqtt_host("mqtt_host", "MQTT host", configMqttHost, 40);

After resolving these issues WiFiManager is working and it is possible to set values for configuration via Config Portal and there is no need to hardcode them anymore.

Original code is stored at GitHub – LampESP branch v0.1. The new version is at Github – LampESP branch master. I made also small refactoring and the functionality was divided into smaller files which resembles modules for better code maintenance.