Εβδομάδα 5: Προβολή της σελίδας της Wikipedia για κάποιο έμβιο ον και αναζήτηση για κάποιο συγκεκριμένο έμβιο ον
#Προβολή της σελίδας της Wikipedia για κάποιο έμβιο ον και αναζήτηση για κάποιο συγκεκριμένο έμβιο ον 23/09/2015 - 29/09/2015
Αυτή τη βδομάδα έγινε υλοποίηση της προβολής της σελίδας της wikipedia για κάποιο έμβιο ον ή τάξη. Ο κώδικας της σελίδας βρίσκεται στο αρχείο article.html. Αν ο χρήστης πατήσει κάποια εικόνα μπορεί να τη δει σε lightbox (υλοποιημένο με το plugin lity).
Τα περιεχόμενα της σελίδας λαμβάνονται ή δημιουργούνται δυναμικά και τοποθετούνται στα παρακάτω divs.
<div class="container-fluid" id="article_container">
<div class="row">
<div class="col-sm-2" ><div id="statistics"><p id="totalNumber"></p><p><canvas id="myChart" width="200" height="200"></canvas></p><p id="current"></p></div></div>
<div class="col-sm-7" ><div id="article" ></div></div>
<div class="col-sm-3" ><div id="custom_info"></div></div>
</div>
</div>Ο χρήστης μεταβαίνει στο πλήρες άρθρο της wikipedia όταν πατήσει τον αντίστοιχο σύνδεσμο.
Η μεταφορά δεδομένων από σελίδα σε σελίδα, αλλά και η διατήρηση των δεδομένων μέχρι ο χρήστης να κλείσει το browser γίνεται με τη χρήση μεταβλητών sessionStorage.
Όταν ο χρήστης επιλέγει να δει λεπτομέρειες για κάποιο ον, αποθηκεύονται σε sessionStorage το όνομα του και η βαθμίδα του.
$(document).on("click", ".details", function() {
var name = getName($(this));
var rank = getRank($(this));
console.log('rank'+rank);
name =name.replace(/ /g,"_");
var img_url = $(this).closest('.thumbnail').find('img').attr('src');
var title = $(this).closest('.thumbnail').find('.caption').children().first().text();
query = getSummaryQuery(name);
sessionStorage.setItem('title',title);
sessionStorage.setItem('rank',rank);
var queryUrl = query;
$.ajax({
dataType: "jsonp",
url: queryUrl,
rank: rank,
img_url: img_url,
title: title,
name: name,
success: summarySuccess
});
});Όταν ο χρήστης ανοίγει κάποιο από τους κόμβους του δέντρου, αποθηκεύεται το περιεχόμενο της σελίδας ώστε να διατηρηθεί σταθερό όσο ο χρήστης έχει ανοιχτή το browser.
function openSuccess(_data) {
var thumb_url="";
var rank = this.rank;
$("#" + rank).html("");
var results = _data.results.bindings;
if (results.length > 0) {
for (var i in results) {
var src = results[i].taxon.value;
var name = nameFromUrl(src);
if (results[i].thumb==undefined){
thumb_url="assets/no_img_thumb.jpg"}
else{
thumb_url = results[i].thumb.value;
}
var html = thumbHtml(name, thumb_url,rank);
$("#" + rank).append(html);
sessionStorage.setItem('treePage',$('#tree_container').html());
}
} else {
$("#" + rank).append("</br>No results!");
}
}Για το σκοπό αυτό προστέθηκε στο τέλος του index.html ο παρακάτω έλεγχος που φορτώνει το δέντρο από το sessionStorage αν υπάρχει.
<script src="js/tree.js"></script>
<script>
if (sessionStorage.getItem('treePage')!=undefined){
console.log('tree page');
$('#tree_container').html(sessionStorage.getItem('treePage'));
}
$(document).ajaxError(function(){
alert("An error occurred!");
});
</script>Στη σελίδα about.html υπάρχει ένας έλεγχος που ελέγχει αν ο χρήστης έχει διαλέξει κάποιο κόμβο και με τη βοήθεια του plugin wikiblurb λαμβάνει το άρθρο της wikipedia και το προσθέτει στη σελίδα.
<script type="text/javascript">
if (sessionStorage.getItem('title')!=undefined){
$('#article').wikiblurb({
section: 0,
page: sessionStorage.getItem('title'),
});
}else
{$('#article').html("No article selected!")}
</script>Η δημιουργία του διάγραμματος στα δεξιά της σελίδας γίνεται με το chart.js . Τα δεδομένα για το διάγραμμα δημιουργούνται στο αρχείο statistics.js
var randomColorGenerator = function() {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};
function shadeColor2(color, percent) {
var f = parseInt(color.slice(1), 16),
t = percent < 0 ? 0 : 255,
p = percent < 0 ? percent * -1 : percent,
R = f >> 16,
G = f >> 8 & 0x00FF,
B = f & 0x0000FF;
return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
}
function totalQuerySuccess(_data) {
console.log(_data);
var totalCount = 0;
var data = [];
var dbpedia_results = _data.results.bindings;
for (var j in dbpedia_results) {
var name = nameFromUrl(dbpedia_results[j].order.value);
var count = dbpedia_results[j].count.value;
totalCount = totalCount + parseInt(count);
name = name.replace("_", ' ');
if (name == sessionStorage.getItem('title')) var currRanking = parseInt(j) + 1;
data.push({
value: count,
color: randomColorGenerator(),
highlight: randomColorGenerator(),
label: '#' + j + ':' + name
});
}
var total = parseInt(j) + 1;
$('#totalNumber').html('Number of ' + sessionStorage.getItem('rank') + ' in ' + getPrevRank(sessionStorage.getItem('rank')) + ' ' + sessionStorage.getItem('prevRankName') + 'is:' + total +
' with a total of ' + totalCount + ' members');
$('#current').html('#' + currRanking + ":" + sessionStorage.getItem('title'));
var ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var myPieChart = new Chart(ctx).Pie(data);
}
var prevRankName = sessionStorage.getItem('prevRankName');
var rank = sessionStorage.getItem('rank');
var prevRank = getPrevRank(rank);
query = getTotalQuery(prevRank, prevRankName, rank);
console.log("stats" + query);
var dbUrl = "http://dbpedia.org/sparql"
var queryUrl = encodeURI(dbUrl + "?query=" + query + "&format=json");
$.ajax({
dataType: "jsonp",
url: queryUrl,
success: totalQuerySuccess
});Επίσης υλοποιήθηκαν δύο λειτουργίες αναζήτησης. Η πρώτη είναι η αναζήτηση που γίνεται στη σελίδα article.html και εμφανίζει το άρθρο της wikipedia για το ον που αναζητάει ο χρήστης, αν αυτό υπάρχει.
function searchArticle() {
var queryUrl = articleExistsQuery($('#searchBox').val())
$.ajax({
dataType: "jsonp",
url: queryUrl,
success: searchSuccess
});
}
function saveTree() {
var currPage = getCurrPage();
if (currPage == 'index.html') sessionStorage.setItem('treePage', $('#tree_container').html());
}
function searchSuccess(_data) {
var results = _data.query.pages;
for (var i in results) {}
if (i > 0) {
$('#article').wikiblurb({
section: 0,
page: $('#searchBox').val()
});
} else {
$('#article').html("Wikipedia article doesn't exist")
}
}Και το δεύτερο είδος αναζήτησης είναι αυτό που μπορεί να κάνει ο χρήστης στη σελίδα index.html. Σε αυτό το είδος αναζήτησης, το δέντρο διαμόρφώνεται ανάλογα με τον όρο αναζήτησης. Εκτελείται η συνάρτηση executeQuery, που χρησιμοποιείται όταν ο χρήστης ανοίγει ένα κόμβο, και εκτελείται τόσες φορές μέχρι να γεμίσει το δέντρο ως τη τάξη του όρου αναζήτησης.
function makeSearchTreeSuccess(_data){
$("#kingdom").nextAll().html("");
var kingdom ='';
var phylum ='';
var classis ='';
var order = '';
var family = '';
var genus = '';
var type = '';
var results = _data.results.bindings;
for (var i in results) {
if (results[i].kingdom!=undefined){
var kingdom = nameFromUrl(results[i].kingdom.value);
kingdom=kingdom.replace(/ /g,"_");
}
if (results[i].phylum!=undefined){
var phylum = nameFromUrl(results[i].phylum.value);
phylum=phylum.replace(/ /g,"_");
}
if (results[i].classis!=undefined){
var classis = nameFromUrl(results[i].classis.value);
classis=classis.replace(/ /g,"_");
}
if (results[i].order!=undefined){
var order = nameFromUrl(results[i].order.value);
order=order.replace(/ /g,"_");
}
if (results[i].family!=undefined){
var family = nameFromUrl(results[i].family.value);
family=family.replace(/ /g,"_");
}
if (results[i].genus!=undefined){
var genus = nameFromUrl(results[i].genus.value);
genus=genus.replace(/ /g,"_");
}
console.log("phylum is "+phylum)
if (kingdom=='Animal'||kingdom=='Animalia')
kingdom_type="Animal";
if (kingdom=='Plant'||kingdom=='Plantae')
kingdom_type="Plant";
}
//Find phylums
query = getOpenQuery(kingdom_type, 'kingdom', 'phylum');
console.log(query);
executeQuery(query, 'phylum', type);
//Find classes
query = getOpenQuery(phylum, 'phylum', 'class');
console.log(query);
executeQuery(query, 'class', phylum);
//Find orders
query = getOpenQuery(classis, 'class', 'order');
console.log(query);
executeQuery(query, 'order', classis);
//Find families
query = getOpenQuery(order, 'order', 'family');
console.log(query);
executeQuery(query, 'family', order);
//Find genii
query = getOpenQuery(family, 'family', 'genus');
console.log(query);
executeQuery(query, 'genus', family);
}