[PYTHON] QR-Code-Anzeige

Inhalt dieses Artikels

In diesem Artikel werde ich eine Beispielanwendung vorstellen, mit der Pepper den QR-Code lesen und das Leseergebnis auf dem Display anzeigen kann.

QR-Code-Lese- / Anzeigeanwendung

Beispiel App

Bitte laden Sie das Beispielprogramm von GitHub herunter. 　https://github.com/Atelier-Akihabara/pepper-qrio-example

Wenn das Beispielprogramm qr_io_app ausgeführt wird und der QR-Code erkannt wird, wird Folgendes angezeigt. (Öffnen Sie qr_io_app.pml und übertragen Sie das Programm auf Pepper.)

Grundlegende Bedienung der Beispiel-App

• Halten Sie den QR-Code über Pepper. --Wenn der QR-Code erkannt wird, wird der QR-Code mit dem gleichen Inhalt wie der erkannte QR-Code auf dem Display angezeigt. Aufgrund der Spezifikationen des QR-Codes stimmen der gehaltene QR-Code und das angezeigte QR-Code-Bild nicht immer grafisch überein.
• Drücken Sie die hintere Stoßstange, um den Vorgang abzuschließen.

Kommentar

Der Verarbeitungsablauf ist wie folgt: 1. Initialisierung → 2. Bildgebung → 3. Anzeige.

1. Initialisierung

SetPathLibFld-Box

Übergeben Sie den Pfad zum lib-Ordner, damit Ihre App die Bibliotheken des lib-Ordners verwenden kann. Weitere Informationen finden Sie unter Einbetten einer Erweiterungsbibliothek. items / d150185ed28fdba6ef20)). Die QR-Code-Bibliothek qrcode wird im lib-Ordner installiert.

Feld initialisieren

Aktiviert die Anzeige, stoppt Peppers Grundbewusstsein und führt die Grundinitialisierung mit dem Gesicht nach vorne durch.

2. Bildgebung

Wenn Pepper den QR-Code erkennt, springt ALMemory das Erkennungsergebnis in die Box. Beim Empfang der QR-Code-Zeichenfolge von ALMemory konvertiert die ReadWrite QR-Box die Zeichenfolge in ein Bild und sendet die Bilddaten DataUri über ALMemory an die Anzeige.

ReadWrite QR-Box

Diese Box spielt eine zentrale Rolle in diesem Programm. Schauen wir uns den Inhalt des Prozesses an.

Hauptcode der Verarbeitung

1. Übergeben Sie die empfangene Zeichenfolge p an die Bildfunktion makeQR.
2. Übergeben Sie die von der Funktion makeQR konvertierten Bilddaten an convertToDataUri, um sie in DataUri zu konvertieren.
3. Senden Sie die DataUri-ized-Daten mit RaiseEvent an das Display.

python

def onInput_QRinput(self, p):
    #Bestätigung während der QR-Erkennung
    if not self.isDetecting :
        return
    #Nur zum ersten Mal nach Beginn der Erkennung ausführen
    self.isDetecting = False
    #Holen Sie sich die gelesene QR-Code-Zeichenfolge
    inputCode = p[0][0]
    #QR-Erzeugung
    img = self.makeQR(inputCode) # 1.
    #Dateiobjektisierung
    s = StringIO.StringIO()
    img.save(s, "png")
    #Bild in dataURI-Schema konvertieren
    dataUri = self.convertToDataUri(s.getvalue()) # 2.
    s.close()
    #Auf Tablet senden
    self.memory.raiseEvent(self.getParameter("key"), [inputCode, dataUri]) # 3.
    #Warten Sie eine bestimmte Zeit
    time.sleep(2)
    #Die QR-Erkennung wurde fortgesetzt
    self.isDetecting = True

Als nächstes werde ich die Unterprogramme erklären, die in makeQR aufgerufen werden.

Bilderzeugungscode

1. Verwenden Sie den qrcode der Bibliothek, um Parameter für die Bilderzeugung in der QR-Codebibliothek festzulegen.
2. Führen Sie die QR-Code-Bilderzeugung aus.
3. Ändern Sie die Größe des Bildes auf die gewünschte Größe.

python

def makeQR(self, str):
    #QR-Erzeugung
    import qrcode
    #Fehlerkorrekturstufe
    ec_level = [qrcode.constants.ERROR_CORRECT_L,    # 7%Folgende Fehler wurden behoben
                qrcode.constants.ERROR_CORRECT_M,    #15%Folgende Fehler wurden behoben
                qrcode.constants.ERROR_CORRECT_Q,    #25%Folgende Fehler wurden behoben
                qrcode.constants.ERROR_CORRECT_H]    #30%Folgende Fehler wurden behoben
    qr = qrcode.QRCode(
        #QR-Code-Version
        version=self.getParameter("version"),
        #Fehlerkorrekturstufe
        error_correction=ec_level[self.getParameter("error_correction")],
        #Einstellung der Zellengröße
        box_size=self.getParameter("box_size"),
        #Randgröße
        border=self.getParameter("border")
    ) # 1., 2.
    qr.add_data(str)
    qr.make(fit=True)
    img = qr.make_image()
    #Größe ändern
    imgSize = self.getParameter("imgSize")
    img = img.resize((imgSize, imgSize)) # 3.
    return img

DataUrl-Konvertierungscode

Eine Mitgliedsmethode, die Bilddaten in DataUri konvertiert. Es wird in onInput_QRinput verwendet.

python

def convertToDataUri(self, img):
    #Bild in dataURI-Schema konvertieren
    img_b64 = img.encode("base64").replace("\n", "")
    dataUri = 'data:image/png;base64,{0}'.format(img_b64)
    return dataUri

ReadWrite QR-Box-Parameter

Als Referenz werde ich den Einstellungsinhalt der Parameter erklären. Die folgenden Parameter werden von self.getParameter im obigen Code abgerufen.

3. Anzeige

Empfängt die Daten, die zu ALMemory geflogen sind, und zeigt die Bilddaten auf dem Display an.

HTML Quelltext

Wir haben ein Leerzeichen id =" qr_display " zum Anzeigen von Bildern. Das

-Element zum Anzeigen von Text und das -Element zum Anzeigen von Bildern werden im Inneren beschrieben.

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. Erstellen Sie einen Subscrubber, der den ALMemory-Schlüssel "qr_io_app / toTablet_sendQR" empfängt.
2. Wenn Daten von ALMemory empfangen werden, werden die Daten in das Element \ <p > und \ <img > im Leerzeichen id =" qr_display " geschrieben, um das auf der HTML-Seite vorbereitete Bild anzuzeigen.

python

$(function(){
	QiSession(function( s ) {
		session = s;
		session.service("ALMemory").then(function (ALMemory) {
			//Bereithalten
			ALMemory.subscriber("qr_io_app/toTablet_sendQR").then(function(subscriber) {
				subscriber.signal.connect(displayQR);
			});
			
			//QR-Bildschirm
			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]);
			}
		});
	});
});

Anwendungsbeispiel

Obwohl in diesem Beispiel nicht gezeigt, ist die App mit Kamera-Vorschau ausgestattet und das Leseergebnis wird als QR-Code-Bild auf dem Display angezeigt. kann auch tun. Es ist auch möglich, dass der Benutzer den QR-Code über Pepper hält und Pepper den QR-Code anzeigt, der basierend auf dem Leseergebnis der nächste Auslöser ist.

In der Ausstellungshalle können beispielsweise die folgenden Operationen möglich sein.

1. Halten Sie den QR-Code für die Zulassung über den Pfeffer am Eingang der Ausstellungshalle usw.
2. Pepper zeigt einen eindeutigen QR-Code an, der die Teilnehmerinformationen verwendet
3. Die Teilnehmer lesen den angezeigten QR-Code
4. Führen Sie zusammen mit der Erklärung der Ausstellung die nächste Route oder den nächsten Weg zu Pepper usw.

QR-Code hat eine breite Palette von Anwendungen. Versuchen Sie daher, eine Anwendung zu entwickeln, die die Vorschau- und Anzeigetechniken vollständig nutzt.

** Artikel kooperierende Firma Systema Co., Ltd. **