Autodesk Creative Platform UI Toolkit Version 1.5.0
Comprehensive set of reusable HTML5 controls and templates

Interactive Control Demos

The Autodesk Creative Platform Runtime is used to download various libraries and their dependencies. Below is example code that explains how to include the Autodesk Creative Platform Runtime in an HTML page and use it to download the Autodesk Creative Platform UI Toolkit Library.

<!-- Includes the Creative Platform Runtime -->
<script type="text/javascript" src="https://api.tinkercad.com/libraries/1jiw9epElcK/0/library.min.js"></script>

<!-- Downloads the Creative Platform UI Toolkit Using The Runtime -->
<script type="text/javascript">
creativePlatformRuntime.require(
	[{
		id: "aZS9YbvfqUX", 
		version: 0
	}],	// The ID of the UI Toolkit

	function(uiToolkit) { // The callback when it downloads

		// TODO: Your control code will go here

	},
	function() { // Called on failure

	}
);
</script>
We have some awesome themes designed for these controls. Switch between the themes:


Controls.Accordion



item 1 -content
item 3 -content
sub item 2 -content
var accordion = new controls.Accordion({
	id: 'accordion',
	parent: 'accordionExample'
});
accordion.change.bind(function() {
	var item = accordion.selectedItem
	$('#accordionMessage').text(item.header.text());
});

Controls.Button





var btnHello = new controls.Button({
	id: 'btnHelloWorld',
	parent: 'buttonExample',
	text: 'Hello World'
});
btnHello.click.bind(function () {
  document.getElementById('buttonMessage').innerText = 'Hello World!';		
});

//button with icon
var iconButton = new controls.Button({
	id: 'btnIcon',
	text: 'Hello Tinkercad',
	parent: 'buttonExample',
	icon: {
		url: 'http://tinkercad.com/logo.png',
		position: 'left',
		width: 20,
		height: 20
	}
});
iconButton.click.bind(function () {
  document.getElementById('buttonMessage').innerText = 'Hey there!';		
});

Controls.Checkbox


var chkHello = new controls.Checkbox({
	id:'chkHelloWorld',
	parent: 'checkboxExample',
	text: 'Click Me!'
});
chkHello.change.bind(function () {
  console.log(chkHello.checked);
});

Controls.Dropdown


var dropdownControl = new controls.Dropdown({
	id:'dropdownControl',
	parent: 'dropdownControlExample',
	items: [
		{"value": "1", "text": "Red"},
		{"value": "2", "text": "Green"},
		{"value": "3", "text": "Blue"}
	]
});

Controls.Feedback


//Add feedback
var feedback = new controls.Feedback({
	id:'feedbackControl',
	parent: 'feedbackExample'
});
feedback.submit.bind(function () {
  document.getElementById('feedbackMessage').innerText = feedback.comment;
});

//Edit feedback
var feedback = new controls.Feedback({
	id:'feedbackControl',
	parent: 'feedbackExample',
	rating: 5, //initial value
	comment: 'This is awesome!' //initial value
});

Controls.HoverArea


//Add feedback
var hoverArea = new controls.HoverArea();
hoverArea.bind([{
	id :'item1',
	parent: document.getElementById('hoverAreaParent'),
	target: document.getElementById('hoverAreaItem1'),
	direction : 'top'
},{
	id :'item2',
	parent: document.getElementById('hoverAreaParent'),
	target: document.getElementById('hoverAreaItem2'),
	direction : 'right'
}]);

Controls.ImageMap


var items = [];
for (i=0; i<7; i++) {
	var item = {};
	item.id = 'robot-part-' + i;
	item.imagesrc = Library.resourceURL('robot-part-' + i +'.png');
	items.push(item);
}

//Assign a colour for each item accoring to the colour image mapping



items[0].value = '#FDB139'; //Head
items[1].value = '#416C3D'; //Right Arm
items[2].value = '#C38853'; //Right Leg
items[3].value = '#6FA474'; //Left Arm
items[4].value = '#FF7B7B'; //Left Leg
items[5].value = '#47827F'; //Torso
items[6].value = '#491E1E'; //Pelvi Area

var imageMapControl = new controls.ImageMap({
	id:'imageMap',
	parent: 'imageMapControlExample',
	items: items,
	mainImage: Library.resourceURL('robot-main-image.png'),
	mapImage: Library.resourceURL('robot-map-image.png')
});

imageMapControl.change.bind(function(e) {
  var message = 'Selected Item: ' + imageMapControl.value;
  document.getElementById('imgMapMessage').innerText = message;
});

Controls.Itemslider



var items = [];
for (i=0; i<16; i++) {
    var itm = {};
    itm.id = i;
    itm.value = i+1;
    //itm.imagesrc = '', //item image url
    items.push(itm);
}

var itemsliderControl = new controls.Itemslider({
	id:'itemsliderControl',
	parent: 'itemsliderExample',
	items: items,
	itemsPerSlide: 8,
	itemCss: 'itemsliderItem' //external item css
});

itemsliderControl.change.bind(function(e) {
  var message = 'Selected value: ' +
	itemsliderControl.selectedValue;
  document.getElementById('itemsliderMessage').innerText = message;
});
itemsliderControl.slidechange.bind(function(e) {
  var message = 'Current slide index: ' +
	itemsliderControl.slideIndex;
  document.getElementById('itemsliderMessage').innerText = message;
});

Controls.Panel


var panel = new controls.Panel({
	id:'panel1',
	title : 'Panel',
	collapsible: true
}, document.getElementById('panelTargetElement'));

var textbox = new controls.Textbox({
	id: 'txt1',
	parent: panelControl.contentArea
});

var textbox = new controls.Button({
	id: 'btn1',
	text: 'Button',
	parent: panelControl.contentArea
});

Controls.Popup

Click to see all popup positions.

var popupControl = new controls.PopupControl({
	id:'popupControl',
	content: 'Hello world!'
}, document.getElementById('popupTargetElement'));

Controls.Rating

Readonly rating control:


Editable rating control:


Your rating: 5
//Readonly
var readonlyRatingCtrl = new controls.Rating({
	id: 'ratingCtrl',
	parent: 'ratingExample',
	rating: 3, //initial rating
	max: 5,
	reviewCount: 7, //total reviews
	readonly: true
});
//Editable
var editableRatingCtrl = new controls.Rating({
	id: 'ratingCtrl',
	parent: 'ratingExample',
	rating: 5, //initial rating
	max: 5,
	readonly: false
});
editableRatingCtrl.change.bind(function () {
  document.getElementById('ratingMessage').innerText = 'Your rating:'+
	editableRatingCtrl.rating;
});

Controls.Resizable

controls.Resizable.bind({control: document.getElementById('resizeExample'),
	grips: [
		controls.ResizeGripEnum.South,
		controls.ResizeGripEnum.East,
		controls.ResizeGripEnum.SouthEast], 
    minHeight: 50, 
    minWidth: 50, 
    maxHeight: 300, 
    maxWidth: 300
});

Controls.Slider






var sliderControl = new controls.Slider({
	id:'sliderControl',
	parent: 'sliderControlExample'
	showText: true,
	showInput: true,
	displayUnit: 'in'
});

var sliderControl = new controls.Slider({ id:'sliderControl', parent: 'sliderControlExample', min: 50, max: 500, steps:50, ticks: [100,121,150,180,200,300,400] });
var sliderControl = new controls.Slider({ id:'sliderControl', parent: 'sliderControlExample', min: 50, max: 500, steps:[100,150,400], ticks: [100,150,400], orientation: controls.SliderOrientationEnum.Vertical, showText: true, showInput: true });

Controls.Sketch2D

var sketch2d = new controls.Sketch2D({
	id: '2dsketch',
	parent: 'sketchExample'
	width: 250, 
	height: 250, 
	css: 'sketchControl'
});
var svgString = '<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="0" cy="0" r="10" stroke="black" stroke-width="2" fill="red" />
</svg>';
var conversions = library.CoreLibrary.Conversions; 
sketch2d.value = conversions.toSketch2DFromSVG(svgString);

Controls.Tab




//Tab Control
var params = {};
params.id = 'tabControl';
params.parent = 'tabExample';
params.css = {};
params.css.tabCss = "tabCss";
params.css.headerCss = "headerCss";
params.css.contentCss = "tabExampleContent";

params.tabs = {'tab1': {
    'tabid': 'tab1',
    'headerText': 'Tab1',
    'tabContent': 'Tab1 content'
},
'tab2': {
    'tabid': 'tab2',
    'headerText': 'Tab2',
    'tabContent': 'Tab2 content'
},
'tab3': {
    'tabid': 'tab3',
    'headerText': 'Tab3',
    'tabContent': 'Tab3 content'
}};

var tabControl = new controls.Tab(params);

//Option Tab Control
var params = {};
params.id = 'taboptionControl';
params.parent = 'tabExample';
params.tabHeader = 'Switch';

params.tabs = {'tab1': {
    'tabid': 'on',
    'headerText': 'On'
},
'tab2': {
    'tabid': 'off',
    'headerText': 'Off'
}};

var tabControl = new controls.Tab(params);

Controls.TagList


var tagList = new controls.TagList({
	id:'tagList'
	parent: 'tagListExample'
});
tagList.change.bind(function () {
  document.getElementById('textboxMessage').innerText = tagList.text;
});

Controls.Textbox


var txtHello = new controls.Textbox({
	id:'txtHelloWorld'
	parent: 'textboxExample'
});
txtHello.change.bind(function () {
  document.getElementById('textboxMessage').innerText = txtHello.text;
});

Controls.Textarea


var txtareaHello = new controls.Textarea({
	id:'txtareaHelloWorld',
	parent: 'textareaExample'
});
txtareaHello.change.bind(function () {
  document.getElementById('textareaMessage').innerText = txtareaHello.text;
});