Human Body Parts Selector (Vue JS)

This is a library for those who want to be able to allow users to select body parts.

Example

https://vue-body-part-selector.netlify.app/

source code for the example above

Intallation

yarn add vue-body-part-selector

or

npm i vue-body-part-selector

Usage

Import component & register it e.g.

<script>
import Vue from 'vue';
import VueBodyPartSelector from 'vue-body-part-selector';

export default Vue.extend({
  name: 'App',
  components: {
    VueBodyPartSelector
  },
  data() {  
  ... // etc.

Use it e.g.

      <vue-body-part-selector 
        :selection.sync="selection" // make sure to define selection in data
        @click="handleClick"
        :disabled="false"
        :multiple="true"
        body-colour="green"
        selection-colour="yellow"
        :show-parts="{ // won't show head, face and neck
          'head': false,
          'face': false,
          'neck': false,
        }"
      />

Props

| Name | Type | Desc | Default | |------------------|--------|-------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------| | disabled | bool | If true, you can't select anything. | false | | multiple | bool | If true allows you to select multiple body parts. | false | | body-colour | string | Determines colour of the body. | black | | selection-colour | string | Determines colour of selection when clicked. | black | | show-parts | object | Allows you to hide body parts. Useful if you only want e.g. the front or the back or half of the front. (Please see below for structure). | object where all parts are true |

show-parts object structure

Note: true means show, false means hide.

{
    'head': true,
    'face': true,
    'neck': true,
    'shoulder-left': true,
    'shoulder-right': true,
    'arm-left': true,
    'forearm-left': true,
    'arm-right': true,
    'forearm-right': true,
    'chest-left': true,
    'chest-right': true,
    'belly-left': true,
    'ribs-left': true,
    'belly-right': true,
    'belly': true,
    'ribs-right': true,
    'thigh-left': true,
    'innerthigh-left': true,
    'feet-left': true,
    'calf-left': true,
    'knee-left': true,
    'thigh-right': true,
    'genitalia': true,
    'innerthigh-right': true,
    'right-feet': true,
    'calf-right': true,
    'knee-right': true,
    'elbow-right': true,
    'hand-right': true,
    'elbow-left': true,
    'hands-left': true,
    'armback-left': true,
    'leg-left': true,
    'buttock': true,
    'loin': true,
    'column': true,
    'head-back': true,
    'nape': true,
    'armback-right': true,
    'leg-right': true,
    'back-right': true,
    'clavicule-right': true,
    'back-left': true,
    'clavicule-left': true,
}

License: MIT

Credits

Credits go to Carlos Fuentes who did a great job making the base for this. Check source here.