### Sticker are constrained to their parent element

    <div>
      <div id="sticker-1" style="width:90px">
        <img src="assets/pix0.png" style="width:100%; height:100%"/>
      </div>
    </div>

    $('#sticker-1').utSticker();

### Multiple Stickers Instantiation

The following code will create sticker automatically keep references for retrieving them on load.

    <div>
      <img class="sticker-2" id="sticker-2-1" src="assets/pix1.png" width="50px"/>
      <img class="sticker-2" id="sticker-2-2" src="assets/pix2.png" width="50px"/>
      <img class="sticker-2" id="sticker-2-3" src="assets/pix3.png" width="50px"/>
    </div>

    $('.sticker-2').utSticker();

### Sticker Without Drop Control

You can remove some of the display by passing ui object properties to the options.

    <div>
      <img class="sticker-3" src="assets/pix4.png" width="50px"/>
    </div>

    $('.sticker-3').utSticker({
      id: 'sticker3',
      ui: {
        remove: false
      }
    });

### Positioned Stickers

You can set default sticker position by use cx/left/right,cy/top/bottom properties, and size by width,height,ratio properties.

    <div>
      <div id="sticker-4-1>
        <img src="assets/pix5.png" style="width:100%; height:100%"/>
      </div>
      <div id="sticker-4-2">
        <img src="assets/pix5.png" style="width:100%; height:100%"/>
      </div>
      <div id="sticker-4-3">
        <img src="assets/pix5.png" style="width:100%; height:100%"/>
      </div>
    </div>

    $('#sticker-4-1').utSticker({
          styles:{
            pos:{
              cx: "25%",
              cy: "50%",
              width: 58,
              height: 48
            }
          }
        });
          $('#sticker-4-2').utSticker({
          styles:{
            pos:{
              right: "10%",
              cy: "50%",
              width: 58,
              ratio: 58/48,
              rotation: 0
            }
          }
        });
        $('#sticker-4-3').utSticker({
          styles:{
            pos:{
              cx: "50%",
              bottom: "5px",
              width: 58,
              height: 48
            }
          }
        });

25%
50%
90%
50%
5px from bottom

### Set movable area

You can set movable area for stickers, used indent and outdent.

    <div>
      <div id="sticker-7-1>
        <img src="assets/pix1.png" style="width:100%; height:100%"/>
      </div>
      <div id="sticker-7-2">
        <img src="assets/pix2.png" style="width:100%; height:100%"/>
      </div>
      <div id="sticker-7-3">
        <img src="assets/pix3.png" style="width:100%; height:100%"/>
      </div>
    </div>

    $('#sticker-7-1').utSticker({
      styles:{
        pos:{
          cx: "25%",
          cy: "50%",
          width: 50,
          height: 78,
          rotation: -30
        },
        parentIndent: {
          left: 0,
          top: 0,
          right: "50%",
          bottom: "0"
        }
      }
    });
    $('#sticker-7-2').utSticker({
      styles:{
        pos:{
          right: "10%",
          cy: "50%",
          width: 50,
          ratio: 50/74,
          rotation: 30
        },
        parentIndent: {
          left: "50%",
          top: 0,
          right: "0",
          bottom: "0"
        }
      }
    });
    $('#sticker-7-3').utSticker({
      styles:{
        pos:{
          cx: "50%",
          bottom: "5px",
          width: 50,
          height: 38,
          rotation: 0
        },
        parentIndent: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        selfOutdent: {
          left: "50%",
          top: "30px",
          right: "50%",
          bottom: "30px"
        }
      }
    });

### Rotation limits and snap

You can set different rotation limits and snap.

    <div>
      <img id="sticker-9-1" src="assets/pix1.png" style="width:60px"/>
      <img id="sticker-9-2" src="assets/pix2.png" style="width:60px"/>
      <img id="sticker-9-3" src="assets/pix3.png" style="width:70px"/>
    </div>

    $('#sticker-9-1').utSticker({
      styles:{
        autoflip: false, // disable auto flip content
        pos:{
          cx: "25%",
          cy: "50%"
        },
        rotationLimits: {
          min: 0,
          max: 180
        },
        rotationSnap: {
          base: 45,
          precision: 4
        }
      }
    });
    $('#sticker-9-2').utSticker({
      styles:{
        autoflip: false, // disable auto flip content
        pos:{
          cx: "75%",
          cy: "50%"
        },
        rotationLimits: {
          min: -180,
          max: 0
        },
        rotationSnap: {
          base: 30
        }
      }
    });
    $('#sticker-9-3').utSticker({
      styles:{
        autoflip: false, // disable auto flip content
        pos:{
          cx: "50%",
          bottom: "0"
        },
        rotationSnap: {
          base: 20,
          precision: 10
        }
      }
    });

### Rotate and resize buttons

You can skip 'rotate' and 'resize' fields in 'ui' parameters and manage bugs by 'editable' parameter.

    <div>
          <img id="sticker-10-1" src="assets/pix1.png" style="width:50px"/>
          <img id="sticker-10-2" src="assets/pix2.png" style="width:50px"/>
          <img id="sticker-10-3" src="assets/pix3.png" style="width:50px"/>
          <img id="sticker-10-4" src="assets/pix1.png" style="width:50px"/>
          <img id="sticker-10-5" src="assets/pix2.png" style="width:50px"/>
          <img id="sticker-10-6" src="assets/pix3.png" style="width:50px"/>
          </div>

    $('#sticker-10-1').utSticker({
      editable: {
        movable: true,
        rotatable: true,
        resizable: true
      },
      styles:{
        autoflip: false, // disable auto flip content
        pos:{
          cx: "25%",
          cy: "25%"
        }
      }
    });
    $('#sticker-10-2').utSticker({
      editable: {
        rotatable: false,
        resizable: true
      },
      styles:{
        autoflip: false, // disable auto flip content
        pos:{
          cx: "50%",
          cy: "25%"
        }
      }
    });
    $('#sticker-10-3').utSticker({
      editable: {
        rotatable: true,
        resizable: false
      },
      styles:{
        autoflip: false, // disable auto flip content
        pos:{
          cx: "75%",
          cy: "25%"
        }
      }
    });

    $('#sticker-10-4').utSticker({
      editable: {
        rotatable: true,
        resizable: true
      },
      styles:{
        proportional: false,
        autoflip: false, // disable auto flip content
        pos:{
          cx: "25%",
          cy: "75%"
        }
      }
    });
    $('#sticker-10-5').utSticker({
      editable: {
        rotatable: false,
        resizable: true
      },
      styles:{
        proportional: false,
        autoflip: false, // disable auto flip content
        pos:{
          cx: "50%",
          cy: "75%"
        }
      }
    });
    $('#sticker-10-6').utSticker({
      editable: {
        rotatable: true,
        resizable: false
      },
      styles:{
        proportional: false,
        autoflip: false, // disable auto flip content
        pos:{
          cx: "75%",
          cy: "75%"
        }
      }
    });

### Create stickers dynamically

    <div id="sticker-panel-3">
      <button id="add-sticker-3">ADD</button>
    </div>

    UT.Expression.ready(function(post){
      // define the sticker_keys that
      // will hold name of all sticker instances.
      var sticker_keys = post.storage.sticker_keys || []

      /**
       * Create the sticker HTML markup, append it to a parent node,
       * and make it a sticker.
       */
      function addSticker(name){
        // Define some random values for the start position.
        var top = parseInt(Math.random() * 150, 10),
            left = parseInt(Math.random() * 250, 10),
            size = parseInt(Math.random() * 75, 10) + 25,
            rotation = parseInt(Math.random() * 2 * Math.PI);
        $('<img src="assets/pix0.png" width="50px" height="50px"/>')
          .appendTo('#sticker-panel-3')
          .utSticker({
            id: name,
            styles:{
              pos:{
                top: top,          // distance from top in px
                left: left,        // distance from left in px
                width: size,       // width in pixels
                height: size,      // height in pixels
                rotation: rotation // rotation in radian
              }
            }
          });
      }

      /**
       * Load existing data if any
       */
      $(post.storage.sticker_keys).each(function(_, sticker_key){
        if(post.storage[sticker_key]){
          addSticker(sticker_key); // This will load the data from storage.
        }
      });

      // Bind the ADD button
      $('#add-sticker-3').on('click', function(event){
        var name = 'sticker-' + UT.uuid();
        sticker_keys.push(name);
        post.storage.sticker_keys = sticker_keys;
        addSticker(name);
      });
    })

### Set the editable attribute.

By default, the sticker is editable in editor but not in player. But you can do the opposite of course.

    <div>
      <img src="assets/pix0.png" style="width:50px; height:50px"/>
    </div>

    $('#sticker-5').utSticker({
      editable: !(post.context.editor)
    });
    $('.sticker-editable').on('click', function(event){
      $('#sticker-5').utSticker('editable',
        ($(event.target).data('editable') === 'editable'));
    });

### Try to use...

Change parameters for sticker, and click "update" to apply it.

    <div>
      <img src="assets/pix6.png" style="width:50px; height:50px"/>
    </div>

    $('#sticker-6').utSticker({
          {
      id: "",
      editable: true, // sticker can be edited by user
      ui: { // show/hide sticker's buttons
        edit: false,
        resize: false, // you can hide resize or rotate button, and keep "proportional" as true, to rotate and resize by one button
        rotate: true, // you can hide resize or rotate button, and keep "proportional" as true, to rotate and resize by one button
        remove: true
        // custom: "class1" -- also you can add custom buttons
      },
      styles: {
        proportional: true, // the sticker will resizing proportionally
        autoflip: true, // auto flip sticker content if angle more 180deg
        useBounds: true, // calculate sticker bounds for validate position in movable area
        pos: {
          width: null, // sticker width
          ratio: null, // sticker size ratio (e.g. width/height)
          height: null, // sticker height
          cx: null, // x-position from center (default '50%')
          cy: null, // y-position from center (default '50%')
          left: null, // position from parent left side
          right: null, // position from parent right side
          top: null, // position from parent top side
          bottom: null, // position from parent bottom side
          rotation: 0, // angle for rotation in deg
          zIndex: 0 // z-index of sticker
        },
        parentIndent: { // set movable area for sticker, based on parent container
          top: null,
          left: null,
          bottom: null,
          right: null
        },
        selfOutdent: { // set outdent for sticker, based on current sticker size
          top: "0%",
          left: "0%",
          bottom: "0%",
          right: "0%"
        },
        sizeLimits: { // min and max sticker's size
          minWidth: "10%",
          minHeight: "10%",
          maxWidth: "90%",
          maxHeight: "90%"
        },
        rotationLimits: { // start and end angle for rotation
          min: "-180",
          max: "180"
        },
        rotationSnap: { // snap for rotation
          base: 90,
          precision: 3
        },
        topOnFocus: true // every time when focus was captured, sticker will moved to top layer
      },
      i18n:{ // tip's text
        edit: "edit",
        resize: "resize",
        rotate: "rotate",
        remove: "remove"
      }
    }
          });