GLUE Quickstart: junaio GLUE and Events

What should you have done by now?

metaio man invasion
  • You should have followed the "Hello GLUE" - Tutorial
  • You should have followed the "Interaction in the 3D World" - Tutorial
  • You should have followed the "Stick it on the screen" - Tutorial

What will you learn?

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

  • Change your channels content based on server events

Downloads

Reference Images used

Get started

  1. In this Tutorial, I will introduce events within junaio to send additional events to your server, upon your server can react with changing the information in your channel. You are able to update POI information, remove POIs or add new ones based on the POI ID. Also the tracking information can be updated.

    When the user hold the phone over the pattern, a request will be send to your server and a new metaio man will be added. This can also be done by clicking the "+" - button. When the user clicks one of the metaio men, it will be removed.

    First, you need to adjust the index.php in your html folder to include the event.php to react to a pois/event request, so please make sure, there is an event.php in your src folder and your index.php looks like this:

if(in_array_substr('visualsearch', $aUrl))
{
	//we could get an image from the user here and create a tracking xml based on that. Or do more server side image recognition with that, but not needed here ;)
	exit;
}
else if(in_array_substr('search', $aUrl))
{
	//the search return needs to be provided
	include '../src/search.php';
	exit;
}
else if(in_array_substr('event', $aUrl))
{
	//if I want to react to a user clicking a POI, I would return changes here
	include '../src/event.php';
	exit;
}
  1. In the search.php start with the reference of the trackingXML and returning one GLUE man.
require_once '../library/poibuilder.class.php';
 
//use the poiBuilder class
$jPoiBuilder = new JunaioBuilder();

//create the xml start
$jPoiBuilder->start("http://www.junaio.com/publisherDownload/tutorial/tracking_tutorial.xml_enc");

//metaio man
$poi = new SinglePOI();
$poi = $jPoiBuilder->createBasicGluePOI(
	"metaio Man", //name
 	"0,0,0",  //translation
	"http://www.junaio.com/publisherDownload/tutorial/metaioman.md2_enc", //mainresource (model)
	"http://www.junaio.com/publisherDownload/tutorial/metaioman.png", //resource (texture)
	.5,//scale
	1, //cos ID -> which reference the POI is assigned to 
	"", //description
	"http://www.junaio.com/publisherDownload/tutorial/thumb.jpg", //thumbnail
	"metaioman1", //id
	"1.57,0,1.57", //orientation
	array("click" => array("idle", 0)), //animation array
	"click" //interactionfeedback	 
);

$jPoiBuilder->outputPOI($poi);
  1. Second return an Event trigger. This will send a request to the server once the pattern was detected. The event is only sent when the pattern is detected first and then with a 2 second delay between detections.
//the event to trigger the call to the server
$poi = new SinglePOI();
$poi = $jPoiBuilder->createEventTrigger("new", 1);
$jPoiBuilder->outputPOI($poi);

  1. Last, the plus button will be sent back.

//the plus button
$poi = $jPoiBuilder->createGUIPOI(
	"more button",
	"0.05,0.1", 
	WWW_ROOT . "/resources/plus.md2_enc", 
	WWW_ROOT . "/resources/plus.png", 
	".025", 
	"", 
	"", 
	"more", 
	"0,1.57,1.57", 
	array(), 
	"click"
);

$jPoiBuilder->outputPOI($poi);
$jPoiBuilder->end();

exit;

  1. This is all we need in the search.php. Now the event.php will be adjusted. Keep in mind that all requests to the event.php hold the parameter (user's position, phone orientation, user ID, type of event and ID of the POI clicked) in the POST Variable.

    We will use the poibuilder class again and basically react to the following options:

    a) If the interaction type is "imagefound", a metaio man shall be added
    b) If the interaction type is "click", differentiate between the plus button (POI ID "more" as defined in the search.php) and all others. The plus button also adds a metaio man, all other pois being clicked will be removed based on their ID.

require_once '../library/poibuilder.class.php';
//use the poiBuilder class
$jPoiBuilder = new JunaioBuilder();

$jPoiBuilder->start();

//add a metaio man
if($_POST['type'] == "imagefound")
	addMetaioMan();
//remove the metaio man clicked
else if($_POST['type'] == "click")
{
	if($_POST['id'] == "more")
		addMetaioMan();	
	else
		$jPoiBuilder->removePOIByID($_POST['id']);
}
//create the xml start
$jPoiBuilder->end();
exit;

  1. The method addMetaioMan is very similar to our search.php return, note the differences:

    - The position is calculated randomly on the fly

    $randomPosition = array(rand(-150, 150), rand(-150, 150), rand(0, 150));

    - The POI id is a unique ID. If chosen the same ID, the metaio man would simply be overridden and no new POI will be added

    $id = uniqid();

    The complete method looks like this:

function addMetaioMan()
{
	$jPoiBuilder = new JunaioBuilder();
	$randomPosition = array(rand(-150, 150), rand(-150, 150), rand(0, 150));
	$id = uniqid();
	
	$poi = new SinglePOI();
	$poi = $jPoiBuilder->createBasicGluePOI(
		"metaio Man", //name
	 	implode(",", $randomPosition),  //translation
		"http://www.junaio.com/publisherDownload/tutorial/metaioman.md2_enc", //mainresource (model)
		"http://www.junaio.com/publisherDownload/tutorial/metaioman.png", //resource (texture)
		.5,//scale
		1, //cos ID -> which reference the POI is assigned to 
		"", //description
		"http://www.junaio.com/publisherDownload/tutorial/thumb.jpg", //thumbnail
		$id, //id
		"1.57,0,1.57", //orientation
		array("click" => array("idle", 0)), //animation array
		"click" //interactionfeedback	 
	);	
	
	$jPoiBuilder->outputPOI($poi);
}

  1. Once again, it is only left to upload the information to your server, adjust the config.php with your API key and create a new channel with the callback URL pointing to the html folder of this package on your server.

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