Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-10 01:24:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Embeds colpick color picker in dat.GUI for particle explorer.

Browse source 
Cleans up eslint for particleExplorer.js.
This commit is contained in:
Andrew Lowry 2017-04-24 13:33:43 -04:00
parent aea89824c5
commit 6a218eaca9
3 changed files with 89 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
interface/resources/qml/hifi/tablet/EditTabView.qml
View file

@ -65,7 +65,7 @@ TabView {
editRoot.sendToScript({
method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
});
editBasePage.index = 3
editTabView.currentIndex = 2
}
}

16
scripts/system/particle_explorer/particleExplorer.html
View file

@ -14,10 +14,13 @@
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="../html/css/colpick.css">
<script type="text/javascript" src="dat.gui.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="../html/js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="../html/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../html/js/colpick.js"></script>
<script type="text/javascript" src="particleExplorer.js"></script>
<script>
function loaded() {
@ -52,6 +55,19 @@ body{
white-space: pre-wrap; /* css-3 */
}
.color-box {
display: block;
width: 60%;
height: 21px;
margin-top: 4px;
float: left;
}
.color-box.highlight {
width: 13.5pt;
height: 13.5pt;
border: 1.5pt solid black;
}
::-webkit-input-placeholder {
text-align: center;

69
scripts/system/particle_explorer/particleExplorer.js
View file

@ -9,7 +9,8 @@
// Distributed under the Apache License, Version 2.0.
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
/*global window, alert, EventBridge, dat, listenForSettingsUpdates,createVec3Folder,createQuatFolder,writeVec3ToInterface,writeDataToInterface*/
/* global window, alert, EventBridge, dat, listenForSettingsUpdates, createVec3Folder, createQuatFolder, writeVec3ToInterface, writeDataToInterface,
$, document, _, openEventBridge */
var Settings = function () {
this.exportSettings = function () {
@ -26,7 +27,7 @@ var AUTO_UPDATE = false;
var UPDATE_ALL_FREQUENCY = 100;
var controllers = [];
var colorControllers = [];
var colpickKeys = [];
var folders = [];
var gui = null;
var settings = new Settings();
@ -74,7 +75,6 @@ var quatKeys = [];
var colorKeys = [];
window.onload = function () {
openEventBridge(function () {
var stringifiedData = JSON.stringify({
messageType: 'page_loaded'
@ -86,7 +86,7 @@ window.onload = function() {
listenForSettingsUpdates();
window.onresize = setGUIWidthToWindowWidth;
})
});
};
@ -105,6 +105,7 @@ function loadGUI() {
// presets for the GUI itself. a little confusing and import/export is mostly what we want to do at the moment.
// gui.remember(settings);
colpickKeys = [];
var keys = _.keys(settings);
_.each(keys, function(key) {
@ -196,26 +197,42 @@ function addFolders() {
function createColorPicker(key) {
var colorObject = settings[key];
var colorArray = convertColorObjectToArray(colorObject);
settings[key] = colorArray;
var controller = gui.addColor(settings, key);
controller.onChange(function(value) {
// Handle hex colors
if(_.isString(value) && value[0] === '#') {
const BASE_HEX = 16;
var colorRegExResult = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(value);
value = [
parseInt(colorRegExResult[1], BASE_HEX),
parseInt(colorRegExResult[2], BASE_HEX),
parseInt(colorRegExResult[3], BASE_HEX)
];
}
// Embed colpick's color picker into dat.GUI
var name = document.createElement('span');
name.className = 'property-name';
name.innerHTML = key;
var container = document.createElement('div');
container.appendChild(name);
var $colPickContainer = $('<div>', {
id: key.toString(),
class: "color-box",
style: { backgroundColor: "rgb(" + colorObject.red + "," + colorObject.green + "," + colorObject.blue + ")" }
});
container.appendChild($colPickContainer[0]);
var $li = $('<li>', { class: 'cr object color' });
$li.append(container);
gui.__ul.appendChild($li[0]);
gui.onResize();
$colPickContainer.colpick({
colorScheme: 'dark',
layout: 'hex',
color: { r: colorObject.red, g: colorObject.green, b: colorObject.blue },
onSubmit: function (hsb, hex, rgb, el) {
$(el).css('background-color', '#' + hex);
$(el).colpickHide();
var obj = {};
obj[key] = convertColorArrayToObject(value);
obj[key] = { red: rgb.r, green: rgb.g, blue: rgb.b };
writeVec3ToInterface(obj);
}
});
return;
colpickKeys.push(key);
}
function createVec3Folder(category) {
@ -389,6 +406,14 @@ function manuallyUpdateDisplay() {
for (i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
// Update color pickers
for (i in colpickKeys) {
var color = settings[colpickKeys[i]];
var $object = $('#' + colpickKeys[i]);
$object.css('background-color', "rgb(" + color.red + "," + color.green + "," + color.blue + ")");
$object.colpickSetColor({ r: color.red, g: color.green, b: color.blue }, true);
}
}
function setGUIWidthToWindowWidth() {
@ -469,9 +494,9 @@ function showPreselectedPrompt() {
elem.appendChild(buttonnode);
buttonnode.onclick = function() {
console.log("click")
console.log("click");
elem.innerHTML = "";
}
};
// window.alert("Ctrl-C to copy, then Enter.", prepareSettingsForExport());
}