Affichage du code QR

version
NAOqi 2.5.5.5
Choregraphe 2.5.5.5

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)

fig1.png

Fonctionnement de base de l'exemple d'application

Commentaire

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

1. Initialisation

fig2.png

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

fig3.png

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.

Ballomètre Contenu
key La destination des données de reconnaissance. Les données reconnues sont envoyées à ALMemory au format DataUri.
version Spécifiez le numéro de modèle du code QR. Les numéros de modèle vont de 1 à 40 et doivent être augmentés à mesure que la taille des données augmente. Pour plus d'informations, consultez Normes de code QR.
error_correction Définissez le taux de code de correction des données du code QR en 4 étapes. Plus le taux de correction d'erreur est élevé, plus la fiabilité est élevée, mais plus la quantité de données pouvant être stockée est petite.
- 0 ERROR_CORRECT_L7%Jusqu'à ce que
- 1 ERROR_CORRECT_M15%Jusqu'à ce que
- 2 ERROR_CORRECT_Q25%Jusqu'à ce que
- 3 ERROR_CORRECT_H30%Jusqu'à ce que
box_size Définit le nombre de pixels.
border Définit la taille de la bordure.
imgSize La taille cible des données générées sera redimensionnée à cette taille

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. **

Recommended Posts

Affichage du code QR
Afficher rapidement le code QR sur la ligne de commande
Commande pour générer un code QR
Générer du code QR en Python
Afficher le coupon de Matsuya (code QR) avec Pythonista pour iOS
Décrypter le code QR avec CNN
[Python] Générer un code QR en mémoire
Afficher le graphique japonais avec VS Code + matplotlib
Code de caractère
Mauvais code
Essayez d'utiliser le code QR avec Raspberry Pi