Using the API to put ColoRotate in your site

Bring the power of 3D color into your web site or blog using the ColoRotate widget. Easily display palettes of color on your site in 3D, or create complex mashups. With the ColoRotate and JavaScript, you can get color values from ColoRotate, and send them to ColoRotate. This page has the following “How to’s,” and API documentation.

How to: Embed the ColoRotate widget dynamically

Share a palette of colors in 3D by embeding the ColoRotate widget into your site. See sample

STEP 1: Include the SWFObject JavaScript library in the head of your HTML page

 <script type="text/javascript" src="http://www.colorotate.org/static/js/swfobject/swfobject.js"></script>

Note: This is the standard SWFObject library, and you can include it from elseswhere, as long as the version is 2.2 or newer.

STEP 2: Include the CRWidget JavaScript library in the head of your HTML

 <script type="text/javascript" src="http://www.colorotate.org/js/colorotate.js"></script>

STEP 3: Write javascript code for initialization of your ColoRotate widget in the head of your HTML

 <script type="text/javascript"> CRWidget.embedWidget("#244A57", "agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM", 370, 500, "cr", "CRWidgetPlaceholder"); </script>

STEP 4: Place your widget into the page with the CRWidget library using a div placeholder

 <div id="CRWidgetPlaceholder">Alternative content</div>

STEP 5: Register your site with ColoRotate

Add your host name (e.g., www.yourdomain.com ) to the list of allowed hosts in your ColoRotate widget settings

Sample:

 <html> <head> <title>CRWidget sample1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://www.colorotate.org/static/js/swfobject/swfobject.js"></script> <script type="text/javascript" src="http://www.colorotate.org/js/colorotate.js"></script> <script type="text/javascript"> CRWidget.embedWidget("#244A57", "agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM", 370, 500, "cr", "CRWidgetPlaceholder"); </script> </head> <body bgcolor="#244A57"> <center> <div id="CRWidgetPlaceholder">Alternative content</div> </center> </body> </html>

How to: Make AJAX requests of color palettes using CRHttpRequest

Every palette stored at ColoRotate online has a unique 32-character code. You can request a list of colors for that palette via AJAX. See sample

STEP 1: Include the CRWidget JavaScript library in the head of your HTML page

 <script type="text/javascript" src="http://www.colorotate.org/js/colorotate.js"></script>

STEP 2: Write and connect required listeners to the CRWidget object

 CRWidget.addListener("onJSLoadSchemaComplete", handleJSLoadSchemaComplete); CRWidget.addListener("onJSLoadSchemaError", handleJSLoadSchemaError);  function handleJSLoadSchemaError(error){ if(error.id=='cr'){ alert(error.text) } } function handleJSLoadSchemaComplete(event){ 	if(event.id=='cr'){ 		alert(event.arr); 	} }

STEP 3: Register your site with ColoRotate

Add your host name (e.g., www.yourdomain.com ) to the list of allowed hosts in your ColoRotate widget settings

STEP 4: Call the method CRHttpRequest.getPaletteByID(paletteID, processID) from your html code

 CRHttpRequest.getPaletteByID('agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM', 'cr')

Sample:

 <html> <head> <title>CRWidget sample2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://www.colorotate.org/js/colorotate.js"></script> <script type="text/javascript"> CRWidget.addListener("onJSLoadSchemaComplete", handleJSLoadSchemaComplete); CRWidget.addListener("onJSLoadSchemaError", handleJSLoadSchemaError); function handleJSLoadSchemaError(error){ if(error.id=='cr'){ alert(error.text) } } function handleJSLoadSchemaComplete(event){ 	if(event.id=='cr'){ 		alert(event.arr); 	} } </script> </head> <body> <center> <input name="schemaKey" type="text" id="schemaKey" value="agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM" size="50" /> <input type="submit" name="getSchemaBtn" id="getSchemaBtn" value="Get schema" onclick="CRHttpRequest.getPaletteByID(document.getElementById('schemaKey').value, 'cr')" /> </center> </body> </html>

How to: Mashup the ColoRotate widget with a Google Geomap

With the ColoRotate API, you can create mashups of any sort. In this “how-to”, see how the 3D color picker of ColoRotate can be used to assign colors on a map. See sample

STEP 1: Include the SWFObject and CRWidget JavaScript library in the head of your HTML page

 <script type="text/javascript" src="http://www.colorotate.org/static/js/swfobject/swfobject.js"></script> <script type="text/javascript" src="http://www.colorotate.org/js/colorotate.js"></script>

STEP 2: Include the Google JSApi JavaScript library in the head of your HTML page

 <script type='text/javascript' src='http://www.google.com/jsapi'></script>

STEP 3: Write javascript code for initialization of your Geomap ( more ) in the head of your HTML page

 <script type='text/javascript'> google.load('visualization', '1', {'packages': ['geomap']}); var geomap; function drawMap(colorsArr) { 	countries = ['Germany', 'United States', 'Brazil', 'Canada', 'France', 'RU', 'Afghanistan', 'Egypt', 'India', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Japan', 'Ukraine', 'Iran']; 	var data = new google.visualization.DataTable(); 	data.addRows(countries.length); 	data.addColumn('string', 'Country'); 	data.addColumn('number', 'Popularity');  	for(var i=0;i<countries.length;i++){ 	   data.setValue(i, 0, countries[i]); 	   data.setValue(i, 1, 100*i); 	} 	var options = {}; 	options['dataMode'] = 'regions'; 	options['width'] = '800'; 	options['height'] = '500'; 	options['colors'] = colorsArr; 	var container = document.getElementById('map_canvas'); 	geomap = new google.visualization.GeoMap(container); 	geomap.draw(data, options); };

STEP 4: Write javascript code for initialization of your ColoRotate widget in the head of your HTML page.

Write and connect required listeners to the CRWidget object.

 <script type="text/javascript"> var cr_ref; var cr_callback_fn = function callbackFn(e) { cr_ref=e.ref }; CRWidget.embedWidget("#118DA8", "agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRi1vjoM", 370, 500, "cr", "CRWidgetPlaceholder", cr_callback_fn, "false", "false", "true"); CRWidget.addListener("onEditColorDot", handleEditColorDot); CRWidget.addListener("onEditColors", handleEditColorDot); CRWidget.addListener("onSWFLoadSchemaComplete", handleSWFLoadSchemaComplete); CRWidget.addListener("onSWFLoadSchemaError", handleSWFLoadSchemaError); function handleEditColorDot(event){ 	if(event.id==cr_ref.id){ 		drawGeomap( CRWidget.getColorsFromArray(cr_ref) ); 	} } function handleSWFLoadSchemaComplete(event){ 	if(event.id==cr_ref.id){ 		drawGeomap(event.arr); 	} } function drawGeomap(arr){ 	var nArr = []; 	for(var i = 0;i<arr.length;i++){ 		var c = arr[i]; 		nArr.push("0x"+c.substr(1,c.length-1)); 	} 	drawMap(nArr); } function handleSWFLoadSchemaError(error){ if(error.id==cr_ref.id){ alert(error.text) } } </script>

STEP 5: Place your widget and geomap into the page using a div placeholder

 <div id='map_canvas'></div> <div id="CRWidgetPlaceholder">Alternative content</div>

STEP 6: Register your site with ColoRotate

Add your host name (e.g., www.yourdomain.com ) to the list of allowed hosts in your ColoRotate widget settings

Documentation: CRWidget JavaScript API

CRWidget contains an API that allows JavaScript developers to reuse CRWidget’s internal functions and aims to deliver a complete tool set for publishing ColoRotate widget’s and retrieving ColoRotate widget related information. See sample

Methods:

embedWidget(bgColor, paletteID, swf_width, swf_height, processID, divID, callbackFn, schema_visible, address_line_visible, diamond_editable);

Inserts the CRWidget into the page, at the location of the “divID”

Arguments:

  • bgColor (String, required) specifies background color of your widget (“#343434”)
  • paletteID (String, required) specifies the id of the color schema you would like to load to your ColoRotate widget (“agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM”)
  • width (String, required) specifies the width of your ColoRotate widget (370…520)
  • height (String, required) specifies the height of your ColoRotate widget (500…670)
  • processID (String, required) specifies the ID of all processes of your widget (“cr”)
  • callbackFn (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of embedding a widget file
  • schema_visible (String, optional) specifies visibility of the UI component of color schema below diamond (“true”)
  • address_line_visible (String, optional) specifies visibility of the UI component of address line below diamond (“true”)
  • diamond_editable (String, optional) specifies is color schema is editable (“true”)

Where callbackFn is a JavaScript function that has an event object as a parameter:

callbackFn(event) { … }

Properties of this event object are:

  • success, Boolean to indicate whether the embedding of a widhet was success or not
  • id, String indicating the ID of the widget
  • ref, HTML object element reference (returns undefined when success=false)

sample:

 var cr_ref; var cr_callback_fn = function(event){cr_ref = event.ref} CRWidget.embedWidget("#D1CFBF", "agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM", 370, 500, "cr", "CRWidgetPlaceholder", cr_callback_fn, "true", "true", "true");

setFocusedColorDot(index, ref)

Specifies index of selected color

Arguments:

  • index, (Number, required) – index of selected color
  • ref, (Object, required) – HTML object element of widget reference

sample:

 CRWidget.setFocusedColorDot(0, cr_ref)

setColorsFromArray(array, ref)

Specifies color set that will display on the widget

Arguments:

  • array, (Array, required) – array of colors
  • ref, (Object, required) – HTML object element of widget reference

sample:

 CRWidget.setColorsFromArray(["#D1CAB2", "#B0B0B5", "#444B4D"], cr_ref)

getColorsFromArray()

Return:

array of colors ([“#D1CAB2”, “#B0B0B5”, “#444B4D”])

sample:

 CRWidget.getColorsFromArray()

addListener(type, handle)

Specifies function that will listen type of events

Arguments:

  • type, (String, required) – type of event
  • handle, (Object, required) – function to handle of event

removeListener(type, handle)

Removes handle function

Arguments:

  • type, (String, required) – type of event
  • handle, (Object, required) – function to handle of event

Supported events:

onFocusColorDot

Dispatched from the widget when color is selected.

Properties of this event object are:

  • ind, Number, index of selected color
  • id, String indicating the ID of the widget

onEditColorDot

Dispatched from the widget when color is changed.

Properties of this event object are:

  • ind, Number, index of changed color
  • id, String indicating the ID of the widget
  • clr, String, changed color (“#990000”)

onProcessEditColorDot

Dispatched from the widget during process of changing color.

Properties of this event object are:

  • ind, Number, index of changed color
  • id, String indicating the ID of the widget
  • clr, String, changed color (“#990000”)

onProcessEditColors

Dispatched from the widget during process of changed colors of color schema

Properties of this event object are:

  • arr, Array, array of colors ([“#D1CAB2”, “#B0B0B5”, “#444B4D”])
  • id, String indicating the ID of the widget

onEditColors

Dispatched from the widget when all colors of color schema are changed.

Properties of this event object are:

  • arr, Array, array of colors ([“#D1CAB2”, “#B0B0B5”, “#444B4D”])
  • id, String indicating the ID of the widget

onSWFLoadSchemaComplete

Dispatched from the widget when color schema from colorotate.org is succesfully loaded

Properties of this event object are:

  • arr, Array, array of colors ([“#D1CAB2”, “#B0B0B5”, “#444B4D”])
  • paletteID, String, ID of palette (“agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM”)
  • id, String indicating the ID of the widget

onSWFLoadSchemaError

Dispatched from the widget when color schema from colorotate.org is not loaded

Properties of this event object are:

  • text, String, description of error
  • errorType, Number, number of error
  • id, String indicating the ID of the widget

onJSLoadSchemaComplete

Dispatched from the CRHttpRequest when color schema from colorotate.org is succesfully loaded

Properties of this event object are:

  • arr, Array, array of colors ([“#D1CAB2”, “#B0B0B5”, “#444B4D”])
  • id, String indicating the ID of the widget

onJSLoadSchemaError

Dispatched from the CRHttpRequest when color schema from colorotate.org is not loaded

Properties of this event object are:

  • text, String, description of error
  • errorType, Number, number of error
  • id, String indicating the ID of the widget

Sample:

 CRWidget.addListener("onSWFLoadSchemaComplete", handleSWFLoadSchemaComplete) var cr_callback_fn = function callbackFn(e) { cr_ref=e.ref };

Documentation: CRHttpRequest JavaScript API

CRHttpRequest contains an API that allows JavaScript developers to do ajax requests of color palettes by ID to ColoRotate cloud. See sample This function is used in the AJAX demo above.

Methods:

getPaletteByID(paletteID, processID) Run request of palette to colorotate.org. To listen events you must handle events onJSLoadSchemaError and onJSLoadSchemaComplete of CRWidget

Arguments:

  • paletteID (String, required) specifies the id of the color schema you would like to load (“agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM”)
  • processID (String, required) specifies the ID of all processes of your CRHttpRequest (“cr”)

Sample:

 CRWidget.addListener("onJSLoadSchemaComplete", handleJSLoadSchemaComplete); CRWidget.addListener("onJSLoadSchemaError", handleJSLoadSchemaError); function handleJSLoadSchemaError(error){ if(error.id=='cr'){ alert(error.text) } }  CRHttpRequest.getPaletteByID(document.getElementById('agtpZGVhZGlhbW9uZHIPCxIHUGFsZXR0ZRjxhigM', 'cr');  function handleJSLoadSchemaComplete(event){ 	if(event.id=='cr'){    	alert(event.arr);    	} }
Tags:
Last Modified: 17-April-2010

Leave a Reply