.anno-seletedtools[tooltip]:hover:after {
content: attr(tooltip);
padding: 4px 8px;
color: #333;
position: absolute;
left:auto;
right: 105px;
top: 5px;
z-index: 20;
font-size: 15px;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #B0EEBA, #88CC7F);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B0EEBA), color-stop(1, #88CC7F));
background-image: -webkit-linear-gradient(top, #B0EEBA, #88CC7F);
background-image: -moz-linear-gradient(top, #B0EEBA, #88CC7F);
background-image: -ms-linear-gradient(top, #B0EEBA, #88CC7F);
background-image: -o-linear-gradient(top, #B0EEBA, #88CC7F);
}
#anno_this {
position: absolute;
display: inline-block;
border: #eeeeee solid 1px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
height: 200px;
border-radius: 5px;
display: none;
background-color: #f0f0f0;
-moz-box-shadow: 2px 0 14px 6px #656565;
-webkit-box-shadow: 2px 0 14px 6px #656565;
box-shadow: 2px 0 14px 6px #656565;
}
#annomodalcanvas {
position: absolute;
left: 15px;
z-index: 20;
cursor: crosshair;
}
.anno-seletedtools {
margin-left: 7px;
margin-bottom: 10px;
width: 25px;
height: 25px;
padding: 5px;
border-radius: 7px;
background-repeat: no-repeat;
background-size: 23px;
background-position: center;
background-color: #DBDBDB;
border: 2px solid #fff;
display: inline-block;
}
.anno-seletedtools:hover {
cursor: pointer;
}
#annomodaltools {
float: right;
width: 100px;
height: 100%;
left: auto;
right: 0;
position: relative;
}
#annomodalpen {
background-image: url('images/icons-01.svg');
}
#annomodalcirc {
background-image: url('images/icons-02.svg');
}
#annomodalrect {
background-image: url('images/icons-03.svg');
}
#annomodalline {
background-image: url('images/icons-04.svg');
}
#annomodaltext {
background-image: url('images/icons-05.svg');
}
#annomodalundo {
background-image: url('images/icons-06.svg');
background-color: #f0f0f0;
}
#annomodalredo {
background-image: url('images/icons-07.svg');
background-color: #f0f0f0;
}
#annomodalclear {
background-image: url('images/icons-08.svg');
}
#annomodalok {
background-image: url('images/icons-09.svg');
background-color: transparent;
}
#annomodalbw {
background-image: url('images/icons-10.svg');
}
#annomodaldowncanvas {
background-image: url('images/icons-12.svg');
}
#annomodalsave {
background-image: url('images/icons-13.svg');
}
#annomodaldownload {
background-image: url('images/icons-14.svg');
}
#annomodalnext {
margin-top: 40px;
background-image: url('images/icons-15.svg');
margin-bottom: 0;
}
#annomodalprev {
margin-top: 40px;
background-image: url('images/icons-16.svg');
margin-bottom: 0;
}
#annononepart {
background-image: url('images/icons-17.svg');
}
#annocolorselector {
background-image: url('images/icons-18.svg');
background-color: #11BC0F;
background-size: 35px;
}
#annomodalcanvas hover {
cursor: crosshair;
}
#annomodalbackdiv {
background-color: #000000;
float: left;
width: 100%;
}
#annozoom {
display: none;
position: absolute;
top: 10px;
left: 10px;
overflow: auto;
z-index: 20000;
width: 100%;
height: 100%;
background-color: #000;
padding: 15px;
}
.anno-none {
background-color: #f0f0f0;
}
.anno-none-np {
background-color: #f0f0f0;
margin-bottom: 0;
}
.anno-mb {
margin-top: auto;
margin-bottom: 0px;
position: absolute;
bottom: 0;
}
Basic init |
|
This is an example of the scripts thats init the anno_modal. |
Init Property | Default | Description |
---|---|---|
Maxsize | 900 | The size of the image in the anno_modal window all in px ( Do not add "px" after the number) every number under 500 will be ignored and set to 500 |
drawColor | "#ffffff" | The color to use as the standard to draw with. |
lineWidth | 3 | The draw width of the pen, cicle etc... tools all in px ( Do not add "px" after the number) |
selectedTool | "Pencil" | Options are: "Pencil" "Text" "Line" "Circle" "Rectangle" |
uploadScript | "php/saveupload.php" | Location of the php script that stores the created "png" pictures |
uploadDir | "../uploaded/images/" | Location of the directory of the created "png" pictures From the perspective of the "saveupload.php" script. Make sure you add the trailing "/" |
annoImgDir | "uploaded/images/" | Location of the directory of the created "png" pictures From the perspective of your page. Make sure you add the trailing "/" |
saveannoFlatten | false | setting this property to "false make pictures of only the drawm layer and NOT the image it self. (this keeps the created images small) Setting this property to "true" flattens the the image and drawn layer as one. The original image will not been replaced instead a new image will be created at the max width of the canvas. |
preloadAnotation | false | setting this property to "true" will after pageload replace all the images with the annotated stored images if these exist. This feature only works if "saveannoFlatten" is set to true |
Call Back function | Description | |
onSave |
|
function returns an Object Only when "saveannoFlatten" set to true this function will be called. format: {index:0, imagedata:'data:image/png;base64, iVBORw....''} "index" is the currently saved image index "imagedata" is the base 64 datastring of the annotated image This function will not be called when the "filename" atribute of de image is not set. |