mirror of
https://github.com/OpenFOAM/ThirdParty-6.git
synced 2025-12-08 06:57:43 +00:00
ParaView-5.0.1: Added the source-tree to ThirdParty-dev and patched as described in the README file
Resolves bug-report http://bugs.openfoam.org/view.php?id=2098
This commit is contained in:
Henry Weller
@ -0,0 +1,116 @@
|
||||
var layerVisibility = {},
|
||||
orderMappping = {},
|
||||
layerCount = {},
|
||||
requestMap = {
|
||||
'_': updateVisibility,
|
||||
'w': processComposites,
|
||||
'd': registerData,
|
||||
's': updatePixelCount
|
||||
},
|
||||
compositeData = {},
|
||||
needToUpdateOrderTable = true,
|
||||
missingOrderKeys = true,
|
||||
nbPixels = 100;
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function updatePixelCount(nbPixelsSTR) {
|
||||
nbPixels = Number(nbPixelsSTR);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function updateVisibility(query) {
|
||||
var count = query.length;
|
||||
for(var idx = 0; idx < count; idx += 2) {
|
||||
layerVisibility[query[idx]] = (query[idx+1] != '_');
|
||||
layerCount[query[idx]] = 0;
|
||||
}
|
||||
needToUpdateOrderTable = true;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function getLayer(order) {
|
||||
var count = order.length;
|
||||
for(var i = 0; i < count; ++i) {
|
||||
if(layerVisibility[order[i]]) {
|
||||
return order[i];
|
||||
}
|
||||
}
|
||||
return '+';
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function registerData(dataStr) {
|
||||
var id_fields_data = dataStr.split('|');
|
||||
compositeData[id_fields_data[0]] = { fields: JSON.parse(id_fields_data[1]), order: JSON.parse(id_fields_data[2]) };
|
||||
missingOrderKeys = true;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function updateOrderKeys() {
|
||||
if(missingOrderKeys) {
|
||||
missingOrderKeys = false;
|
||||
needToUpdateOrderTable = true;
|
||||
|
||||
for(var id in compositeData) {
|
||||
var composite = compositeData[id].order;
|
||||
for(var order in composite) {
|
||||
orderMappping[order] = '+';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function computeOrderMap() {
|
||||
if(needToUpdateOrderTable) {
|
||||
needToUpdateOrderTable = false;
|
||||
for(var order in orderMappping) {
|
||||
orderMappping[order] = getLayer(order);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function resetLayerCount() {
|
||||
for(var key in layerCount) {
|
||||
layerCount[key] = 0;
|
||||
}
|
||||
return layerCount;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
function processComposites() {
|
||||
updateOrderKeys();
|
||||
computeOrderMap();
|
||||
|
||||
for(var id in compositeData) {
|
||||
var composite = compositeData[id].order,
|
||||
layerCount = resetLayerCount();
|
||||
|
||||
for(var order in composite) {
|
||||
layerCount[orderMappping[order]] += composite[order];
|
||||
}
|
||||
|
||||
// Compute percentage
|
||||
var ratio = 100 / nbPixels;
|
||||
for(var layer in layerCount) {
|
||||
layerCount[layer] *= ratio;
|
||||
}
|
||||
|
||||
postMessage({id:id, count:layerCount, fields: compositeData[id].fields});
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
onmessage = function (event) {
|
||||
requestMap[event.data[0]](event.data.substr(1));
|
||||
}
|
||||
@ -0,0 +1,141 @@
|
||||
/* -------------------------------------------- */
|
||||
/* Sub menu */
|
||||
/* -------------------------------------------- */
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu {
|
||||
position: relative;
|
||||
top: 0;
|
||||
background: #999;
|
||||
color: white;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul {
|
||||
list-style: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu > li {
|
||||
position: relative;
|
||||
display: inline;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu ul {
|
||||
display: none;
|
||||
background: #ccc;
|
||||
border-radius: 6px;
|
||||
border-top: solid 6px #999;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu ul li:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu ul > li {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu li.sub:hover > ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu li.sub.active > ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu > li.sub:hover > ul {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu ul.menu ul li.sub:hover > ul {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu li i.help {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 5px;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
background: #FFFFCC;
|
||||
border-radius: 5px;
|
||||
margin-left: 5px;
|
||||
border: solid 1px #999;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .sub-menu li:hover > i.help {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -------------------------------------------- */
|
||||
/* view content */
|
||||
/* -------------------------------------------- */
|
||||
|
||||
.vtkweb-catalyst-analysis .bench-content .bench-viewers {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .bench-content .bench-viewers .viewer {
|
||||
position: relative;
|
||||
float: left;
|
||||
border: solid 1px black;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .bench-content .bench-viewers .viewer .title-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: black;
|
||||
height: 20px;
|
||||
color: white;
|
||||
padding-left: 5px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .bench-content .bench-viewers .viewer .title-bar .right {
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.vtkweb-catalyst-analysis .bench-content .bench-viewers .viewer .content {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
@ -0,0 +1,125 @@
|
||||
(function ($, GLOBAL) {
|
||||
var TOOLBAR_TEMPLATE = '<div class=sub-menu><ul class="menu left"><li class="vtk-icon-list-add sub action" data-type="composite-image-stack"><ul></ul></li><li class="vtk-icon-chart-line sub action" data-type="catalyst-resample-viewer"><ul></ul></li><li class="vtk-icon-loop-alt sub action" data-type="catalyst-viewer"><ul></ul></li><li class="vtk-icon-laptop sub action" data-type="catalyst-pvweb"><ul></ul></li></ul><ul class="menu right"><li class="layout-size" data-layout-size="2"><span class="layout-value">50 %</span><span class="vtk-icon-zoom-in zoom-action" data-delta=-1/><span class="vtk-icon-zoom-out zoom-action" data-delta=1/></li><li class="vtk-icon-magic action"/><li class="vtk-icon-trash"/></ul></div><div class="bench-viewers"></div>',
|
||||
ENTRY_TEMPLATE = '<li class="create-viewer" data-path="PATH" data-title="TITLE">TITLE<i class=help>DESCRIPTION</i></li>',
|
||||
VIEWER_FACTORY = {
|
||||
"catalyst-viewer": {
|
||||
class: "vtk-icon-loop-alt",
|
||||
factory: function(domToFill, path) {
|
||||
domToFill.vtkCatalystViewer(path, false);
|
||||
}
|
||||
},
|
||||
"catalyst-resample-viewer" : {
|
||||
class: "vtk-icon-chart-line",
|
||||
factory: function(domToFill, path) {
|
||||
domToFill.vtkCatalystResamplerViewer(path);
|
||||
}
|
||||
},
|
||||
"composite-image-stack" : {
|
||||
class: "vtk-icon-list-add",
|
||||
factory: function(domToFill, path) {
|
||||
domToFill.vtkCatalystCompositeViewer(path);
|
||||
}
|
||||
},
|
||||
"catalyst-pvweb" : {
|
||||
class: "vtk-icon-laptop",
|
||||
factory: function(domToFill, path) {
|
||||
domToFill.vtkCatalystPVWeb(path);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function initializeListeners(container) {
|
||||
$('.create-viewer', container).addClass('action').click(function(){
|
||||
var me = $(this),
|
||||
path = me.attr('data-path'),
|
||||
type = me.parent().parent().attr('data-type'),
|
||||
title = me.attr('data-title'),
|
||||
workspace = $('.bench-viewers', container),
|
||||
layoutSize = Number($('.layout-size', container).attr('data-layout-size')),
|
||||
size = $(window).width() / layoutSize - 15,
|
||||
viewer = $('<div/>', { class: 'viewer', 'data-type': type, html: "<div class='title-bar'><span class='title'>"+title+"</span><span class='right action close vtk-icon-cancel'/></div><div class='content'></div>"});
|
||||
|
||||
$('li.sub', container).removeClass('active');
|
||||
|
||||
// Attach close action to viewer
|
||||
$('.close', viewer).bind('click', function(){
|
||||
viewer.remove();
|
||||
});
|
||||
|
||||
// Add viewer
|
||||
viewer.css('width', (size-2) + 'px').css('height', (20 + size - 2) + 'px').appendTo(workspace);
|
||||
|
||||
// Provide content
|
||||
VIEWER_FACTORY[type].factory($('.content', viewer), path);
|
||||
});
|
||||
|
||||
$('.vtk-icon-trash', container).addClass('action').click(function(){
|
||||
$('.close', container).trigger('click');
|
||||
});
|
||||
|
||||
$('.zoom-action', container).addClass('action').click(function(){
|
||||
var me = $(this),
|
||||
size = Number(me.parent().attr('data-layout-size')),
|
||||
delta = Number(me.attr('data-delta'));
|
||||
size += delta;
|
||||
if(size < 1) {
|
||||
size = 1;
|
||||
} else if(size > 5) {
|
||||
size = 5;
|
||||
}
|
||||
me.parent().attr('data-layout-size', size);
|
||||
$('.layout-value', me.parent).html( Math.floor(100/size) + ' %');
|
||||
});
|
||||
$('.vtk-icon-magic').hide();
|
||||
$('.sub-menu li.sub', container).click(function(){
|
||||
var me = $(this), alreadyActive = me.hasClass('active');
|
||||
$('li.sub', me.parent()).removeClass('active');
|
||||
if(!alreadyActive) {
|
||||
me.addClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param project
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystAnalysisBench = function(project, dataBasePath) {
|
||||
return this.each(function() {
|
||||
var me = $(this).unbind().empty().html(TOOLBAR_TEMPLATE),
|
||||
menu = $('.menu.left', me),
|
||||
buffer = [],
|
||||
analysis = project.analysis,
|
||||
count = analysis.length,
|
||||
containers = {
|
||||
"composite-image-stack" : $('.menu.left > li[data-type="composite-image-stack"] > ul', me),
|
||||
"catalyst-resample-viewer" : $('.menu.left > li[data-type="catalyst-resample-viewer"] > ul', me),
|
||||
"catalyst-viewer" : $('.menu.left > li[data-type="catalyst-viewer"] > ul', me),
|
||||
"catalyst-pvweb" : $('.menu.left > li[data-type="catalyst-pvweb"] > ul', me)
|
||||
},
|
||||
buffers = { "composite-image-stack" : [], "catalyst-resample-viewer" : [], "catalyst-viewer" : [], "catalyst-pvweb" : [] };
|
||||
|
||||
// Fill buffers
|
||||
while(count--) {
|
||||
var item = analysis[count];
|
||||
buffers[item.type].push(ENTRY_TEMPLATE.replace(/PATH/g, dataBasePath + '/' + item.id).replace(/TITLE/g, item.title).replace(/DESCRIPTION/g, item.description));
|
||||
}
|
||||
|
||||
// Update UI
|
||||
for(var key in containers) {
|
||||
containers[key].html(buffers[key].join(''));
|
||||
}
|
||||
|
||||
// Handle listeners
|
||||
initializeListeners(me);
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,83 @@
|
||||
.vtkweb-catalyst-analysis .estimate-content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content select {
|
||||
position: relative;
|
||||
right: 0px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content li {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content div.label {
|
||||
position: relative;
|
||||
width: 40%;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content div.label > .value {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content input[type='range'] {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
top: 3px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content input[type='text'] {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content input[type='text'].half {
|
||||
position: relative;
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content .input {
|
||||
position: relative;
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 45%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
margin-left: 1.5%;
|
||||
border-radius: 5px;
|
||||
border: solid 1px black;
|
||||
}
|
||||
.vtkweb-catalyst-analysis .estimate-content .input.right {
|
||||
float: right;
|
||||
margin: 10px 0;
|
||||
margin-right: 1.5%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content .title {
|
||||
position: absolute;
|
||||
top: -0.8em;
|
||||
left: 10px;
|
||||
background: white;
|
||||
font-weight: bold;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .estimate-content .output {
|
||||
clear: both;
|
||||
position: relative;
|
||||
width: 96%;
|
||||
padding: 10px;
|
||||
margin: 0px auto;
|
||||
border-radius: 5px;
|
||||
border: solid 1px black;
|
||||
top: 20px;
|
||||
}
|
||||
@ -0,0 +1,285 @@
|
||||
(function ($, GLOBAL) {
|
||||
var EXPLORATION_TEMPLATE = "<div class='input exploration-config'><div class='title'>Exploration settings</div><ul><li><div class='label'>Exploration type</div><select><option>Composite</option><option>Image base</option></select></li><li class='for-composite'><div class='label'>Number of geometries<span class='value'></span></div><input class='slider nb-geo' type='range' value='11' min='1' max='62'/></li><li class='for-composite'><div class='label'>Number of captures <span class='value'></span></div><input class='slider nb-all' type='range' value='21' min='1' max='128'/></li><li><div class='label'>Parameter range</div><input name='params' type='text' value='1,1'/></li></ul></div>",
|
||||
CAMERA_TEMPLATE = "<div class='input right camera-handler'><div class='title'>Camera settings</div><ul><li><div class='label'>Camera manager</div><select><option value='360'>360+</option><option value='w'>Wobble</option><option value='f'>Fix</option></select></li><li class='360 w'><div class='label'>Sampling Phi angle <span class='value'></span></div><input class='slider' type='range' min='5' max='180' value='18' name='phi'/></li><li class='360'><div class='label'>Sampling Theta angle <span class='value'></span></div><input class='slider' type='range' min='5' value='30' max='85' name='theta'/></li><li><div class='label'>Total number of viewpoint</div><span class='nb-view-points'></span></li></ul></div>",
|
||||
IMAGE_TEMPLATE = "<div class='input image-config'><div class='title'>Image settings</div><ul><li><div class='label'>Image type</div><select><option>JPG</option><option>PNG</option><option>TIFF</option></select></li><li><div class='label'>Image resolution</div><input type='text' value='500' name='width' class='half'/> x <input type='text' value='500' name='height' class='half'/></li></ul></div>",
|
||||
RESULT_TEMPLATE = "<div class='output estimate-result'><div class='title'>Cost estimate</div><table><tr><td>Average render time for the scene</td><td> : <input type='text' name='avg-render-time' value='200'/> ms</td></tr><tr><td>Total number of images</td><td> : <span class='total-nb-images'></span></td></tr><tr><td>Estimate image size</td><td> : <span class='image-size'></span></td></tr><tr><td>Total data size</td><td> : <span class='total-disk-usage'></span></td></tr><tr><td>Estimated time cost</td><td> : <span class='time-cost'></span></td></tr></table></div>",
|
||||
PAGE_CONTENT = [CAMERA_TEMPLATE, EXPLORATION_TEMPLATE, IMAGE_TEMPLATE, RESULT_TEMPLATE],
|
||||
MagicNumbers = {
|
||||
"PNG": {
|
||||
'space': function(nbPixels) { return nbPixels * 0.6; },
|
||||
'time' : function(nbPixels) { return nbPixels * 0.000000204032; }
|
||||
},
|
||||
"JPG": {
|
||||
'space': function(nbPixels) { return nbPixels * 0.24; }, // Max noticed and PNG is usally 2.5 bigger
|
||||
'time' : function(nbPixels) { return nbPixels * 0.000000131541818181818; }
|
||||
},
|
||||
"TIFF": {
|
||||
'space': function(nbPixels) { return nbPixels * 3.028; },
|
||||
'time' : function(nbPixels) {
|
||||
var imageSize = nbPixels * 3.028,
|
||||
bufferDisk = 16000000;
|
||||
return (imageSize < bufferDisk) ? 0.0000000241866666666667 * nbPixels : 0.000000102088 * nbPixels;
|
||||
}
|
||||
},
|
||||
"COMPOSITE": {
|
||||
'space': function(nbPixels) { return nbPixels * 0.448; },
|
||||
'time' : function(nbPixels) { return nbPixels * 0.000000642785454545454;}
|
||||
},
|
||||
"RGB_CAPTURE": {
|
||||
'space': function(nbPixels) { return 0; },
|
||||
'time' : function(nbPixels) { return nbPixels * 0.00000898981818181818;}
|
||||
}
|
||||
};
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function getNbPixels(container) {
|
||||
var width = Number($('input[name="width"]', container).val()),
|
||||
height = Number($('input[name="height"]', container).val()),
|
||||
nbObjects = ($('.exploration-config select', container).val() == "Composite") ? (1+Number($('.exploration-config .slider.nb-all', container).val())) : 1;
|
||||
|
||||
return (width*height*nbObjects);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function getNbZPixels(container) {
|
||||
var width = Number($('input[name="width"]', container).val()),
|
||||
height = Number($('input[name="height"]', container).val()),
|
||||
format = $('.image-config select', container).val(),
|
||||
nbObjects = ($('.exploration-config select', container).val() == "Composite") ? (1+Number($('.exploration-config .slider.nb-geo', container).val())) : 1;
|
||||
|
||||
return (width*height*nbObjects);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function getImageSize(container) {
|
||||
var format = $('.image-config select', container).val();
|
||||
return MagicNumbers[format]['space'](getNbPixels(container));
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function getImageTime(container) {
|
||||
var format = $('.image-config select', container).val();
|
||||
return MagicNumbers[format]['time'](getNbPixels(container));
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function getCompositeSize(container) {
|
||||
return MagicNumbers["COMPOSITE"]['space'](getNbZPixels(container));
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function getCompositeTime(container) {
|
||||
return MagicNumbers["COMPOSITE"]['time'](getNbZPixels(container));
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formula(cost) {
|
||||
var dollarsAmount = 0;
|
||||
if(cost) {
|
||||
if(cost["time"]) {
|
||||
dollarsAmount += 0.001 * cost["time"];
|
||||
}
|
||||
if(cost["space"]) {
|
||||
dollarsAmount += 0.000000002 * cost["space"];
|
||||
}
|
||||
if(cost["images"]) {
|
||||
dollarsAmount += 0.001 * cost["images"];
|
||||
}
|
||||
}
|
||||
return dollarsAmount;
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formatTime(t) {
|
||||
var seconds = Number(t),
|
||||
minutes = Math.floor(seconds / 60),
|
||||
hours = Math.floor(minutes / 60),
|
||||
buffer = [];
|
||||
|
||||
seconds %= 60;
|
||||
seconds = Math.floor(seconds);
|
||||
minutes %= 60;
|
||||
minutes = Math.floor(minutes);
|
||||
|
||||
if(hours > 0) {
|
||||
buffer.push(hours);
|
||||
}
|
||||
if(minutes > 0 || hours > 0) {
|
||||
buffer.push(("00" + minutes).slice (-2));
|
||||
}
|
||||
if(seconds > 0 || minutes > 0 || hours > 0) {
|
||||
buffer.push(("00" + seconds).slice (-2));
|
||||
}
|
||||
|
||||
return buffer.join(':');
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formatSpace(t) {
|
||||
var space = Number(t), unit = [ ' B', ' K', ' M', ' G', ' T'], currentUnit = 0;
|
||||
while(space > 1000) {
|
||||
space /= 1000;
|
||||
currentUnit++;
|
||||
}
|
||||
return space.toFixed(2) + unit[currentUnit];
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formatDollars(v) {
|
||||
x = v.toFixed(2).toString();
|
||||
var pattern = /(-?\d+)(\d{3})/;
|
||||
while (pattern.test(x)) {
|
||||
x = x.replace(pattern, "$1,$2");
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function updateNumberOfImages(container) {
|
||||
var nbImagesContainer = $('.total-nb-images', container),
|
||||
parameters = $('.exploration-config input[name="params"]', container).val().split(','),
|
||||
nbViews = Number($('.nb-view-points', container).attr('data-value')),
|
||||
nbParams = 1;
|
||||
|
||||
for(var idx in parameters) {
|
||||
nbParams *= Number(parameters[idx]);
|
||||
}
|
||||
|
||||
nbImagesContainer.html(nbParams*nbViews).attr('data-value', nbParams*nbViews);
|
||||
updateTotalEstimate(container);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function updateImageSize(container) {
|
||||
$('.output .image-size', container).html(formatSpace(getImageSize(container)));
|
||||
updateTotalEstimate(container);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function updateCameraEstimate(container) {
|
||||
var phiContainer = $('.w.360 span.value', container),
|
||||
phi = Number($('input[name="phi"]', container).val()),
|
||||
theta = Number($('input[name="theta"]', container).val()),
|
||||
resultContainer = $('.nb-view-points', container),
|
||||
cameraType = $('.camera-handler select', container).val();
|
||||
|
||||
$('.360,.w', container).hide();
|
||||
|
||||
if (cameraType == 'f') {
|
||||
resultContainer.html("1").attr('data-value', 1);
|
||||
} else if (cameraType == '360') {
|
||||
$('.360', container).show();
|
||||
var a = Math.floor(360/phi), b = (1 + 2*Math.floor(89/theta));
|
||||
resultContainer.html(a + " x " + b + " = " + (a*b)).attr('data-value', (a*b));
|
||||
if(360%phi === 0) {
|
||||
phiContainer.css('color', 'black');
|
||||
} else {
|
||||
phiContainer.css('color', 'red');
|
||||
}
|
||||
} else if (cameraType == 'w') {
|
||||
$('.w', container).show();
|
||||
resultContainer.html("9").attr('data-value', 9);
|
||||
}
|
||||
|
||||
updateNumberOfImages(container);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function updateTotalEstimate(container) {
|
||||
var totalSizeContainer = $('.total-disk-usage', container),
|
||||
totalTimeContainer = $('.time-cost', container),
|
||||
nbImages = Number( $('.total-nb-images', container).attr('data-value')),
|
||||
dataSizePerImage = getImageSize(container),
|
||||
timePerImage = getImageTime(container),
|
||||
nbRender = nbImages,
|
||||
renderTime = Number($('.output input', container).val()) / 1000,
|
||||
rgbCaptureTime = MagicNumbers["RGB_CAPTURE"]['time'](getNbPixels(container));
|
||||
|
||||
if ($('.exploration-config select', container).val() == "Composite") {
|
||||
dataSizePerImage += getCompositeSize(container);
|
||||
timePerImage += getCompositeTime(container);
|
||||
nbRender *= 1 + Number($('.exploration-config .slider.nb-all', container).val());
|
||||
}
|
||||
|
||||
// console.log('nb pix: ' + getNbPixels(container));
|
||||
// console.log('image size: ' + getImageSize(container));
|
||||
// console.log('composite size: ' + getCompositeSize(container));
|
||||
// console.log('composite time: ' + getCompositeTime(container));
|
||||
|
||||
totalSizeContainer.html(formatSpace(dataSizePerImage*nbImages));
|
||||
totalTimeContainer.html(formatTime(timePerImage*nbImages + (renderTime*nbRender) + rgbCaptureTime));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function initializeListeners(container) {
|
||||
$('.slider', container).bind('keyup change',function(){
|
||||
var me = $(this);
|
||||
$('.value', me.parent()).html(me.val());
|
||||
updateCameraEstimate(container);
|
||||
}).trigger('change');
|
||||
|
||||
$('.camera-handler select', container).change(function(){
|
||||
updateCameraEstimate(container);
|
||||
}).trigger('change');
|
||||
|
||||
$('.exploration-config input[name="params"]', container).change(function(){
|
||||
updateNumberOfImages(container);
|
||||
});
|
||||
|
||||
$('.exploration-config select', container).change(function(){
|
||||
var me = $(this),
|
||||
isComposite = (me.val() == "Composite");
|
||||
|
||||
if(isComposite) {
|
||||
$('.for-composite', container).show();
|
||||
} else {
|
||||
$('.for-composite', container).hide();
|
||||
}
|
||||
|
||||
updateImageSize(container);
|
||||
});
|
||||
|
||||
$('.image-config select, .exploration-config .slider, .image-config input').bind('keyup change', function(){
|
||||
updateImageSize(container);
|
||||
}).trigger('change');
|
||||
|
||||
$('.output input').change(function(){
|
||||
updateTotalEstimate(container);
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param project
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystAnalysisCostEstimate = function() {
|
||||
return this.each(function() {
|
||||
var me = $(this).unbind().empty().addClass('cost-estimate').html(PAGE_CONTENT.join(''));
|
||||
|
||||
initializeListeners(me);
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,44 @@
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content table.catalyst-bill {
|
||||
width: 98%;
|
||||
border-collapse:collapse;
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill td.title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill td.value {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill tr.head {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill tr.head td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill tr.head td.empty {
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill tr td {
|
||||
border: solid 1px #ccc;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill tr.sum {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .cost-content .catalyst-bill tr.sum td {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
(function ($, GLOBAL) {
|
||||
var TYPE_CONVERTER = {
|
||||
"catalyst-viewer": "vtk-icon-loop-alt",
|
||||
"catalyst-resample-viewer" : "vtk-icon-chart-line",
|
||||
"composite-image-stack" : "vtk-icon-list-add",
|
||||
"catalyst-pvweb" : "vtk-icon-laptop"
|
||||
};
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formula(cost) {
|
||||
var dollarsAmount = 0;
|
||||
if(cost) {
|
||||
if(cost["time"]) {
|
||||
dollarsAmount += 0.001 * cost["time"];
|
||||
}
|
||||
if(cost["space"]) {
|
||||
dollarsAmount += 0.000000002 * cost["space"];
|
||||
}
|
||||
if(cost["images"]) {
|
||||
dollarsAmount += 0.001 * cost["images"];
|
||||
}
|
||||
}
|
||||
return dollarsAmount;
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formatTime(t) {
|
||||
var seconds = Number(t),
|
||||
minutes = Math.floor(seconds / 60),
|
||||
hours = Math.floor(minutes / 60),
|
||||
buffer = [];
|
||||
|
||||
seconds %= 60;
|
||||
seconds = Math.floor(seconds);
|
||||
minutes %= 60;
|
||||
minutes = Math.floor(minutes);
|
||||
|
||||
if(hours > 0) {
|
||||
buffer.push(hours);
|
||||
}
|
||||
if(minutes > 0 || hours > 0) {
|
||||
buffer.push(("00" + minutes).slice (-2));
|
||||
}
|
||||
if(seconds > 0 || minutes > 0 || hours > 0) {
|
||||
buffer.push(("00" + seconds).slice (-2));
|
||||
}
|
||||
|
||||
return buffer.join(':');
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formatSpace(t) {
|
||||
var space = Number(t), unit = [ ' B', ' K', ' M', ' G', ' T'], currentUnit = 0;
|
||||
while(space > 1000) {
|
||||
space /= 1000;
|
||||
currentUnit++;
|
||||
}
|
||||
return space.toFixed(2) + unit[currentUnit];
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
|
||||
function formatDollars(v) {
|
||||
x = v.toFixed(2).toString();
|
||||
var pattern = /(-?\d+)(\d{3})/;
|
||||
while (pattern.test(x)) {
|
||||
x = x.replace(pattern, "$1,$2");
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function buildBillingPage(info, path, formula) {
|
||||
var content = [ "<table class='catalyst-bill'><tr class='head'></td><td class='empty title'></td><td><span class='vtk-icon-resize-horizontal-1'/></td><td><span class='vtk-icon-clock'/></td><td><span class='vtk-icon-database'/></td><td><span class='vtk-icon-picture-1'/></td><td><span class='vtk-icon-dollar'/></td></tr>" ],
|
||||
total = { "space": 0, "images": 0, "time": 0 , "dollars": 0},
|
||||
analysisCount = info['analysis'].length;
|
||||
|
||||
// Add each analysis
|
||||
while(analysisCount--) {
|
||||
var item = info['analysis'][analysisCount],
|
||||
cost = item['cost'],
|
||||
dollars = formula(cost);
|
||||
|
||||
total['space'] += cost['space'];
|
||||
total['images'] += cost['images'];
|
||||
total['time'] += cost['time'];
|
||||
total['dollars'] += dollars;
|
||||
|
||||
content.push(buildBillEntry(item, cost, dollars));
|
||||
}
|
||||
|
||||
// Add total
|
||||
content.push("<tr class='sum'><td>Total</td><td></td><td>"+ formatTime(total["time"]) +"</td><td>"+ formatSpace(total["space"]) +"</td><td>"+ total["images"] +"</td><td>"+ formatDollars(total["dollars"]) +"</td></tr></table>")
|
||||
|
||||
return "<div class='view cost'>" + content.join('') + "</div>";
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function buildBillEntry(item, cost, dollars) {
|
||||
var classType = TYPE_CONVERTER[item["type"]],
|
||||
title = item["title"],
|
||||
time = cost["time"],
|
||||
space = cost["space"],
|
||||
images = cost["images"],
|
||||
width = cost.hasOwnProperty('image-width') ? cost["image-width"] : "";
|
||||
|
||||
return "<tr><td class='title'><span class='" + classType + "'/>" + title + "</td><td class='image-width value'>"+width+"</td><td class='time value'>" + formatTime(time) + "</td><td class='space value'>" + formatSpace(space) + "</td><td class='images value'>" + images + "</td><td class='dollars value'>" + formatDollars(dollars) + "</td></tr>";
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param project
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystAnalysisCost = function(project, dataBasePath) {
|
||||
return this.each(function() {
|
||||
var me = $(this).unbind().empty().html(buildBillingPage(project, dataBasePath, formula));
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,70 @@
|
||||
.vtkweb-catalyst-analysis-search .search-toolbar {
|
||||
position: relative;
|
||||
width: 98%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .search-toolbar input[type='range'] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .search-toolbar input[type='text'] {
|
||||
width: 30%;
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .search-toolbar input.sort-expression {
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .search-toolbar i {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
border: solid 1px black;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.vtkweb-catalyst-analysis-search .search-toolbar:hover i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .query-result {
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px black;
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .query-stats {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .query-result .image-result {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .search-button {
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
border: solid 1px black;
|
||||
background: white;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-search .toggle-stats.stats {
|
||||
background: #ccc;
|
||||
}
|
||||
@ -0,0 +1,318 @@
|
||||
(function ($, GLOBAL) {
|
||||
var SEARCH_TEMPLATE = '<div class="search-toolbar"><b>Query</b><input type="text" class="query-expression"/><b>Sort by</b><input type="text" class="sort-expression"/><input type="range" min="10" max="100" value="10" class="zoom-level"/><span class="result-count"></span><span class="vtk-icon-chart-area toggle-stats stats action search-button"></span><span class="vtk-icon-picture-1 render-all action search-button" title="Render all images" alt="Render all images"></span><i>HELP</i></div><div class="query-results"></div>',
|
||||
TOOLBAR_TEMPLATE = '<div class=sub-menu><ul class="menu left"><li class="vtk-icon-list-add sub action" data-type="composite-image-stack"><ul></ul></li><li class="vtk-icon-chart-line sub action" data-type="catalyst-resample-viewer"><ul></ul></li><li class="vtk-icon-loop-alt sub action" data-type="catalyst-viewer"><ul></ul></li></ul><ul class="menu right"><li class="search-title"/></ul></div><div class="search-panel"></div>',
|
||||
ENTRY_TEMPLATE = '<li class="create-search" data-path="PATH" data-title="TITLE">TITLE<i class=help>DESCRIPTION</i></li>',
|
||||
SEARCH_FACTORY = {
|
||||
"catalyst-viewer": function(domToFill, path) {
|
||||
domToFill.vtkCatalystAnalysisGenericSearch(path);
|
||||
},
|
||||
"catalyst-resample-viewer" : function(domToFill, path) {
|
||||
domToFill.vtkCatalystAnalysisGenericSearch(path);
|
||||
},
|
||||
"composite-image-stack" : function(domToFill, path) {
|
||||
domToFill.vtkCatalystCompositeSearch(path);
|
||||
},
|
||||
"catalyst-pvweb" : function(domToFill, path) {
|
||||
domToFill.empty().html("<p style='padding: 20px;font-weight: bold;'>This type of data is not searchable.</p>");
|
||||
}
|
||||
};
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function getFileName(filePattern, args) {
|
||||
var fileName = filePattern;
|
||||
for(key in args) {
|
||||
fileName = fileName.replace('{'+key+'}', args[key]);
|
||||
}
|
||||
return fileName;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function buildFileNames(info, basePath) {
|
||||
var results = [],
|
||||
args = info['arguments'],
|
||||
pattern = info['name_pattern'],
|
||||
keyNames = [],
|
||||
valueCounts = [],
|
||||
valueIndexes = [];
|
||||
|
||||
// Fill args infos
|
||||
for(var key in args) {
|
||||
keyNames.push(key);
|
||||
valueCounts.push(args[key]['values'].length);
|
||||
valueIndexes.push(0);
|
||||
}
|
||||
|
||||
function keepGoing() {
|
||||
var count = valueCounts.length;
|
||||
while(count--) {
|
||||
if(valueCounts[count] != valueIndexes[count] + 1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function increment() {
|
||||
var idx = 0;
|
||||
valueIndexes[idx]++;
|
||||
|
||||
while(valueIndexes[idx] % valueCounts[idx] === 0) {
|
||||
valueIndexes[idx] = 0;
|
||||
idx++;
|
||||
valueIndexes[idx]++;
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentArgs() {
|
||||
var result = {},
|
||||
count = keyNames.length;
|
||||
while(count--) {
|
||||
result[keyNames[count]] = args[keyNames[count]]["values"][valueIndexes[count]];
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
while(keepGoing()) {
|
||||
var currentArgs = getCurrentArgs(),
|
||||
url = basePath + '/' + getFileName(pattern, currentArgs);
|
||||
|
||||
results.push( { "args": currentArgs, "url": url, "keep": true } );
|
||||
|
||||
// Move to next possibility
|
||||
increment();
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function extractQueryDocumentation(info) {
|
||||
var txtBuffer = [],
|
||||
args = info["arguments"],
|
||||
template = "<b>KEY</b>: [VALUES]<br/>",
|
||||
values = null;
|
||||
|
||||
for(var key in args) {
|
||||
values = args[key]["values"];
|
||||
if(args[key]['type'] === 'range') {
|
||||
var txt = "";
|
||||
txt += values[0];
|
||||
txt += " to ";
|
||||
txt += values[values.length - 1];
|
||||
txt += " % ";
|
||||
txt += (Number(values[1]) - Number(values[0]));
|
||||
values = txt;
|
||||
}
|
||||
txtBuffer.push(template.replace(/KEY/g, key).replace(/VALUES/g, values));
|
||||
}
|
||||
|
||||
return txtBuffer.join('');
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function filterBy(container, expression) {
|
||||
var functionStr = 'var LOCAL_VARS; return (EXP);',
|
||||
template = 'ARG = args["ARG"]',
|
||||
localVarsStr = [],
|
||||
validator = null,
|
||||
all = container.data('data-list'),
|
||||
firstArgs = all[0]['args'],
|
||||
count = all.length,
|
||||
nbValidResults = 0;
|
||||
|
||||
// Generate filter function
|
||||
for(var key in firstArgs) {
|
||||
localVarsStr.push(template.replace(/ARG/g, key));
|
||||
}
|
||||
functionStr = functionStr.replace(/LOCAL_VARS/g, localVarsStr.join(',')).replace(/EXP/g, expression);
|
||||
validator = new Function('args', functionStr);
|
||||
|
||||
// Apply function
|
||||
while(count--) {
|
||||
all[count]['keep'] = validator(all[count]["args"]);
|
||||
if(all[count]['keep']) {
|
||||
nbValidResults++;
|
||||
}
|
||||
}
|
||||
|
||||
return nbValidResults;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function showResults(container) {
|
||||
var results = container.data('data-list'),
|
||||
resultContainer = $('.query-results', container),
|
||||
imageList = [],
|
||||
count = results.length,
|
||||
sortQuery = $('.sort-expression', container).val(),
|
||||
imgStr = '<div class="query-result" data-url="URL"><div class="query-stats">STATS</div><img class="image-result"/></div>';
|
||||
|
||||
// Sort results if possible
|
||||
if(sortQuery.trim().length > 0) {
|
||||
var exposeVars = "var noop = 0";
|
||||
for(var key in results[0]['args']) {
|
||||
exposeVars += ', ' + key + ' = obj.args["' + key + '"]';
|
||||
}
|
||||
exposeVars += ';';
|
||||
|
||||
var sortFunctionSTR = "function extractValue(obj) {" + exposeVars + "return " + sortQuery + ";}; return extractValue(a) - extractValue(b);",
|
||||
sortFunc = new Function(["a","b"], sortFunctionSTR);
|
||||
results.sort(sortFunc);
|
||||
}
|
||||
|
||||
while(count--) {
|
||||
if(results[count]['keep']) {
|
||||
imageList.push(imgStr.replace(/URL/g, results[count]['url']).replace(/STATS/g, JSON.stringify(results[count]["args"]).replace(/["{}]/g,'').replace(/,/g,'<br/>').replace(/:/g,' : ')));
|
||||
}
|
||||
}
|
||||
|
||||
resultContainer.empty()[0].innerHTML = imageList.join('');
|
||||
$('.toggle-stats', container).addClass('stats');
|
||||
$('.zoom-level', container).trigger('change');
|
||||
$('.query-result', container).click(function(){
|
||||
var me = $(this), img = $('img', me), url = me.attr('data-url');
|
||||
img.attr('src', url);
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function initializeListeners(container) {
|
||||
var query = $('.query-expression', container),
|
||||
zoom = $('.zoom-level', container),
|
||||
sort = $('.sort-expression', container),
|
||||
resultCountTxt = $('.result-count', container),
|
||||
toggleStats = $('.toggle-stats', container),
|
||||
renderAll = $('.render-all', container),
|
||||
resultCount = 0;
|
||||
|
||||
query.change(function(){
|
||||
resultCount = filterBy(container, query.val());
|
||||
if(resultCount < 500) {
|
||||
showResults(container);
|
||||
}
|
||||
resultCountTxt.html("Found VAL results.".replace(/VAL/g, resultCount));
|
||||
});
|
||||
|
||||
zoom.bind('change mousemove keyup', function(){
|
||||
var widthRef = $(window).width() * Number($(this).val()) / 100.0;
|
||||
$('.query-result', container).css('width', widthRef).css('height', widthRef);
|
||||
})
|
||||
|
||||
sort.bind('change keyup', function(e){
|
||||
// Apply search
|
||||
if(e.type === 'keyup' && e.keyCode !== 13) {
|
||||
return;
|
||||
}
|
||||
query.trigger('change');
|
||||
});
|
||||
|
||||
toggleStats.click(function(){
|
||||
var me = $(this).toggleClass('stats'), isActive = me.hasClass('stats');
|
||||
if(isActive) {
|
||||
$('.query-stats').show();
|
||||
} else {
|
||||
$('.query-stats').hide();
|
||||
}
|
||||
});
|
||||
|
||||
renderAll.click(function(){
|
||||
$('.query-result', container).each(function(){
|
||||
var me = $(this), img = $('img', me), url = me.attr('data-url');
|
||||
img.attr('src', url);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystAnalysisGenericSearch = function(dataBasePath) {
|
||||
return this.each(function() {
|
||||
var me = $(this).unbind().empty().addClass('vtkweb-catalyst-analysis-search');
|
||||
|
||||
// Get meta-data
|
||||
$.ajax({
|
||||
url: dataBasePath + '/info.json',
|
||||
dataType: 'json',
|
||||
success: function( data ) {
|
||||
// Store metadata
|
||||
me.data('info', data);
|
||||
|
||||
// Build file list
|
||||
me.data('data-list', buildFileNames(data, dataBasePath));
|
||||
|
||||
// Build UI
|
||||
me.html(SEARCH_TEMPLATE.replace(/HELP/g, extractQueryDocumentation(data)));
|
||||
|
||||
// Attach interaction listeners
|
||||
initializeListeners(me);
|
||||
},
|
||||
error: function(error) {
|
||||
console.log("error when trying to download " + dataBasePath + '/info.json');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystAnalysisSearch = function(project, dataBasePath) {
|
||||
return this.each(function() {
|
||||
var me = $(this).unbind().empty().html(TOOLBAR_TEMPLATE),
|
||||
menu = $('.menu.left', me),
|
||||
buffer = [],
|
||||
analysis = project.analysis,
|
||||
count = analysis.length,
|
||||
containers = {
|
||||
"composite-image-stack" : $('.menu.left > li[data-type="composite-image-stack"] > ul', me),
|
||||
"catalyst-resample-viewer" : $('.menu.left > li[data-type="catalyst-resample-viewer"] > ul', me),
|
||||
"catalyst-viewer" : $('.menu.left > li[data-type="catalyst-viewer"] > ul', me)
|
||||
},
|
||||
buffers = { "composite-image-stack" : [], "catalyst-resample-viewer" : [], "catalyst-viewer" : [], "catalyst-pvweb" : [] },
|
||||
rootContainer = me;
|
||||
|
||||
// Fill buffers
|
||||
while(count--) {
|
||||
var item = analysis[count];
|
||||
buffers[item.type].push(ENTRY_TEMPLATE.replace(/PATH/g, dataBasePath + '/' + item.id).replace(/TITLE/g, item.title).replace(/DESCRIPTION/g, item.description));
|
||||
}
|
||||
|
||||
// Update UI
|
||||
for(var key in containers) {
|
||||
containers[key].html(buffers[key].join(''));
|
||||
}
|
||||
|
||||
// Attach search query listeners
|
||||
$('.create-search', me).addClass('action').click(function(){
|
||||
var me = $(this),
|
||||
path = me.attr('data-path'),
|
||||
type = me.parent().parent().attr('data-type'),
|
||||
title = me.attr('data-title'),
|
||||
searchPanel = $('.search-panel', rootContainer).removeClass().addClass('search-panel').unbind().empty();
|
||||
|
||||
$('.search-title', rootContainer).html(title);
|
||||
SEARCH_FACTORY[type](searchPanel, path);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,134 @@
|
||||
|
||||
/* ========== Main toolbar Info ========== */
|
||||
|
||||
.vtkweb-catalyst-analysis .toolbar-main {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
vertical-align: middle;
|
||||
background: #333;
|
||||
padding: 0 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .toolbar-main li.logo {
|
||||
background-image: url('../../ext/pv/pv-cinema-ww.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 27px;
|
||||
top: 3px;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis ul.toolbar-main {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis ul.toolbar-main li {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: -2px 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis ul.toolbar-main li.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .action {
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .toggle-button.active {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .toolbar-main .run-button {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .toolbar-main .need-project {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .toggle-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis i.help {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ========== Project Info ========== */
|
||||
|
||||
.vtkweb-catalyst-analysis .info-content {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .info-content table td {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .info-content .key {
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
.vtkweb-catalyst-analysis .info-content .value {
|
||||
font-weight: normal;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/* ========== Run content ========== */
|
||||
|
||||
.vtkweb-catalyst-analysis .run-content {
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
left: -1000px;
|
||||
background: #333;
|
||||
color: white;
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .run-content li {
|
||||
padding: 5px 20px;
|
||||
border-bottom: solid 1px #aaa;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .run-content li:hover {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
|
||||
.vtkweb-catalyst-analysis .run-content li i.help {
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
width: 300px;
|
||||
top: 10px;
|
||||
color: black;
|
||||
|
||||
padding: 10px;
|
||||
background: #FFFFCC;
|
||||
border-radius: 5px;
|
||||
margin-left: 15px;
|
||||
border: solid 1px #999;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis .run-content li:hover i.help {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ========== User Share content ========== */
|
||||
|
||||
.vtkweb-catalyst-analysis .share-content {
|
||||
padding: 15px;
|
||||
}
|
||||
@ -0,0 +1,170 @@
|
||||
(function ($, GLOBAL) {
|
||||
var TOOLBAR_TEMPLATE = '<ul class=toolbar-main><li class="logo"/><li class="vtk-icon-menu-1 toggle-button run-button" data-animation="left" data-group=runs data-view="run-content">Runs</li><li class="vtk-icon-info-1 toggle-button need-project default-toggle" data-group="content" data-view="info-content" alt="Toggle Informations" title="Toggle Informations"/><li class="vtk-icon-th toggle-button need-project" data-group=content data-view="bench-content" alt="Toggle Exploration" title="Toggle Exploration"/><li class="vtk-icon-beaker toggle-button need-project" data-group=content data-view="search-content" alt="Toggle Search" title="Toggle Search"/><li class="vtk-icon-dollar toggle-button need-project" data-group=content data-view="cost-content" alt="Toggle Cost" title="Toggle Cost"/><li class="vtk-icon-gauge-1 toggle-button right" data-group=content data-view="estimate-content" alt="Data exploration cost estimate" title="Data exploration cost estimate"/><li class="vtk-icon-user-add-1 toggle-button need-project right" data-group=content data-view="share-content" alt="Share active project" title="Share active project"/></ul><ul class="toggle-content run-content" data-group=runs></ul><div class="info-content toggle-content" data-group=content></div><div class="bench-content toggle-content" data-group="content"></div><div class="search-content toggle-content" data-group=content></div><div class="cost-content toggle-content" data-group="content"></div><div class="share-content toggle-content" data-group="content">The current version does not support user management.</div><div class="estimate-content toggle-content" data-group="content">COST ESTIMATE</div>',
|
||||
RUN_LINE_TEMPLATE = '<li class=select-run data-path=PATH>TITLE<i class=help>DESCRIPTION</i></li>',
|
||||
TABLE_LINE_TEMPLATE = '<tr><td class="key">KEY</td><td class="value">VALUE</td></tr>';
|
||||
|
||||
|
||||
// ========================================================================
|
||||
// Helper
|
||||
// ========================================================================
|
||||
|
||||
function projectInfoToHTML(info, path) {
|
||||
var projectDescription = "<table>",
|
||||
exclude = { "title": 1, "description": 1, "analysis": 1, "path": 1 };
|
||||
|
||||
// Update project description
|
||||
projectDescription += TABLE_LINE_TEMPLATE.replace(/KEY/g, "Name").replace(/VALUE/g, info.title);
|
||||
projectDescription += TABLE_LINE_TEMPLATE.replace(/KEY/g, "Description").replace(/VALUE/g, info.description);
|
||||
for(var key in info) {
|
||||
if(!exclude.hasOwnProperty(key)) {
|
||||
projectDescription += TABLE_LINE_TEMPLATE.replace(/KEY/g, key).replace(/VALUE/g, info[key]);
|
||||
}
|
||||
}
|
||||
projectDescription += "</table>";
|
||||
|
||||
return projectDescription;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function handlePath(fullPath, projectPath) {
|
||||
if(projectPath.indexOf("http://") === 0 || projectPath.indexOf("https://") === 0 || projectPath.indexOf("file://") === 0) {
|
||||
return projectPath;
|
||||
} else {
|
||||
// Relative path
|
||||
var basePath = fullPath.substr(0, 1 + fullPath.lastIndexOf("/"));
|
||||
return basePath + projectPath;
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function createControlToolbar(container, projectList, fullURL) {
|
||||
// Fill run list
|
||||
var count = projectList.length, buffer = [];
|
||||
while(count--) {
|
||||
buffer.push(RUN_LINE_TEMPLATE.replace(/PATH/g, handlePath(fullURL, projectList[count].path)).replace(/TITLE/g, projectList[count].title).replace(/DESCRIPTION/g, projectList[count].description));
|
||||
}
|
||||
container.html(TOOLBAR_TEMPLATE);
|
||||
$('.run-content', container).html(buffer.join(''));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function initializeListeners(container) {
|
||||
// Handle view/button toggle
|
||||
$('.toggle-button', container).addClass('action').click(function(){
|
||||
var me = $(this),
|
||||
group = me.attr('data-group'),
|
||||
view = me.attr('data-view'),
|
||||
animation = me.attr('data-animation'),
|
||||
isActive = me.hasClass('active'),
|
||||
buttons = $('.toggle-button[data-group="' + group + '"]', container),
|
||||
contents = $('.toggle-content[data-group="' + group + '"]', container);
|
||||
|
||||
// Disable all
|
||||
buttons.removeClass('active');
|
||||
if(animation && isActive) {
|
||||
contents.animate({
|
||||
left: "-1000"
|
||||
}, 500, function() {
|
||||
// Animation complete.
|
||||
contents.hide();
|
||||
});
|
||||
} else {
|
||||
contents.hide();
|
||||
}
|
||||
|
||||
|
||||
// Enable local one if not previously active
|
||||
if(!isActive) {
|
||||
me.addClass('active');
|
||||
if(animation) {
|
||||
$('.toggle-content.' + view, container).show().animate({
|
||||
left: "0"
|
||||
}, 500, function() {
|
||||
// Animation complete.
|
||||
});
|
||||
} else {
|
||||
$('.toggle-content.' + view, container).show();
|
||||
}
|
||||
} else {
|
||||
$('.default-toggle[data-group="' + group + '"]', container).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
// Load run
|
||||
$('.select-run', container).addClass('action').click(function(){
|
||||
var me = $(this), basePath = me.attr('data-path');
|
||||
|
||||
// Load project
|
||||
$.ajax({
|
||||
url: basePath + '/info.json',
|
||||
dataType: 'json',
|
||||
success: function( data ) {
|
||||
$('.toggle-button[data-group="runs"]', container).click();
|
||||
|
||||
// Store metadata
|
||||
container.data('project', data);
|
||||
|
||||
// Add project description / viewers / search / cost
|
||||
$('.info-content', container).empty().html(projectInfoToHTML(data, basePath));
|
||||
$('.bench-content', container).vtkCatalystAnalysisBench(data, basePath);
|
||||
$('.search-content', container).vtkCatalystAnalysisSearch(data, basePath);
|
||||
$('.cost-content', container).vtkCatalystAnalysisCost(data, basePath);
|
||||
|
||||
// Update title
|
||||
document.title = data.title;
|
||||
|
||||
// Show default
|
||||
$('.default-toggle[data-group="content"]', container).trigger('click');
|
||||
},
|
||||
error: function(error) {
|
||||
console.log("error when trying to download " + basePath + '/info.json');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
|
||||
// Enable toolbar
|
||||
$('li.need-project', container).css('display', "inline");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystAnalysis = function(fullURL) {
|
||||
return this.each(function() {
|
||||
var me = $(this).unbind().empty().addClass('vtkweb-catalyst-analysis');
|
||||
|
||||
// Get meta-data
|
||||
$.ajax({
|
||||
url: fullURL,
|
||||
dataType: 'json',
|
||||
success: function( data ) {
|
||||
// Store metadata
|
||||
me.data('projects', data);
|
||||
|
||||
// Create project list
|
||||
createControlToolbar(me, data, fullURL);
|
||||
|
||||
// Attach interaction listeners
|
||||
initializeListeners(me);
|
||||
|
||||
// Add general purpose cost estimate
|
||||
$('.estimate-content',me).vtkCatalystAnalysisCostEstimate();
|
||||
},
|
||||
error: function(error) {
|
||||
console.log("error when trying to download " + fullURL);
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,382 @@
|
||||
.vtkweb-catalyst-composite .action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: solid 1px rgba(0, 0, 0, 0.7);
|
||||
border-radius: 0 0 0 10px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite.small .control {
|
||||
width: 4.5em;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite.small .control .header {
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .stop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite.small .control .parameters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .header {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 1.4em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .header span {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .pipeline {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters select {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .layer-selector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .layer-selector ul {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .layer-selector li {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .layer-selector .head {
|
||||
background: #ddd;
|
||||
color: black;
|
||||
font-weight: normal;
|
||||
height: 1.4em;
|
||||
border-radius: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .toggle-container {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
width: 130px;
|
||||
left: 160px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .right-control {
|
||||
float: right;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .pipeline li ul {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .pipeline li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters li {
|
||||
list-style: none;
|
||||
display: list-item;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .pipeline .label {
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .fields {
|
||||
margin: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .fields li {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
padding: 2px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .fields li.active {
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .fields span.value {
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .fields span.title {
|
||||
width: 100px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .background {
|
||||
margin: 0 10px 10px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .background li {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .background li.color {
|
||||
padding: 0 10px;
|
||||
border: solid 1px black;
|
||||
border-radius: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-composite .control .parameters .background li.color.active {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* -------------------- Search -------------------- */
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .parameters .pipeline li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .parameters select {
|
||||
position: relative;
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .parameters .pipeline {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control {
|
||||
float: left;
|
||||
background: white;
|
||||
position: inherit;
|
||||
margin: 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search span.shift {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .parameters .fields li.active {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .ratio-value {
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .ratio-type {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .fields .toggle-active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .fields .toggle-active input {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
/*.vtkweb-catalyst-analysis-composite-search .control .fields .toggle-active i.help {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 100px;
|
||||
right: 160px;
|
||||
padding: 5px;
|
||||
height: 15px;
|
||||
text-align: right;
|
||||
border: none;
|
||||
}*/
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-bar {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-bar li {
|
||||
padding: 5px;
|
||||
border: solid 1px black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-bar .search-result {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-bar .working {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-bar .disabled {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .control .parameters .fields .compute-coverage {
|
||||
display: none;
|
||||
background: #ddd;
|
||||
border: 1px solid;
|
||||
border-radius: 5px;
|
||||
margin: 10px auto;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .chart-container {
|
||||
float: right;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar {
|
||||
clear: both;
|
||||
position: relative;
|
||||
width: 98%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar .table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar .cell {
|
||||
display: table-cell;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar .cell.expand {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar input.query-expression {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar input.zoom-level {
|
||||
width: 150px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar i {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
border: solid 1px black;
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .search-toolbar:hover i {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .toggle-stats {
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
border: solid 1px black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .toggle-stats.stats {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .composite-result li {
|
||||
list-style: none;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .composite-result {
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px black;
|
||||
position: relative;
|
||||
width: 20%;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .composite-result ul {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .cell > ul li {
|
||||
list-style: none;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .result-page-index {
|
||||
width: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .composite-search-results .result-page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .composite-search-results .result-page.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .progress {
|
||||
background-color: #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vtkweb-catalyst-analysis-composite-search .progress > div {
|
||||
background-color: black;
|
||||
width: 5%;
|
||||
height: 15px;
|
||||
border-radius: 5px;
|
||||
margin: 3px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,86 @@
|
||||
.vtk-catalyst-pvweb .control {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: solid 1px rgba(0, 0, 0, 0.7);
|
||||
border-radius: 0 0 0 10px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 300px;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb.small .control {
|
||||
width: 4.5em;
|
||||
}
|
||||
.vtk-catalyst-pvweb.small .control .header {
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .stop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb.small .control .parameters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .header {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 1.4em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .header span {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters .label {
|
||||
margin-left: -6px;
|
||||
margin-right: 5px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters .label .flag {
|
||||
visibility: hidden;
|
||||
width: 1.5em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters .label.active .flag {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters .label span {
|
||||
float: right;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters input {
|
||||
width: 90%;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .control .parameters select {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vtk-catalyst-pvweb .image-viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -0,0 +1,354 @@
|
||||
(function ($, GLOBAL) {
|
||||
var SLIDER_TEMPLATE = 'PRIORITY<div class="label"><span class="flag vtk-icon-flag"/>LABEL<span class="NAME-value">DEFAULT</span></div><input type="range" min="0" max="SIZE" value="INDEX" name="NAME" data-values="VALUES"/>',
|
||||
SELECT_TEMPLATE = 'PRIORITY<div class="label select"><span class="flag vtk-icon-flag"/>LABEL<select name="NAME">VALUES</select></div>',
|
||||
OPTION_TEMPLATE = '<option SELECTED>VALUE</option>',
|
||||
EXCLUDE_ARGS = { "theta": true };
|
||||
|
||||
// ========================================================================
|
||||
// Listeners
|
||||
// ========================================================================
|
||||
|
||||
function initializeListeners(container) {
|
||||
var play = $('.play', container),
|
||||
stop = $('.stop', container),
|
||||
activeArgName = null,
|
||||
activeValues = [],
|
||||
activeValueIndex = 0,
|
||||
keepAnimation = false;
|
||||
|
||||
function animate_callback() {
|
||||
if(keepAnimation) {
|
||||
setTimeout(animate, 150);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if(activeArgName !== null) {
|
||||
activeValueIndex++;
|
||||
activeValueIndex = activeValueIndex % activeValues.length;
|
||||
updateActiveArgument(container, activeArgName, activeValues[activeValueIndex], animate_callback);
|
||||
}
|
||||
}
|
||||
|
||||
// Attach slider listener
|
||||
$('input[type="range"]', container).bind('change keyup',function(){
|
||||
var slider = $(this),
|
||||
name = slider.attr('name'),
|
||||
values = slider.attr('data-values').split(":"),
|
||||
idx = slider.val();
|
||||
|
||||
updateActiveArgument(container, name, values[idx]);
|
||||
});
|
||||
|
||||
// Attach select listener
|
||||
$('select', container).change(function(){
|
||||
var select = $(this),
|
||||
name = select.attr('name'),
|
||||
value = select.val();
|
||||
|
||||
updateActiveArgument(container, name, value);
|
||||
});
|
||||
|
||||
$('.toggle', container).click(function(){
|
||||
container.toggleClass('small');
|
||||
});
|
||||
|
||||
$('.reset', container).click(function(){
|
||||
container.data('viewport').resetCamera();
|
||||
});
|
||||
|
||||
$('.label', container).click(function(){
|
||||
var me = $(this),
|
||||
all = $('.label', container),
|
||||
selectObj = $('select', me.parent()),
|
||||
sliderObj = $('input', me.parent());
|
||||
|
||||
// Handle flag visibility
|
||||
all.removeClass('active');
|
||||
me.addClass('active');
|
||||
|
||||
// Extract active parameter
|
||||
if(selectObj.length) {
|
||||
activeArgName = selectObj.attr('name');
|
||||
activeValueIndex = 0;
|
||||
activeValues = [];
|
||||
$('option', selectObj).each(function(idx, elm) {
|
||||
activeValues.push($(this).text());
|
||||
});
|
||||
}
|
||||
if(sliderObj.length) {
|
||||
activeArgName = sliderObj.attr('name');
|
||||
activeValueIndex = sliderObj.val();
|
||||
activeValues = sliderObj.attr('data-values').split(':');
|
||||
}
|
||||
});
|
||||
|
||||
play.click(function(){
|
||||
play.hide();
|
||||
stop.show();
|
||||
keepAnimation = true;
|
||||
animate();
|
||||
});
|
||||
stop.click(function(){
|
||||
stop.hide();
|
||||
play.show();
|
||||
keepAnimation = false;
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function updateActiveArgument(container, name, value, callback) {
|
||||
if(container.data('active-args')[name] !== value) {
|
||||
info = container.data('info');
|
||||
container.data('active-args')[name] = value;
|
||||
$('span.'+name+'-value', container).html(value);
|
||||
|
||||
container.data('session').call("catalyst.active.argument.update", [name, value]).then(function(){
|
||||
container.data('viewport').render(callback);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// UI
|
||||
// ========================================================================
|
||||
|
||||
var WidgetFactory = {
|
||||
"range": function(name, label, values, defaultValue, priority) {
|
||||
return templateReplace(SLIDER_TEMPLATE, name, label, values, defaultValue, priority);
|
||||
},
|
||||
"list": function(name, label, values, defaultValue, priority) {
|
||||
var options = [];
|
||||
for(var idx in values) {
|
||||
var selected = (values[idx] === defaultValue) ? 'selected="selected"' : '';
|
||||
options.push(OPTION_TEMPLATE.replace('VALUE', values[idx]).replace('SELECTED', selected));
|
||||
}
|
||||
return templateReplace(SELECT_TEMPLATE, name, label, [ options.join('') ], defaultValue, priority);
|
||||
}
|
||||
};
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function templateReplace( templateString, name, label, values, defaultValue, priority) {
|
||||
return templateString.replace(/NAME/g, name).replace(/LABEL/g, label).replace(/VALUES/g, values.join(':')).replace(/SIZE/g, values.length - 1).replace(/DEFAULT/g, defaultValue).replace(/INDEX/g, values.indexOf(defaultValue)).replace(/PRIORITY/g, " ".substring(0,priority));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function createControlPanel(container, args) {
|
||||
var htmlBuffer = [],
|
||||
controlContainer = $('<div/>', {
|
||||
class: 'control',
|
||||
html: '<div class="header"><span class="vtk-icon-tools toggle"/><span class="vtk-icon-resize-full-2 reset"/><span class="vtk-icon-play play"/><span class="vtk-icon-stop stop"/></div><div class="parameters"></div>'
|
||||
});
|
||||
|
||||
// Loop over each option
|
||||
for (key in args) {
|
||||
var name = key,
|
||||
type = args[key].type,
|
||||
label = args[key].label,
|
||||
values = args[key].values,
|
||||
priority = args[key].priority,
|
||||
defaultValue = args[key]['default'];
|
||||
|
||||
// Update default value
|
||||
updateActiveArgument(container, name, defaultValue);
|
||||
|
||||
// Filter out from UI some pre-defined args
|
||||
if(EXCLUDE_ARGS.hasOwnProperty(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Build widget if needed
|
||||
if(values.length > 1) {
|
||||
htmlBuffer.push(WidgetFactory[type](name, label, values, defaultValue, priority));
|
||||
}
|
||||
}
|
||||
|
||||
// Add control panel to UI
|
||||
htmlBuffer.sort();
|
||||
$('<ul/>', {
|
||||
html: '<li>' + htmlBuffer.join('</li><li>') + '</li>'
|
||||
}).appendTo($('.parameters', controlContainer));
|
||||
controlContainer.appendTo(container);
|
||||
|
||||
// Attache listeners
|
||||
initializeListeners(container);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// JQuery
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member fn.vtkCatalystPVWeb
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystPVWeb = function(dataBasePath) {
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-catalyst-pvweb small'); //.unbind();
|
||||
|
||||
// Get meta-data
|
||||
$.ajax({
|
||||
url: dataBasePath + '/info.json',
|
||||
dataType: 'json',
|
||||
success: function( data ) {
|
||||
// Store metadata
|
||||
me.data('info', data);
|
||||
me.data('active-args', {});
|
||||
|
||||
var config = {
|
||||
sessionManagerURL: vtkWeb.properties.sessionManagerURL,
|
||||
application: data['apps'],
|
||||
dataDir: data["working_dir"],
|
||||
type: data['pipeline-type']
|
||||
},
|
||||
stop = vtkWeb.NoOp,
|
||||
start = function(connection) {
|
||||
// Create viewport
|
||||
var viewport = vtkWeb.createViewport({session:connection.session}),
|
||||
session = connection.session;
|
||||
me.data('viewport', viewport);
|
||||
me.data('session', session);
|
||||
|
||||
viewport.bind(me[0]);
|
||||
|
||||
// Init pipeline
|
||||
if(data.hasOwnProperty('configuration')) {
|
||||
session.call("catalyst.pipeline.initialize", [data["configuration"]]).then(function(){
|
||||
viewport.render();
|
||||
},function(e){
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
// Load files
|
||||
if(data.hasOwnProperty('files')) {
|
||||
session.call("catalyst.file.open", [data["files"]]).then(function(){
|
||||
viewport.render();
|
||||
},function(e){
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
// Create Control UI
|
||||
session.call("catalyst.arguments.get").then(function(args){
|
||||
createControlPanel(me, args);
|
||||
});
|
||||
|
||||
// Update stop method to use the connection
|
||||
stop = function() {
|
||||
session.call('application.exit.later', [5]).then(function() {
|
||||
try {
|
||||
connection.connection.close();
|
||||
} catch (closeError) {
|
||||
console.log(closeError);
|
||||
}
|
||||
}, function(err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
$('.close',me.parent()).click(stop);
|
||||
};
|
||||
|
||||
// Try to launch the Viz process
|
||||
vtkWeb.smartConnect(config, start, function(code,reason){
|
||||
alert(reason);
|
||||
});
|
||||
},
|
||||
error: function(error) {
|
||||
console.log("error");
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Alternate jQuery catalyst view constructor.
|
||||
*
|
||||
* @member fn.vtkCatalystPVWeb
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystPVWebDirect = function(data) {
|
||||
// FIXME: This function and the above function should be refactored
|
||||
// FIXME: together to avoid duplicated code.
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-catalyst-pvweb small'); //.unbind();
|
||||
|
||||
// Store metadata
|
||||
me.data('info', data);
|
||||
me.data('active-args', {});
|
||||
|
||||
var stop = vtkWeb.NoOp,
|
||||
start = function(connection) {
|
||||
// Create viewport
|
||||
var viewport = vtkWeb.createViewport({session:connection.session}),
|
||||
session = connection.session;
|
||||
me.data('viewport', viewport);
|
||||
me.data('session', session);
|
||||
|
||||
viewport.bind(me[0]);
|
||||
|
||||
// Init pipeline
|
||||
if(data.hasOwnProperty('configuration')) {
|
||||
session.call("catalyst.pipeline.initialize", [data["configuration"]]).then(function(){
|
||||
viewport.render();
|
||||
},function(e){
|
||||
console.log("There was an error calling 'catalyst.pipeline.initialize':");
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
// Load files
|
||||
if(data.hasOwnProperty('files')) {
|
||||
session.call("catalyst.file.open", [data["files"]]).then(function(){
|
||||
viewport.render();
|
||||
},function(e){
|
||||
console.log("There was an error calling 'catalyst.file.open':");
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
// Create Control UI
|
||||
session.call("catalyst.arguments.get").then(function(args) {
|
||||
createControlPanel(me, args);
|
||||
}, function(err) {
|
||||
console.log("There was an error calling 'catalyst.arguments.get':");
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// Update stop method to use the connection
|
||||
stop = function() {
|
||||
session.call('application.exit.later', [5]).then(function() {
|
||||
try {
|
||||
connection.connection.close();
|
||||
} catch (closeError) {
|
||||
console.log("Caught exception calling connection.close():");
|
||||
console.log(closeError);
|
||||
}
|
||||
}, function(err) {
|
||||
console.log("There was an error calling 'application.exit.later':");
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
me.bind('stop-vtk-connection', stop);
|
||||
};
|
||||
|
||||
// Try to launch the Viz process
|
||||
vtkWeb.connect(data, start, function(code,reason){
|
||||
console.log(reason);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,105 @@
|
||||
.vtk-catalyst-resample-viewer .toolbar {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
.vtk-catalyst-resample-viewer .toolbar .label {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .toolbar input {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
width: 100px;
|
||||
}
|
||||
.vtk-catalyst-resample-viewer .toolbar select {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-left: 5px;
|
||||
/*width: 100px;*/
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .toolbar span.txt-feedback {
|
||||
padding: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: solid 1px rgba(0, 0, 0, 0.7);
|
||||
border-radius: 0 0 0 10px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 300px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer.small .control {
|
||||
width: 3em;
|
||||
}
|
||||
.vtk-catalyst-resample-viewer.small .control .header {
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .stop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer.small .control .parameters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .header {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 1.4em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .header span {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters .label {
|
||||
margin-left: -6px;
|
||||
margin-right: 5px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters .label .flag {
|
||||
visibility: hidden;
|
||||
width: 1.5em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters .label.active .flag {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters .label.select {
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters .label span {
|
||||
float: right;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.vtk-catalyst-resample-viewer .control .parameters input {
|
||||
width: 90%;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@ -0,0 +1,414 @@
|
||||
(function ($, GLOBAL) {
|
||||
var CONTENT_TEMPLATE = '<div class="toolbar"><span class="label">Field<select name="field">FIELDS</select></span><span class="label">Probe<select name="probe"><option value="0">X</option><option value="1">Y</option><option value="2">Z</option></select></span> Slice <span class="slice-value txt-feedback">0</span> Time <span class="time-value txt-feedback">0</span></div><div class="control"><div class="header"><span class="vtk-icon-tools toggle"/><span class="vtk-icon-play play"/><span class="vtk-icon-stop stop"/></div><div class="parameters"><div class="label" data-name="slice"><span class="flag vtk-icon-flag"/>Slice<span class="slice-value">0</span></div><input type="range" min="0" max="NB_SLICES" value="0" name="slice"/><div class="label" data-name="time"><span class="flag vtk-icon-flag"/>Time<span class="time-value">0</span></div><input type="range" min="0" max="NB_TIMES" value="0" name="time"/></div></div><div class="image-sample" style="padding: 10px;"><canvas style="border: solid 1px black;"><img/></canvas></div><div class="chart-sample"></div>',
|
||||
OPTION_TEMPLATE = '<option>VALUE</option>';
|
||||
|
||||
// ========================================================================
|
||||
// Helper
|
||||
// ========================================================================
|
||||
|
||||
function getFileName(filePattern, args) {
|
||||
var fileName = filePattern;
|
||||
for(key in args) {
|
||||
fileName = fileName.replace('{'+key+'}', args[key]);
|
||||
}
|
||||
return fileName;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function getOptions(values) {
|
||||
var buffer = [];
|
||||
for(var idx in values) {
|
||||
buffer.push(OPTION_TEMPLATE.replace('VALUE', values[idx]));
|
||||
}
|
||||
return buffer.join('\n');
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function update(container) {
|
||||
var field = $('select[name="field"]', container).val(),
|
||||
slice = $('input[name="slice"]', container).val(),
|
||||
time = $('input[name="time"]', container).val(),
|
||||
probeAxis = $('select[name="probe"]', container).val();
|
||||
|
||||
downloadJSON(container, slice, probeAxis, field, time);
|
||||
downloadImage(container, slice, field, time);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Download manager
|
||||
// ========================================================================
|
||||
|
||||
function downloadJSON(container, slice, probeAxis, field, time) {
|
||||
var sliceList = [],
|
||||
cache = container.data('json-cache'),
|
||||
info = container.data('info'),
|
||||
basepath = container.data('base-path'),
|
||||
urls = [];
|
||||
|
||||
if(probeAxis === "2") {
|
||||
sliceList = info['arguments']['slice']['values'];
|
||||
} else {
|
||||
sliceList.push(slice);
|
||||
}
|
||||
|
||||
function updateChart(){
|
||||
if(0 === urls.length) {
|
||||
container.trigger('invalidate-chart');
|
||||
}
|
||||
}
|
||||
|
||||
function download(fileName) {
|
||||
$.getJSON( basepath + '/' + fileName, function(data){
|
||||
cache[fileName] = data;
|
||||
if(urls.length > 0) {
|
||||
download(urls.pop());
|
||||
} else {
|
||||
updateChart();
|
||||
}
|
||||
}).fail(function(e){
|
||||
console.log('Fail to download ' + fileName);
|
||||
console.log(e);
|
||||
});
|
||||
}
|
||||
|
||||
// Fill download queue
|
||||
for(var idx in sliceList) {
|
||||
var fileName = getFileName(info['name_pattern'], {'field': field, 'slice': sliceList[idx], 'time': time, 'format': 'json'});
|
||||
if(!cache.hasOwnProperty(fileName)) {
|
||||
urls.push(fileName);
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger download or update chart
|
||||
if(urls.length > 0) {
|
||||
download(urls.pop());
|
||||
} else {
|
||||
updateChart();
|
||||
}
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function downloadImage(container, slice, field, time) {
|
||||
var info = container.data('info'),
|
||||
basepath = container.data('base-path'),
|
||||
fileName = getFileName(info['name_pattern'], {'field': field, 'slice': slice.toString(), 'time': time, 'format': 'jpg'}),
|
||||
img = $('img', container);
|
||||
img.attr('src', basepath + '/' + fileName);
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Chart management
|
||||
// ========================================================================
|
||||
|
||||
function updateChart(container) {
|
||||
var cache = container.data('json-cache'),
|
||||
info = container.data('info'),
|
||||
probe = container.data('probe-coord'),
|
||||
field = $('select[name="field"]', container).val(),
|
||||
slice = Number($('input[name="slice"]', container).val()),
|
||||
time = $('input[name="time"]', container).val(),
|
||||
probeAxis = $('select[name="probe"]', container).val(),
|
||||
fileName = getFileName(info['name_pattern'], {'field': field, 'slice': slice, 'time': time, 'format': 'json'}),
|
||||
size = [0,0,0],
|
||||
offset = 0, step = 0, nbSteps = 0, data = [],
|
||||
chartContainer = $(".chart-sample", container);
|
||||
|
||||
if(cache[fileName] === undefined) {
|
||||
return;
|
||||
}
|
||||
size = cache[fileName]["dimensions"];
|
||||
|
||||
function clamp(value) {
|
||||
return (value == null || value < -1e10) ? null : value;
|
||||
}
|
||||
|
||||
if(probe === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Figure out way to traverse
|
||||
if(probeAxis === '0') {
|
||||
// Along X
|
||||
nbSteps = size[0];
|
||||
step = 1;
|
||||
offset = (size[1] - probe[1]) * size[0];
|
||||
} else if(probeAxis === '1') {
|
||||
// Along Y
|
||||
nbSteps = size[1];
|
||||
step = size[0];
|
||||
offset = probe[0];
|
||||
} else if(probeAxis === '2') {
|
||||
// Along Z
|
||||
nbSteps = size[2];
|
||||
step = -1;
|
||||
offset = probe[0] + (size[1] - probe[1]) * size[0];
|
||||
}
|
||||
|
||||
// Extract data
|
||||
if(probeAxis === '2') {
|
||||
sliceList = info['arguments']['slice']['values'];
|
||||
// Need multi-files
|
||||
for(var idx in sliceList) {
|
||||
f = getFileName(info['name_pattern'], {'field': field, 'slice': sliceList[idx], 'time': time, 'format': 'json'});
|
||||
sliceDataField = cache[f][field];
|
||||
data.push({x: Number(idx), y: clamp(sliceDataField[offset])})
|
||||
}
|
||||
} else if(probeAxis === '1') {
|
||||
// Same slice
|
||||
sliceDataField = cache[fileName][field];
|
||||
for(var i = 0; i < nbSteps; ++i) {
|
||||
data.push({x: i, y: clamp(sliceDataField[offset + (i*step)])})
|
||||
}
|
||||
} else if(probeAxis === '0') {
|
||||
// Same slice
|
||||
sliceDataField = cache[fileName][field];
|
||||
for(var i = 0; i < nbSteps; ++i) {
|
||||
data.push({x: i, y: clamp(sliceDataField[offset + (i*step)])})
|
||||
}
|
||||
}
|
||||
|
||||
// Update UI with chart
|
||||
if(chartContainer.hasClass('vtk-chart')) {
|
||||
// Update
|
||||
chartContainer.vtkChartUpdateData([ { data: data, color: 'steelblue', name: field } ], true);
|
||||
chartContainer.vtkChartConfigure({'chart-padding': [0, 0, 0, 0]});
|
||||
} else {
|
||||
// Create chart
|
||||
chartContainer.vtkChart({
|
||||
'legend': {basic: false, toggle: false, highlight: false},
|
||||
'renderer': 'line',
|
||||
'series': [ { data: data, color: 'steelblue', name: field } ],
|
||||
'axes': [ "bottom", "left", "top"],
|
||||
'chart-padding': [0, 0, 0, 0]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Listeners
|
||||
// ========================================================================
|
||||
|
||||
function initializeListeners(container) {
|
||||
// Attach redraw callback
|
||||
var canvas = $('canvas', container),
|
||||
chartContainer = $('.chart-sample', container),
|
||||
image = $('img', container),
|
||||
enableProbing = false,
|
||||
startSliding = false,
|
||||
sliders = $('input', container),
|
||||
timeSlider = $('input[name="time"]', container),
|
||||
sliceSlider = $('input[name="slice"]', container),
|
||||
timeTxt = $('span.time-value', container),
|
||||
sliceTxt = $('span.slice-value', container),
|
||||
activeSlider = null;
|
||||
dropDowns = $('select', container),
|
||||
currentSlideValue = 0,
|
||||
maxSlideValue = 1,
|
||||
keepAnimation = false,
|
||||
play = $('.play', container),
|
||||
stop = $('.stop', container);
|
||||
|
||||
function animate() {
|
||||
if(activeSlider) {
|
||||
currentSlideValue = (currentSlideValue + 1) % maxSlideValue;
|
||||
activeSlider.val(currentSlideValue);
|
||||
if(keepAnimation) {
|
||||
setTimeout(animate, 150);
|
||||
}
|
||||
updateAll();
|
||||
}
|
||||
}
|
||||
|
||||
// Generic data update
|
||||
function updateAll() {
|
||||
timeTxt.html(timeSlider.val());
|
||||
sliceTxt.html(sliceSlider.val());
|
||||
update(container);
|
||||
paint();
|
||||
}
|
||||
|
||||
// Callback methods to probe data
|
||||
function probe(event) {
|
||||
if(enableProbing) {
|
||||
var offset = canvas.offset(),
|
||||
z = $('input[name="slice"]', container).val(),
|
||||
scale = image[0].naturalWidth / canvas.width();
|
||||
container.data('probe-coord',
|
||||
[Math.floor(scale*(event.pageX - offset.left)), Math.floor(scale*(event.pageY - offset.top)), Number(z)]);
|
||||
updateAll();
|
||||
}
|
||||
}
|
||||
|
||||
// Callback methods to paint image
|
||||
function paint() {
|
||||
if(image[0].naturalWidth == 0) {
|
||||
setTimeout(paint, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
var ctx = canvas[0].getContext("2d"),
|
||||
w = canvas.parent().width(),
|
||||
img = image[0],
|
||||
ih = img.naturalHeight,
|
||||
iw = img.naturalWidth,
|
||||
ratio = ih / iw,
|
||||
scale = iw / w,
|
||||
headHeight = canvas.offset().top - container.offset().top + 22,
|
||||
probePoint = container.data('probe-coord');
|
||||
|
||||
canvas.css('left', '20px').attr('width', w + 'px').attr('height', Math.ceil(w*ratio) + 'px');
|
||||
chartContainer.css('width', '100%').css('height', (container.height() - Math.ceil(w*ratio) - headHeight) + 'px');
|
||||
ctx.drawImage(image[0],
|
||||
0, // source image upper left x
|
||||
0, // source image upper left y
|
||||
iw, // source image width
|
||||
ih, // source image height
|
||||
0, // destination canvas upper left x
|
||||
0, // destination canvas upper left y
|
||||
canvas.width(), // destination canvas width
|
||||
canvas.height()); // destination canvas height
|
||||
|
||||
// Draw line
|
||||
if(probePoint) {
|
||||
var probeAxis = $('select[name="probe"]', container).val();
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.fillStyle="#FFFFFF";
|
||||
if(probeAxis === '0') {
|
||||
// Along X
|
||||
var y = probePoint[1] / scale;
|
||||
ctx.rect(0,y,canvas.width(), Math.ceil(scale));
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
} else if(probeAxis === '1') {
|
||||
// Along Y
|
||||
var x = probePoint[0] / scale;
|
||||
ctx.rect(x,scale,Math.ceil(scale),canvas.height());
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
} else if(probeAxis === '2') {
|
||||
// Along Z
|
||||
var x = probePoint[0] / scale, y = probePoint[1] / scale;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x,y,5,0,2*Math.PI);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Attach probing listeners
|
||||
canvas.bind('mousemove', probe);
|
||||
canvas.bind('mouseup', function(){ enableProbing = false; });
|
||||
canvas.bind('mousedown', function(e){
|
||||
enableProbing = true;
|
||||
probe(e);
|
||||
});
|
||||
|
||||
// Attach auto-paint listener
|
||||
image.bind('load onload', paint);
|
||||
|
||||
// Attach graph update
|
||||
container.bind('invalidate-chart', function(){
|
||||
updateChart(container);
|
||||
});
|
||||
|
||||
// Attach dropDowns listeners
|
||||
dropDowns.bind('change', updateAll);
|
||||
|
||||
// Attach slider listener
|
||||
sliders.bind('change keyup', updateAll);
|
||||
sliders.bind('mousedown', function(){
|
||||
startSliding = true;
|
||||
});
|
||||
sliders.bind('mouseup', function(){
|
||||
startSliding = false;
|
||||
});
|
||||
sliders.bind('mousemove', function(){
|
||||
if(startSliding) {
|
||||
updateAll();
|
||||
}
|
||||
});
|
||||
|
||||
$('div.label', container).click(function(){
|
||||
var me = $(this),
|
||||
all = $('.label', container);
|
||||
|
||||
activeSlider = $('input[name="' + me.attr('data-name') + '"]', container);
|
||||
|
||||
if(activeSlider) {
|
||||
currentSlideValue = Number(activeSlider.val());
|
||||
maxSlideValue = Number(activeSlider.attr('max'));
|
||||
|
||||
// Handle flag visibility
|
||||
all.removeClass('active');
|
||||
me.addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
$('.toggle', container).click(function(){
|
||||
container.toggleClass('small');
|
||||
});
|
||||
|
||||
play.click(function(){
|
||||
play.hide();
|
||||
stop.show();
|
||||
keepAnimation = true;
|
||||
animate();
|
||||
});
|
||||
stop.click(function(){
|
||||
stop.hide();
|
||||
play.show();
|
||||
keepAnimation = false;
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// JQuery
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystResamplerViewer = function(dataBasePath) {
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-catalyst-resample-viewer small').unbind();
|
||||
|
||||
// Get meta-data
|
||||
$.ajax({
|
||||
url: dataBasePath + '/info.json',
|
||||
dataType: 'json',
|
||||
success: function( data ) {
|
||||
// Store metadata
|
||||
me.data('info', data);
|
||||
me.data('active-args', {});
|
||||
me.data('json-cache', {});
|
||||
me.data('base-path', dataBasePath);
|
||||
|
||||
// Create UI
|
||||
me.html(CONTENT_TEMPLATE
|
||||
.replace('FIELDS', getOptions(data['arguments']['field']['values']))
|
||||
.replace('NB_SLICES', data['arguments']['slice']['values'].length-1)
|
||||
.replace('NB_TIMES', data['arguments']['time']['values'].length-1)
|
||||
);
|
||||
initializeListeners(me);
|
||||
|
||||
// Load data
|
||||
update(me);
|
||||
},
|
||||
error: function(error) {
|
||||
console.log("error when trying to download " + dataBasePath + '/info.json');
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
@ -0,0 +1,90 @@
|
||||
.vtk-catalyst-viewer .control {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: solid 1px rgba(0, 0, 0, 0.7);
|
||||
border-radius: 0 0 0 10px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 300px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer.small .control {
|
||||
width: 4.5em;
|
||||
}
|
||||
.vtk-catalyst-viewer.small .control .header {
|
||||
border-radius: 0 0 0 8px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .stop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer.small .control .parameters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .header {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
height: 1.4em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .header span {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters .label {
|
||||
margin-left: -6px;
|
||||
margin-right: 5px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters .label .flag {
|
||||
visibility: hidden;
|
||||
width: 1.5em;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters .label.active .flag {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters .label.select {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters .label span {
|
||||
float: right;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters input {
|
||||
width: 90%;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .control .parameters select {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vtk-catalyst-viewer .image-viewer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -0,0 +1,835 @@
|
||||
(function ($, GLOBAL) {
|
||||
var SLIDER_TEMPLATE = '<div class="label"><span class="flag vtk-icon-flag"/>LABEL<span class="NAME-value">DEFAULT</span></div><input type="range" min="0" max="SIZE" value="INDEX" name="NAME" data-values="VALUES"/>',
|
||||
SELECT_TEMPLATE = ' <div class="label select"><span class="flag vtk-icon-flag"/>LABEL<select name="NAME">VALUES</select></div>',
|
||||
OPTION_TEMPLATE = '<option>VALUE</option>',
|
||||
EXCLUDE_ARGS = { "theta": true };
|
||||
|
||||
// ========================================================================
|
||||
// Helper method
|
||||
// ========================================================================
|
||||
|
||||
function getRelativeLocation(element, mouseEvent) {
|
||||
var parentOffset = element.offset(),
|
||||
x = mouseEvent.pageX || mouseEvent.originalEvent.pageX || mouseEvent.originalEvent.mozMovementX,
|
||||
y = mouseEvent.pageY || mouseEvent.originalEvent.pageY || mouseEvent.originalEvent.mozMovementY,
|
||||
relX = x - parentOffset.left,
|
||||
relY = y - parentOffset.top;
|
||||
return [ relX, relY ];
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Download manager
|
||||
// ========================================================================
|
||||
|
||||
function createDownloadManager(container, poolSize, basepath) {
|
||||
var idleImages = [], processingQueue = [], manager = {
|
||||
clearProcessingQueue: function() {
|
||||
processingQueue = [];
|
||||
},
|
||||
|
||||
download: function(url) {
|
||||
processingQueue.push(url);
|
||||
download();
|
||||
},
|
||||
|
||||
downloadFiles: function(filePattern, argName, argValues, args) {
|
||||
var baseFileName = filePattern, rStr = '{'+argName+'}';
|
||||
|
||||
for(key in args) {
|
||||
if(key !== argName) {
|
||||
baseFileName = baseFileName.replace('{'+key+'}', args[key]);
|
||||
}
|
||||
}
|
||||
|
||||
for(idx in argValues) {
|
||||
processingQueue.push(basepath + '/' + baseFileName.replace(rStr, argValues[idx]));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Attach download manager to container
|
||||
container.data('download-manager', manager);
|
||||
container.bind('load-image', function(e) {
|
||||
manager.download(basepath + '/' + e.filename);
|
||||
});
|
||||
|
||||
function download() {
|
||||
while(idleImages.length > 0 && processingQueue.length > 0) {
|
||||
var img = idleImages.pop(),
|
||||
url = processingQueue.pop();
|
||||
img.src = url;
|
||||
}
|
||||
}
|
||||
|
||||
function onLoadCallback(arg) {
|
||||
var me = $(this), url = me.attr('src');
|
||||
idleImages.push(this);
|
||||
container.trigger({
|
||||
type: "image-loaded",
|
||||
url: url
|
||||
});
|
||||
download();
|
||||
}
|
||||
|
||||
function onError() {
|
||||
idleImages.push(this);
|
||||
download();
|
||||
}
|
||||
|
||||
for(var i = 0; i < poolSize; ++i) {
|
||||
var img = new Image();
|
||||
img.onload = onLoadCallback;
|
||||
img.onabort = onError;
|
||||
img.onerror = onError;
|
||||
idleImages.push(img);
|
||||
}
|
||||
|
||||
return manager;
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Events
|
||||
// ========================================================================
|
||||
|
||||
function fireLoadImage(container) {
|
||||
// Extrat container info
|
||||
var filename = container.data('info')['name_pattern'],
|
||||
args = container.data('active-args');
|
||||
|
||||
// Update filename
|
||||
for(key in args) {
|
||||
filename = filename.replace('{'+key+'}', args[key]);
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
container.trigger({
|
||||
type: 'load-image',
|
||||
arguments: args,
|
||||
filename: filename
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// Listeners
|
||||
// ========================================================================
|
||||
|
||||
function initializeListeners(container) {
|
||||
var play = $('.play', container),
|
||||
stop = $('.stop', container),
|
||||
currentArgs = container.data('active-args'),
|
||||
activeArgName = null,
|
||||
activeValues = [],
|
||||
activeValueIndex = 0,
|
||||
keepAnimation = false;
|
||||
|
||||
function animate() {
|
||||
if(activeArgName !== null) {
|
||||
activeValueIndex++;
|
||||
activeValueIndex = activeValueIndex % activeValues.length;
|
||||
updateActiveArgument(container, activeArgName, activeValues[activeValueIndex]);
|
||||
|
||||
if(keepAnimation) {
|
||||
setTimeout(animate, 150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update Control UI when camera position change
|
||||
container.bind('invalidate-viewport', function(){
|
||||
// Update phi
|
||||
var currentPhi = Number(currentArgs.phi),
|
||||
phiSlider = $('input[name="phi"]', container),
|
||||
values = phiSlider.attr('data-values').split(':'),
|
||||
newIdx = 0,
|
||||
count = values.length;
|
||||
|
||||
// Find matching index
|
||||
while(count--) {
|
||||
if(Number(values[count]) === currentPhi) {
|
||||
newIdx = count;
|
||||
count = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Update slider value
|
||||
phiSlider.val(newIdx).trigger('change');
|
||||
$('span.phi-value', container).html(currentArgs.phi);
|
||||
});
|
||||
|
||||
// Attach slider listener
|
||||
$('input[type="range"]', container).bind('change keyup mousemove',function(){
|
||||
var slider = $(this),
|
||||
name = slider.attr('name'),
|
||||
values = slider.attr('data-values').split(":"),
|
||||
idx = slider.val();
|
||||
|
||||
updateActiveArgument(container, name, values[idx]);
|
||||
});
|
||||
|
||||
// Attach select listener
|
||||
$('select', container).change(function(){
|
||||
var select = $(this),
|
||||
name = select.attr('name'),
|
||||
value = select.val();
|
||||
|
||||
updateActiveArgument(container, name, value);
|
||||
});
|
||||
|
||||
$('.toggle', container).click(function(){
|
||||
container.toggleClass('small');
|
||||
});
|
||||
|
||||
$('.reset', container).click(function(){
|
||||
container.trigger('invalidate-size');
|
||||
});
|
||||
|
||||
$('.label', container).click(function(){
|
||||
var me = $(this),
|
||||
all = $('.label', container),
|
||||
selectObj = $('select', me.parent()),
|
||||
sliderObj = $('input', me.parent());
|
||||
|
||||
// Handle flag visibility
|
||||
all.removeClass('active');
|
||||
me.addClass('active');
|
||||
|
||||
// Extract active parameter
|
||||
if(selectObj.length) {
|
||||
activeArgName = selectObj.attr('name');
|
||||
activeValueIndex = 0;
|
||||
activeValues = [];
|
||||
$('option', selectObj).each(function(idx, elm) {
|
||||
activeValues.push($(this).text());
|
||||
});
|
||||
}
|
||||
if(sliderObj.length) {
|
||||
activeArgName = sliderObj.attr('name');
|
||||
activeValueIndex = sliderObj.val();
|
||||
activeValues = sliderObj.attr('data-values').split(':');
|
||||
}
|
||||
});
|
||||
|
||||
play.click(function(){
|
||||
play.hide();
|
||||
stop.show();
|
||||
keepAnimation = true;
|
||||
animate();
|
||||
});
|
||||
stop.click(function(){
|
||||
stop.hide();
|
||||
play.show();
|
||||
keepAnimation = false;
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function updateActiveArgument(container, name, value) {
|
||||
if(container.data('active-args')[name] !== value) {
|
||||
var downloadManager = container.data('download-manager'),
|
||||
info = container.data('info');
|
||||
container.data('active-args')[name] = value;
|
||||
$('span.'+name+'-value', container).html(value);
|
||||
downloadManager.clearProcessingQueue();
|
||||
fireLoadImage(container);
|
||||
|
||||
// Try to cache all argument values
|
||||
if(container.data('preload')) {
|
||||
downloadManager.downloadFiles(info['name_pattern'], name, info['arguments'][name]['values'], container.data('active-args'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// UI
|
||||
// ========================================================================
|
||||
|
||||
var WidgetFactory = {
|
||||
"range": function(name, label, values, defaultValue) {
|
||||
return templateReplace(SLIDER_TEMPLATE, name, label, values, defaultValue);
|
||||
},
|
||||
"list": function(name, label, values, defaultValue) {
|
||||
var options = [];
|
||||
for(var idx in values) {
|
||||
options.push(OPTION_TEMPLATE.replace('VALUE', values[idx]));
|
||||
}
|
||||
return templateReplace(SELECT_TEMPLATE, name, label, [ options.join('') ], defaultValue);
|
||||
}
|
||||
};
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function templateReplace( templateString, name, label, values, defaultValue) {
|
||||
return templateString.replace(/NAME/g, name).replace(/LABEL/g, label).replace(/VALUES/g, values.join(':')).replace(/SIZE/g, values.length - 1).replace(/DEFAULT/g, defaultValue).replace(/INDEX/g, values.indexOf(defaultValue));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function createControlPanel(container, args) {
|
||||
var htmlBuffer = [],
|
||||
controlContainer = $('<div/>', {
|
||||
class: 'control',
|
||||
html: '<div class="header"><span class="vtk-icon-tools toggle"/><span class="vtk-icon-resize-full-2 reset"/><span class="vtk-icon-play play"/><span class="vtk-icon-stop stop"/></div><div class="parameters"></div>'
|
||||
});
|
||||
|
||||
// Loop over each option
|
||||
for (key in args) {
|
||||
var name = key,
|
||||
type = args[key].type,
|
||||
label = args[key].label,
|
||||
values = args[key].values,
|
||||
defaultValue = args[key]['default'];
|
||||
|
||||
// Update default value
|
||||
updateActiveArgument(container, name, defaultValue);
|
||||
|
||||
// Filter out from UI some pre-defined args
|
||||
if(EXCLUDE_ARGS.hasOwnProperty(key)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Build widget if needed
|
||||
if(values.length > 1) {
|
||||
htmlBuffer.push(WidgetFactory[type](name, label, values, defaultValue));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add control panel to UI
|
||||
htmlBuffer.sort();
|
||||
$('<ul/>', {
|
||||
html: '<li>' + htmlBuffer.join('</li><li>') + '</li>'
|
||||
}).appendTo($('.parameters', controlContainer));
|
||||
controlContainer.appendTo(container);
|
||||
|
||||
// Attache listeners
|
||||
initializeListeners(container);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
function attachTouchListener(container) {
|
||||
var current_button = null, posX, posY, defaultDragButton = 1,
|
||||
isZooming = false, isDragging = false, mouseAction = 'up', target;
|
||||
|
||||
function mobileTouchInteraction(evt) {
|
||||
evt.gesture.preventDefault();
|
||||
switch(evt.type) {
|
||||
case 'drag':
|
||||
if(isZooming) {
|
||||
return;
|
||||
}
|
||||
current_button = defaultDragButton;
|
||||
if(mouseAction === 'up') {
|
||||
mouseAction = "down";
|
||||
|
||||
target = evt.gesture.target;
|
||||
isDragging = true;
|
||||
} else {
|
||||
mouseAction = "move";
|
||||
}
|
||||
|
||||
posX = evt.gesture.touches[0].pageX;
|
||||
posY = evt.gesture.touches[0].pageY;
|
||||
break;
|
||||
case 'hold':
|
||||
if(defaultDragButton === 1) {
|
||||
defaultDragButton = 2;
|
||||
//container.html("Pan mode").css('color','#FFFFFF');
|
||||
} else {
|
||||
defaultDragButton = 1;
|
||||
//container.html("Rotation mode").css('color','#FFFFFF');
|
||||
}
|
||||
|
||||
break;
|
||||
case 'release':
|
||||
//container.html('');
|
||||
current_button = 0;
|
||||
mouseAction = "up";
|
||||
isZooming = false;
|
||||
isDragging = false;
|
||||
break;
|
||||
case 'doubletap':
|
||||
container.trigger('resetCamera');
|
||||
return;
|
||||
case 'pinch':
|
||||
if(isDragging) {
|
||||
return;
|
||||
}
|
||||
current_button = 3;
|
||||
if(mouseAction === 'up') {
|
||||
mouseAction = 'down';
|
||||
posX = 0;
|
||||
posY = container.height();
|
||||
target = evt.gesture.target;
|
||||
isZooming = true;
|
||||
} else {
|
||||
mouseAction = 'move';
|
||||
posY = container.height() * (1+(evt.gesture.scale-1)/2);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
container.trigger({
|
||||
type: 'mouse',
|
||||
action: mouseAction,
|
||||
current_button: current_button,
|
||||
charCode: '',
|
||||
altKey: false,
|
||||
ctrlKey: false,
|
||||
shiftKey: false,
|
||||
metaKey: false,
|
||||
delegateTarget: target,
|
||||
pageX: posX,
|
||||
pageY: posY
|
||||
});
|
||||
}
|
||||
|
||||
// Bind listener to UI container
|
||||
container.hammer({
|
||||
prevent_default : true,
|
||||
prevent_mouseevents : true,
|
||||
transform : true,
|
||||
transform_always_block : true,
|
||||
transform_min_scale : 0.03,
|
||||
transform_min_rotation : 2,
|
||||
drag : true,
|
||||
drag_max_touches : 1,
|
||||
drag_min_distance : 10,
|
||||
swipe : false,
|
||||
hold : true // To switch from rotation to pan
|
||||
}).on("doubletap pinch drag release hold", mobileTouchInteraction);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function createZoomableCanvasObject(container, img, canvas, pixelZoomRatio) {
|
||||
// First set up some variables we will need
|
||||
var modeRotation = 1, // when dragging, it's a rotation
|
||||
modePan = 2, // when dragging, it's a pan
|
||||
modeZoom = 3, // when dragging, it's a zoom
|
||||
modeNone = 0, // No mouse move handling
|
||||
mouseMode = modeNone, // Current mode
|
||||
|
||||
dzScale = 0.005, // scaling factor to control how fast we zoom in and out
|
||||
wheelZoom = 0.05, // amount to change zoom with each wheel event
|
||||
|
||||
drawingCenter = [0,0], // Drawing parameters
|
||||
zoomLevel = 1.0, //
|
||||
|
||||
maxZoom = pixelZoomRatio, // limit how far we can zoom in
|
||||
minZoom = 1 / maxZoom, // limit how far we can zoom out
|
||||
|
||||
lastLocation = [0,0], // Last place mouse event happened
|
||||
|
||||
// Rotation management vars
|
||||
thetaValues, phiValues, stepPhi, stepTheta, currentArgs;
|
||||
|
||||
/*
|
||||
* Adds mouse event handlers so that we can pan and zoom the image
|
||||
*/
|
||||
function setupEvents() {
|
||||
var element = canvas;
|
||||
|
||||
// Needed this to override context menu behavior
|
||||
element.bind('contextmenu', function(evt) { evt.preventDefault(); });
|
||||
|
||||
// Wheel should zoom across browsers
|
||||
element.bind('DOMMouseScroll mousewheel', function (evt) {
|
||||
var x = (-evt.originalEvent.wheelDeltaY || evt.originalEvent.detail);
|
||||
|
||||
lastLocation = getRelativeLocation(canvas, evt);
|
||||
handleZoom((x > 0 ? wheelZoom : x < 0 ? -wheelZoom : 0));
|
||||
evt.preventDefault();
|
||||
|
||||
// Redraw the image in the canvas
|
||||
redrawImage();
|
||||
});
|
||||
|
||||
// Handle mobile
|
||||
attachTouchListener(element);
|
||||
element.bind('mouse', function(e){
|
||||
// action: mouseAction,
|
||||
// current_button: current_button,
|
||||
// charCode: '',
|
||||
// altKey: false,
|
||||
// ctrlKey: false,
|
||||
// shiftKey: false,
|
||||
// metaKey: false,
|
||||
// delegateTarget: target,
|
||||
// pageX: posX,
|
||||
// pageY: posY
|
||||
var action = e.action,
|
||||
altKey = e.altKey,
|
||||
shiftKey = e.shiftKey,
|
||||
ctrlKey = e.ctrlKey,
|
||||
x = e.pageX,
|
||||
y = e.pageY,
|
||||
current_button = e.current_button;
|
||||
|
||||
if(action === 'down') {
|
||||
if (e.altKey) {
|
||||
current_button = 2;
|
||||
e.altKey = false;
|
||||
} else if (e.shiftKey) {
|
||||
current_button = 3;
|
||||
e.shiftKey = false;
|
||||
}
|
||||
// Detect interaction mode
|
||||
switch(current_button) {
|
||||
case 2: // middle mouse down = pan
|
||||
mouseMode = modePan;
|
||||
break;
|
||||
case 3: // right mouse down = zoom
|
||||
mouseMode = modeZoom;
|
||||
break;
|
||||
default:
|
||||
mouseMode = modeRotation;
|
||||
break;
|
||||
}
|
||||
|
||||
// Store mouse location
|
||||
lastLocation = [x, y];
|
||||
|
||||
e.preventDefault();
|
||||
} else if(action === 'up') {
|
||||
mouseMode = modeNone;
|
||||
e.preventDefault();
|
||||
} else if(action === 'move') {
|
||||
if(mouseMode != modeNone) {
|
||||
var loc = [x,y];
|
||||
|
||||
// Can NOT use switch as (modeRotation == modePan) is
|
||||
// possible when Pan should take over rotation as
|
||||
// rotation is not possible
|
||||
if(mouseMode === modePan) {
|
||||
handlePan(loc);
|
||||
} else if (mouseMode === modeZoom) {
|
||||
var deltaY = loc[1] - lastLocation[1];
|
||||
handleZoom(deltaY * dzScale);
|
||||
|
||||
// Update mouse location
|
||||
lastLocation = loc;
|
||||
} else {
|
||||
handleRotation(loc);
|
||||
}
|
||||
|
||||
// Redraw the image in the canvas
|
||||
redrawImage();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Zoom and pan events with mouse buttons and drag
|
||||
element.bind('mousedown', function(evt) {
|
||||
var current_button = evt.which;
|
||||
|
||||
// alt+click simulates center button, shift+click simulates right
|
||||
if (evt.altKey) {
|
||||
current_button = 2;
|
||||
evt.altKey = false;
|
||||
} else if (evt.shiftKey) {
|
||||
current_button = 3;
|
||||
evt.shiftKey = false;
|
||||
}
|
||||
|
||||
// Detect interaction mode
|
||||
switch(current_button) {
|
||||
case 2: // middle mouse down = pan
|
||||
mouseMode = modePan;
|
||||
break;
|
||||
case 3: // right mouse down = zoom
|
||||
mouseMode = modeZoom;
|
||||
break;
|
||||
default:
|
||||
mouseMode = modeRotation;
|
||||
break;
|
||||
}
|
||||
|
||||
// Store mouse location
|
||||
lastLocation = getRelativeLocation(canvas, evt);
|
||||
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
||||
// Send mouse movement event to the forwarding function
|
||||
element.bind('mousemove', function(e) {
|
||||
if(mouseMode != modeNone) {
|
||||
var loc = getRelativeLocation(canvas, e);
|
||||
|
||||
// Can NOT use switch as (modeRotation == modePan) is
|
||||
// possible when Pan should take over rotation as
|
||||
// rotation is not possible
|
||||
if(mouseMode === modePan) {
|
||||
handlePan(loc);
|
||||
} else if (mouseMode === modeZoom) {
|
||||
var deltaY = loc[1] - lastLocation[1];
|
||||
handleZoom(deltaY * dzScale);
|
||||
|
||||
// Update mouse location
|
||||
lastLocation = loc;
|
||||
} else {
|
||||
handleRotation(loc);
|
||||
}
|
||||
|
||||
// Redraw the image in the canvas
|
||||
redrawImage();
|
||||
}
|
||||
});
|
||||
|
||||
// Stop any zoom or pan events
|
||||
element.bind('mouseup', function(evt) {
|
||||
mouseMode = modeNone;
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
||||
// Update rotation handler if possible
|
||||
modeRotation = container.data('info').arguments.hasOwnProperty('phi') ? modeRotation : modePan;
|
||||
if(modeRotation != modePan) {
|
||||
thetaValues = container.data('info').arguments.theta.values;
|
||||
phiValues = container.data('info').arguments.phi.values;
|
||||
stepPhi = phiValues[1] - phiValues[0];
|
||||
stepTheta = thetaValues[1] - thetaValues[0];
|
||||
currentArgs = container.data('active-args');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* If the data can rotate
|
||||
*/
|
||||
function handleRotation(loc) {
|
||||
var currentPhi = currentArgs.phi,
|
||||
currentTheta = currentArgs.theta,
|
||||
currentPhiIdx = phiValues.indexOf(currentPhi),
|
||||
currentThetaIdx = thetaValues.indexOf(currentTheta)
|
||||
deltaPhi = (loc[0] - lastLocation[0]),
|
||||
deltaTheta = (loc[1] - lastLocation[1]),
|
||||
changeDetected = false;
|
||||
|
||||
if(Math.abs(deltaPhi) > stepPhi) {
|
||||
changeDetected = true;
|
||||
currentPhiIdx += (deltaPhi > 0) ? 1 : -1;
|
||||
if(currentPhiIdx >= phiValues.length) {
|
||||
currentPhiIdx -= phiValues.length;
|
||||
} else if(currentPhiIdx < 0) {
|
||||
currentPhiIdx += phiValues.length;
|
||||
}
|
||||
currentArgs['phi'] = phiValues[currentPhiIdx];
|
||||
}
|
||||
|
||||
if(Math.abs(deltaTheta) > stepTheta) {
|
||||
currentThetaIdx += (deltaTheta > 0) ? 1 : -1;
|
||||
if(currentThetaIdx >= thetaValues.length) {
|
||||
currentThetaIdx = thetaValues.length - 1;
|
||||
} else if(currentThetaIdx < 0) {
|
||||
currentThetaIdx = 0;
|
||||
}
|
||||
if(currentArgs['theta'] !== thetaValues[currentThetaIdx]) {
|
||||
currentArgs['theta'] = thetaValues[currentThetaIdx];
|
||||
changeDetected = true;
|
||||
}
|
||||
}
|
||||
|
||||
if(changeDetected) {
|
||||
fireLoadImage(container);
|
||||
container.trigger('invalidate-viewport');
|
||||
|
||||
// Update mouse location
|
||||
lastLocation = loc;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Does the actual image panning. Panning should not mess with the
|
||||
* source width or source height, those are fixed by the current zoom
|
||||
* level. Panning should only update the source origin (the x and y
|
||||
* coordinates of the upper left corner of the source rectangle).
|
||||
*/
|
||||
function handlePan(loc) {
|
||||
// Update the source rectangle origin, but afterwards, check to
|
||||
// make sure we're not trying to look outside the image bounds.
|
||||
drawingCenter[0] += (loc[0] - lastLocation[0]);
|
||||
drawingCenter[1] += (loc[1] - lastLocation[1]);
|
||||
|
||||
// Update mouse location
|
||||
lastLocation = loc;
|
||||
}
|
||||
|
||||
/*
|
||||
* Does the actual image zooming. Zooming first sets what the source width
|
||||
* and height should be based on the zoom level, then adjusts the source
|
||||
* origin to try and maintain the source center point. However, zooming
|
||||
* must also not try to view outside the image bounds, so the center point
|
||||
* may be changed as a result of this.
|
||||
*/
|
||||
function handleZoom(inOutAmount) {
|
||||
var beforeZoom = zoomLevel,
|
||||
afterZoom = beforeZoom + inOutAmount;
|
||||
|
||||
// Disallow zoomLevel outside allowable range
|
||||
if (afterZoom < minZoom) {
|
||||
afterZoom = minZoom;
|
||||
} else if (afterZoom > maxZoom) {
|
||||
afterZoom = maxZoom;
|
||||
}
|
||||
|
||||
if(beforeZoom != afterZoom) {
|
||||
zoomLevel = afterZoom;
|
||||
// FIXME ----------------------------------------------------------------
|
||||
// zoom by keeping location of "lastLocation" in the same screen position
|
||||
// FIXME ----------------------------------------------------------------
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Convenience function to draw the image. As a reminder, we always fill
|
||||
* the entire viewport. Also, we always use the source origin and source
|
||||
* dimensions that we have calculated and maintain internally.
|
||||
*/
|
||||
function redrawImage() {
|
||||
var ctx = canvas[0].getContext("2d"),
|
||||
w = container.width(),
|
||||
h = container.height(),
|
||||
iw = img[0].naturalWidth,
|
||||
ih = img[0].naturalHeight;
|
||||
|
||||
if(iw === 0) {
|
||||
setTimeout(redrawImage, 100);
|
||||
} else {
|
||||
canvas.attr("width", w);
|
||||
canvas.attr("height", h);
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
var tw = Math.floor(iw*zoomLevel),
|
||||
th = Math.floor(ih*zoomLevel),
|
||||
tx = drawingCenter[0] - (tw/2),
|
||||
ty = drawingCenter[1] - (th/2),
|
||||
dx = (tw > w) ? (tw - w) : (w - tw),
|
||||
dy = (th > h) ? (th - h) : (h - th),
|
||||
centerBounds = [ (w-dx)/2 , (h-dy)/2, (w+dx)/2, (h+dy)/2 ];
|
||||
|
||||
if( drawingCenter[0] < centerBounds[0] || drawingCenter[0] > centerBounds[2]
|
||||
|| drawingCenter[1] < centerBounds[1] || drawingCenter[1] > centerBounds[3] ) {
|
||||
drawingCenter[0] = Math.min( Math.max(drawingCenter[0], centerBounds[0]), centerBounds[2] );
|
||||
drawingCenter[1] = Math.min( Math.max(drawingCenter[1], centerBounds[1]), centerBounds[3] );
|
||||
tx = drawingCenter[0] - (tw/2);
|
||||
ty = drawingCenter[1] - (th/2);
|
||||
}
|
||||
|
||||
ctx.drawImage(img[0],
|
||||
0, 0, iw, ih, // Source image [Location,Size]
|
||||
tx, ty, tw, th); // Traget drawing [Location,Size]
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Make sure the image will fit inside container as ZoomOut
|
||||
*/
|
||||
|
||||
function resetCamera() {
|
||||
var w = container.width(),
|
||||
h = container.height(),
|
||||
iw = img[0].naturalWidth,
|
||||
ih = img[0].naturalHeight;
|
||||
|
||||
if(iw === 0) {
|
||||
setTimeout(resetCamera, 100);
|
||||
} else {
|
||||
zoomLevel = minZoom = Math.min( w / iw, h / ih );
|
||||
drawingCenter[0] = w/2;
|
||||
drawingCenter[1] = h/2;
|
||||
redrawImage();
|
||||
}
|
||||
}
|
||||
|
||||
// Now do some initialization
|
||||
setupEvents();
|
||||
resetCamera();
|
||||
|
||||
// Just expose a couple of methods that need to be called from outside
|
||||
return {
|
||||
'resetCamera': resetCamera,
|
||||
'imageLoaded': redrawImage
|
||||
};
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
function createImageViewer(container, func) {
|
||||
var imageContainer = $('<img/>', { class: 'image-viewer' }),
|
||||
imageCanvas = $('<canvas/>', { class: 'image-canvas' }),
|
||||
currentFileToRender = null;
|
||||
imageContainer.appendTo(imageCanvas);
|
||||
imageCanvas.appendTo(container);
|
||||
|
||||
// Add zoom manager
|
||||
var manipMgr = createZoomableCanvasObject(container, imageContainer, imageCanvas, 10);
|
||||
|
||||
container.bind('invalidate-size', function() {
|
||||
manipMgr.resetCamera();
|
||||
});
|
||||
imageContainer.bind('onload load', function(){
|
||||
manipMgr.imageLoaded();
|
||||
container.trigger('image-render');
|
||||
});
|
||||
container.bind('image-loaded', function(event){
|
||||
if(currentFileToRender === null || event.url.indexOf(currentFileToRender) != -1) {
|
||||
imageContainer.attr('src', event.url);
|
||||
}
|
||||
});
|
||||
container.bind('load-image', function(event){
|
||||
currentFileToRender = event.filename;
|
||||
});
|
||||
|
||||
return imageCanvas;
|
||||
}
|
||||
|
||||
// ========================================================================
|
||||
// JQuery
|
||||
// ========================================================================
|
||||
|
||||
/**
|
||||
* jQuery catalyst view constructor.
|
||||
*
|
||||
* @member jQuery.vtkCatalystViewer
|
||||
* @param basePath
|
||||
* Root directory for data to visualize
|
||||
*/
|
||||
|
||||
$.fn.vtkCatalystViewer = function(dataBasePath, preload) {
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-catalyst-viewer small'); //.unbind();
|
||||
|
||||
// Get meta-data
|
||||
$.ajax({
|
||||
url: dataBasePath + '/info.json',
|
||||
dataType: 'json',
|
||||
success: function( data ) {
|
||||
// Store metadata
|
||||
me.data('info', data);
|
||||
me.data('active-args', {});
|
||||
me.data('base-path', dataBasePath);
|
||||
me.data('preload', (preload ? true : false));
|
||||
|
||||
// Create download manager
|
||||
createDownloadManager(me, 5, dataBasePath);
|
||||
|
||||
// Create Control UI
|
||||
createControlPanel(me, data.arguments);
|
||||
|
||||
// Create interactive viewer
|
||||
createImageViewer(me);
|
||||
|
||||
// Load default image
|
||||
fireLoadImage(me);
|
||||
},
|
||||
error: function(error) {
|
||||
console.log("error");
|
||||
console.log(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery, window));
|
||||
438
ParaView-5.0.1/VTK/Web/JavaScript/Widgets/ChartWidget/multi.csv
Normal file
438
ParaView-5.0.1/VTK/Web/JavaScript/Widgets/ChartWidget/multi.csv
Normal file
@ -0,0 +1,438 @@
|
||||
x,temperature,pressure,something Else
|
||||
0.01,0.999950000416665,0.00999983333416666,0.989950167082499
|
||||
0.02,0.999800006666578,0.0199986666933331,0.979801339973245
|
||||
0.03,0.999550033748988,0.0299955002024957,0.969554533546492
|
||||
0.04,0.999200106660978,0.0399893341866342,0.959210772474344
|
||||
0.05,0.998750260394966,0.0499791692706783,0.948771091124288
|
||||
0.06,0.998200539935204,0.0599640064794446,0.93823653345576
|
||||
0.07,0.99755100025328,0.0699428473375328,0.927608152915747
|
||||
0.08,0.996801706302619,0.0799146939691727,0.916887012333447
|
||||
0.09,0.995952733011994,0.089878549198011,0.906074183813983
|
||||
0.1,0.995004165278026,0.0998334166468282,0.895170748631197
|
||||
0.11,0.993956097956697,0.109778300837175,0.884177797119522
|
||||
0.12,0.992808635853866,0.119712207288919,0.873096428564947
|
||||
0.13,0.991561893714788,0.129634142619695,0.861927751095093
|
||||
0.14,0.990215996212637,0.139543114644236,0.850672881568401
|
||||
0.15,0.988771077936042,0.149438132473599,0.839332945462443
|
||||
0.16,0.987227283375627,0.159318206614246,0.827909076761381
|
||||
0.17,0.985584766909561,0.169182349066996,0.816402417842565
|
||||
0.18,0.983843692788121,0.179029573425824,0.804814119362297
|
||||
0.19,0.98200423511727,0.188858894976501,0.79314534014077
|
||||
0.2,0.980066577841242,0.198669330795061,0.78139724704618
|
||||
0.21,0.978030914724148,0.2084598998461,0.769571014878049
|
||||
0.22,0.975897449330606,0.218229623080869,0.757667826249736
|
||||
0.23,0.973666395005375,0.227977523535188,0.745688871470186
|
||||
0.24,0.97133797485203,0.237702626427135,0.733635348424895
|
||||
0.25,0.968912421710645,0.247403959254523,0.721508462456122
|
||||
0.26,0.966389978134513,0.257080551892155,0.709309426242358
|
||||
0.27,0.963770896365891,0.266731436688831,0.697039459677059
|
||||
0.28,0.961055438310771,0.276355648564114,0.684699789746657
|
||||
0.29,0.958243875512697,0.285952225104836,0.672291650407862
|
||||
0.3,0.955336489125606,0.29552020666134,0.659816282464266
|
||||
0.31,0.952333569885713,0.305058636443443,0.64727493344227
|
||||
0.32,0.949235418082441,0.314566560616118,0.634668857466323
|
||||
0.33,0.946042343528387,0.324043028394868,0.621999315133519
|
||||
0.34,0.942754665528346,0.333487092140814,0.609267573387532
|
||||
0.35,0.939372712847379,0.342897807455451,0.596474905391928
|
||||
0.36,0.935896823677935,0.35227423327509,0.583622590402845
|
||||
0.37,0.932327345606034,0.361615431964962,0.570711913641073
|
||||
0.38,0.92866463557651,0.370920469412983,0.557744166163528
|
||||
0.39,0.924909059857313,0.380188415123161,0.544720644734152
|
||||
0.4,0.921060994002885,0.389418342308651,0.531642651694235
|
||||
0.41,0.917120822816605,0.398609327984423,0.518511494832182
|
||||
0.42,0.913088940312308,0.40776045305957,0.505328487252738
|
||||
0.43,0.908965749674885,0.416870802429211,0.492094947245674
|
||||
0.44,0.904751663219963,0.425939465066,0.478812198153964
|
||||
0.45,0.900447102352677,0.43496553411123,0.465481568241447
|
||||
0.46,0.896052497525525,0.44394810696552,0.452104390560006
|
||||
0.47,0.891568288195329,0.452886285379068,0.438682002816261
|
||||
0.48,0.886994922779284,0.461779175541483,0.425215747237801
|
||||
0.49,0.882332858610122,0.470625888171158,0.411706970438964
|
||||
0.5,0.877582561890373,0.479425538604203,0.39815702328617
|
||||
0.51,0.872744507645751,0.488177246882908,0.384567260762844
|
||||
0.52,0.86781917967765,0.496880137843737,0.370939041833913
|
||||
0.53,0.862807070514761,0.505533341204847,0.357273729309914
|
||||
0.54,0.857708681363824,0.514135991653113,0.343572689710711
|
||||
0.55,0.852524522059506,0.522687228930659,0.329837293128846
|
||||
0.56,0.847255111013416,0.531186197920883,0.316068913092533
|
||||
0.57,0.841900975162269,0.539632048733969,0.3022689264283
|
||||
0.58,0.836462649915187,0.548023936791874,0.288438713123313
|
||||
0.59,0.830940679100163,0.556361022912784,0.27457965618738
|
||||
0.6,0.825335614909678,0.564642473395035,0.260693141514643
|
||||
0.61,0.819648017845479,0.572867460100481,0.246780557744998
|
||||
0.62,0.813878456662534,0.581035160537305,0.232843296125229
|
||||
0.63,0.808027508312152,0.58914475794227,0.218882750369882
|
||||
0.64,0.802095757884293,0.597195441362392,0.204900316521901
|
||||
0.65,0.796083798549056,0.60518640573604,0.190897392813016
|
||||
0.66,0.789992231497365,0.613116851973434,0.176875379523931
|
||||
0.67,0.783821665880849,0.62098598703656,0.16283567884429
|
||||
0.68,0.777572718750928,0.628793024018469,0.148779694732459
|
||||
0.69,0.771246014997107,0.636537182221968,0.134708832775139
|
||||
0.7,0.764842187284488,0.644217687237691,0.120624500046797
|
||||
0.71,0.758361875990508,0.651833771021537,0.106528104968972
|
||||
0.72,0.751805729140895,0.659384671971473,0.0924210571694219
|
||||
0.73,0.74517440234487,0.666869635003698,0.0783047673411725
|
||||
0.74,0.738468558729588,0.674287911628145,0.0641806471014429
|
||||
0.75,0.731688868873821,0.681638760023334,0.0500501088504867
|
||||
0.76,0.724836010740905,0.688921445110551,0.0359145656303539
|
||||
0.77,0.717910669610943,0.696135238627357,0.0217754309835867
|
||||
0.78,0.710913538012277,0.70327941920041,0.00763411881186715
|
||||
0.79,0.703845315652236,0.710353272417608,-0.00650795676537164
|
||||
0.8,0.696706709347165,0.717356090899523,-0.0206493815523573
|
||||
0.81,0.689498432951747,0.724287174370142,-0.0347887414183954
|
||||
0.82,0.682221207287614,0.731145829726896,-0.0489246224392822
|
||||
0.83,0.674875760071267,0.737931371109963,-0.0630556110386955
|
||||
0.84,0.667462825841308,0.744643119970859,-0.0771802941295511
|
||||
0.85,0.659983145884982,0.751280405140293,-0.0912972592553104
|
||||
0.86,0.652437468164052,0.757842562895277,-0.105405094731225
|
||||
0.87,0.644826547240001,0.764328937025505,-0.119502389785504
|
||||
0.88,0.63715114419858,0.770738878898969,-0.133587734700389
|
||||
0.89,0.629412026573697,0.777071747526824,-0.147659720953127
|
||||
0.9,0.621609968270665,0.783326909627483,-0.161716941356819
|
||||
0.91,0.613745749488812,0.78950373968995,-0.175757990201139
|
||||
0.92,0.605820156643463,0.795601620036366,-0.189781463392903
|
||||
0.93,0.597833982287298,0.801619940883777,-0.203785958596479
|
||||
0.94,0.589788025031098,0.807558100405114,-0.217770075374016
|
||||
0.95,0.581683089463884,0.813415504789374,-0.23173241532549
|
||||
0.96,0.573519986072457,0.819191568300998,-0.245671582228542
|
||||
0.97,0.565299531160354,0.82488571333845,-0.259586182178096
|
||||
0.98,0.557022546766217,0.83049737049197,-0.273474823725753
|
||||
0.99,0.548689860581588,0.83602597860052,-0.287336118018933
|
||||
1,0.54030230586814,0.841470984807897,-0.301168678939757
|
||||
1.01,0.531860721374355,0.846831844618015,-0.31497112324366
|
||||
1.02,0.52336595125165,0.852108021949363,-0.328742070697713
|
||||
1.03,0.514818844969955,0.857298989188603,-0.342480144218648
|
||||
1.04,0.506220257232778,0.862404227243338,-0.35618397001056
|
||||
1.05,0.497571047891727,0.867423225594017,-0.36985217770229
|
||||
1.06,0.488872081860528,0.872355482344986,-0.383483400484459
|
||||
1.07,0.480124229028534,0.877200504274682,-0.397076275246148
|
||||
1.08,0.47132836417374,0.881957806884948,-0.410629442711208
|
||||
1.09,0.462485366875301,0.886626914449487,-0.424141547574186
|
||||
1.1,0.453596121425577,0.891207360061435,-0.437611238635858
|
||||
1.11,0.444661516741707,0.895698685680048,-0.451037168938341
|
||||
1.12,0.435682446276712,0.900100442176505,-0.464417995899793
|
||||
1.13,0.426659807930157,0.904412189378826,-0.477752381448668
|
||||
1.14,0.417594503958358,0.908633496115883,-0.491038992157525
|
||||
1.15,0.408487440884157,0.912763940260521,-0.504276499376364
|
||||
1.16,0.399339529406273,0.916803108771767,-0.517463579365494
|
||||
1.17,0.39015168430823,0.920750597736136,-0.530598913427905
|
||||
1.18,0.380924824366882,0.92460601240802,-0.543681188041139
|
||||
1.19,0.371659872260533,0.928368967249167,-0.556709094988634
|
||||
1.2,0.362357754476674,0.932039085967226,-0.569681331490553
|
||||
1.21,0.35301940121933,0.935616001553386,-0.582596600334055
|
||||
1.22,0.343645746316047,0.939099356319068,-0.595453610003021
|
||||
1.23,0.334237727124503,0.942488801931697,-0.608251074807195
|
||||
1.24,0.324796284438776,0.945783999449539,-0.620987715010763
|
||||
1.25,0.315322362395269,0.948984619355586,-0.633662256960318
|
||||
1.26,0.305816908378289,0.952090341590516,-0.646273433212226
|
||||
1.27,0.296280872925319,0.955100855584692,-0.658819982659374
|
||||
1.28,0.286715209631955,0.958015860289225,-0.671300650657269
|
||||
1.29,0.277120875056558,0.960835064206073,-0.683714189149515
|
||||
1.3,0.267498828624587,0.963558185417193,-0.696059356792606
|
||||
1.31,0.25785003253267,0.966184951612734,-0.708334919080065
|
||||
1.32,0.248175451652373,0.968715100118265,-0.720539648465892
|
||||
1.33,0.238476053433723,0.971148377921045,-0.732672324487321
|
||||
1.34,0.228752807808459,0.973484541695319,-0.74473173388686
|
||||
1.35,0.219006687093041,0.975723357826659,-0.756716670733618
|
||||
1.36,0.209238665891419,0.977864602435316,-0.768625936543897
|
||||
1.37,0.199449720997573,0.979908061398614,-0.780458340401041
|
||||
1.38,0.189640831297834,0.98185353037236,-0.792212699074525
|
||||
1.39,0.179812977673,0.983700814811277,-0.803887837138277
|
||||
1.4,0.169967142900241,0.98544972998846,-0.815482587088219
|
||||
1.41,0.160104311554831,0.98710010101385,-0.826995789459019
|
||||
1.42,0.150225469911686,0.98865176285172,-0.838426292940034
|
||||
1.43,0.140331605846737,0.990104560337178,-0.849772954490441
|
||||
1.44,0.130423708738146,0.991458348191686,-0.861034639453541
|
||||
1.45,0.120502769367367,0.992712991037588,-0.872210221670222
|
||||
1.46,0.11056977982007,0.993868363411645,-0.883298583591575
|
||||
1.47,0.100625733386932,0.994924349777581,-0.894298616390649
|
||||
1.48,0.0906716244643097,0.99588084453764,-0.90520922007333
|
||||
1.49,0.0807084484548006,0.996737752043143,-0.916029303588343
|
||||
1.5,0.0707372016677029,0.997494986604054,-0.926757784936352
|
||||
1.51,0.0607588812193859,0.998152472497548,-0.937393591278162
|
||||
1.52,0.0507744849335792,0.998710143975583,-0.947935659042004
|
||||
1.53,0.040785011241591,0.999167945271476,-0.958382934029885
|
||||
1.54,0.0307914590824661,0.999525830605479,-0.968734371523013
|
||||
1.55,0.0207948278030924,0.999783764189357,-0.978988936386265
|
||||
1.56,0.0107961170582674,0.999941720229966,-0.989145603171699
|
||||
1.57,0.000796326710733263,0.999999682931835,-0.999203356221101
|
||||
1.58,-0.00920354326880834,0.99995764649874,-1.00916118976755
|
||||
1.59,-0.0192024929016926,0.999815615134291,-1.01901810803598
|
||||
1.6,-0.0291995223012888,0.999573603041505,-1.02877312534279
|
||||
1.61,-0.0391936317729877,0.999231634421391,-1.03842526619438
|
||||
1.62,-0.0491838219141705,0.998789743470524,-1.04797356538469
|
||||
1.63,-0.0591690937141481,0.998247974377632,-1.05741706809178
|
||||
1.64,-0.069148448654062,0.997606381319174,-1.06675482997324
|
||||
1.65,-0.0791208888067339,0.996865028453919,-1.07598591726065
|
||||
1.66,-0.089085416936459,0.996023989916537,-1.085109406853
|
||||
1.67,-0.099041036598728,0.99508334981018,-1.09412438640891
|
||||
1.68,-0.108986752239871,0.994043202198076,-1.10302995443795
|
||||
1.69,-0.118921569296612,0.992903651094118,-1.11182522039073
|
||||
1.7,-0.128844494295525,0.991664810452469,-1.12050930474799
|
||||
1.71,-0.138754534952378,0.990326804156158,-1.12908133910854
|
||||
1.72,-0.148650700271364,0.988889766004701,-1.13754046627607
|
||||
1.73,-0.158532000644198,0.987353839700716,-1.14588584034491
|
||||
1.74,-0.168397447949077,0.985719178835553,-1.15411662678463
|
||||
1.75,-0.178246055649492,0.983985946873937,-1.16223200252343
|
||||
1.76,-0.18807683889288,0.982154317137618,-1.1702311560305
|
||||
1.77,-0.197888814609109,0.980224472788045,-1.17811328739715
|
||||
1.78,-0.207681001608784,0.978196606808045,-1.18587760841683
|
||||
1.79,-0.217452420681365,0.976070921982524,-1.19352334266389
|
||||
1.8,-0.227202094693087,0.973847630878195,-1.20104972557128
|
||||
1.81,-0.236929048684675,0.971526955822315,-1.20845600450699
|
||||
1.82,-0.246632309968834,0.969109128880456,-1.21574143884929
|
||||
1.83,-0.256310908227523,0.966594391833298,-1.22290530006082
|
||||
1.84,-0.26596387560898,0.963982996152448,-1.22994687176143
|
||||
1.85,-0.275590246824513,0.9612752029753,-1.23686544979981
|
||||
1.86,-0.285189059245021,0.958471283078914,-1.24366034232393
|
||||
1.87,-0.294759352997261,0.955571516852944,-1.2503308698502
|
||||
1.88,-0.304300171059833,0.952576194271595,-1.25687636533143
|
||||
1.89,-0.313810559358882,0.94948561486463,-1.26329617422351
|
||||
1.9,-0.323289566863503,0.946300087687414,-1.26958965455092
|
||||
1.91,-0.332736245680845,0.943019931290011,-1.27575617697086
|
||||
1.92,-0.342149651150898,0.939645473685325,-1.28179512483622
|
||||
1.93,-0.35152884194096,0.936177052316306,-1.28770589425727
|
||||
1.94,-0.360872880139767,0.9326150140222,-1.29348789416197
|
||||
1.95,-0.370180831351287,0.928959715003869,-1.29914054635516
|
||||
1.96,-0.379451764788155,0.925211520788168,-1.30466328557632
|
||||
1.97,-0.388684753364752,0.921370806191395,-1.31005555955615
|
||||
1.98,-0.397878873789916,0.91743795528181,-1.31531682907173
|
||||
1.99,-0.407033206659266,0.913413361341225,-1.32044656800049
|
||||
2,-0.416146836547142,0.909297426825682,-1.32544426337282
|
||||
2.01,-0.425218852098152,0.905090563325201,-1.33030941542335
|
||||
2.02,-0.4342483461183,0.900793191522627,-1.33504153764093
|
||||
2.03,-0.443234415665709,0.89640574115156,-1.33964015681727
|
||||
2.04,-0.452176162140912,0.89192865095338,-1.34410481309429
|
||||
2.05,-0.461072691376713,0.887362368633375,-1.34843506001009
|
||||
2.06,-0.469923113727602,0.882707350815974,-1.35263046454358
|
||||
2.07,-0.47872654415872,0.877964062999078,-1.3566906071578
|
||||
2.08,-0.487482102334359,0.873132979507516,-1.36061508184188
|
||||
2.09,-0.496188912705999,0.868214583445613,-1.36440349615161
|
||||
2.1,-0.504846104599857,0.863209366648874,-1.36805547124873
|
||||
2.11,-0.513452812303959,0.858117829634809,-1.37157064193877
|
||||
2.12,-0.522008175154707,0.852940481552876,-1.37494865670758
|
||||
2.13,-0.530511337622945,0.84767784013357,-1.37818917775651
|
||||
2.14,-0.538961449399512,0.842330431636646,-1.38129188103616
|
||||
2.15,-0.547357665480271,0.836898790798498,-1.38425645627877
|
||||
2.16,-0.555699146250613,0.831383460778683,-1.3870826070293
|
||||
2.17,-0.56398505756941,0.825784993105608,-1.38977005067502
|
||||
2.18,-0.572214570852437,0.820103947621374,-1.39231851847381
|
||||
2.19,-0.580386863155222,0.814340892425796,-1.39472775558102
|
||||
2.2,-0.588501117255346,0.80849640381959,-1.39699752107494
|
||||
2.21,-0.59655652173416,0.802571066246747,-1.39912758798091
|
||||
2.22,-0.60455227105793,0.796565472236087,-1.40111774329402
|
||||
2.23,-0.612487565658385,0.790480222342005,-1.40296778800039
|
||||
2.24,-0.62036161201268,0.78431592508442,-1.4046775370971
|
||||
2.25,-0.628173622722739,0.778073196887921,-1.40624681961066
|
||||
2.26,-0.635922816594002,0.771752662020126,-1.40767547861413
|
||||
2.27,-0.64360841871354,0.765354952529254,-1.40896337124279
|
||||
2.28,-0.651229660527545,0.758880708180922,-1.41011036870847
|
||||
2.29,-0.658785779918188,0.752330576394171,-1.41111635631236
|
||||
2.3,-0.666276021279824,0.74570521217672,-1.41198123345654
|
||||
2.31,-0.673699635594561,0.739005278059471,-1.41270491365403
|
||||
2.32,-0.681055880507152,0.732231444030252,-1.4132873245374
|
||||
2.33,-0.688344020399238,0.72538438746682,-1.41372840786606
|
||||
2.34,-0.695563326462902,0.718464793069126,-1.41402811953203
|
||||
2.35,-0.702713076773554,0.711473352790844,-1.4141864295644
|
||||
2.36,-0.70979255636212,0.704410765770176,-1.4142033221323
|
||||
2.37,-0.716801057286543,0.697277738259938,-1.41407879554648
|
||||
2.38,-0.723737878702569,0.690074983556936,-1.4138128622595
|
||||
2.39,-0.730602326933837,0.68280322193064,-1.41340554886448
|
||||
2.4,-0.737393715541245,0.675463180551151,-1.4128568960924
|
||||
2.41,-0.744111365391593,0.668055593416491,-1.41216695880808
|
||||
2.42,-0.750754604725491,0.660581201279201,-1.41133580600469
|
||||
2.43,-0.757322769224544,0.653040751572265,-1.41036352079681
|
||||
2.44,-0.763815202077774,0.645434998334371,-1.40925020041214
|
||||
2.45,-0.770231254047308,0.637764702134504,-1.40799595618181
|
||||
2.46,-0.776570283533293,0.630030629995892,-1.40660091352919
|
||||
2.47,-0.782831656638065,0.622233555319305,-1.40506521195737
|
||||
2.48,-0.789014747229531,0.614374257805712,-1.40338900503524
|
||||
2.49,-0.795118937003784,0.606453523378315,-1.4015724603821
|
||||
2.5,-0.801143615546934,0.598472144103956,-1.39961575965089
|
||||
2.51,-0.807088180396146,0.590430918113913,-1.39751909851006
|
||||
2.52,-0.81295203709989,0.582330649524082,-1.39528268662397
|
||||
2.53,-0.818734599277382,0.574172148354573,-1.39290674763195
|
||||
2.54,-0.824435288677222,0.565956230448703,-1.39039151912593
|
||||
2.55,-0.830053535235222,0.557683717391417,-1.38773725262664
|
||||
2.56,-0.835588777131408,0.549355436427127,-1.38494421355853
|
||||
2.57,-0.841040460846201,0.540972220376989,-1.38201268122319
|
||||
2.58,-0.846408041215776,0.532534907555621,-1.3789429487714
|
||||
2.59,-0.851690981486566,0.524044341687276,-1.37573532317384
|
||||
2.6,-0.856888753368947,0.515501371821464,-1.37239012519041
|
||||
2.61,-0.862000837090063,0.506906852248053,-1.36890768933812
|
||||
2.62,-0.867026721445803,0.498261642411839,-1.36528836385764
|
||||
2.63,-0.871965903851917,0.4895666068266,-1.36153251067852
|
||||
2.64,-0.876817890394281,0.480822614988648,-1.35764050538293
|
||||
2.65,-0.881582195878286,0.472030541289883,-1.35361273716817
|
||||
2.66,-0.886258343877352,0.463191264930345,-1.3494496088077
|
||||
2.67,-0.890845866780576,0.454305669830306,-1.34515153661088
|
||||
2.68,-0.895344305839492,0.445374644541871,-1.34071895038136
|
||||
2.69,-0.899753211213941,0.436399082160126,-1.33615229337407
|
||||
2.7,-0.904072142017061,0.42737988023383,-1.33145202225089
|
||||
2.71,-0.90830066635937,0.418317940675659,-1.32661860703503
|
||||
2.72,-0.912438361391958,0.409214169672017,-1.32165253106398
|
||||
2.73,-0.916484813348769,0.40006947759242,-1.31655429094119
|
||||
2.74,-0.920439617587981,0.390884778898452,-1.31132439648643
|
||||
2.75,-0.924302378632464,0.381660992052332,-1.3059633706848
|
||||
2.76,-0.928072710209333,0.372399039425056,-1.30047174963439
|
||||
2.77,-0.931750235288572,0.363099847204168,-1.29485008249274
|
||||
2.78,-0.935334586120739,0.353764345301143,-1.28909893142188
|
||||
2.79,-0.938825404273736,0.34439346725839,-1.28321887153213
|
||||
2.8,-0.942222340668658,0.334988150155905,-1.27721049082456
|
||||
2.81,-0.945525055614696,0.32554933451756,-1.27107439013226
|
||||
2.82,-0.948733218843107,0.316077964217054,-1.26481118306016
|
||||
2.83,-0.951846509540242,0.306574986383523,-1.25842149592377
|
||||
2.84,-0.954864616379626,0.297041351306832,-1.25190596768646
|
||||
2.85,-0.95778723755309,0.287478012342544,-1.24526524989563
|
||||
2.86,-0.960614080800952,0.277885925816587,-1.23850000661754
|
||||
2.87,-0.963344863441243,0.268266050929618,-1.23161091437086
|
||||
2.88,-0.965979312397975,0.258619349661111,-1.22459866205909
|
||||
2.89,-0.968517164228447,0.248946786673153,-1.2174639509016
|
||||
2.9,-0.970958165149591,0.239249329213982,-1.21020749436357
|
||||
2.91,-0.973302071063349,0.229527947021264,-1.20283001808461
|
||||
2.92,-0.975548647581083,0.219783612225117,-1.1953322598062
|
||||
2.93,-0.977697670047013,0.210017299250899,-1.18771496929791
|
||||
2.94,-0.979748923560684,0.200229984721771,-1.17997890828245
|
||||
2.95,-0.981702202998454,0.190422647361027,-1.17212485035948
|
||||
2.96,-0.983557313034006,0.180596267894233,-1.16415358092824
|
||||
2.97,-0.985314068157884,0.170751828951145,-1.15606589710903
|
||||
2.98,-0.986972292696038,0.160890314967456,-1.14786260766349
|
||||
2.99,-0.988531820827396,0.151012712086344,-1.13954453291374
|
||||
3,-0.989992496600445,0.141120008059867,-1.13111250466031
|
||||
3.01,-0.991354173948826,0.131213192150184,-1.12256736609901
|
||||
3.02,-0.992616716705937,0.12129325503063,-1.11390997173657
|
||||
3.03,-0.993779998618556,0.11136118868665,-1.10514118730521
|
||||
3.04,-0.994843903359459,0.101417986316602,-1.09626188967606
|
||||
3.05,-0.995808324539061,0.0914646422324372,-1.0872729667715
|
||||
3.06,-0.996673165716047,0.0815021517602691,-1.07817531747632
|
||||
3.07,-0.997438340407019,0.0715315111408437,-1.06896985154786
|
||||
3.08,-0.998103772095146,0.0615537174299131,-1.05965748952506
|
||||
3.09,-0.998669394237814,0.0515697683985346,-1.05023916263635
|
||||
3.1,-0.999135150273279,0.0415806624332905,-1.04071581270657
|
||||
3.11,-0.999500993626328,0.0315873984364539,-1.03108839206278
|
||||
3.12,-0.999766887712928,0.021590975726096,-1.02135786343902
|
||||
3.13,-0.999932805943894,0.0115923939361583,-1.01152519988005
|
||||
3.14,-0.99999873172754,0.00159265291648683,-1.00159138464403
|
||||
3.15,-0.999964658471342,-0.00840724736714862,-0.991557411104193
|
||||
3.16,-0.999830589582598,-0.0184063069330538,-0.981424282649545
|
||||
3.17,-0.999596538468086,-0.0284035258836038,-0.971193012584482
|
||||
3.18,-0.999262528532721,-0.0383979045052354,-0.960864624027486
|
||||
3.19,-0.998828593177219,-0.0483884433684141,-0.950440149808804
|
||||
3.2,-0.998294775794753,-0.0583741434275801,-0.939920632367173
|
||||
3.21,-0.997661129766618,-0.0683540061210478,-0.92930712364557
|
||||
3.22,-0.996927718456887,-0.0783270334708653,-0.918600684986022
|
||||
3.23,-0.996094615206081,-0.0882922281826076,-0.907802387023473
|
||||
3.24,-0.99516190332383,-0.0982485937451087,-0.896913309578722
|
||||
3.25,-0.994129676080546,-0.108195134530108,-0.885934541550438
|
||||
3.26,-0.992998036698093,-0.118130855891817,-0.874867180806275
|
||||
3.27,-0.991767098339465,-0.12805476426638,-0.863712334073085
|
||||
3.28,-0.990436984097473,-0.137965867271227,-0.852471116826246
|
||||
3.29,-0.989007826982433,-0.147863173804319,-0.841144653178114
|
||||
3.3,-0.987479769908865,-0.157745694143248,-0.829734075765617
|
||||
3.31,-0.985852965681203,-0.167612440044218,-0.818240525636985
|
||||
3.32,-0.984127576978514,-0.17746242484086,-0.806665152137654
|
||||
3.33,-0.982303776338232,-0.187294663542903,-0.795009112795328
|
||||
3.34,-0.980381746138899,-0.19710817293467,-0.783273573204229
|
||||
3.35,-0.978361678581934,-0.2069019716734,-0.771459706908534
|
||||
3.36,-0.97624377567241,-0.21667508038738,-0.75956869528503
|
||||
3.37,-0.974028249198852,-0.226426521773883,-0.747601727424969
|
||||
3.38,-0.971715320712062,-0.236155320696897,-0.735560000015165
|
||||
3.39,-0.969305221502961,-0.245860504284637,-0.723444717218324
|
||||
3.4,-0.966798192579461,-0.255541102026831,-0.71125709055263
|
||||
3.41,-0.964194484642366,-0.265196145871773,-0.698998338770592
|
||||
3.42,-0.961494358060299,-0.274824670323124,-0.686669687737175
|
||||
3.43,-0.958698082843669,-0.284425712536463,-0.674272370307206
|
||||
3.44,-0.955805938617666,-0.293998312415568,-0.661807626202099
|
||||
3.45,-0.952818214594305,-0.303541512708429,-0.649276701885875
|
||||
3.46,-0.949735209543496,-0.31305435910297,-0.636680850440526
|
||||
3.47,-0.946557231763177,-0.322535900322479,-0.624021331440697
|
||||
3.48,-0.943284599048476,-0.331985188220734,-0.611299410827742
|
||||
3.49,-0.939917638659938,-0.341401277876821,-0.598516360783117
|
||||
3.5,-0.936456687290796,-0.35078322768962,-0.585673459601177
|
||||
3.51,-0.932902091033304,-0.360130099471968,-0.572771991561335
|
||||
3.52,-0.929254205344123,-0.369440958544477,-0.559813246799646
|
||||
3.53,-0.925513395008784,-0.378714873828998,-0.546798521179787
|
||||
3.54,-0.921680034105203,-0.38795091794173,-0.533729116163473
|
||||
3.55,-0.917754505966276,-0.39714816728596,-0.520606338680316
|
||||
3.56,-0.913737203141545,-0.406305702144417,-0.507431500997128
|
||||
3.57,-0.909628527357945,-0.415422606771246,-0.494205920586699
|
||||
3.58,-0.90542888947963,-0.424497969483583,-0.480930919996047
|
||||
3.59,-0.901138709466889,-0.433530882752718,-0.467607826714171
|
||||
3.6,-0.896758416334147,-0.442520443294852,-0.454237973039295
|
||||
3.61,-0.892288448107068,-0.451465752161423,-0.440822695945645
|
||||
3.62,-0.88772925177875,-0.460365914828998,-0.427363336949752
|
||||
3.63,-0.883081283265026,-0.469220041288727,-0.413861241976299
|
||||
3.64,-0.878345007358874,-0.478027246135343,-0.400317761223531
|
||||
3.65,-0.873520897683938,-0.486786648655699,-0.386734249028238
|
||||
3.66,-0.868609436647165,-0.495497372916845,-0.37311206373032
|
||||
3.67,-0.863611115390566,-0.504158547853611,-0.359452567536955
|
||||
3.68,-0.858526433742102,-0.512769307355724,-0.345757126386378
|
||||
3.69,-0.853355900165699,-0.521328790354406,-0.332027109811293
|
||||
3.7,-0.848100031710408,-0.529836140908493,-0.318263890801915
|
||||
3.71,-0.842759353958694,-0.538290508290018,-0.304468845668676
|
||||
3.72,-0.83733440097388,-0.546691047069287,-0.290643353904593
|
||||
3.73,-0.831825715246746,-0.555036917199424,-0.276788798047322
|
||||
3.74,-0.826233847641272,-0.56332728410037,-0.262906563540902
|
||||
3.75,-0.820559357339561,-0.571561318742344,-0.248998038597217
|
||||
3.76,-0.814802811785913,-0.579738197728743,-0.23506461405717
|
||||
3.77,-0.808964786630086,-0.587857103378483,-0.221107683251603
|
||||
3.78,-0.803045865669731,-0.595917223807764,-0.207128641861967
|
||||
3.79,-0.797046640792012,-0.603917753011261,-0.193128887780751
|
||||
3.8,-0.790967711914417,-0.611857890942719,-0.179109820971698
|
||||
3.81,-0.784809686924768,-0.619736843594963,-0.165072843329805
|
||||
3.82,-0.778573181620433,-0.627553823079293,-0.151019358541139
|
||||
3.83,-0.772258819646744,-0.635308047704276,-0.136950771942468
|
||||
3.84,-0.765867232434637,-0.642998742053909,-0.122868490380729
|
||||
3.85,-0.759399059137508,-0.650625137065167,-0.108773922072341
|
||||
3.86,-0.752854946567295,-0.658186470104905,-0.0946684764623904
|
||||
3.87,-0.746235549129803,-0.665681985046119,-0.0805535640836836
|
||||
3.88,-0.739541528759258,-0.673110932343562,-0.0664305964156968
|
||||
3.89,-0.73277355485212,-0.680472569108694,-0.0523009857434265
|
||||
3.9,-0.72593230420014,-0.687766159183974,-0.0381661450161664
|
||||
3.91,-0.719018460922681,-0.694990973216472,-0.0240274877062091
|
||||
3.92,-0.71203271639831,-0.702146288730805,-0.0098864276675048
|
||||
3.93,-0.704975769195658,-0.709231390201386,0.00425562100572829
|
||||
3.94,-0.697848325003564,-0.716245569123971,0.0183972441204067
|
||||
3.95,-0.690651096560508,-0.723188124086512,0.0325370275260045
|
||||
3.96,-0.683384803583336,-0.7300583608393,0.0466735572559632
|
||||
3.97,-0.676050172695292,-0.736855592364383,0.0608054196690916
|
||||
3.98,-0.668647937353351,-0.743579138944275,0.0749312015909233
|
||||
3.99,-0.66117883777488,-0.750228328229919,0.089049490455039
|
||||
4,-0.653643620863612,-0.756802495307928,0.103158874444316
|
||||
4.01,-0.646043040134959,-0.763300982767073,0.117257942632115
|
||||
4.02,-0.63837785564066,-0.769723140764024,0.131345285123364
|
||||
4.03,-0.630648833892775,-0.776068327088332,0.145419493195557
|
||||
4.04,-0.622856747787041,-0.782335907226653,0.159479159439611
|
||||
4.05,-0.615002376525574,-0.788525254426195,0.17352287790062
|
||||
4.06,-0.607086505538955,-0.794635749757397,0.187549244218442
|
||||
4.07,-0.599109926407685,-0.800666782175818,0.201556855768133
|
||||
4.08,-0.591073436783031,-0.806617748583241,0.215544311800209
|
||||
4.09,-0.582977840307259,-0.812488053887984,0.229510213580725
|
||||
4.1,-0.574823946533269,-0.81827711106441,0.243453164531141
|
||||
4.11,-0.566612570843644,-0.823984341211626,0.257371770367982
|
||||
4.12,-0.55834453436911,-0.829609173611371,0.271264639242261
|
||||
4.13,-0.550020663906425,-0.835151045785093,0.285130381878668
|
||||
4.14,-0.541641791835699,-0.840609403550195,0.298967611714496
|
||||
4.15,-0.533208756037154,-0.845983701075447,0.312774945038292
|
||||
4.16,-0.524722399807346,-0.851273400935574,0.326551001128228
|
||||
4.17,-0.516183571774825,-0.856477974165001,0.340294402390176
|
||||
4.18,-0.507593125815277,-0.86159690031074,0.354003774495463
|
||||
4.19,-0.49895192096614,-0.866629667484444,0.367677746518304
|
||||
4.2,-0.490260821340699,-0.871575772413588,0.381314951072889
|
||||
4.21,-0.481520696041674,-0.876434720491801,0.394914024450128
|
||||
4.22,-0.47273241907431,-0.881206025828325,0.408473606754015
|
||||
4.23,-0.46389686925898,-0.885889211296603,0.421992342037623
|
||||
4.24,-0.455014930143305,-0.890483808581989,0.435468878438684
|
||||
4.25,-0.446087489913793,-0.894989358228583,0.448901868314791
|
||||
4.26,-0.437115441307028,-0.899405409685178,0.46228996837815
|
||||
4.27,-0.428099681520394,-0.903731521350305,0.475631839829911
|
||||
4.28,-0.419041112122356,-0.907967260616405,0.48892614849405
|
||||
4.29,-0.409940638962306,-0.91211220391308,0.502171564950775
|
||||
4.3,-0.400799172079975,-0.916165936749455,0.51536676466948
|
||||
4.31,-0.391617625614436,-0.920128053755624,0.528510428141188
|
||||
4.32,-0.38239691771268,-0.923998158723188,0.541601241010508
|
||||
4.33,-0.373137970437818,-0.927775864644875,0.554637894207058
|
||||
4.34,-0.363841709676858,-0.931460793753243,0.567619084076384
|
||||
4.35,-0.354509065048132,-0.935052577558449,0.580543512510317
|
||||
4.36,-0.345140969808323,-0.938550856885108,0.593409887076785
|
||||
4.37,-0.335738360759151,-0.941955281908201,0.60621692114905
|
||||
|
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="../../Ext/rickshaw/rickshaw.min.css" rel="stylesheet" >
|
||||
<link href="vtkweb-widget-chart.css" rel="stylesheet" >
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
||||
<script type="text/javascript" src="../../Ext/d3/d3.v2.js"></script>
|
||||
<script type="text/javascript" src="../../Ext/rickshaw/rickshaw.js"></script>
|
||||
<script type="text/javascript" src="vtkweb-widget-chart.js"></script>
|
||||
<style type="text/css">
|
||||
.vtk-chart .vtk-annotation {
|
||||
bottom: 25px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="chart-container" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$("#chart-container").vtkChart({
|
||||
'renderer': 'line',
|
||||
'series': [
|
||||
{
|
||||
data: [ { x:0, y:0 }, { x:100, y:10 }, { x:200, y:5 }, { x:300, y:20 }, { x:400, y:25 }, { x:1000, y:-10 } ],
|
||||
color: 'steelblue',
|
||||
name: 'seb'
|
||||
},{
|
||||
data: [ { x:0, y:20 }, { x:100, y:30 }, { x:200, y:25 }, { x:300, y:40 }, { x:400, y:55 }, { x:1000, y:-10 } ],
|
||||
color: 'lightblue',
|
||||
name: 'seb20'
|
||||
}
|
||||
],
|
||||
'axes': [ "bottom", "left", "top"],
|
||||
'chart-padding': [0, 150, 50, 0],
|
||||
'annotations': [
|
||||
{time:0, message: "Start"},
|
||||
{time:400, message: "Stop"},
|
||||
{time:200, message: "Middle"},
|
||||
{time: 150, message: "Just in between for the fun with lot of text that should not fit."}
|
||||
]
|
||||
});
|
||||
|
||||
var dataIdx = 0,
|
||||
palette = new Rickshaw.Color.Palette(),
|
||||
dataList = [
|
||||
{url:"single.csv", type: 'csv-xy', options: { color: palette.color(), name: "AAA"}, replace: true },
|
||||
{url:"single2.csv", type: 'csv-xy', options: { color: palette.color(), name: "BBB"}},
|
||||
{url:"multi.csv", type: 'csv-x*', options: {x: 'x'}, replace: true }
|
||||
];
|
||||
|
||||
setInterval(function(){
|
||||
dataIdx = (dataIdx + 1) % dataList.length;
|
||||
$("#chart-container").vtkChartFetchData(dataList[dataIdx]);
|
||||
}, 2000);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1001
ParaView-5.0.1/VTK/Web/JavaScript/Widgets/ChartWidget/single.csv
Normal file
1001
ParaView-5.0.1/VTK/Web/JavaScript/Widgets/ChartWidget/single.csv
Normal file
File diff suppressed because it is too large
Load Diff
1001
ParaView-5.0.1/VTK/Web/JavaScript/Widgets/ChartWidget/single2.csv
Normal file
1001
ParaView-5.0.1/VTK/Web/JavaScript/Widgets/ChartWidget/single2.csv
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
||||
.vtk-chart {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtk-chart > div {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vtk-chart .vtk-legend {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.vtk-chart .vtk-bottom .vtk-top .vtk-left .vtk-right {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vtk-chart .vtk-annotation {
|
||||
}
|
||||
@ -0,0 +1,441 @@
|
||||
/**
|
||||
* VTK-Web Widget Library.
|
||||
*
|
||||
* This module extend jQuery object to add support for graphical components
|
||||
* related to 2D chart visualization. This widget depends on D3 and Rickshaw.
|
||||
*
|
||||
* @class jQuery.vtk.ui.Chart
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
// =======================================================================
|
||||
// ==== Defaults constant values =========================================
|
||||
// =======================================================================
|
||||
var GRAPH_HTML_TEMPLATE = [
|
||||
"<div class='vtk-legend'></div>",
|
||||
"<div class='vtk-top' style='left: AXIS_SIZE px; top: 0px; height: AXIS_SIZE px; position: absolute;'></div>",
|
||||
"<div class='vtk-left' style='left: 0 px; top: AXIS_SIZE px; width: AXIS_SIZE px; position: absolute;'></div>",
|
||||
"<div class='vtk-center' style='left: AXIS_SIZE px; top: AXIS_SIZE px; position: relative;'></div>",
|
||||
"<div class='vtk-right' style='right: 0px; top: AXIS_SIZE px; position: absolute;'></div>",
|
||||
"<div class='vtk-bottom' style='left: AXIS_SIZE px; bottom: 0px; position: absolute;'></div>",
|
||||
"<div class='vtk-annotation' style='left: AXIS_SIZE px; bottom: 0px; position: absolute;'></div>"
|
||||
];
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function toNumber(str) {
|
||||
return Number(str.replace(/^\s+|\s+$/g, ''));
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function extractColumnHeaderMap(headerLine) {
|
||||
var header = headerLine.split(','),
|
||||
colIdxMap = {};
|
||||
for(var idx in header) {
|
||||
colIdxMap[header[idx]] = idx;
|
||||
}
|
||||
return colIdxMap;
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function singleDataCSVConverter(inputString, outputSeries, options) {
|
||||
var lines = inputString.split('\n'),
|
||||
data = [],
|
||||
serie = $.extend({data:data}, options),
|
||||
nbLines = lines.length;
|
||||
|
||||
// Process data
|
||||
for(var i = 1; i < nbLines; ++i) {
|
||||
var values = lines[i].split(',');
|
||||
if(values.length === 2) {
|
||||
item = { x: toNumber(values[0]), y: toNumber(values[1]) };
|
||||
if(isNaN(item.y)) {
|
||||
item.y = null;
|
||||
}
|
||||
data.push(item);
|
||||
}
|
||||
}
|
||||
outputSeries.push(serie);
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function multiDataCSVConverter(inputString, outputSeries, options) {
|
||||
var lines = inputString.split('\n'),
|
||||
header = lines[0].split(','),
|
||||
headerMap = extractColumnHeaderMap(lines[0]),
|
||||
nbLines = lines.length,
|
||||
nbValuesByLines = header.length,
|
||||
xHeaderName = options['x'],
|
||||
xIdx = headerMap[xHeaderName],
|
||||
series = [],
|
||||
palette = new Rickshaw.Color.Palette();
|
||||
|
||||
if(options.hasOwnProperty('palette') && options['palette'] !== null) {
|
||||
palette = options['palette'];
|
||||
}
|
||||
|
||||
// Remove time field
|
||||
header.splice(header.indexOf(xHeaderName), 1);
|
||||
|
||||
// Create series
|
||||
for(var idx in header) {
|
||||
var serie = {
|
||||
data: [],
|
||||
color: palette.color(),
|
||||
name: header[idx]
|
||||
};
|
||||
|
||||
series.push(serie);
|
||||
outputSeries.push(serie);
|
||||
}
|
||||
|
||||
// Process data
|
||||
for(var i = 1; i < nbLines; ++i) {
|
||||
var values = lines[i].split(',');
|
||||
if(values.length === nbValuesByLines) {
|
||||
xValue = toNumber(values[xIdx]);
|
||||
for(var idx in header) {
|
||||
var item = { x: xValue, y: toNumber(values[headerMap[header[idx]]])};
|
||||
if(isNaN(item.y)) {
|
||||
item.y = null;
|
||||
}
|
||||
if(!isNaN(item.x)) {
|
||||
series[idx].data.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function updateLegend(container) {
|
||||
var legendContainer = $('.vtk-legend', container),
|
||||
chart = container.data('chart'),
|
||||
legend = chart['legends'].basic;
|
||||
|
||||
// Empty UI
|
||||
legendContainer.children("ul").empty();
|
||||
|
||||
// Update model
|
||||
if(legend !== undefined) {
|
||||
legend.lines = [];
|
||||
var series = chart.graph.series.map( function(s) { return s } )
|
||||
series.forEach(function(s) {
|
||||
legend.addLine(s);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
/**
|
||||
* Method used to create a 2D chart based on some available data.
|
||||
*
|
||||
* @member jQuery.vtk.ui.Chart
|
||||
* @method vtkChart
|
||||
* @param {Object} configuration
|
||||
*
|
||||
* Usage:
|
||||
* var options = {
|
||||
* 'renderer': 'line', // Type of chart [line, area, bar, scatterplot]
|
||||
* 'stacked' : false,
|
||||
* 'series': [
|
||||
* {
|
||||
* data: [ { x:0, y:0 }, { x:100, y:10 }, { x:200, y:5 }, { x:300, y:20 }, { x:400, y:25 }, { x:1000, y:-10 } ],
|
||||
* color: 'steelblue',
|
||||
* name: 'field 0'
|
||||
* },{
|
||||
* data: [ { x:0, y:20 }, { x:100, y:30 }, { x:200, y:25 }, { x:300, y:40 }, { x:400, y:55 }, { x:1000, y:-10 } ],
|
||||
* color: 'lightblue',
|
||||
* name: 'field 1'
|
||||
* }
|
||||
* ],
|
||||
* 'axes': [ "bottom", "left", "top"], // Draw axis on border with scale
|
||||
* 'chart-padding': [0, 150, 50, 0], // Graph padding [top, right, bottom, left] in px. Useful to save space for legend
|
||||
* };
|
||||
*
|
||||
* $('.chart-container-div').vtkChart(options);
|
||||
*/
|
||||
|
||||
$.fn.vtkChart = function(options) {
|
||||
// Handle data with default values
|
||||
var opts = $.extend({},$.fn.vtkChart.defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-chart'),
|
||||
container = $("<div/>", {
|
||||
html: GRAPH_HTML_TEMPLATE.join('').replace(/AXIS_SIZE /g, opts.axisThickness)
|
||||
}),
|
||||
chartContainer = $('.vtk-center', container),
|
||||
legendContainer = $('.vtk-legend', container),
|
||||
axisContainer = {
|
||||
bottom: $('.vtk-bottom', container)[0],
|
||||
top: $('.vtk-top', container)[0],
|
||||
left: $('.vtk-left', container)[0],
|
||||
right: $('.vtk-right', container)[0]
|
||||
},
|
||||
annotationContainer = $('.vtk-annotation', container);
|
||||
me.append(container);
|
||||
// container.css('width', (opts['width']+(2*opts.axisThickness)) + 'px');
|
||||
|
||||
var graphOptions = {
|
||||
element: chartContainer[0],
|
||||
width: opts['width'],
|
||||
height: opts['height'],
|
||||
renderer: opts['renderer'],
|
||||
min: 'auto',
|
||||
stroke: true,
|
||||
series: opts['series']
|
||||
},
|
||||
graph = new Rickshaw.Graph(graphOptions),
|
||||
axes = [],
|
||||
legends = {},
|
||||
annotator = null,
|
||||
data = {
|
||||
configuration: graphOptions,
|
||||
options: opts,
|
||||
palette: new Rickshaw.Color.Palette(),
|
||||
graph: graph,
|
||||
axes: axes,
|
||||
legends: legends
|
||||
};
|
||||
|
||||
graph.renderer.unstack = !opts.stacked;
|
||||
graph.render();
|
||||
|
||||
// Complete graph accessories
|
||||
// => Axis
|
||||
for(var idx in opts.axes) {
|
||||
var orientation = opts.axes[idx], axis = null;
|
||||
if(orientation === 'top' || orientation === 'bottom') {
|
||||
axis = new Rickshaw.Graph.Axis.X({graph: graph, orientation: orientation, element: axisContainer[orientation]});
|
||||
} else {
|
||||
axis = new Rickshaw.Graph.Axis.Y({graph: graph, orientation: orientation, element: axisContainer[orientation]});
|
||||
}
|
||||
axes.push(axis);
|
||||
}
|
||||
// => Legend
|
||||
if(opts.legend.basic) {
|
||||
legends['basic'] = new Rickshaw.Graph.Legend({graph: graph, element: legendContainer[0]});
|
||||
// if(opts.legend.toggle) {
|
||||
// legends['toggle'] = new Rickshaw.Graph.Behavior.Series.Toggle({graph: graph, legend: legends['basic']});
|
||||
// }
|
||||
// if(opts.legend.highlight) {
|
||||
// legends['highlight'] = new Rickshaw.Graph.Behavior.Series.Highlight({graph: graph, legend: legends['basic']});
|
||||
// }
|
||||
}
|
||||
// => Hover
|
||||
if(opts.hover !== null) {
|
||||
data['hover'] = new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph,
|
||||
xFormatter: opts.hover.xFormatter,
|
||||
yFormatter: opts.hover.yFormatter
|
||||
});
|
||||
}
|
||||
// => Annotation
|
||||
data['annotator'] = new Rickshaw.Graph.Annotate({
|
||||
graph: graph,
|
||||
element: annotationContainer[0]
|
||||
});
|
||||
for(var idx in opts.annotations) {
|
||||
var annotation = opts.annotations[idx];
|
||||
data['annotator'].add(annotation['time'], annotation['message']);
|
||||
}
|
||||
|
||||
// Handle auto-resize
|
||||
if(opts.autosize) {
|
||||
function autoResize() {
|
||||
var w = $(window),
|
||||
padding = opts['chart-padding'],
|
||||
thickness = opts.axisThickness,
|
||||
size = { width: me.width() - (2*thickness) - (padding[1] + padding[3]), height: me.height() - (2*thickness) - (padding[0] + padding[2])};
|
||||
$('.vtk-bottom, .vtk-top, .vtk-annotation', me).css('height', thickness +'px').css('width', size['width'] +'px');
|
||||
$('.vtk-left, .vtk-right', me).css('width', thickness +'px').css('height', size['height'] +'px');
|
||||
$('.vtk-right', me).css('right', padding[1] + 'px').css('top', (padding[0] + thickness) + 'px');
|
||||
$('.vtk-left', me).css('left', padding[3] + 'px').css('top', (padding[0] + thickness) + 'px');
|
||||
$('.vtk-top', me).css('top', padding[0] + 'px').css('left', (thickness+padding[3]) + 'px');
|
||||
$('.vtk-bottom, .vtk-annotation', me).css('left', (thickness+padding[3]) + 'px');
|
||||
$('.vtk-bottom', me).css('bottom', padding[2] + 'px');
|
||||
$('.vtk-center', me).css('width', (size['width'] - 2*thickness - (padding[1] + padding[3]))+'px').css('height', (size['height'] - 2*thickness - (padding[0] + padding[2]))+'px').css('left', (padding[3]+thickness) + 'px').css('top', (padding[0]+thickness) + 'px');
|
||||
|
||||
data.graph.configure(size);
|
||||
data.graph.update();
|
||||
}
|
||||
|
||||
$(window).resize(autoResize).trigger('resize');
|
||||
}
|
||||
|
||||
// Save data
|
||||
me.data('chart', data);
|
||||
graph.render();
|
||||
});
|
||||
};
|
||||
|
||||
// =======================================================================
|
||||
/**
|
||||
* Method used to update the data of the 2D chart.
|
||||
*
|
||||
* @member jQuery.vtk.ui.Chart
|
||||
* @method vtkChartUpdateData
|
||||
* @param {Array} series
|
||||
* @param {boolean} replace previous series
|
||||
*
|
||||
* Usage:
|
||||
* var series: [
|
||||
* {
|
||||
* data: [ { x:0, y:0 }, { x:100, y:10 }, { x:200, y:5 }, { x:300, y:20 }, { x:400, y:25 }, { x:1000, y:-10 } ],
|
||||
* color: 'steelblue',
|
||||
* name: 'field 0'
|
||||
* },{
|
||||
* data: [ { x:0, y:20 }, { x:100, y:30 }, { x:200, y:25 }, { x:300, y:40 }, { x:400, y:55 }, { x:1000, y:-10 } ],
|
||||
* color: 'lightblue',
|
||||
* name: 'field 1'
|
||||
* }
|
||||
* ];
|
||||
*
|
||||
* $('.chart-container-div').vtkChartUpdateData(series);
|
||||
*/
|
||||
$.fn.vtkChartUpdateData = function(series, replace) {
|
||||
return this.each(function() {
|
||||
var me = $(this),
|
||||
data = me.data('chart'),
|
||||
dataset = data['configuration']['series'];
|
||||
if(replace) {
|
||||
while(dataset.length > 0) {
|
||||
dataset.pop();
|
||||
}
|
||||
}
|
||||
for(var idx in series) {
|
||||
data.graph.series.push(series[idx]);
|
||||
}
|
||||
data.graph.validateSeries(data.graph.series);
|
||||
data.graph.update();
|
||||
updateLegend(me);
|
||||
});
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
/**
|
||||
* Method used to update the data of the 2D chart.
|
||||
*
|
||||
* @member jQuery.vtk.ui.Chart
|
||||
* @method vtkChartFetchData
|
||||
* @param {Object} options
|
||||
*
|
||||
* Usage:
|
||||
* var options_json = { replace: true, url: "data.json", type: 'json', converter: null };
|
||||
* var options_csv_1 = { replace: true, url: "data1.csv", type: 'csv-xy', options: { name: 'Temperature', color: palette.color(), ... } };
|
||||
* var options_csv_n = { replace: true, url: "data2.csv", type: 'csv-x*', options: { x: 'time', palette: null } };
|
||||
*
|
||||
* $('.chart-container-div').vtkChartFetchData(options_*);
|
||||
*
|
||||
* Where data looks like:
|
||||
*
|
||||
* data.json
|
||||
* [
|
||||
* {
|
||||
* data: [ { x:0, y:0 }, { x:100, y:10 }, { x:200, y:5 }, { x:300, y:20 }, { x:400, y:25 }, { x:1000, y:-10 } ],
|
||||
* color: 'steelblue',
|
||||
* name: 'field 0'
|
||||
* },{
|
||||
* data: [ { x:0, y:20 }, { x:100, y:30 }, { x:200, y:25 }, { x:300, y:40 }, { x:400, y:55 }, { x:1000, y:-10 } ],
|
||||
* color: 'lightblue',
|
||||
* name: 'field 1'
|
||||
* }
|
||||
* ]
|
||||
*
|
||||
*
|
||||
* data1.csv
|
||||
* x,y
|
||||
* 0,0
|
||||
* 1,0.234
|
||||
* 2,0.5
|
||||
* 2.5,7
|
||||
*
|
||||
*
|
||||
* data2.csv
|
||||
* time,x,y,z
|
||||
* 0,0,0,0
|
||||
* 1,0.234,1.2,7.6
|
||||
* 2,0.5,3,6
|
||||
* 2.5,7,8,9
|
||||
*/
|
||||
$.fn.vtkChartFetchData = function(info) {
|
||||
return this.each(function() {
|
||||
var me = $(this),
|
||||
data = me.data('chart'),
|
||||
options = info['options'];
|
||||
|
||||
$.ajax({
|
||||
url: info.url,
|
||||
dataType: "text"
|
||||
}).done(function(data){
|
||||
var series = [];
|
||||
if (info.type === 'json') {
|
||||
series = $.parseJSON(data);
|
||||
} else if(info.type === 'csv-xy') {
|
||||
singleDataCSVConverter(data, series, options);
|
||||
} else if(info.type === 'csv-x*') {
|
||||
multiDataCSVConverter(data, series, options);
|
||||
}
|
||||
me.vtkChartUpdateData(series, info['replace']);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
/**
|
||||
* Method used to update the data of the 2D chart.
|
||||
*
|
||||
* @member jQuery.vtk.ui.Chart
|
||||
* @method vtkChartConfigure
|
||||
* @param {Object} options
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* var options = {
|
||||
* 'renderer': 'line', // Type of chart [line, area, bar, scatterplot]
|
||||
* 'stacked' : false,
|
||||
* 'axes': [ "bottom", "left", "top"], // Draw axis on border with scale
|
||||
* 'chart-padding': [0, 150, 50, 0], // Graph padding [top, right, bottom, left] in px. Useful to save space for legend
|
||||
* };
|
||||
* $('.chart-container-div').vtkChartConfigure(options);
|
||||
*/
|
||||
|
||||
$.fn.vtkChartConfigure = function(conf) {
|
||||
return this.each(function() {
|
||||
var me = $(this),
|
||||
data = me.data('chart');
|
||||
var opts = $.extend(data['options']['configuration'], conf);
|
||||
$('.x_axis_d3', me).height(data.axisThickness + 'px').width(($(window).width()-(2*data.axisThickness)) + 'px');
|
||||
data.graph.configure(opts);
|
||||
data.graph.update();
|
||||
});
|
||||
};
|
||||
|
||||
// =======================================================================
|
||||
|
||||
$.fn.vtkChart.defaults = {
|
||||
width: 300,
|
||||
height: 200,
|
||||
axisThickness: 25,
|
||||
autosize: true,
|
||||
stacked: false,
|
||||
renderer: "line",
|
||||
interpolation: "linear",
|
||||
series: [],
|
||||
hover: { xFormatter: function(x) { return x; }, yFormatter: function(y) {return y;} },
|
||||
legend: { basic: true, toggle: true, highlight: true },
|
||||
annotations: [], // { time: 0, message: "Just a text" } ...
|
||||
axes: [ "bottom", "left" ],
|
||||
'chart-padding': [0, 0, 0, 0]
|
||||
};
|
||||
|
||||
// =======================================================================
|
||||
|
||||
}(jQuery));
|
||||
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="vtkweb-widget-filebrowser.css" rel="stylesheet" >
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
||||
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"></script>
|
||||
<script type="text/javascript" src="vtkweb-widget-filebrowser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- This should be automatically filled by the vtk loader : BEGUIN -->
|
||||
<div id='vtk-templates' style="display: none;">
|
||||
<div class='vtkweb-widget-filebrowser'>
|
||||
<div>
|
||||
<div class="vtk-directory">
|
||||
<div class="vtk-label">
|
||||
</div>
|
||||
<div>
|
||||
<ul type='path'><li class="vtk-path action"><div/></li></ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul type='dir'><li class="vtk-dirs action"><div/></li></ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul type='files'><li class="vtk-files action"><div/></li></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- This should be automatically filled by the vtk loader : END -->
|
||||
|
||||
|
||||
<div id="file-browser" style="position: relative; width: 10%; background-color: #eee;"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var fileTree = [
|
||||
{ 'label': 'Root', 'path': ['Root'], 'files': [
|
||||
{'label': 'can.ex2', 'size': 2345},
|
||||
{'label': 'diskout.ex2', 'size': 23345},
|
||||
], 'dirs': ['Cosmo', 'Ensight']},
|
||||
{ 'label': 'Cosmo',
|
||||
'path': ['Root','Cosmo'],
|
||||
'files': [
|
||||
{'label': 'can.ex2', 'size': 2345},
|
||||
{'label': 'diskout.ex2', 'size': 23345},
|
||||
],
|
||||
'dirs': ['a','b','c'] },
|
||||
{ 'label': 'Ensight',
|
||||
'path': ['Root','Ensight'],
|
||||
'files': [
|
||||
{'label': 'can.case', 'size': 2345},
|
||||
{'label': 'diskout.case', 'size': 23345},
|
||||
],
|
||||
'dirs': [] },
|
||||
{ 'label': 'a',
|
||||
'path': ['Root','Cosmo', 'a'],
|
||||
'files': [
|
||||
{'label': 'x', 'size': 2345},
|
||||
{'label': 'y', 'size': 23345},
|
||||
],
|
||||
'dirs': []}
|
||||
];
|
||||
|
||||
$("#file-browser").fileBrowser({ data: fileTree }).bind('file-click directory-click directory-not-found', function(e){
|
||||
alert(e.type + " click: " + e.name + " - path: " + e.path );
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 393 B |
Binary file not shown.
|
After Width: | Height: | Size: 614 B |
Binary file not shown.
|
After Width: | Height: | Size: 463 B |
@ -0,0 +1,61 @@
|
||||
.vtk-directory {
|
||||
display:none;
|
||||
}
|
||||
.vtk-directory .vtk-label {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.vtk-directory.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vtk-directory ul[data=path] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vtk-directory li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vtk-directory ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vtk-directory ul[data=path] li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vtk-directory ul[data=path] li div:before {
|
||||
content: "/";
|
||||
padding-right: 2px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.vtk-directory ul[data=dir] li div:before {
|
||||
content: url('resources/folder.png');
|
||||
padding-right: 4px;
|
||||
padding-left: 2px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.vtk-directory ul[data=groups] li div:before {
|
||||
content: url('resources/gfile.png');
|
||||
padding-right: 4px;
|
||||
padding-left: 2px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.vtk-directory ul[data=files] li div:before {
|
||||
content: url('resources/file.png');
|
||||
padding-right: 4px;
|
||||
padding-left: 2px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.vtk-directory .action {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,275 @@
|
||||
/**
|
||||
* VTK-Web Widget Library.
|
||||
*
|
||||
* This module extend jQuery object to add support for graphical components
|
||||
* related to File Browsing.
|
||||
*
|
||||
* @class jQuery.vtk.ui.FileBrowser
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
// =======================================================================
|
||||
// ==== Defaults constant values =========================================
|
||||
// =======================================================================
|
||||
var pathSeparator = '/',
|
||||
directives = {
|
||||
'.vtk-directory': {
|
||||
'directory <-': {
|
||||
'@path': function(arg) {
|
||||
return pathToStr(arg.item.path);
|
||||
},
|
||||
'@class+': function(arg) {
|
||||
return (arg.item.path.length === 1) ? ' active' : '';
|
||||
},
|
||||
'.vtk-label': 'directory.label',
|
||||
'li.vtk-files': {
|
||||
'file <- directory.files': {
|
||||
'div': 'file.label'
|
||||
}
|
||||
},
|
||||
'li.vtk-groups': {
|
||||
'gfile <- directory.groups': {
|
||||
'div': 'gfile.label',
|
||||
'@files': function(arg) {
|
||||
return arg.item.files.join(":");
|
||||
}
|
||||
}
|
||||
},
|
||||
'li.vtk-dirs': {
|
||||
'dir <- directory.dirs': {
|
||||
'div': 'dir'
|
||||
}
|
||||
},
|
||||
'li.vtk-path': {
|
||||
'i <- directory.path': {
|
||||
'div': 'i'
|
||||
}//,
|
||||
// filter : function(a) {
|
||||
// return a.pos < (a.items.length - 1);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fileBrowserGenerator = null;
|
||||
|
||||
$.fn.fileBrowser = function(options) {
|
||||
// Handle data with default values
|
||||
var opts = $.extend({},$.fn.fileBrowser.defaults, options);
|
||||
|
||||
// Compile template only once
|
||||
if(fileBrowserGenerator === null) {
|
||||
template = $(opts.template);
|
||||
fileBrowserGenerator = template.compile(directives);
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-filebrowser'),
|
||||
container = $('<div/>');
|
||||
me.append(container);
|
||||
me.data('file-list', opts.data);
|
||||
me.data('session', opts.session);
|
||||
me.data('cacheFiles', opts.cacheFiles);
|
||||
|
||||
if(opts.data === null) {
|
||||
opts.session.call('file.server.directory.list',['.']).then(function(files) {
|
||||
opts.data = [ files ];
|
||||
me.data('file-list', opts.data);
|
||||
|
||||
// Generate HTML
|
||||
container.render(opts.data, fileBrowserGenerator);
|
||||
|
||||
// Initialize pipelineBrowser (Visibility + listeners)
|
||||
initializeListener(me);
|
||||
});
|
||||
} else {
|
||||
// Generate HTML
|
||||
container.render(opts.data, fileBrowserGenerator);
|
||||
|
||||
// Initialize pipelineBrowser (Visibility + listeners)
|
||||
initializeListener(me);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.updateFileBrowser = function(activeDirectory) {
|
||||
|
||||
return this.each(function() {
|
||||
var me = $(this).empty(),
|
||||
data = me.data('file-list'),
|
||||
newData = [],
|
||||
container = $('<div/>');
|
||||
|
||||
me.append(container);
|
||||
|
||||
// Delete the cached active directory and fetch again
|
||||
if(activeDirectory && me.data('session')){
|
||||
var dirArray = activeDirectory.split("/").splice(1);
|
||||
for(var i in data) {
|
||||
var item = data[i];
|
||||
var itemArray = item.path;
|
||||
if ( !equals(itemArray, dirArray) ) {
|
||||
newData.push(data[i]);
|
||||
}
|
||||
}
|
||||
|
||||
var requestPath = activeDirectory.substring(1);
|
||||
if(requestPath.indexOf('/') == -1) {
|
||||
requestPath = '.';
|
||||
}
|
||||
me.data('session').call('file.server.directory.list', [requestPath])
|
||||
.then(function(newFiles){
|
||||
newData.push(newFiles);
|
||||
me.data('file-list', newData);
|
||||
// Generate HTML
|
||||
container.render(newData, fileBrowserGenerator);
|
||||
|
||||
// Initialize pipelineBrowser (Visibility + listeners)
|
||||
initializeListener(me, activeDirectory);
|
||||
});
|
||||
|
||||
} else {
|
||||
// Generate HTML
|
||||
container.render(data, fileBrowserGenerator);
|
||||
|
||||
// Initialize pipelineBrowser (Visibility + listeners)
|
||||
initializeListener(me, activeDirectory);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.fileBrowser.defaults = {
|
||||
template: "#vtk-templates > .vtkweb-widget-filebrowser > div",
|
||||
session: null,
|
||||
data: null,
|
||||
cacheFiles: true
|
||||
};
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function strToPath(pathId) {
|
||||
var path = pathId.split(pathSeparator);
|
||||
return path.slice(1, path.length);
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function getParent(path) {
|
||||
return path.slice(0, path.length - 2);
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function getPath(parentPath, child) {
|
||||
return [].concat(parentPath).concat(child);
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function pathToStr(path) {
|
||||
//console.log(path);
|
||||
var str = pathSeparator + path.join(pathSeparator);
|
||||
return str;
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
equals = function(array1, array2) {
|
||||
if (array1.length != array2.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i in array1) {
|
||||
if (array1[i] !== array2[i]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function getRelativePath(parentPath, fileName) {
|
||||
return '.' + pathToStr(getPath(parentPath, fileName).slice(1));
|
||||
}
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function initializeListener(container, activePath) {
|
||||
$('.action', container).click(function(){
|
||||
var me = $(this), item = $('div', me), pathStr = me.closest('.vtk-directory').attr('path'), type = me.closest('ul').attr('data');
|
||||
|
||||
if(type === 'path') {
|
||||
// Find out the panel to show
|
||||
var newPath = pathToStr(strToPath(pathStr).slice(0, me.index() + 1)),
|
||||
selector = '.vtk-directory[path="' + newPath + '"]';
|
||||
var newActive = $(selector , container).addClass('active');
|
||||
if(newActive.length === 1) {
|
||||
$('.vtk-directory', container).removeClass('active');
|
||||
newActive.addClass('active');
|
||||
}
|
||||
if (container.data('cacheFiles') === false) {
|
||||
container.updateFileBrowser(newPath);
|
||||
}
|
||||
} else if(type === 'dir') {
|
||||
// Swicth active panel
|
||||
var str = '.vtk-directory[path="' + pathStr + pathSeparator + item.html() + '"]';
|
||||
var newActive = $(str, container);
|
||||
if(newActive.length === 1) {
|
||||
$('.vtk-directory', container).removeClass('active');
|
||||
newActive.addClass('active');
|
||||
container.trigger({
|
||||
type: 'directory-click',
|
||||
path: pathStr,
|
||||
name: me.text(),
|
||||
relativePath: getRelativePath(strToPath(pathStr), me.text())
|
||||
});
|
||||
} else {
|
||||
if(container.data('session')) {
|
||||
var relativePath = (pathStr + '/' + me.text());
|
||||
container.data('session').call('file.server.directory.list', [relativePath.substring(1)]).then(function(newFiles){
|
||||
container.data('file-list').push(newFiles);
|
||||
container.updateFileBrowser(relativePath);
|
||||
});
|
||||
|
||||
}
|
||||
container.trigger({
|
||||
type: 'directory-not-found',
|
||||
path: pathStr,
|
||||
name: me.text(),
|
||||
relativePath: getRelativePath(strToPath(pathStr), me.text())
|
||||
});
|
||||
}
|
||||
} else if(type === 'files') {
|
||||
container.trigger({
|
||||
type: 'file-click',
|
||||
path: pathStr,
|
||||
name: me.text(),
|
||||
relativePathList: [ getRelativePath(strToPath(pathStr), me.text()) ],
|
||||
list: [ me.text() ],
|
||||
relativePath: getRelativePath(strToPath(pathStr), me.text())
|
||||
});
|
||||
} else if(type === 'groups') {
|
||||
var relativePathList = [], fileList = me.attr('files').split(':');
|
||||
for(var i in fileList) {
|
||||
relativePathList.push(getRelativePath(strToPath(pathStr), fileList[i]));
|
||||
}
|
||||
container.trigger({
|
||||
type: 'file-group-click',
|
||||
path: pathStr,
|
||||
name: me.text(),
|
||||
list: fileList,
|
||||
relativePathList: relativePathList,
|
||||
relativePath: getRelativePath(strToPath(pathStr), me.text())
|
||||
});
|
||||
}
|
||||
});
|
||||
if(activePath) {
|
||||
$('.vtk-directory',container).removeClass('active');
|
||||
$('.vtk-directory[path="' + activePath + '"]',container).addClass('active');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
@ -0,0 +1,20 @@
|
||||
<div class='vtkweb-widget-filebrowser'>
|
||||
<div>
|
||||
<div class="vtk-directory">
|
||||
<div class="vtk-label">
|
||||
</div>
|
||||
<div>
|
||||
<ul data='path'><li class="vtk-path action"><div/></li></ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul data='dir'><li class="vtk-dirs action"><div/></li></ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul data='groups'><li class="vtk-groups action"><div/></li></ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul data='files'><li class="vtk-files action"><div/></li></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 393 B |
Binary file not shown.
|
After Width: | Height: | Size: 860 B |
Binary file not shown.
|
After Width: | Height: | Size: 614 B |
Binary file not shown.
|
After Width: | Height: | Size: 186 B |
Binary file not shown.
|
After Width: | Height: | Size: 221 B |
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
Binary file not shown.
|
After Width: | Height: | Size: 193 B |
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
Binary file not shown.
|
After Width: | Height: | Size: 790 B |
Binary file not shown.
|
After Width: | Height: | Size: 393 B |
Binary file not shown.
|
After Width: | Height: | Size: 860 B |
Binary file not shown.
|
After Width: | Height: | Size: 614 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="vtkweb-widget-tree.css" rel="stylesheet" >
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
|
||||
<script type="text/javascript" src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"></script>
|
||||
<script type="text/javascript" src="vtkweb-widget-tree.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- This should be automatically filled by the vtk loader : BEGUIN -->
|
||||
<div id='vtk-templates' style="display: none;">
|
||||
<div class='vtkweb-widget-tree'>
|
||||
<ul>
|
||||
<li class="node">
|
||||
<div class="node-line">
|
||||
<div class="head"></div>
|
||||
<div class="label"></div>
|
||||
<div class="tail"></div>
|
||||
</div>
|
||||
<div class='children'></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- This should be automatically filled by the vtk loader : END -->
|
||||
|
||||
<div id="file-tree" style="position: relative; width: 100%;"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var fileTree = { name: 'root', id: 0, type: 'root', children: [
|
||||
{ name: 'first', id: 1, type: 'source', fields: { representation: {title: 'Wireframe representation', data: 'wireframe'}, bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [
|
||||
{ name: 'a', id: 4, type: 'filter', fields: { representation: 'outline', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [
|
||||
{ name: 'aa', id: 7, type: 'filter', fields: { representation: 'hide', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [
|
||||
{ name: 'aaa', id: 10, type: 'filter', fields: { representation: 'surface', bar: 'on', 'colorBy': { field: 'color', data: '#ccffaa'}}, children: [] },
|
||||
{ name: 'aab', id: 11, type: 'filter', fields: { representation: 'surface_edge', bar: 'off', 'colorBy': { field: 'points', sdf: 'id'}}, children: [] },
|
||||
{ name: 'aac', id: 12, type: 'filter', fields: { representation: 'wireframe', bar: 'on', 'colorBy': { field: 'cells', sdf: 'id'}}, children: [] }
|
||||
] },
|
||||
{ name: 'ab', id: 8, type: 'filter', fields: { representation: 'wireframe', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [] },
|
||||
{ name: 'ac', id: 9, type: 'filter', fields: { representation: 'wireframe', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [] }
|
||||
] },
|
||||
{ name: 'b', id: 5, type: 'filter', fields: { representation: 'volume', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [] },
|
||||
{ name: 'c', id: 6, type: 'filter', fields: { representation: 'wireframe', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [] }
|
||||
] },
|
||||
{ name: 'second', id: 2, type: 'source', fields: { representation: 'wireframe', bar: 'on', 'colorBy': { field: 'points', data: 'id'}}, children: [] },
|
||||
{ name: 'third', id: 3, type: 'source', fields: { representation: 'wireframe', bar: 'on', 'colorBy': { field: 'cells', data: 'id'}}, children: [] }
|
||||
]};
|
||||
|
||||
$("#file-tree").vtkTree({ data: fileTree }).bind('colorBy select representation bar', function(e){
|
||||
console.log(e.type + ' ' + e.node + ' ' + e.origin.attr('data'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,223 @@
|
||||
.vtk-tree {
|
||||
}
|
||||
|
||||
.vtk-tree ul {
|
||||
margin: 0 0 0 -1.5em;
|
||||
padding: 0 0 0 1.5em;
|
||||
}
|
||||
|
||||
.vtk-tree li .node {
|
||||
list-style: none;
|
||||
line-height: 1.5em;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line {
|
||||
cursor: pointer;
|
||||
margin-left: 20px;
|
||||
margin-right: 5px;
|
||||
top: .25em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line .head {
|
||||
position: absolute;
|
||||
background-image: url("resources/file.png");
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
overflow: hidden;
|
||||
left: -1.6em;
|
||||
}
|
||||
|
||||
.vtk-tree li .label {
|
||||
font-family: Arial,sans-serif;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line .label {
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line .tail {
|
||||
height: 1.5em;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vtk-tree li .node .children {
|
||||
}
|
||||
|
||||
.vtk-tree .action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Tree images */
|
||||
|
||||
.vtk-tree ul ul {
|
||||
background: url("resources/list-item-contents.png") repeat-y scroll 5px center transparent;
|
||||
}
|
||||
|
||||
.vtk-tree li {
|
||||
background: url("resources/list-item-root.png") no-repeat scroll left top transparent;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.vtk-tree li li {
|
||||
background-image: url("resources/list-item.png");
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.vtk-tree li.lastChild > ul {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.vtk-tree li.lastChild {
|
||||
background-image: url("resources/list-item-last.png");
|
||||
}
|
||||
|
||||
.vtk-tree li.open {
|
||||
background-image: url("resources/list-item-open.png");
|
||||
}
|
||||
|
||||
.vtk-tree li.open.lastChild {
|
||||
background-image: url("resources/list-item-last-open.png");
|
||||
}
|
||||
|
||||
.vtk-tree li ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vtk-tree .label {
|
||||
|
||||
}
|
||||
|
||||
/* Root node tree image */
|
||||
.vtk-tree > ul > li {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.vtk-tree > ul > li .head {
|
||||
position: absolute;
|
||||
background-image: url("resources/folder.png");
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
overflow: hidden;
|
||||
left: -6px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.vtk-tree > ul > li > div > .label {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* Selection management */
|
||||
|
||||
.vtk-tree li .node .node-line:hover {
|
||||
background: #eeeeee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line .tail div {
|
||||
|
||||
}
|
||||
|
||||
.vtk-tree li .node .node-line.selected {
|
||||
background: #cccccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Type icon management */
|
||||
|
||||
.vtk-tree li[type='root'] .head {
|
||||
background-image: url("resources/server.png") !important;
|
||||
}
|
||||
|
||||
.vtk-tree li[type='source'] .head {
|
||||
background-image: url("resources/source.png") !important;
|
||||
}
|
||||
|
||||
.vtk-tree li[type='filter'] .head {
|
||||
background-image: url("resources/filter.png") !important;
|
||||
}
|
||||
|
||||
/* ==================== Custom Pipeline usage ==================================== */
|
||||
.vtk-tree .tail div {
|
||||
position: relative;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
/* =========== REPRESENTATION ========= */
|
||||
.vtk-tree .tail div[type='representation'] {
|
||||
|
||||
background: url("resources/pipeline/representations.png") no-repeat center center transparent;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='representation'][data='hide'] {
|
||||
background-position: 0px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='representation'][data='outline'] {
|
||||
background-position: -34px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='representation'][data='wireframe'] {
|
||||
background-position: -68px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='representation'][data='surface'] {
|
||||
background-position: -102px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='representation'][data='surface_edge'] {
|
||||
background-position: -136px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='representation'][data='volume'] {
|
||||
background-position: -170px;
|
||||
}
|
||||
|
||||
/* =========== COLOR BY ========= */
|
||||
|
||||
.vtk-tree .tail div[type='colorBy'] {
|
||||
background: url("resources/pipeline/colorBy.png") no-repeat center center transparent;
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='colorBy'][field='points'] {
|
||||
background-position: 2px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='colorBy'][field='cells'] {
|
||||
background-position: -22px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='colorBy'][field='color'] {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* =========== SCALAR BAR ========= */
|
||||
|
||||
.vtk-tree .tail div[type='bar'] {
|
||||
background: url("resources/pipeline/scalarbar.png") no-repeat center center transparent;
|
||||
background-position: -22px;
|
||||
}
|
||||
|
||||
.vtk-tree .tail div[type='bar'][data='on'] {
|
||||
background: url("resources/pipeline/scalarbar.png") no-repeat transparent;
|
||||
background-position: 2px;
|
||||
}
|
||||
@ -0,0 +1,129 @@
|
||||
/**
|
||||
* VTK-Web Widget Library.
|
||||
*
|
||||
* This module extend jQuery object to add support for graphical components
|
||||
* related to open tree structure.
|
||||
*
|
||||
* @class jQuery.vtk.ui.Tree
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
// =======================================================================
|
||||
// ==== Defaults constant values =========================================
|
||||
// =======================================================================
|
||||
var directives = {
|
||||
'li' : {
|
||||
'child <- children': {
|
||||
'@node_id' : 'child.id',
|
||||
'@type' : 'child.type',
|
||||
'@class+' : function(arg) {
|
||||
hasChild = arg.child.item.children ? ' Open' : '';
|
||||
lastChild = (arg.pos == arg.child.items.length - 1) ? ' lastChild' : '';
|
||||
return lastChild + hasChild;
|
||||
},
|
||||
'.label' : 'child.name',
|
||||
'.tail' : function(arg) {
|
||||
if(!arg.child.item.hasOwnProperty('fields')) {
|
||||
return "";
|
||||
}
|
||||
var fields = arg.child.item.fields;
|
||||
var result = [];
|
||||
for(var key in fields) {
|
||||
result.push(fieldHandler(key, fields[key]));
|
||||
}
|
||||
return result.join('');
|
||||
},
|
||||
'div.children' : function(ctxt) {
|
||||
if(ctxt.child.item.hasOwnProperty('children')) {
|
||||
return treeGenerator(ctxt.child.item);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
treeGenerator = null,
|
||||
fieldHandler = function(key, value) {
|
||||
var buffer = [ '<div class="action" type="', key, '" '];
|
||||
if (typeof value === "object") {
|
||||
for(var innerKey in value) {
|
||||
buffer.push(innerKey);
|
||||
buffer.push('="')
|
||||
buffer.push(value[innerKey]);
|
||||
buffer.push('" ');
|
||||
}
|
||||
|
||||
} else if (typeof value === "string") {
|
||||
buffer.push('data="')
|
||||
buffer.push(value);
|
||||
buffer.push('"');
|
||||
}
|
||||
buffer.push('></div>')
|
||||
return buffer.join('');
|
||||
};
|
||||
|
||||
$.fn.vtkTree = function(options) {
|
||||
// Handle data with default values
|
||||
var opts = $.extend({},$.fn.vtkTree.defaults, options);
|
||||
|
||||
// Compile template only once
|
||||
if(treeGenerator === null) {
|
||||
template = $(opts.template);
|
||||
treeGenerator = template.compile(directives);
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
var me = $(this).empty().addClass('vtk-tree'),
|
||||
container = $('<div/>'),
|
||||
data = { children: [opts.data] };
|
||||
me.append(container);
|
||||
me.data('tree', data);
|
||||
|
||||
// Generate HTML
|
||||
container.render(data, treeGenerator);
|
||||
|
||||
// Initialize pipelineBrowser (Visibility + listeners)
|
||||
initializeListener(me);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.vtkTree.defaults = {
|
||||
template: "#vtk-templates > .vtkweb-widget-tree > ul",
|
||||
data: {}
|
||||
};
|
||||
|
||||
// =======================================================================
|
||||
|
||||
function initializeListener(container, activePath) {
|
||||
$('.action', container).click(function(e) {
|
||||
var me = $(this),
|
||||
node = me.closest('li'),
|
||||
id = node.attr('node_id'),
|
||||
type = me.attr('type');
|
||||
|
||||
$('.node-line', container).removeClass('selected');
|
||||
$('.node-line:eq(0)', node).addClass('selected');
|
||||
|
||||
container.trigger({
|
||||
'type': type,
|
||||
'node': id,
|
||||
'origin': me
|
||||
});
|
||||
});
|
||||
$('.node-line', container).click(function() {
|
||||
var me = $(this),
|
||||
node = me.closest('li'),
|
||||
id = node.attr('node_id');
|
||||
|
||||
$('.node-line', container).removeClass('selected');
|
||||
$('.node-line:eq(0)', node).addClass('selected');
|
||||
|
||||
container.trigger({
|
||||
'type': 'select',
|
||||
'node': id,
|
||||
'origin': me
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}(jQuery));
|
||||
@ -0,0 +1,12 @@
|
||||
<div class='vtkweb-widget-tree'>
|
||||
<ul>
|
||||
<li class="node">
|
||||
<div class="node-line">
|
||||
<div class="head"></div>
|
||||
<div class="label"></div>
|
||||
<div class="tail"></div>
|
||||
</div>
|
||||
<div class='children'></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user