Skip to main content

Widget QR Code Scanner

AperçuLien direct vers Aperçu

La tuile QR code scanner de la palette (groupe Avancés, type de widget qrcode) lit les QR codes avec la caméra de l'appareil et donne le texte décodé à une fonction de la page.

Anciennes interfaces uniquement

Le widget ne fonctionne que sur les interfaces restées sur l'ancienne version du moteur : leurs Paramètres de la page affichent Cette page utilise une ancienne version du moteur SoftyFlow. et un bouton Mettre à niveau. Sur toutes les autres interfaces, y compris celles créées aujourd'hui, la palette propose toujours la tuile et le builder n'affiche aucun avertissement, mais la page ne sait pas afficher le widget : sur un écran où le widget est Available, la page ne s'ouvre pas et affiche Error 500. Il en va de même après Mettre à niveau sur une interface qui contient le widget.

Sur ces interfaces, retirez le widget et lisez les QR codes avec un widget Html.

Lire des QR codes avec un widget HtmlLien direct vers Lire des QR codes avec un widget Html

Sur ces interfaces, les composants du lecteur s'utilisent depuis un widget Html :

  1. Ajoutez un widget Html et, avec Edit HTML, donnez-lui ce contenu :

    <div style="max-width: 320px">
  <qrcode-stream @decode="onScan"></qrcode-stream>
</div>

  2. Dans la page Code, ajoutez la fonction à Functions. Elle reçoit le texte décodé. Ici, elle remplit le champ dont le Variable/Model est asset :

    {
  onScan(value) {
    this.models.asset = value;
  }
}
La page à l'exécution : l'image de la caméra dans le widget Html, et le champ Asset code rempli avec le texte décodé.
La page à l'exécution : l'image de la caméra dans le widget Html, et le champ Asset code rempli avec le texte décodé.

<qrcode-stream> affiche l'image de la caméra. <qrcode-capture @decode="onScan"></qrcode-capture> affiche à la place un bouton de fichier, pour prendre une photo ou choisir une image.

  • Bibliothèque : depuis la 8.6, la bibliothèque du lecteur n'est chargée que sur les pages qui contiennent qrcode dans leurs widgets ou leur code. Le contenu ci-dessus le contient : il n'y a rien d'autre à charger.
  • Caméra : les navigateurs ne donnent accès à la caméra que sur un site en HTTPS (ou localhost), après accord de l'utilisateur.

Réglages du widget sur les anciennes interfacesLien direct vers Réglages du widget sur les anciennes interfaces

Le widget QR code scanner sélectionné dans le builder, avec ses réglages dans la carte Global.
Le widget QR code scanner sélectionné dans le builder, avec ses réglages dans la carte Global.

La carte Global regroupe les réglages du widget :

RéglageDescription
NameNom du widget dans le builder.
Variable/ModelIdentifiant du widget. Il ne reçoit pas le texte décodé.
onDecodeNom d'une fonction de Functions (onScan, sans parenthèses). Elle reçoit le texte décodé et doit l'enregistrer.
Typestream : image de la caméra. upload : bouton pour prendre une photo ou choisir une image.
Visual TrackingAvec stream uniquement, ce qui est dessiné sur un code détecté : nothing (default), outline, centered text ou bounding box.