[eluser]zimco[/eluser]
I am trying to get the data values from an XML file and use them with the GnuBookreader, but am totally confused with using CI, jquery, javascript, and the XML file together.
I have gotten as far as reading the values from the XML file with Jquery and writing them back to the screen, but now want to put those values in variables that the GnuBookreader script can use.
I am hoping somebody with alot more experience with javascript and jquery can point me in the right direction.
The XML file looks like this:
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<book>
<bookData>
<bookId> </bookId>
<leafCount>3</leafCount>
<dpi>300</dpi>
<scanLog>
<scanEvent>
<scribe>username</scribe>
<scannerEmail>[email protected]</scannerEmail>
<uploadTimeStamp>20080709123647</uploadTimeStamp>
</scanEvent>
</scanLog>
</bookData>
<pageData>
<page leafNum="0">
<handSide>RIGHT</handSide>
<origWidth>893</origWidth>
<origHeight>1155</origHeight>
</page>
</pageData>
<pageData>
<page leafNum="1">
<handSide>LEFT</handSide>
<origWidth>893</origWidth>
<origHeight>1155</origHeight>
</page>
</pageData>
<pageData>
<page leafNum="2">
<handSide>RIGHT</handSide>
<origWidth>893</origWidth>
<origHeight>1155</origHeight>
</page>
</pageData>
</book>
My CI template file loads the following in the header:
Code:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://localhost:8080/racecards/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/racecards/css/GnuBook.css">
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/jquery-1.2.6.min.js"></scrpt>
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/jquery.easing.1.3.js"></scrpt>
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/GnuBook.js"></scrpt>
</head>
CI VIEW file looks like this:
Code:
<div id="bookreader">
<div id="GnuBook" style="left:10px; right:10px; top:30px; bottom:30px;">x</div>
<scrpt type="text/javascript" src="http://localhost:8080/racecards/js/GnuBookTest.js"></scrpt>
</div>
MY javascript file, GnuBookTest.js it just reads the XML file and spits parse back to the screen.
Code:
$(document).ready(function() {
function parse(document){
$(document).find("bookData").each(function(){
$("#bookreader").append(
'<p><br />Leaf Count: '+$(this).find('leafCount').text()+
'<br />DPI: '+$(this).find('dpi').text()+
'<br />Scribe: '+$(this).find('scribe').text()+
'<br />Email: '+$(this).find('scannerEmail').text()+
'</p>'
);
});
$(document).find("pageData").each(function(){
$("#bookreader").append(
'<p><br />Page No.: '+$(this).find('page').attr('leafNum')+
'<br />Hand Side: '+$(this).find('handSide').text()+
'<br />Width: '+$(this).find('origWidth').text()+
'<br />Height: '+$(this).find('origHeight').text()+
'</p>'
);
});
}
$.ajax({
url: './book/scandata.xml', // xml file you want to parse
dataType: "xml",
success: parse,
error: function(){alert("Error: Something went wrong");}
});
});
GNUBOOK JAVASCRIPT EXAMPLE that uses static values set right in the script, rather than what i would like to do: which is use the values from the XML file.
Code:
// This file shows the minimum you need to provide to GnuBook to display a book
// Create the GnuBook object
gb = new GnuBook();
// Return the width of a given page. Here we assume all images are 800 pixels wide
gb.getPageWidth = function(index) {
return 800;
}
// Return the height of a given page. Here we assume all images are 1200 pixels high
gb.getPageHeight = function(index) {
return 1200;
}
// We load the images from archive.org -- you can modify this function to retrieve images using a different URL structure
gb.getPageURI = function(index) {
var leafStr = 'page_000';
var imgStr = (index).toString();
var re = new RegExp("0{"+imgStr.length+"}$");
var url = 'http://localhost:8080/racecards/book/pages/'+leafStr.replace(re, imgStr) + '.jpg';
return url;
}
// Return which side, left or right, that a given page should be displayed on
gb.getPageSide = function(index) {
if (0 == (index & 0x1)) {
return 'R';
} else {
return 'L';
}
}
// This function returns the left and right indices for the user-visible
// spread that contains the given index. The return values may be
// null if there is no facing page or the index is invalid.
gb.getSpreadIndices = function(pindex) {
var spreadIndices = [null, null];
if ('rl' == this.pageProgression) {
// Right to Left
if (this.getPageSide(pindex) == 'R') {
spreadIndices[1] = pindex;
spreadIndices[0] = pindex + 1;
} else {
// Given index was LHS
spreadIndices[0] = pindex;
spreadIndices[1] = pindex - 1;
}
} else {
// Left to right
if (this.getPageSide(pindex) == 'L') {
spreadIndices[0] = pindex;
spreadIndices[1] = pindex + 1;
} else {
// Given index was RHS
spreadIndices[1] = pindex;
spreadIndices[0] = pindex - 1;
}
}
return spreadIndices;
}
// For a given "accessible page index" return the page number in the book.
// For example, index 5 might correspond to "Page 1" if there is front matter such
// as a title page and table of contents.
gb.getPageNum = function(index) {
return index+1;
}
// Total number of leafs
gb.numLeafs = 15;
// Let's go!
gb.init();
