master
Tancre 5 years ago
parent 25dc31518f
commit 4223b807b1

@ -1,36 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title> @@@ilinχ </title>
<meta name='ocr-system' content='tesseract 3.04.01' />
<meta name='ocr-capabilities' content='ocr_page ocr_carea ocr_par ocr_line ocrx_word'/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css"> <style type="text/css">
body { background-color: black; body {
color: black; background-color: black;
font-family: mono; font-family: mono;
margin:0; overflow: hidden;
padding:0; }
height: 100vh;
width: 100vw;} #page_1{
width: 5000px;
height: 8000px;
cursor: move;
}
.ocrx_word{ .ocrx_word{
cursor: grab; cursor: grab;
} }
/* .ocrx_word{position: absolute;}*/
</style> </style>
</head> </head>
<body> <body>
<div class='ocr_page' id='page_1' title='image "hypervirus2-01.tif"; bbox 0 0 1749 12409; ppageno 0'> <div class='ocr_page draggable' id='page_1' title='image "hypervirus2-01.tif"; bbox 0 0 1749 12409; ppageno 0'>
<div class='ocr_carea' id='block_1_1' title="bbox 78 91 352 146"> <div class='ocr_carea' id='block_1_1' title="bbox 78 91 352 146">
<p class='ocr_par' dir='ltr' id='par_1_1' title="bbox 78 91 352 146"> <p class='ocr_par' dir='ltr' id='par_1_1' title="bbox 78 91 352 146">
<span class='ocr_line' id='line_1_1' title="bbox 78 91 352 146; baseline 0 -12; x_size 55; x_descenders 12; x_ascenders 13"><span class='ocrx_word' id='word_1_1' title='bbox 78 91 352 146; x_wconf 84' lang='eng' dir='ltr' style="font-size: 30px; color: white;"><b>Hypervirus</b></span> <span class='ocr_line' id='line_1_1' title="bbox 78 91 352 146; baseline 0 -12; x_size 55; x_descenders 12; x_ascenders 13"><span class='ocrx_word' id='word_1_1' title='bbox 78 91 352 146; x_wconf 84' lang='eng' dir='ltr' style="font-size: 30px;"><b>Hypervirus</b></span>
</span> </span>
</p> </p>
</div> </div>
@ -566,37 +563,17 @@
</p> </p>
</div> </div>
</div> </div>
<script type="text/javascript" src="../scripts/drag.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// var elements = document.getElementsByClassName('.ocrx_word');
// var myFunction = function() {
// var attribute = this.getAttribute("data-myattribute");
// alert(attribute);
// };
// for (var i = 0; i < elements.length; i++) {
// elements[i].addEventListener('click', myFunction, false);
// }
// elements.addEventListener("mouseover", func, false);
// w.addEventListener("mouseout", func1, false);
// function func()
// { // not needed since item is already global,
// // I am assuming this is here just because it's sample code?
// // var item = document.getElementById("button");
// w.setAttribute("style", "background-color:blue;")
// }
// function func1() var l = $('.ocr_line');
// { l.each( function(x){ this.title = "hypervirus"; });
// w.setAttribute("style", "background-color:green;") var p = $('.ocr_par');
// } p.each( function(x){ this.title = "hypervirus"; });
var c = $('.ocr_carea');
c.each( function(x){ this.title = "hypervirus"; });
var ww = $('.ocrx_word');
var ww = $('.ocrx_word');
ww.each( function(x){ ww.each( function(x){
let t = $(this).attr('title').split(" "), let t = $(this).attr('title').split(" "),
left = parseInt(t[1]), left = parseInt(t[1]),
@ -606,13 +583,10 @@ var ww = $('.ocrx_word');
top *= 0.5; top *= 0.5;
this.style.left = left + 'px'; this.style.left = left + 'px';
this.style.top = top + 'px'; this.style.top = top + 'px';
this.title = 'hypervirus'; this.style.visibility = "hidden;"
this.title = "hypervirus";
}); });
// ww.each( function(x){
// this.style.title = 'hypervirus';
// });
window.setInterval( function(){ window.setInterval( function(){
// console.log('interval', ww); // console.log('interval', ww);
@ -622,21 +596,9 @@ var ww = $('.ocrx_word');
var cars = ["red", "white"]; var cars = ["red", "white"];
var fs =["9px","15px"]; var fs =["9px","15px"];
$(w).css('color', cars[Math.floor(Math.random()*cars.length)]); $(w).css('color', cars[Math.floor(Math.random()*cars.length)]);
$(w).css('visibility', ''); $(w).css('visibility', 'visible');
// $(w).css('font-size', fs[Math.floor(Math.random()*fs.length)]);
// $(w).css('letter-spacing', fs[Math.floor(Math.random()*fs.length)]);
}, 250); }, 250);
// document.getElementById("page_1").addEventListener("mousemove", myFunction);
// function myFunction() {
// document.getElementById("page_1").style.color = "red";
// }
$( function() {
$( ".draggable" ).draggable();
} );
//store all class 'ocr_line' in 'lines' //store all class 'ocr_line' in 'lines'
var lines = document.querySelectorAll(".ocr_line"); var lines = document.querySelectorAll(".ocr_line");
@ -649,9 +611,16 @@ var ww = $('.ocrx_word');
for (var e = 0; e < words.length; e++){ for (var e = 0; e < words.length; e++){
var span = words[e]; var span = words[e];
span.classList.add("draggable"); span.classList.add("draggable");
span.title = "hypervirus";
} }
} }
// CURSOR GRAB AND RELEASE
$('.draggable').on("mousedown",function(){
$('.draggable').css('cursor', 'grabbing');
}).on("mouseup mouseleave",function(){
$('.draggable').css('cursor', 'grab');
});
</script> </script>
</body> </body>

@ -14,7 +14,12 @@
<style type="text/css"> <style type="text/css">
body { background-color: black; body { background-color: black;
color: black; color: black;
font-family: mono;} font-family: mono;
}
#page_1{
width: 79vw;
overflow-y: hidden;
}
.ocrx_word{ .ocrx_word{
cursor: grab; cursor: grab;
} }
@ -618,6 +623,12 @@
} }
} }
// CURSOR GRAB AND RELEASE
$('.draggable').on("mousedown",function(){
$('.draggable').css('cursor', 'grabbing');
}).on("mouseup mouseleave",function(){
$('.draggable').css('cursor', 'grab');
});
</script> </script>
</body> </body>

Loading…
Cancel
Save