<div>
<div id="sticker-1" style="width:90px">
<img src="assets/pix0.png" style="width:100%; height:100%"/>
</div>
</div>
$('#sticker-1').utSticker();
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();
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
}
});
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
}
}
});
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"
}
}
});
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
}
}
});
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%"
}
}
});
<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);
});
})
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'));
});
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({ });