GUI: Base of Color module.

gui/js/UI.js

@@ -243,9 +243,42 @@ UI.Text.prototype.setText = function ( value ) {
 };
 
 
-// FloatNumber
+// Color
 
-UI.FloatNumber = function ( position ) {
+UI.Color = function ( position ) {
+
+	UI.Element.call( this );
+
+	this.dom = document.createElement( 'span' );
+	this.dom.style.position = position || 'relative';
+	this.dom.style.width = '64px';
+	this.dom.style.height = '16px';
+	this.dom.style.backgroundColor = '#000000';
+
+	return this;
+
+};
+
+UI.Color.prototype = new UI.Element();
+UI.Color.prototype.constructor = UI.Color;
+
+UI.Color.prototype.getValue = function () {
+
+	return this.dom.style.backgroundColor;
+
+};
+
+UI.Color.prototype.setValue = function ( value ) {
+
+	this.dom.style.backgroundColor = value;
+	return this;
+
+};
+
+
+// Number
+
+UI.Number = function ( position ) {
 
 	UI.Element.call( this );
 
@@ -318,37 +351,37 @@ UI.FloatNumber = function ( position ) {
 
 };
 
-UI.FloatNumber.prototype = new UI.Element();
-UI.FloatNumber.prototype.constructor = UI.FloatNumber;
+UI.Number.prototype = new UI.Element();
+UI.Number.prototype.constructor = UI.Number;
 
-UI.FloatNumber.prototype.getValue = function () {
+UI.Number.prototype.getValue = function () {
 
 	return parseFloat( this.dom.value );
 
 };
 
-UI.FloatNumber.prototype.setValue = function ( value ) {
+UI.Number.prototype.setValue = function ( value ) {
 
 	this.dom.value = value.toFixed( 2 );
 	return this;
 
 };
 
-UI.FloatNumber.prototype.setMin = function ( value ) {
+UI.Number.prototype.setMin = function ( value ) {
 
 	this.min = value;
 	return this;
 
 };
 
-UI.FloatNumber.prototype.setMax = function ( value ) {
+UI.Number.prototype.setMax = function ( value ) {
 
 	this.max = value;
 	return this;
 
 };
 
-UI.FloatNumber.prototype.onChange = function ( callback ) {
+UI.Number.prototype.onChange = function ( callback ) {
 
 	this.onChangeCallback = callback;
 	return this;

gui/js/ui/Sidebar.Properties.Material.js

@@ -17,17 +17,30 @@ Sidebar.Properties.Material = function ( signals ) {
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Color' ).setColor( '#666' ) );
-	var materialColor = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
+	
+	var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' );
 	container.add( materialColor );
 	container.add( new UI.HorizontalRule() );
 
+	container.add( new UI.Text().setText( 'Ambient' ).setColor( '#666' ) );
+	
+	var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' );
+	container.add( materialAmbient );
+	container.add( new UI.HorizontalRule() );
+
+	container.add( new UI.Text().setText( 'Specular' ).setColor( '#666' ) );
+	
+	var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' );
+	container.add( materialSpecular );
+	container.add( new UI.HorizontalRule() );
+
 	container.add( new UI.Text().setText( 'Map' ).setColor( '#666' ) );
 	var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
 	container.add( materialMap );
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Opacity' ).setColor( '#666' ) );
-	var materialOpacity = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update );
+	var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update );
 	container.add( materialOpacity );
 	container.add( new UI.HorizontalRule() );
 
@@ -61,7 +74,9 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			materialName.setText( object.material.name );
 			materialClass.setText( getMaterialInstanceName( object.material ) );
-			materialColor.setText( '#' + object.material.color.getHex().toString(16) );
+			materialColor.setValue( '#' + object.material.color.getHex().toString( 16 ) );
+			if ( object.material.ambient ) materialAmbient.setValue( '#' + object.material.ambient.getHex().toString( 16 ) );
+			if ( object.material.specular ) materialSpecular.setValue( '#' + object.material.specular.getHex().toString( 16 ) );
 			materialMap.setText( object.material.map );
 			materialOpacity.setValue( object.material.opacity );
 			materialTransparent.setText( object.material.transparent );

gui/js/ui/Sidebar.Properties.Object3D.js

@@ -12,23 +12,23 @@ Sidebar.Properties.Object3D = function ( signals ) {
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Position' ).setColor( '#666' ) );
-	var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
-	var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
-	var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
+	var positionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
+	var positionY = new UI.Number( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
+	var positionZ = new UI.Number( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
 	container.add( positionX, positionY, positionZ );
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Rotation' ).setColor( '#666' ) );
-	var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
-	var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
-	var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
+	var rotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
+	var rotationY = new UI.Number( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
+	var rotationZ = new UI.Number( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
 	container.add( rotationX, rotationY, rotationZ );
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Scale' ).setColor( '#666' ) );
-	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
-	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
-	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
+	var scaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
+	var scaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
+	var scaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
 	container.add( scaleX, scaleY, scaleZ );
 	container.add( new UI.Break(), new UI.Break(), new UI.Break() );