Default

	<div id="myap"></div>
	<script>
	new AnglePicker("#myap", {
	});
	</script>
	

Enable Center

	<div id="myap1"></div>
	<script>
	new AnglePicker($("#myap1"), {
		flat : true
		,enableCenter: true
		,value: null
	});
	</script>
	

Enable Center, disable show value

	<div id="myap1a"></div>
	<script>
	new AnglePicker($("#myap1a"), {
		flat : true
		,enableCenter: true
		,showValueEnabled: false
		,value: null
	});
	</script>
	

Value

	<div id="myap2"></div>
	<script>
	new AnglePicker($("#myap2"), {
		flat : true
		,value: 41
	});
	</script>
	

Handle Size

	<div id="myap3"></div>
	<script>
	new AnglePicker($("#myap3"), {
		flat : true
		,handleSize: 20
	});
	</script>
	

Snap

	<div id="myap4"></div>
	<script>
	new AnglePicker($("#myap4"), {
		flat : true
		,snap: 45
	});
	</script>
	

Size

	<div id="myap5"></div>
	<script>
	new AnglePicker($("#myap5"), {
		flat : true
		,size: 100
	});
	</script>
	

Change Event

change:
null
move:
null
	<div id="myap6"></div>
	<script>
	new AnglePicker($("#myap6"), {
		flat : true
		,enableCenter: true
		, move: function(evt,data) {
			var val = "" + data.value;
			if (val != "null")
				val += "°";
			$("#myap6val2").html(val);
		}
		, change: function(evt,data) {
			var val = "" + data.value;
			if (val != "null")
				val += "°";
			$("#myap6val").html(val);
		}
	});
	</script>
	

Top and Clockwise

	<div id="myap7"></div>
	<script>
	new AnglePicker($("#myap7"), {
		flat : true
		,start: -90
	});
	</script>
	

anti-Clockwise

	<div id="myap8"></div>
	<script>
	new AnglePicker($("#myap8"), {
		flat : true
		,clockwise: false
	});
	</script>
	

Bottom and anti-Clockwise

	<div id="myap9"></div>
	<script>
	new AnglePicker($("#myap9"), {
		flat : true
		,clockwise: false
		,start: -90
	});
	</script>
	

Show Value Center

	<div id="myap10"></div>
	<script>
	new AnglePicker($("#myap10"), {
		flat : true
		, enableCenter: true
		, showValue: true
		, showValueCenter: true
	});
	</script>
	

Always Show Tooltip

	<div id="myap11"></div>
	<script>
	new AnglePicker($("#myap11"), {
		flat : true
		, enableCenter: true
		, showValueAlwaysEnabled: true
	});
	</script>
	

Full

	<div id="myap100"></div>
	<script>
	new AnglePicker($("#myap100"), {	
		flat: true
		, value: 90
		, enableCenter: true
		, centerSize: 80
		, size: 100
		, handleSize: 20
		, handleType: "default"
		, snap: 45
		, showValue: true
		, decimalPlaces: 0
		, appendTo: "body"
		,change : function(evt, data) {
			console.log("change:"+data.value);
		}
	});
	</script>
	

Set Value

	<div id="myap110"></div>
	<script>
	var ap110 = new AnglePicker($("#myap110"), {
		flat : true
		,enableCenter: true
	});
	$("#myap110-button1").click(function() {
		ap110.setValue(45);
	});
	$("#myap110-button2").click(function() {
		ap110.setValue(null);
	});
	</script>
	

Show Value Center Snap/Relax

	<div id="myap120"></div>
	<script>
	new AnglePicker($("#myap120"), {
		flat : true
		, enableCenter: true
		, showValue: true
		, showValueCenter: true
		, snap: 5
		, snapRelax: true
	});
	</script>