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); } }