Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 07:51:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix grid tool styling

Browse source
This commit is contained in:
Ryan Huffman 2018-11-19 14:07:24 -08:00
parent 7694aa8e66
commit 007396346c
2 changed files with 33 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
scripts/system/html/gridControls.html
View file

@ -19,47 +19,52 @@
<script type="text/javascript" src="js/gridControls.js"></script> <script type="text/javascript" src="js/gridControls.js"></script>
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>
<div id="grid-section"> <div id="grid-section" class="section">
<div class="section-header"> <div class="property container">
<label>Editing Grid</label>
</div>
<div class="property checkbox">
<input type='checkbox' id="horiz-grid-visible">
<label for="horiz-grid-visible">Visible</label> <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>
<div class="property checkbox"> <div class="property container">
<input type="checkbox" id="snap-to-grid">
<label for="snap-to-grid">Snap entities to grid</label> <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>
<div class="property"> <div class="property container">
<label for="major-spacing">Major grid size <span class="unit">m</span></label>
<div class="number"> <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" /> <input type="number" id="major-spacing" min="1" step="1" />
</div> </div>
</div>
<div class="property container">
<label for="minor-spacing">Minor grid size <span class="unit">m</span></label>
<div class="number"> <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" /> <input type="number" id="minor-spacing" min="0.2" step="0.2" />
</div> </div>
</div> </div>
<div class="property number"> <div class="property container">
<label for="horiz-y">Position (Y axis) <span class="unit">m</span></label> <label for="horiz-y">Position (Y axis) <span class="unit">m</span></label>
<input type="number" id="horiz-y" step="0.1" /> <div style="width: 100%">
</div> <input type="number" id="horiz-y" step="0.1" />
<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> </div>
<div class="property"> <div class="property container">
<span> <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-selection" value="Align To Selection">
<input type="button" id="move-to-avatar" value="Align To Avatar"> <input type="button" id="move-to-avatar" value="Align To Avatar">
</span> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

24
scripts/system/html/js/gridControls.js
View file

@ -83,44 +83,26 @@ function loaded() {
var gridColor = { red: 255, green: 255, blue: 255 }; var gridColor = { red: 255, green: 255, blue: 255 };
var elColor = document.getElementById("grid-color"); 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 + ")"; 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) { var colorPickFunction = function (red, green, blue) {
elColorRed.value = red;
elColorGreen.value = green;
elColorBlue.value = blue;
gridColor = { red: red, green: green, blue: blue }; gridColor = { red: red, green: green, blue: blue };
emitUpdate(); emitUpdate();
}; };
elColorRed.addEventListener('change', colorChangeFunction);
elColorGreen.addEventListener('change', colorChangeFunction);
elColorBlue.addEventListener('change', colorChangeFunction);
$('#grid-color').colpick({ $('#grid-color').colpick({
colorScheme: 'dark', colorScheme: 'dark',
layout: 'hex', layout: 'rgbhex',
color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue }, color: { r: gridColor.red, g: gridColor.green, b: gridColor.blue },
submit: false,
onShow: function (colpick) { onShow: function (colpick) {
$('#grid-color').attr('active', 'true'); $('#grid-color').attr('active', 'true');
}, },
onHide: function (colpick) { onHide: function (colpick) {
$('#grid-color').attr('active', 'false'); $('#grid-color').attr('active', 'false');
}, },
onSubmit: function (hsb, hex, rgb, el) { onChange: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex); $(el).css('background-color', '#' + hex);
$(el).colpickHide();
colorPickFunction(rgb.r, rgb.g, rgb.b); colorPickFunction(rgb.r, rgb.g, rgb.b);
} }
}); });