Skip to content

Commit

Permalink
Merge branch 'master' of github.com:hhba/timelines
Browse files Browse the repository at this point in the history
  • Loading branch information
@felipelerena
felipelerena committed Apr 14, 2012
2 parents 8e44329 + f669bf5 commit 66c5238
Show file tree
Hide file tree
Showing 8 changed files with 268 additions and 52 deletions.
18 changes: 11 additions & 7 deletions graficador/test.html
View file
@@ -1,8 +1,8 @@
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/graficador.js"></script>
<script src="../javascripts/raphael-min.js"></script>
<script src="../javascripts/graficador.js"></script>
<title>Lindo Graficador =)</title>
</head>
<body>
Expand All @@ -11,12 +11,16 @@ <h1>Graficador</h1>
<script>
(function() {
var grafico = new Graficador('graph', {
width: 1100,
height: 1000,
kx: 4,
ky: 4
width: 1100,//px
height: 1000,//px
'margin-top': 50,//px
'margin-right': 50,//px
'margin-bottom': 50,//px
'margin-left': 50,//px
textoffset: 5, // -textoffset px
kx: 50,
ky: 50
});

grafico.loadData(testValues());
})();
</script>
Expand Down
25 changes: 24 additions & 1 deletion index.html
View file
Expand Up @@ -25,6 +25,9 @@
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script src='javascripts/get_data.js' type='text/javascript'></script>
<script src='javascripts/preprocess.js' type="text/javascript"></script>
<script src='JSOptimizer/js/taoptimizer.js' type="text/javascript"></script>
<script src='javascripts/timelineproblem.js' type="text/javascript"></script>
<script src='javascripts/graficador.js' type="text/javascript"></script>

</head>

Expand Down Expand Up @@ -72,11 +75,12 @@ <h1>Visualiza tu timeline aca</h1>
</div>
</div>
<p>
<a class="btn btn-primary btn-large" onClick="get_data(document.getElementById('url').value)">
<a class="btn btn-primary btn-large" id='btn'>
Crear visualizacion
</a>
</p>
</div>
<div id='graph'></div>

</form>

Expand Down Expand Up @@ -113,6 +117,25 @@ <h1>Visualiza tu timeline aca</h1>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
<script>
$("#btn").click(function(){
get_data(document.getElementById('url').value, function(data){
var preprocessed_data = preprocessData(data);
console.log(preprocessed_data);
var p = new TimeLineProblem(preprocessed_data);
var optimizer = new TAOptimizer(p, params);
(function() {
var grafico = new Graficador('graph', {
width: 1100,
height: 1000,
kx: 4,
ky: 4
});
grafico.loadData(testValues());
})();
} )
})
</script>


</body>
Expand Down
15 changes: 9 additions & 6 deletions javascripts/get_data.js
View file
@@ -1,18 +1,19 @@
//get_data("https://spreadsheets.google.com/feeds/cells/0Av8QEY2w-qTYdE1EX0R3a04zaEVwY0ltVU1oSkxKSWc/od5/public/basic?alt=json-in-script&callback=parseRequest");

function get_data(url) {
var callback = false;
function get_data(url,cb) {
// Crear el elemenot script
var script = document.createElement('script');
// set the src attribute to that url
script.setAttribute('src', url);
// insert the script in out page
callback = cb
document.getElementsByTagName('head')[0].appendChild(script);
}

// Esta funcion parsea el objeto devuelto por google docs
function parseRequest(root) {
var ret =[]
var prev = {}
var prev = false
var keys = {}
var feed = root.feed;
var entries = feed.entry || [];
Expand All @@ -23,15 +24,17 @@ function parseRequest(root) {
var column = title.replace(/[0-9]+/,"")
var row = parseInt(title.replace(/[A-Z]+/,""))
if (column == "A"){
ret.push(prev)
if (prev){
ret.push(prev)
}
prev = {}
}
if (row == 1){
keys[column]=content
keys[column]=content.toLowerCase()
}else{
prev[keys[column]] = content
}
}
ret.push(prev)
return ret
callback(ret)
}
152 changes: 120 additions & 32 deletions javascripts/graficador.js
View file
Expand Up @@ -21,49 +21,121 @@
* }
*/
function testValues() {
function rancolor() {
if (Math.random() > 0.5)
return 'red';
return 'blue';
}
var ini = 0
var ret = [];
for (var i=0; i < 10; i++){
ret[i] = [];
for (var ii=0; ii < 5; ii++) {
//var a = (ii == 0) ? 1 : ii;
var a = ii;
if (ii == 0) {
a = ini;
ini += 10;
}
var b = (!i) ? 1 : i;
ret[i][ii] = {
color: rancolor(),
start: [Math.random()*10*b*ii,Math.random()*b*a+ini],
end: [Math.random()*10*b*ii, Math.random()*b*a+ini]
};
var sol = [];
sol[0] = {
'name': 'pepe',
'segments':
[
{
attributes: { color: 'red'},
start: [0,1],
end: [1,1]
},
{
attributes: { color: 'red'},
start: [1,1],
end: [2,3]
},
{
attributes: { color: 'red'},
start: [2,3],
end: [4,1]
}, {
attributes: { color: 'red'},
start: [4,1],
end: [7,1]
},
{
attributes: { color: 'red'},
start: [7,1],
end: [10,2]
}
}
return ret;
]
};
sol[1] = {
'name': 'asd',
'segments':
[
{
attributes: { color: 'blue'},
start: [0,4],
end: [3,5]
},
{
attributes: { color: 'blue'},
start: [3,5],
end: [4,7]
},
{
attributes: { color: 'blue'},
start: [5,7],
end: [7,8]
},
{
attributes: { color: 'blue'},
start: [7,8],
end: [7,10]
},
{
attributes: { color: 'blue'},
start: [8,10],
end: [9,12]
}
]
};
/* sol[2] = [
{
color: 'red',
start: [0,1],
end: [1,1]
},
{
color: 'red',
start: [0,1],
end: [1,1]
},
{
color: 'red',
start: [0,1],
end: [1,1]
}, {
color: 'red',
start: [0,1],
end: [1,1]
},
{
color: 'red',
start: [0,1],
end: [1,1]
}
]*/
return sol;
}
var Graficador = function(div, config) {
this.divId = div;
this.config = config || {};
this.paper = new Raphael(this.divId, this.config.width, this.config.height);
};

Graficador.prototype.defaultText = {
'text-anchor': 'end'
};

Graficador.prototype.defaultLine = {};

Graficador.prototype.loadData = function (data) {
for (var i=0; i< data.length; i++) {
for (var ii = 0; ii < data[i].length ; ii++){
var thisStringLine = this.makeStringLine([data[i][ii].start, data[i][ii].end]);
this.writeText(data[i]);
for (var ii = 0; ii < data[i].segments.length ; ii++){
var thisStringLine = this.makeStringLine([data[i].segments[ii].start, data[i].segments[ii].end]);
var thisLine = this.paper.path(thisStringLine);
thisLine.attr({
'stroke':data[i][ii].color,
'color':data[i][ii].color
});
var opts = {};
for (key in this.defaultLine)
opts[key] = this.defaultLine[key];
opts['stroke'] = data[i].segments[ii].attributes.color;
opts['color'] = data[i].segments[ii].attributes.color;
thisLine.attr(opts);
}

}
};

Expand All @@ -74,8 +146,24 @@ Graficador.prototype.makeStringLine = function(arr) {
var string = '';
for (var i=0; i < arr.length; i++) {
string += (i == 0)? 'M' : 'L';
string += (arr[i][0]*this.config.kx)+','+(arr[i][1]*this.config.ky);
string += (arr[i][0]*this.config.kx+this.config['margin-left'])+','+(arr[i][1]*this.config.ky+this.config['margin-top']);
}
//string += 'Z';
return string;
};

Graficador.prototype.writeText = function(tHash) {
var thisText = this.paper.text(
tHash.segments[0].start[0]*this.config.kx-this.config.textoffset + this.config['margin-left'],
tHash.segments[0].start[1]*this.config.ky+this.config['margin-top'],
tHash.name
),
opts = {};
for (key in this.defaultText)
opts[key] = this.defaultText[key];
for (key in (tHash.attributes || {} )){
if (['fill', 'fill-opacity', 'font', 'font-family', 'font-size', 'font-weight', 'stroke', 'text-anchor'].indexOf(key))
opts[key] = tHash.attributes[key];
}
thisText.attr(opts);
};
11 changes: 7 additions & 4 deletions javascripts/preprocess.js
View file
@@ -1,11 +1,14 @@
function preprocessData(data) {
var groups = {};
var characters = {};

data.sort(function (a,b) {
return (a.order - b.order);
return (parseInt(a.order) - parseInt(b.order));
});

var minOrder = data[0].order;
var minOrder = parseInt(data[0].order);
console.log(data);
var maxOrder = data[data.length-1].order;
var maxOrder = parseInt(data[data.length-1].order);
var universeLength = maxOrder - minOrder;
var universeBox = universeLength/100;

Expand All @@ -19,7 +22,7 @@ function preprocessData(data) {
eventList[data[d].character].position = [];
}
eventList[data[d].character].position.push({
orderBox: (data[d].order - minOrder) / universeBox,
orderBox: (parseInt(data[d].order) - minOrder) / universeBox,
group: data[d].group
});

Expand Down
58 changes: 58 additions & 0 deletions javascripts/test-optimizer.js
View file
@@ -0,0 +1,58 @@
// --------------------------------------------------------------------------
// Main JS code
// --------------------------------------------------------------------------

// Called when onLoad triggers
$(function() {

var params = {
maxE: -1000000,
minE: 1000000,
initialThreshold: 1,
scaleIterationFactor: 0.9,
maxThresholdIter: 4000,
maxIter: 2000000,
debug: true
};

var p = new TimeLineProblem(input);

var optimizer = new TAOptimizer(p, params);

optimizer.paper = Raphael('solution-div', 400, 400);

var redraw = function(o) {
//console.log("Redraw called!");
var scale = 150;
var pathString = 'M' + Math.round(0) + ',' + Math.round(o.solution[0] * scale);
var dx = 2 / o.instance.numPoints * scale;
for(i = 1; i <= o.instance.numPoints; i++) {
pathString += 'L' + Math.round(i * dx) + ',' + Math.round(o.solution[i] * scale);
}
o.paper.clear()
o.paper.circle(150,0,150).attr({stroke: '#cc3', 'stroke-width': 4, 'stroke-linejoin': 'round'});
var path = o.paper.path(pathString).attr({stroke: '#393', "stroke-width": 4, "stroke-linejoin": "round"});
}

optimizer.callback = redraw
optimizer.start();

window.optimizer = optimizer;

// loop and see how it changes
var doLoop = function() {
r = optimizer.step(2000);
if (r) {
$('#energy').html('<p>Current energy: ' + optimizer.instance.energy() + '</p>');
window.setTimeout(doLoop, 1)
}
};

$('#start-button').click(function() {
doLoop();
});

});


// vim: se ts=2 sw=2 expandtab:

0 comments on commit 66c5238

Please sign in to comment.