overte/scripts/system/html/gridControls.html
ksuprynowicz 30ff82c312
Update scripts/system/html/gridControls.html
Co-authored-by: Dale Glass <51060919+daleglass@users.noreply.github.com>
2022-07-17 12:30:21 +02:00

146 lines
7.5 KiB
HTML

<!--
// gridControls.html
//
// Created by Ryan Huffman on 6 Nov 2014
// Copyright 2014 High Fidelity, Inc.
// Copyright 2022 Overte e.V.
//
// 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>
<link rel="stylesheet" type="text/css" href="css/edit-style.css">
<link rel="stylesheet" type="text/css" href="css/colpick.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/utils.js"></script>
<script type="text/javascript" src="js/gridControls.js"></script>
</head>
<body onload='loaded();'>
<div id="mode-section" class="section">
<div class="property container">
<label for="create-app-mode">Create app mode </label>
<div class="property container">
<input name="create-app-mode" type="button" class="entity-list-menutitle" id="create-app-mode" value="Create app mode&#9662;" />
</div>
</div>
<div class="tools-select-menu" id="edit-mode-menu" >
<button class="menu-button" id="edit-mode-object" >
<div class = "menu-item">
<div class = "menu-item-caption">Object mode</div>
<div class = "menu-item-shortcut"></div>
</div>
</button>
<button class="menu-button" id="edit-mode-voxel" >
<div class = "menu-item">
<div class = "menu-item-caption">Voxel edit mode</div>
<div class = "menu-item-shortcut"></div>
</div>
</button>
</div>
</div>
<div id="voxels-section" class="section">
<h2>Voxel edit settings</h2>
<div class="property container">
<label for="voxel-edit-mode">Voxel edit mode </label>
<div class="property container">
<input name="voxel-edit-mode" type="button" class="entity-list-menutitle" id="voxel-edit-mode" value="Voxel edit mode&#9662;" />
</div>
<label for="voxel-sphere-size">&nbsp;&nbsp;Sphere/cube size <span class="unit">m</span></label>
<div class="number">
<input type="number" id="voxel-sphere-size" min="0.01" step="0.2" />
</div>
</div>
<div class="tools-select-menu" id="voxel-edit-mode-menu" >
<button class="menu-button" id="voxel-edit-mode-single" >
<div class = "menu-item">
<div class = "menu-item-caption">Single voxels</div>
<div class = "menu-item-shortcut"></div>
</div>
</button>
<button class="menu-button" id="voxel-edit-mode-sphere" >
<div class = "menu-item">
<div class = "menu-item-caption">Spheres</div>
<div class = "menu-item-shortcut"></div>
</div>
</button>
<button class="menu-button" id="voxel-edit-mode-cube" >
<div class = "menu-item">
<div class = "menu-item-caption">Cubes</div>
<div class = "menu-item-shortcut"></div>
</div>
</button>
</div>
<div class="property container">
<label for="voxel-remove">&nbsp;&nbsp;Remove voxels</label>
<div style="width: 100%">
<input type='checkbox' id="voxel-remove" style="width: 100%">
<label for="voxel-remove">&nbsp;</label>
</div>
<div class="property container">
<input name="voxel-help-button" type="button" class="entity-list-menutitle" id="voxel-help-button" value="Voxel edit help&#9662;" />
</div>
</div>
<div class="tools-help-popup" id="voxel-help-popup" >
<p>To edit voxels, Voxel Edit Mode needs to be selected.</p>
<p>Desktop mode:</p>
<p>Click the left mouse button to add a voxel. Click the middle mouse button to remove a voxel. Hold the mouse button and move the mouse to add or remove voxels in a single plane. The plane is determined by the direction in which you are looking when first voxel is added or removed (for example, look downwards to draw in horizontal plane).</p>
<p>VR mode:</p>
<p>Press the trigger to add a voxel. Press the trigger while holding grip to remove voxel. Hold the trigger and move controller to add/remove voxels in a single plane. Plane is determined by the direction in which the controller ray points when first voxel is added/removed (for example point downwards to draw in horizontal plane). Hold both grips and move your hands together or apart to change size of edit sphere.</p>
</div>
</div>
<div id="grid-section" class="section">
<h2>Grid settings</h2>
<div class="property container">
<label for="horiz-grid-visible">Visible</label>
<div style="width: 100%">
<input type='checkbox' id="horiz-grid-visible" style="width: 100%">
<label for="horiz-grid-visible">&nbsp;</label>
</div>
</div>
<div class="property container">
<label for="snap-to-grid">Snap entities to grid</label>
<div style="width: 100%">
<input type="checkbox" id="snap-to-grid">
<label for="snap-to-grid">&nbsp;</label>
</div>
</div>
<div class="property container">
<label for="major-spacing">Major grid size <span class="unit">m</span></label>
<div class="number">
<input type="number" id="major-spacing" min="1" step="1" />
</div>
</div>
<div class="property container">
<label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
<div class="number">
<input type="number" id="minor-spacing" min="0.2" step="0.2" />
</div>
</div>
<div class="property container">
<label for="horiz-y">Position (Y axis) <span class="unit">m</span></label>
<div style="width: 100%">
<input type="number" id="horiz-y" step="0.1" />
</div>
</div>
<div class="property container">
<label>Grid line color</label>
<div style="width: 100%">
<div id="grid-color" class="color-picker"></div>
</div>
</div>
<div class="property container">
<label>Move Grid</label>
<div style="width: 100%">
<input type="button" id="move-to-selection" value="Align To Selection">
<input type="button" id="move-to-avatar" value="Align To Avatar">
</div>
</div>
</div>
<div id="menuBackgroundOverlay" ></div>
</body>
</html>