diff --git a/Apps/Sandcastle/gallery/3D Tiles.html b/Apps/Sandcastle/gallery/3D Tiles.html
index 7a7a6907b305..23f932b6bce8 100644
--- a/Apps/Sandcastle/gallery/3D Tiles.html
+++ b/Apps/Sandcastle/gallery/3D Tiles.html
@@ -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: [
@@ -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}.'"
+ }
+ });
+ }
});
});
@@ -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();
}
diff --git a/Source/Widgets/CesiumInspector/Cesium3DTilesInspector.js b/Source/Widgets/CesiumInspector/Cesium3DTilesInspector.js
index 1f7a93912d40..6f93b93ca077 100644
--- a/Source/Widgets/CesiumInspector/Cesium3DTilesInspector.js
+++ b/Source/Widgets/CesiumInspector/Cesium3DTilesInspector.js
@@ -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);
@@ -67,6 +68,7 @@ define([
displayVisible: false,
updateVisible: false,
loggingVisible: false,
+ styleVisible: false,
toggleInspector: function() {
that._inspectorModel.inspectorVisible = !that._inspectorModel.inspectorVisible;
},
@@ -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);
@@ -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);
@@ -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, {
diff --git a/Source/Widgets/CesiumInspector/Cesium3DTilesInspectorViewModel.js b/Source/Widgets/CesiumInspector/Cesium3DTilesInspectorViewModel.js
index 58327e45bf72..bbf9616de40c 100644
--- a/Source/Widgets/CesiumInspector/Cesium3DTilesInspectorViewModel.js
+++ b/Source/Widgets/CesiumInspector/Cesium3DTilesInspectorViewModel.js
@@ -9,20 +9,11 @@ define([
'../../Core/defined',
'../../Core/defineProperties',
'../../Core/destroyObject',
- '../../Core/EasingFunction',
- '../../Scene/HorizontalOrigin',
'../../ThirdParty/knockout',
- '../../Scene/LabelCollection',
- '../../Core/Math',
- '../../Core/Matrix3',
- '../../Core/Matrix4',
- '../../Core/Transforms',
'../../Scene/PerformanceDisplay',
- '../../Core/Quaternion',
'../../Core/ScreenSpaceEventHandler',
'../../Core/ScreenSpaceEventType',
- '../../Scene/VerticalOrigin',
- '../createCommand',
+ '../createCommand'
], function(
Cartesian3,
Cartographic,
@@ -33,19 +24,10 @@ define([
defined,
defineProperties,
destroyObject,
- EasingFunction,
- HorizontalOrigin,
knockout,
- LabelCollection,
- Math,
- Matrix3,
- Matrix4,
- Transforms,
PerformanceDisplay,
- Quaternion,
ScreenSpaceEventHandler,
ScreenSpaceEventType,
- VerticalOrigin,
createCommand) {
'use strict';
@@ -99,7 +81,7 @@ define([
});
this.highlightColor = new Color(1.0, 1.0, 0.0, 0.4);
-
+ this._style = undefined;
this._subscriptions = {};
var tilesetOptions = {
/**
@@ -357,6 +339,27 @@ define([
*/
pickStatsText : {
default: ''
+ },
+ /**
+ * Gets or sets the JSON for the tileset style. This property is observable.
+ * @memberof Cesium3DTilesInspectorViewModel.prototype
+ *
+ * @type {String}
+ * @default undefined
+ */
+ styleString : {
+ default: undefined,
+ subscribe: function(val) {
+ if (defined(that._style)) {
+ if (val !== JSON.stringify(that._style.style)) {
+ if (defined(that._tileset)) {
+ var style = new Cesium3DTileStyle(JSON.parse(val));
+ that._tileset.style = style;
+ that._style = style;
+ }
+ }
+ }
+ }
}
};
@@ -475,6 +478,21 @@ define([
}
});
}
+ },
+
+ /**
+ * Gets the command to pick a tileset
+ * @memberof Cesium3DTilesInspectorViewModel.prototype
+ *
+ * @type {Command}
+ */
+ pickTileset: {
+ get: function() {
+ var that = this;
+ return createCommand(function() {
+
+ });
+ }
}
});
@@ -560,6 +578,15 @@ define([
if (this.performance) {
this._performanceDisplay.update();
}
+
+ if (defined(this._tileset) && this._style !== this._tileset.style) {
+ this._style = this._tileset.style;
+ if (defined(this._style)) {
+ this.styleString = JSON.stringify(this._style.style, null, ' ');
+ } else {
+ this.styleString = '';
+ }
+ }
};
/**
diff --git a/Source/Widgets/CesiumInspector/CesiumInspector.css b/Source/Widgets/CesiumInspector/CesiumInspector.css
index 4cd2441ecefb..3a06c22e4f66 100644
--- a/Source/Widgets/CesiumInspector/CesiumInspector.css
+++ b/Source/Widgets/CesiumInspector/CesiumInspector.css
@@ -194,3 +194,15 @@ input[type=range]:focus {
background: #ffffff;
cursor: pointer;
}
+
+.cesium-cesiumInspector-styleEditor {
+ position: fixed;
+ top: 30px;
+ left: 30px;
+ width: 300px;
+ height: 300px;
+}
+
+.cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor {
+ display: none;
+}