SVG Based Triangle Picker Plugin For jQuery - Picker.js

A jQuery & SVG based triangle picker that enables the user to select a point within the triangle and returns an object containing Top Middle, Bottom Left, and Bottom Right positions after selections.

How to use it:

1. Include jQuery library and the jQuery Picker.js plugin's file on the html page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="picker.js"></script>
<link rel="stylesheet" href="style.css">

2. Create a container element for the triangle picker.

<div id="picker"></div>

3. Initialize the triangle picker.

$('#picker').trianglePicker();

4. Get the Top Middle, Bottom Left, and Bottom Right positions with the onChange callback.

// trianglePicker(el, options, onChange)
$('#picker').trianglePicker(null, function(name, values) {
  console.log(values)
});

5. Default plugin options.

polygon: {
  width: null,
  fillColor: null,
  line: { 
    width: 2,
    color: 'black',
    centerLines: true,
    centerLineWidth: null
  }
},
handle: {
  color: 'yellow',
  width: null,
  height: null,
  borderRadius: null
},
inputs: {
  bottomRight: {
    name: 'bottomRight',
    id: '',
    class: ''
  },
  topMiddle: {
    name: 'topMiddle',
    id: '',
    class: ''
  },
  bottomLeft: {
    name: 'bottomLeft',
    id: '',
    class: ''
  },
  decimalPlaces: 2
}

---

This awesome jQuery plugin is developed by james-wasson. For more Advanced Usages, please check the demo page or visit the official website.