QR code display

Content of this article

In this article, I will introduce a sample application that lets Pepper read the QR code and display the reading result on the display.

QR code reading / display application

Sample app

Please download the sample program from GitHub. 　https://github.com/Atelier-Akihabara/pepper-qrio-example

When the sample program qr_io_app is executed and the QR code is recognized, the following is displayed. (Open qr_io_app.pml and transfer the program to Pepper)

Basic operation of sample application

--Hold the QR code over Pepper. --When the QR code is recognized, the QR code with the same content as the recognized QR code is displayed on the display. Due to the specifications of the QR code, the QR code held over and the displayed QR code image do not always match graphically. --Press the back bumper to finish.

Commentary

The processing flow is as follows: 1. Initialization → 2. Imaging → 3. Display.

1. Initialization

SetPathLibFld box

Pass the path to the lib folder to allow your app to use the library in the lib folder. For more information, see How to embed an extension library. items / d150185ed28fdba6ef20)). The QR code library qrcode is installed in the lib folder.

Initialize box

Enable the display, stop Pepper's Basic Awareness, and do some basic face-facing initialization.

2. Imaging

When Pepper recognizes the QR code, ALMemory will jump the recognition result to the box. Upon receiving the QR code string from ALMemory, the ReadWrite QR box converts the string to an image and sends the image data DataUri to the display via ALMemory.

ReadWrite QR box

This box plays a central role in this program. Let's look at the contents of the process.

Main code of processing

1. Pass the received string p to the image function makeQR.
2. Pass the image data converted by the makeQR function to convertToDataUri and convert it to DataUri.
3. Send the Data Uri-ized data to the display with raiseEvent.

python

def onInput_QRinput(self, p):
    #Confirmation during QR detection
    if not self.isDetecting :
        return
    #Execute only for the first time after detection starts
    self.isDetecting = False
    #Get the read QR code string
    inputCode = p[0][0]
    #QR generation
    img = self.makeQR(inputCode) # 1.
    #File objectization
    s = StringIO.StringIO()
    img.save(s, "png")
    #Convert images to data URI schemes
    dataUri = self.convertToDataUri(s.getvalue()) # 2.
    s.close()
    #Send to tablet
    self.memory.raiseEvent(self.getParameter("key"), [inputCode, dataUri]) # 3.
    #Wait for a certain time
    time.sleep(2)
    #QR detection resumed
    self.isDetecting = True

Next, I will explain the subroutines that are called in makeQR.

Image generation code

1. Use the library qrcode to set the parameters for image creation in the QR code library.
2. Execute QR code image generation.
3. Resize the image to the desired size.

python

def makeQR(self, str):
    #QR generation
    import qrcode
    #Error correction level
    ec_level = [qrcode.constants.ERROR_CORRECT_L,    # 7%Corrected the following errors
                qrcode.constants.ERROR_CORRECT_M,    #15%Corrected the following errors
                qrcode.constants.ERROR_CORRECT_Q,    #25%Corrected the following errors
                qrcode.constants.ERROR_CORRECT_H]    #30%Corrected the following errors
    qr = qrcode.QRCode(
        #QR code version
        version=self.getParameter("version"),
        #Error correction level
        error_correction=ec_level[self.getParameter("error_correction")],
        #Cell size setting
        box_size=self.getParameter("box_size"),
        #Border sizing
        border=self.getParameter("border")
    ) # 1., 2.
    qr.add_data(str)
    qr.make(fit=True)
    img = qr.make_image()
    #resize
    imgSize = self.getParameter("imgSize")
    img = img.resize((imgSize, imgSize)) # 3.
    return img

Data Url conversion code

A member method that converts image data to DataUri. It is used in onInput_QRinput.

python

def convertToDataUri(self, img):
    #Convert images to data URI schemes
    img_b64 = img.encode("base64").replace("\n", "")
    dataUri = 'data:image/png;base64,{0}'.format(img_b64)
    return dataUri

ReadWrite QR box parameters

For reference, I will explain the parameter settings. The following parameters are obtained by self.getParameter in the above code.

3. Display

Receives the data that has flown to ALMemory and displays the image data on the display.

HTML code

A space box ʻid = "qr_display" `is provided for displaying images. The

element for displaying text and the element for displaying images are described inside.

python

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    
    <title>no title</title>
    
    <link rel="stylesheet" href="css/normalize.css" type="text/css" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <script src="/libs/qimessaging/2/qimessaging.js"></script>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/adjust23.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>
    <div id="qr_display">
      <p></p>
      <img src="">
    </div>
  </body>
</html>

JavaScript code

1. Create a subscrubber that receives the ALMemory key " qr_io_app / toTablet_sendQR ".
2. When the data is received from ALMemory, the data is written to the \ <p > element and \ <img > element in the space box ʻid = "qr_display" `prepared on the HTML side.

python

$(function(){
	QiSession(function( s ) {
		session = s;
		session.service("ALMemory").then(function (ALMemory) {
			//Standby
			ALMemory.subscriber("qr_io_app/toTablet_sendQR").then(function(subscriber) {
				subscriber.signal.connect(displayQR);
			});
			
			//QR display screen
			function displayQR(value) {
				$("#qr_display p").text("「"+value[0]+"」");
				if (value[0] == null) {
					$("#qr_display p").text("「None」");
				}
				$("#qr_display img").attr("src", value[1]);
			}
		});
	});
});

Usage example

Although not shown in this sample, the app is equipped with Camera Preview, and the read result is displayed as a QR code image on the display. can also do. It is also possible to use Pepper by holding the QR code over Pepper and displaying the QR code that will be the next trigger based on the read result.

For example, in the exhibition hall, the following operations may be possible.

1. Hold the QR code for admission over Pepper at the entrance at the exhibition hall etc.
2. Pepper will display a unique QR code using the attendee information
3. Visitors read the displayed QR code
4. Along with the explanation of the exhibition, guide the next route or guide to Pepper at the next place, etc.

QR code has a wide range of applications, so please try to develop an application that makes full use of preview and display techniques.

** Article cooperating company Systena Corporation **