mirror of
https://github.com/overte-org/overte.git
synced 2025-04-26 16:56:42 +02:00
203 lines
8.7 KiB
HTML
203 lines
8.7 KiB
HTML
<!--
|
|
// gridControls.html
|
|
//
|
|
// Created by Ryan Huffman on 6 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>
|
|
<link rel="stylesheet" type="text/css" href="edit-style.css">
|
|
<link rel="stylesheet" type="text/css" href="css/colpick.css">
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
<script src="colpick.js"></script>
|
|
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
|
<script type="text/javascript" src="eventBridgeLoader.js"></script>
|
|
<script type="text/javascript" src="spinButtons.js"></script>
|
|
<script>
|
|
function loaded() {
|
|
openEventBridge(function() {
|
|
elPosY = document.getElementById("horiz-y");
|
|
elMinorSpacing = document.getElementById("minor-spacing");
|
|
elMajorSpacing = document.getElementById("major-spacing");
|
|
elSnapToGrid = document.getElementById("snap-to-grid");
|
|
elHorizontalGridVisible = document.getElementById("horiz-grid-visible");
|
|
elMoveToSelection = document.getElementById("move-to-selection");
|
|
elMoveToAvatar = document.getElementById("move-to-avatar");
|
|
|
|
if (window.EventBridge !== undefined) {
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
|
data = JSON.parse(data);
|
|
|
|
if (data.origin) {
|
|
var origin = data.origin;
|
|
elPosY.value = origin.y;
|
|
}
|
|
|
|
if (data.minorGridEvery !== undefined) {
|
|
elMinorSpacing.value = data.minorGridEvery;
|
|
}
|
|
|
|
if (data.majorGridEvery !== undefined) {
|
|
elMajorSpacing.value = data.majorGridEvery;
|
|
}
|
|
|
|
if (data.gridColor) {
|
|
gridColor = data.gridColor;
|
|
}
|
|
|
|
if (data.snapToGrid !== undefined) {
|
|
elSnapToGrid.checked = data.snapToGrid == true;
|
|
}
|
|
|
|
if (data.visible !== undefined) {
|
|
elHorizontalGridVisible.checked = data.visible == true;
|
|
}
|
|
});
|
|
|
|
function emitUpdate() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "update",
|
|
origin: {
|
|
y: elPosY.value,
|
|
},
|
|
minorGridEvery: elMinorSpacing.value,
|
|
majorGridEvery: elMajorSpacing.value,
|
|
gridColor: gridColor,
|
|
snapToGrid: elSnapToGrid.checked,
|
|
visible: elHorizontalGridVisible.checked,
|
|
}));
|
|
}
|
|
|
|
}
|
|
|
|
elPosY.addEventListener("change", emitUpdate);
|
|
elMinorSpacing.addEventListener("change", emitUpdate);
|
|
elMajorSpacing.addEventListener("change", emitUpdate);
|
|
elSnapToGrid.addEventListener("change", emitUpdate);
|
|
elHorizontalGridVisible.addEventListener("change", emitUpdate);
|
|
|
|
elMoveToAvatar.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "moveToAvatar",
|
|
}));
|
|
});
|
|
elMoveToSelection.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "moveToSelection",
|
|
}));
|
|
});
|
|
|
|
var gridColor = { red: 255, green: 255, blue: 255 };
|
|
var elColor = document.getElementById("grid-color");
|
|
var elColorRed = document.getElementById("grid-color-red");
|
|
var elColorGreen = document.getElementById("grid-color-green");
|
|
var elColorBlue = document.getElementById("grid-color-blue");
|
|
elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
|
|
elColorRed.value = gridColor.red;
|
|
elColorGreen.value = gridColor.green;
|
|
elColorBlue.value = gridColor.blue;
|
|
|
|
var colorChangeFunction = function () {
|
|
gridColor = { red: elColorRed.value, green: elColorGreen.value, blue: elColorBlue.value };
|
|
elColor.style.backgroundColor = "rgb(" + gridColor.red + "," + gridColor.green + "," + gridColor.blue + ")";
|
|
emitUpdate();
|
|
};
|
|
|
|
var colorPickFunction = function (red, green, blue) {
|
|
elColorRed.value = red;
|
|
elColorGreen.value = green;
|
|
elColorBlue.value = blue;
|
|
gridColor = { red: red, green: green, blue: blue };
|
|
emitUpdate();
|
|
}
|
|
|
|
elColorRed.addEventListener('change', colorChangeFunction);
|
|
elColorGreen.addEventListener('change', colorChangeFunction);
|
|
elColorBlue.addEventListener('change', colorChangeFunction);
|
|
$('#grid-color').colpick({
|
|
colorScheme: 'dark',
|
|
layout: 'hex',
|
|
color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue },
|
|
onShow: function (colpick) {
|
|
$('#grid-color').attr('active', 'true');
|
|
},
|
|
onHide: function (colpick) {
|
|
$('#grid-color').attr('active', 'false');
|
|
},
|
|
onSubmit: function (hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#' + hex);
|
|
$(el).colpickHide();
|
|
colorPickFunction(rgb.r, rgb.g, rgb.b);
|
|
}
|
|
});
|
|
|
|
augmentSpinButtons();
|
|
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
|
|
});
|
|
|
|
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
|
|
document.addEventListener("contextmenu", function (event) {
|
|
event.preventDefault();
|
|
}, false);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload='loaded();'>
|
|
<div id="grid-section">
|
|
|
|
<div class="section-header">
|
|
<label>Editing Grid</label>
|
|
</div>
|
|
|
|
<div class="property checkbox">
|
|
<input type='checkbox' id="horiz-grid-visible">
|
|
<label for="horiz-grid-visible">Visible</label>
|
|
</div>
|
|
|
|
<div class="property checkbox">
|
|
<input type="checkbox" id="snap-to-grid">
|
|
<label for="snap-to-grid">Snap entities to grid</label>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="number">
|
|
<label for="major-spacing">Major grid size <span class="unit">m</span></label>
|
|
<input type="number" id="major-spacing" min="1" step="1" />
|
|
</div>
|
|
<div class="number">
|
|
<label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
|
|
<input type="number" id="minor-spacing" min="0.2" step="0.2" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property number">
|
|
<label for="horiz-y">Position (Y axis) <span class="unit">m</span></label>
|
|
<input type="number" id="horiz-y" step="0.1" />
|
|
</div>
|
|
|
|
<div class="property rgb">
|
|
<div id="grid-color" class="color-picker"></div>
|
|
<label>Grid line color</label>
|
|
<div class="tuple">
|
|
<div><input type="number" class="red" id="grid-color-red"><label for="grid-color-red">Red:</label></div>
|
|
<div><input type="number" class="green" id="grid-color-green"><label for="grid-color-green">Green:</label></div>
|
|
<div><input type="number" class="blue" id="grid-color-blue"><label for="grid-color-blue">Blue:</label></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span>
|
|
<input type="button" id="move-to-selection" value="Align To Selection">
|
|
<input type="button" id="move-to-avatar" value="Align To Avatar">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|