Interattività nel mondo reale di facile utilizzo.
E se non fosse mai necessario? E se potessero puntare la fotocamera del telefono verso il codice UPI sulla confezione e mostrare al sito la cartuccia giusta e un grande pulsante "riordina" rosso?
Pensa ad altri modi in cui puoi utilizzare una videocamera su un sito. Immagina un sito che supporta il controllo dei prezzi in negozio. Immagina di ottenere informazioni su un'esposizione di un museo o su un indicatore storico. Immagina di identificare i punti di riferimento reali in giochi come il geocaching o la caccia al tesoro.
Il Web Perception Toolkit rende possibili questi scenari basati sulla videocamera. In alcuni casi è possibile anche creare un'esperienza senza scrivere codice.
Come funziona?
Il Web Perception Toolkit open source ti aiuta ad aggiungere la ricerca visiva al tuo sito web. Passa lo streaming della videocamera di un dispositivo attraverso una serie di rilevatori che mappano oggetti del mondo reale, qui chiamati "target", ai contenuti del tuo sito. Questa mappatura viene definita utilizzando i dati strutturati (JSON-LD) sul tuo sito. Con questi dati, puoi presentare le informazioni giuste in un'interfaccia utente personalizzabile.
Ne mostro abbastanza per darti un'idea del funzionamento. Per una spiegazione completa, consulta la guida introduttiva, il riferimento del toolkit, la demo della sandbox di I/O e le demo di esempio.
Dati strutturati
Il toolkit non è in grado di trovare un qualsiasi obiettivo nel campo visivo della videocamera. Devi fornire i dati JSON collegati per le destinazioni che vuoi che riconosca. Questi dati contengono anche informazioni su questi target che verranno mostrati all'utente.
I dati sono tutto ciò di cui hai bisogno per creare un'esperienza utente come quella nell'immagine di seguito. Se non fai altro, il Web Perception Toolkit può identificare gli obiettivi, quindi mostrare e nascondere le schede in base alle informazioni fornite nei dati. Prova questa procedura utilizzando la nostra demo delle mappe degli artefatti.
Aggiungi dati al tuo sito con un file di dati collegato JSON, incluso utilizzando un tag <script> e il tipo MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Il file ha un aspetto simile al seguente:
[
{
"@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"
}
}
]
L'esperienza utente
E se volessi un'esperienza utente diversa da quella predefinita? Il toolkit offre eventi del ciclo di vita, oggetti Card e Button per creare l'esperienza utente basata su questi eventi e un modo semplice per personalizzare le schede. Ne mostro una parte con codice basato a perdita d'occhio nella nostra Guida introduttiva.
L'evento più importante del ciclo di vita è PerceivedResults, che viene attivato ogni
volta che viene trovato un target. Un target può essere un oggetto reale o un indicatore, come
un codice a barre o un codice QR.
La procedura per rispondere a questo evento è la stessa di qualsiasi altro evento con
un'eccezione già menzionata. Se non implementi l'evento, viene creata automaticamente
un'interfaccia utente utilizzando i dati strutturati. Per eseguire l'override di questo comportamento, avvia il gestore di eventi chiamando 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);
Diamo un'occhiata all'evento in modo più approfondito. L'evento stesso contiene una serie di indicatori
e obiettivi che ha trovato e perduto. Quando vengono rilevati bersagli
in tutto il mondo, l'accensione e lo scavo hanno trovato oggetti in event.found. Analogamente, quando i target passano dalla visualizzazione della videocamera, l'evento si attiva di nuovo, passando gli oggetti persi in event.lost. Questo aiuta a tenere conto dei movimenti della mano e degli indicatori:
le videocamere non sono ferme abbastanza, gli indicatori lasciano cadere gli indicatori o cose simili.
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.
}
A questo punto, mostrerai una scheda appropriata basata sulle informazioni trovate dal toolkit.
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.
}
}
L'aggiunta di schede e pulsanti consiste semplicemente nel creare un'istanza e aggiungerli a un oggetto padre. Ad esempio:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Infine, ecco come si presenta il tutto. Osserva le comodità che ho aggiunto all'esperienza utente. Indipendentemente dal fatto che l'indicatore venga trovato o meno, fornisco l'accesso con un solo clic a ciò che ritengo più utile nelle circostanze.
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);
}
}
Formattazione delle schede
Il Web Perception Toolkit fornisce formattazione integrata per schede e pulsanti con il foglio di stile predefinito. Tuttavia, puoi aggiungere facilmente i tuoi. Gli oggetti
Card e ActionButton forniti contengono proprietà style (tra molte altre)
che ti consentono di dare un tocco personale all'aspetto della tua organizzazione. Per includere il foglio di stile predefinito, aggiungi un elemento <link> alla pagina.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Conclusione
Come ho detto all'inizio, non si tratta di una visione esaustiva del Web Perception Toolkit. Speriamo che ti dia un'idea di quanto sia facile aggiungere la ricerca visiva a un sito web. Scopri di più con la guida introduttiva e le demo di esempio. Consulta la documentazione relativa al toolkit per scoprire cosa può fare.