janusvr · Spyduck · Dec 7, 2016 · Dec 7, 2016 · Dec 7, 2016 · Dec 7, 2016
diff --git a/2dui/apps/avatar/icons/icon-preview.png b/2dui/apps/avatar/icons/icon-preview.png
diff --git a/2dui/apps/avatar/icons/icon-previewhover.png b/2dui/apps/avatar/icons/icon-previewhover.png
diff --git a/2dui/apps/avatar/icons/icon-save.png b/2dui/apps/avatar/icons/icon-save.png
diff --git a/2dui/apps/avatar/icons/icon-savehover.png b/2dui/apps/avatar/icons/icon-savehover.png
diff --git a/2dui/apps/avatar/icons/icon-shirt.png b/2dui/apps/avatar/icons/icon-shirt.png
diff --git a/2dui/apps/avatar/icons/icon-shirthover.png b/2dui/apps/avatar/icons/icon-shirthover.png
diff --git a/2dui/apps/avatar/index.html b/2dui/apps/avatar/index.html
@@ -0,0 +1,363 @@
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+
+	<title>JanusVR Interface</title>
+	<meta name="description" content="JanusVR Interface">
+	<meta name="author" content="JanusVR Inc.">
+	<link rel="stylesheet" type="text/css" href="style.css" />
+
+	<script src="../../scripts/tabs.js"></script>
+	<script src="../../skins/theme.js"></script>
+	<script>
+	var populated = false;
+	var settings = null;
+	var renaming_input_div = "";
+	var renaming_input = null;
+	var renaming_avatar = 0;
+	var renaming_div = null;
+	var renaming_text = "";
+	function normalize2D(n1, n2) {
+		var norm = Math.sqrt(n1 * n1 + n2 * n2);
+		var point2 = {x:n1, y:n2};
+		if (norm != 0) { // as3 return 0,0 for a point of zero length
+			point2.x = 1 * n1 / norm;
+			point2.y = 1 * n2 / norm;
+		}
+		return point2;
+	}
+	function loadsettings()
+	{
+		settings = JSON.parse(window.janus.getsetting('avatarData'));
+		if (settings == null)
+		{
+			settings = [{ name:"Unnamed Avatar", string: escape(janus.getavatar()), }];
+		}
+		else if (settings.length == 0)
+		{
+			settings = [{ name:"Unnamed Avatar", string: escape(janus.getavatar()), }];
+		}
+	}
+	function savesettings()
+	{
+		window.janus.setsetting('avatarData', JSON.stringify(settings));
+	}
+	function test()
+	{
+
+	}
+	function startrename(avatar)
+	{
+		if (renaming_text == "" && populated == true)
+		{
+			renaming_avatar = avatar;
+			//log('selecting');
+			var trashicon = document.createElement('img');
+			trashicon.src = '../inventory/images/icons/icon-trash.png';
+			trashicon.style.width = '24px';
+			trashicon.style.height = '24px';
+			trashicon.style.verticalAlign = 'middle';
+
+			trashicon.setAttribute('class', 'menu-icon right');
+			trashicon.setAttribute('onclick', 'delete_avatar('+avatar+');');
+			trashicon.id = 'trash_div_'+avatar;
+
+			var inputdiv = document.createElement('div');
+			inputdiv.setAttribute('class', 'inline');
+
+			var shirtimage = document.createElement('div');
+			shirtimage.className = "shirticon";
+			shirtimage.setAttribute('onclick', 'load_avatar('+avatar+');');
+			var itemdiv = document.getElementById('avatar_div_'+avatar);
+			var input = document.createElement('input');
+			renaming_text = settings[avatar].name;
+			input.value = renaming_text;
+			itemdiv.textContent = '';
+			itemdiv.appendChild(shirtimage);
+			inputdiv.appendChild(input);
+			inputdiv.appendChild(trashicon);
+			inputdiv.appendChild(document.createElement("br"));
+			itemdiv.appendChild(inputdiv);
+			input.focus();
+			input.select();
+			input.onkeydown = function(ev)
+			{
+				if (ev.which == 13)
+				{
+					finishrename(avatar);
+				}
+			};
+			input.onblur = function()
+			{
+				var canceltimer = setTimeout(cancelrename,100);
+			}
+			renaming_input_div = inputdiv;
+			renaming_input = input;
+			renaming_div = itemdiv;
+		}
+		else
+		{
+			//log('start failed');
+		}
+	}
+	function finishrename(avatar)
+	{
+		if (renaming_text != "")
+		{
+			var old = settings[avatar].name;
+			settings[avatar].name = renaming_input.value;
+			savesettings()
+			//log('Renamed "' + old + '" to "' + settings[avatar].name + '"');
+			notify('Renamed "' + old + '" to "' + settings[avatar].name + '"');
+
+
+			var text = renaming_input.value;
+
+			renaming_div.removeChild(renaming_input_div);
+
+			renaming_div.innerHTML = "<div class='shirticon' onclick='load_avatar("+avatar+");'></div>"+text;
+
+
+
+			renaming_input_div = null;
+			renaming_input = null;
+			renaming_div = null;
+			renaming_text = "";
+
+		}
+		else
+		{
+			//log('finish failed');
+		}
+	}
+	function cancelrename()
+	{
+		if (renaming_text != "")
+		{
+			//renaming_div.textContent = renaming_input.value;
+			renaming_div.removeChild(renaming_input_div);
+			//renaming_div.innerHTML = "<div class='shirticon'></div>"+renaming_text;
+			renaming_div.innerHTML = "<div class='shirticon' onclick='load_avatar("+renaming_avatar+");'></div>"+renaming_text;
+			//log('rename cancelled');
+			renaming_input_div = null;
+			renaming_input = null;
+			renaming_div = null;
+			renaming_text = "";
+		}
+		else
+		{
+			//log('cancel failed');
+		}
+	}
+	function addAvatarToList(avatar)
+	{
+		var list = document.getElementById("avatar_list");
+		var avatar_list = document.getElementById("avatar_list");
+		var itemli = document.createElement('li');
+		var itemdiv = document.createElement('div');
+		var shirtimage = document.createElement('div');
+		shirtimage.className = "shirticon";
+		shirtimage.setAttribute('onclick', 'load_avatar('+avatar+');');
+		var text = document.createTextNode(settings[avatar].name)
+		itemdiv.id = 'avatar_div_'+avatar;
+		itemdiv.setAttribute('onclick', 'avatar_clicked('+avatar+');');
+		itemdiv.class = 'avatarcontainer';
+		itemdiv.appendChild(shirtimage)
+		itemdiv.appendChild(text);
+		itemli.appendChild(itemdiv);
+		list.appendChild(itemli);
+	}
+	var timer = null;
+	function avatar_clicked(avatar)
+	{
+		if (timer)
+		{
+			clearTimeout(timer);
+			timer = null;
+			load_avatar(avatar);
+		}
+		else
+		{
+			timer = setTimeout(function() {
+				clearTimeout(timer);
+				timer = null;
+				startrename(avatar); }
+			, 250);
+		}
+	}
+	function populatelist()
+	{
+		renaming_text = "";
+		loadsettings()
+		var list = document.getElementById("avatar_list");
+		list.innerHTML = "";
+		for (var avatar in settings)
+		{
+			addAvatarToList(avatar);
+
+			//log(settings[avatar].name);
+		}
+		populated = true;
+	}
+	function load_avatar(avatar)
+	{
+		if (settings.length > avatar)
+		{
+			var avatar_string = unescape(settings[avatar].string);
+			avatar_string = avatar_string.replace( /Ghost id="(.*?)"/i, "Ghost id=\""+parent.window.janus.userid+"\"" );
+			janus.setavatar(avatar_string);
+			notify('Wearing avatar: "' + settings[avatar].name + '"');
+			preview_start();
+			document.getElementById('togList_Preview').checked = true;
+		}
+	}
+	function save_avatar()
+	{
+		settings.push({ name:"Unnamed Avatar", string: escape(janus.getavatar()), });
+		savesettings();
+		addAvatarToList(settings.length-1);
+		notify('Saved current avatar');
+	}
+	function delete_avatar(avatar)
+	{
+		notify('Deleted avatar "' + settings[avatar].name + '"');
+		settings.splice(avatar,1);
+		savesettings();
+		document.getElementById("avatar_list").innerHTML = "";
+		populated = false;
+		setTimeout( function() {
+			cancelrename()
+			clearTimeout(timer)
+			timer = null;
+			populatelist()
+		} ,100);
+	}
+	var ghost_name = "";
+	var ghost_preview = false;
+	function log(text)
+	{
+		parent.logToConsole("/2dui/apps/avatar: "+text);
+	}
+	function notify(text)
+	{
+		parent.shownotification(text,'notifications/call.png','null','#323232');
+	}
+	function preview_start()
+	{
+		var spawn_distance = 1.5;
+		var pos = parent.window.janus.playerlist[0].pos;
+		var zdir = parent.window.janus.playerlist[0].zdir;
+		var zdirnorm = normalize2D(zdir.x, zdir.z);
+		zdir = {x:-zdirnorm.x, y:0, z:-zdirnorm.y};
+		var ghost_pos = Math.round((pos.x+zdirnorm.x*spawn_distance)*1000)/1000.0+"_"+Math.round(pos.y*1000)/1000.0+"_"+Math.round((pos.z+zdirnorm.y*spawn_distance)*1000)/1000.0;
+		var ghost_zdir = Math.round(zdir.x*1000)/1000.0+"_"+Math.round(zdir.y*1000)/1000.0+"_"+Math.round(zdir.z*1000)/1000.0;
+		var ghost_url = "";
+		var url = 'http://spyduck.net/php/avatar_ghost.php';
+		var data = new FormData();
+		data.append('pos', ghost_pos);
+		data.append('zdir', ghost_zdir);
+
+		var avatar_string = janus.getavatar();
+		avatar_string = avatar_string.replace( /Ghost id="(.*?)"/i, "Ghost id=\""+parent.window.janus.userid+"\"" );
+		data.append('avatar', escape(avatar_string));
+		var request = new XMLHttpRequest();
+		request.onload = function()
+		{
+			ghost_url = this.responseText;
+
+		};
+		request.open('POST', url, false);
+		request.send(data);
+
+		ghost_name = "Avatar Preview";
+		parent.window.janus.createasset('ghost', {id:ghost_name, src:ghost_url}, false);
+		if (parent.window.janus.roomcode().indexOf('<Ghost id="'+ghost_name+'"') == -1)
+		{
+			parent.window.janus.createobject('ghost', {id:ghost_name, js_id:ghost_name, auto_play:true, loop:false, scale:"1 1 1"}, false);
+		}
+		ghost_preview = true;
+	}
+
+	function preview_end()
+	{
+		parent.window.janus.removeobject(ghost_name, false);
+		ghost_preview = false;
+	}
+
+	window.onbeforeunload  = function() {
+		log('test');
+	}
+	window.onload = function () {
+
+	tabSelect("avatarscontainer","maintabbutton")
+	window.onresize()
+	}
+	onload = function() {
+		populatelist()
+	}
+
+
+
+	 window.onresize = function(event) { //make sure the window area stays a consistent size
+
+
+
+ if (document.getElementById("tabrow").offsetWidth >= 200) //if you change the 200 here, also change the min-width of the window containing it. this is to prevent flicker when vertically resizing a minimally (width) sized window
+ {
+document.getElementById("windowarea").style.height = "calc(100% - "+(document.getElementsByClassName("tabrow")[0].offsetHeight+3)+"px)";	
+ }
+};
+
+	var previewbuttonmode = 0;
+
+	function togglePreview() {
+
+	if (previewbuttonmode == 0)
+	{
+	preview_start();
+	previewbuttonmode = 1;
+	}
+	else
+	{
+	preview_end();
+	previewbuttonmode = 0;	
+	}
+
+	}
+
+
+		</script>
+
+
+</head>
+
+<body >
+
+<div class="windowcontainer">
+
+	<div class="windowarea unselectable" id="windowarea">
+
+
+		<div  class="tabcontainer" id="avatarscontainer">
+
+			<div class="list" >
+				<div id="avatar_list" >
+				</div>
+			</div>
+			<div>
+
+				<div onclick="togglePreview();" class="bottombutton previewbutton"></div>
+				<div onclick="save_avatar();" class="bottombutton savebutton"></div>
+
+			</div>
+
+		</div>
+
+	</div>
+
+</div>
+
+</div>
+
+</body>
+</html>