From f98741219f5d9034d77705bfc12fa5235ee698c3 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Sat, 22 Jun 2019 12:08:22 +0530 Subject: [PATCH 01/19] Create myconnectivityMatrix.html --- .../connectivity/myconnectivityMatrix.html | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html new file mode 100644 index 000000000..a535edd41 --- /dev/null +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html @@ -0,0 +1,21 @@ +
+ + +
+ + + + + +
+ + +
+
+ + +
From 76bd308c3d0d81839a6fc46d35f497bb363527a4 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Sat, 22 Jun 2019 12:23:29 +0530 Subject: [PATCH 02/19] Create myconnectivityMatrix.js --- .../scripts/myconnectivityMatrix.js | 329 ++++++++++++++++++ 1 file changed, 329 insertions(+) create mode 100644 tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js new file mode 100644 index 000000000..b454a9cc2 --- /dev/null +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js @@ -0,0 +1,329 @@ +/** + * TheVirtualBrain-Framework Package. This package holds all Data Management, and + * Web-UI helpful to run brain-simulations. To use it, you also need do download + * TheVirtualBrain-Scientific Package (for simulators). See content of the + * documentation-folder for more details. See also http://www.thevirtualbrain.org + * + * (c) 2012-2017, Baycrest Centre for Geriatric Care ("Baycrest") and others + * + * This program is free software: you can redistribute it and/or modify it under the + * terms of the GNU General Public License as published by the Free Software Foundation, + * either version 3 of the License, or (at your option) any later version. + * This program is distributed in the hope that it will be useful, but WITHOUT ANY + * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A + * PARTICULAR PURPOSE. See the GNU General Public License for more details. + * You should have received a copy of the GNU General Public License along with this + * program. If not, see . + * + **/ + +/* + +For matrix drawing reference is taken from space-time part + work in progress................. + +*/ + + +var CONNECTIVITY_MATRIX_ID = "GLcanvas_MATRIX" // canvas id for the matrix + +var myfullMatrixColors = null; // Colors for the full connectivity matrix +var myoutlineVerticeBuffer = null; // Vertices for the full matrix outline square +var myoutlineNormalsBuffer = null; // Normals for the full matrix outline square +var myoutlineLinesBuffer = null; // The line indices for thr full matrix outline square +var myplotColorBuffers = []; // A list of color buffers for the various space-time connectivity matrices +var myverticesBuffer = []; // A list of vertex buffers for the various space-time connectivity matrices +var mynormalsBuffer = []; // A list of normal buffers for the various space-time connecitivty matrices +var myindexBuffer = []; // A list of triangles index buffers for the various space-time connectivity matrices +var mylinesIndexBuffer = []; // A list of line index buffers for the various space-time connectivity matrices + +var myplotSize = 250; // Default plot size of 250 pixels +var mydefaultZ = -2.0; // Default plot Z position of -2.0 +var mydoPick = false; // No picking by default +var mynrOfSteps = 1; // Number of space-time plots we will draw in scene +var mycolorsForPicking = []; // The colors which are used for the picking scheme + // Keep track of the rotations for each plot +var myzoomedInMatrix = -1; // The matrix witch is currently zoomed in on +var myclickedMatrix = -1; +var mybackupTranslations = []; +var mybackupRotations = []; +var myanimationStarted = false; +var myalphaValueMatrix = 1.0; // original alpha value for default plot +var mybackupAlphaValue = myalphaValueMatrix; // backup used in animations + + +function myinitColorsForPicking() { + mycolorsForPicking = []; + for (var i=0; i <= mynrOfSteps; i++) { + // Go up to nrOfSteps since for 0 we will consider the full matrix as being clicked + var r = parseInt(1.0 / (i + 1) * 255); + var g = parseInt(i / mynrOfSteps * 255); + var b = 0.0; + mycolorsForPicking.push([r / 255, g / 255, b / 255]); + var colorKey = r + '' + g + '0'; + GL_colorPickerMappingDict[colorKey] = i; + } + GL_initColorPickFrameBuffer(); +} + +/* + * Custom shader initializations specific for the space-time connectivity plot + */ +function initShaders_MATRIX() { + createAndUseShader("shader-plot-fs", "shader-plot-vs"); + SHADING_Context.basic_program_init(GL_shaderProgram); + + GL_shaderProgram.drawLines = gl.getUniformLocation(GL_shaderProgram, "uDrawLines"); + GL_shaderProgram.alphaValue = gl.getUniformLocation(GL_shaderProgram, "uAlpha"); + GL_shaderProgram.lineColor = gl.getUniformLocation(GL_shaderProgram, "uLineColor"); + GL_shaderProgram.isPicking = gl.getUniformLocation(GL_shaderProgram, "isPicking"); + GL_shaderProgram.pickingColor = gl.getUniformLocation(GL_shaderProgram, "pickingColor"); + + GL_shaderProgram.vertexColorAttribute = gl.getAttribLocation(GL_shaderProgram, "aVertexColor"); + gl.enableVertexAttribArray(GL_shaderProgram.vertexColorAttribute); +} + + +function connectivityMatrix_startGL() { + conectivityMatrix_initCanvas(); + //Do the required initializations for the connectivity space-time visualizer + initShaders_MATRIX(); + + gl.clearDepth(1.0); + gl.enable(gl.DEPTH_TEST); + gl.depthFunc(gl.LEQUAL); + + // updateMatrixHeader(); +} + +function _GL_createBuffer(data, type){ + type = type || gl.ARRAY_BUFFER; + var buff = gl.createBuffer(); + gl.bindBuffer(type, buff); + gl.bufferData(type, data, gl.STATIC_DRAW); + buff.numItems = data.length; + return buff; +} + +/* + * Create the required buffers for the weight matrix... + */ +function createMatrix() { //todo:understand the working of every element + var nrElems = GVAR_interestAreaVariables[GVAR_selectedAreaType].values.length; + // starting 'x' and 'y' axis values for the plot in order to center around (0, 0) + var startX = - myplotSize / 2; + var startY = - myplotSize / 2; + // The size of a matrix element + var elementSize = myplotSize / nrElems; + // Create arrays from start for performance reasons + var vertices = new Float32Array(nrElems * nrElems * 4 * 3); + var normals = new Float32Array(nrElems * nrElems * 4 * 3); + var indices = new Uint16Array(nrElems * nrElems * 2 * 3); + var linesIndices = new Uint16Array(nrElems * nrElems * 2 * 4); + + var linearIndex = -1; + + for (var i = 0; i < nrElems; i++) { + for (var j = 0; j < nrElems; j++) { + linearIndex += 1; + // For each separate element, compute the position of the 4 required vertices + // depending on the position from the connectivity matrix + var upperLeftX = startX + j * elementSize; + var upperLeftY = startY + i * elementSize; + + // Since the vertex array is flatten, and there are 4 vertices per one element, + // in order to fill the position in the vertice array we need to fill all 12 elements + var elemVertices = [ + upperLeftX, upperLeftY, mydefaultZ, + upperLeftX + elementSize, upperLeftY, mydefaultZ, //upper right + upperLeftX, upperLeftY + elementSize, mydefaultZ, //lower left + upperLeftX + elementSize, upperLeftY + elementSize, mydefaultZ // lower right + ]; + + var indexBase = 4 * linearIndex; + + // For the normals it's easier since we only need one normal for each vertex + var elemNormals = [ + 0, 0, -1, + 0, 0, -1, + 0, 0, -1, + 0, 0, -1 + ]; + + // We have 2 triangles, which again are flatten so we need to fill 6 index elements + var elemIndices = [ + indexBase + 0, indexBase + 1, indexBase + 2, + indexBase + 1, indexBase + 2, indexBase + 3 + ]; + + // For the lines we have 4 lines per element, flatten again, so 8 index elements to fill + var elemLines = [ + indexBase + 0, indexBase + 1, + indexBase + 1, indexBase + 3, + indexBase + 2, indexBase + 3, + indexBase + 2, indexBase + 0 + ]; + + vertices.set(elemVertices, 3 * 4 * linearIndex); + normals.set(elemNormals, 3 * 4 * linearIndex); + indices.set(elemIndices, 3 * 2 * linearIndex); + linesIndices.set(elemLines, 4 * 2 * linearIndex); + } + } + // Now create all the required buffers having the computed data. + myverticesBuffer = _GL_createBuffer(vertices); + mynormalsBuffer = _GL_createBuffer(normals); + myindexBuffer = _GL_createBuffer(indices, gl.ELEMENT_ARRAY_BUFFER); + mylinesIndexBuffer = _GL_createBuffer(linesIndices, gl.ELEMENT_ARRAY_BUFFER); + mycreateOutlineSquare(startX, startY, elementSize, nrElems); +} + +/* + * Compute the required vertex and idex for the square outline of the full connectivity matrix + */ +function mycreateOutlineSquare(startX, startY, elementSize, nrElems) { + var width = nrElems * elementSize; + var outlineVertices = [ + startX, startY, mydefaultZ, + startX + width, startY, mydefaultZ, + startX, startY + width, mydefaultZ, + startX + width, startY + width, mydefaultZ + ]; + var outlineNormals = [0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1]; + var outlineLines = [0, 1, 0, 2, 1, 3, 2, 3]; + myoutlineVerticeBuffer = _GL_createBuffer(new Float32Array(outlineVertices)); + myoutlineNormalsBuffer = _GL_createBuffer(new Float32Array(outlineNormals)); + myoutlineLinesBuffer = _GL_createBuffer(new Uint16Array(outlineLines), gl.ELEMENT_ARRAY_BUFFER); +} + + +/* + * Generate a color buffer which represents the state of the weights for + * a given 'interval' centered around a given tract value + * + * @param tractValue: the center of the interval + * @param intervalLength: the length of the interval + * + * @returns: a color buffer, where for the connections that fall in the defined interval, + * a gradient color is assigned based on the weights strenght, and for the + * rest the color black is used. + */ +function mygenerateColors(tractValue, intervalLength) { + var theme = ColSchGetTheme().connectivityStepPlot; + var matrixWeightsValues = GVAR_interestAreaVariables[1].values; + var matrixTractsValues = GVAR_interestAreaVariables[2].values; + var minWeightsValue = GVAR_interestAreaVariables[1].min_val; + var maxWeightsValue = GVAR_interestAreaVariables[1].max_val; + var nrElems = matrixWeightsValues.length; + var colors = new Float32Array(nrElems * nrElems * 3 * 4); + var linearIndex = -1; + + for (var i = 0; i < nrElems; i++) { + for (var j = 0; j < nrElems; j++) { + linearIndex += 1; + // For each element generate 4 identical colors corresponding to the 4 vertices used for the element + var delayValue = matrixTractsValues[i][nrElems - j - 1] / conductionSpeed; + var weight = matrixWeightsValues[i][nrElems - j - 1]; + + var isWithinInterval = (delayValue >= (tractValue - intervalLength / 2) && + delayValue <= (tractValue + intervalLength / 2)); + var color; + + if (isWithinInterval && weight != 0) { + color = getGradientColor(weight, minWeightsValue, maxWeightsValue).slice(0, 3); + }else{ + color = theme.noValueColor; + } + + color = [].concat(color, color, color, color); + colors.set(color, 3 * 4 * linearIndex); + } + } + var buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); + return buffer; +} + + +function conectivityMatrix_initCanvas() { + var canvas = document.getElementById(CONNECTIVITY_MATRIX_ID); + initGL(canvas); + var theme = ColSchGetTheme().connectivityStepPlot; + gl.clearColor(theme.backgroundColor[0], theme.backgroundColor[1], theme.backgroundColor[2], theme.backgroundColor[3]); + myplotSize = parseInt(canvas.clientWidth / 3); // Compute the size of one connectivity plot depending on the canvas width + + createMatrix() // changing the own + + +} + + + +/* + * Draw the full matrix, with the outline square. + */ +function drawMyMatrix(mydoPick, idx) { + var theme = ColSchGetTheme().connectivityStepPlot; + mvPushMatrix(); + + + + // Draw the actual matrix. + gl.bindBuffer(gl.ARRAY_BUFFER, myverticesBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, mynormalsBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); + setMatrixUniforms(); + + + gl.bindBuffer(gl.ARRAY_BUFFER, myplotColorBuffers[idx]); + gl.vertexAttribPointer(GL_shaderProgram.vertexColorAttribute, 3, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myindexBuffer); + gl.drawElements(gl.TRIANGLES, myindexBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.uniform3f(GL_shaderProgram.lineColor, theme.lineColor[0], theme.lineColor[1], theme.lineColor[2]); + gl.uniform1i(GL_shaderProgram.drawLines, true); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mylinesIndexBuffer); + gl.lineWidth(1.0); + gl.drawElements(gl.LINES, mylinesIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.uniform1i(GL_shaderProgram.drawLines, false); + + // Now draw the square outline + if (idx == myclickedMatrix) { + gl.uniform3f(GL_shaderProgram.lineColor, theme.selectedOutlineColor[0], theme.selectedOutlineColor[1], theme.selectedOutlineColor[2]); + gl.lineWidth(3.0); + } else { + gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); + gl.lineWidth(2.0); + } + gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineVerticeBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineNormalsBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); + gl.uniform1i(GL_shaderProgram.drawLines, true); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, outlineLinesBuffer); + gl.drawElements(gl.LINES, myoutlineLinesBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.lineWidth(2.0); + gl.uniform1i(GL_shaderProgram.drawLines, false); + + mvPopMatrix(); +} + + + +function draw() { //gl.viewportWidth, gl.viewportHeight + gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); + // View angle is 45, we want to see object from 0.1 up to 800 distance from viewer + perspective(45, gl.viewportWidth / gl.viewportHeight, near, 800.0); + + loadIdentity(); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + for (var i = 0; i < myplotColorBuffers.length; i++) { + drawMyMatrix(true, i); + } + + +} + + From 85faa0b06c470699318b7a0ec3a8b5f2ea619bd4 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Sat, 22 Jun 2019 12:26:48 +0530 Subject: [PATCH 03/19] Update connectivityGlobals.js --- .../scripts/connectivityGlobals.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js index e5ed99e6e..d38e79dec 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js @@ -500,3 +500,23 @@ function startSpaceTimeConnectivity() { drawSceneSpaceTime(); } + +/* + +weight matrix experiment......................... +in progress.............. + +*/ + +function startConnectivityMatrix() { + SELECTED_TAB = CONNECTIVITY_MATRIX_TAB; + $("#matrix-plot-id").show(); // change id with my own id + document.getElementById(CONNECTIVITY_MATRIX_ID).redrawFunctionRef = draw; // interface-like function used in HiRes image exporting + connectivityMatrix_startGL(); + //GFUNC_bind_gl_resize_handler(); + // Sync size to parent. While the other tabs had been active the window might have resized. + updateGLCanvasSize(CONNECTIVITY_MATRIX_ID); + draw(); +} + + From d3f4e293fe1b606d5e62fae7e927be01fd30bd54 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Sat, 22 Jun 2019 12:34:13 +0530 Subject: [PATCH 04/19] Update main_connectivity.html --- .../connectivity/main_connectivity.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html index 45c636ef3..57422aa40 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html @@ -140,7 +140,21 @@

Control Large Scale Matrices

+ +
+ + + +
+ + + + + + From cb05aefb6471ff4b787ee68c15c2787a25285001 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Tue, 25 Jun 2019 00:03:17 +0530 Subject: [PATCH 05/19] Update myconnectivityMatrix.js --- .../scripts/myconnectivityMatrix.js | 107 ++++++++++-------- 1 file changed, 57 insertions(+), 50 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js index b454a9cc2..dff41fd3e 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js @@ -17,12 +17,6 @@ * **/ -/* - -For matrix drawing reference is taken from space-time part - work in progress................. - -*/ var CONNECTIVITY_MATRIX_ID = "GLcanvas_MATRIX" // canvas id for the matrix @@ -42,7 +36,9 @@ var mydefaultZ = -2.0; // Default plot Z position of -2.0 var mydoPick = false; // No picking by default var mynrOfSteps = 1; // Number of space-time plots we will draw in scene var mycolorsForPicking = []; // The colors which are used for the picking scheme - // Keep track of the rotations for each plot + +var myplotTranslations = []; // Keep track of the translation for each plot. +var myplotRotations = []; // Keep track of the rotations for each plot var myzoomedInMatrix = -1; // The matrix witch is currently zoomed in on var myclickedMatrix = -1; var mybackupTranslations = []; @@ -50,27 +46,15 @@ var mybackupRotations = []; var myanimationStarted = false; var myalphaValueMatrix = 1.0; // original alpha value for default plot var mybackupAlphaValue = myalphaValueMatrix; // backup used in animations - - -function myinitColorsForPicking() { - mycolorsForPicking = []; - for (var i=0; i <= mynrOfSteps; i++) { - // Go up to nrOfSteps since for 0 we will consider the full matrix as being clicked - var r = parseInt(1.0 / (i + 1) * 255); - var g = parseInt(i / mynrOfSteps * 255); - var b = 0.0; - mycolorsForPicking.push([r / 255, g / 255, b / 255]); - var colorKey = r + '' + g + '0'; - GL_colorPickerMappingDict[colorKey] = i; - } - GL_initColorPickFrameBuffer(); -} - +var minSelectedDelayValue = -1; +var maxSelectedDelayValue = -1; +var myanimationTimeout = 33; // 30Hz +var myanimationGranularity = 20; /* * Custom shader initializations specific for the space-time connectivity plot */ function initShaders_MATRIX() { - createAndUseShader("shader-plot-fs", "shader-plot-vs"); + createAndUseShader("shader-mymatrix-fs", "shader-mymatrix-vs"); SHADING_Context.basic_program_init(GL_shaderProgram); GL_shaderProgram.drawLines = gl.getUniformLocation(GL_shaderProgram, "uDrawLines"); @@ -87,13 +71,12 @@ function initShaders_MATRIX() { function connectivityMatrix_startGL() { conectivityMatrix_initCanvas(); //Do the required initializations for the connectivity space-time visualizer - initShaders_MATRIX(); + initShaders_MATRIX(); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); - // updateMatrixHeader(); } function _GL_createBuffer(data, type){ @@ -106,9 +89,9 @@ function _GL_createBuffer(data, type){ } /* - * Create the required buffers for the weight matrix... + * Create the required buffers for the space-time plot. */ -function createMatrix() { //todo:understand the working of every element +function createMatrix() { var nrElems = GVAR_interestAreaVariables[GVAR_selectedAreaType].values.length; // starting 'x' and 'y' axis values for the plot in order to center around (0, 0) var startX = - myplotSize / 2; @@ -246,16 +229,34 @@ function mygenerateColors(tractValue, intervalLength) { } + +function myConnStepPlotInitColorBuffers() { + myinitColorsForPicking(); + myplotColorBuffers = []; + var stepValue = (mymaxSelectedDelayValue - myminSelectedDelayValue) / mynrOfSteps; + myplotColorBuffers.push(mygenerateColors((mymaxSelectedDelayValue + myminSelectedDelayValue) / 2, mymaxSelectedDelayValue - minSelectedDelayValue)); + // In order to avoid floating number approximations which keep the loop for one more iteration just approximate by + // substracting 0.1 + for (var tractValue = myminSelectedDelayValue + stepValue / 2; tractValue < parseInt(mymaxSelectedDelayValue) - 0.1; tractValue = tractValue + stepValue) { + myplotColorBuffers.push(mygenerateColors(tractValue, stepValue)); + } + var theme = ColSchGetTheme().connectivityStepPlot; + gl.clearColor(theme.backgroundColor[0], theme.backgroundColor[1], theme.backgroundColor[2], theme.backgroundColor[3]); + draw(); +} + + + + + function conectivityMatrix_initCanvas() { var canvas = document.getElementById(CONNECTIVITY_MATRIX_ID); - initGL(canvas); + initGL(canvas); var theme = ColSchGetTheme().connectivityStepPlot; - gl.clearColor(theme.backgroundColor[0], theme.backgroundColor[1], theme.backgroundColor[2], theme.backgroundColor[3]); - myplotSize = parseInt(canvas.clientWidth / 3); // Compute the size of one connectivity plot depending on the canvas width + gl.clearColor(theme.backgroundColor[0], theme.backgroundColor[1], theme.backgroundColor[2], theme.backgroundColor[3]); + plotSize = parseInt(canvas.clientWidth / 3); // Compute the size of one connectivity plot depending on the canvas width + createMatrix(); - createMatrix() // changing the own - - } @@ -263,11 +264,10 @@ function conectivityMatrix_initCanvas() { /* * Draw the full matrix, with the outline square. */ -function drawMyMatrix(mydoPick, idx) { +function drawMyMatrix() { var theme = ColSchGetTheme().connectivityStepPlot; mvPushMatrix(); - // Draw the actual matrix. gl.bindBuffer(gl.ARRAY_BUFFER, myverticesBuffer); @@ -277,7 +277,6 @@ function drawMyMatrix(mydoPick, idx) { setMatrixUniforms(); - gl.bindBuffer(gl.ARRAY_BUFFER, myplotColorBuffers[idx]); gl.vertexAttribPointer(GL_shaderProgram.vertexColorAttribute, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myindexBuffer); gl.drawElements(gl.TRIANGLES, myindexBuffer.numItems, gl.UNSIGNED_SHORT, 0); @@ -289,40 +288,48 @@ function drawMyMatrix(mydoPick, idx) { gl.uniform1i(GL_shaderProgram.drawLines, false); // Now draw the square outline - if (idx == myclickedMatrix) { - gl.uniform3f(GL_shaderProgram.lineColor, theme.selectedOutlineColor[0], theme.selectedOutlineColor[1], theme.selectedOutlineColor[2]); - gl.lineWidth(3.0); - } else { + // if (idx == myclickedMatrix) { + // gl.uniform3f(GL_shaderProgram.lineColor, theme.selectedOutlineColor[0], theme.selectedOutlineColor[1], theme.selectedOutlineColor[2]); + // gl.lineWidth(3.0); + // } else { gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); gl.lineWidth(2.0); - } + // } gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineVerticeBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); - gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineNormalsBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineNormalsBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); gl.uniform1i(GL_shaderProgram.drawLines, true); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, outlineLinesBuffer); gl.drawElements(gl.LINES, myoutlineLinesBuffer.numItems, gl.UNSIGNED_SHORT, 0); gl.lineWidth(2.0); gl.uniform1i(GL_shaderProgram.drawLines, false); + // } mvPopMatrix(); } - -function draw() { //gl.viewportWidth, gl.viewportHeight +/* + * Draw the entire matrices. + */ +function draw() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); // View angle is 45, we want to see object from 0.1 up to 800 distance from viewer perspective(45, gl.viewportWidth / gl.viewportHeight, near, 800.0); loadIdentity(); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + // Translate to get a good view. + mvTranslate([0.0, 0.0, -600]); + - for (var i = 0; i < myplotColorBuffers.length; i++) { - drawMyMatrix(true, i); - } - + gl.uniform1f(GL_shaderProgram.alphaValue, myalphaValueMatrix); + gl.uniform1f(GL_shaderProgram.isPicking, 0); + gl.uniform3f(GL_shaderProgram.pickingColor, 1, 1, 1); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + + drawMyMatrix(); } From 7e134d8216a46690d346d5d95e03b3106c501acf Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Tue, 25 Jun 2019 00:07:32 +0530 Subject: [PATCH 06/19] Update connectivityGlobals.js --- .../scripts/connectivityGlobals.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js index d38e79dec..1a82cc454 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityGlobals.js @@ -251,6 +251,7 @@ function patchContextMenu() { cmenu.showShadow(pos.x,pos.y,e); // Resize the iframe if needed if (cmenu.useIframe) { + $c.find('iframe').css({width:$c.width()+cmenu.shadowOffsetX+cmenu.shadowWidthAdjust,height:$c.height()+cmenu.shadowOffsetY+cmenu.shadowHeightAdjust}); } $c.css( {top:pos.y+"px", left:pos.x+"px", position:"fixed",zIndex:9999} )[cmenu.showTransition](cmenu.showSpeed,((cmenu.showCallback)?function(){cmenu.showCallback.call(cmenu);}:null)); @@ -395,6 +396,7 @@ function showTractsTable() { /* * ------------------------------Left side tab functions below------------------------------------ */ +var CONNECTIVITY_MATRIX_TAB = 5; // my work... var CONNECTIVITY_TAB = 1; var CONNECTIVITY_2D_TAB = 2; var CONNECTIVITY_SPACE_TIME_TAB = 4; @@ -492,31 +494,34 @@ function start2DConnectivity(idx) { function startSpaceTimeConnectivity() { SELECTED_TAB = CONNECTIVITY_SPACE_TIME_TAB; $("#monitor-plot-id").show(); + document.getElementById(CONNECTIVITY_SPACE_TIME_CANVAS_ID).redrawFunctionRef = drawSceneSpaceTime; // interface-like function used in HiRes image exporting + connectivitySpaceTime_startGL(); + GFUNC_bind_gl_resize_handler(); // Sync size to parent. While the other tabs had been active the window might have resized. updateGLCanvasSize(CONNECTIVITY_SPACE_TIME_CANVAS_ID); + drawSceneSpaceTime(); } /* -weight matrix experiment......................... -in progress.............. +My work for connectivity ..... +.......................................................... +........................................................... */ + + function startConnectivityMatrix() { - SELECTED_TAB = CONNECTIVITY_MATRIX_TAB; - $("#matrix-plot-id").show(); // change id with my own id - document.getElementById(CONNECTIVITY_MATRIX_ID).redrawFunctionRef = draw; // interface-like function used in HiRes image exporting + connectivityMatrix_startGL(); - //GFUNC_bind_gl_resize_handler(); - // Sync size to parent. While the other tabs had been active the window might have resized. + updateGLCanvasSize(CONNECTIVITY_MATRIX_ID); - draw(); + draw(); } - From 17f9a7370015b1e73f4b77fb8066844408b446b8 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Tue, 25 Jun 2019 00:12:37 +0530 Subject: [PATCH 07/19] Update myconnectivityMatrix.html added the id of the shader --- .../visualizers/connectivity/myconnectivityMatrix.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html index a535edd41..28bdc57a1 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/myconnectivityMatrix.html @@ -2,17 +2,17 @@
- -
- +
From 4c700e4ccd39368febd36c05100eda4d2db2371b Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Tue, 2 Jul 2019 00:42:31 +0530 Subject: [PATCH 08/19] Update myconnectivityMatrix.js --- .../scripts/myconnectivityMatrix.js | 205 +++++++++--------- 1 file changed, 108 insertions(+), 97 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js index dff41fd3e..682c5c446 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js @@ -18,38 +18,102 @@ **/ - var CONNECTIVITY_MATRIX_ID = "GLcanvas_MATRIX" // canvas id for the matrix +var myplotColorBuffers; // A list of color buffers for the connectivity matrices -var myfullMatrixColors = null; // Colors for the full connectivity matrix -var myoutlineVerticeBuffer = null; // Vertices for the full matrix outline square var myoutlineNormalsBuffer = null; // Normals for the full matrix outline square var myoutlineLinesBuffer = null; // The line indices for thr full matrix outline square -var myplotColorBuffers = []; // A list of color buffers for the various space-time connectivity matrices var myverticesBuffer = []; // A list of vertex buffers for the various space-time connectivity matrices var mynormalsBuffer = []; // A list of normal buffers for the various space-time connecitivty matrices var myindexBuffer = []; // A list of triangles index buffers for the various space-time connectivity matrices var mylinesIndexBuffer = []; // A list of line index buffers for the various space-time connectivity matrices - -var myplotSize = 250; // Default plot size of 250 pixels +var colorBuffer //mywork..... +var myplotSize = 450; // Default plot size of 250 pixels var mydefaultZ = -2.0; // Default plot Z position of -2.0 -var mydoPick = false; // No picking by default -var mynrOfSteps = 1; // Number of space-time plots we will draw in scene -var mycolorsForPicking = []; // The colors which are used for the picking scheme - -var myplotTranslations = []; // Keep track of the translation for each plot. -var myplotRotations = []; // Keep track of the rotations for each plot -var myzoomedInMatrix = -1; // The matrix witch is currently zoomed in on -var myclickedMatrix = -1; -var mybackupTranslations = []; -var mybackupRotations = []; -var myanimationStarted = false; var myalphaValueMatrix = 1.0; // original alpha value for default plot var mybackupAlphaValue = myalphaValueMatrix; // backup used in animations -var minSelectedDelayValue = -1; -var maxSelectedDelayValue = -1; -var myanimationTimeout = 33; // 30Hz -var myanimationGranularity = 20; + + +/* + +Generating the color for the connectivity matrices ....... + +*/ + +function mygenerateColors(tractValue, intervalLength) { + var theme = ColSchGetTheme().connectivityStepPlot; // this is the theme of the matrix,same is space time plot.. + var matrixWeightsValues = GVAR_interestAreaVariables[1].values; //An 2D array with all weight data... + var matrixTractsValues = GVAR_interestAreaVariables[2].values; + var minWeightsValue = GVAR_interestAreaVariables[1].min_val; // Minimum weights value in range(0,>0); + var maxWeightsValue = GVAR_interestAreaVariables[1].max_val; //Maximum weights value in range(>0); + var nrElems = matrixWeightsValues.length; // dimensions of matrix....let N X N. + var colors = new Float32Array(nrElems * nrElems * 3 * 4); // Array for the colors... + var linearIndex = -1; + + for (var i = 0; i < nrElems; i++) { + for (var j = 0; j < nrElems; j++) { + linearIndex += 1; + // For each element generate 4 identical colors corresponding to the 4 vertices used for the element + // var delayValue = matrixTractsValues[i][nrElems - j - 1]; /// conductionSpeed; + var weight = matrixWeightsValues[i][nrElems - j - 1]; + + //var isWithinInterval = (delayValue >= (tractValue - intervalLength / 2) && + // delayValue <= (tractValue + intervalLength / 2)); + var color; + + + + color = weight!=0?getGradientColor(weight, minWeightsValue, maxWeightsValue).slice(0, 3): theme.noValueColor; + + + // if (weight != 0) + // { + // color = getGradientColor(weight, minWeightsValue, maxWeightsValue).slice(0, 3); + // } + // else{ + // color = theme.noValueColor; + // } + + color = [].concat(color, color, color, color); + colors.set(color, 3 * 4 * linearIndex); + } + } + var buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); + return buffer; +} + + + +function myConnStepPlotInitColorBuffers() { + myinitColorsForPicking(); + myplotColorBuffers + mynrOfSteps = 1; + myplotColorBuffers=(mygenerateColors((maxSelectedDelayValue + minSelectedDelayValue) / 2, maxSelectedDelayValue - minSelectedDelayValue)); + // In order to avoid floating number approximations which keep the loop for one more iteration just approximate by + // substracting 0.1 + var theme = ColSchGetTheme().connectivityStepPlot; + gl.clearColor(theme.backgroundColor[0], theme.backgroundColor[1], theme.backgroundColor[2], theme.backgroundColor[3]); +} + + +function myinitColorsForPicking() { + colorsForPicking = []; + mynrOfSteps = 1; + for (var i=0; i <= mynrOfSteps; i++) { + // Go up to nrOfSteps since for 0 we will consider the full matrix as being clicked + var r = parseInt(1.0 / (i + 1) * 255); + var g = parseInt(i / mynrOfSteps * 255); + var b = 0.0; + colorsForPicking.push([r / 255, g / 255, b / 255]); + var colorKey = r + '' + g + '0'; + GL_colorPickerMappingDict[colorKey] = i; + } + GL_initColorPickFrameBuffer(); +} + + /* * Custom shader initializations specific for the space-time connectivity plot */ @@ -76,8 +140,9 @@ function connectivityMatrix_startGL() { gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); + myConnStepPlotInitColorBuffers(); -} + } function _GL_createBuffer(data, type){ type = type || gl.ARRAY_BUFFER; @@ -159,6 +224,18 @@ function createMatrix() { myindexBuffer = _GL_createBuffer(indices, gl.ELEMENT_ARRAY_BUFFER); mylinesIndexBuffer = _GL_createBuffer(linesIndices, gl.ELEMENT_ARRAY_BUFFER); mycreateOutlineSquare(startX, startY, elementSize, nrElems); + + + + var colors = [ + 1.0, 1.0, 1.0, 1.0, // white + 1.0, 0.0, 0.0, 1.0, // red + 0.0, 1.0, 0.0, 1.0, // green + 0.0, 0.0, 1.0, 1.0, // blue + ]; + + colorBuffer = _GL_createBuffer(new Float32Array(colors)); + } /* @@ -191,63 +268,6 @@ function mycreateOutlineSquare(startX, startY, elementSize, nrElems) { * a gradient color is assigned based on the weights strenght, and for the * rest the color black is used. */ -function mygenerateColors(tractValue, intervalLength) { - var theme = ColSchGetTheme().connectivityStepPlot; - var matrixWeightsValues = GVAR_interestAreaVariables[1].values; - var matrixTractsValues = GVAR_interestAreaVariables[2].values; - var minWeightsValue = GVAR_interestAreaVariables[1].min_val; - var maxWeightsValue = GVAR_interestAreaVariables[1].max_val; - var nrElems = matrixWeightsValues.length; - var colors = new Float32Array(nrElems * nrElems * 3 * 4); - var linearIndex = -1; - - for (var i = 0; i < nrElems; i++) { - for (var j = 0; j < nrElems; j++) { - linearIndex += 1; - // For each element generate 4 identical colors corresponding to the 4 vertices used for the element - var delayValue = matrixTractsValues[i][nrElems - j - 1] / conductionSpeed; - var weight = matrixWeightsValues[i][nrElems - j - 1]; - - var isWithinInterval = (delayValue >= (tractValue - intervalLength / 2) && - delayValue <= (tractValue + intervalLength / 2)); - var color; - - if (isWithinInterval && weight != 0) { - color = getGradientColor(weight, minWeightsValue, maxWeightsValue).slice(0, 3); - }else{ - color = theme.noValueColor; - } - - color = [].concat(color, color, color, color); - colors.set(color, 3 * 4 * linearIndex); - } - } - var buffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, buffer); - gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); - return buffer; -} - - - -function myConnStepPlotInitColorBuffers() { - myinitColorsForPicking(); - myplotColorBuffers = []; - var stepValue = (mymaxSelectedDelayValue - myminSelectedDelayValue) / mynrOfSteps; - myplotColorBuffers.push(mygenerateColors((mymaxSelectedDelayValue + myminSelectedDelayValue) / 2, mymaxSelectedDelayValue - minSelectedDelayValue)); - // In order to avoid floating number approximations which keep the loop for one more iteration just approximate by - // substracting 0.1 - for (var tractValue = myminSelectedDelayValue + stepValue / 2; tractValue < parseInt(mymaxSelectedDelayValue) - 0.1; tractValue = tractValue + stepValue) { - myplotColorBuffers.push(mygenerateColors(tractValue, stepValue)); - } - var theme = ColSchGetTheme().connectivityStepPlot; - gl.clearColor(theme.backgroundColor[0], theme.backgroundColor[1], theme.backgroundColor[2], theme.backgroundColor[3]); - draw(); -} - - - - function conectivityMatrix_initCanvas() { var canvas = document.getElementById(CONNECTIVITY_MATRIX_ID); @@ -267,16 +287,15 @@ function conectivityMatrix_initCanvas() { function drawMyMatrix() { var theme = ColSchGetTheme().connectivityStepPlot; mvPushMatrix(); - - + // Draw the actual matrix. gl.bindBuffer(gl.ARRAY_BUFFER, myverticesBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, mynormalsBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); setMatrixUniforms(); - - + + gl.bindBuffer(gl.ARRAY_BUFFER, myplotColorBuffers); gl.vertexAttribPointer(GL_shaderProgram.vertexColorAttribute, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myindexBuffer); gl.drawElements(gl.TRIANGLES, myindexBuffer.numItems, gl.UNSIGNED_SHORT, 0); @@ -287,33 +306,24 @@ function drawMyMatrix() { gl.drawElements(gl.LINES, mylinesIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); gl.uniform1i(GL_shaderProgram.drawLines, false); - // Now draw the square outline - // if (idx == myclickedMatrix) { - // gl.uniform3f(GL_shaderProgram.lineColor, theme.selectedOutlineColor[0], theme.selectedOutlineColor[1], theme.selectedOutlineColor[2]); - // gl.lineWidth(3.0); - // } else { - gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); - gl.lineWidth(2.0); - // } + + gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); + gl.lineWidth(2.0); gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineVerticeBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); - gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineNormalsBuffer); + gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineNormalsBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); gl.uniform1i(GL_shaderProgram.drawLines, true); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, outlineLinesBuffer); gl.drawElements(gl.LINES, myoutlineLinesBuffer.numItems, gl.UNSIGNED_SHORT, 0); gl.lineWidth(2.0); gl.uniform1i(GL_shaderProgram.drawLines, false); - // } mvPopMatrix(); } - -/* - * Draw the entire matrices. - */ function draw() { + gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); // View angle is 45, we want to see object from 0.1 up to 800 distance from viewer perspective(45, gl.viewportWidth / gl.viewportHeight, near, 800.0); @@ -330,6 +340,7 @@ function draw() { drawMyMatrix(); + } From 1fa6f638506d4579c8eafb6d1b69f8ea5e206964 Mon Sep 17 00:00:00 2001 From: "Manoranjan Kumar Bharti (Nakul Bharti)" Date: Mon, 15 Jul 2019 01:46:56 +0530 Subject: [PATCH 09/19] fixed some minor bugs --- .../scripts/myconnectivityMatrix.js | 94 +++++++++++-------- 1 file changed, 56 insertions(+), 38 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js index 682c5c446..86922e4d3 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/myconnectivityMatrix.js @@ -17,6 +17,15 @@ * **/ +/* + +* This js code let you draw the connectivity matrix with weight and tract components. + This aims to measure the performance with respect to the older one ... + + work in progress................ + +*/ + var CONNECTIVITY_MATRIX_ID = "GLcanvas_MATRIX" // canvas id for the matrix var myplotColorBuffers; // A list of color buffers for the connectivity matrices @@ -28,7 +37,7 @@ var mynormalsBuffer = []; // A list of normal buffers for the var var myindexBuffer = []; // A list of triangles index buffers for the various space-time connectivity matrices var mylinesIndexBuffer = []; // A list of line index buffers for the various space-time connectivity matrices var colorBuffer //mywork..... -var myplotSize = 450; // Default plot size of 250 pixels +var myplotSize = 480; // Default plot size of 250 pixels var mydefaultZ = -2.0; // Default plot Z position of -2.0 var myalphaValueMatrix = 1.0; // original alpha value for default plot var mybackupAlphaValue = myalphaValueMatrix; // backup used in animations @@ -41,24 +50,21 @@ Generating the color for the connectivity matrices ....... */ function mygenerateColors(tractValue, intervalLength) { - var theme = ColSchGetTheme().connectivityStepPlot; // this is the theme of the matrix,same is space time plot.. - var matrixWeightsValues = GVAR_interestAreaVariables[1].values; //An 2D array with all weight data... + var theme = ColSchGetTheme().connectivityStepPlot; // this is the theme of the matrix,same is space time plot. + var matrixWeightsValues = GVAR_interestAreaVariables[1].values; //An 2D array with all weight data. var matrixTractsValues = GVAR_interestAreaVariables[2].values; var minWeightsValue = GVAR_interestAreaVariables[1].min_val; // Minimum weights value in range(0,>0); - var maxWeightsValue = GVAR_interestAreaVariables[1].max_val; //Maximum weights value in range(>0); - var nrElems = matrixWeightsValues.length; // dimensions of matrix....let N X N. - var colors = new Float32Array(nrElems * nrElems * 3 * 4); // Array for the colors... + var maxWeightsValue = GVAR_interestAreaVariables[1].max_val; // Maximum weights value in range(>0); + var nrElems = matrixWeightsValues.length; // Dimensions of matrix....let N X N. + var colors = new Float32Array(nrElems * nrElems * 3 * 4); // Array for the colors... var linearIndex = -1; for (var i = 0; i < nrElems; i++) { for (var j = 0; j < nrElems; j++) { linearIndex += 1; - // For each element generate 4 identical colors corresponding to the 4 vertices used for the element - // var delayValue = matrixTractsValues[i][nrElems - j - 1]; /// conductionSpeed; + var weight = matrixWeightsValues[i][nrElems - j - 1]; - //var isWithinInterval = (delayValue >= (tractValue - intervalLength / 2) && - // delayValue <= (tractValue + intervalLength / 2)); var color; @@ -66,14 +72,6 @@ function mygenerateColors(tractValue, intervalLength) { color = weight!=0?getGradientColor(weight, minWeightsValue, maxWeightsValue).slice(0, 3): theme.noValueColor; - // if (weight != 0) - // { - // color = getGradientColor(weight, minWeightsValue, maxWeightsValue).slice(0, 3); - // } - // else{ - // color = theme.noValueColor; - // } - color = [].concat(color, color, color, color); colors.set(color, 3 * 4 * linearIndex); } @@ -115,7 +113,7 @@ function myinitColorsForPicking() { /* - * Custom shader initializations specific for the space-time connectivity plot + * Custom shader initializations specific for the weight connectivity matrix */ function initShaders_MATRIX() { createAndUseShader("shader-mymatrix-fs", "shader-mymatrix-vs"); @@ -131,10 +129,14 @@ function initShaders_MATRIX() { gl.enableVertexAttribArray(GL_shaderProgram.vertexColorAttribute); } +/* + +* Initializing the connectivity matrix webgl part.. +*/ function connectivityMatrix_startGL() { conectivityMatrix_initCanvas(); - //Do the required initializations for the connectivity space-time visualizer + //Do the required initializations for the connectivity weighted matrix initShaders_MATRIX(); gl.clearDepth(1.0); @@ -144,6 +146,12 @@ function connectivityMatrix_startGL() { } + /* + + * Create the buffer for the requirements by all Functions in General. + + */ + function _GL_createBuffer(data, type){ type = type || gl.ARRAY_BUFFER; var buff = gl.createBuffer(); @@ -154,23 +162,25 @@ function _GL_createBuffer(data, type){ } /* - * Create the required buffers for the space-time plot. + * Create the required buffers for the weight matrix. */ function createMatrix() { var nrElems = GVAR_interestAreaVariables[GVAR_selectedAreaType].values.length; + console.log(nrElems); // starting 'x' and 'y' axis values for the plot in order to center around (0, 0) var startX = - myplotSize / 2; var startY = - myplotSize / 2; // The size of a matrix element var elementSize = myplotSize / nrElems; + var ext = gl.getExtension('OES_element_index_uint'); // Create arrays from start for performance reasons var vertices = new Float32Array(nrElems * nrElems * 4 * 3); var normals = new Float32Array(nrElems * nrElems * 4 * 3); - var indices = new Uint16Array(nrElems * nrElems * 2 * 3); - var linesIndices = new Uint16Array(nrElems * nrElems * 2 * 4); + var indices = new Uint32Array(nrElems * nrElems * 2 * 3); + var linesIndices = new Uint32Array(nrElems * nrElems * 2 * 4); var linearIndex = -1; - + for (var i = 0; i < nrElems; i++) { for (var j = 0; j < nrElems; j++) { linearIndex += 1; @@ -225,7 +235,9 @@ function createMatrix() { mylinesIndexBuffer = _GL_createBuffer(linesIndices, gl.ELEMENT_ARRAY_BUFFER); mycreateOutlineSquare(startX, startY, elementSize, nrElems); - + /* + * the standard color scheme + */ var colors = [ 1.0, 1.0, 1.0, 1.0, // white @@ -258,18 +270,17 @@ function mycreateOutlineSquare(startX, startY, elementSize, nrElems) { /* - * Generate a color buffer which represents the state of the weights for - * a given 'interval' centered around a given tract value + * Generate a color buffer which represents the weights for + * a given edges between two vertex * - * @param tractValue: the center of the interval - * @param intervalLength: the length of the interval * - * @returns: a color buffer, where for the connections that fall in the defined interval, - * a gradient color is assigned based on the weights strenght, and for the + * @returns: a color buffer + * a gradient color is assigned based on the weights strenght, and for the * rest the color black is used. */ function conectivityMatrix_initCanvas() { + var canvas = document.getElementById(CONNECTIVITY_MATRIX_ID); initGL(canvas); var theme = ColSchGetTheme().connectivityStepPlot; @@ -285,38 +296,47 @@ function conectivityMatrix_initCanvas() { * Draw the full matrix, with the outline square. */ function drawMyMatrix() { + var theme = ColSchGetTheme().connectivityStepPlot; mvPushMatrix(); // Draw the actual matrix. gl.bindBuffer(gl.ARRAY_BUFFER, myverticesBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); - gl.bindBuffer(gl.ARRAY_BUFFER, mynormalsBuffer); - gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); + + gl.bindBuffer(gl.ARRAY_BUFFER, mynormalsBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); setMatrixUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, myplotColorBuffers); gl.vertexAttribPointer(GL_shaderProgram.vertexColorAttribute, 3, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myindexBuffer); - gl.drawElements(gl.TRIANGLES, myindexBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.drawElements(gl.TRIANGLES, myindexBuffer.numItems, gl.UNSIGNED_INT, 0); gl.uniform3f(GL_shaderProgram.lineColor, theme.lineColor[0], theme.lineColor[1], theme.lineColor[2]); + gl.uniform1i(GL_shaderProgram.drawLines, true); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mylinesIndexBuffer); gl.lineWidth(1.0); - gl.drawElements(gl.LINES, mylinesIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); + + gl.drawElements(gl.LINES, mylinesIndexBuffer.numItems, gl.UNSIGNED_INT, 0); gl.uniform1i(GL_shaderProgram.drawLines, false); gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); gl.lineWidth(2.0); gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineVerticeBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, myoutlineNormalsBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); gl.uniform1i(GL_shaderProgram.drawLines, true); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, outlineLinesBuffer); - gl.drawElements(gl.LINES, myoutlineLinesBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.drawElements(gl.LINES, myoutlineLinesBuffer.numItems, gl.UNSIGNED_INT, 0); gl.lineWidth(2.0); + gl.uniform1i(GL_shaderProgram.drawLines, false); mvPopMatrix(); @@ -332,12 +352,10 @@ function draw() { // Translate to get a good view. mvTranslate([0.0, 0.0, -600]); - gl.uniform1f(GL_shaderProgram.alphaValue, myalphaValueMatrix); gl.uniform1f(GL_shaderProgram.isPicking, 0); gl.uniform3f(GL_shaderProgram.pickingColor, 1, 1, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - drawMyMatrix(); From 3e8699f87140d7be23dfc7932d01b7ac28a5b13c Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Sun, 21 Jul 2019 03:14:37 +0530 Subject: [PATCH 10/19] Update connectivityStepPlot.js fixed the space-time bug --- .../scripts/connectivityStepPlot.js | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityStepPlot.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityStepPlot.js index e50cd0b8c..ee0d808a1 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityStepPlot.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/connectivityStepPlot.js @@ -126,13 +126,12 @@ function createConnectivityMatrix() { // The size of a matrix element var elementSize = plotSize / nrElems; // Create arrays from start for performance reasons + var ext = gl.getExtension('OES_element_index_uint'); var vertices = new Float32Array(nrElems * nrElems * 4 * 3); var normals = new Float32Array(nrElems * nrElems * 4 * 3); - var indices = new Uint16Array(nrElems * nrElems * 2 * 3); - var linesIndices = new Uint16Array(nrElems * nrElems * 2 * 4); - + var indices = new Uint32Array(nrElems * nrElems * 2 * 3); + var linesIndices = new Uint32Array(nrElems * nrElems * 2 * 4); var linearIndex = -1; - for (var i = 0; i < nrElems; i++) { for (var j = 0; j < nrElems; j++) { linearIndex += 1; @@ -227,7 +226,6 @@ function generateColors(tractValue, intervalLength) { var nrElems = matrixWeightsValues.length; var colors = new Float32Array(nrElems * nrElems * 3 * 4); var linearIndex = -1; - for (var i = 0; i < nrElems; i++) { for (var j = 0; j < nrElems; j++) { linearIndex += 1; @@ -404,17 +402,18 @@ function drawFullMatrix(doPick, idx) { var currentPickColor = colorsForPicking[idx]; gl.uniform3f(GL_shaderProgram.pickingColor, currentPickColor[0], currentPickColor[1], currentPickColor[2]); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); - gl.drawElements(gl.TRIANGLES, indexBuffer.numItems, gl.UNSIGNED_SHORT, 0); - } else { - gl.bindBuffer(gl.ARRAY_BUFFER, plotColorBuffers[idx]); + gl.drawElements(gl.TRIANGLES, indexBuffer.numItems, gl.UNSIGNED_INT, 0); + } + else { + gl.bindBuffer(gl.ARRAY_BUFFER, plotColorBuffers[idx]); gl.vertexAttribPointer(GL_shaderProgram.vertexColorAttribute, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); - gl.drawElements(gl.TRIANGLES, indexBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.drawElements(gl.TRIANGLES, indexBuffer.numItems, gl.UNSIGNED_INT, 0); gl.uniform3f(GL_shaderProgram.lineColor, theme.lineColor[0], theme.lineColor[1], theme.lineColor[2]); gl.uniform1i(GL_shaderProgram.drawLines, true); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, linesIndexBuffer); gl.lineWidth(1.0); - gl.drawElements(gl.LINES, linesIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.drawElements(gl.LINES, linesIndexBuffer.numItems, gl.UNSIGNED_INT, 0); gl.uniform1i(GL_shaderProgram.drawLines, false); // Now draw the square outline @@ -422,19 +421,19 @@ function drawFullMatrix(doPick, idx) { gl.uniform3f(GL_shaderProgram.lineColor, theme.selectedOutlineColor[0], theme.selectedOutlineColor[1], theme.selectedOutlineColor[2]); gl.lineWidth(3.0); } else { - gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); + gl.uniform3f(GL_shaderProgram.lineColor, theme.outlineColor[0], theme.outlineColor[1], theme.outlineColor[2]); gl.lineWidth(2.0); } gl.bindBuffer(gl.ARRAY_BUFFER, outlineVerticeBuffer); gl.vertexAttribPointer(GL_shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0); -// gl.bindBuffer(gl.ARRAY_BUFFER, outlineNormalsBuffer); -// gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, outlineNormalsBuffer); + gl.vertexAttribPointer(GL_shaderProgram.vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0); gl.uniform1i(GL_shaderProgram.drawLines, true); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, outlineLinesBuffer); - gl.drawElements(gl.LINES, outlineLinesBuffer.numItems, gl.UNSIGNED_SHORT, 0); + gl.drawElements(gl.LINES, outlineLinesBuffer.numItems, gl.UNSIGNED_INT, 0); gl.lineWidth(2.0); - gl.uniform1i(GL_shaderProgram.drawLines, false); - } + gl.uniform1i(GL_shaderProgram.drawLines, false); + } mvPopMatrix(); } @@ -535,6 +534,7 @@ function doZoomOutAnimation() { /* * Draw the entire space plot matrices. */ + function drawSceneSpaceTime() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); // View angle is 45, we want to see object from 0.1 up to 800 distance from viewer @@ -543,17 +543,17 @@ function drawSceneSpaceTime() { loadIdentity(); // Translate to get a good view. mvTranslate([0.0, 0.0, -600]); - + if (!doPick) { gl.uniform1f(GL_shaderProgram.alphaValue, alphaValueSpaceTime); gl.uniform1f(GL_shaderProgram.isPicking, 0); gl.uniform3f(GL_shaderProgram.pickingColor, 1, 1, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - for (var ii = 0; ii < plotColorBuffers.length; ii++) { drawFullMatrix(false, ii); } - } else { + } + else { gl.bindFramebuffer(gl.FRAMEBUFFER, GL_colorPickerBuffer); gl.disable(gl.BLEND); gl.disable(gl.DITHER); @@ -570,7 +570,7 @@ function drawSceneSpaceTime() { if (clickedMatrix >= 0) { doZoomInAnimation(); } - } + } } From b498f970489d13497a11c5a86c6a3b043a67b400 Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Sun, 21 Jul 2019 15:56:48 +0530 Subject: [PATCH 11/19] Update main_connectivity.html Added the tool bar --- .../connectivity/main_connectivity.html | 200 +++++++++++------- 1 file changed, 119 insertions(+), 81 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html index 57422aa40..d97b41a17 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html @@ -19,37 +19,42 @@ - + + + - + + + +
- -
+
- +
${label}
${label}
${label}
-
+
- + +

View Large Scale Connectivity

Open Overlay - +
- + - + ${drawConnectivityViewer(True)} ${drawConnectivityPlotViewer()} - -
+ +
- +
@@ -87,74 +92,33 @@

Control Large Scale Matrices

- -
    - -
  • Selection
    • - - -
  • - -
    • -
  • - - ${drawRegionSelectorButton(connectivity_entity.display_name, groupedLabels, initialSelection, buttonTitle="Select Nodes")} -
    • + + -
  • - - ${drawQuickSelector("selection-text-area", "loadSelectionFromTextBtn")} -
    • -
+
- - -
- +
-
- - - - - + End --> + - +
+ End tracts--> - + - + @@ -49,9 +50,12 @@
+
@@ -76,6 +80,7 @@

View Large Scale Connectivity

+
- + --> +
  • Tracts Matrix
    • + - +
    +
    +
    - -
    +
    + + + + + + + + +
    +
    + + + +
    + +
    - - ${drawmymatrix()} + ${drawmytractmatrix()} +
    @@ -153,24 +178,51 @@

    Control Large Scale Matrices

    -

    selection

    -
    +
    +

    Control

    + + +
    + + Create new + + Branch + + + + +
    +

    selection

    • Weights Matrix + onclick="hideRightSideTabs(this); startConnectivityMatrix();">Weights Matrix
    -
      +
    • @@ -204,18 +256,31 @@

      selection

      • -
    • +
    • ${drawRegionSelectorButton(connectivity_entity.display_name, groupedLabels, initialSelection, buttonTitle="Select Nodes")}
      • -
    • +
    • ${drawQuickSelector("selection-text-area", "loadSelectionFromTextBtn")}
      • -
    +
    + + +
    + +

    View

    + Open Overlay + +
    + +
    From ed41dfa80ffcc3e35f7b628db6b28e537c0c3cd2 Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Wed, 14 Aug 2019 19:21:04 +0530 Subject: [PATCH 15/19] Added the drag and drop functionality Added the drag and drop functionality --- .../connectivity/main_connectivity.html | 368 ++++++++++++++++-- 1 file changed, 333 insertions(+), 35 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html index 66e51a64f..6cfa96d0d 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html @@ -28,7 +28,57 @@ - + + @@ -59,12 +109,34 @@

    View Large Scale Connectivity

    + + + + + + + @@ -100,46 +172,44 @@

    Control Large Scale Matrices

    + + - - - -
    -
    -
    - -
    - - - + + ${drawmymatrix()} + + ${drawmytractmatrix()} + - + + + -
    -
    - - + + @@ -206,7 +276,7 @@

    Control

    selection

    -
      + @@ -284,6 +354,234 @@

      View

    + + From 4f9977ec0333f657d304b568c6d1d4750bd036da Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Wed, 14 Aug 2019 19:30:12 +0530 Subject: [PATCH 16/19] fixed the bug in edges operation fixed the bug in edges operation --- .../connectivity/scripts/selectionControlScript.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/selectionControlScript.js b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/selectionControlScript.js index b0bbcdd8f..c584b012c 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/selectionControlScript.js +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/scripts/selectionControlScript.js @@ -102,6 +102,7 @@ function doGroupOperation() { var quantity = getOperationArguments(); document.getElementById('con-op-arguments').value = ''; + console.log(quantity); if (isNaN(quantity)) { displayMessage("Operation failed. Be sure you provided the correct arguments.", "errorMessage"); return false; @@ -138,9 +139,9 @@ function doGroupOperation() { } } GFUNC_recomputeMinMaxW(); - MATRIX_colorTable(); displayMessage("Operation finished successfully.", "infoMessage"); - } catch(err) { + } + catch(err) { displayMessage("Operation failed. Be sure you provided the correct arguments.", "errorMessage"); } } From 7675f8347fbf3d2cb2a4890e9f8cff8ed536ad5d Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Sun, 18 Aug 2019 22:12:21 +0530 Subject: [PATCH 17/19] update the css of drag and drop update the CSS of drag and drop --- .../connectivity/main_connectivity.html | 45 ++----------------- 1 file changed, 3 insertions(+), 42 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html index 6cfa96d0d..7a533e145 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html @@ -29,54 +29,15 @@ From 4cffe42efa387f9f9c1862efa8e8515a863e3ba6 Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Sun, 18 Aug 2019 22:26:40 +0530 Subject: [PATCH 18/19] update the css of drag and drop update the CSS of drag and drop From 64978d718bf7cfbbf2b834f983d6ad96456fabeb Mon Sep 17 00:00:00 2001 From: Nakul Bharti Date: Sun, 18 Aug 2019 23:20:30 +0530 Subject: [PATCH 19/19] Updated the dragable scripts Updated the dragable scripts --- .../connectivity/main_connectivity.html | 191 +----------------- 1 file changed, 8 insertions(+), 183 deletions(-) diff --git a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html index 7a533e145..fa10860cb 100644 --- a/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html +++ b/tvb/interfaces/web/templates/genshi/visualizers/connectivity/main_connectivity.html @@ -316,144 +316,12 @@

    View

    - +