łatwe w użyciu interakcje z rzeczywistego świata;
Czy nie byłoby świetnie, gdyby użytkownicy mogli wyszukiwać w Twojej witrynie za pomocą kamery? Wyobraź sobie to. Twoja witryna to Razor McShaveyface. Klienci informują Cię, że mają problemy ze znalezieniem odpowiednich wkładów do maszynki do golenia, gdy chcą złożyć ponowne zamówienie. Nie znają odpowiednich słów kluczowych do wyszukiwania Twoich produktów. A prawda jest taka, że prawdopodobnie nigdy tego nie zrobią.
Co, jeśli nigdy nie będzie takiej potrzeby? Co, jeśli użytkownik mógłby skierować kamerę telefonu na kod UPC na opakowaniu, a Twoja witryna wyświetliła odpowiednią kartridż i duży czerwony przycisk „Zamów ponownie”?
Zastanów się, jak jeszcze możesz używać kamery w witrynie. Wyobraź sobie stronę, która umożliwia sprawdzanie cen w sklepie. Wyobraź sobie, że chcesz uzyskać informacje o ekspozycji muzealnej lub tablicy upamiętniającej. Wyobraź sobie, że w grze trzeba odnaleźć prawdziwe punkty orientacyjne, na przykład w ramach geocachingu lub polowania na skarby.
Narzędzie Web Perception Toolkit umożliwia realizację tych scenariuszy opartych na kamerze. W niektórych przypadkach możesz nawet tworzyć treści bez pisania kodu.
Jak to działa?
Narzędzie open source Web Perception Toolkit ułatwia dodawanie wyszukiwania wizualnego do witryny. Przesyła strumień z kamery urządzenia przez zestaw detektorów, które mapują obiekty w rzeczywistości (tutaj nazywane „celami”) na treści w Twojej witrynie. To mapowanie jest zdefiniowane w witrynie za pomocą danych strukturalnych (JSON-LD). Dzięki tym danym możesz wyświetlać odpowiednie informacje w spersonalizowanym interfejsie użytkownika.
Pokażę Ci wystarczająco dużo, abyś mógł/mogła zobaczyć, jak to działa. Pełne omówienie znajdziesz w przewodniku, dokumentacji, demo środowiska testowego I/O i przykładowych demonstracjach.
Uporządkowane dane
Narzędzie nie może znaleźć dowolnego celu w polu widzenia kamery. Musisz go zaopatrzyć w połączone dane JSON dotyczące celów, które chcesz rozpoznawać. Te dane zawierają też informacje o tych celach, które będą wyświetlane użytkownikowi.
Dane są wszystkim, czego potrzebujesz, aby stworzyć interfejs podobny do tego na obrazku poniżej. Jeśli nie zrobisz nic innego, narzędzie Web Perception Toolkit może zidentyfikować cele, a następnie wyświetlać i ukrywać karty na podstawie informacji zawartych w danych. Wypróbuj to samodzielnie, korzystając z naszego demo mapowania artefaktów.
Dodaj do witryny dane za pomocą połączonego pliku danych JSON, dołączając go za pomocą tagu <script>
i typu MIME "application/ld+json"
.
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Plik wygląda mniej więcej tak:
[
{
"@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"
}
}
]
Wrażenia użytkownika
Co zrobić, jeśli chcesz czegoś więcej niż domyślne wrażenia użytkownika? Ten zestaw narzędzi zawiera zdarzenia cyklu życia, obiekty kart i przycisków, które umożliwiają tworzenie interakcji z użytkownikiem związanych z tymi zdarzeniami, a także prosty sposób stylizowania kart. Pokażę Ci to na przykładzie kodu opartego na naszym przewodniku Początki.
Najważniejszym zdarzeniem cyklu życia jest zdarzenie PerceivedResults
, które jest wywoływane za każdym razem, gdy zostanie znalezione docelowe urządzenie. Celem może być rzeczywisty obiekt lub znacznik, taki jak kod kreskowy czy kod QR.
Proces reagowania na to zdarzenie jest taki sam jak w przypadku każdego innego zdarzenia, z wyjątkiem już wspomnianego. Jeśli nie wdrożysz zdarzenia, interfejs użytkownika zostanie automatycznie utworzony na podstawie danych strukturalnych. Aby zastąpić to zachowanie, uruchom przetwarzacz zdarzeń, wywołując funkcję 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);
Przyjrzyjmy się bliżej temu zdarzeniu. Samo zdarzenie zawiera tablice znaczników i celów, które zostały znalezione lub utracone. Gdy w świecie zostaną znalezione cele, funkcja zostanie wywołana i przekaże znalezione obiekty do event.found
. Podobnie, gdy obiekty znikają z pola widzenia kamery, zdarzenie jest ponownie wywoływane, a obiekty, które zniknęły, są przekazywane w zdarzeniu event.lost
. Pomaga to uwzględnić ruchy dłoni i markerów:
kamery nie trzymane wystarczająco stabilnie, upuszczone markery itp.
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.
}
Następnie wyświetlasz odpowiednią kartę na podstawie tego, co znalazł ten zestaw narzędzi.
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.
}
}
Dodawanie kart i przycisków polega na tworzeniu ich instancji i dołączaniu do obiektu nadrzędnego. Na przykład:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Na koniec pokażę, jak to wszystko wygląda. Zwróć uwagę na udogodnienia, które wprowadziłem w tym zakresie. Niezależnie od tego, czy marker został znaleziony, zapewniam dostęp do tego, co moim zdaniem jest najbardziej przydatne w tych okolicznościach.
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);
}
}
Formatowanie kart
Pakiet narzędzi Web Perception Toolkit zawiera wbudowane formatowanie kart i przycisków za pomocą domyślnej arkusza stylów. Możesz jednak łatwo dodać własne. Podane obiekty Card
i ActionButton
zawierają właściwości style
(oraz wiele innych), które umożliwiają nadanie wyglądu i wrażeń wizualnych charakteru Twojej organizacji. Aby uwzględnić domyślny szablon stylów, dodaj do strony element <link>
.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Podsumowanie
Jak już wspomniałam na początku, nie jest to wyczerpujące omówienie narzędzia Web Perception Toolkit. Mamy nadzieję, że pomoże Ci to zrozumieć, jak łatwo można dodać do witryny wyszukiwanie wizualne. Więcej informacji znajdziesz w przewodniku dla początkujących oraz przykładowych demonstracjach. Zapoznaj się z dokumentacją dotyczącą tego narzędzia, aby dowiedzieć się, do czego służy.