Stamps and Symbols
Using any image source as a stamps require the implementation of a simple drag and drop handling. We support both PNG and SVG image data sources.
This general method relate to the following, RxCore.addSignature, RxCore.markupImageStamp and RxCore.markupSymbol.
Given an image source defined as shown below.
<img id="symbol1" src=".\stamps\mystampimage.png" draggable="true" ondragstart="dragstamp(event)" ondragend="dragend(event)" width="96" />
<img id="symbol2" src=".\stamps\mystampsvg.svg" draggable="true" ondragstart="dragstamp(event)" ondragend="dragend(event)" width="96" />
You can handle the drag and drop functionality using the following drag and drop event methods.
function dragstamp(ev) {
var imageobject = document.getElementById(ev.target.id)
//the width and height that will appear in the drawing is set in the
//drag object passed to the RxCore method as a json string.
var width = 128
var height = 128
//you can set individual sizes depending on the stamp or symbol
if (ev.target.id === 'symbol2') {
width = 32;
height = 32;
}
var mydragobject= {
src: imageobject.src,
width: width,
height: height,
id: ev.target.id,
};
ev.dataTransfer.setData("text", JSON.stringify(mydragobject));
RxCore.markupImageStamp(true);
}
function dragend(ev) {
RxCore.markupImageStamp(false);
}
Full example
<html>
<head>
<style>
#rxcontainer {
position: relative;
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#rxcanvas { border: 1px solid #000; }
#imageDisp { position: absolute; top: 1px; left: 1px; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
#canv3D {
position: absolute; top: 1px; left: 1px;
background: -webkit-linear-gradient(#FFFFFF, #b5b5b5); /* Safari 5.1-6.0 */
background: -o-linear-gradient(#FFFFFF, #b5b5b5); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(#FFFFFF, #b5b5b5); /* Firefox 3.6-15 */
background: linear-gradient(#FFFFFF, #b5b5b5); /* Standard syntax */
}
#symbols{
position: absolute;
z-index: 9;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
text-align: center;
top: 0px;
left:0px;
padding: 5px;
user-select:none;
}
#symbolsheader {
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
padding: 5px;
user-select:none;
}
#symbolslist{
overflow-y:scroll;
height: 500px;
}
</style>
</head>
<body>
<div id="symbols">
<div id="symbolsheader">Symbols</div>
Use drag and drop<br> to add stamps to <br> the drawing.
<p>
<div id="symbolslist">
<img id="symbol4" src=".\symbols\approved.svg" draggable="true" ondragstart="dragstamp(event)" ondragend="dragstampend(event)" width="96" height="22"> </img><br>
<img id="symbol5" src=".\symbols\checkmark.svg" draggable="true" ondragstart="dragstamp(event)" ondragend="dragstampend(event)" width="96" height="22"> </img><br>
<img id="symbol6" src=".\symbols\crossred.svg" draggable="true" ondragstart="dragstamp(event)" ondragend="dragstampend(event)" width="96" height="22"> </img><br>
Use drag and drop<br> to add sybols to <br> the drawing.
<p>
<img id="symbol1" src=".\symbols\location-blue@128px.png" draggable="true" ondragstart="dragsymbol(event)" ondragend="dragsymbolend(event)" width="96"> </img><br>
<img id="symbol2" src=".\symbols\location-gray@128px.png" draggable="true" ondragstart="dragsymbol(event)" ondragend="dragsymbolend(event)" width="96"> </img><br>
</div>
</div>
<div id="rxcontainer">
</div>
<script src="assets/scripts/foxiframeconnect.js"></script>
<script src="assets/scripts/rxconfig.js"></script>
<script src="assets/scripts/rxcorefunctions.js"></script>
<script type="text/javascript" src="assets/scripts/three.min.js"></script>
<script type="text/javascript" src="assets/scripts/detector.js"></script>
<script type="text/javascript" src="assets/scripts/GLTFLoader.js"></script>
<script type="text/javascript" src="assets/scripts/jquery-2.1.0.min.js"></script>
<script src="dragelement.js"></script>
<script type="text/javascript" charset="utf-8">
var bguireadycalled = false;
var bfoxitreadycalled = false;
var binitfileopened = false;
function dragsymbol(ev) {
var imageobject = document.getElementById(ev.target.id)
var width = ev.target.naturalWidth;
var height = ev.target.naturalHeight;
var mydragobject= {
src: imageobject.src,
width: width,
height: height,
id: ev.target.id,
};
ev.dataTransfer.setData("text", JSON.stringify(mydragobject));
RxCore.markupSymbol(true);
}
function dragstamp(ev) {
var imageobject = document.getElementById(ev.target.id)
var width = ev.target.naturalWidth;
var height = ev.target.naturalHeight;
if (ev.target.id === 'symbol4') {
width = 128;
height = 30;
}
if (ev.target.id === 'symbol5') {
width = 32;
height = 32;
}
if (ev.target.id === 'symbol6') {
width = 32;
height = 32;
}
var mydragobject= {
src: imageobject.src,
width: width,
height: height,
id: ev.target.id,
};
ev.dataTransfer.setData("text", JSON.stringify(mydragobject));
RxCore.markupImageStamp(true);
}
function dragsymbolend(ev) {
RxCore.markupSymbol(false);
}
function dragstampend(ev) {
RxCore.markupImageStamp(false);
}
$(document).ready(function () {
dragElement(document.getElementById(("symbols")));
//file to open on startup
var drawing = "E:\\\\Rasterex\\\\Upload\\\\040915 MOBSLAKT.pdf";
var canvdim = {
offsetWidth: 0,
offsetHeight: 0
};
RxCore.initialize(canvdim);
RxCore.GUI_Ready.connect(function () {
addFoxitdocBarebone();
bguireadycalled = true;
openInitFile(drawing);
});
RxCore.GUI_FoxitReady.connect(function () {
bfoxitreadycalled = true;
openInitFile(drawing);
RxCore.GUI_FileLoadComplete.connect(function (fileurl, activefile) {
console.log(fileurl);
});
});
});
function openInitFile(initialDoc) {
if (bguireadycalled && bfoxitreadycalled) {
if (binitfileopened == false) {
binitfileopened = true;
RxCore.openFile(initialDoc);
}
}
}
</script>
</body>
</html>