LBS Quickstart: Images in Front of You

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

What should you have done by now?

Image 1
Click on Image 1
Image 2
  1. You should have followed the "Hello World POI" - Tutorial
  2. You should have followed the "Location-Based 3D Objects" - Tutorial

What will you learn?

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

  • Creating Image Planes in the Live View
  • Adjusting the orientation of the Images, so they are always facing the user
  • Adding customizations on click for opening URL, starting sounds or full screen movies

Download

Get started 

  1. In the "Location Based Image, Video and Sound Links" - Tutorial you created your first Image Link POIs. Sometimes however, it is simply nice to have your images rendered directly in the Live View. Images are being rendered on planes in junaio. The problem comes up, of this model is not always facing the user. So we want to make sure the user can always see the image.
    First you can define an array with information about the position of the POI as well as the customization links to websites with more information about the image, as well as our test sound and movie.
$aImageInformation = array(
	"1" => array(2000,0, array("url" => "http://en.wikipedia.org/wiki/Uros")), 
	"2" => array(0,2000, array("sound" => "http://www.junaio.com/publisherDownload/tutorial/test.mp3")), 
	"3" => array(-2000,0, array("url" => "http://en.wikipedia.org/wiki/Guinea_pig#As_food")),
	"4" => array(0,-2000, array("video" => "http://www.junaio.com/publisherDownload/tutorial/movie.mp4"))
);

  1. Define the model (mainresource), texture (resource), scale, translation, orientation for each element of the array. Also, create a 360 POI (the create360POI helper method actually just replaces the <l> parameter with a <translation> parameter to have the POI always rendered at a certain distance from the user).

foreach($aImageInformation as $i => $singleImageInformation)
{
	//calculate a default angle (90 degrees is needed quite frequently)
	$angle90 = pi() / 2; // about 1.57

	//define POI information
	$model = WWW_ROOT . "/resources/plane$i.md2_enc"; //nodel
	$texture = WWW_ROOT . "/resources/$i.jpg"; //resource
	$orientation = "$angle90,0," . (atan2($singleImageInformation[0],$singleImageInformation[1]) + $angle90); //orientation
	$translation = $singleImageInformation[0] . "," . $singleImageInformation[1] . ",0"; //translation.

	//create a POI with position relative to the current user position. 
	$poi = new SinglePOI();
	$poi = $jPoiBuilder->create360POI("image$i", $translation, $model, $texture, 100, "", "", $i, $orientation, array(), "click");
	
	//add customizations
	if(isset($singleImageInformation[2]))
	{
		$aKey = array_keys($singleImageInformation[2]);
		$key = $aKey[0];
		
		$cust = new Customization();
		$cust->setName("MyCustomization$i");
		$cust->setType($key);
		$cust->setNodeID("click");
		$cust->setValue($singleImageInformation[2][$key]);
		
		$poi->addCustomization($cust);
	}	
	$jPoiBuilder->outputPOI($poi);
}

  1. To sum it up, after those adjustments, your search.php should like this:

require_once '../library/poibuilder.class.php';
 
//get the position of the user (see pois/search in the documentation)
if(!empty($_GET['l']))
	$position = explode(",", $_GET['l']);
else
	trigger_error("user position (l) missing. For testing, please provide a 'l' GET parameter with your request. e.g. pois/search/?l=23.34534,11.56734,0");

$jPoiBuilder = new JunaioBuilder($position, MAX_DISTANCE);

$aImageInformation = array(
	"1" => array(2000,0, array("url" => "http://en.wikipedia.org/wiki/Uros")), 
	"2" => array(0,2000, array("sound" => "http://www.junaio.com/publisherDownload/tutorial/test.mp3")), 
	"3" => array(-2000,0, array("url" => "http://en.wikipedia.org/wiki/Guinea_pig#As_food")),
	"4" => array(0,-2000, array("video" => "http://www.junaio.com/publisherDownload/tutorial/movie.mp4"))
);

$jPoiBuilder->start();

foreach($aImageInformation as $i => $singleImageInformation)
{
	//calculate a default angle (used often)
	$angle90 = pi() / 2; // about 1.57
	$model = WWW_ROOT . "/resources/plane$i.md2_enc"; //nodel
	$texture = WWW_ROOT . "/resources/$i.jpg"; //resource
	$orientation = "$angle90,0," . (atan2($singleImageInformation[0],$singleImageInformation[1]) + $angle90); //orientation
	$translation = $singleImageInformation[0] . "," . $singleImageInformation[1] . ",0"; //translation.

	//create a POI with position relative to the current user position. 
	$poi = new SinglePOI();
	$poi = $jPoiBuilder->create360POI("image$i", $translation, $model, $texture, 100, "", "", $i, $orientation, array(), "click");
	
	//add customizations
	if(isset($singleImageInformation[2]))
	{
		$aKey = array_keys($singleImageInformation[2]);
		$key = $aKey[0];
		
		$cust = new Customization();
		$cust->setName("MyCustomization$i");
		$cust->setType($key);
		$cust->setNodeID("click");
		$cust->setValue($singleImageInformation[2][$key]);
		
		$poi->addCustomization($cust);
	}	
	$jPoiBuilder->outputPOI($poi);
}
//end xml and output buffering 
$jPoiBuilder->end();
© metaio Inc. 2013