I am working currently on a project and i haven't found a solution how to realize it yet. I am not asking for the solution. I would be very thankful if someone could give me some hints or tell me in which direction i could go to reach my goal.
Currently i am thinking about trying to solve it by programming an web-application. But i am not sure if a windows forms application would even be better. I am also open for other solutions.
My goal is following:
I have some (real world) documents which are being scanned and afterwards scanned with an OCR-Scanner, which generates some PDF-Documents. Next i want to open one of these generated PDF-Files in a User Interface which shows me the PDF. The user should be able to select some (one after another) text-blocks, which are downloaded from a database, and drag them over the pdf and drop it at some position.
Now i want to save or print the pdf with the text-blocks, just as the user sees it. Kind of making a screenshot of the pdf but resulting in a pdf file with the same dimensions as before. Currently i have no idea how to "merge" these two.
Which technologies should i use. What would you recommend me. Would a web-application or something native be better suitable for that purpose.
I have written some kind of mockup to show what i mean. Please put some pdf named "testpdf.pdf" to the same folder if you want to test it. It works on Chrome ... not sure about the others.
Thanks a lot
Kerem
var movabelelements=document.getElementsByClassName("moveableElement");
Array.from(movabelelements).forEach(element => {
dragElement(element);
});
function dragElement(elem){
var pos1=0,pos2=0,pos3=0,pos4=0;
elem.onmousedown=dragMouseDown;
function dragMouseDown(e){
e=e||window.event;
e.preventDefault();
pos3=e.clientX;
pos4=e.clientY;
document.onmouseup=closeDragElement;
document.onmousemove=elementDrag;
}
function elementDrag(e){
e=e||window.event;
e.preventDefault();
pos1=pos3-e.clientX;
pos2=pos4-e.clientY;
pos3=e.clientX;
pos4=e.clientY;
elem.style.top=(elem.offsetTop -pos2)+"px";
elem.style.left=(elem.offsetLeft-pos1)+"px";
}
function closeDragElement(){
document.omouseup=null;
document.onmousemove=null;
}
}
function printPDF(){
alert('Der Bericht sollte jetzt gedruckt werden');
}
function highLightAllValues(){
Array.from(movabelelements).forEach(element => {
element.classList.add("highlighted");
});
setTimeout(function(){
Array.from(movabelelements).forEach(element => {
element.classList.remove("highlighted");
});
}, 1500);
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,h2{
text-align:center
}
.pdffile{
height: 100%;
width: 100%;
}
body,html{
height: 100%;
width: 100%;
}
#values_list_values{
padding: 15px;
}
#values_list{
text-align: center;
}
#values_list_values div{
margin: 15px;
border-bottom: solid;
border-width: 1px;
}
#values_list_values div:hover{
color: red;
}
#values_list_values div span{
margin: 10px;
}
.moveableElement{
border-style: solid;
border-color: transparent;
position: absolute;
z-index: 20;
padding: 20px;
}
.moveableElement:hover{
border-style: solid;
border-color: red;
cursor: move;
}
#values_list{
position: relative;
width: 20%;
display: inline-block;
padding: 10px;
padding-bottom: 50px;
}
#pdfFileWrapper{
width: 80%;
float: left;
height: 100%;
}
#highLightAllValuesButton{
width: 90%;
display: inline-block;
padding: 20px;
margin: 10px;
}
.highlighted{
border-style: solid;
border-color: red;
border-width: 2px;
}
#printButtonArea{
position: fixed;
bottom: 10px;
right: 10px;
width: 20%;
height: 50px;
line-height: 50px;
}
#printButtonArea button{
width: 100%;
height: 100%;
}<!DOCTYPE html>
<html>
<head>
<title>Vorschau</title>
<link rel="stylesheet" href="vorschau.css">
</head>
<body>
<h1>Druckvorschau PDF</h1>
<div id="pdfFileWrapper">
<object class="pdffile" data="testpdf.pdf" type="application/pdf">
alt : <a href="testpdf.pdf">PDF-Vorschau Fehlgeschlagen - Bitte anderen Browser Probieren</a>
</object>
</div>
<div id="values_list">
<div id="printButtonArea">
<button onclick="printPDF()">Print</button>
</div>
<h2>Werte aus der Datenbank</h2>
<button id="highLightAllValuesButton" onclick="highLightAllValues()">Show all text blocks</button>
<div id="values_list_values">
<div>
<h3>One</h3>
<span>xy</span>
</div>
<div>
<h3>Material ID</h3>
<span>12</span>
</div>
<div>
<h3>Some Other ID</h3>
<span>some other id</span>
</div>
<div>
<h3>Identifikation</h3>
<span>lastvalue</span>
</div>
</div>
</div>
<div id="1" style="top:200px;left:100px" class="moveableElement">
Example value
</div>
<div id="2" style="top:250px;left:150px"class="moveableElement">
Car One
</div>
<div id="3" style="top:300px;left:200px" class="moveableElement">
<span>whatever</span>
</div>
<div id="4" style="top:350px;left:250px" class="moveableElement">number 12
</div>
</body>
<script src="vorschau.js"></script>
</html>