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 f17903d
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 73 deletions.
52 changes: 20 additions & 32 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
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
67 changes: 47 additions & 20 deletions Source/Widgets/CesiumInspector/Cesium3DTilesInspectorViewModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -33,19 +24,10 @@ define([
defined,
defineProperties,
destroyObject,
EasingFunction,
HorizontalOrigin,
knockout,
LabelCollection,
Math,
Matrix3,
Matrix4,
Transforms,
PerformanceDisplay,
Quaternion,
ScreenSpaceEventHandler,
ScreenSpaceEventType,
VerticalOrigin,
createCommand) {
'use strict';

Expand Down Expand Up @@ -99,7 +81,7 @@ define([
});

this.highlightColor = new Color(1.0, 1.0, 0.0, 0.4);

this._style = undefined;
this._subscriptions = {};
var tilesetOptions = {
/**
Expand Down Expand Up @@ -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;
}
}
}
}
}
};

Expand Down Expand Up @@ -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() {

});
}
}
});

Expand Down Expand Up @@ -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 = '';
}
}
};

/**
Expand Down
12 changes: 12 additions & 0 deletions Source/Widgets/CesiumInspector/CesiumInspector.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit f17903d

Please sign in to comment.