Press "Enter" to skip to content

How to Create A Tone Curve UI Component | jquery.iocurve

iocurve is a fully configurable jQuery plugin to create a Tone Curve user interface inspired by Photoshop and Lightroom where you can adjust points across a specific value range by dragging your mouse.

This is a GUI component like the “tone curve” often found in image processing programs such as Photoshop and GIMP.

How to make use of it:

1. Create a container to carry the Tone Curve UI.

<div class="iocurve"></div>

2. Download the zip and cargo the minified model of the iocurve plugin after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.iocurve.min.js"></script>

3. Call the perform on the container factor to generate a fundamental Tone Curve UI.

$(function(){
  $('.iocurve').iocurve();
});

4. Customize the Tone Curve UI. All attainable default choices:

$('.iocurve').iocurve({

  // input/output value range
  x: [0, 255],
  y: [0, 255],

  // decomposition width
  dx: 1,

  // Y axis
  y0: 0,

  // curvature
  curvature: 0.3,

  // height
  height: '100%', 

  // CSS class
  className: '',

  // CSS styles
  css: 
    position: 'relative',
    margin: '20px'
  ,

  // canvas styles
  canvas: {
    css: 
      display: 'block',
      boxShadow: '0 0 3px #000'
    ,
    fillStyle: '#fff'
  },

  // grid options
  grid: {
    strokeStyle: 'rgba(0, 0, 0, 0.2)'
  },

  // anchor options
  anchor: {
    points: [ [0, 0], [255, 255] ],
    tagName: 'a',
    className: 'anchor',
    css: 
      position: 'absolute',
      display: 'block',
      width: 18,
      height: 18,
      borderRadius: '50%',
      // border: '4px solid rgba(0, 64, 255, 0.5)',
      border: '1px solid rgba(0, 0, 0, 0.5)',
      background: '#fff',
      boxSizing: 'border-box',
      cursor: 'move',
      transform: 'translate(-50%, -50%)'
    
  },

  // bar styles
  bar: {
    visible: true,
    fillStyle: 
      positive: 'rgba(0, 100, 70, 0.2)',
      negative: 'rgba(150, 30, 70, 0.2)'
    
  },

  // plot diagram styles
  plot: 
    visible: false,
    strokeStyle: '#f00'
  ,

  // histogram styles
  histogram: ,

  // connection line styles
  controlPoint: 
    visible: false,
    strokeStyle: '#00f'
  
  
});

Create A Tone Curve UI Component, jquery.iocurve Plugin/Github


See Demo And Download

Official Website(cmiz): Click Here

This superior jQuery/javascript plugin is developed by cmiz. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *