content/hifi-content/rebecca/WearableJSONExporter/wearableJSON.html
2022-02-14 02:04:11 +01:00

115 lines
5.5 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>
<h3 style="display: inline-block;">Select the item you want to populate the entityID field.
<br>Select the joint your item should attach to.
<br>'Package JSON' to export the item as a JSON.</h3>
</div>
<hr> <br>
<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>[LR]Shoulder</li>
<li>[LR]Arm</li>
<li>[LR]ForeArm</li>
<li>[LR]Hand</li>
<li>[LR]HandThumb1</li>
<li>[LR]HandIndex1</li>
<li>[LR]HandMiddle1</li>
<li>[LR]HandRing1</li>
<li>[LR]HandPinky1</li>
<li>[LR]UpLeg</li>
<li>[LR]Leg</li>
<li>[LR]Foot</li>
<li>[LR]ToeBase</li>
<li>[LR]Toe_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>
<script>
var selectedJoint = null;
$(document).ready(function(){
$(".dropdown-menu li").click(function(){
$("#selected").text($(this).text());
selectedJoint = $(this).text();
});
});
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){
$(".id").val(scriptEvent);
});
}
$(document).ready(main);
</script>
</div>
</body>
</html>