diff --git a/Modules/QmitkExt/QmitkHistogramJSWidget.cpp b/Modules/QmitkExt/QmitkHistogramJSWidget.cpp index a91541e9b8..eecb8be6c0 100644 --- a/Modules/QmitkExt/QmitkHistogramJSWidget.cpp +++ b/Modules/QmitkExt/QmitkHistogramJSWidget.cpp @@ -1,91 +1,96 @@ /*=================================================================== The Medical Imaging Interaction Toolkit (MITK) Copyright (c) German Cancer Research Center, Division of Medical and Biological Informatics. All rights reserved. This software is distributed WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See LICENSE.txt or http://www.mitk.org for details. ===================================================================*/ #include "QmitkHistogramJSWidget.h" QmitkHistogramJSWidget::QmitkHistogramJSWidget(QWidget *parent) : QWebView(parent) { connect(page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJSObject())); QUrl myUrl = QUrl("qrc:/qmitk/Histogram.html"); setUrl(myUrl); // set Scrollbars to always disabled page()->mainFrame()->setScrollBarPolicy(Qt::Horizontal, Qt::ScrollBarAlwaysOff); page()->mainFrame()->setScrollBarPolicy(Qt::Vertical, Qt::ScrollBarAlwaysOff); } QmitkHistogramJSWidget::~QmitkHistogramJSWidget() { } // adds an Object of Type QmitkHistogramJSWidget to the JavaScript void QmitkHistogramJSWidget::addJSObject() { page()->mainFrame()->addToJavaScriptWindowObject(QString("histogramData"), this); + this->clearData(); } // reloads WebView, everytime its size has been changed, so the size of the Histogram fits to the size of the widget void QmitkHistogramJSWidget::resizeEvent(QResizeEvent* resizeEvent) { QWebView::resizeEvent(resizeEvent); this->reload(); } void QmitkHistogramJSWidget::ComputeHistogram(HistogramType* histogram) { - this->clearData(); + //this->clearData(); m_Histogram = histogram; HistogramConstIteratorType startIt = m_Histogram->End(); HistogramConstIteratorType endIt = m_Histogram->End(); HistogramConstIteratorType it; + m_Frequency.clear(); + m_Measurement.clear(); unsigned int i = 0; for (it = m_Histogram->Begin() ; it != m_Histogram->End(); ++it, ++i) { QVariant frequency = it.GetFrequency(); QVariant measurement = it.GetMeasurementVector()[0]; m_Frequency.insert(i, frequency); m_Measurement.insert(i, measurement); } - this->reload(); + this->DataChanged(); } void QmitkHistogramJSWidget::clearData() { m_Frequency.clear(); m_Measurement.clear(); + m_Frequency.insert(0,0); + m_Measurement.insert(0,0); } void QmitkHistogramJSWidget::clearHistogram() { this->clearData(); - this->reload(); + this->DataChanged(); } QList QmitkHistogramJSWidget::getFrequency() { return m_Frequency; } QList QmitkHistogramJSWidget::getMeasurement() { return m_Measurement; } diff --git a/Modules/QmitkExt/QmitkHistogramJSWidget.h b/Modules/QmitkExt/QmitkHistogramJSWidget.h index 6193bc2e9b..b4162f65dc 100644 --- a/Modules/QmitkExt/QmitkHistogramJSWidget.h +++ b/Modules/QmitkExt/QmitkHistogramJSWidget.h @@ -1,66 +1,67 @@ /*=================================================================== The Medical Imaging Interaction Toolkit (MITK) Copyright (c) German Cancer Research Center, Division of Medical and Biological Informatics. All rights reserved. This software is distributed WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See LICENSE.txt or http://www.mitk.org for details. ===================================================================*/ #ifndef QMITKHISTOGRAMJSWIDGET_H #define QMITKHISTOGRAMJSWIDGET_H #include #include #include #include "QmitkExtExports.h" #include #include "mitkImage.h" class QmitkExt_EXPORT QmitkHistogramJSWidget : public QWebView { Q_OBJECT Q_PROPERTY(QList measurement READ getMeasurement) Q_PROPERTY(QList frequency READ getFrequency) public: typedef mitk::Image::HistogramType HistogramType; typedef mitk::Image::HistogramType::ConstIterator HistogramConstIteratorType; explicit QmitkHistogramJSWidget(QWidget *parent = 0); ~QmitkHistogramJSWidget(); void resizeEvent(QResizeEvent* resizeEvent); void ComputeHistogram(HistogramType* histogram); void clearHistogram(); QList getMeasurement(); QList getFrequency(); private: QList m_Frequency; QList m_Measurement; HistogramType::ConstPointer m_Histogram; void clearData(); private slots: void addJSObject(); signals: + void DataChanged(); public slots: }; #endif // QMITKHISTOGRAMJSWIDGET_H diff --git a/Modules/QmitkExt/resources/Histogram.js b/Modules/QmitkExt/resources/Histogram.js index de123c2cbe..7d3fb9566e 100644 --- a/Modules/QmitkExt/resources/Histogram.js +++ b/Modules/QmitkExt/resources/Histogram.js @@ -1,116 +1,163 @@ /** * @author Moritz Petry */ //var dataset = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 7, 18, 19, 22]; /*var indexNumber = Math.round(Math.random()*10+30); for (var i = 0; i< indexNumber; i++) { var newNumber = Math.random() * 100; dataset.push(newNumber); }*/ var dataset = new Array(); var frequency = new Array(); var measurement = new Array(); var dataset; var margin = { top : 30, bottom : 0, left : 50, right : -20, }; var height = histogramData.height - margin.top - margin.bottom; var width = histogramData.width - margin.left - margin.right; var tension = 0.8; +var connected = false; + /* var line = d3.svg.line() + .interpolate("cardinal") + .x(function(d,i) { + return xScale(histogramData.measurement[i]); + }) + .y(function(d,i) { + return yScale(d); + }) + .tension(tension); + + var area = d3.svg.area() + .interpolate("cardinal") + .tension(tension) + .x(function(d,i) { + return xScale(histogramData.measurement[i]); + }) + .y0(height) + .y1(function(d,i) { + return yScale(d); + }); */ + +if (!connected) + { + connected = true; + histogramData.DataChanged.connect(changeHistogram); + //makeHistogram(); + } -makeHistogram(); -function makeHistogram() { var xScale = d3.scale.linear() .domain([d3.min(histogramData.measurement), d3.max(histogramData.measurement)]) .range([margin.left, width]); var yScale = d3.scale.linear() .domain([0, d3.max(histogramData.frequency)]) .range([height, margin.top]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var svg = d3.select("body") .append("svg") .attr("class", "svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.bottom + margin.top) .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - var line = d3.svg.line() - .interpolate("cardinal") - .x(function(d,i) { - return xScale(histogramData.measurement[i]); - }) - .y(function(d,i) { - return yScale(d); - }) - .tension(tension); - - var area = d3.svg.area() - .interpolate("cardinal") - .tension(tension) - .x(function(d,i) { - return xScale(histogramData.measurement[i]); - }) - .y0(height) - .y1(function(d,i) { - return yScale(d); - }); - - svg.append("path") - .attr("class", "area") - .attr("fill", "steelblue") - .attr("opacity", 0.5) - .attr("d", area(histogramData.frequency)); + // svg.append("path") + // .attr("class", "area") + // .attr("fill", "steelblue") + // .attr("opacity", 0.5) + // .attr("d", area(histogramData.frequency)); - svg.append("path") - .attr("class", "line") - .attr("fill", "none") - .attr("stroke", "black") - .attr("stroke-width", 1) - .attr("d", line(histogramData.frequency)); + // svg.append("path") + // .attr("class", "line") + // .attr("fill", "none") + // .attr("stroke", "black") + // .attr("stroke-width", 1) + // .attr("d", line(histogramData.frequency)); // var bar = svg.selectAll("rect") - // .data(dataset) + // .data(histogramData.frequency) // .enter() // .append("rect") // .attr("class", "bar") // .attr("x", function(d,i) { // return xScale(histogramData.measurement[i]); // }) // .attr("y", function(d,i) { - // return yScale(histogramData.frequency[i]); + // return yScale(d); // }) // .attr("width", 1) - // .attr("height", function(d,i) { - // return height - yScale(histogramData.frequency[i]); + // .attr("height", function(d) { + // return height - yScale(d); // }) // .attr("fill", "grey") // .attr("opacity", 0.5); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + 0 + "," + height + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin.left + "," + 0 + ")") .call(yAxis); + + +function changeHistogram () +{ + var bar = svg.selectAll("rect") + .data(data); + + bar.data(histogramData.frequency).enter().append("rect") + .attr("class", "bar") + .attr("x", function(d,i) { + return xScale(histogramData.measurement[i]); + }) + .attr("y", height) + .attr("height", 0) + .attr("width", 1) + .attr("fill", "grey") + .transition() + .attr("height", function(d) { + return (height-yScale(d)); + }) + .attr("width", 1) + .attr("y", function(d) { + return yScale(d); + }); + + bar.transition() + .attr("x", function(d,i) { + return xScale(histogramData.measurement[i]); + }) + .attr("y", function(d) { + return yScale(d); + }) + .attr("height", function(d) { + return (height-yScale(d)); + }) + .attr("width", 1) + .attr("fill", "grey"); + + bar.exit().transition() + .attr("y", height) + .attr("height", 0) + .remove(); }