Re: Changing colour of model item when clicked

There is no directly such method (out of the box) but with some additional work is possible. Example:

To implement this, we need to use some javascript coding. 

Here we will change the color of particular model item using a pupup  with checkboxs and a slider for the same task

For each checkbox we can simply define a function which will set a predefined color:

In this case / here  we need to define for each color a separate function - some work intensive approach. Each checkbox has an separate class where we  can define the desired color  (in STYLES /Application) example:

...
.item-checkbox-blue {
background-color: rgba(0,0,255,0.2); 
color: Blue;
font-type: bold;
font-size:12px;
}

.item-checkbox-brown {
background-color: rgba(165,42,42,0.2); 
color: Brown;
font-type: bold;
font-size:12px;
}

.item-checkbox-CadetBlue{
background-color: rgba(95, 158, 160,0.2); 
color: CadetBlue;
font-type: bold;
font-size:12px;
}

.item-checkbox-green {
background-color: rgba(0,128,0,0.2); 
color: Green;
font-type: bold;
font-size:12px;
}

.item-checkbox-red {
background-color: rgba(255,0,0,0.2); 
color: Red;
font-type: bold;
font-size:12px;
}
....

The slider in the example have a binding to the value of parameter e.g. : app.params['ItemColor']

When we change the value of the slider this will change the parameter ItemColor. Using a watch construct we can call a function when the value of the parameter changes e.g.:

/////////////////////////////////////////
$scope.$watch( // watch for the color setting
 function() {
 return $scope.app.params['ItemColor'];
 }
 ,
 function() 
 {
 $scope.setColorOfCheckboxGlob($scope.app.params['ItemColor']) ;
 }
 //end of the second function
);

The function will set the selected color to the modelitem and will update the checkbox settings. So, it will select the checkbox with the number corresponding to the value of the slider (it has the same range as the number of defined checkboxes for the different colors)

So here it will pass simple the value of the slider to the function setColorOfCheckboxGlob()

$scope.setColorOfCheckboxGlob = function(numb)
{
 var name='checkbox-'+numb;
//this means from the value /number we will find
// the name of the checkbox with the correct name = color name
 $scope.resetColorOfCheckbox(numb);//will unset all other checkboxes
//and it will set the checkbox coresponding the the color value
 var class1=$scope.view.wdg[name]['class'];//will find the checkbxo widget
 var arrayOfStrings = class1.split('-'); //will extract the color name from the classname
/***
example for class definiton green
.item-checkbox-green {
background-color: rgba(0,128,0,0.2); 
color: Green;
font-type: bold;
font-size:12px;
}
***/
 var color=arrayOfStrings[arrayOfStrings.length-1];
 console.warn("color="+color);
// will set now the correct color
 $scope.view.wdg['modelItem-1']['color'] = $scope.hex2rgba($scope.colourNameToHex(color),1.0);
};
/////

And here the addtional function for converting the colorname to Hex value /

$scope.colourNameToHex = function(colour)
{
 var colours = {
 "aliceblue":"#f0f8ff","antiquewhite":"#faebd7","aqua":"#00ffff","aquamarine":"#7fffd4","azure":"#f0ffff",
 "beige":"#f5f5dc","bisque":"#ffe4c4","black":"#000000","blanchedalmond":"#ffebcd","blue":"#0000ff","blueviolet":"#8a2be2","brown":"#a52a2a","burlywood":"#deb887",
 "cadetblue":"#5f9ea0","chartreuse":"#7fff00","chocolate":"#d2691e","coral":"#ff7f50","cornflowerblue":"#6495ed","cornsilk":"#fff8dc","crimson":"#dc143c","cyan":"#00ffff",
 "darkblue":"#00008b","darkcyan":"#008b8b","darkgoldenrod":"#b8860b","darkgray":"#a9a9a9","darkgreen":"#006400","darkkhaki":"#bdb76b","darkmagenta":"#8b008b","darkolivegreen":"#556b2f",
 "darkorange":"#ff8c00","darkorchid":"#9932cc","darkred":"#8b0000","darksalmon":"#e9967a","darkseagreen":"#8fbc8f","darkslateblue":"#483d8b","darkslategray":"#2f4f4f","darkturquoise":"#00ced1",
 "darkviolet":"#9400d3","deeppink":"#ff1493","deepskyblue":"#00bfff","dimgray":"#696969","dodgerblue":"#1e90ff",
 "firebrick":"#b22222","floralwhite":"#fffaf0","forestgreen":"#228b22","fuchsia":"#ff00ff",
 "gainsboro":"#dcdcdc","ghostwhite":"#f8f8ff","gold":"#ffd700","goldenrod":"#daa520","gray":"#808080","green":"#008000","greenyellow":"#adff2f",
 "honeydew":"#f0fff0","hotpink":"#ff69b4",
 "indianred":"#cd5c5c","indigo":"#4b0082","ivory":"#fffff0","khaki":"#f0e68c",
 "lavender":"#e6e6fa","lavenderblush":"#fff0f5","lawngreen":"#7cfc00","lemonchiffon":"#fffacd","lightblue":"#add8e6","lightcoral":"#f08080","lightcyan":"#e0ffff","lightgoldenrodyellow":"#fafad2",
 "lightgrey":"#d3d3d3","lightgreen":"#90ee90","lightpink":"#ffb6c1","lightsalmon":"#ffa07a","lightseagreen":"#20b2aa","lightskyblue":"#87cefa","lightslategray":"#778899","lightsteelblue":"#b0c4de",
 "lightyellow":"#ffffe0","lime":"#00ff00","limegreen":"#32cd32","linen":"#faf0e6",
 "magenta":"#ff00ff","maroon":"#800000","mediumaquamarine":"#66cdaa","mediumblue":"#0000cd","mediumorchid":"#ba55d3","mediumpurple":"#9370d8","mediumseagreen":"#3cb371","mediumslateblue":"#7b68ee",
 "mediumspringgreen":"#00fa9a","mediumturquoise":"#48d1cc","mediumvioletred":"#c71585","midnightblue":"#191970","mintcream":"#f5fffa","mistyrose":"#ffe4e1","moccasin":"#ffe4b5",
 "navajowhite":"#ffdead","navy":"#000080",
 "oldlace":"#fdf5e6","olive":"#808000","olivedrab":"#6b8e23","orange":"#ffa500","orangered":"#ff4500","orchid":"#da70d6",
 "palegoldenrod":"#eee8aa","palegreen":"#98fb98","paleturquoise":"#afeeee","palevioletred":"#d87093","papayawhip":"#ffefd5","peachpuff":"#ffdab9","peru":"#cd853f","pink":"#ffc0cb","plum":"#dda0dd","powderblue":"#b0e0e6","purple":"#800080",
 "rebeccapurple":"#663399","red":"#ff0000","rosybrown":"#bc8f8f","royalblue":"#4169e1",
 "saddlebrown":"#8b4513","salmon":"#fa8072","sandybrown":"#f4a460","seagreen":"#2e8b57","seashell":"#fff5ee","sienna":"#a0522d","silver":"#c0c0c0","skyblue":"#87ceeb","slateblue":"#6a5acd","slategray":"#708090","snow":"#fffafa","springgreen":"#00ff7f","steelblue":"#4682b4",
 "tan":"#d2b48c","teal":"#008080","thistle":"#d8bfd8","tomato":"#ff6347","turquoise":"#40e0d0",
 "violet":"#ee82ee",
 "wheat":"#f5deb3","white":"#ffffff","whitesmoke":"#f5f5f5",
 "yellow":"#ffff00","yellowgreen":"#9acd32"};
 if (typeof colours[colour.toLowerCase()] != 'undefined')
 return colours[colour.toLowerCase()];
 return false;
};
////////////////////////////////
///////////////////color handling ///////
$scope.hex2rgba = function (hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
}
else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
};
// hexToRGB('#FF0000', 0.5);
$scope.rgb2hex= function (rgb){
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
};
/////////////////////////////////////////

This above is an example of one possible way but definitely it is not the shortest and   most efficient way to do this!

In this example the color was set to an existing modelitem.

When you want to assign a color to a component which is not define in an explicit modelitem widget  -  you can check the Post "How to select model components in a 3d model without explicit definition of model Items?"

There is some information about how to access component without explicit modelitem widget definition