bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map is improving : drawing squares with entries and fake colors, got the hover behaviour working

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-12-21 22:15:25 +01:00
parent 6255e3285a
commit fc8365264d
13 changed files with 603 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.js → sites/all/modules/figli/edlp_corpus/assets/dist/bower/physics.min.js
Vendored
View File
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+255 -70
View File
@@ -1,86 +1,289 @@
/**
* @Author: Bachir Soussi Chiadmi <bach>
* @Date: 18-12-2017
* @Email: bachir@figureslibres.io
* @Filename: corpus.js
* @Last modified by: bach
* @Last modified time: 20-12-2017
* @License: GPL-V3
*/
/**
* depends on :
*
* physics.js : http://jonobr1.com/Physics/#
* EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
*
*/
(function($) {
EdlpCorpus = function(){
var $container = $('body');
var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
var canvas = $canvas[0];
var ctx = canvas.getContext('2d');
var physics = new Physics();
var particules = [];
var _$container = $('body');
var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d');
var _canvas_props = {
'margin-top':100,
'margin-bottom':100
};
var _physics = new Physics();
// var _stage = new createjs.Stage('edlp-map');
var _nodes = [];
// var _particules = [];
var _p_radius = 6;
var _p_velocity_factor = 0.5;
var _m_pos = {x:0, y:0};
var _node_hover_id = -1;
var _entrees_colors = {
"130":"rgb(75, 143, 126)",
"121":"rgb(134, 142, 36)",
"134":"rgb(43, 143, 47)",
"121":"rgb(58, 51, 182)",
"125":"rgb(44, 159, 87)",
"119":"rgb(196, 137, 120)",
"132":"rgb(82, 112, 187)",
"122":"rgb(251, 84, 211)",
"129":"rgb(224, 116, 131)",
"120":"rgb(101, 88, 69)",
"130":"rgb(126, 8, 104)",
"118":"rgb(14, 113, 33)",
"127":"rgb(218, 189, 66)",
"133":"rgb(3, 153, 187)",
"128":"rgb(57, 154, 28)",
"124":"rgb(112, 133, 64)",
"116":"rgb(25, 27, 255)",
"117":"rgb(39, 157, 132)",
"131":"rgb(82, 25, 171)",
"126":"rgb(212, 156, 182)",
"123":"rgb(73, 119, 21)"
};
// ____ _ __
// / _/___ (_) /______
// / // __ \/ / __/ ___/
// _/ // / / / / /_(__ )
// /___/_/ /_/_/\__/____/
function init(){
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('physics',physics);
// console.log('_physics',_physics);
initCanvas();
initEvents();
loadCorpus();
};
// ______
// / ____/___ _____ _ ______ ______
// / / / __ `/ __ \ | / / __ `/ ___/
// / /___/ /_/ / / / / |/ / /_/ (__ )
// \____/\__,_/_/ /_/|___/\__,_/____/
function initCanvas(){
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
window.addEventListener('resize', onResizeCanvas, false);
onResizeCanvas();
};
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function onResizeCanvas() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
_canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
_canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){
_$container
.on('mousemove', function(event) {
event.preventDefault();
// console.log("onMouseMove", event);
_m_pos.x = event.originalEvent.clientX;
_m_pos.y = event.originalEvent.clientY;
// console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
// console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
})
.on('click', function(event) {
event.preventDefault();
if(_node_hover_id != -1){
console.log("click on node", _nodes[_node_hover_id]);
}
});
};
// ___ _
// / | (_)___ __ __
// / /| | / / __ `/ |/_/
// / ___ | / / /_/ /> <
// /_/ |_|_/ /\__,_/_/|_|
// /___/
function loadCorpus(){
// console.log('drupalSettings',drupalSettings);
console.log('window.location', window.location);
// console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, function(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
buildMap(data.nodes);
// buildParticles(data.nodes);
buildNodes(data.nodes);
startAnime();
});
};
function buildMap(nodes){
var x,y,p;
var mass = 8;
console.log("physics", physics);
// _ __ __
// / | / /___ ____/ /__ _____
// / |/ / __ \/ __ / _ \/ ___/
// / /| / /_/ / /_/ / __(__ )
// /_/ |_/\____/\__,_/\___/____/
function buildNodes(nodes){
console.log("buildNodes", nodes);
var x,y,d;
for (var i in nodes) {
// console.log(nodes[i]);
x = Math.random()*canvas.width;
y = Math.random()*canvas.height;
p = physics.makeParticle(mass, x, y);
p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
// if(particules.length){
// for (var i = 0; i < particules.length; i++) {
// physics.makeAttraction(p, particules[i], strength, minDistance);
// }
// }
particules.push(p);
// console.log('i',i);
x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
d = i < 1 ? true : false;
_nodes.push(new Node(i,nodes[i],x,y,d));
// if(i==4)
// break;
}
};
function render(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var radius = 5;
function Node(i,n,x,y,d){
this.id = i;
for(key in n)
this[key] = n[key];
// colisions between particules
for (var p = 0, l = particules.length; p < l; p++) {
var particule = particules[p];
// var theta = 360 / (Math.PI * radius);
this.debug = d;
this.radius = _p_radius;
this.mass = 8;
this.g = {
l : 1, // drawing line width
s : 1 // drawing space between squares
}
this.x = x;
this.y = y;
this.hover = false;
// physics
this.p = _physics.makeParticle(this.mass, this.x, this.y);
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
// prototypes
if (typeof Node.initialized == "undefined") {
// Node.prototype.init = function(){
// // console.log("Node : init()", this);
// // this.draw();
// };
Node.prototype.onUpdate = function(){
this.checkWallBouncing();
this.updatePos();
this.checkMouse();
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
};
Node.prototype.checkWallBouncing = function(){
// TODO: correct waal bouncing with centered squares
if(
(this.x < 0 && this.p.velocity.x < 0)
|| (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
){
// console.log("bounce x");
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(
(this.y < 0 && this.p.velocity.y < 0)
|| (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
){
// console.log("bounce y");
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
}
};
Node.prototype.updatePos = function(){
this.x = this.p.position.x;
this.y = this.p.position.y;
};
Node.prototype.checkMouse = function(){
// TODO: get the real w and h of node (with entrees squares)
if( _m_pos.x > this.x
&& _m_pos.x < this.x+this.radius
&& _m_pos.y > this.y
&& _m_pos.y < this.y+this.radius){
if(_node_hover_id == -1 || _node_hover_id == this.id){
console.log("Node hover", this.id);
this.hover = true;
_node_hover_id = this.id;
}
}else{
this.hover = false;
if (_node_hover_id == this.id) {
_node_hover_id = -1;
}
}
};
Node.prototype.draw = function(){
// TODO: center the squares around the pos
_ctx.beginPath();
_ctx.lineWidth = this.g.l;
for (var i = 0; i < this.entrees.length; i++) {
_ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
_ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
}
_ctx.closePath();
// _ctx.beginPath();
// _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
// _ctx.fillRect(this.x, this.y, this.radius, this.radius);
// _ctx.closePath();
};
Node.initialized = true;
}
// this.init();
};
// ____ __ _
// / __ \/ /_ __ _______(_)_________
// / /_/ / __ \/ / / / ___/ / ___/ ___/
// / ____/ / / / /_/ (__ ) / /__(__ )
// /_/ /_/ /_/\__, /____/_/\___/____/
// /____/
// TODO: how to use particule collision in new OOP Node() contexte
function checkParticulesCollisions(){
// colisions between _particules
for (var p = 0, l = _particules.length; p < l; p++) {
var particule = _particules[p];
// var theta = 360 / (Math.PI * _p_radius);
if(!particule.attracted) continue;
for (var q = 0; q < p; q++) {
if(q==p) continue;
var a = particule;
var b = particules[q];
var b = _particules[q];
if(!b.attracted) continue;
var d = a.distanceTo(b);
// apply new forces if colliding
if(d <= radius*2){
if(d <= _p_radius*2){
var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
@@ -97,8 +300,8 @@
// move particles if they overlap
if (d < radius*2) {
var makeup = radius - d/2;
if (d < _p_radius*2) {
var makeup = _p_radius - d/2;
var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
b.position.x += makeup * Math.cos(angle);
@@ -113,44 +316,26 @@
}
}
}
};
for (var i = 0; i < particules.length; i++) {
var p = particules[i];
// wall boucing
if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
// console.log("bounce x");
p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
// console.log("bounce y");
p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
}
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
// / _, _/ __/ / / / /_/ / __/ /
// /_/ |_|\___/_/ /_/\__,_/\___/_/
function render(){
_ctx.clearRect(0, 0, _canvas.width, _canvas.height);
// draw the ball
ctx.beginPath();
ctx.fillRect(p.position.x, p.position.y, 8, 8);
if(p.attracted){
ctx.fillStyle = "red";
}else{
ctx.fillStyle = "black";
}
ctx.fill();
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onUpdate();
}
};
function startAnime(){
physics.onUpdate(render);
// render();
physics.play()
_physics.onUpdate(render);
_physics.play()
};
init();
}
sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
canvas.edlp-map {
canvas#edlp-map {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+255 -70
View File
@@ -1,86 +1,289 @@
/**
* @Author: Bachir Soussi Chiadmi <bach>
* @Date: 18-12-2017
* @Email: bachir@figureslibres.io
* @Filename: corpus.js
* @Last modified by: bach
* @Last modified time: 20-12-2017
* @License: GPL-V3
*/
/**
* depends on :
*
* physics.js : http://jonobr1.com/Physics/#
* EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
*
*/
(function($) {
EdlpCorpus = function(){
var $container = $('body');
var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
var canvas = $canvas[0];
var ctx = canvas.getContext('2d');
var physics = new Physics();
var particules = [];
var _$container = $('body');
var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
var _canvas = _$canvas[0];
var _ctx = _canvas.getContext('2d');
var _canvas_props = {
'margin-top':100,
'margin-bottom':100
};
var _physics = new Physics();
// var _stage = new createjs.Stage('edlp-map');
var _nodes = [];
// var _particules = [];
var _p_radius = 6;
var _p_velocity_factor = 0.5;
var _m_pos = {x:0, y:0};
var _node_hover_id = -1;
var _entrees_colors = {
"130":"rgb(75, 143, 126)",
"121":"rgb(134, 142, 36)",
"134":"rgb(43, 143, 47)",
"121":"rgb(58, 51, 182)",
"125":"rgb(44, 159, 87)",
"119":"rgb(196, 137, 120)",
"132":"rgb(82, 112, 187)",
"122":"rgb(251, 84, 211)",
"129":"rgb(224, 116, 131)",
"120":"rgb(101, 88, 69)",
"130":"rgb(126, 8, 104)",
"118":"rgb(14, 113, 33)",
"127":"rgb(218, 189, 66)",
"133":"rgb(3, 153, 187)",
"128":"rgb(57, 154, 28)",
"124":"rgb(112, 133, 64)",
"116":"rgb(25, 27, 255)",
"117":"rgb(39, 157, 132)",
"131":"rgb(82, 25, 171)",
"126":"rgb(212, 156, 182)",
"123":"rgb(73, 119, 21)"
};
// ____ _ __
// / _/___ (_) /______
// / // __ \/ / __/ ___/
// _/ // / / / / /_(__ )
// /___/_/ /_/_/\__/____/
function init(){
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('physics',physics);
// console.log('_physics',_physics);
initCanvas();
initEvents();
loadCorpus();
};
// ______
// / ____/___ _____ _ ______ ______
// / / / __ `/ __ \ | / / __ `/ ___/
// / /___/ /_/ / / / / |/ / /_/ (__ )
// \____/\__,_/_/ /_/|___/\__,_/____/
function initCanvas(){
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();
window.addEventListener('resize', onResizeCanvas, false);
onResizeCanvas();
};
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function onResizeCanvas() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
_canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
_canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){
_$container
.on('mousemove', function(event) {
event.preventDefault();
// console.log("onMouseMove", event);
_m_pos.x = event.originalEvent.clientX;
_m_pos.y = event.originalEvent.clientY;
// console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
// console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
})
.on('click', function(event) {
event.preventDefault();
if(_node_hover_id != -1){
console.log("click on node", _nodes[_node_hover_id]);
}
});
};
// ___ _
// / | (_)___ __ __
// / /| | / / __ `/ |/_/
// / ___ | / / /_/ /> <
// /_/ |_|_/ /\__,_/_/|_|
// /___/
function loadCorpus(){
// console.log('drupalSettings',drupalSettings);
console.log('window.location', window.location);
// console.log('window.location', window.location);
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
$.getJSON(path, {}, function(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
buildMap(data.nodes);
// buildParticles(data.nodes);
buildNodes(data.nodes);
startAnime();
});
};
function buildMap(nodes){
var x,y,p;
var mass = 8;
console.log("physics", physics);
// _ __ __
// / | / /___ ____/ /__ _____
// / |/ / __ \/ __ / _ \/ ___/
// / /| / /_/ / /_/ / __(__ )
// /_/ |_/\____/\__,_/\___/____/
function buildNodes(nodes){
console.log("buildNodes", nodes);
var x,y,d;
for (var i in nodes) {
// console.log(nodes[i]);
x = Math.random()*canvas.width;
y = Math.random()*canvas.height;
p = physics.makeParticle(mass, x, y);
p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
// if(particules.length){
// for (var i = 0; i < particules.length; i++) {
// physics.makeAttraction(p, particules[i], strength, minDistance);
// }
// }
particules.push(p);
// console.log('i',i);
x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
d = i < 1 ? true : false;
_nodes.push(new Node(i,nodes[i],x,y,d));
// if(i==4)
// break;
}
};
function render(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
var radius = 5;
function Node(i,n,x,y,d){
this.id = i;
for(key in n)
this[key] = n[key];
// colisions between particules
for (var p = 0, l = particules.length; p < l; p++) {
var particule = particules[p];
// var theta = 360 / (Math.PI * radius);
this.debug = d;
this.radius = _p_radius;
this.mass = 8;
this.g = {
l : 1, // drawing line width
s : 1 // drawing space between squares
}
this.x = x;
this.y = y;
this.hover = false;
// physics
this.p = _physics.makeParticle(this.mass, this.x, this.y);
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
// prototypes
if (typeof Node.initialized == "undefined") {
// Node.prototype.init = function(){
// // console.log("Node : init()", this);
// // this.draw();
// };
Node.prototype.onUpdate = function(){
this.checkWallBouncing();
this.updatePos();
this.checkMouse();
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
};
Node.prototype.checkWallBouncing = function(){
// TODO: correct waal bouncing with centered squares
if(
(this.x < 0 && this.p.velocity.x < 0)
|| (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
){
// console.log("bounce x");
this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(
(this.y < 0 && this.p.velocity.y < 0)
|| (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
){
// console.log("bounce y");
this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
}
};
Node.prototype.updatePos = function(){
this.x = this.p.position.x;
this.y = this.p.position.y;
};
Node.prototype.checkMouse = function(){
// TODO: get the real w and h of node (with entrees squares)
if( _m_pos.x > this.x
&& _m_pos.x < this.x+this.radius
&& _m_pos.y > this.y
&& _m_pos.y < this.y+this.radius){
if(_node_hover_id == -1 || _node_hover_id == this.id){
console.log("Node hover", this.id);
this.hover = true;
_node_hover_id = this.id;
}
}else{
this.hover = false;
if (_node_hover_id == this.id) {
_node_hover_id = -1;
}
}
};
Node.prototype.draw = function(){
// TODO: center the squares around the pos
_ctx.beginPath();
_ctx.lineWidth = this.g.l;
for (var i = 0; i < this.entrees.length; i++) {
_ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
_ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
}
_ctx.closePath();
// _ctx.beginPath();
// _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
// _ctx.fillRect(this.x, this.y, this.radius, this.radius);
// _ctx.closePath();
};
Node.initialized = true;
}
// this.init();
};
// ____ __ _
// / __ \/ /_ __ _______(_)_________
// / /_/ / __ \/ / / / ___/ / ___/ ___/
// / ____/ / / / /_/ (__ ) / /__(__ )
// /_/ /_/ /_/\__, /____/_/\___/____/
// /____/
// TODO: how to use particule collision in new OOP Node() contexte
function checkParticulesCollisions(){
// colisions between _particules
for (var p = 0, l = _particules.length; p < l; p++) {
var particule = _particules[p];
// var theta = 360 / (Math.PI * _p_radius);
if(!particule.attracted) continue;
for (var q = 0; q < p; q++) {
if(q==p) continue;
var a = particule;
var b = particules[q];
var b = _particules[q];
if(!b.attracted) continue;
var d = a.distanceTo(b);
// apply new forces if colliding
if(d <= radius*2){
if(d <= _p_radius*2){
var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
@@ -97,8 +300,8 @@
// move particles if they overlap
if (d < radius*2) {
var makeup = radius - d/2;
if (d < _p_radius*2) {
var makeup = _p_radius - d/2;
var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
b.position.x += makeup * Math.cos(angle);
@@ -113,44 +316,26 @@
}
}
}
};
for (var i = 0; i < particules.length; i++) {
var p = particules[i];
// wall boucing
if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
// console.log("bounce x");
p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
}
if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
// console.log("bounce y");
p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
}
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
// / _, _/ __/ / / / /_/ / __/ /
// /_/ |_|\___/_/ /_/\__,_/\___/_/
function render(){
_ctx.clearRect(0, 0, _canvas.width, _canvas.height);
// draw the ball
ctx.beginPath();
ctx.fillRect(p.position.x, p.position.y, 8, 8);
if(p.attracted){
ctx.fillStyle = "red";
}else{
ctx.fillStyle = "black";
}
ctx.fill();
for (var i = 0; i < _nodes.length; i++) {
_nodes[i].onUpdate();
}
};
function startAnime(){
physics.onUpdate(render);
// render();
physics.play()
_physics.onUpdate(render);
_physics.play()
};
init();
}
sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss
+10 -1
View File
@@ -1,4 +1,13 @@
canvas.edlp-map{
// @Author: Bachir Soussi Chiadmi <bach>
// @Date: 18-12-2017
// @Email: bachir@figureslibres.io
// @Filename: corpus.scss
// @Last modified by: bach
// @Last modified time: 20-12-2017
// @License: GPL-V3
canvas#edlp-map{
// background-color: grey;
position: absolute;
box-sizing: border-box;
top:0; left:0;
sites/all/modules/figli/edlp_corpus/bower.json
+2 -1
View File
@@ -14,6 +14,7 @@
"tests"
],
"dependencies": {
"physics": "latest"
"physics": "latest",
"EaselJS": "latest"
}
}
sites/all/modules/figli/edlp_corpus/edlp_corpus.libraries.yml
+10 -1
View File
@@ -1,3 +1,11 @@
# @Author: Bachir Soussi Chiadmi <bach>
# @Date: 20-12-2017
# @Email: bachir@figureslibres.io
# @Filename: edlp_corpus.libraries.yml
# @Last modified by: bach
# @Last modified time: 20-12-2017
# @License: GPL-V3
corpus:
version: VERSION
css:
@@ -6,7 +14,8 @@ corpus:
version: VERSION
js:
assets/dist/bower/physics.js: { scope: footer }
assets/dist/bower/physics.min.js: { scope: footer }
# assets/dist/bower/easeljs.min.js: { scope: footer }
assets/dist/scripts/corpus.min.js: { scope: footer }
dependencies:
- core/drupalSettings
sites/all/modules/figli/edlp_corpus/edlp_corpus.routing.yml
+8
View File
@@ -1,3 +1,11 @@
# @Author: Bachir Soussi Chiadmi <bach>
# @Date: 13-12-2017
# @Email: bachir@figureslibres.io
# @Filename: edlp_corpus.routing.yml
# @Last modified by: bach
# @Last modified time: 20-12-2017
# @License: GPL-V3
edlp_corpus.corpusjson:
path: '/edlp/corpus'
defaults:
sites/all/modules/figli/edlp_corpus/gulpfile.js
+18
View File
@@ -1,3 +1,13 @@
/**
* @Author: Bachir Soussi Chiadmi <bach>
* @Date: 20-12-2017
* @Email: bachir@figureslibres.io
* @Filename: gulpfile.js
* @Last modified by: bach
* @Last modified time: 20-12-2017
* @License: GPL-V3
*/
'use strict';
var gulp = require('gulp');
@@ -47,9 +57,17 @@ gulp.task('bower', function() {
"main": [
'./build/physics.js'
]
},
"EaselJS":{
"ignore":true
// "main": [
// './lib/easeljs.js'
// ]
}
}
}))
.pipe(config.production ? jsmin() : util.noop())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./assets/dist/bower/'));
});
sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php
+10
View File
@@ -61,11 +61,21 @@ class CorpusController extends ControllerBase {
);
}
$query = \Drupal::entityQuery('taxonomy_term')
->condition('vid', 'entrees');
$tids = $query->execute();
// $nodes = entity_load_multiple('node', $nids);
foreach ($tids as $tid) {
$entrees[] = $tid;
}
$data = array(
'date' => time(),
'site_name' => $config->get('name'),
'count' => count($nodes),
'nodes' => $nodes_data,
'entrees' => $entrees
);
$response->setData($data);
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+3 -1
View File
@@ -11,7 +11,9 @@ body, html {
width: 100%;
height: 100%;
font-family: Georgia, serif;
font-style: normal; }
font-style: normal;
margin: 0;
padding: 0; }
div.layout-container {
position: relative;
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+10
View File
@@ -1,3 +1,11 @@
// @Author: Bachir Soussi Chiadmi <bach>
// @Date: 18-12-2017
// @Email: bachir@figureslibres.io
// @Filename: app.scss
// @Last modified by: bach
// @Last modified time: 20-12-2017
// @License: GPL-V3
@import 'base/reset';
@import 'base/vars';
@@ -12,6 +20,8 @@ body, html{
height:100%;
font-family: Georgia, serif;
font-style: normal;
margin:0;
padding:0;
}
sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss
+21
View File
@@ -0,0 +1,21 @@
$130:rgb(75, 143, 126);
$121:rgb(134, 142, 36);
$134:rgb(43, 143, 47);
$121:rgb(58, 51, 182);
$125:rgb(44, 159, 87);
$119:rgb(196, 137, 120);
$132:rgb(82, 112, 187);
$122:rgb(251, 84, 211);
$129:rgb(224, 116, 131);
$120:rgb(101, 88, 69);
$130:rgb(126, 8, 104);
$118:rgb(14, 113, 33);
$127:rgb(218, 189, 66);
$133:rgb(3, 153, 187);
$128:rgb(57, 154, 28);
$124:rgb(112, 133, 64);
$116:rgb(25, 27, 255);
$117:rgb(39, 157, 132);
$131:rgb(82, 25, 171);
$126:rgb(212, 156, 182);
$123:rgb(73, 119, 21);