overte-HifiExperiments/scripts/system/html/entityProperties.html
Ryan Huffman d108fabd0b Update the name of the collision shapes used in edit.js properties
Update the names to be consistent with what is shown on the add model
dialog.
2017-01-23 13:56:48 -08:00

561 lines
33 KiB
HTML

<!--
// entityProperties.html
//
// Created by Ryan Huffman on 13 Nov 2014
// Copyright 2014 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>Properties</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/edit-style.css">
<link rel="stylesheet" type="text/css" href="css/colpick.css">
<link href="css/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/colpick.js"></script>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="js/spinButtons.js"></script>
<script type="text/javascript" src="js/keyboardControl.js"></script>
<script type="text/javascript" src="js/entityProperties.js"></script>
<script src="js/jsoneditor.min.js"></script>
</head>
<body onload='loaded();'>
<div id="properties-list">
<div id="properties-header">
<div id="type" class="property value">
<span id="type-icon"></span><label id="property-type"><i>No selection</i></label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-locked">
<label for="property-locked"><span>&#xe006;</span>&nbsp;Locked</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-visible">
<label for="property-visible"><span>&#xe007;</span>&nbsp;Visible</label>
</div>
</div>
<hr />
<div class="shape-group shape-section property dropdown">
<label for="property-shape">Shape</label>
<select name="SelectShape" id="property-shape">
<option value="Cube">Box</option>
<option value="Sphere">Sphere</option>
<option value="Tetrahedron">Tetrahedron</option>
<option value="Octahedron">Octahedron</option>
<option value="Icosahedron">Icosahedron</option>
<option value="Dodecahedron">Dodecahedron</option>
<option value="Hexagon">Hexagon</option>
<option value="Triangle">Triangle</option>
<option value="Octagon">Octagon</option>
</select>
</div>
<div class="property text">
<label for="property-name">Name</label>
<input type="text" id="property-name">
</div>
<div class="property text">
<label for="property-description">Description</label>
<input type="text" id="property-description">
</div>
<div class="property textarea">
<label for="property-user-data">User data</label>
<br>
<div class="row">
<input type="button" class="red" id="userdata-clear" value="Clear User Data">
<input type="button" class="blue" id="userdata-new-editor" value="Edit as JSON">
<input disabled type="button" class="black" id="userdata-save" value="Save User Data">
<span id="userdata-saved">Saved!</span>
</div>
<div id="static-userdata"></div>
<div id="userdata-editor"></div>
<textarea id="property-user-data"></textarea>
</div>
<div id="id" class="property value">
<label>ID:</label>
<span id="property-id" class="selectable"></span>
</div>
<div class="section-header hyperlink-group hyperlink-section">
<label>Hyperlink</label><span>M</span>
</div>
<div class="hyperlink-group hyperlink-section property url">
<label for="property-hyperlink-href">Href - hifi://address</label>
<input type="text" id="property-hyperlink-href">
</div>
<div class="section-header spatial-group">
<label>Spatial</label><span>M</span>
</div>
<div class="spatial-group property xyz">
<label>Position <span class="unit">m</span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-pos-x"><label for="property-pos-x">X:</label></div>
<div><input type="number" class="y" id="property-pos-y"><label for="property-pos-y">Y:</label></div>
<div><input type="number" class="z" id="property-pos-z"><label for="property-pos-z">Z:</label></div>
</div>
</div>
<div class="spatial-group property pyr">
<label>Rotation <span class="unit">deg</span></label>
<div class="tuple">
<div><input type="number" class="pitch" id="property-rot-x" step="0.1"><label for="property-rot-x">Pitch:</label></div>
<div><input type="number" class="yaw" id="property-rot-y" step="0.1"><label for="property-rot-y">Yaw:</label></div>
<div><input type="number" class="roll" id="property-rot-z" step="0.1"><label for="property-rot-z">Roll:</label></div>
</div>
</div>
<div class="spatial-group property xyz">
<label>Dimensions <span class="unit">m</span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-dim-x" step="0.1"><label for="property-dim-x">X:</label></div>
<div><input type="number" class="y" id="property-dim-y" step="0.1"><label for="property-dim-y">Y:</label></div>
<div><input type="number" class="z" id="property-dim-z" step="0.1"><label for="property-dim-z">Z:</label></div>
</div>
</div>
<div class="spatial-group property xyz">
<label>Registration <span class="unit">(pivot offset as ratio of dimension)</span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-reg-x" step="0.1"><label for="property-reg-x">X:</label></div>
<div><input type="number" class="y" id="property-reg-y" step="0.1"><label for="property-reg-y">Y:</label></div>
<div><input type="number" class="z" id="property-reg-z" step="0.1"><label for="property-reg-z">Z:</label></div>
</div>
</div>
<div class="spatial-group property gen">
<label>Scale <span class="unit">%</span></label>
<div class="row">
<input type="number" id="dimension-rescale-pct" value=100>
<input type="button" class="blue" id="dimension-rescale-button" value="Rescale">
<input type="button" class="red" id="reset-to-natural-dimensions" value="Reset Dimensions">
</div>
</div>
<div class="spatial-group row">
<div class="property text">
<label for="property-parent-id">Parent ID</label>
<input type="text" id="property-parent-id">
</div>
<div class="property number">
<label for="property-parent-joint-index">Parent joint index</label>
<input type="number" id="property-parent-joint-index">
</div>
</div>
<div class="spatial-group ">
<div class="property text">
<label>Align</label>
</div>
<div class="row">
<div class="buttons">
<input type="button" id="move-selection-to-grid" value="Selection to Grid">
<input type="button" id="move-all-to-grid" value="All to Grid">
</div>
</div>
</div>
<hr class="spatial-group poly-vox-section" />
<div class="spatial-group poly-vox-section property xyz">
<label>Voxel volume size <span class="unit">m</span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-voxel-volume-size-x"><label for="property-voxel-volume-size-x">X:</label></div>
<div><input type="number" class="y" id="property-voxel-volume-size-y"><label for="property-voxel-volume-size-y">Y:</label></div>
<div><input type="number" class="z" id="property-voxel-volume-size-z"><label for="property-voxel-volume-size-z">Z:</label></div>
</div>
</div>
<div class="spatial-group poly-vox-section property dropdown">
<label>Surface extractor</label>
<select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
<option value="0">Marching cubes</option>
<option value="1">Cubic</option>
<option value="2">Edged cubic</option>
<option value="3">Edged marching cubes</option>
</select>
</div>
<div class="spatial-group poly-vox-section property url ">
<label for="property-x-texture-url">X-axis texture URL</label>
<input type="text" id="property-x-texture-url">
</div>
<div class="spatial-group poly-vox-section property url ">
<label for="property-y-texture-url">Y-axis texture URL</label>
<input type="text" id="property-y-texture-url">
</div>
<div class="spatial-group poly-vox-section property url ">
<label for="property-z-texture-url">Z-axis texture URL</label>
<input type="text" id="property-z-texture-url">
</div>
<div class="section-header physical-group">
<label>Physical</label><span>M</span>
</div>
<div class="physical-group property xyz">
<label>Linear velocity <span class="unit">m/s</span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-lvel-x"><label for="property-lvel-x">X:</label></div>
<div><input type="number" class="y" id="property-lvel-y"><label for="property-lvel-y">Y:</label></div>
<div><input type="number" class="z" id="property-lvel-z"><label for="property-lvel-z">Z:</label></div>
</div>
</div>
<div class="physical-group property number">
<label>Linear damping</label>
<input type="number" id="property-ldamping">
</div>
<hr class="physical-group" />
<div class="physical-group property pyr">
<label>Angular velocity <span class="unit">deg/s</span></label>
<div class="tuple">
<div><input type="number" class="pitch" id="property-avel-x"><label for="property-avel-x">Pitch:</label></div>
<div><input type="number" class="yaw" id="property-avel-y"><label for="property-avel-y">Yaw:</label></div>
<div><input type="number" class="roll" id="property-avel-z"><label for="property-avel-z">Roll:</label></div>
</div>
</div>
<div class="physical-group property number">
<label>Angular damping</label>
<input type="number" id="property-adamping">
</div>
<hr class="physical-group" />
<div class="physical-group property gen">
<div class="tuple">
<div><label>Restitution</label><input type="number" id="property-restitution"></div>
<div><label>Friction</label><input type="number" id="property-friction"></div>
<div><label>Density</label><input type="number" id="property-density"></div>
</div>
</div>
<hr class="physical-group" />
<div class="physical-group property xyz">
<label>Gravity <span class="unit">m/s<sup>2</sup></span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-grav-x"><label for="property-grav-x">X:</label></div>
<div><input type="number" class="y" id="property-grav-y"><label for="property-grav-y">Y:</label></div>
<div><input type="number" class="z" id="property-grav-z"><label for="property-grav-z">Z:</label></div>
</div>
</div>
<div class="physical-group property xyz">
<label>Acceleration <span class="unit">m/s<sup>2</sup></span></label>
<div class="tuple">
<div><input type="number" class="x" id="property-lacc-x"><label for="property-lacc-x">X:</label></div>
<div><input type="number" class="y" id="property-lacc-y"><label for="property-lacc-y">Y:</label></div>
<div><input type="number" class="z" id="property-lacc-z"><label for="property-lacc-z">Z:</label></div>
</div>
</div>
<hr class="physical-group color-section" />
<div class="physical-group color-section property rgb">
<div id="property-color" class="color-picker"></div>
<label>Entity color</label>
<div class="tuple">
<div><input type="number" class="red" id="property-color-red"><label for="property-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-color-green"><label for="property-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-color-blue"><label for="property-color-blue">Blue:</label></div>
</div>
</div>
<div class="section-header behavior-group">
<label>Behavior</label><span>M</span>
</div>
<div class="behavior-group property checkbox">
<input type="checkbox" id="property-collisionless">
<label for="property-collisionless">Collisionless</label>
</div>
<div class="behavior-group property checkbox">
<input type="checkbox" id="property-dynamic">
<label for="property-dynamic">Dynamic</label>
</div>
<div class="behavior-group two-column">
<div class="column">
<div class="sub-section-header">
<span>Collides With</span>
</div>
<div class="checkbox-sub-props">
<div class="property checkbox">
<input type="checkbox" id="property-collide-static">
<label for="property-collide-static">Static entities</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-collide-dynamic">
<label for="property-collide-dynamic">Dynamic entities</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-collide-kinematic">
<label for="property-collide-kinematic">Kinematic entities</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-collide-myAvatar">
<label for="property-collide-myAvatar">My avatar</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-collide-otherAvatar">
<label for="property-collide-otherAvatar">Other avatars</label>
</div>
</div>
</div>
<div class="column">
<div class="sub-section-header">
<span>Grabbing</span>
</div>
<div class="checkbox-sub-props">
<div class="property checkbox">
<input type="checkbox" id="property-grabbable">
<label for="property-grabbable">Grabbable</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-wants-trigger">
<label for="property-wants-trigger">Triggerable</label>
</div>
<div class="property checkbox">
<input type="checkbox" id="property-ignore-ik">
<label for="property-ignore-ik">Ignore inverse kinematics</label>
</div>
</div>
</div>
</div>
<hr class="behavior-group" />
<div class="behavior-group property url ">
<label for="property-collision-sound-url">Collision sound URL</label>
<input type="text" id="property-collision-sound-url">
</div>
<div class="behavior-group property number">
<label>Lifetime <span class="unit">s</span></label>
<input type="number" id="property-lifetime">
</div>
<hr class="behavior-group" />
<div class="behavior-group property url refresh">
<input type="hidden" id="property-script-timestamp" class="value">
<label for="property-script-url">Script URL</label>
<input type="text" id="property-script-url">
<input type="button" id="reload-script-button" class="glyph" value="F">
</div>
<div class="section-header model-group model-section zone-section">
<label>Model</label><span>M</span>
</div>
<div class="model-group model-section property url ">
<label for="property-model-url">Model URL</label>
<input type="text" id="property-model-url">
</div>
<div class="model-group model-section zone-section property dropdown">
<label>Collision shape type</label>
<select name="SelectShapeType" id="property-shape-type">
<option value="none">No Collision</option>
<option value="box">Box</option>
<option value="sphere">Sphere</option>
<option value="compound">Compound</option>
<option value="simple-hull">Basic - Whole model</option>
<option value="simple-compound">Good - Sub-meshes</option>
<option value="static-mesh">Exact - All polygons (non-dynamic only)</option>
</select>
</div>
<div class="model-group model-section zone-section property url ">
<label for="property-compound-shape-url">Compound shape URL</label>
<input type="text" id="property-compound-shape-url">
</div>
<hr class="model-group model-section" />
<div class="model-group model-section property url ">
<label for="property-model-animation-url">Animation URL</label>
<input type="text" id="property-model-animation-url">
</div>
<div class="model-group model-section two-column">
<div class="column">
<div class="property checkbox">
<input type="checkbox" id="property-model-animation-playing">
<label for="property-model-animation-playing">Animation playing</label>
</div>
<div class="property checkbox indent">
<input type="checkbox" id="property-model-animation-loop">
<label for="property-model-animation-loop">Animation loop</label>
</div>
<div class="property checkbox indent">
<input type="checkbox" id="property-model-animation-hold">
<label for="property-model-animation-hold">Animation hold</label>
</div>
<div id="animation-fps" class="property number">
<label>Animation FPS</label>
<input type="number" id="property-model-animation-fps">
</div>
</div>
<div class="column">
<div class="property number">
<label>Animation frame</label>
<input type="number" id="property-model-animation-frame">
</div>
<div class="property number">
<label>First frame</label>
<input type="number" id="property-model-animation-first-frame">
</div>
<div class="property number">
<label>Last frame</label>
<input type="number" id="property-model-animation-last-frame">
</div>
</div>
</div>
<hr class="model-group model-section" />
<div class="model-group model-section property textarea">
<label for="property-model-textures">Textures</label>
<textarea id="property-model-textures"></textarea>
</div>
<div class="model-group model-section property textarea">
<label for="property-model-original-textures">Original textures</label>
<textarea id="property-model-original-textures" readonly></textarea>
</div>
<div class="section-header text-group text-section">
<label>Text</label><span>M</span>
</div>
<div class="text-group text-section property text">
<label for="property-text-text">Text content</label>
<input type="text" id="property-text-text">
</div>
<div class="text-group text-section property checkbox">
<input type="checkbox" id="property-text-face-camera">
<label for="property-text-face-camera">&nbsp;Face Camera</label>
</div>
<div class="text-group text-section property number">
<label>Line height <span class="unit">m</span></label>
<input type="number" id="property-text-line-height" min="0" step="0.005">
</div>
<div class="text-group text-section property rgb">
<div class="color-picker" id="property-text-text-color"></div>
<label>Text color</label>
<div class="tuple">
<div><input type="number" class="red" id="property-text-text-color-red"><label for="property-text-text-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-text-text-color-green"><label for="property-text-text-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-text-text-color-blue"><label for="property-text-text-color-blue">Blue:</label></div>
</div>
</div>
<div class="text-group text-section property rgb">
<div class="color-picker" id="property-text-background-color"></div>
<label>Background color</label>
<div class="tuple">
<div><input type="number" class="red" id="property-text-background-color-red"><label for="roperty-text-background-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-text-background-color-green"><label for="property-text-background-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-text-background-color-blue"><label for="property-text-background-color-blue">Blue:</label></div>
</div>
</div>
<div class="section-header zone-group zone-section">
<label>Zone</label><span>M</span>
</div>
<div class="zone-group zone-section property checkbox">
<input type="checkbox" id="property-zone-stage-sun-model-enabled">
<label for="property-zone-stage-sun-model-enabled">Enable stage sun model</label>
</div>
<div class="zone-group zone-section property checkbox">
<input type="checkbox" id="property-zone-flying-allowed">
<label for="property-zone-flying-allowed">Flying allowed</label>
</div>
<div class="zone-group zone-section property checkbox">
<input type="checkbox" id="property-zone-ghosting-allowed">
<label for="property-zone-ghosting-allowed">Ghosting allowed</label>
</div>
<div class="sub-section-header zone-group zone-section keylight-section">
<label>Key Light</label>
</div>
<div class="zone-section keylight-section zone-group property rgb">
<div class="color-picker" id="property-zone-key-light-color"></div>
<label>Key light color</label>
<div class="tuple">
<div><input type="number" class="red" id="property-zone-key-light-color-red" min="0" max="255" step="1"><label for="property-zone-key-light-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-zone-key-light-color-green" min="0" max="255" step="1"><label for="property-zone-key-light-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-zone-key-light-color-blue" min="0" max="255" step="1"><label for="property-zone-key-light-color-blue">Blue:</label></div>
</div>
</div>
<div class="zone-section keylight-section zone-group property number">
<label>Light intensity</label>
<input type="number" id="property-zone-key-intensity" min="0" max="10" step="0.1">
</div>
<div class="zone-group zone-section keylight-section property gen">
<div class="tuple">
<div><label>Light altitude <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-x"></div>
<div><label>Light azimuth <span class="unit">deg</span></label><input type="number" id="property-zone-key-light-direction-y"></div>
<div></div>
</div>
</div>
<div class="zone-group zone-section keylight-section property number">
<label>Ambient intensity</label>
<input type="number" id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
</div>
<div class="zone-group zone-section keylight-section property url ">
<label for="property-zone-key-ambient-url">Ambient URL</label>
<input type="text" id="property-zone-key-ambient-url">
</div>
<div class="sub-section-header zone-group zone-section stage-section">
<label>Stage</label>
</div>
<div class="zone-group zone-section stage-section property gen">
<div class="tuple">
<div><label>Latitude <span class="unit">deg</span></label><input type="number" id="property-zone-stage-latitude" min="-90" max="90" step="1"></div>
<div><label>Longitude <span class="unit">deg</span></label><input type="number" id="property-zone-stage-longitude" min="-180" max="180" step="1"></div>
<div><label>Altitude <span class="unit">m</span></label><input type="number" id="property-zone-stage-altitude" step="1"></div>
</div>
</div>
<div class="zone-group zone-section stage-section property checkbox">
<input type="checkbox" id="property-zone-stage-automatic-hour-day">
<label for="property-zone-stage-automatic-hour-day">Match stage hour and day to location</label>
</div>
<div class="zone-group zone-section stage-section property gen">
<div class="tuple">
<div><label>Day of year</label><input type="number" id="property-zone-stage-day" min="0" max="365" step="1"></div>
<div><label>Hour</label><input type="number" id="property-zone-stage-hour" min="0" max="24" step="0.5"></div>
<div></div>
</div>
</div>
<div class="sub-section-header zone-group zone-section background-section">
<label>Background</label>
</div>
<div class="zone-group zone-section background-section property dropdown">
<label>Background mode</label>
<select name="SelectBackgroundMode" id="property-zone-background-mode">
<option value="inherit">Nothing</option>
<option value="skybox">Skybox</option>
</select>
</div>
<div class="sub-section-header zone-group zone-section skybox-section">
<label>Skybox</label>
</div>
<div class="zone-group zone-section skybox-section property rgb">
<div class="color-picker" id="property-zone-skybox-color"></div>
<label>Skybox color</label>
<div class="tuple">
<div><input type="number" class="red" id="property-zone-skybox-color-red"><label for="property-zone-skybox-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-zone-skybox-color-green"><label for="property-zone-skybox-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-zone-skybox-color-blue"><label for="property-zone-skybox-color-blue">Blue:</label></div>
</div>
</div>
<div class="zone-group zone-section skybox-section property url ">
<label for="property-zone-skybox-url">Skybox URL</label>
<input type="text" id="property-zone-skybox-url">
</div>
<div class="section-header web-group web-section">
<label>Web</label><span>M</span>
</div>
<div class="web-group web-section property url ">
<label for="property-web-source-url">Source URL</label>
<input type="text" id="property-web-source-url">
</div>
<div class="web-group web-section property dpi ">
<label for="property-web-dpi">Resolution (DPI)</label>
<input type="number" id="property-web-dpi">
</div>
<div class="section-header light-group light-section">
<label>Light</label><span>M</span>
</div>
<div class="light-group light-section property rgb">
<div class="color-picker" id="property-light-color"></div>
<label>Light color</label>
<div class="tuple">
<div><input type="number" class="red" id="property-light-color-red"><label for="property-light-color-red">Red:</label></div>
<div><input type="number" class="green" id="property-light-color-green"><label for="property-light-color-green">Green:</label></div>
<div><input type="number" class="blue" id="property-light-color-blue"><label for="property-light-color-blue">Blue:</label></div>
</div>
</div>
<div class="light-group light-section property gen">
<div class="tuple">
<div><label>Intensity</label><input type="number" id="property-light-intensity" min="0" step="0.1"></div>
<div><label>Fall-off radius <span class="unit">m</span></label><input type="number" id="property-light-falloff-radius" min="0" step="0.1"></div>
<div></div>
</div>
</div>
<div class="light-group light-section property checkbox">
<input type="checkbox" id="property-light-spot-light">
<label for="property-light-spot-light">Spotlight</label>
</div>
<div class="light-group light-section property gen">
<div class="tuple">
<div><label>Spotlight exponent</label><input type="number" id="property-light-exponent" step="0.01"></div>
<div><label>Spotlight cut-off</label><input type="number" id="property-light-cutoff" step="0.01"></div>
<div></div>
</div>
</div>
</div>
</body>
</html>