Einfach zu bedienende Interaktionen aus dem echten Leben
Was ist, wenn sie nie etwas tun müssen? Was wäre, wenn die Kamera des Smartphones auf den UPC-Code auf dem Paket richten und auf Ihrer Website die richtige Patrone und eine große rote Schaltfläche zum erneuten Bestellen angezeigt werden könnten?
Überlegen Sie sich, wie Sie eine Kamera auf einer Website verwenden könnten. Stellen Sie sich eine Website vor, die die Preisprüfung im Geschäft unterstützt. Stellen Sie sich vor, Sie erhalten Informationen zu einer Museumsausstellung oder einer historischen Markierung. Stellen Sie sich vor, Sie müssen in Spielen wie Geocaching oder Schnitzeljagd reale Wahrzeichen finden.
Diese kamerabasierten Szenarien sind mit dem Web Perception Toolkit möglich. In einigen Fällen können Sie sogar eine Funktion erstellen, ohne Code schreiben zu müssen.
Wie funktioniert das?
Mit dem Open-Source-Web Perception Toolkit können Sie Ihrer Website eine visuelle Suche hinzufügen. Dabei wird ein Kamerastream des Geräts durch eine Reihe von Sensoren geleitet, die reale Objekte, hier „Ziele“ genannt, auf Inhalte auf Ihrer Website abbilden. Diese Zuordnung wird mithilfe von strukturierten Daten (JSON-LD) auf Ihrer Website definiert. Mit diesen Daten können Sie die richtigen Informationen in einer anpassbaren Benutzeroberfläche präsentieren.
Ich zeige Ihnen genug davon, damit Sie einen Eindruck davon bekommen, wie es funktioniert. Eine vollständige Erklärung finden Sie im Einstiegsleitfaden, in der Toolkit-Referenz, in der I/O-Sandbox-Demo und in den Beispieldemos.
Strukturierte Daten
Das Toolkit kann nicht jedes beliebige Ziel im Sichtfeld der Kamera finden. Sie müssen verknüpfte JSON-Daten für die Ziele angeben, die erkannt werden sollen. Diese Daten enthalten auch Informationen zu den Zielen, die dem Nutzer angezeigt werden.
Die Daten sind alles, was Sie brauchen, um eine Nutzererfahrung wie die in der Abbildung unten zu schaffen. Wenn Sie nichts anderes tun, kann das Web Perception Toolkit Ziele identifizieren und dann Karten basierend auf den in den Daten bereitgestellten Informationen ein- oder ausblenden. Probieren Sie dies mithilfe unserer Demo zur Artefaktkarte aus.
Fügen Sie Ihrer Website Daten mit einer verknüpften JSON-Datei hinzu, die mit einem <script>-Tag und dem MIME-Typ "application/ld+json" eingebunden ist.
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Die Datei selbst sieht in etwa so aus:
[
{
"@context": "https://schema.googleapis.com/",
"@type": "ARArtifact",
"arTarget": {
"@type": "Barcode",
"text": "012345678912"
},
"arContent": {
"@type": "WebPage",
"url": "http://localhost:8080/demo/artifact-map/products/product1.html",
"name": "Product 1",
"description": "This is a product with a barcode",
"image": "http://localhost:8080/demo/artifact-map/products/product1.png"
}
}
]
Die Nutzererfahrung
Was ist, wenn Sie mehr als die Standard-Benutzeroberfläche benötigen? Das Toolkit bietet Lebenszyklusereignisse, Karten- und Schaltflächenobjekte, mit denen Sie die Nutzerfreundlichkeit für diese Ereignisse gestalten können, sowie eine einfache Möglichkeit, die Karten zu gestalten. Ich zeige Ihnen das anhand von Code, der lose auf unserem Einstiegsleitfaden basiert.
Das wichtigste Lebenszyklusereignis ist PerceivedResults. Es wird jedes Mal ausgelöst, wenn ein Ziel gefunden wird. Ein Ziel kann ein reales Objekt oder eine Markierung wie ein Barcode oder QR-Code sein.
Der Vorgang zum Reagieren auf dieses Ereignis ist identisch mit dem für alle anderen Ereignisse, mit einer Ausnahme, die bereits erwähnt wurde. Wenn Sie das Ereignis nicht implementieren, wird automatisch eine Benutzeroberfläche mit strukturierten Daten erstellt. Wenn Sie dieses Verhalten überschreiben möchten, starten Sie Ihren Ereignis-Handler mit dem Aufruf von event.preventDefault().
const container = document.querySelector('.container');
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing.
event.preventDefault();
// Process the event.
}
window.addEventListener(PerceptionToolkit.Events.PerceivedResults, onPerceivedResults);
Sehen wir uns das Ereignis genauer an. Das Ereignis selbst enthält Arrays von Markierungen und Zielen, die gefunden und verloren wurden. Wenn Ziele in der realen Welt gefunden werden, wird das Ereignis ausgelöst und die gefundenen Objekte werden an event.found übergeben. Wenn Ziele die Kameraansicht verlassen, wird das Ereignis ebenfalls noch einmal ausgelöst und Objekte, die nicht mehr erkannt werden, werden in event.lost angezeigt. So lassen sich Bewegungen von Händen und Markierungen berücksichtigen: Kameras, die nicht ruhig genug gehalten werden, oder fallengelassene Markierungen.
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
// Deal with lost and found objects.
}
Als Nächstes zeigen Sie eine entsprechende Karte an, die auf den Ergebnissen des Tools basiert.
async function onPerceivedResults(event) {
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
if (found.length === 0 && lost.length === 0) {
// Object not found.
// Show a card with an offer to show the catalog.
} else if (found.length > 0) {
// Object found.
// Show a card with a reorder button.
}
}
Zum Hinzufügen von Karten und Schaltflächen müssen Sie sie einfach instanziieren und einem übergeordneten Objekt anhängen. Beispiel:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
So sieht das Ganze dann aus. Beachten Sie die Verbesserungen, die ich für die Nutzerfreundlichkeit vorgenommen habe. Unabhängig davon, ob die Markierung gefunden wird oder nicht, biete ich mit nur einem Klick Zugriff auf das, was meiner Meinung nach in der jeweiligen Situation am nützlichsten ist.
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
const { ActionButton, Card } = PerceptionToolkit.Elements;
if (found.length === 0 && lost.length === 0) {
//Make a view catalog button.
const button = new ActionButton();
button.label = 'View catalog';
button.addEventListener('click', () => {
card.close();
//Run code to launch a catalog.
});
//Make a card for the button.
const card = new Card();
card.src = 'We wish we could help, but that\'s not our razor. Would you like to see our catalog?';
card.appendChild(button);
//Tell the toolkit it does not keep the card around
// if it finds something it recognizes.
card.dataset.notRecognized = true;
container.appendChild(card);
} else if (found.length > 0) {
//Make a reorder button.
const button = new ActionButton();
button.label = 'Reorder';
botton.addEventListener('click', () => {
card.close();
//Run code to reorder.
})
const card = new Card();
card.src = found[0].content;
card.appendChild(button);
container.appendChild(card);
}
}
Karten formatieren
Das Web Perception Toolkit bietet eine integrierte Formatierung für Karten und Schaltflächen mit dem Standard-Stylesheet. Sie können aber auch ganz einfach eigene hinzufügen. Die bereitgestellten Card- und ActionButton-Objekte enthalten style-Attribute (unter anderem), mit denen Sie das Design Ihrer Organisation an die Hand geben können. Wenn Sie das Standard-Stylesheet einbinden möchten, fügen Sie Ihrer Seite ein <link>-Element hinzu.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Fazit
Wie bereits erwähnt, ist dies kein vollständiger Überblick über das Web Perception Toolkit. Ich hoffe, Sie haben einen Eindruck davon bekommen, wie einfach es ist, einer Website eine visuelle Suche hinzuzufügen. Weitere Informationen finden Sie im Startleitfaden und in den Beispieldemos. In der Tool-Dokumentation erfahren Sie, was es kann.