LBS Quickstart: Customizing your POIs - Images, Sounds, Videos and more

Scan this marker with junaio to see what you are getting in this tutorial.

What should you have done by now?

: Georeference POI with Image Link

: Click on POI opens default popup

: Georeference POI with Custom popup

: Example custom popup

You should have followed the "Hello World" – Tutorial
Download the Getting Started with AREL XML Helper if you have not done so yet

What will you learn?

Scan the QR Code on the left with junaio to see what you are getting.

Working with the AREL XML Helper for PHP
Creating multiple geo located POIs
Link movies, image and sounds to your POI
Create a custom popup (HTML overlay) using the AREL JS

Download

AREL XML Helper for PHP
AREL JS Debugging
Download the quickstarts or check out from github: LBS_2_CustomizingPOIs

Get Started

The Getting Started Package with AREL XML Helper you have just downloaded will help you provide correct information to junaio. This package will be uploaded to your server and the callback URL of your channel will have to point to the index.php in the package folder.
So again let’s see what happens if a user opens your channel (this means you receive a pois/search request to your server), it will be a little different than the previous example.

When you have a look at the index.php you will first see that it is determined, whether this is a pois/search call to your server. If this is a valid request, a pois/search request, we define the WWW_ROOT and include the search.php where the POI will be defined.
The WWW_ROOT will be used frequestly later, when we reference resources, such as images.

//if issues occur with htaccess, also the path variable can be used
//htaccess rewrite enabled:
//Callback URL: http://www.callbackURL.com
//
//htacces disabled:
//Callback URL: http://www.callbackURL.com/?path=

if(isset($_GET['path']))
	$path = $_GET['path'];
else
	$path = $_SERVER['REQUEST_URI'];
	
$aUrl = explode('/', $path);

//if the request if correct, return the information
if(in_array_substr('search', $aUrl))
{
	define('WWW_ROOT', "http://".$_SERVER['HTTP_HOST'].dirname($_SERVER['SCRIPT_NAME'])); //path to online location
	
	//the search return needs to be provided
	include '../src/search.php';
	exit;
}

We will have a look at the search.php next, where the information to be returned to junaio is gathered. Currently, the search.php looks like this:

require_once '../library/arel_xmlhelper.class.php';
 
/**
 * When the channel is being viewed, a poi request will be sent
 * $_GET['l']...(optional) Position of the user when requesting poi search information
 * $_GET['o']...(optional) Orientation of the user when requesting poi search information
 * $_GET['p']...(optional) perimeter of the data requested in meters.
 * $_GET['uid']... Unique user identifier
 **/
 
//use the Arel Helper to start the output with arel

//start output
//ArelXMLHelper::start(NULL, AREL_HTML_LINK, TRACKING);

//Output your objects here!

//end the output
//ArelXMLHelper::end();

You can see that there is not much but comments. But this provides the basic structure of your Channel using the AREL XML Helper - start it, end it and return objects inbetween ;)
First, we need to include the helper class (require_once in line 1) of course.

And then we start the output:

//create the xml start
ArelXMLHelper::start(NULL, AREL_HTML_LINK, TRACKING);

: Structure of a junaio Channel

This will generate the XML declaration and will tell junaio that the content will start. Note that there are two fields to be filled in by you:

AREL_HTML_LINK: This is the link to the HTML file that shall be overlaid on your channel to define additional GUI elements for example. In this file, also the AREL JavaScript will be linked. Please have a look at "What are Channels" for more information on the channel structure. We will set the default arel/index.php here that is provided in the getting started package. So it will look like this.

TRACKING: Here you can provide the tracking configuration. You can either set a variable for the tracking type or for GLUE channels, the tracking xml file. In this case, since GPS is default, you do not have to set anything and can leave it blank.

So for this tutorial, it needs to look like that:

//create the xml start
ArelXMLHelper::start(NULL, WWW_ROOT . "/arel/index.php");

We will output 4 POIs (points of interest), one holding the path to an image, one with a video, one holding a MP3 and last one with a custom popup.
You can see that the POIs have very similar structure. They only differ in the information we link to them. Of course you could also have a POI with multiple buttons - up to 5 are supported.Make sure that each POI has a unique ID, otherwise it will be overwritten.
Also note, the $oObject variable is overwritten everytime a new POI is defined. Since the POI is send off to junaio when the ArelXMLHelper::outputObject($oObject); - Command is called, after this line we do not need the previous $oObject anymore.

Notice that the custom popup POI is special. It does not have a predefined description and button, so it will not generate the default popup. Instead, we add the information in parameters, so we can use them later with AREL JS.
So the custom popup will be a predefined HTML container, where we just add the information of this POI, once it was clicked.

//1. Sound POI
$oObject = ArelXMLHelper::createLocationBasedPOI(
      "1", //id
      "Hello Sound POI", //title
      array(48.12310, 11.218648, 0), //location
      WWW_ROOT . "/resources/thumb_sound.png", //thumb
      WWW_ROOT . "/resources/icon_sound.png", //icon
      "This is our Sound POI", //description
      array(array("Start Audio", "soundButton", "http://www.junaio.com/publisherDownload/tutorial/test.mp3")) //buttons
   );

//output the object
ArelXMLHelper::outputObject($oObject);

//2. Image POI
$oObject = ArelXMLHelper::createLocationBasedPOI(
      "2", //id
      "Hello Image POI", //title
      array(48.12325, 11.218691, 0), //location
      WWW_ROOT . "/resources/thumb_image.png", //thumb
      WWW_ROOT . "/resources/icon_image.png", //icon
      "This is our Image POI\n\nThe image source is: http://www.flickr.com/photos/ediamjunaio/5206110815/", //description
      array(array("Show Image", "imageButton", "http://farm5.static.flickr.com/4104/5206110815_7ea891be0b.jpg")) //buttons
   );

//output the object
ArelXMLHelper::outputObject($oObject);

//3. Video POI
$oObject = ArelXMLHelper::createLocationBasedPOI(
      "3", //id
      "Hello Video POI", //title
      array(48.12307, 11.218636, 0), //location
      WWW_ROOT . "/resources/thumb_video.png", //thumb
      WWW_ROOT . "/resources/icon_video.png", //icon
      "This is our Video POI", //description
      array(array("Start Movie", "movieButton", "http://www.junaio.com/publisherDownload/tutorial/movie.mp4")) //buttons
   );

//output the object
ArelXMLHelper::outputObject($oObject);

//4. Custom POPup POI
$oObject = ArelXMLHelper::createLocationBasedPOI(
      "4", //id
      "Custom PopUp", //title
      array(48.12317,11.218670,0), //location
      WWW_ROOT . "/resources/thumb_custom.png", //thumb
      WWW_ROOT . "/resources/icon_custom.png" //icon      
   );

//add some parameters we will need with AREL
$oObject->addParameter("description", "This is my special POI. It will do just what I want.");
$oObject->addParameter("url", "http://www.junaio.com");
   
//output the object
ArelXMLHelper::outputObject($oObject);

So have a look at the arel/index.php, since this is the HTML page that will be slapped on top and where the custom popup will be predefined.
You can see that on top, the AREL JS library is included as well as jQuery, since it is used quite often. You can have a look at the full documentation of AREL JavaScript.
Underneath you will find the arel.sceneReady call. Of course this can also be in a seperate JS file and linked (as done in code when you download it). Whenever the scene is done loading, this call will be made.

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 
<script type="text/javascript" src="http://dev.junaio.com/arel/js/arel_beta_min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   arel.sceneReady(function()
   {
      //start with arel here      
   });      
      
</script>

Further down there is some default CSS and the beginning of the HTML page. We will adjust the CSS and the body to define our custom popup.
Note that it is set to invisible (display: none), so it is not see from the start.

<!--add this in the header to extend the default CSS-->
<style type="text/css">
   * {
      -webkit-highlight:           none;
      -webkit-touch-callout :      none;
      -webkit-user-select:         none;
   }      

   body {
      margin: 0px;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      background-color:transparent;
   }
   
   #info
   {
      clear: both;
      width: 60%;
      height: 30%;
      color: #333;
      background-color: #fff;
      -webkit-border-radius: 8px;
      font: normal normal bold 14px/normal Helvetica, Arial, sans-serif;
      margin: 150px 20% 0px 20%;   
      padding: 10px 0px 10px 0px;
      text-align: center;
      opacity: 0.6;
      -webkit-box-shadow: 2px 2px 4px #666;
      -webkit-border-radius: 8px;  
      display: none;
   }
   
   .close
   {
      float: right;
      text-align: right;
      width: 20px;
      height: 20px;
      color: red;
      margin-right: 5px;
   }
   
   .text
   {
      float: left;
      text-align: left;
      padding: 10px;
   }
   
   .button
   {
      float: left;
      width: 100%;
      background-color: #333;
      color: #fff;
      -webkit-border-radius: 2px;
   }
   
</style>
   

<!--THE BODY-->
<body>
   <div id="info"><div class="close" ontouchstart="$('#info').hide()">X</div><div class="text"></div><div class="buttons"></div></div>      
</body>

The second to last step is to define the content of our custom popup. For that we need to define an event listener in our arel.sceneReady which will be triggered, whenever something happens with our custom popup POI.

Then we will check for when the custom popup POI is clicked (ONTOUCHSTARTED) and fill in the information from the parameters in the predefined fields of my HTML container. Also, using jQuery, the info container will be displayed - $('#info').show();

arel.sceneReady(function()
{
   //get the custom poi
   var customPoi = arel.Scene.getObject("4");
   
   //set a listener on the custom poi
   arel.Events.setListener(customPoi, function(obj, type, params){handleCustomPoiEvent(obj, type, params);});
});

function handleCustomPoiEvent(obj, type, param)
{
   //check if there is tracking information available
   if(type && type === arel.Events.Object.ONTOUCHSTARTED)
   {
      $('#info .text').html(obj.getParameter("description"));
      $('#info .buttons').html("<div class=\"button\" onclick=\"arel.Media.openWebsite('" + obj.getParameter("url") + "')\">" + obj.getParameter("url") + "</div>");
      $('#info').show();
   }   
};

The last step is to return to our search.php one more time and close the XML ouput by calling at the very end:

ArelXMLHelper::end();

: Screenshot Create New Channel

This completes the tutorial. You just need to upload all files and folders to your server and create a new channel with the Callback URL pointing to the folder your index.php and .htaccess is in on your server.
Note that the channel is defined as a Location Based Channel and uses AREL.
After creating your channel, you are lead back to "My Channels". Press the validate button to get some first information on your channel’s correctness.
If your channel passes all tests without errors (warnings are to be considered as hints for you. So they will most likely not affect the functionality of your channel, but you can double check whether this is intended), you can open your channel on your device and test it there.
For opening it on the device, either login with your developer credentials and search for the channel or simply scan the QR Code (if the visibility is not private).
If something does not work as expected, please have a look at JavaScript Debugging and in our Forum

junaio

LBS Quickstart: Customizing your POIs - Images, Sounds, Videos and more

What should you have done by now?

What will you learn?

Download

Get Started

Discover Mobile AR

junaio for Developers

The junaio Press Room

Powered by metaio