Wind Turbine

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svidget="http://www.svidget.org/svidget"
		 width="200" height="300" viewBox="0 0 189.326 283.989" style="background:transparent">
	<title>Wind Turbine Widget</title>
	<desc>
		Wind turbine widget with spinning blades.
		Pass in a rpm value.
		This widget was developed by Joe Agster for svidget.io and is licensed under the Creative Commons Attribution 4.0 License.
	</desc>

	<svidget:params>
		<svidget:param name="rpm" shortname="r" type="number" description="The rotations per minute." onset="handleDataParamSet" />
		<svidget:param name="color" shortname="c" type="string" subtype="color" description="The main color of the blades and tower." binding="#blade-front@fill, #tower@fill, #nacelle@fill" />
		<svidget:param name="shadeColor" shortname="sc" type="string" subtype="color" description="The shading color." binding="#blade-side@fill, #base@fill, #gearbox@stroke" />
		<svidget:param name="backgroundColor" shortname="bc" type="string" subtype="color" description="The background color." onset="handleUIParamSet" />
	</svidget:params>

	<svidget:actions>
	</svidget:actions>
	
	<svidget:events>
	</svidget:events>
		
	<style>
		<![CDATA[
			.hidden { visibility: hidden; }
			
			/* Animation */
			
			@keyframes spin { 
				from { transform: rotate(0deg); } 
				to { transform: rotate(360deg); }
			}
			
			#wind-blade { width: 258.63px; height: 258.63px; transform-origin: 94.663px 94.663px; animation: spin 0s linear infinite; transform: rotate(15deg); }
			
		]]>
	</style>

	<defs>
	</defs>

	<symbol id="blade">
		<path fill="#e6e6e6" id="blade-front" d="M14.6491879,1.85011601 C14.2684455,-0.0535962877 10.7150812,-0.815081206 9.06473318,3.37308585 L0.434338747,70.7658933 L8.93805104,91.9607889 L15.4106729,90.437819 L17.5684455,78.3807425 L14.5218097,1.97679814 L14.6491879,1.85011601 Z" />
		<path fill="#d0d6d7" id="blade-side" d="M11.0951276,0.581206497 C10.3336427,0.961948956 9.57215777,1.85011601 8.93735499,3.24640371 L0.306960557,70.6392111 L8.81067285,91.8341067 L3.35359629,70.0044084 L11.0951276,0.581206497 Z" />
	</symbol>

	<g>
		<g id="structure" transform="translate(58.123, 82.664)" fill-rule="nonzero">
			<polygon id="tower" fill="#e6e6e6" points="33.111,10.984 39.965,10.984 44.28,196.176 28.796,196.176" />
			<path id="yaw" fill="rgba(0,0,0,0.25)" d="M40.3454756,23.2948956 L40.7262181,34.8445476 C38.8225058,35.0986079 35.7765661,35.0986079 32.349884,34.337123 L32.7306265,23.2955916 L40.3454756,23.2955916 L40.3454756,23.2948956 Z"/>
			<path id="base" fill="#d0d6d7" transform="translate(0 42)" d="M26.3846868,150.591647 L46.5640371,150.591647 C48.8484919,150.591647 50.7522042,152.49536 50.7522042,154.779814 L50.7522042,158.967981 L22.0691415,158.967981 L22.0691415,154.779814 C22.0691415,152.49536 23.9728538,150.591647 26.2573086,150.591647 L26.3846868,150.591647 Z" />
			<circle id="nacelle" fill="#e6e6e6" cx="36.54" cy="12" r="11.93" />
			<circle id="gearbox" fill="none" stroke="#d0d6d7" stroke-width="2.75" cx="36.538" cy="11.999" r="5.8" />
		</g>
		<g id="wind-blade" style="animation: spin 1.25s linear infinite;">
			<use id="blade1" href="#blade" x="83.24" y="0" />
			<use id="blade2" href="#blade" x="83.24" y="0" transform="rotate(120 94.663 94.663)" />
			<use id="blade3" href="#blade" x="83.24" y="0" transform="rotate(-120 94.663 94.663)" />
		</g>
	</g>
	

	<script type="application/javascript" xlink:href="../scripts/svidget.min.js"></script>
	<script type="application/javascript">
		<![CDATA[
	
		// constants
		var CENTER_X = 200;
		var CENTER_Y = 200;

		// properties
		var _loaded = false;
		var rpm = 0;
		var blades = null;
		
		
		/* Loading */
		
		// entry point
		function init() {
			//debugger;
			console.log('init');
			// init stuff
			blades = document.getElementById("wind-blade");
			initParams();
			draw();

			_loaded = true;
		}
		
		function initParams() {
			loadParams();
		}
		
		window.addEventListener('load', init, false);
		
		
		/* Param Loading */
		
		function loadParams() {
			rpm = svidget.$.param("rpm").value();
		}
		
		function handleDataParamSet(e) {
			if (!_loaded) return;
			loadParams();
			draw();
		}
		
		function handleUIParamSet(e) {
			document.rootElement.style.backgroundColor = e.value.value;
		}
		

		/* Drawing */
		
		function draw() {
			rpm = fixRPM(rpm);
			if (rpm == 0) {
				blades.style.animationDuration = "0s";
			}
			else {
				var secs = 60 / rpm;
				blades.style.animationDuration = secs + "s";
			}
		}
		
		function fixRPM(rpm) {
			if (rpm < 0) return 0;
			return rpm;
		}
		
	  ]]>
	</script>
</svg>