--- a/integration/js/treemap.js Tue Jan 22 14:43:22 2013 +0100
+++ b/integration/js/treemap.js Wed Jan 23 18:21:30 2013 +0100
@@ -1,6 +1,40 @@
+/* SOURCE : http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript */
+
+/**
+ * Converts an HSV color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
+ * Assumes h, s, and v are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param Number h The hue
+ * @param Number s The saturation
+ * @param Number v The value
+ * @return Array The RGB representation
+ */
+function hsvToRgb(h, s, v){
+ var r, g, b;
+
+ var i = Math.floor(h * 6);
+ var f = h * 6 - i;
+ var p = v * (1 - s);
+ var q = v * (1 - f * s);
+ var t = v * (1 - (1 - f) * s);
+
+ switch(i % 6){
+ case 0: r = v, g = t, b = p; break;
+ case 1: r = q, g = v, b = p; break;
+ case 2: r = p, g = v, b = t; break;
+ case 3: r = p, g = q, b = v; break;
+ case 4: r = t, g = p, b = v; break;
+ case 5: r = v, g = p, b = q; break;
+ }
+
+ return _([r * 255, g * 255, b * 255]).map(Math.floor);
+}
+
$(function(){
- var IDEALRATIO = 1.25;
+ var IDEALRATIO = 1.33;
function cuttree(data, x, y, w, h, cut, ratio, callback) {
@@ -77,54 +111,19 @@
cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
}
- /* SOURCE : http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript */
-
- /**
- * Converts an HSV color value to RGB. Conversion formula
- * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
- * Assumes h, s, and v are contained in the set [0, 1] and
- * returns r, g, and b in the set [0, 255].
- *
- * @param Number h The hue
- * @param Number s The saturation
- * @param Number v The value
- * @return Array The RGB representation
- */
- function hsvToRgb(h, s, v){
- var r, g, b;
-
- var i = Math.floor(h * 6);
- var f = h * 6 - i;
- var p = v * (1 - s);
- var q = v * (1 - f * s);
- var t = v * (1 - (1 - f) * s);
-
- switch(i % 6){
- case 0: r = v, g = t, b = p; break;
- case 1: r = q, g = v, b = p; break;
- case 2: r = p, g = v, b = t; break;
- case 3: r = p, g = q, b = v; break;
- case 4: r = t, g = p, b = v; break;
- case 5: r = v, g = p, b = q; break;
- }
-
- return _([r * 255, g * 255, b * 255]).map(Math.floor);
- }
/* Templates des éléments à insérer */
var articleTemplate = _(
- '<div class="cluster-article" style="position: absolute; left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
- '<%=label%>'+
+ '<div class="cluster-article" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px;">'+
+ '<img src="<%=image_url%>" />' +
'</div>'
).template();
var clusterTemplate = _(
- '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
- '<a href="#">'+
-// '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
- '<%=articles%>'+
+ '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w - 1%>px; height: <%=h - 1%>px; background: #ffffff" data-cluster-id="<%=id%>">'+
+ '<%=articles%>'+ // Pour l'image composite
+ '<img src="<%=image_url%>" />' + // Pour l'image de cluster
'<div class="voile"></div>'+
- '</a>'+
'<div class="inner-actu">'+
'<h2><a href="#"><%-label%></a></h2>'+
'<div class="links">'+
@@ -133,6 +132,7 @@
'</ul>'+
'</div>'+
'</div>'+
+ '<p class="abstract"><%= abstract %></p>'+
'</div>'
).template();
@@ -142,17 +142,22 @@
function showResults(results) {
var data = _(results.clusters).map(function(cluster, i) {
- var hue = (i%6)/6
+ var hue = (parseInt(cluster.id)%6)/6
return {
+ id: cluster.id,
label: cluster.title,
+ abstract : cluster.abstract,
value: parseFloat(cluster.weight),
color: "rgb(" + hsvToRgb(hue,.8,.8).join(",") + ")",
annotation_count: cluster.annotations.length,
- articles: _(cluster.documents).map(function(article, j) {
+ image_url: cluster.url_image || false,
+ articles: cluster.documents.filter(function(article) {
+ return !!article.url_image
+ })
+ .map(function(article, j) {
return {
- label: article.title,
value: parseFloat(article.weight),
- color: "rgb(" + hsvToRgb(hue,.8,.9-.1*(j%6)).join(",") + ")"
+ image_url: article.url_image || false
}
})
}
@@ -162,7 +167,7 @@
});
squarify(data,0,0,760,hTreemap);
_(data).each(function(cluster) {
- squarify(cluster.articles, 0, 0, cluster.w, cluster.h);
+ squarify(cluster.articles, 0, 0, cluster.w - 1, cluster.h - 1);
_(cluster.articles).sortBy(function(d) {
return -d.value;
});
@@ -174,6 +179,43 @@
return mem + clusterTemplate(d);
},"");
$('#treemap #actus').html(treemapHtml);
+
+ //redimensionnement d'image
+
+ $(".actu img").each(function() {
+ var img = $(this),
+ div = $(this).parent();
+ img.load(function() {
+ var iw = img.width(),
+ ih = img.height(),
+ dw = div.width(),
+ dh = div.height(),
+ scale = Math.max(dw/iw, dh/ih),
+ niw = iw * scale,
+ nih = ih * scale;
+ img.css({
+ width: niw,
+ height: nih,
+ "margin-left": (dw - niw) / 2,
+ "margin-top": (dh - nih) / 3
+ });
+ });
+ });
+
+ $(".actu").hover(
+ function() {
+ $("body").trigger("select-cluster", $(this).attr("data-cluster-id"));
+ },
+ function() {
+ $("body").trigger("unselect-cluster", $(this).attr("data-cluster-id"));
+ }
+ )
+ $("body").on("select-cluster", function(e, clusterid) {
+ $(".actu[data-cluster-id='" + clusterid + "']").addClass("selected");
+ });
+ $("body").on("unselect-cluster", function(e, clusterid) {
+ $(".actu[data-cluster-id='" + clusterid + "']").removeClass("selected");
+ });
}
function renderJson(url) {
@@ -194,46 +236,6 @@
}
return false;
});
-
- //redimensionnement d'image
-/*
- $(".actu").each(function(k,v){
- var wActu = $(this).width();
- var hActu = $(this).height();
- var img = $(this).find('img');
- img.load(function(){
- var img = $(this);
-
- var wImg = img.width();
- var hImg = img.height();
-
- var ratioImg = wImg/hImg;
- img.css('height',hActu);
- img.css('width',hActu*ratioImg);
- wImg = img.width();
- hImg = img.height();
-
- if(wActu>wImg){
- var ratioImg = hImg/wImg;
- img.css('width', wActu);
- img.css('height',wActu*ratioImg);
- wImg = img.width();
- hImg = img.height();
- }
-
- if (wImg<wActu) {
- img.css('margin-left',(wActu-wImg)/2);
- }else{
- img.css('margin-left',-(wImg-wActu)/2);
- }
- if (hImg<hActu) {
- img.css('margin-top',(hActu-hImg)/2);
- }else{
- img.css('margin-top',-(hImg-hActu)/2);
- }
- });
- });
-*/
$("#liste").hide();