File: /var/www/html/tmpr/..//tmpr/..//tmpr/../tmpr/..//pages/alphabet.php
<link href="pages/alphabet/resources/jquery.selectareas.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
#output {
padding: 20px;
width: 500px;
height: 500px;
position: relative;
color: #666;
font-weight: bold;
font-size: 20px;
font-family: monospace;
overflow-x: auto;
overflow-y: scroll;
}
div.image-decorator {
-moz-border-radius : 5px 5px 5px 5px;
-moz-box-shadow : 0 0 6px #c8c8c8;
-webkit-border-radius : 5px 5px 5px 5px;
-webkit-box-shadow : 0 0 6px #c8c8c8;
background-color : #ffffff;
border : 1px solid #c8c8c8;
border-radius : 5px 5px 5px 5px;
box-shadow : 0 0 6px #c8c8c8;
display : inline-block;
padding : 5px 5px 5px 5px;
position: relative;
margin-bottom: 10px;
}
</style>
<script src="pages/alphabet/jquery-1.11.3.min.js"></script>
<script src="pages/alphabet/jquery.selectareas.js" type="text/javascript"></script>
<script type="text/javascript">
<?php list($width, $height, $type, $attr) = getimagesize("v/uploads/3DFonts/$picture");
?>
$(document).ready(function () {
$('img#example').selectAreas({
minSize: [10, 10],
allowNudge: true,
onChanged: debugQtyAreas,
width: <?php echo $width; ?>,
height: <?php echo $width; ?>,
areas: <?php if(!empty($result[0]["params2"]) )
{?>
<?php
echo $result[0]["params2"];?>
<?php }
else{?>
[
{
x: 10,
y: 20,
width: 60,
height: 100,
}
]
<?php } ?>
});
$('#btnView').click(function () {
var areas = $('img#example').selectAreas('areas');
displayAreas(areas);
});
$('#btnViewRel').click(function () {
var areas = $('img#example').selectAreas('relativeAreas');
displayAreas(areas);
});
$('#btnReset').click(function () {
$("#saveAlphabet").trigger("click");
output("reset")
$('img#example').selectAreas('reset');
});
$('#btnDestroy').click(function () {
$('img#example').selectAreas('destroy');
output("destroyed")
$('.actionOn').attr("disabled", "disabled");
$('.actionOff').removeAttr("disabled")
});
$('#btnCreate').attr("disabled", "disabled").click(function () {
$('img#example').selectAreas({
minSize: [10, 10],
onChanged : debugQtyAreas,
width: 500,
});
output("created")
$('.actionOff').attr("disabled", "disabled");
$('.actionOn').removeAttr("disabled")
});
$('#btnNew').click(function () {
var areaOptions = {
x: Math.floor((Math.random() * 200)),
y: Math.floor((Math.random() * 200)),
width: Math.floor((Math.random() * 100)) + 50,
height: Math.floor((Math.random() * 100)) + 20,
};
output("Add a new area: " + areaToString(areaOptions))
$('img#example').selectAreas('add', areaOptions);
});
$('#btnNews').click(function () {
var x = Math.floor((Math.random() * 200));
var y = Math.floor((Math.random() * 200));
var width = 100;
var height = 100;
var areaOption1 = {
x:x,
y: y,
width: width,
height: height,
};
output("Added: " + areaToString2(areaOption1) )
$('img#example').selectAreas('add', [areaOption1]);
var areas = $('img#example').selectAreas('areas');
displayAreas(areas);
});
});
var selectionExists;
function areaToString (area) {
/* return areaToAlphabet(area.id) + ':'+( typeof area.id === "undefined" ? "" : (area.id + ": ")) + area.x + ':' + area.y + ' ' + area.width + 'x' + area.height + '<br />';*/
return areaToAlphabet(area.id)+ '-> ' + area.x + ':' + area.y + ' ' + area.width + 'x' + area.height + '<br />'
}
function areaToString2 (area) {
return ( typeof area.id === "undefined" ? "" : (area.id + ": ")) + area.x + ':' + area.y + ' ' + area.width + 'x' + area.height + '<br />';
}
function areaToString3 (area) {
return ( typeof area.id === "undefined" ? "" : (area.id + ":")) + area.x + ':' + area.y + ':' + area.width + ':' + area.height+':' + areaToAlphabet(area.id)+ ',';
}
function areaToAlphabet(number) {
var value = number+1;
var value = (value + 9).toString(36).toUpperCase();
return value;
}
function output (text) {
$('#output').html(text);
}
// Log the quantity of selections
function debugQtyAreas (event, id, areas) {
console.log(areas.length + " areas", arguments);
var areas = $('img#example').selectAreas('areas');
displayAreas(areas);
};
// Display areas coordinates in a div
function displayAreas (areas) {
var text = "";
$.each(areas, function (id, area) {
text += areaToString(area);
});
output(text);
};
//load coordinate
function loadDefaults () {
var areas = $('img#example').selectAreas('areas');
displayAreas(areas);
};
window.onload = loadDefaults;
</script><link href="alphabet/jquerysctipttop.css" rel="stylesheet" type="text/css">
<div id="wrapper" align="center">
<input type="hidden" name="msg_id" value="<?php print "$msg_id"; ?>">
<table width="100%" border="0" cellpadding="10">
<tbody>
<tr>
<td valign="top" width="100%"><div class="image-decorator">
<img alt="Image principale" id="example" width="100%" src="v/uploads/3DFonts/<?php echo $picture ?>"/>
<br>
</div> </td>
<td valign="top" width="400" style="padding: 20px" >
<div class="form-group">
<div class="input-group m-b"> <span class="input-group-addon lt no-border bg-info dk">Title</span>
<input name="mytitle" style="width:80%" type="text" placeholder="Caption" class="form-control input-lg m-r-lg" id="alphabet" maxlength="100" value="<?php print basename($title) ; ?>"></div>
</div>
<div id="output" class='output'>
</td>
</tr>
</tbody>
</table>
</td>
</div>