<?
/*

230407 follow ups:
	
	started working on STL. handler in place, not quite working yet, not sure.
	set random hex color painting on stl. need to test.
	
230408 updates:
	
	modified 2d sizing. aspect ratio is not calculated and the a frame entity size values are more accurate to image, not just statuc placeholders causingj images to squish. new function to handle this, calculateAspect()
	link is placed under the scene. we will eventually make the scene slightly less than viewport height, to reveal a scroll for more layout.
	this works

*/
date_default_timezone_set('America/Los_Angeles');

include("../meta/mysql/mysqli_connect_wigglefish2016.php");
	
// PAGE KEYS
$key_table = "activity";
$key_type = "#InstantNodal project";
$nodalLink = null;

function calculateAspect($file,$dimension)
{
	
	// 230408 this is a 2D asset. detect image proportion and customize the width and height.based on https://stackoverflow.com/questions/36642512/get-image-aspect-ratio
		
	// the simpler approach from https://www.omnicalculator.com/other/image-ratio used here
			
	/*
		Our aspect ratio calculator for images uses the following ratio converter formulas:
			
		H1/W1 = H2/W2
			
		W2 = H2 * W1/H1
			
		W2 = 16 * 1080/1920
			
		W2 = 9
			
	*/
	
	list($imageWidth, $imageHeight, $type, $attr) = getimagesize("assets/$file");
	
	$thisEntityHeight = 2 ;
	$thisEntityWidth = $thisEntityHeight * ($imageWidth / $imageHeight);

	if ($dimension == "width")
	{
		return $thisEntityWidth;
	}

	if ($dimension == "height")
	{
		return $thisEntityHeight;
	}
}


function generateHexColor()
{
	// https://css-tricks.com/snippets/php/random-hex-color/
	$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
	$color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];

	return $color;
}

function getVisitorIP()
{
	if (!empty($_SERVER['HTTP_CLIENT_IP']))   //check ip from share internet
	{
	  $ip=$_SERVER['HTTP_CLIENT_IP'];
	}
	elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))   //to check ip is pass from proxy
	{
	  $ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
	}
	else
	{
	  $ip=$_SERVER['REMOTE_ADDR'];
	}
	return $ip;
}

function trackView($thisID)
{
	$mysqli = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
	  
	// assign all states based on session
	$thisTarget 		= "activity_history";
	$thisType 			= "Nodal View";
	$thisCreateAuthor 	= "WebAR App";
		
	// process all record inputs that cannot be null
	$appID 				= "31337";	// no app id means the content is universal
	$thisStatus 		= 1000; // assume status 1000, not open to all
	$thisIP = getVisitorIP();
	
	  
	 // escape certain incoming variables registered above
	  
	// name should be figured out based on the incoming key variable. but we will hard code it for now			  	
	$thisName = "InstantNodals WebAR App Usage - $thisIP";
	
	$insert = mysqli_query($mysqli,"
		INSERT INTO
			$thisTarget
		VALUES
		(
			'$thisID',
			'$appID',
			'$thisStatus',
			'$thisType',
			'$thisName',
			now(),
			'$thisCreateAuthor',
			now(),
			'$thisCreateAuthor'
		)
	");
}

function generateActivityDetail($id,$table,$type,$detail)
{
	$mysqli = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
			
	$query = "
		SELECT
			$detail	
		FROM
			$table
		WHERE
			id = '$id'
		AND type = '$type'

	";
	$rows=mysqli_query($mysqli,$query);
	$result=mysqli_num_rows($rows);
						
	// do the results here
	if ($result)
	{			
		while ($row = mysqli_fetch_array($rows,MYSQLI_NUM))
		{
			$thisDetail = $row[0];
		}
	}
	return $thisDetail;
}

if (isset($_POST['action']))
{
	if ($_POST['action']="addNode")
	{
		// handle incoming data
		$mysqli = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
		  
		// assign all states based on session
		$thisTarget 		= $key_table;
		$thisType 			= $key_type;
		$thisCreateAuthor 	= $_POST['nodeEmail'];
			
		// process all record inputs that cannot be null
		$appID 				= "1958";	// no app id means the content is universal
		$thisStatus 		= 1000; // assume status 1000, not open to all
		//$thisIP = getVisitorIP();
		// escape certain incoming variables registered above
				  
		// name should be figured out based on the incoming key variable. but we will hard code it for now			  	
		$thisName = "#InstantNodal project by $thisCreateAuthor";

		$insert = mysqli_query($mysqli,"
			INSERT INTO
				$thisTarget
			VALUES
			(
				null,
				'$appID',
				'$thisStatus',
				'$thisType',
				'$thisName',
				now(),
				'$thisCreateAuthor',
				now(),
				'$thisCreateAuthor'
			)
		");
						  
		// get the id that was just created
			
		$thisID = $mysqli->insert_id;
			
		//echo "<div style='padding: 1em; background-color: rgba(0,100,200,0.3);'><p>Added $thisName as $thisID.</div>";
			
		// now register the attributes	  
				  
		// we have url, headline, source, and author, all optional. so we check if it exists, and if it does, then write it as an artifact content
		$thisTarget_content = $thisTarget . "_content";
		$thisTarget_attribute = $thisTarget . "_attribute";
		
		// $mysqli = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
		if ($thisID != null)
		{
			$insert = mysqli_query($mysqli,"
				INSERT INTO
					$thisTarget_attribute
				VALUES
				(
					$thisID,
					'$appID',
					'$thisStatus',
					'Creator email',
					'',
					'',
					'$thisCreateAuthor',
					null,
					null,
					null,
					now(),
					'$thisCreateAuthor',
					now(),
					'$thisCreateAuthor'
				)
			");	
			
			if (isset($_FILES['nodeAsset']))
			{
				//echo "mithFILES!";
				$filename = basename($_FILES['nodeAsset']['name']);
				$filename = str_replace(' ', '_', $filename);
				$cleanFilename = str_replace(' ', '', $filename);
				$filenameExtension = pathinfo($cleanFilename, PATHINFO_EXTENSION);
				$newFilename = "1958-". $thisID . "." . $filenameExtension;
				$nodeAsset = $newFilename;
								
				$uploaddir = 'assets/';
				$uploadfile = $uploaddir .  $newFilename;
				
				
				// if the filetype is HEIC, try converting to JPG VIA THIS information https://itnext.io/tackling-iphone-or-ipad-images-support-in-browser-8e3e64e9aaa1
				
				if (move_uploaded_file($_FILES['nodeAsset']['tmp_name'], $uploadfile))
				{
					//echo "File $newFilename is valid, and was successfully uploaded.\n";
						$insert = mysqli_query($mysqli,"
						INSERT INTO
							$thisTarget_attribute
						VALUES
						(
							$thisID,
							'$appID',
							'$thisStatus',
							'WebAR asset file',
							null,
							null,
							'',
							'$newFilename',
							null,
							null,
							now(),
							'$thisCreateAuthor',
							now(),
							'$thisCreateAuthor'
						)
					");	
				}
				else 
				{
					//echo "Meh ...\n";
				}
			} 
		}
	}
	else
	{
		// produce an error message
		// produce dummy page
		// https://fantendo.fandom.com/wiki/Fantendo:Main_Menu?file=Nyan+cat+animated.gif
		//	https://static.wikia.nocookie.net/fantendo/images/9/9f/Nyan_cat_animated.gif/revision/latest?cb=20121125193107&format=original
			
			$aframeAsset = "<img id='nodeAsset' src='assets/nyancat.gif'>";		
			
			$aframeEntity = "
			<a-image
				src='assets/$nodeAsset'
				position='0 0 -10'
				rotation='0 0 30'
				width='3'
				height='3'
				material='opacity: 1.0; transparent: true; alphaTest: 0.5; side: double;'
				animation='property: rotation; from: 0 0 30; to: 0 0 -30; loop: true; easing: linear; dur: 30000; dir: alternate;'
				material='opacity: 1.0; transparent: true'
			>";
			$nodalLink = "";
	}
}
else
{
	// not creating, just viewing
	if (isset($_GET['id']))
	{
		$thisID=$_GET['id'];
		$table="activity_attribute";
		$type="WebAR asset file";
		$detail = "value";
		$nodeAsset = generateActivityDetail($thisID,$table,$type,$detail);
	}
	else
	{
		// produce dummy page
		// https://fantendo.fandom.com/wiki/Fantendo:Main_Menu?file=Nyan+cat+animated.gif
		//	https://static.wikia.nocookie.net/fantendo/images/9/9f/Nyan_cat_animated.gif/revision/latest?cb=20121125193107&format=original
			
		$aframeAsset = "<img id='nodeAsset' src='assets/nyancat.gif'>";		
		
		$aframeEntity = "
		<a-image
			src='assets/$nodeAsset'
			position='0 0 -10'
			rotation='0 0 30'
			width='3'
			height='3'
			material='opacity: 1.0; transparent: true; alphaTest: 0.5; side: double;'
			animation='property: rotation; from: 0 0 30; to: 0 0 -30; loop: true; easing: linear; dur: 30000; dir: alternate;'
			material='opacity: 1.0; transparent: true'
		>";
		$nodalLink = "";
	}
	
}


// check filename extsion of nodeasset
$thisFilenameExtension = pathinfo($nodeAsset, PATHINFO_EXTENSION);
if ($thisFilenameExtension == "png" || $thisFilenameExtension == "PNG" || $thisFilenameExtension == "gif" || $thisFilenameExtension == "GIF" || $thisFilenameExtension == "JPG" || $thisFilenameExtension == "jpg"  || $thisFilenameExtension == "JPEG" || $thisFilenameExtension == "jpeg")
{
	$thisEntityWidth = calculateAspect($nodeAsset,"width");
	$thisEntityHeight = calculateAspect($nodeAsset,"height");
		
	$aframeAsset = "<img id='nodeAsset' src='assets/$nodeAsset'>";		
	
	$aframeEntity = "
	<a-image
		src='assets/$nodeAsset'
		position='0 0 -10'
		rotation='0 0 30'

		width='$thisEntityWidth'
		height='$thisEntityHeight'
		material='opacity: 1.0; transparent: true; alphaTest: 0.5; side: double;'
		animation='property: rotation; from: 0 0 20; to: 0 0 -20; loop: true; easing: linear; dur: 30000; dir: alternate;'
		material='opacity: 1.0; transparent: true'
	>
	
	";
	$nodalLink = "<div style='width: 100%; text-align: center; font-family: arial;'><a href=https://www.instantnodals.com/node.php?id=$thisID target=_blank style='color: black;'>https://www.instantnodals.com/node.php?id=$thisID</a></div>";
	//$trackThis = trackView($thisID);

}
elseif ($thisFilenameExtension == "glb" || $thisFilenameExtension == "GLB" || $thisFilenameExtension == "gltf" || $thisFilenameExtension == "GLTF")
{
	$aframeAsset = "<a-asset-item id='nodeAsset' src='assets/$nodeAsset'></a-asset-item>";		
	
	$aframeEntity ="
	<a-entity
		light='type: ambient; color: #fff; intensity: 3.0;'
		gltf-model='#nodeAsset'
		scale='2 2 2'
		modify-materials
		position='0 0 20'
		rotation='0 -90 0'
		animation='property: rotation; to: 0 -180 0; loop: true; dir: alternate; dur: 10000; easing: linear;'
	>
	</a-entity>	";
	
	$nodalLink = "<div style='width: 100%; text-align: center; font-family: arial;'><a href=https://www.instantnodals.com/node.php?id=$thisID target=_blank style='color: black;'>https://www.instantnodals.com/node.php?id=$thisID</a></div>";

	//$trackThis = trackView($thisID);
}
elseif ($thisFilenameExtension == "stl" || $thisFilenameExtension == "STL" )
{
	$aframeAsset = "<a-asset-item response-type='arraybuffer' id='nodeAsset' src='assets/$nodeAsset'></a-asset-item>";		
	
	$color = generateHexColor();
	
	$aframeEntity ="	
	<a-entity
		stl-model='src: #nodeAsset'
		material='color: #fff; roughness: 1; metalness: 0'
		scale='0.08 0.08 0.08'
		position='0 0 20'
		rotation='0 0 0'
	>
	</a-entity>	";
	
	$nodalLink = "<div style='width: 100%; text-align: center; font-family: arial;'><a href=https://www.instantnodals.com/node.php?id=$thisID target=_blank style='color: black;'>https://www.instantnodals.com/node.php?id=$thisID</a></div>";

}	
else
{
	if ($nodalLink == null)
	{
		$aframeAsset = "<img id='nodeAsset' src='assets/1958-0000.webp'>";		
		
		$aframeEntity = "
		<a-image
			src='assets/1958-0000.webp'
			position='0 0 -10'
			rotation='0 0 30'
			width='3'
			height='3'
			material='opacity: 1.0; transparent: true; alphaTest: 0.5; side: double;'
			animation='property: rotation; from: 0 0 30; to: 0 0 -30; loop: true; easing: linear; dur: 30000; dir: alternate;'
			material='opacity: 1.0; transparent: true'
		>
		";

		$nodalLink = "";
	}
	else
	{
		$aframeAsset = "<img id='nodeAsset' src='assets/nyancat.gif'>";		
		
		$aframeEntity = "
		<a-image
			src='assets/$nodeAsset'
			position='0 0 -10'
			rotation='0 0 30'
			width='3'
			height='3'
			material='opacity: 1.0; transparent: true; alphaTest: 0.5; side: double;'
			animation='property: rotation; from: 0 0 30; to: 0 0 -30; loop: true; easing: linear; dur: 30000; dir: alternate;'
			material='opacity: 1.0; transparent: true'
		>";
		$nodalLink = "";
	}
}

?>

<!DOCTYPE HTML>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>#InstantNodal </title>
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Nabla&display=swap" rel="stylesheet">
		<script src="meta/aframe/aframe.min.js"></script>
		<script src="meta/aframe/aframe-ar.js"></script>
		<script src="meta/aframe/aframe-stl-model.min.js"></script>
		<script src="meta/aframe/aframe-modify-materials.js"></script>
		<link rel="stylesheet" href="meta/css/uiShell.css">
	</head>
	
	<body>
		<div id=nodeLayout>
		<section id=nodeLayoutScene>
			<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">
				<a-assets>
									</a-assets>
							</a-scene>
		</section>
		
		<section id=nodeLayoutInfo>
					</section>
		</div>
	</body>
	
</html>