Spinning Star

This spinning star demo shows the basics of building a widget using Svigdet.

The spinning star appears in the demo folder of the Github repo for svidget. the purpose is to provide a basic, "hello world" widget example to demonstrate the capabilities of svidget. This widget also demonstrates how you can use other visualization libraries in your widget, in this case D3.

To get started, play around with the controls to change the params. You can click the star itself or indicate action params and click the spin button to invoke the spin action. Also, watch the event notifcations from with widget for spinStart and spinComplete. Preview the code below to see how this all works.

Params

backgroundColor

borderColor

borderWidth

Actions

duration (secs)

rotations

Tip: Try changing params while the star is still spinning.

Events

spinStart
spinComplete

Here is the HTML snippet based on the params above.

<object id="spinningStar" role="svidget" data="spinningstar.svg" type="image/svg+xml" width="400" height="400">
	<param name="backgroundColor" value="#da3333" />
	<param name="borderColor" value="#ffb244" />
	<param name="borderWidth" value="6" />
</object>

[View Code]

Here is the code for the widget:

<?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="200" viewBox="0 0 200 200" svidget:version="0.2.0">
	<title>Spinning Star</title>
	<desc>
		A spinning star widget with params, actions, and events.
		This widget was developed by Joe Agster for svidget.com and is licensed under the Creative Commons Attribution 4.0 License.
	</desc>

	<svidget:params>
		<svidget:param name="backgroundColor" shortname="bg" type="string" subtype="color" binding="#starback@fill" />
		<svidget:param name="borderColor" shortname="bd" type="string" subtype="color" binding="#starfront@stroke" />
		<svidget:param name="borderWidth" shortname="bw" type="number" binding="#starfront@stroke-width,#starback@stroke-width" />
	</svidget:params>

	<svidget:actions>
		<svidget:action name="spin" external="true" binding="spin" description="Spins the star.">
			<svidget:actionparam name="rotations" type="number" default="4" description="The total number of rotations."  />
			<svidget:actionparam name="duration" type="number" default="5" description="The total time in seconds that the star should spin."  />
		</svidget:action>
	</svidget:actions>

	<svidget:events>
		<svidget:event name="spinStart" description="Triggered when the spinning has started." />
		<svidget:event name="spinComplete" description="Triggered when the spinning has completed." />
	</svidget:events>

	<defs>
		<linearGradient id="backgroundGradient" y1="0" y2="100%" x1="0" x2="0">
			<stop offset="0%" stop-color="#000" stop-opacity="0.0" />
			<stop offset="100%" stop-color="#000" stop-opacity="0.25" />
		</linearGradient>
	</defs>

	<g id="star" transform="rotate(0 100 100)" onclick="spin(4, 5)" style="cursor:pointer">
		<path id="starback" fill="cornflowerblue" stroke="white" stroke-width="6" stroke-linejoin="round" d="M 100 4 L 128.214 61.1672 L 191.301 70.3344 L 145.651 114.833 L 156.427 177.666 L 100 148 L 43.5726 177.666 L 54.3493 114.833 L 8.69857 70.3344 L 71.7863 61.1672 Z" />
		<path id="starfront" fill="url(#backgroundGradient)" stroke="midnightblue" stroke-width="6" stroke-linejoin="round" d="M 100 4 L 128.214 61.1672 L 191.301 70.3344 L 145.651 114.833 L 156.427 177.666 L 100 148 L 43.5726 177.666 L 54.3493 114.833 L 8.69857 70.3344 L 71.7863 61.1672 Z" display="block" />
	</g>

	<script type="application/javascript" xlink:href="../scripts/svidget.min.js"></script>
	<script type="application/javascript" xlink:href="../scripts/d3.min.js"></script>
	<script type="application/ecmascript">
		<![CDATA[
	
		var curangle = 0;
		
		// This is called by the spin action (see binding="spin")
		function spin(rotations, duration) {
			svidget.$.event("spinStart").trigger();
			spinner("#star", rotations, duration, triggerSpinComplete);
		}
		
		// Triggers the spinComplete event
		function triggerSpinComplete() {
			svidget.$.event("spinComplete").trigger();
		}
		
		// Handles the spinning animation
		function spinner(id, rotations, duration, doneFunc) {
			// debugger;
			var ele = d3.select(id);

			// configure animation
			if (isNaN(duration) || duration <= 0) duration = 1;
			var totalDeg = rotations * 360;
			var startTransform = toRotateStr(0);
			var endTransform = toRotateStr(totalDeg);
			
			// start animation using D3
			ele
				.transition()
				.duration(duration * 1000)
				.ease("cubic-out")
				.each("end", doneFunc)
				.attrTween("transform", tween);

			function tween(d, i, a) {
				return d3.interpolateString(startTransform, endTransform);
			}
			
			function toRotateStr(angle) {
				return "rotate(" + angle + " 100 100)";
			}

		}
	
  ]]>
	</script>

</svg>

[View Code]

Download this widget by itself or as a zip file with the widget and related js files. The zip file contains version 0.3.4 of svidget.js but you can also download the latest version.

Also, check out the Starry Night demo to see multiple spinning stars in action.