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({
      
      });