Skip to content

Commit

Permalink
simple style editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@austinEng
austinEng committed Jan 18, 2017
1 parent ec6881c commit 2358ba7
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 267 deletions.
246 changes: 20 additions & 226 deletions Apps/Sandcastle/gallery/3D Tiles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,44 +39,12 @@
var scene = viewer.scene;
scene.fog.enabled = false;

var tileStyle = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Height} >= 83", "color('purple', 0.5)"],
["${Height} >= 80", "color('red')"],
["${Height} >= 70", "color('orange')"],
["${Height} >= 12", "color('yellow')"],
["${Height} >= 7", "color('lime')"],
["${Height} >= 1", "color('cyan')"],
["true", "color('blue')"]
]
},
meta: {
description: "'Building id ${id} has height ${Height}.'"
}
});

//var styleElements = [];
//var numberofColors = 6;
//var currentPropertyName = 'Height';
var annotations = scene.primitives.add(new Cesium.LabelCollection());

var tileset;
var tilesets = {
'Tileset': '../../../Specs/Data/Cesium3DTiles/Tilesets/Tileset/',
'Translucent': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedTranslucent/',
'Translucent/Opaque': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedTranslucentOpaqueMix/',
'Multi-color': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedColors/',
'Request Volume': '../../../Specs/Data/Cesium3DTiles/Tilesets/TilesetWithViewerRequestVolume/',
'Batched': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedWithBatchTable/',
'Instanced': '../../../Specs/Data/Cesium3DTiles/Instanced/InstancedWithBatchTable/',
'Instanced/Orientation': '../../../Specs/Data/Cesium3DTiles/Instanced/InstancedOrientationWithBatchTable/',
'Composite': '../../../Specs/Data/Cesium3DTiles/Composite/Composite/',
'PointCloud': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudRGB/',
'PointCloudConstantColor': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudConstantColor/',
'PointCloudNormals': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudQuantizedOctEncoded/',
'PointCloudBatched': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudBatched/'
};

var viewModel = {
tilesets: [
Expand Down Expand Up @@ -163,6 +131,26 @@
var boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

var properties = tileset.properties;
if (Cesium.defined(properties) && Cesium.defined(properties.Height)) {
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${Height} >= 83", "color('purple', 0.5)"],
["${Height} >= 80", "color('red')"],
["${Height} >= 70", "color('orange')"],
["${Height} >= 12", "color('yellow')"],
["${Height} >= 7", "color('lime')"],
["${Height} >= 1", "color('cyan')"],
["true", "color('blue')"]
]
},
meta: {
description: "'Building id ${id} has height ${Height}.'"
}
});
}
});
});

Expand Down Expand Up @@ -276,201 +264,7 @@
});
}
}
/*
function createStylingFunctions(tileset) {
// Styling ////////////////////////////////////////////////////////////////////
function getRandomColor() {
var color = Cesium.Color.fromRandom();
color.alpha = 1.0;
return color.toCssColorString();
}
function styleFunction(name) {
var conditions = [];
var intervalSize = Math.floor(100/numberofColors);
for (var i = numberofColors; i >= 0; --i) {
var cond = '${' + name + '} > ' + (i * intervalSize);
conditions.push([cond, getRandomColor()]);
}
conditions.push(['true', getRandomColor()]);
tileset.style = new Cesium.Cesium3DTileStyle({
color : {
conditions : conditions
},
show : '${' + name + '} >= 0'
});
currentPropertyName = name;
}
function getStyleFunction(name) {
return function() {
styleFunction(name);
};
}
function addStyleUI() {
var button;
var properties = tileset.properties;
if (Cesium.defined(properties)) {
for (var name in properties) {
// Include all properties except longitude and latitude
if (properties.hasOwnProperty(name) && (name !== 'Longitude') && (name !== 'Latitude')) {
button = Sandcastle.addToolbarButton('Style with ' + name, getStyleFunction(name));
styleElements.push(button);
}
}
}
button = Sandcastle.addToolbarButton('Custom style', function() {
var style = new Cesium.Cesium3DTileStyle();
style.show = {
evaluate : function(frameState, feature) {
tileset.makeStyleDirty(); // Force the style to be constantly evaluated
return Cesium.Math.nextRandomNumber() > 0.5;
}
};
style.color = {
evaluateColor : function(frameState, feature, result) {
tileset.makeStyleDirty(); // Force the style to be constantly evaluated
return Cesium.Color.fromRandom(undefined, result);
}
};
tileset.style = style;
});
styleElements.push(button);
button = Sandcastle.addToolbarButton('Remove style', function() {
tileset.style = undefined;
});
styleElements.push(button);
function setColorBlendMode(colorBlendMode) {
return function() {
tileset.colorBlendMode = colorBlendMode;
};
}
var menu = Sandcastle.addToolbarMenu([{
text : 'Color Blend Mode'
}, {
text : 'Highlight',
onselect : setColorBlendMode(Cesium.Cesium3DTileColorBlendMode.HIGHLIGHT)
}, {
text : 'Replace',
onselect : setColorBlendMode(Cesium.Cesium3DTileColorBlendMode.REPLACE)
}, {
text : 'Mix',
onselect : setColorBlendMode(Cesium.Cesium3DTileColorBlendMode.MIX)
}]);
styleElements.push(menu);
button = Sandcastle.addToolbarButton('colors++', function() {
++numberofColors;
styleFunction(currentPropertyName);
});
styleElements.push(button);
button = Sandcastle.addToolbarButton('colors--', function() {
numberofColors = Math.max(numberofColors - 1, 1);
styleFunction(currentPropertyName);
});
styleElements.push(button);
var leftOperand = 0;
var rightOperand = 0;
var op = '==';
// Left operand (properties and literals)
function getLeftOperandFunction(name) {
return function() {
leftOperand = name;
updateExpression();
};
}
addOperands('Expression left operand', getLeftOperandFunction);
// Operator
var ops = ['<', '<=', '>', '>=', '==', '!='];
var operators = [{
text : 'Operator',
onselect : function() {
}
}];
function getOperatorFunction(operator) {
return function() {
op = operator;
updateExpression();
};
}
for (var i = 0; i < ops.length; ++i) {
operators.push({
text : ops[i],
onselect : getOperatorFunction(ops[i])
});
}
menu = Sandcastle.addToolbarMenu(operators);
styleElements.push(menu);
// Right operand

function getRightOperandFunction(operand) {
return function() {
rightOperand = operand;
updateExpression();
};
}
addOperands('Right operand', getRightOperandFunction);
function updateExpression() {
var exp = '' + leftOperand + op + rightOperand;
tileset.style = new Cesium.Cesium3DTileStyle({ show : exp });
}
}
function addOperands(text, getOperandFunction) {
var expressionOperands = [{
text : text,
onselect : function() {
}
}];
var properties = tileset.properties;
for (var name in properties) {
if (properties.hasOwnProperty(name)) {
var property = '${' + name + '}';
expressionOperands.push({
text : property,
onselect : getOperandFunction(property)
});
}
}
var oprs = [1, 10, 50, 100];
for (var j = 0; j < oprs.length; ++j) {
expressionOperands.push({
text : oprs[j],
onselect : getOperandFunction(oprs[j])
});
}
var menu = Sandcastle.addToolbarMenu(expressionOperands);
styleElements.push(menu);
}
// End of Styling /////////////////////////////////////////////////////////////
return addStyleUI;
}
*/
//Sandcastle_End
Sandcastle.finishedLoading();
}
Expand Down
39 changes: 18 additions & 21 deletions Source/Widgets/CesiumInspector/Cesium3DTilesInspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,14 @@ define([
* @param {Element|String} container The DOM element or ID that will contain the widget.
* @param {Scene} scene the Scene instance to use.
*
* @exception {DeveloperError} container is requred.
* @exception {DeveloperError} container is required.
* @exception {DeveloperError} scene is required.
*/
function Cesium3DTilesInspector(container, scene) {
//>includeStart('debug', pragmas.debug);
Check.defined(container, 'container');
Check.typeOf.object(scene, 'scene');
//>>includeEnd('debug');

container = getElement(container);

Expand Down Expand Up @@ -67,6 +68,7 @@ define([
displayVisible: false,
updateVisible: false,
loggingVisible: false,
styleVisible: false,
toggleInspector: function() {
that._inspectorModel.inspectorVisible = !that._inspectorModel.inspectorVisible;
},
Expand All @@ -81,15 +83,18 @@ define([
},
toggleLogging: function() {
that._inspectorModel.loggingVisible = !that._inspectorModel.loggingVisible;
},
toggleStyle: function() {
that._inspectorModel.styleVisible = !that._inspectorModel.styleVisible;
}
};

knockout.track(this._inspectorModel, ['inspectorVisible', 'tilesetVisible', 'displayVisible', 'updateVisible', 'loggingVisible']);
knockout.track(this._inspectorModel, ['inspectorVisible', 'tilesetVisible', 'displayVisible', 'updateVisible', 'loggingVisible', 'styleVisible']);

var element = document.createElement('div');
this._element = element;
var text = document.createElement('div');
text.textContent = 'Cesium Inspector';
text.textContent = '3D Tiles Inspector';
text.className = 'cesium-cesiumInspector-button';
text.setAttribute('data-bind', 'click: toggleInspector');
element.appendChild(text);
Expand All @@ -101,39 +106,25 @@ define([
var displayPanel = makeSection('Display', 'displayVisible', 'toggleDisplay');
var updatePanel = makeSection('Update', 'updateVisible', 'toggleUpdate');
var loggingPanel = makeSection('Logging', 'loggingVisible', 'toggleLogging');
var stylePanel = makeSection('Style', 'styleVisible', 'toggleStyle');

// first add and bind all the toggleable panels
element.appendChild(tilesetPanel);
element.appendChild(displayPanel);
element.appendChild(updatePanel);
element.appendChild(loggingPanel);
element.appendChild(stylePanel);
knockout.applyBindings(this._inspectorModel, element);

// now add and bind just the tileset selection option
// var tilesets = document.createElement('select');
// tilesets.setAttribute('data-bind', 'options: _tilesetOptions, ' +
// 'optionsText: "name", ' +
// 'value: _selectedTileset, ' +
// 'optionsCaption: "Choose a Tileset..."');
// tilesets.className = 'cesium-cesiumInspector-select';
// element.insertBefore(tilesets, tilesetPanel);
// knockout.applyBindings(viewModel, tilesets);

// build and bind each panel separately
var tilesetURL = document.createElement('div');
tilesetURL.setAttribute('data-bind', 'html: tilesetURL');
tilesetURL.setAttribute('style', 'word-break: break-all;');
tilesetPanel.contents.appendChild(tilesetURL);
tilesetPanel.contents.appendChild(makeButton('pickTileset', 'Pick Tileset'));
tilesetPanel.contents.appendChild(makeButton('trimTilesCache', 'Trim Tiles Cache'));
// tilesetPanel.contents.appendChild(makeCheckbox('editStyles', 'Edit Styles'));
tilesetPanel.contents.appendChild(makeCheckbox('picking', 'Enable Picking'));
// var pickPanelWrapper = document.createElement('div');
// pickPanelWrapper.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : picking, "cesium-cesiumInspector-hide" : !picking}');
// var pickPanel = makeSection('Picking');
// pickPanel.contents.appendChild(makeCheckbox('annotatePicked', 'Annotate Features', 'picking'));
// pickPanel.contents.appendChild(makeCheckbox('zoomPicked', 'Fly to Features', 'picking'));
// pickPanel.contents.appendChild(makeCheckbox('hidePicked', 'Hide Features', 'picking'));
// pickPanelWrapper.append(pickPanel);
// tilesetPanel.contents.appendChild(pickPanelWrapper);
knockout.applyBindings(viewModel, tilesetPanel.contents);


Expand Down Expand Up @@ -173,6 +164,12 @@ define([
pickStats.setAttribute('style', 'font-size: 11px');
loggingPanel.contents.appendChild(pickStats);
knockout.applyBindings(viewModel, loggingPanel.contents);

var styleEditor = document.createElement('textarea');
styleEditor.setAttribute('data-bind', 'value: styleString, valueUpdate: "keyup"');
styleEditor.className = 'cesium-cesiumInspector-styleEditor';
stylePanel.contents.appendChild(styleEditor);
knockout.applyBindings(viewModel, stylePanel.contents);
}

defineProperties(Cesium3DTilesInspector.prototype, {
Expand Down
Loading

0 comments on commit 2358ba7

Please sign in to comment.