154 lines
7.9 KiB
HTML
154 lines
7.9 KiB
HTML
<!--
|
|
/wearable-packager/app.html
|
|
Exports wearable JSON for Marketplace
|
|
Created by Liv Erickson on 11/6/17.
|
|
Copyright 2017 High Fidelity, Inc.
|
|
|
|
Distributed under the Apache License, Version 2.0.
|
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title> Wearable Packager </title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="wear.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div style="margin-top: 21px; margin-bottom: 10px; text-align: center;">
|
|
<img style="height: 30px; display: inline-block; padding-right: 15px;
|
|
padding-bottom: 12px; vertical-align: middle;" src="jsonPack.png" />
|
|
<h1 style="display: inline-block;">Wearable JSON Packager</h1><hr>
|
|
<div style = "text-align: justify">
|
|
<h3>To use:</h3><br>
|
|
<text style="display: inline-block;">1. Click the item you want to populate the entityID field. This should be an entity that has a Marketplace URL (http://mpassets...) as the model URL.
|
|
<br>2. Select the joint your item should attach to. Joints that specify a left or right side will be exported to work with both sides.
|
|
<br>3. 'Package JSON' to export the item as a JSON.</text>
|
|
</div>
|
|
</div>
|
|
<div id="properties">
|
|
<fieldset class="property xyz">
|
|
<legend>Entity ID to package</legend>
|
|
<div class="tuple">
|
|
<div><input class="id" style="padding-left:0; width: 320;" type="text"></div>
|
|
</div>
|
|
</fieldset>
|
|
<br>
|
|
<fieldset class="property xyz">
|
|
<legend>Attachment Joint</legend><br>
|
|
<div class="dropdown">
|
|
<button id="selected" onclick="myFunction()" class="dropbtn" >Select attachment Joint<span class="caret">
|
|
</span></button>
|
|
<ul class="dropdown-menu">
|
|
<div id="myDropdown" class="dropdown-content">
|
|
<li>HeadTop_End</li>
|
|
<li>Head</li>
|
|
<li>Face</li>
|
|
<li>Neck</li>
|
|
<li>Spine</li>
|
|
<li>Spine1</li>
|
|
<li>Spine2</li>
|
|
<li>LeftShoulder</li>
|
|
<li>RightShoulder</li>
|
|
<li>LeftArm</li>
|
|
<li>RightArm</li>
|
|
<li>LeftForeArm</li>
|
|
<li>RightForeArm</li>
|
|
<li>LeftHandThumb1</li>
|
|
<li>RightHandThumb1</li>
|
|
<li>LeftHandIndex1</li>
|
|
<li>RightHandIndex1</li>
|
|
<li>LeftHandMiddle1</li>
|
|
<li>RightHandMiddle1</li>
|
|
<li>LeftHandRing1</li>
|
|
<li>RightHandRing1</li>
|
|
<li>LeftHandPinky1</li>
|
|
<li>RightHandPinky1</li>
|
|
<li>LeftUpLeg</li>
|
|
<li>RightUpLeg</li>
|
|
<li>LeftLeg</li>
|
|
<li>RightLeg</li>
|
|
<li>LeftFoot</li>
|
|
<li>RightFoot</li>
|
|
<li>LeftToeBase</li>
|
|
<li>RightToeBase</li>
|
|
<li>LeftToe_End</li>
|
|
<li>RightToe_End</li>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</fieldset>
|
|
<br><br><br>
|
|
<input type="submit" style="margin-left: 25%; margin-right: auto; width: 230px; min-height: 40px;"
|
|
class="blueButton" value="Package JSON">
|
|
</div><br>
|
|
<hr>
|
|
<text id="warning" style = "color:red; display:none">
|
|
The item you selected does not appear to be a marketplace asset. Please upload your model to Marketplace and use that URL to package your wearable.
|
|
</text>
|
|
<text id="joint-warning" style = "color:red; display:none">
|
|
You must select a joint that your wearable can be used with.
|
|
</text>
|
|
<script>
|
|
var selectedJoint = null;
|
|
$(document).ready(function(){
|
|
$(".dropdown-menu li").click(function(){
|
|
$("#selected").text($(this).text());
|
|
selectedJoint = $(this).text();
|
|
if ($(".id").val() !== "") {
|
|
// Try to adjust the entity's position
|
|
var entityEvent = {
|
|
type : "move-entity",
|
|
entityID: $(".id").val(),
|
|
joint: selectedJoint
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(entityEvent));
|
|
}
|
|
});
|
|
});
|
|
|
|
function myFunction() {document.getElementById("myDropdown").classList.toggle("show");}
|
|
|
|
window.onclick = function(event) {
|
|
if (!event.target.matches('.dropbtn')) {
|
|
var dropdowns = document.getElementsByClassName("dropdown-content");
|
|
var i;
|
|
for (i = 0; i < dropdowns.length; i++) {
|
|
var openDropdown = dropdowns[i];
|
|
if (openDropdown.classList.contains('show')) {
|
|
openDropdown.classList.remove('show');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function main(){
|
|
$(".bluebutton").click(function() {
|
|
var clickEvent = {
|
|
type: "submit",
|
|
entityID: $(".id").val(),
|
|
joint: selectedJoint,
|
|
app:"JSON"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(clickEvent));
|
|
});
|
|
EventBridge.scriptEventReceived.connect(function(scriptEvent){
|
|
if (scriptEvent === "display-warning-modelURL") {
|
|
$("#warning").show();
|
|
} else if (scriptEvent === "display-warning-joint-selection") {
|
|
$("#joint-warning").show();
|
|
} else if (scriptEvent === "hide-warning") {
|
|
$("#warning").hide();
|
|
$("#joint-warning").hide();
|
|
} else {
|
|
$(".id").val(scriptEvent);
|
|
}
|
|
});
|
|
}
|
|
$(document).ready(main);
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|