June 30, 2021 plug-ins OLED

THETA Z1 OLED Drawing Library Part 2

Introduction

This is Ricoh’s @ KA-2. The original Japanese article appeared here.

This is Part 2. Part 1 is here. In Part 1 you learned about the OLED drawing library and what you can do with the OLED display. In this Part 2, we are showing a Ping Pong game and QR Code demos.

The following video is an example of what you can create with the “OLED drawing library.”

https://www.youtube.com/watch?v=7eYaUrlwmGk

Ping Pong Game

You can move the paddle (vertical bar) on the left side of the screen up with the Wi-Fi button and down with the Fn button.

Whoever gets to 5 points first wins. Who won or lost is displayed for a certain period of time, and then the game is repeated again.

Actually, the movement is smoother than shown here in the animated GIF.

GIF_03 small.gif

The threaded process is the main loop of the drawing process. Below that, the definition and code for the game are organized after the comment “Ping-pong game.”

Full source code here.

QR Code Display

Even if the QR code is output in the smallest size (“Level 1”) the width of 21 dots (21 cells) is required in the range where there is black, excluding margins. The amount of information included is 20 characters with a mixture of numbers, uppercase letters and some symbols, assuming that the error correction level is M (the second from the bottom of the four levels of L, M, Q, H). It becomes.

Click here for details.

There are 24 dots on the short side of the OLED that can be manipulated from the THETA plug-in. If the margin is 1 dot, it seems that the minimum QR code can be output in the range of 23x23 dot and read by other devices.

I was able to do it when I challenged myself!

The display result on OLED is as follows

QRコード表示_1920.jpg

It comes up on a smartphone like this:

QRコード読み取り_1920.png

Source code

A library called zxing is used to generate the QR code.

Please refer to this article (in Japanese) for how to use the library.

One line in build.gradle (Module: app) in the article has been changed as follows:

dependencies {
   ~truncated~
    implementation 'com.journeyapps:zxing-android-embedded:3.6.0'
}

The added import is as follows:

import java.util.HashMap;
import com.google.zxing.WriterException;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
import com.journeyapps.barcodescanner.BarcodeEncoder;

I created a Bitmap object for storing QR code and a QR code generation method in MainActivity.

    //QR code generation test
    Bitmap qrBitmap;

    private void makeQrCodeVer1(String qrText) {
        int size = 21;
        int margin = 1;

        try {
            BarcodeEncoder barcodeEncoder = new BarcodeEncoder();
            HashMap hints = new HashMap();

            hints.put(EncodeHintType.CHARACTER_SET, "utf8");
            hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);
            hints.put(EncodeHintType.MARGIN, margin);
            hints.put(EncodeHintType.QR_VERSION, 1);

            qrBitmap = barcodeEncoder.encodeBitmap(qrText, BarcodeFormat.QR_CODE, size, size, hints);

        } catch (WriterException e) {
            Log.d ("OLED_TEST", "QR_ERROR");
            qrBitmap = Bitmap.createBitmap( (size+margin*2), (size+margin*2), Bitmap.Config.ARGB_8888 );
            //set ALL WHITE
            for ( int x=0; x<(size+margin*2); x++ ) {
                for (int y=0; y<(size+margin*2); y++ ) {
                    qrBitmap.setPixel(x,y, 0xFFFFFFFF);
                }
            }

        }

    }

There is no particular meaning as to why I set “CHARACTER_SET” to “utf8”. It’s just because I didn’t use Japanese this time.

You can refer to this article (in Japanese) showing the mode is determined based on the input value.

(1) Only numbers → “NUMERIC mode”

(2) Numbers, uppercase letters and some symbols (0-9, A-Z, spaces,’$’,’%’,’*’,’+’,’-‘,’.’,’/’ ,’:’) Only → “ALPHANUMERIC mode”

(3) Characters and symbols other than (1) and (2) are included → “BYTE mode”

For version 1 error correction M, the following amount of information can be embedded in the QR code:

(1) 34 characters

(2) 20 characters

(3) 14 bytes (14 characters)

Since the URL, etc., corresponds to (3), it seems difficult to tell the URL of the plug-in that automatically uploads.

The following code is written in the display area. Since I wanted to display all the QR-coded original character strings on the OLED, it is a display example of 17 characters.

                        oledDisplay.clear();

                        String qrString = "ABCDEFG0123456789";

                        makeQrCodeVer1(qrString);
                        Integer qrX = qrBitmap.getWidth();
                        Integer qrY = qrBitmap.getHeight();
                        oledDisplay.setString(25, 0, "QR Width =" + Integer.toString(qrX));
                        oledDisplay.setString(25, 8, "QR Height=" + Integer.toString(qrY));
                        oledDisplay.setString(25, 16, qrString);
                        oledDisplay.setBitmap(0,0,23,23, 0,0,128, qrBitmap);

                        oledDisplay.draw();

oledDisplay is an instance of the Oled class. For instantiation and initial operation of OLED (brightness setting and display clear), refer to the source code of other cases.

In the case of QR code display, I think that it is easier to read with a smartphone etc. if the brightness is not set high.

Conclusion (Repeated from Part 1)

I think we have created an OLED drawing library that can be used quite easily. There are some restrictions, and maybe… there may still be bugs, but I would appreciate it if you could point out anything you notice.

Once the display library is in place, it may be easier to create things like:

  • Real-time display of edge-extracted pictures of live view with OpenCV
  • Information display for shooting mode and various settings
  • Histogram display from live view data
  • Graphical level display
  • Real-time display of waveform of sound obtained from the microphone
  • Game that uses the network (such as an egg that goes out to another person’s THETA?)
  • Keyboard connected to THETA, so a terminal can execute ADB commands
  • Debugging information (logcat) of the plug-in sent to OLED
  • And more!

We would appreciate it if you could try creating a new plug-in with your own ideas. It seems that you can make a lot of retro game-like things, breakout-like games, ultra-narrow Tetris, etc. I would be very grateful if you could publish them to the THETA plug-in store!

About the RICOH THETA Plug-in Partner Program

If you are interested in THETA plug-in development, please register for the partner program!

Please be aware that the THETA with its serial number registered with the program will no longer be eligible for standard end-user support.

For detailed information regarding the partner program please see here.

The registration form is here.