chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implementing jquery-color-plugin-xcolor in the skill wheel see #1791

Browse Source
skala
Julio Montoya 13 years ago
parent a8d6d31752
commit 21ed520652
5 changed files with 1614 additions and 176 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      main/admin/skills_wheel.php
  2. 3
      main/inc/ajax/skill.ajax.php
  3. 1386
      main/inc/lib/javascript/d3/jquery.xcolor.js
  4. 12
      main/inc/lib/skill.lib.php
  5. 209
      main/template/default/skill/skill_wheel.tpl

2
main/admin/skills_wheel.php
Unescape View File

@ -22,6 +22,8 @@ if (api_get_setting('allow_skills_tool') != 'true') {
//Adds the JS needed to use the jqgrid
$htmlHeadXtra[] = api_get_js('d3/d3.v2.min.js');
$htmlHeadXtra[] = api_get_js('d3/colorbrewer.js');
$htmlHeadXtra[] = api_get_js('d3/jquery.xcolor.js');
//$htmlHeadXtra[] = api_get_css(api_get_path(WEB_LIBRARY_PATH).'javascript/d3/colorbrewer.css');
$tpl = new Template(null, false, false);

3
main/inc/ajax/skill.ajax.php
Unescape View File

@ -136,8 +136,9 @@ switch ($action) {
case 'get_skills_tree_json':
$user_id = isset($_REQUEST['load_user']) && $_REQUEST['load_user'] == 1 ? api_get_user_id() : 0;
$skill_id = isset($_REQUEST['skill_id']) ? $_REQUEST['skill_id'] : 0;
$depth = isset($_REQUEST['main_depth']) ? $_REQUEST['main_depth'] : 2;
$all = $skill->get_skills_tree_json($user_id, $skill_id);
$all = $skill->get_skills_tree_json($user_id, $skill_id, false, $depth);
echo $all;
break;
default:

1386
main/inc/lib/javascript/d3/jquery.xcolor.js
View File

File diff suppressed because it is too large Load Diff

12
main/inc/lib/skill.lib.php
Unescape View File

@ -619,7 +619,6 @@ class Skill extends Model {
}
}
$new_family_array[$main_family_id] = $family_id;
$family_id++;
}
@ -649,14 +648,14 @@ class Skill extends Model {
* Get skills tree as a simplified JSON structure
*
*/
public function get_skills_tree_json($user_id = null, $skill_id = null, $return_flat_array = false) {
public function get_skills_tree_json($user_id = null, $skill_id = null, $return_flat_array = false, $main_depth = 2) {
$tree = $this->get_skills_tree($user_id, $skill_id, $return_flat_array, true);
$simple_tree = array();
if (!empty($tree['children'])) {
foreach ($tree['children'] as $element) {
$simple_tree[] = array( 'name' => $element['name'],
'children' => $this->get_skill_json($element['children']),
'children' => $this->get_skill_json($element['children'], 1, $main_depth),
);
}
}
@ -666,7 +665,7 @@ class Skill extends Model {
/**
* Get JSON element
*/
public function get_skill_json($subtree, $depth = 1) {
public function get_skill_json($subtree, $depth = 1, $max_depth = 2) {
$simple_sub_tree = array();
if (is_array($subtree)) {
$counter = 1;
@ -676,10 +675,13 @@ class Skill extends Model {
$tmp['id'] = $elem['id'];
if (is_array($elem['children'])) {
$tmp['children'] = $this->get_skill_json($elem['children'], $depth+1);
$tmp['children'] = $this->get_skill_json($elem['children'], $depth+1, $max_depth);
} else {
$tmp['colour'] = $this->colours[$depth][rand(0,3)];
}
if ($depth > $max_depth) {
continue;
}
$tmp['depth'] = $depth;
$tmp['counter'] = $counter;

209
main/template/default/skill/skill_wheel.tpl
Unescape View File

@ -2,9 +2,52 @@
/* For licensing terms, see /license.txt */
$(document).ready(function() {
/* ...adding "+1" to "y" function's params is really funny */
/* Exexute the calculation based on a JSON file provided */
/*d3.json("wheel.json", function(json) {*/
/** Get the JSON list of skills and work on it */
var my_domain = [1,2,3,4,5,6,7,8,9];
var col = 9;
var color_patterns = [];
color_patterns[1] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Purples[col]);
//color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[6]);
color_patterns[3] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greens[col]);
color_patterns[4] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Reds[col]);
color_patterns[5] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Oranges[col]);
color_patterns[6] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrBr[col]);
color_patterns[7] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGn[col]);
color_patterns[8] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGnBu[col]);
color_patterns[9] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.GnBu[col]);
color_patterns[10] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuGn[col]);
color_patterns[11] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBuGn[col]);
color_patterns[12] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBu[col]);
color_patterns[13] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuPu[col]);
color_patterns[14] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.RdPu[col]);
color_patterns[15] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuRd[col]);
color_patterns[16] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.OrRd[col]);
color_patterns[17] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrRd[col]);
color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greys[col]);
//var normal_fill = d3.scale.category10().domain(my_domain);
var main_depth = 1000;
load_nodes(main_depth);
function load_nodes(main_depth) {
/** Define constants and size of the wheel */
/** Total width of the wheel (also counts for the height) */
var w = 940,
var w = 900,
h = w,
r = w / 2,
/** x/y positionning of the center of the wheel */
@ -17,9 +60,11 @@ $(document).ready(function() {
/** Levels to show */
levels_to_show = 3;
reduce_top = 1.5;
reduce_top = 1;
/* Locate the #div id element */
/*$("#vis").remove();
$("body").append('<div id="vis"></div>');*/
var div = d3.select("#vis");
/* Remove the image (make way for the dynamic stuff */
@ -45,6 +90,7 @@ $(document).ready(function() {
/** Value here seems to be a calculation of the size of the elements
depending on the level of depth they're at. Changing it makes
elements pass over the limits of others... */
.size([1, 2])
.value(function(d) {
//return 5.8 - d.depth;
//When having more than 4 children seems that the code above doesn't work
@ -66,74 +112,8 @@ $(document).ready(function() {
return Math.max(0, y(d.y + d.dy));
});
/* ...adding "+1" to "y" function's params is really funny */
/* Exexute the calculation based on a JSON file provided */
/*d3.json("wheel.json", function(json) {*/
/** Get the JSON list of skills and work on it */
var my_domain = [1,2,3,4,5,6,7,8,9];
var col = 9;
var color_patterns = [];
color_patterns[1] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Purples[col]);
//color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[6]);
color_patterns[3] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greens[col]);
color_patterns[4] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Reds[col]);
color_patterns[5] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Oranges[col]);
color_patterns[6] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrBr[col]);
d3.json("{{ wheel_url }}&main_depth="+main_depth, function(json) {
color_patterns[7] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGn[col]);
color_patterns[8] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGnBu[col]);
color_patterns[9] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.GnBu[col]);
color_patterns[10] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuGn[col]);
color_patterns[11] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBuGn[col]);
color_patterns[12] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBu[col]);
color_patterns[13] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuPu[col]);
color_patterns[14] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.RdPu[col]);
color_patterns[15] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuRd[col]);
color_patterns[16] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.OrRd[col]);
color_patterns[17] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrRd[col]);
color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greys[col]);
//var normal_fill = d3.scale.category10().domain(my_domain);
function get_color(d) {
depth = d.depth;
if (d.family_id) {
//console.log(d.family_id);
var p = color_patterns[d.family_id];
color = p(depth -1 + d.counter);
d.color = color;
return color;
}
return '#fefefe'; //missing colors
}
function set_skill_style(d, attribute) {
return_fill = get_color(d);
return_background = 'blue';
if (d.achieved) {
return_fill = 'green';
return_background = 'blue';
} else {
//return_fill = colorScale;
return_background = '1px border #fff';
}
switch (attribute) {
case 'fill':
return return_fill;
break;
case 'background':
return return_background;
break;
}
}
d3.json("{{ wheel_url }}", function(json) {
/** Define the list of nodes based on the JSON */
var nodes = partition.nodes({
children: json
@ -142,6 +122,9 @@ $(document).ready(function() {
/* Setting all skills */
var path = vis.selectAll("path").data(nodes);
/* Setting all texts */
var text = vis.selectAll("text").data(nodes);
path.enter().append("path")
.attr("id", function(d, i) {
return "path-" + i;
@ -153,21 +136,19 @@ $(document).ready(function() {
.style("fill", function(d) {
return set_skill_style(d, 'fill');
})
.style("background", function(d) {
//return set_skill_style(d, 'background');
.style("stroke", function(d) {
return set_skill_style(d, 'stroke');
})
.on("click", click);
.on("click", function(d){
click_partition(d, path, text, arc, x, y, r, p);
});
/* End setting skills */
var text = vis.selectAll("text").data(nodes);
var textEnter = text.enter().append("text")
.style("fill-opacity", 1)
.style("fill", function(d) {
console.log(d.color);
return brightness(d3.rgb(d.color)) < 125 ? "#eee" : "#000";
//return "#444";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
@ -180,7 +161,9 @@ $(document).ready(function() {
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", click);
.on("click", function(d){
click_partition(d, path, text, arc, x, y, r, p);
});
/** Managing text - always maximum two words */
textEnter.append("tspan")
@ -194,11 +177,76 @@ $(document).ready(function() {
.text(function(d) {
return d.depth ? d.name.split(" ")[1] || "" : "";
});
});
}
var colors1 = $.xcolor.analogous('#da0'); //8 colors
var colors = colors1;
// Generating array of colors
color_loops = 4;
for (i= 0; i < color_loops; i++) {
last_color = colors[colors.length-1].getHex();
glue_color = $.xcolor.complementary(last_color);
//colors.push(glue_color.getHex());
colors2 = $.xcolor.analogous(glue_color);
colors = $.merge(colors, colors2);
}
function get_color(d) {
depth = d.depth;
if (d.family_id) {
/*var p = color_patterns[d.family_id];
color = p(depth -1 + d.counter);
d.color = color;*/
if (depth > 1) {
family1 = colors[d.family_id];
family2 = colors[d.family_id + 2];
position = d.depth*d.counter;
//part_color = $.xcolor.gradientlevel(family1, family2, position, 100);
part_color = $.xcolor.lighten(family1, position, 15);
color = part_color.getHex();
console.log(d.depth + " - " + d.name + " + "+ color+ "+ " +d.counter);
} else {
color = colors[d.family_id];
}
d.color = color;
return color;
}
color = '#fefefe';
d.color = color;
return color; //missing colors
}
function set_skill_style(d, attribute) {
return_fill = get_color(d);
return_stroke = 'black';
if (d.achieved) {
return_fill = '#1E91F5';
return_stroke = '#FCD23A';
}
switch (attribute) {
case 'fill':
return return_fill;
break;
case 'stroke':
return return_stroke;
break;
}
}
function click_partition(d, path, text, arc, x, y, r, p) {
if (d.depth == 2) {
/*main_depth +=1;
load_nodes(main_depth);*/
}
var duration = 1000;
function click(d) {
path.transition()
.duration(duration)
.attrTween("d", arcTween(d));
.attrTween("d", arcTween(d, arc, x, y, r));
// Somewhat of a hack as we rely on arcTween updating the scales.
text.style("visibility", function(e) {
@ -225,7 +273,6 @@ $(document).ready(function() {
d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
});
}
});
/* Returns whether p is parent of c */
function isParentOf(p, c) {
@ -253,7 +300,7 @@ $(document).ready(function() {
}
/* Interpolate the scales! */
function arcTween(d) {
function arcTween(d, arc, x, y, r) {
var my = maxY(d),
xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, my]),

Write Preview
Loading…
Cancel
Save