Recycling Corner/Molecule color picker

Molecule color picker

The code below was used to create the palettes shown above. It's a pure javascript color picker that can be used for changing color of selected part of molecule, applet background, or any feature of the model (cartoons, surfaces, etc.).

Sample of use

Pick color for currently selected part of molecule:
<script type="text/javascript">
writeColorPicker("atoms", "0", "h")
</script>
<br>
Pick color for background:
<script type="text/javascript">
writeColorPicker("background", "0", "h", "D9EBFF")
</script>
<br>
Pick color for cartoons:
<script type="text/javascript">
writeColorPicker("cartoons", "0", "v")
</script>

JavaScript code needed

/* Color picker for Jmol, by Sérgio Ceroni da Silva, April 2007
   Code modifications by Angel Herráez; extraction into a function to generalize its use.

   Use according to Creative Commons "Attribution-ShareAlike" License, 
   http://creativecommons.org/licenses/by-sa/3.0/
*/

// These messages can be customized:
var msg1 = "click on the desired color"
var msg2 = "default"
var msg3 = "click here for the default color"


/* Instructions for calling function:
      objectToBeColored = 'atoms', 'background', etc.
                          (any object in Jmol syntax, to which the picked color will be applied)
      jmolAppletID = any ID assigned to the applet upon which the function must act
                     (by default, applets get the ID 0, 1, etc. in the order they are written to the page)
      makeVerticalTable = 'v' or 'vert' for vertical table, 'h' or none for horizontal table
      defaultColor = RRGGBB color code, or false (don't offer picking the default color)
*/

function writeColorPicker(objectToBeColored, jmolAppletID, makeVerticalTable, defaultColor)
{ if (arguments.length<1) { objectToBeColored="" }
  if (arguments.length<2) { jmolAppletID="0" }
  if (arguments.length<3) { makeVerticalTable="h" }
  if (arguments.length<4) { defaultColor=false }
  if (!jmolAppletID || jmolAppletID=="") { jmolAppletID="0" }
  if (makeVerticalTable.charAt(0) == "v") { makeVerticalTable=true }
  else { makeVerticalTable = false }
  var paletteColors = new Array('00', '66', '99', 'cc', 'ff');
  var hexColor;
  var htmlCode = '<table border="0" cellpadding="0" cellspacing="0">';
  if (defaultColor)
  { htmlCode += '<tr><td colspan="25" align="center" '
      + ' style="background-color:#' + defaultColor + '; border:1px solid #000; cursor:pointer;"'
      + ' onClick="jmolScript(\'color ' + objectToBeColored + ' [x' + defaultColor + ']\');"'
      + ' onMouseOver="window.status=\'' + msg3 + '\';"'
      + ' onMouseOut="window.status=\' \';"'
      + ' title="' + msg3 + '">' + msg2 + '</td></tr>'
      + '<tr><td colspan="25"></td></tr>'; 
  }
  for (gValue = 0; gValue < 5; gValue++)
  { if (!makeVerticalTable) { htmlCode += '<tr>' }
    for (rValue = 0; rValue < 5; rValue++) 
    { if (makeVerticalTable) { htmlCode += '<tr>' }
      for (bValue = 0; bValue < 5; bValue++) 
      { hexColor = paletteColors[rValue] + paletteColors[gValue] + paletteColors[bValue];
        htmlCode += '<td width="6" height="8"'
          + ' style="background-color:#' + hexColor + '; cursor:pointer;"'
          + ' onClick="jmolScript(\'color ' + objectToBeColored + '[x' + hexColor + ']\',' + jmolAppletID + ');"'
          + ' onMouseOver="window.status=\'' + msg1 + '\';"'
          + ' onMouseOut="window.status=\' \';"'
          + ' title="' + msg1 + '"'
          + '></td>';
      }
      if (makeVerticalTable) { htmlCode += '</tr>'; }
    }
    if (!makeVerticalTable) { htmlCode += '</tr>'; }
  }
  htmlCode += '</table>';

  document.writeln(htmlCode);
}

Example pages

See it in action.

Contributors

AngelHerraez, Ceroni