Jmol Color Picker Box
(a PopUp colorpicker for Jmol web pages)

by Jonathan Gutow (with significant help from Angel Herráez) July 2010

See below for information on usage and getting the javascript code.


Select an Orbital:
No attempt has been made to synchronize the color picker with the default colors for when an MO is made, because the color picker can only choose one color.
MO Color:
The script for MO Color Picker Box:
<script type="text/javascript">
var scriptStr1 = 'color mo $COLOR$;';
jmolColorPickerBox(scriptStr1,[255,255,0],"MOColorBox","0");
</script>
Carbon Atom Color:
The script for Carbon Atom Color Picker Box:
<script type="text/javascript">
var scriptStr2 = 'select carbon; color atom $COLOR$;';
jmolColorPickerBox(scriptStr2, [127,127,127]);
</script>
Hydrogen Atom Color:
The script for Hydrogen Atom Color Picker Box:
<script type="text/javascript">
var scriptStr3 = 'select hydrogen; color atom $COLOR$;';
jmolColorPickerBox(scriptStr3, [255,255,255]);
</script>
Background Color:
Ditto...

Get the javascript file (version 1.2).
***Note: if you used version 1.1 or earlier the function name has been refactored to better match the Jmol.js conventions.  This means the function call begins with a lower case "j" instead of an uppercase "J".

This javascript package provides a color picker box that can pass the user's chosen color into a Jmol script which is passed to the applet.

To make a Jmol color picker box you need:
*JmolColorPicker.js and Jmol.js

Usage

Where ever you want a popup color picker box include a script like

<script type="text/javascript">
var scriptStr2 = 'select carbon; color atom $COLOR$;';
jmolColorPickerBox(scriptStr2, [100,100,100], "colorBox1", "0");
</script>

The only function that will not change name or syntax is jmolColorPickerBox(scriptStr, rgb, boxIdStr,  appletId).
USE OTHER FUNCTIONS IN THE JAVASCRIPT LIBRARY AT YOUR OWN RISK.
All parameters are strings although appletId could potentially be a number, but it is used to make a string.
  scriptStr should contain $COLOR$ where you wish the color string to be passed to Jmol in the script you provide.
  rgb is the browser standard 0-255 red-green-blue values specified as an array [red, green, blue] default = [127,127,127] a dark grey.
  boxIdStr should be a string that is unique to the web document, if not provided it will be set to colorBoxJ, J=0, 1, 2... in the order created.
  appletId is the standard Jmol id of applet you want the colorpicker to send the script to.  Default = "0".

Advanced use (if you want the script to change based on user interaction with the page)
To have the jmolColorPickerBox pass the picked color to a function of your own so that you can modify the script after the colorBox
  has been defined, you can pass an array in place of scriptStr.  This behaves much the way functions in Jmol.js do.  The array
  must have the following format [yourFunctionName, yourParam1, yourParam2,...]:
      yourFunctionName should not be in quotes, just the exact character sequence used to name your function.
      yourParamX can be anything you want.
      
      This array should be a variable with global scope on the page.  It is suggested that you declare and populate it with
      default values in the header of the page.
      
  The declaration of your function must be exactly (choose your own name for the function and variables):
  function yourFunctionName(rgbCodeStr, yourArray, appletID)
      rgbCodeStr is the rgb code string to pass to Jmol as part of the script command.  Make sure to put spaces on either side
          when adding it to the scriptStr.
      yourArray should be your global array, which you can update based on your own criteria.  Remember that element 0 is the
          name of your function.
      appletID is the applet number or string name that should be passed through jmolScript type functions to make sure that the
          correct applet gets the script.