Skip to content

Commit

Permalink
Merge branch 'HEAD' of https://catalindumitru@github.com/catalindumit…
Browse files Browse the repository at this point in the history 
…ru/Proiect-AI-2012---GUI.git

Conflicts:
	WebServer/Content/Timeline.css
	WebServer/Scripts/timeline.js
  • Loading branch information
@colin-dumitru
colin-dumitru committed Jan 25, 2012
2 parents 88582b5 + f0d2e67 commit 02ed76a
Show file tree
Hide file tree
Showing 2 changed files with 334 additions and 0 deletions.
48 changes: 48 additions & 0 deletions WebServer/Content/Timeline.css.orig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
#doc{cursor:default;}

ul.selectables {padding:0;margin:0;}
ul.selectables li {list-style: none; width:190px; float:left; cursor: pointer;}
ul.selectables li span {text-align:center; background: #DDDDEE; display:block; -moz-border-radius: 8px; border-radius: 8px; margin:1px; padding:1px 0}
ul.selectables li span:hover {background: #DDF;}
ul.selectables li span.excluded {background: #EEE; color:#CCC}

.nosel{-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;}

div.tooltip {box-shadow: 0px 0px 7px #383738; background:#EEE; padding:5px; -moz-border-radius: 0 10px 10px 10px; border-radius:0 10px 10px 10px;}
div.tooltip h3 {margin-top:0;}
div.tooltip ul {padding:0;margin:0;}
div.tooltip ul li {list-style:none; cursor: pointer; margin:1px; background:#BBD; padding:1px 3px;}

h2 {margin-top:30px;}
div#situation {min-height:400px}

#canvasDiv{background:#DDDDEE; -moz-border-radius: 14px;border-radius: 14px; height: 300px; overflow: auto; }
a.clustersBtn{display:block; float:right; margin:2px; font-size:16px; cursor:pointer; background:#DDDDDD; width: 22px; height:22px; -moz-border-radius: 100px; border-radius: 100px; text-align:center;}

/* generat */
div.tooltip ul li {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #dcdcdc;
color:#777777;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}div.tooltip ul li:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}div.tooltip ul li:active {
position:relative;
top:1px;
}

canvas{margin-bottom:-2px;} /* Cam e o problemă aici. */
286 changes: 286 additions & 0 deletions WebServer/Scripts/timeline.js.orig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
var doc;
var documentId;
var clusters = [4, 6, 8, 10, 14, 18, 24, 30, 44];
var clusterIndex = 4;
var toolTip = null;
var situations;
var excludedPlayers = new Object();
var excludedPlaces = new Object();

$(document).ready(function () {
$("body").mousemove(function (e) {
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});

var split = document.URL.split("/");
documentId = split[split.length - 1];
doc = $("#doc");
tryToLoad();
});

function dateStringToDate(dateString) {
var a = dateString.split("/");
var b = a[2].split(":");
return new Date(parseInt(b[0]), parseInt(a[1]), parseInt(a[0]), parseInt(b[1]), parseInt(b[2]));
}

function tryToLoad() {
$.get("/Get/Timeline/" + documentId, function (xmlFile) {
var xml = $(xmlFile);
loaded(xml);
});
}

function loaded(xml) {
doc.append("<h1>Timeline</h1>");
doc.append("<h2>Characters</h2>");
var charUl = $("<ul></ul>").attr("id", "playerList").addClass("selectables nosel");
xml.find("characters").find("character").each(function () {
var name = $(this).attr("name");
charUl.append("<li><span>" + name + "</span></li>");
excludedPlayers[name] = false;
});
doc.append(charUl);
doc.append($("<div></div>").css({ clear: "both" }));
doc.append("<h2>Locations</h2>");
var locUl = $("<ul></ul>").attr("id", "placeList").addClass("selectables nosel");
xml.find("locations").find("location").each(function () {
locUl.append("<li><span>" + $(this).attr("name") + "</span></li>");
});
doc.append(locUl);
doc.append($("<div></div>").css({ clear: "both" }));

$("#playerList span").click(function () {
var jThis = $(this);

if (jThis.hasClass("excluded"))
jThis.removeClass("excluded");
else
jThis.addClass("excluded");

excludedPlayers[jThis.text()] = jThis.hasClass("excluded");
drawSituations(situations, clusters[clusterIndex]);
});

$("#placeList span").click(function () {
var jThis = $(this);

if (jThis.hasClass("excluded"))
jThis.removeClass("excluded");
else
jThis.addClass("excluded");

excludedPlaces[jThis.text()] = jThis.hasClass("excluded");
drawSituations(situations, clusters[clusterIndex]);
});

doc.append("<h2>Situation clusters</h2>");
var bigger = $("<a class='clustersBtn nosel'>−</span>").click(function () {
if (clusterIndex + 1 < clusters.length) {
clusterIndex++;
drawSituations(situations, clusters[clusterIndex], clusterIndex);
}
});
var smaller = $("<a class='clustersBtn nosel'>+</span>").click(function () {
if (clusterIndex - 1 >= 0) {
clusterIndex--;
drawSituations(situations, clusters[clusterIndex], clusterIndex);
}
});
doc.append(bigger);
doc.append(smaller);
doc.append($("<div></div>").css({ clear: "both" }));
doc.append("<div id='canvasDiv'></div>");

doc.append("<div id='situation'></div>");

situations = new Array();

var getAsArray = function (xml, name) {
var ret = new Array();
xml.find(name + "s").find(name).each(function () {
ret.push($(this).text());
});
return ret;
};

xml.find("situation").each(function () {
var jThis = $(this);
var paragraph = jThis.find("paragraph");
situations.push({
"initialTime": dateStringToDate(jThis.attr("initial_time")),
"finalTime": dateStringToDate(jThis.attr("final_time")),
"name": jThis.find("name").text(),
"players": getAsArray(jThis, "player"),
"objects": getAsArray(jThis, "object"),
"events": getAsArray(jThis, "event"),
"keywords": getAsArray(jThis, "keyword"),
"places": getAsArray(jThis, "place"),
"pageNumber": paragraph.attr("pageNumber"),
"paragraph": paragraph.text()
});
});

var compare = function (a, b) {
if (a.initialTime > b.initialTime) return 1;
if (a.initialTime < b.initialTime) return -1;
return 0;
};

situations.sort(compare);

drawSituations(situations, clusters[clusterIndex], clusterIndex);
}

function drawCircle(context, x, y, r) {
context.beginPath();
context.arc(x, y, r, 0, Math.PI * 2, true);
context.closePath();
context.fill();
}

function drawSituations(situations, intervals, index) {
if (toolTip != null)
toolTip.remove();

var canvasDiv = $("#canvasDiv");
canvasDiv.empty();

var canvasHeight = canvasDiv.height() -20 ;
var canvasWidth = canvasDiv.width() * (index + 1);

var canvas = $("<canvas></canvas>").attr({ id: "canv", width: canvasWidth, height: canvasHeight });
canvasDiv.append(canvas);
context = canvas[0].getContext("2d");

var min = situations[0].initialTime.getTime();
var max = situations[situations.length - 1].finalTime.getTime();
var timePeriod = (max - min) / intervals;
var canvasPeriod = canvasWidth / intervals;

var interval = new Array(intervals);
for (var i = 0; i < intervals; i++)
interval[i] = new Array();

for (var i = 0; i < situations.length; i++) {
var permitted = true;
for (var j = 0; j < situations[i].players.length; j++)
if (excludedPlayers[situations[i].players[j]])
permitted = false;
for (var j = 0; j < situations[i].places.length; j++)
if (excludedPlaces[situations[i].places[j]])
permitted = false;
if (permitted) {
var place = Math.floor((situations[i].initialTime.getTime() - min) / timePeriod);
interval[place].push(situations[i]);
}
}

var maxSits = 0;
for (var i = 0; i < interval.length; i++)
if (interval[i].length > maxSits)
maxSits = interval[i].length;

var h = canvasPeriod / 2;

// The arrow.
context.fillStyle = "#888";
context.fillRect(0, h - 0.5, canvasWidth - 5, 1);
context.beginPath();
context.moveTo(canvasWidth, h);
context.lineTo(canvasWidth - 6, h - 3);
context.lineTo(canvasWidth - 6, h + 3);
context.fill();

context.fillStyle = "#383738";

var radius = new Array(interval.length);
for (var i = 0; i < interval.length; i++) {
if (interval[i].length == 0)
continue;
var ratio = Math.sqrt(interval[i].length / Math.PI) / Math.sqrt(maxSits / Math.PI);
radius[i] = ratio * h;
drawCircle(context, i * canvasPeriod + h, h, h * ratio);
}

var currentElement = null;

var getCurrentCluster = function () {
var off = canvas.offset();
var x = window.mouseXPos - off.left;
var y = window.mouseYPos - off.top;
var currentInterval = Math.floor(x / canvasPeriod);
var centerX = currentInterval * canvasPeriod + h;
var centerY = h;
var distance = Math.sqrt(Math.pow(centerX - x, 2) + Math.pow(centerY - y, 2));

if (distance <= radius[currentInterval])
return currentInterval;
return null;
}

canvas.mousemove(function (e) {
var theNewOne = getCurrentCluster();
if (theNewOne == null) {
destroyTooltip();
currentElement = null;
}
else if (theNewOne != currentElement) {
destroyTooltip();
currentElement = theNewOne;
createTooltip(currentElement);
}
});

var createTooltip = function (currentInterval) {
var off = canvas.offset();
var x = off.left + currentInterval * canvasPeriod + h;
var y = off.top + h;
toolTip = $("<div></div>").addClass("tooltip");
doc.append(toolTip);
toolTip.css({
position: "absolute",
top: y + "px",
left: x + "px"
}).show();

var situationDiv = $("#situation");

toolTip.append("<h3>Situations:</h3>");
var ul = $("<ul></ul>");
for (var i = 0; i < interval[currentElement].length; i++) {
var sit = interval[currentElement][i];
var li = $("<li>" + sit.name + "</li>");
ul.append(li);
li.click(function (sit) {
return function () {
situationDiv.empty();
situationDiv.append("<h2>Situation: " + sit.name + "</h2>");

var parag = $("<p></p>");
var pos = ["Players", "Objects", "Events", "Places", "Keywords"];
pos.forEach(function (name) {
parag.append("<strong>" + name + ":</strong> " +
sit[name.toLowerCase()].join(", ") + "<br/>");
});

situationDiv.append(parag);
situationDiv.append("<p><strong>From page " + sit.pageNumber
+ ":</strong> " + sit.paragraph + "</p>");
}
} (sit));
}
toolTip.append(ul);
toolTip.mouseenter(function () {
toolTip.mouseleave(function () {
if (getCurrentCluster() == null)
destroyTooltip();
});
});
}
var destroyTooltip = function () {
if (toolTip)
toolTip.remove();
}
}

0 comments on commit 02ed76a

Please sign in to comment.