From a35a7c583d8ee187c6b842ef7c97f2515982524f Mon Sep 17 00:00:00 2001 From: Robert Taglang Date: Wed, 23 Mar 2016 11:24:07 -0400 Subject: [PATCH 1/4] Added graying out for UI options as in #3755 --- .../gallery/development/Shadows.html | 130 +++++++++++++----- 1 file changed, 99 insertions(+), 31 deletions(-) diff --git a/Apps/Sandcastle/gallery/development/Shadows.html b/Apps/Sandcastle/gallery/development/Shadows.html index cb7339fb7388..b82e8abf20fc 100644 --- a/Apps/Sandcastle/gallery/development/Shadows.html +++ b/Apps/Sandcastle/gallery/development/Shadows.html @@ -33,68 +33,72 @@
- + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + + + + +
Light HorizonLight Horizon - - + +
Light AngleLight Angle - - + +
Distance LimitDistance Limit - - + +
RadiusRadius - - + +
CascadesCascades
Light SourceLight Source
Texture SizeTexture Size
EnabledEnabled
Terrain CastTerrain Cast
Show debugShow debug
Freeze frameFreeze frame
Cascade colorsCascade colors
Fit near/farFit near/far
Soft shadows
@@ -114,13 +118,26 @@ freeze : false, cascadeColors : false, fitNearFar : true, + softShadows : false, cascadeOptions : [1, 4], cascades : 4, lightSourceOptions : ['Freeform', 'Sun', 'Fixed', 'Point'], lightSource : 'Point', sizeOptions : [256, 512, 1024, 2048], - size : 1024 + size : 1024, }; + +var uiOptions = { + sliders : ['lightHorizon', 'lightAngle', 'distance', 'radius'], + selects : ['cascades', 'lightSource', 'size'], + checks : ['enabled', 'terrainCast', 'debug', 'freeze', 'cascadeColors', 'fitNearFar', 'softShadows'], + disable : { + 'Freeform' : ['radius'], + 'Sun' : ['lightHorizon', 'lightAngle', 'radius'], + 'Fixed' : ['lightHorizon', 'lightAngle', 'distance', 'radius', 'cascades', 'cascadeColors', 'fitNearFar'], + 'Point' : ['lightHorizon', 'lightAngle', 'distance', 'cascades', 'cascadeColors', 'fitNearFar', 'softShadows'] + } +} Cesium.knockout.track(viewModel); var toolbar = document.getElementById('toolbar'); @@ -138,6 +155,7 @@ Cesium.knockout.getObservable(viewModel, 'cascades').subscribe(updateShadows); Cesium.knockout.getObservable(viewModel, 'lightSource').subscribe(updateShadows); Cesium.knockout.getObservable(viewModel, 'size').subscribe(updateSettings); +Cesium.knockout.getObservable(viewModel, 'softShadows').subscribe(updateShadows); var offset = new Cesium.Cartesian3(); @@ -204,6 +222,56 @@ } updateSettings(); + setupUI(lightSource); +} + +function setupUI(lightSource) { + var setting; + uiOptions.sliders.forEach(function(setting) { + var label = document.getElementById(setting + 'Label'); + var range = document.getElementById(setting + 'Range'); + var text = document.getElementById(setting + 'Text'); + + + if (uiOptions.disable[lightSource].indexOf(setting) > -1) { + label.style.color = 'gray'; + range.disabled = true; + text.disabled = true; + } + else { + label.style.color = ''; + range.disabled = false; + text.disabled = false; + } + }); + + uiOptions.selects.forEach(function(setting) { + var label = document.getElementById(setting + 'Label'); + var text = document.getElementById(setting + 'Select'); + + if (uiOptions.disable[lightSource].indexOf(setting) > -1) { + label.style.color = 'gray'; + text.disabled = true; + } + else { + label.style.color = ''; + text.disabled = false; + } + }); + + uiOptions.checks.forEach(function(setting) { + var label = document.getElementById(setting + 'Label'); + var check = document.getElementById(setting + 'Check'); + + if (uiOptions.disable[lightSource].indexOf(setting) > -1) { + label.style.color = 'gray'; + check.disabled = true; + } + else { + label.style.color = ''; + check.disabled = false; + } + }); } var globeVisible = true; From 6d1836a12819624d1eb0fea982437c1f19e7dedb Mon Sep 17 00:00:00 2001 From: Robert Taglang Date: Wed, 23 Mar 2016 13:25:14 -0400 Subject: [PATCH 2/4] Changed the UI enable/disable to use knockout --- .../gallery/development/Shadows.html | 127 +++++++----------- 1 file changed, 48 insertions(+), 79 deletions(-) diff --git a/Apps/Sandcastle/gallery/development/Shadows.html b/Apps/Sandcastle/gallery/development/Shadows.html index b82e8abf20fc..066a64efad17 100644 --- a/Apps/Sandcastle/gallery/development/Shadows.html +++ b/Apps/Sandcastle/gallery/development/Shadows.html @@ -33,72 +33,72 @@
- + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
Light HorizonLight Horizon - - + +
Light AngleLight Angle - - + +
Distance LimitDistance Limit - - + +
RadiusRadius - - + +
CascadesCascades
Light SourceLight Source
Texture SizeTexture Size
EnabledEnabled
Terrain CastTerrain Cast
Show debugShow debug
Freeze frameFreeze frame
Cascade colorsCascade colors
Fit near/farFit near/far
Soft shadowsSoft shadows
@@ -109,18 +109,27 @@ var viewModel = { lightAngle : 0.0, + lightAngleEnabled : true, lightHorizon : 0.0, + lightHorizonEnabled : true, distance : 1000.0, + distanceEnabled : true, radius : 200.0, + radiusEnabled : true, shadows : true, terrainCast : false, + terrainCastEnabled : true, debug : true, freeze : false, cascadeColors : false, + cascadeColorsEnabled : true, fitNearFar : true, + fitNearFarEnabled : true, softShadows : false, + softShadowsEnabled : true, cascadeOptions : [1, 4], cascades : 4, + cascadesEnabled : true, lightSourceOptions : ['Freeform', 'Sun', 'Fixed', 'Point'], lightSource : 'Point', sizeOptions : [256, 512, 1024, 2048], @@ -128,9 +137,7 @@ }; var uiOptions = { - sliders : ['lightHorizon', 'lightAngle', 'distance', 'radius'], - selects : ['cascades', 'lightSource', 'size'], - checks : ['enabled', 'terrainCast', 'debug', 'freeze', 'cascadeColors', 'fitNearFar', 'softShadows'], + all : ['lightHorizon', 'lightAngle', 'distance', 'radius', 'terrainCast', 'cascades', 'cascadeColors', 'fitNearFar', 'softShadows'], disable : { 'Freeform' : ['radius'], 'Sun' : ['lightHorizon', 'lightAngle', 'radius'], @@ -222,54 +229,16 @@ } updateSettings(); - setupUI(lightSource); + updateUI(); } -function setupUI(lightSource) { - var setting; - uiOptions.sliders.forEach(function(setting) { - var label = document.getElementById(setting + 'Label'); - var range = document.getElementById(setting + 'Range'); - var text = document.getElementById(setting + 'Text'); - - - if (uiOptions.disable[lightSource].indexOf(setting) > -1) { - label.style.color = 'gray'; - range.disabled = true; - text.disabled = true; - } - else { - label.style.color = ''; - range.disabled = false; - text.disabled = false; - } - }); - - uiOptions.selects.forEach(function(setting) { - var label = document.getElementById(setting + 'Label'); - var text = document.getElementById(setting + 'Select'); - - if (uiOptions.disable[lightSource].indexOf(setting) > -1) { - label.style.color = 'gray'; - text.disabled = true; - } - else { - label.style.color = ''; - text.disabled = false; - } - }); - - uiOptions.checks.forEach(function(setting) { - var label = document.getElementById(setting + 'Label'); - var check = document.getElementById(setting + 'Check'); - - if (uiOptions.disable[lightSource].indexOf(setting) > -1) { - label.style.color = 'gray'; - check.disabled = true; +function updateUI() { + uiOptions.all.forEach(function(setting) { + if (uiOptions.disable[viewModel.lightSource].indexOf(setting) > -1) { + viewModel[setting + 'Enabled'] = false; } else { - label.style.color = ''; - check.disabled = false; + viewModel[setting + 'Enabled'] = true; } }); } From 0fa4ab72d2f5a71c0500dd88608023f446fb4dc8 Mon Sep 17 00:00:00 2001 From: Taglang Date: Wed, 23 Mar 2016 13:51:35 -0400 Subject: [PATCH 3/4] Fixed the error in the dropdowns and checkboxes and a few style changes --- .../gallery/development/Shadows.html | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/Apps/Sandcastle/gallery/development/Shadows.html b/Apps/Sandcastle/gallery/development/Shadows.html index 6c01fc59b8ad..20a63c47b3d7 100644 --- a/Apps/Sandcastle/gallery/development/Shadows.html +++ b/Apps/Sandcastle/gallery/development/Shadows.html @@ -62,7 +62,7 @@ Cascades - Light Source @@ -78,7 +78,7 @@ Terrain Cast - + Show debug @@ -90,19 +90,15 @@ Cascade colors - + Fit near/far - + Soft shadows - - - - Soft shadows - + @@ -137,7 +133,7 @@ lightSourceOptions : ['Freeform', 'Sun', 'Fixed', 'Point'], lightSource : 'Freeform', sizeOptions : [256, 512, 1024, 2048], - size : 1024, + size : 1024 }; var uiOptions = { @@ -167,7 +163,6 @@ Cesium.knockout.getObservable(viewModel, 'cascades').subscribe(updateShadows); Cesium.knockout.getObservable(viewModel, 'lightSource').subscribe(updateShadows); Cesium.knockout.getObservable(viewModel, 'size').subscribe(updateSettings); -Cesium.knockout.getObservable(viewModel, 'softShadows').subscribe(updateShadows); var offset = new Cesium.Cartesian3(); @@ -246,8 +241,7 @@ uiOptions.all.forEach(function(setting) { if (uiOptions.disable[viewModel.lightSource].indexOf(setting) > -1) { viewModel[setting + 'Enabled'] = false; - } - else { + } else { viewModel[setting + 'Enabled'] = true; } }); From 399f7861713790e4ff0d2ffebd3864d969ae89d1 Mon Sep 17 00:00:00 2001 From: Sean Lilley Date: Wed, 23 Mar 2016 14:01:10 -0400 Subject: [PATCH 4/4] Missing semicolon --- Apps/Sandcastle/gallery/development/Shadows.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Apps/Sandcastle/gallery/development/Shadows.html b/Apps/Sandcastle/gallery/development/Shadows.html index 20a63c47b3d7..81655f69c014 100644 --- a/Apps/Sandcastle/gallery/development/Shadows.html +++ b/Apps/Sandcastle/gallery/development/Shadows.html @@ -144,7 +144,7 @@ 'Fixed' : ['lightHorizon', 'lightAngle', 'distance', 'radius', 'cascades', 'cascadeColors', 'fitNearFar'], 'Point' : ['lightHorizon', 'lightAngle', 'distance', 'cascades', 'cascadeColors', 'fitNearFar', 'softShadows'] } -} +}; Cesium.knockout.track(viewModel); var toolbar = document.getElementById('toolbar');