Affichage du code QR

Contenu de cet article

Dans cet article, je présenterai un exemple d'application qui permet à Pepper de lire le code QR et d'afficher le résultat de la lecture à l'écran.

Application de lecture / affichage de code QR

Exemple d'application

Veuillez télécharger l'exemple de programme depuis GitHub. 　https://github.com/Atelier-Akihabara/pepper-qrio-example

Lorsque l'exemple de programme qr_io_app est exécuté et que le code QR est reconnu, ce qui suit s'affiche. (Ouvrez qr_io_app.pml et transférez le programme vers Pepper)

Fonctionnement de base de l'exemple d'application

• Tenez le code QR sur Pepper. --Lorsque le code QR est reconnu, le code QR avec le même contenu que le code QR reconnu s'affiche sur l'écran. En raison des spécifications du code QR, le code QR conservé et l'image du code QR affichée ne correspondent pas toujours graphiquement. --Appuyez sur le pare-chocs arrière pour terminer.

Commentaire

Le déroulement du traitement est le suivant: 1. Initialisation → 2. Imagerie → 3. Affichage.

1. Initialisation

Boîte SetPathLibFld

Passez le chemin d'accès au dossier lib pour permettre à votre application d'utiliser les bibliothèques du dossier lib. Pour plus d'informations, consultez Comment intégrer une bibliothèque d'extension. items / d150185ed28fdba6ef20)). La bibliothèque de codes QR qrcode est installée dans le dossier lib.

Boîte d'initialisation

Activez l'affichage, arrêtez la détection de base de Pepper et effectuez l'initialisation de base avec le visage tourné vers l'avant.

2. Imagerie

Lorsque Pepper reconnaît le code QR, ALMemory saute le résultat de la reconnaissance dans la boîte. Lors de la réception de la chaîne de code QR d'ALMemory, la boîte QR ReadWrite convertit la chaîne en image et envoie les données d'image DataUri à l'affichage via ALMemory.

Boîte QR ReadWrite

Cette boîte joue un rôle central dans ce programme. Regardons le contenu du processus.

Code principal de traitement

1. Passez la chaîne reçue p à la fonction image makeQR.
2. Transmettez les données d'image converties par la fonction makeQR à convertToDataUri pour les convertir en DataUri.
3. Envoyez les données DataUri-ized à l'écran avec riseEvent.

python

def onInput_QRinput(self, p):
    #Confirmation lors de la détection QR
    if not self.isDetecting :
        return
    #Exécuter uniquement pour la première fois après le début de la détection
    self.isDetecting = False
    #Obtenez la chaîne de code QR lue
    inputCode = p[0][0]
    #Génération QR
    img = self.makeQR(inputCode) # 1.
    #Objectisation des fichiers
    s = StringIO.StringIO()
    img.save(s, "png")
    #Convertir l'image en schéma dataURI
    dataUri = self.convertToDataUri(s.getvalue()) # 2.
    s.close()
    #Envoyer sur tablette
    self.memory.raiseEvent(self.getParameter("key"), [inputCode, dataUri]) # 3.
    #Attends un certain temps
    time.sleep(2)
    #La détection QR a repris
    self.isDetecting = True

Ensuite, j'expliquerai les sous-programmes appelés dans makeQR.

Code de génération d'image

1. Utilisez le qrcode de la bibliothèque pour définir les paramètres de création d'image dans la bibliothèque de codes QR.
2. Exécutez la génération d'image de code QR.
3. Redimensionnez l'image à la taille souhaitée.

python

def makeQR(self, str):
    #Génération QR
    import qrcode
    #Niveau de correction d'erreur
    ec_level = [qrcode.constants.ERROR_CORRECT_L,    # 7%Correction des erreurs suivantes
                qrcode.constants.ERROR_CORRECT_M,    #15%Correction des erreurs suivantes
                qrcode.constants.ERROR_CORRECT_Q,    #25%Correction des erreurs suivantes
                qrcode.constants.ERROR_CORRECT_H]    #30%Correction des erreurs suivantes
    qr = qrcode.QRCode(
        #Version du code QR
        version=self.getParameter("version"),
        #Niveau de correction d'erreur
        error_correction=ec_level[self.getParameter("error_correction")],
        #Paramètre de taille de cellule
        box_size=self.getParameter("box_size"),
        #Dimensionnement de la bordure
        border=self.getParameter("border")
    ) # 1., 2.
    qr.add_data(str)
    qr.make(fit=True)
    img = qr.make_image()
    #redimensionner
    imgSize = self.getParameter("imgSize")
    img = img.resize((imgSize, imgSize)) # 3.
    return img

Code de conversion DataUrl

Une méthode membre qui convertit les données d'image en DataUri. Il est utilisé dans onInput_QRinput.

python

def convertToDataUri(self, img):
    #Convertir l'image en schéma dataURI
    img_b64 = img.encode("base64").replace("\n", "")
    dataUri = 'data:image/png;base64,{0}'.format(img_b64)
    return dataUri

Paramètres de la boîte QR ReadWrite

Pour référence, je vais expliquer le contenu de réglage des paramètres. Les paramètres suivants sont obtenus par self.getParameter dans le code ci-dessus.

3. Affichage

Reçoit les données qui ont volé vers ALMemory et affiche les données d'image sur l'écran.

Code HTML

Une zone d'espace ʻid = "qr_display" ʻest fournie pour afficher les images. L'élément

pour afficher le texte et l'élément pour afficher les images sont décrits à l'intérieur.

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>

Code JavaScript

1. Créez un sous-épurateur qui reçoit la clé ALMemory " qr_io_app / toTablet_sendQR ".
2. Lorsque des données sont reçues d'ALMemory, les données sont écrites dans l'élément \ <p > et l'élément \ <img > dans la zone d'espace ʻid = "qr_display" `pour afficher l'image préparée côté HTML.

python

$(function(){
	QiSession(function( s ) {
		session = s;
		session.service("ALMemory").then(function (ALMemory) {
			//Etre prêt
			ALMemory.subscriber("qr_io_app/toTablet_sendQR").then(function(subscriber) {
				subscriber.signal.connect(displayQR);
			});
			
			//Écran d'affichage QR
			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]);
			}
		});
	});
});

Exemple d'utilisation

Bien que non illustrée dans cet exemple, l'application est équipée de Camera Preview, et le résultat de la lecture est affiché sous forme d'image de code QR sur l'écran. peut aussi faire. Il est également possible que l'utilisateur détienne le code QR sur Pepper et Pepper affiche le code QR qui sera le prochain déclencheur en fonction du résultat de la lecture.

Par exemple, dans le hall d'exposition, les opérations suivantes peuvent être possibles.

1. Tenez le code QR pour l'admission sur le Pepper à l'entrée du hall d'exposition, etc.
2. Pepper affiche un code QR unique qui utilise les informations du participant
3. Les participants lisent le code QR affiché
4. Avec l'explication de l'exposition, guidez le prochain itinéraire ou guidez Pepper au prochain endroit, etc.

Le code QR a une large gamme d'applications, alors essayez de développer une application qui utilise pleinement les techniques de prévisualisation et d'affichage.

** Article société de coopération Systema Co., Ltd. **