Augmented-Reality Tutorial: How to integrate Wikitude with WordPress24. Oktober 201013 Kommentare

The community-based event site Webtermine.at connects to the augmented-reality platforms Layar, Junaio and Wikitude in order to display the submitted events in an innovative way on smartphones.

Here are some screenshots from the free Wikitude iPhone app displaying events nearby a users location:

This tutorial will show you how you can use your self-hosted WordPress installation together with the plugin WP-Geo in order to dynamically display your geo-tagged posts or pages on the Wikitude World Browser.

Requirements

a self-hosted WordPress installation (I only tested with WordPress 2.9.x and 3.0.1) PHP5 (might work on PHP4 too, but I didn´t test it) a Facebook-, Twitter-, Google- or Yahoo-Account to submit your webservice to wikitude.me

a compatible smartphone for displaying and testing

Getting started

1. install and activate the plugin WP-Geo (I only tested the webservice with version 3.1 and 3.2)2. add location info to posts or pages 3. copy the source code for the webservice into a new file called wikitude.php4. customize your configuration (fill in at least all REQUIRED fields)5. upload wikitude.php to your webserver (you can choose any directory you want if you only can connect to the WordPress database from

there. My recommendation: http://yourdomain/wp-content/uploads/wikitude/wikitude.php)6. create a logo (96×96 pixel, png), an icon (32×32 pixel, png) and a thumbnail (64×64 pixel, png) and upload them to

http://yourdomain/wp-content/uploads/wikitude for example.7. sign in with your Facebook-, Twitter-, Google- or Yahoo-Account at wikitude.me8. click on the button “Wikitude Webservice“9. enter your webservice URL (http://yourdomain/wp-content/uploads/wikitude/wikitude.php for example) and email-address and press

Save.

10. that´s it – if there are no errors, your POIs should be displayed in the Wikitude World Browser within a few minutes

Remarks

The official Wikitude webservice documentation can be found here: http://wikitude.me/assets/WikitudeWebservice.pdf The ARML (augmented reality markup language) Specification for Wikitude 4 can be found here:

http://www.openarml.org/wikitude4.html The webservice only delivers POIs (Points of Interest) to Wikitude within the radius of the users position which is set in the configuration

section ($radiusSet). This variable was introduced for sites with huge amounts of POIs spread throughout the country in order to keep database load low. A good tool to help you determining the ideal radius for your site can be found at FreeMapTools.com

POI-thumbnails ($wtthumbnailURL), email ($wtemail), phone number ($wtphone) and attachments ($wtattachment) are set globally for each POI. If you want to have different values for each POI, you have to adapt the SQL-statement.

$latStandard and $lonStandard are set to help you with testing – change this to a location near your POIs and you just have to call your webservice URL in the browser without any parameters to check the results.

the webservice supports the search function from Wikitude. This means that if a user searches within the Wikitude app, the webservice checks if the search term is found within the title or content of your posts or pages. You can check the results by appending ?searchterm=XYZ to your webservice URL. If search delivers the correct results on your site but don´t show up within the Wikitude app, please contact Wikitude support (info@mobilizy.com). When I submitted Webtermine.at initially, the search function was disabled by default because most content provider didn´t support this feature and it had to be enabled manually by Wikitude for each webservice.

Source Code<?php/*Name: Wikitude-Webservice for WordPressDescription: Provides a webservice for the augmented-reality-browser Wikitude (http://www.wikitude.org)Requirements: self hosted WordPress and plugin WP-Geo (http://www.wpgeo.com/)Webservice documentation URI: http://www.ihrwebprofi.at/wikitude-wordpressAuthor: Robert HarmAuthor URI: http://www.harm.co.atVersion: 1.0Last Update: 23.10.2010License: Creative Commons Attribution 3.0 Austria Licence (http://creativecommons.org/licenses/by/3.0/at/deed.en_GB)*/

/***********************************//*Configuration *//***********************************///database connection - can be found in WordPress config file /wp-config.php too$DB_HOST = "localhost"; // REQUIRED - database host, in most cases localhost$DB_NAME = ""; // REQUIRED - name of your wordpress database$DB_USER = ""; // REQUIRED - mysql-username for accessing the database$DB_PASSWORD = ""; // REQUIRED - password for accessing the database$DB_PREFIX = "wp_"; // REQUIRED - wordpress-table-prefix - wp_ is standard

//Wikitude parameters - referencing documents://ARML Specification for Wikitude 4 (http://www.openarml.org/wikitude4.html)

//Wikitude Webservice Documentation (http://wikitude.me/assets/WikitudeWebservice.pdf)

$arprovider = "robertharm-places-vienna"; //REQUIRED - no spaces/special characters , identifies the content provider or content channel. Must be unique across all providers$arname = "My favorite places in Vienna"; //REQUIRED - name of the content provider. This name will be used to display the content provider in the settings and bookmarks menu of the browser

$ardescription = "My favorite places in Vienna you should visit"; //optional - description of a content provider that provides additional information about the content displayed$wtproviderurl = "http://[LINK TO YOUR SITE]"; //optional - link to the content provider$wttags = "Vienna,photos,sightseeing"; //optional - comma separated list of keywords that characterize the content provider$wtlogo = "http://[LINK TO YOUR LOGO].png"; //optional - logo displayed on the left bottom corner on Wikitude when an icon is selected - 96x96 pixel, transparent PNG$wticon = "http://[LINK TO YOUR ICON].png"; //optional - the icons are displayed in the cam view of Wikitude to indicate a point of interest (POI) - 32x32 pixel, transparent PNG$wtthumbnail = "http://[LINK TO YOUR THUMBNAIL].png"; // optional - leave empty if not used; Specific POI image that is displayed in the bubble. This could be for instance a hotel picture for a hotel booking content provider - 64x64 pixel, PNG

$wtemail = ""; //optional - displayed on each POI; used for sending an email directly from Wikitude$wtphone = ""; //optional - example: +4312345 - when a phone number is given, Wikitude displays a "call me" button in the bubble; same phone number for each POI!$wtattachment = ""; //optional - displayed on each POI; can be a link to a resource (image, PDF file...). You could use this to issue coupons or vouchers for potential clients that found you via Wikitude.

$radiusSet = "50000"; //REQUIRED - retrieve POIs (Points of Interests) from database within this search radius in meters from the current location of the Wikitude user$maxNumerofPoisSet = "50"; //REQUIRED - used if Wikitude doesnt pass the variable maxNumberofPois - 50 is the maximum recommended

$latStandard = "48.209206"; //optional - for testing/debug: standard-latitude for calling webservice without parameters$lonStandard = "16.372778"; //optional - for testing/debug: standard-longitude for calling webservice without parameters

/*********************************//*No need to edit below this line*//*********************************/

// variables for tables with custom prefix for SQL-Queries$tabpostmeta = $DB_PREFIX . 'postmeta';$tabposts = $DB_PREFIX . 'posts';

/* soak in the passed variable or use our own */ $maxNumberOfPois = isset($_GET['maxNumberOfPois']) ? intval($_GET['maxNumberOfPois']) : $maxNumerofPoisSet; $latUser = isset($_GET['latitude']) ? floatval($_GET['latitude']) : $latStandard; $lonUser = isset($_GET['longitude']) ? floatval($_GET['longitude']) : $lonStandard;

$radius = $radiusSet; $distanceLLA = 0.01 * $radius / 1112; $boundingBoxLatitude1 = $latUser - $distanceLLA; $boundingBoxLatitude2 = $latUser + $distanceLLA; $boundingBoxLongitude1 = $lonUser - $distanceLLA; $boundingBoxLongitude2 = $lonUser + $distanceLLA;

/* connect to the db */ $link = mysql_connect($DB_HOST,$DB_USER,$DB_PASSWORD) or die('Cannot connect to the Database'); mysql_select_db($DB_NAME,$link) or die('Cannot select the Database');

isset($_GET['searchterm']) ? $searchterm = mysql_real_escape_string($_GET['searchterm']) : $searchterm = NULL;

/* grab the POIs from the db */ if ($searchterm != NULL) { $query = "SELECT p.ID AS id, p.post_title AS name, p.post_content AS description, concat(pm1.meta_value,',',pm2.meta_value) AS adress, p.guid AS url, concat(pm1.meta_value,',',pm2.meta_value) AS coordinates FROM $tabposts p INNER JOIN $tabpostmeta pm1 ON p.ID = pm1.post_id AND pm1.meta_key = '_wp_geo_longitude' INNER JOIN $tabpostmeta pm2 ON p.ID = pm2.post_id AND pm2.meta_key = '_wp_geo_latitude' WHERE pm2.meta_value BETWEEN '$boundingBoxLatitude1' AND '$boundingBoxLatitude2' AND pm1.meta_value BETWEEN '$boundingBoxLongitude1'

AND '$boundingBoxLongitude2' AND p.post_status= 'publish' AND (p.post_title like '%$searchterm%' OR p.post_content like '%$searchterm%') limit $maxNumberOfPois"; } else { $query = "SELECT p.ID AS id, p.post_title AS name, p.post_content AS description, concat(pm1.meta_value,',',pm2.meta_value) AS adress, p.guid AS url, concat(pm1.meta_value,',',pm2.meta_value) AS coordinates FROM $tabposts p INNER JOIN $tabpostmeta pm1 ON p.ID = pm1.post_id AND pm1.meta_key = '_wp_geo_longitude' INNER JOIN $tabpostmeta pm2 ON p.ID = pm2.post_id AND pm2.meta_key = '_wp_geo_latitude' WHERE pm2.meta_value BETWEEN '$boundingBoxLatitude1' AND '$boundingBoxLatitude2' AND pm1.meta_value BETWEEN '$boundingBoxLongitude1' AND '$boundingBoxLongitude2' AND p.post_status= 'publish' limit $maxNumberOfPois"; } $result = mysql_query($query,$link) or die('Errant query: '.$query);

/* start output */ header('Content-type: text/xml; charset=utf-8'); echo '<?xml version="1.0" encoding="UTF-8"?>'; echo '<a name="2.0"><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:ar="http://www.openarml.org/arml/1.0" xmlns:wikitude="http://www.openarml.org/wikitude/1.0" xmlns:wikitudeInternal="http://www.openarml.org/wikitudeInternal/1.0">'; echo '<Document>'; echo '<ar:provider id="'.$arprovider.'">'; echo '<ar:name><![CDATA['.$arname.']]></ar:name>'; echo '<ar:description><![CDATA['.$ardescription.']]></ar:description>'; echo '<wikitude:providerUrl><![CDATA['.$wtproviderurl.']]></wikitude:providerUrl>'; echo '<wikitude:tags><![CDATA['.$wttags.']]></wikitude:tags>'; echo '<wikitude:logo><![CDATA['.$wtlogo.']]></wikitude:logo>';

echo '<wikitude:icon><![CDATA['.$wticon.']]></wikitude:icon>'; echo '</ar:provider>'; while($value = mysql_fetch_assoc($result)) { if(is_array($value)) { echo '<Placemark id=\''.$value['id'].'\'>'; echo '<ar:provider><![CDATA['.utf8_encode($arprovider).']]></ar:provider>'; echo '<name><![CDATA['.utf8_encode($value['name']).']]></name>'; echo '<description><![CDATA['.utf8_encode(strip_tags($value['description'])).']]></description>'; echo '<wikitude:info>'; echo '<wikitude:thumbnail><![CDATA['.utf8_encode($wtthumbnail).']]></wikitude:thumbnail>'; echo '<wikitude:phone><![CDATA['.utf8_encode($wtphone).']]></wikitude:phone>'; echo '<wikitude:url><![CDATA['.utf8_encode($value['url']).']]></wikitude:url>'; echo '<wikitude:email><![CDATA['.utf8_encode($wtemail).']]></wikitude:email>'; echo '<wikitude:address><![CDATA['.utf8_encode($value['adress']).']]></wikitude:address>'; echo '<wikitude:attachment><![CDATA['.utf8_encode($wtattachment).']]></wikitude:attachment>'; echo '</wikitude:info>'; echo '<Point>'; echo '<coordinates><![CDATA['.$value['coordinates'].']]></coordinates>'; echo '</Point>'; echo '</Placemark>'; } } echo '</Document>'; echo '</kml>'; echo '</a>';

/* disconnect from the db */ @mysql_close($link);?>