Wikitude iOS JavaScript SDK'sı ile Image Recognition

Wikitude, çeşitli AR çözümleri sunan kullanışlı bir AR kit. Hem native hem de hybrid bir çok platformu desteklemekte.

Bu Mobi'de Wikitude iOS JavaScript sdk'sı ile basit bir demo oluşturacağız. Aslında Wikitude'un yayınladığı SDKSamples projesini indirip fonksiyonlarını değiştirerek akışı anlamış olacağız.

Wikitude'un yayınladığı örnek projeye buradan erişebilirsiniz.

Hedef

1. Kendi image'larımızı uygulamada tanımak

2. AR deneyimi ile image üzerinde buton, video ve görüntü çıkarmak

3. Buton'a tıklandığında native detay sayfası açmak

Öncelikle Wikitude sitesine girip hesap oluşturmanız gerekiyor, ardından bu linkten demoda kullanacağınız lisans kodunu alabilirsiniz. Aldığınız key'i

WTAugmentedRealityViewController sınıfı içindeki

kWT_LICENSE_KEY alanına set etmelisiniz. Biz demo aşamasında proje ile gelen demo lisansı ile ilerleyeceğiz.

Başlarken

Uygulamayı indirdikten sonra Xcode ile açın (Xcode 10.2 ile hatasız build oluyor). Uygulamayı direk iPhone'unuza indirip çalıştırabilirsiniz. Aşağıdaki şekilde bir menü sizi karşılayacak.

Bu menüde sdk'nın her özelliğini farklı sayfalarda deneyimleyebilirsiniz.

Öncelikle projenin yapısından bahsedelim. Kit webview üzerinde çalışıyor. Xcode üzerinde projeyi açtığınız zaman aşağıdaki şekilde ArchitectExamples folder'ını göreceksiniz. Bu folder yukarıda listelenen her sayfanın item'larını ayrı folder'larda barındırmakta. Bu item'lar js, html, css ve assetlerden oluşuyor. Biz bu demoda 01_ImageTracking_4_HtmlDrawable folder'ındaki dosyalar üzerinde geliştirmeler yapacağız.

Önemli bir not : Xcode üzerinde geliştirmelerimizi tamamladığımızda ArchitectExamples folder'ını üzerinde değişiklik yapmadan Android projesine dahil edip kullanabiliyorsunuz. Wikitude android javascript projesinde folder'ın içeriğinin aynı olduğunu görebilirsiniz. Bu, geliştirme sürecinde maliyeti oldukça düşürmekte.

Wikitude Studio: Target Manager

Uygulamada tanımak istediğiniz 2D fotografları bu manager'a ekliyoruz.

https://studio.wikitude.com/projects linkine gidip öncelikle ADD PROJECT ile proje oluşturuyoruz. Adına mobilerDemo dedik.

Ardından projeyi seçiyoruz. Tanımak istediğimiz target image'larımızı ADD IMAGE TARGETS diyerek buraya ekliyoruz. Demomuzda aşağıdaki apple logo image'ını kullanacağız, burada image adı önemli bir parametre olacak, çünkü kod içerisinde bu image adına göre cisme özel aksiyonlar alacağız.

Yükleme sonrası DownloadWTC diyoruz ve 6.0-8x versiyonu ile wtc dosyamızı GENERATE ediyoruz. GENERATE sonrası dosya otomatik olarak mail adresinize düşecektir, bunun yerine tekrar DownloadWTC derseniz download linkinin geldiğini göreceksiniz, maile gitmeden buradan indirebilirsiniz.

İndirdiğimiz tracer wtc dosyasını 01_ImageTracking_4_HtmlDrawable/assets altına ekleyin.

Ardından htmldrawable.js içinde aşağıdaki şekilde resource'a wtc dosyaınızı verin.

Önemli Not : Uygulama prod ortamındayken sürekli yeni mobil versiyona ihtiyaç mı duyacak ? sorusu aklınıza gelmiş olabilir. Hayır bu noktada tracer dosyasını web'de bir lokasyona yükleyip uygulama açılışında bu lokasyondan yeni tracer dosyasını download edip sdk'ya verebilirsiniz.

Böyle bir özellik mevcut, tabi bunu yaparken tracer içindeki image name'leri de bir servis ile mobil uygulamaya taşımanız ve generic bir yapı kurmanız gerekecek.

Görüntü Eklemek

assets altına görüntülemek istediğimiz png dosyasını ekliyoruz (ornek.png). Ardından

htmldrawable.js içerisinde bu dosyayı ImageResource ve ImageDrawable olarak oluşturuyoruz.

Oluşturduğumuz ImageDrawable overlayOne objesi ile ImageTrackable objemizi oluşturuyoruz.

Artık tespit edilen appleLogo isimli görüntümüz için almak istediğimiz diğer aksiyonları da bu ImageTrackable objesinin cam dizisine vermemiz gerekiyor. Aşağıdaki kod sadece ornek.png görüntümüzün yakalanan image'in üzerinde çıkmasını sağlayacak.

Video Eklemek

Görüntülemek istediğimiz video'yu assets folder'ı altına ekliyoruz. (appleVideo.mp4)

Video'yu oynatmak için play butonunu assets altına ekliyoruz. (playButton.png)

Butonu aşağıdaki şekilde ImageDrawable olarak oluşturuyoruz.

Video'muzu da VideoDrawable objesinden oluşturuyoruz. videoClicked metodunu override ederek durdurma ve başlatma aksiyonlarını da kodlamamız gerekiyor.

video ve playButton objelerimiz de hazır, artık appleLogo ImageTrackable objesinin cam dizisine bu objeleri de ekleyebiliriz.

Buton Eklemek

Şimdi tıklandığında native bir sayfayı açacak olan butonu ekleyelim. Mevcut demo içerisinde gelen wwwButton.jpg'yi kullanabiliriz.

this.imgButton = new AR.ImageResource("assets/wwwButton.jpg");

Ardından aşağıdaki şekilde butonumuzu oluşturalım. Yukarıda tanımladığımız image'ı buton görseli olarak aşağıdaki şekilde ImageDrawable'a veriyoruz.

Gördüğünüz gibi onClick metodunda, yeni yazdığımız onDetailClicked metodunu çağırıyoruz.

Bu metod içerisinde Wikitude sdk'nın sunduğu sendJSONObject metodunu bir json ile call ediyoruz. Bu request sonrası WTAugmentedRealityViewController native sınıfı içerisindeki WTArchitectView'ımızın receivedJSONObject metodu çağrılmış olur. Bu noktadan sonra bu metod içerisinde istediğiniz native detay sayfasını açabilirsiniz. Bu örnekte json içerisinde gönderdiğimiz action parametresi ile açmak istediğimiz controller'ı ayağa kaldırıp ekranda gösteriyoruz.

Son olarak oluşturduğumuz pageOneButton'u target'ımızın cam dizisine ekliyoruz.

cam: [overlayOne, video, playButton, pageOneButton]

Sonuç

Artık demomuzu deneyebiliriz. Uygulamayı Xcode üzerinden cihazınıza yükleyin. ilk menüden Html Drawable'ı seçin. Kamerayı yukarıdaki siyah zeminli apple logosuna tutun. Aşağıdaki şekilde target üstünde eklediğimiz image'ı, ortada native detay butonunu ve en altta video butonunu göreceksiniz.

Detay butonuna basıp aşağıdaki detay ekranının açıldığını test edebilirsiniz (solda). Ya da video butonu ile video'yu aşağıdaki şekilde oynatabilirsiniz (sağda). Bu Mobi'de örnek Wikitude samples projesi üzerinden ilerledik ve native tarafa pek girmedik, native tarafı incelemek isterseniz WTAugmentedRealityViewController sınıfındaki metodları inceleyebilirsiniz.

Hazırladığımız demo'nun dosyalarına aşağıdaki github linkinden ulaşabilirsiniz. Hazırladığımız demo'yu 100 mb üstü dosyalar içerdiğinden github'a push'layamıyoruz. Bu nedenle

wikitude örnek projesini buradan indirip, aşağıdaki repoda bulunan dosyaları projedeki dosyalarla değiştirmeniz yeterli olacaktır.

github : https://github.com/dogukantizer/wikitude-ios-javascript-image-recognition

#wikitude #ios #javascript #objectivec #augmentedreality #ar #imagerecognition