Added label icons

README.md

@@ -41,23 +41,34 @@ And don't forget to add the module to your application
 Options
 -------
 
-		thickness: "@?"
-		centerColor: "@?"
-		labelColors: "=?"
-		labelIcons: "=?"
-		fontSize: "@?"
-		fontFamily: "@?"
-		colors: "=?"
-		snap: "=?"
-
-- thickness: Thickness of the wheel. Could in % or in pixel. Exemple: thickness: "25%" or thickness: "100px". Default: 25%
-- centerColor: The color in the middle of the wheel. Defaults to white
-- labelColors: Labels color for each section. Array of n strings, where n == number of sections. Defaults to white
-- labelIcons: Icon url for each section. Array of n strings, where n == number of sections. Defaults to empty
-- fontSize: font size of the labels in pixels. defaults to 18
-- fontFamily: font family to be used for the labels. Defaults to helvetica
-- colors: Background color for each section. Array of n strings, where n == number of sections. Defaults to #666 and #999 alternatively
-- snap: false | true. When turning the wheel, set this to true (default) if you want the wheel to snap to the nearest section
+- `thickness`: Thickness of the wheel. Could in % or in pixel. Exemple: thickness: "25%" or thickness: "100px". Default: 25%
+- `centerColor`: The color in the middle of the wheel. Defaults to white
+- `labelColors`: Labels color for each section. Array of n strings, where n == number of sections. Defaults to white
+- `labelIcons`: (Coming soon!) Icon url for each section. Array of n strings, where n == number of sections. Defaults to empty
+- `fontSize`: font size of the labels in pixels. defaults to 18
+- `fontFamily`: font family to be used for the labels. Defaults to helvetica
+- `colors`: Background color for each section. Array of n strings, where n == number of sections. Defaults to #666 and #999 alternatively
+- `snap`: false | true. When turning the wheel, set this to true (default) if you want the wheel to snap to the nearest section
+- `iconsRatio`: How much smaller should be the icon displayed compared to their actual size. Defaults to 0.5 (good for retina displays)
+
+Events broadcast
+---------------
+
+2 events are broadcasted on the $rootScope:
+- `roulette:turned`: When you have turned the wheel. Sends the section on top
+- `roulette:select`: When you have clicked (or touched) a section of the wheel (without turning it). Sends the selected section
+
+Both events are broadcast with label, color, labelColor, and icon url of the section
+
+		label: "Section 1"
+		color: "#555500"
+		labelColor: "#ffffff"
+		icon: "/images/cog.png"
+
+So, you can listen to this event like this:
+
+		$scope.$on("roulette:turned", function(e, info){ console.log("Event: roulette:turned - Params: " + JSON.stringify info); });
+		$scope.$on("roulette:select", function(e, info){ console.log("Event: roulette:turned - Params: " + JSON.stringify info); });
 
 Demo
 ----

demo/scripts/controllers/main.coffee

@@ -2,9 +2,12 @@
 angular.module("rouletteDemo").controller "MainCtrl", ($scope) ->
 	$scope.colors ||= ["#da355a", "#5da44d", "#ef7b54", "#4284a6", "#f1bd62", "#7d5aa2"]	
 	$scope.labels = ["section 1", "section 2", "section 3", "section 4", "section 5", "section 6"]
+	$scope.labelColors = ["#ffff00", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"]
+	$scope.labelIcons = ["/images/benafro.png", "/images/cog.png", "/images/abc.png", "/images/envelop.png", "/images/group.png", "/images/wrench.png"]
+	$scope.eventInfo = "Turn the wheel or click on a section to see the event displayed here"
 	$scope.$on "roulette:turned", (e, info) ->
 		$scope.$apply ->
 			$scope.eventInfo = "Event: roulette:turned - Params: #{JSON.stringify info}"
-	$scope.$on "roulette:click", (e, info) ->
+	$scope.$on "roulette:select", (e, info) ->
 		$scope.$apply ->
-			$scope.eventInfo = "Event: roulette:click - Params: #{JSON.stringify info}"
+			$scope.eventInfo = "Event: roulette:select - Params: #{JSON.stringify info}"

demo/styles/main.css

@@ -1 +1,3 @@
-/* Will be compiled down to a single stylesheet with your sass files */
+body { background-color: #eee; }
+roulette { margin: 40px; }
+.info { padding:10px; margin: 10px; background: #ddd; }

demo/views/main.html

@@ -1,6 +1,6 @@
-<div class="info" style="padding:10px; margin: 10px; background: #ddd;">{{eventInfo}}&nbsp;</div>
 <roulette
 	colors="colors"
 	labels="labels"
-	label-colors="label-colors"
-	label-icons="label-icons"></roulette>
+	label-colors="labelColors"
+	label-icons="labelIcons"></roulette>
+<div class="info">{{eventInfo}}&nbsp;</div>