Easy way to edit equipment

index.htm

@@ -36,20 +36,46 @@
 	    	<input type="checkbox" name="showarms">Show Arms<br>
             <input type="checkbox" name="small">Small<br>
 
-	    	Rotation: <input type="range" name="rotation" min="0" max="360" value="0"><br>
+	    	Rotation: <input type="range" name="rotation" min="0" max="360" value="0">
 
-            Head: <input type="range" name="headX" min="0" max="360" value="0"><input type="range" name="headY" min="0" max="360" value="0"><input type="range" name="headZ" min="0" max="360" value="0"><br>
+            <div class="evenly">
+                <span>Head:</span><input type="range" name="headX" min="0" max="360" value="0"><input type="range" name="headY" min="0" max="360" value="0"><input type="range" name="headZ" min="0" max="360" value="0">
+            </div>
 
-            Body: <input type="range" name="bodyX" min="0" max="360" value="0"><input type="range" name="bodyY" min="0" max="360" value="0"><input type="range" name="bodyZ" min="0" max="360" value="0"><br>
+            <div class="evenly">
+                <span>Body:</span><input type="range" name="bodyX" min="0" max="360" value="0"><input type="range" name="bodyY" min="0" max="360" value="0"><input type="range" name="bodyZ" min="0" max="360" value="0">
+            </div>
 
-            Left Leg: <input type="range" name="leftLegX" min="0" max="360" value="0"><input type="range" name="leftLegY" min="0" max="360" value="0"><input type="range" name="leftLegZ" min="0" max="360" value="0"><br>
+            <div class="evenly">
+                <span>Left Leg:</span><input type="range" name="leftLegX" min="0" max="360" value="0"><input type="range" name="leftLegY" min="0" max="360" value="0"><input type="range" name="leftLegZ" min="0" max="360" value="0">
+            </div>
 
-            Right Leg: <input type="range" name="rightLegX" min="0" max="360" value="0"><input type="range" name="rightLegY" min="0" max="360" value="0"><input type="range" name="rightLegZ" min="0" max="360" value="0"><br>
+            <div class="evenly">
+                <span>Right Leg:</span><input type="range" name="rightLegX" min="0" max="360" value="0"><input type="range" name="rightLegY" min="0" max="360" value="0"><input type="range" name="rightLegZ" min="0" max="360" value="0">
+            </div>
 
             <div id="inputarms">
-                Left Arm: <input type="range" name="leftArmX" min="0" max="360" value="0"><input type="range" name="leftArmY" min="0" max="360" value="0"><input type="range" name="leftArmZ" min="0" max="360" value="0"><br>
+                <div class="evenly">
+                    <span>Left Arm:</span><input type="range" name="leftArmX" min="0" max="360" value="0"><input type="range" name="leftArmY" min="0" max="360" value="0"><input type="range" name="leftArmZ" min="0" max="360" value="0">
+                </div>
 
-                Right Arm: <input type="range" name="rightArmX" min="0" max="360" value="0"><input type="range" name="rightArmY" min="0" max="360" value="0"><input type="range" name="rightArmZ" min="0" max="360" value="0"><br>
+                <div class="evenly">
+                    <span>Right Arm:</span><input type="range" name="rightArmX" min="0" max="360" value="0"><input type="range" name="rightArmY" min="0" max="360" value="0"><input type="range" name="rightArmZ" min="0" max="360" value="0">
+                </div>
+            </div>
+            <br>
+
+            <input type="checkbox" name="usecustomequipment">Use Custom Equipment
+            <div id="customequipment">
+                <div class="padding">
+                    Enter the text id of an item (for example <i>stone</i> or <i>iron_sword</i>) into the appropriate slots. You can enter an arbitrary item for the head or hand, but the other slots must contain an appropriate item.
+                    <input type="text" name="equipSword" placeholder="Item in hand">
+                    <input type="text" name="equipShoes" placeholder="Shoes">
+                    <input type="text" name="equipLeggings" placeholder="Leggings">
+                    <input type="text" name="equipChestplate" placeholder="Chestplate">
+                    <input type="text" name="equipHelmet" placeholder="Helmet">
+                    <input type="checkbox" name="equipCustomHead">Use Helmet as player name for custom head
+                </div>
             </div>
 
     	</div>
@@ -73,6 +99,9 @@
                 /give @p command_block
             </div>
 
+
+            <!-- We automated this.
+
             <div class="padding">
                 <br>
                 You can give the armor stand a <b>custom player head</b>! Just replace <i>Notch</i> with an username of your choice.
@@ -89,6 +118,8 @@
             <div class="code">
                 /entitydata @e[r=2,ArmorStand] {Equipment:[{id:"iron_sword",Count:1b},{id:"iron_boots",Count:1b},{id:"iron_leggings",Count:1b},{id:"iron_chestplate",Count:1b},{id:"iron_helmet",Count:1b}]}
             </div>
+            
+            -->
 
             <div class="padding">
                 <br>

main.js

@@ -31,6 +31,15 @@ var noBasePlate = false;
 var noGravity = false;
 var showArms = false;
 var small = false;
+
+var useCustomEquipment;
+var equipSword;
+var equipShoes;
+var equipLeggings;
+var equipChestplate;
+var equipHelmet;
+var equipCustomHead;
+
 //The rotation values are all in degrees.
 var head = new THREE.Vector3(0,0,0);
 var body = new THREE.Vector3(0,0,0);
@@ -39,7 +48,6 @@ var rightLeg = new THREE.Vector3(0,0,0);
 var leftArm = new THREE.Vector3(0,0,0);
 var rightArm = new THREE.Vector3(0,0,0);
 var rotation = 0;
-var vec0 = new THREE.Vector3(0,0,0); // We use this to determine if we want a pose in the command.
 
 //Stuff for mouse movements
 var mouseDownX;
@@ -227,6 +235,15 @@ function handleInput(){
 	showArms = getCheckBoxInput("showarms");
 	small = getCheckBoxInput("small");
 
+	useCustomEquipment = getCheckBoxInput("usecustomequipment");
+	equipSword = getInput("equipSword");
+	equipShoes = getInput("equipShoes");
+	equipLeggings = getInput("equipLeggings");
+	equipChestplate = getInput("equipChestplate");
+	equipHelmet = getInput("equipHelmet");
+	equipCustomHead = getCheckBoxInput("equipCustomHead");
+
+
 	body.set(getRangeInput("bodyX"), getRangeInput("bodyY"), getRangeInput("bodyZ"));
 	head.set(getRangeInput("headX"), getRangeInput("headY"), getRangeInput("headZ"));
 	leftLeg.set(getRangeInput("leftLegX"), getRangeInput("leftLegY"), getRangeInput("leftLegZ"));
@@ -244,19 +261,27 @@ function getCheckBoxInput(name){
 function getRangeInput(name){
 	return $("input[name="+name+"]").val();
 }
+function getInput(name){
+	return $("input[name="+name+"]").val();
+}
 
 /** Changes stuff according to our input values */
 function updateUI(){
-	//Hide/Show the arm section
+	//Hide/Show different inputs
 	if(showArms)
 		$("#inputarms").show();
 	else
 		$("#inputarms").hide();
+	if(useCustomEquipment)
+		$("#customequipment").show();
+	else
+		$("#customequipment").hide();
 	$("#code").text(generateCode());
 	if(generateCode().length > 100){
 		$("#codeinfo").html("<b>Please note:</b> This command is too long to be executed from chat. You need to place it inside a command block. (See tips and tricks below.)");
 	}
 
+
 	// Rotate 3D Stuff
 	// y and z rotation needs to be inverted
 	mBody.rotation.set(body.x * DEG2RAD, -body.y * DEG2RAD, -body.z * DEG2RAD);
@@ -295,6 +320,44 @@ function generateCode(){
 	if(rotation != 0)
 		tags.push("Rotation:["+rotation+"f]");
 
+	//Equipment
+	if(useCustomEquipment){
+		var equip = [];
+
+		if(equipSword != "")
+			equip.push("{id:\""+equipSword+"\",Count:1b}");
+		else
+			equip.push("{}");
+
+		if(equipShoes != "")
+			equip.push("{id:\""+equipShoes+"\",Count:1b}");
+		else
+			equip.push("{}");
+
+		if(equipLeggings != "")
+			equip.push("{id:\""+equipLeggings+"\",Count:1b}");
+		else
+			equip.push("{}");
+
+		if(equipChestplate != "")
+			equip.push("{id:\""+equipChestplate+"\",Count:1b}");
+		else
+			equip.push("{}");
+
+		if(equipHelmet != ""){
+			if(equipCustomHead){
+				equip.push("{id:\"skull\",Count:1b,Damage:3b,tag:{SkullOwner:\""+equipHelmet+"\"}}");
+			}
+			else{
+				equip.push("{id:\""+equipHelmet+"\",Count:1b}");
+			}
+		}
+		else
+			equip.push("{}");
+
+		tags.push("Equipment:["+equip.join(",")+"]");
+	}
+
 	//Now the pose
 	var pose = [];
 	if(!isZero(body))

style.css

@@ -1,6 +1,6 @@
 html, body{
 	height: 100%;
-	font-family: Arial;
+	font-family: Arial, sans-serif;
 	margin: 0;
 	padding: 0;
 }
@@ -30,6 +30,13 @@ a{
 	color: #000000;
 }
 
+/* We cheat a bit here to fit all the controls in one row.
+	I will add a proper workaround later.
+ */
+.evenly *{
+	width: 24%;
+}
+
 #gl{
 	width: 60%;
 	height: 100%;
@@ -54,4 +61,8 @@ a{
 	font-family: monospace;
 	background-color: #37474f;
 	color: #ffffff;
+}
+
+#customequipment input[type=text]{
+	width: 100%;
 }