<!--// 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>
<!--
// 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>