Fork me on GitHub
Try the DEMO!

OMERO.figure

Customizing Bootstrap colorpicker

24 Feb 2015

When looking to add a color-picker to OMERO.figure as requested, I searched for “bootstrap colorpicker” since all the UI is currently built using the fantastic Twitter bootstrap framework. I quickly found bootstrap colorpicker which seemed to do everything I needed. The only problem was that the color-picker itself was smaller than I wanted, at only 100 pixels wide.

Before and After Customizing

The docs didn’t provide any clues on how to increase the size of the colorpicker, so I started to play with Chrome’s dev-tools and managed to add a couple of styles to double the size as follows:

<style />

  .colorpicker-hue {
      height: 200px;
      width: 30px;
      background-size: 30px 200px;
  }
  .colorpicker-saturation {
      width: 200px;
      height: 200px;
      background-size: 200px 200px;
  }
</style>
        

However, these changes alone broke the colorpicker, since it was still using the 100px size in the plugin. Fortunately a little inspection of the code revealed that these dimensions were configurable in the plugin’s ‘slider’ option.

By passing in a customised ‘slider’ option, the colorpicker works as normal at it’s new size:

<script>
$(function(){

    var sliders = {
        saturation: {
            maxLeft: 200,
            maxTop: 200,
            callLeft: 'setSaturation',
            callTop: 'setBrightness'
        },
        hue: {
            maxLeft: 0,
            maxTop: 200,
            callLeft: false,
            callTop: 'setHue'
        },
        alpha: {
            maxLeft: 0,
            maxTop: 200,
            callLeft: false,
            callTop: 'setAlpha'
        }
    };

    $('.demo').colorpicker({'sliders': sliders});
});
</script>