Skip to content

Commit

Permalink
Am făcut zoom-ul într-un fel ?i alte chestii. Am să fac filtrarea un …
Browse files Browse the repository at this point in the history 
…pic mai târziu.
  • Loading branch information
@paul-nechifor
paul-nechifor committed Jan 21, 2012
1 parent 277fc2a commit 8908ce9
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 68 deletions.
47 changes: 40 additions & 7 deletions WebServer/Content/Timeline.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,48 @@
ul.selectables {padding:0;margin:0;}
ul.selectables li {list-style: none; width:185px; float:left;}
ul.selectables li span {text-align:center; background: #CCE; display:block; -moz-border-radius: 8px; border-radius: 8px; margin:1px; padding:1px 0}
#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}

div.tooltip {background:#CCE; /*width:200px; */padding:5px 5px 15px 5px; -moz-border-radius: 0 10px 10px 10px; border-radius:0 10px 10px 10px;}
.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; margin:1px; background:#BBD; padding:1px 3px;}
div.tooltip ul li:hover {background:#DDF}
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}
canvas {margin-top:20px}

#canvasDiv{background:#DDDDEE; -moz-border-radius: 14px;border-radius: 14px; }
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. */
160 changes: 99 additions & 61 deletions WebServer/Scripts/timeline.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
var doc;
var canvas;
var context;
var canvasWidth = 740;
var canvasHeight = 100;
var currentSituation = null;
var documentId;
var clusters = [4, 6, 8, 10, 14, 18, 24, 30, 44];
var clusterIndex = 1;
var toolTip = null;

$(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();
});
Expand All @@ -17,7 +23,7 @@ function dateStringToDate(dateString) {
}

function tryToLoad() {
$.get("/Get/Timeline/10", function (xmlFile) {
$.get("/Get/Timeline/" + documentId, function (xmlFile) {
var xml = $(xmlFile);
loaded(xml);
});
Expand Down Expand Up @@ -48,14 +54,26 @@ function loaded(xml) {
jThis.addClass("excluded");
});

canvas = $("<canvas></canvas>").attr({ id: "canv", width: canvasWidth, height: canvasHeight });
doc.append(canvas);
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]);
}
});
var smaller = $("<a class='clustersBtn nosel'>+</span>").click(function () {
if (clusterIndex - 1 >= 0) {
clusterIndex--;
drawSituations(situations, clusters[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>");


context = canvas[0].getContext("2d");

var situations = new Array();

xml.find("situation").each(function () {
Expand All @@ -73,21 +91,34 @@ function loaded(xml) {

situations.sort(compare);

context.fillStyle = "#DDDDDD";
context.fillRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle = "#333355";

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

function drawCircle(x, y, r) {
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) {
if (toolTip != null)
toolTip.remove();

var canvasDiv = $("#canvasDiv");
canvasDiv.empty();
canvasDiv.css({ padding: "10px" });
var canvasWidth = canvasDiv.width();
var canvasHeight = Math.ceil(canvasWidth / intervals);

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

//context.fillStyle = "#FFF";
//context.fillRect(0, 0, canvasWidth, canvasHeight);
context.fillStyle = "#383738";

var min = situations[0].initialTime.getTime();
var max = situations[situations.length - 1].finalTime.getTime();
var timePeriod = (max - min) / intervals;
Expand All @@ -114,36 +145,42 @@ function drawSituations(situations, intervals) {
continue;
var ratio = Math.sqrt(interval[i].length / Math.PI) / Math.sqrt(maxSits / Math.PI);
radius[i] = ratio * h;
drawCircle(i * canvasPeriod + h, h, h * ratio);
drawCircle(context, i * canvasPeriod + h, h, h * ratio);
}

var currentElement = null;

canvas.mousemove(function (e) {
var getCurrentCluster = function () {
var off = canvas.offset();
var x = e.pageX - off.left;
var y = e.pageY - off.top;
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]) {
if (currentElement != currentInterval) {
destroyTooltip();
currentElement = currentInterval;
createTooltip(off.left + centerX, off.top + centerY);
} else {
//moveTooltip(off.left + x + 2, off.top + y + 2);
}
} else {
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 toolTip;
var createTooltip = function (x, y) {
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({
Expand All @@ -158,41 +195,42 @@ function drawSituations(situations, intervals) {
var ul = $("<ul></ul>");
for (var i = 0; i < interval[currentElement].length; i++) {
var xml = interval[currentElement][i].xml;
var name = xml.find("name").text();
var li = $("<li>" + name + "</li>");
var li = $("<li>" + xml.find("name").text() + "</li>");
ul.append(li);
li.hover(function () {
// TODO: E greșit aici. Repar mai târziu.
situationDiv.empty();
situationDiv.append("<h2>" + $(this).text() + "</h2>");

var parag = $("<p></p>");
var addThings = function (elem, name) {
var p = name + ": ";
xml.find(elem).each(function (i) {
p += ((i > 0) ? ", " : "") + "<span>" + $(this).text() + "</span>";
});
parag.append(p + "<br/>");
};
addThings("player", "Players");
addThings("object", "Objects");
addThings("event", "Events");
addThings("keyword", "Keywords");
situationDiv.append(parag);
situationDiv.append("<p>" + xml.find("paragraph").text() + "</p>");
});
li.click(function (xml) {
return function () {
situationDiv.empty();
situationDiv.append("<h2>Situation: " + xml.find("name").text() + "</h2>");

var parag = $("<p></p>");
var addThings = function (elem, name) {
var p = "<strong>" + name + ":</strong> ";
xml.find(elem).each(function (i) {
p += ((i > 0) ? ", " : "") + "<span>" + $(this).text() + "</span>";
});
parag.append(p + "<br/>");
};
addThings("player", "Players");
addThings("object", "Objects");
addThings("event", "Events");
addThings("keyword", "Keywords");
situationDiv.append(parag);
var paragraph = xml.find("paragraph");
situationDiv.append("<p><strong>From page " + paragraph.attr("pageNumber")
+ ":</strong> " + paragraph.text() + "</p>");
}
} (xml));
}
toolTip.append(ul);

toolTip.mouseenter(function () {
toolTip.mouseleave(function () {
if (getCurrentCluster() == null)
destroyTooltip();
});
});
}
var destroyTooltip = function () {
if (toolTip)
toolTip.remove();
}
var moveTooltip = function (x, y) {
toolTip.css({
top: y + "px",
left: x + "px"
});
}
}

0 comments on commit 8908ce9

Please sign in to comment.