Skip to content

Commit 2358ba7

Browse files
austinEngaustinEng
committed
simple style editor
1 parent ec6881c commit 2358ba7

File tree

4 files changed

+97
-267
lines changed

4 files changed

+97
-267
lines changed

‎Apps/Sandcastle/gallery/3D Tiles.html

Lines changed: 20 additions & 226 deletions
Original file line numberDiff line numberDiff line change
@@ -39,44 +39,12 @@
3939
var scene = viewer.scene;
4040
scene.fog.enabled = false;
4141

42-
var tileStyle = new Cesium.Cesium3DTileStyle({
43-
color: {
44-
conditions: [
45-
["${Height} >= 83", "color('purple', 0.5)"],
46-
["${Height} >= 80", "color('red')"],
47-
["${Height} >= 70", "color('orange')"],
48-
["${Height} >= 12", "color('yellow')"],
49-
["${Height} >= 7", "color('lime')"],
50-
["${Height} >= 1", "color('cyan')"],
51-
["true", "color('blue')"]
52-
]
53-
},
54-
meta: {
55-
description: "'Building id ${id} has height ${Height}.'"
56-
}
57-
});
58-
5942
//var styleElements = [];
6043
//var numberofColors = 6;
6144
//var currentPropertyName = 'Height';
6245
var annotations = scene.primitives.add(new Cesium.LabelCollection());
6346

6447
var tileset;
65-
var tilesets = {
66-
'Tileset': '../../../Specs/Data/Cesium3DTiles/Tilesets/Tileset/',
67-
'Translucent': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedTranslucent/',
68-
'Translucent/Opaque': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedTranslucentOpaqueMix/',
69-
'Multi-color': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedColors/',
70-
'Request Volume': '../../../Specs/Data/Cesium3DTiles/Tilesets/TilesetWithViewerRequestVolume/',
71-
'Batched': '../../../Specs/Data/Cesium3DTiles/Batched/BatchedWithBatchTable/',
72-
'Instanced': '../../../Specs/Data/Cesium3DTiles/Instanced/InstancedWithBatchTable/',
73-
'Instanced/Orientation': '../../../Specs/Data/Cesium3DTiles/Instanced/InstancedOrientationWithBatchTable/',
74-
'Composite': '../../../Specs/Data/Cesium3DTiles/Composite/Composite/',
75-
'PointCloud': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudRGB/',
76-
'PointCloudConstantColor': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudConstantColor/',
77-
'PointCloudNormals': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudQuantizedOctEncoded/',
78-
'PointCloudBatched': '../../../Specs/Data/Cesium3DTiles/PointCloud/PointCloudBatched/'
79-
};
8048

8149
var viewModel = {
8250
tilesets: [
@@ -163,6 +131,26 @@
163131
var boundingSphere = tileset.boundingSphere;
164132
viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
165133
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
134+
135+
var properties = tileset.properties;
136+
if (Cesium.defined(properties) && Cesium.defined(properties.Height)) {
137+
tileset.style = new Cesium.Cesium3DTileStyle({
138+
color: {
139+
conditions: [
140+
["${Height} >= 83", "color('purple', 0.5)"],
141+
["${Height} >= 80", "color('red')"],
142+
["${Height} >= 70", "color('orange')"],
143+
["${Height} >= 12", "color('yellow')"],
144+
["${Height} >= 7", "color('lime')"],
145+
["${Height} >= 1", "color('cyan')"],
146+
["true", "color('blue')"]
147+
]
148+
},
149+
meta: {
150+
description: "'Building id ${id} has height ${Height}.'"
151+
}
152+
});
153+
}
166154
});
167155
});
168156

@@ -276,201 +264,7 @@
276264
});
277265
}
278266
}
279-
/*
280-
function createStylingFunctions(tileset) {
281-
// Styling ////////////////////////////////////////////////////////////////////
282-
283-
function getRandomColor() {
284-
var color = Cesium.Color.fromRandom();
285-
color.alpha = 1.0;
286-
return color.toCssColorString();
287-
}
288-
289-
function styleFunction(name) {
290-
var conditions = [];
291-
var intervalSize = Math.floor(100/numberofColors);
292-
for (var i = numberofColors; i >= 0; --i) {
293-
var cond = '${' + name + '} > ' + (i * intervalSize);
294-
conditions.push([cond, getRandomColor()]);
295-
}
296-
conditions.push(['true', getRandomColor()]);
297-
298-
tileset.style = new Cesium.Cesium3DTileStyle({
299-
color : {
300-
conditions : conditions
301-
},
302-
show : '${' + name + '} >= 0'
303-
});
304-
305-
currentPropertyName = name;
306-
}
307-
308-
function getStyleFunction(name) {
309-
return function() {
310-
styleFunction(name);
311-
};
312-
}
313-
314-
function addStyleUI() {
315-
var button;
316-
317-
var properties = tileset.properties;
318-
if (Cesium.defined(properties)) {
319-
for (var name in properties) {
320-
// Include all properties except longitude and latitude
321-
if (properties.hasOwnProperty(name) && (name !== 'Longitude') && (name !== 'Latitude')) {
322-
button = Sandcastle.addToolbarButton('Style with ' + name, getStyleFunction(name));
323-
styleElements.push(button);
324-
}
325-
}
326-
}
327-
328-
button = Sandcastle.addToolbarButton('Custom style', function() {
329-
var style = new Cesium.Cesium3DTileStyle();
330-
style.show = {
331-
evaluate : function(frameState, feature) {
332-
tileset.makeStyleDirty(); // Force the style to be constantly evaluated
333-
return Cesium.Math.nextRandomNumber() > 0.5;
334-
}
335-
};
336-
style.color = {
337-
evaluateColor : function(frameState, feature, result) {
338-
tileset.makeStyleDirty(); // Force the style to be constantly evaluated
339-
return Cesium.Color.fromRandom(undefined, result);
340-
}
341-
};
342-
tileset.style = style;
343-
});
344-
styleElements.push(button);
345-
346-
button = Sandcastle.addToolbarButton('Remove style', function() {
347-
tileset.style = undefined;
348-
});
349-
styleElements.push(button);
350-
351-
function setColorBlendMode(colorBlendMode) {
352-
return function() {
353-
tileset.colorBlendMode = colorBlendMode;
354-
};
355-
}
356-
357-
var menu = Sandcastle.addToolbarMenu([{
358-
text : 'Color Blend Mode'
359-
}, {
360-
text : 'Highlight',
361-
onselect : setColorBlendMode(Cesium.Cesium3DTileColorBlendMode.HIGHLIGHT)
362-
}, {
363-
text : 'Replace',
364-
onselect : setColorBlendMode(Cesium.Cesium3DTileColorBlendMode.REPLACE)
365-
}, {
366-
text : 'Mix',
367-
onselect : setColorBlendMode(Cesium.Cesium3DTileColorBlendMode.MIX)
368-
}]);
369-
styleElements.push(menu);
370-
371-
button = Sandcastle.addToolbarButton('colors++', function() {
372-
++numberofColors;
373-
styleFunction(currentPropertyName);
374-
});
375-
styleElements.push(button);
376-
377-
button = Sandcastle.addToolbarButton('colors--', function() {
378-
numberofColors = Math.max(numberofColors - 1, 1);
379-
styleFunction(currentPropertyName);
380-
});
381-
styleElements.push(button);
382-
383-
var leftOperand = 0;
384-
var rightOperand = 0;
385-
var op = '==';
386-
387-
// Left operand (properties and literals)
388-
389-
function getLeftOperandFunction(name) {
390-
return function() {
391-
leftOperand = name;
392-
updateExpression();
393-
};
394-
}
395-
addOperands('Expression left operand', getLeftOperandFunction);
396-
397-
// Operator
398-
399-
var ops = ['<', '<=', '>', '>=', '==', '!='];
400-
var operators = [{
401-
text : 'Operator',
402-
onselect : function() {
403-
}
404-
}];
405-
406-
function getOperatorFunction(operator) {
407-
return function() {
408-
op = operator;
409-
updateExpression();
410-
};
411-
}
412-
413-
for (var i = 0; i < ops.length; ++i) {
414-
operators.push({
415-
text : ops[i],
416-
onselect : getOperatorFunction(ops[i])
417-
});
418-
}
419-
420-
menu = Sandcastle.addToolbarMenu(operators);
421-
styleElements.push(menu);
422-
423-
// Right operand
424267

425-
function getRightOperandFunction(operand) {
426-
return function() {
427-
rightOperand = operand;
428-
updateExpression();
429-
};
430-
}
431-
addOperands('Right operand', getRightOperandFunction);
432-
433-
function updateExpression() {
434-
var exp = '' + leftOperand + op + rightOperand;
435-
tileset.style = new Cesium.Cesium3DTileStyle({ show : exp });
436-
}
437-
}
438-
439-
function addOperands(text, getOperandFunction) {
440-
var expressionOperands = [{
441-
text : text,
442-
onselect : function() {
443-
}
444-
}];
445-
446-
var properties = tileset.properties;
447-
for (var name in properties) {
448-
if (properties.hasOwnProperty(name)) {
449-
var property = '${' + name + '}';
450-
expressionOperands.push({
451-
text : property,
452-
onselect : getOperandFunction(property)
453-
});
454-
}
455-
}
456-
457-
var oprs = [1, 10, 50, 100];
458-
for (var j = 0; j < oprs.length; ++j) {
459-
expressionOperands.push({
460-
text : oprs[j],
461-
onselect : getOperandFunction(oprs[j])
462-
});
463-
}
464-
465-
var menu = Sandcastle.addToolbarMenu(expressionOperands);
466-
styleElements.push(menu);
467-
}
468-
469-
// End of Styling /////////////////////////////////////////////////////////////
470-
471-
return addStyleUI;
472-
}
473-
*/
474268
//Sandcastle_End
475269
Sandcastle.finishedLoading();
476270
}

‎Source/Widgets/CesiumInspector/Cesium3DTilesInspector.js

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ define([
2626
* @param {Element|String} container The DOM element or ID that will contain the widget.
2727
* @param {Scene} scene the Scene instance to use.
2828
*
29-
* @exception {DeveloperError} container is requred.
29+
* @exception {DeveloperError} container is required.
3030
* @exception {DeveloperError} scene is required.
3131
*/
3232
function Cesium3DTilesInspector(container, scene) {
3333
//>includeStart('debug', pragmas.debug);
3434
Check.defined(container, 'container');
3535
Check.typeOf.object(scene, 'scene');
36+
//>>includeEnd('debug');
3637

3738
container = getElement(container);
3839

@@ -67,6 +68,7 @@ define([
6768
displayVisible: false,
6869
updateVisible: false,
6970
loggingVisible: false,
71+
styleVisible: false,
7072
toggleInspector: function() {
7173
that._inspectorModel.inspectorVisible = !that._inspectorModel.inspectorVisible;
7274
},
@@ -81,15 +83,18 @@ define([
8183
},
8284
toggleLogging: function() {
8385
that._inspectorModel.loggingVisible = !that._inspectorModel.loggingVisible;
86+
},
87+
toggleStyle: function() {
88+
that._inspectorModel.styleVisible = !that._inspectorModel.styleVisible;
8489
}
8590
};
8691

87-
knockout.track(this._inspectorModel, ['inspectorVisible', 'tilesetVisible', 'displayVisible', 'updateVisible', 'loggingVisible']);
92+
knockout.track(this._inspectorModel, ['inspectorVisible', 'tilesetVisible', 'displayVisible', 'updateVisible', 'loggingVisible', 'styleVisible']);
8893

8994
var element = document.createElement('div');
9095
this._element = element;
9196
var text = document.createElement('div');
92-
text.textContent = 'Cesium Inspector';
97+
text.textContent = '3D Tiles Inspector';
9398
text.className = 'cesium-cesiumInspector-button';
9499
text.setAttribute('data-bind', 'click: toggleInspector');
95100
element.appendChild(text);
@@ -101,39 +106,25 @@ define([
101106
var displayPanel = makeSection('Display', 'displayVisible', 'toggleDisplay');
102107
var updatePanel = makeSection('Update', 'updateVisible', 'toggleUpdate');
103108
var loggingPanel = makeSection('Logging', 'loggingVisible', 'toggleLogging');
109+
var stylePanel = makeSection('Style', 'styleVisible', 'toggleStyle');
104110

105111
// first add and bind all the toggleable panels
106112
element.appendChild(tilesetPanel);
107113
element.appendChild(displayPanel);
108114
element.appendChild(updatePanel);
109115
element.appendChild(loggingPanel);
116+
element.appendChild(stylePanel);
110117
knockout.applyBindings(this._inspectorModel, element);
111118

112-
// now add and bind just the tileset selection option
113-
// var tilesets = document.createElement('select');
114-
// tilesets.setAttribute('data-bind', 'options: _tilesetOptions, ' +
115-
// 'optionsText: "name", ' +
116-
// 'value: _selectedTileset, ' +
117-
// 'optionsCaption: "Choose a Tileset..."');
118-
// tilesets.className = 'cesium-cesiumInspector-select';
119-
// element.insertBefore(tilesets, tilesetPanel);
120-
// knockout.applyBindings(viewModel, tilesets);
121-
122119
// build and bind each panel separately
123120
var tilesetURL = document.createElement('div');
124121
tilesetURL.setAttribute('data-bind', 'html: tilesetURL');
125122
tilesetURL.setAttribute('style', 'word-break: break-all;');
126123
tilesetPanel.contents.appendChild(tilesetURL);
124+
tilesetPanel.contents.appendChild(makeButton('pickTileset', 'Pick Tileset'));
127125
tilesetPanel.contents.appendChild(makeButton('trimTilesCache', 'Trim Tiles Cache'));
126+
// tilesetPanel.contents.appendChild(makeCheckbox('editStyles', 'Edit Styles'));
128127
tilesetPanel.contents.appendChild(makeCheckbox('picking', 'Enable Picking'));
129-
// var pickPanelWrapper = document.createElement('div');
130-
// pickPanelWrapper.setAttribute('data-bind', 'css: {"cesium-cesiumInspector-show" : picking, "cesium-cesiumInspector-hide" : !picking}');
131-
// var pickPanel = makeSection('Picking');
132-
// pickPanel.contents.appendChild(makeCheckbox('annotatePicked', 'Annotate Features', 'picking'));
133-
// pickPanel.contents.appendChild(makeCheckbox('zoomPicked', 'Fly to Features', 'picking'));
134-
// pickPanel.contents.appendChild(makeCheckbox('hidePicked', 'Hide Features', 'picking'));
135-
// pickPanelWrapper.append(pickPanel);
136-
// tilesetPanel.contents.appendChild(pickPanelWrapper);
137128
knockout.applyBindings(viewModel, tilesetPanel.contents);
138129

139130

@@ -173,6 +164,12 @@ define([
173164
pickStats.setAttribute('style', 'font-size: 11px');
174165
loggingPanel.contents.appendChild(pickStats);
175166
knockout.applyBindings(viewModel, loggingPanel.contents);
167+
168+
var styleEditor = document.createElement('textarea');
169+
styleEditor.setAttribute('data-bind', 'value: styleString, valueUpdate: "keyup"');
170+
styleEditor.className = 'cesium-cesiumInspector-styleEditor';
171+
stylePanel.contents.appendChild(styleEditor);
172+
knockout.applyBindings(viewModel, stylePanel.contents);
176173
}
177174

178175
defineProperties(Cesium3DTilesInspector.prototype, {

0 commit comments

Comments
 (0)