emackey/PolylineGlowTest.html

## PolylineGlowTest.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Adjust polyline glow with a slider.">
    <meta name="cesium-sandcastle-labels" content="Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
    #toolbar input {
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
    }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<table><tbody>
    <tr>
        <td>Glow</td>
        <td>
            <input type="range" min="0" max="1" step="0.01" data-bind="value: glow, valueUpdate: 'input'">
            <input type="text" size="5" data-bind="value: glow">
        </td>
    </tr>
</tbody></table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    "use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var primitives = scene.primitives;
var polylines = new Cesium.PolylineCollection();

// Create a polyline glow material
var glowMaterial = Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
    glowPower : 0.1,
    color : new Cesium.Color(1.0, 0.5, 0.0, 1.0)
});

// Apply the polyline glow material
var coloredPolyline = polylines.add({
    positions : Cesium.Cartesian3.fromDegreesArray([
        -95.0, 30.0,
        -85.0, 40.0
    ]),
    material : glowMaterial,
    width : 100.0
});

primitives.add(polylines);

// UI begins here

var viewModel = {
    glow: glowMaterial.uniforms.glowPower
};
Cesium.knockout.track(viewModel);

var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'glow').subscribe(function(newGlow) {
    glowMaterial.uniforms.glowPower = newGlow;
});


//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="description" content="Adjust polyline glow with a slider.">
	<meta name="cesium-sandcastle-labels" content="Showcases">
	<title>Cesium Demo</title>
	<script type="text/javascript" src="../Sandcastle-header.js"></script>
	<script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.9/require.js"></script>
	<script type="text/javascript">
	require.config({
	baseUrl : '../../../Source',
	waitSeconds : 60
	});
	</script>
	</head>
	<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
	<style>
	@import url(../templates/bucket.css);
	#toolbar {
	background: rgba(42, 42, 42, 0.8);
	padding: 4px;
	border-radius: 4px;
	}
	#toolbar input {
	vertical-align: middle;
	padding-top: 2px;
	padding-bottom: 2px;
	}
	</style>
	<div id="cesiumContainer" class="fullSize"></div>
	<div id="loadingOverlay"><h1>Loading...</h1></div>
	<div id="toolbar">
	<table><tbody>
	<tr>
	<td>Glow</td>
	<td>
	<input type="range" min="0" max="1" step="0.01" data-bind="value: glow, valueUpdate: 'input'">
	<input type="text" size="5" data-bind="value: glow">
	</td>
	</tr>
	</tbody></table>
	</div>
	<script id="cesium_sandcastle_script">
	function startup(Cesium) {
	"use strict";
	//Sandcastle_Begin
	var viewer = new Cesium.Viewer('cesiumContainer');
	var scene = viewer.scene;
	var primitives = scene.primitives;
	var polylines = new Cesium.PolylineCollection();

	// Create a polyline glow material
	var glowMaterial = Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
	glowPower : 0.1,
	color : new Cesium.Color(1.0, 0.5, 0.0, 1.0)
	});

	// Apply the polyline glow material
	var coloredPolyline = polylines.add({
	positions : Cesium.Cartesian3.fromDegreesArray([
	-95.0, 30.0,
	-85.0, 40.0
	]),
	material : glowMaterial,
	width : 100.0
	});

	primitives.add(polylines);

	// UI begins here

	var viewModel = {
	glow: glowMaterial.uniforms.glowPower
	};
	Cesium.knockout.track(viewModel);

	var toolbar = document.getElementById('toolbar');
	Cesium.knockout.applyBindings(viewModel, toolbar);

	Cesium.knockout.getObservable(viewModel, 'glow').subscribe(function(newGlow) {
	glowMaterial.uniforms.glowPower = newGlow;
	});


	//Sandcastle_End
	Sandcastle.finishedLoading();
	}
	if (typeof Cesium !== "undefined") {
	startup(Cesium);
	} else if (typeof require === "function") {
	require(["Cesium"], startup);
	}
	</script>
	</body>
	</html>