|
|
|
@ -1,36 +1,33 @@
|
|
|
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title></title>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
|
|
|
<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">
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
|
|
|
<title> @@@ilinχ </title>
|
|
|
|
|
<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">
|
|
|
|
|
body { background-color: black;
|
|
|
|
|
color: black;
|
|
|
|
|
font-family: mono;
|
|
|
|
|
margin:0;
|
|
|
|
|
padding:0;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100vw;}
|
|
|
|
|
body {
|
|
|
|
|
background-color: black;
|
|
|
|
|
font-family: mono;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#page_1{
|
|
|
|
|
width: 5000px;
|
|
|
|
|
height: 8000px;
|
|
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ocrx_word{
|
|
|
|
|
cursor: grab;
|
|
|
|
|
}
|
|
|
|
|
/* .ocrx_word{position: absolute;}*/
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
@ -566,37 +563,17 @@
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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);
|
|
|
|
|
<script type="text/javascript" src="../scripts/drag.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
// 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()
|
|
|
|
|
// {
|
|
|
|
|
// w.setAttribute("style", "background-color:green;")
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ww = $('.ocrx_word');
|
|
|
|
|
var l = $('.ocr_line');
|
|
|
|
|
l.each( function(x){ this.title = "hypervirus"; });
|
|
|
|
|
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');
|
|
|
|
|
ww.each( function(x){
|
|
|
|
|
let t = $(this).attr('title').split(" "),
|
|
|
|
|
left = parseInt(t[1]),
|
|
|
|
@ -606,13 +583,10 @@ var ww = $('.ocrx_word');
|
|
|
|
|
top *= 0.5;
|
|
|
|
|
this.style.left = left + '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(){
|
|
|
|
|
// console.log('interval', ww);
|
|
|
|
@ -622,21 +596,9 @@ var ww = $('.ocrx_word');
|
|
|
|
|
var cars = ["red", "white"];
|
|
|
|
|
var fs =["9px","15px"];
|
|
|
|
|
$(w).css('color', cars[Math.floor(Math.random()*cars.length)]);
|
|
|
|
|
$(w).css('visibility', '');
|
|
|
|
|
|
|
|
|
|
// $(w).css('font-size', fs[Math.floor(Math.random()*fs.length)]);
|
|
|
|
|
// $(w).css('letter-spacing', fs[Math.floor(Math.random()*fs.length)]);
|
|
|
|
|
$(w).css('visibility', 'visible');
|
|
|
|
|
}, 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'
|
|
|
|
|
var lines = document.querySelectorAll(".ocr_line");
|
|
|
|
|
|
|
|
|
@ -649,9 +611,16 @@ var ww = $('.ocrx_word');
|
|
|
|
|
for (var e = 0; e < words.length; e++){
|
|
|
|
|
var span = words[e];
|
|
|
|
|
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>
|
|
|
|
|
</body>
|
|
|
|
|