Commit c9f977c3 authored by Christiaan Janssen's avatar Christiaan Janssen

QmlProfiler: main view with fixed height and scrollable

Change-Id: Ib77ad6ba5afe13d692d85c7027e3e1d4b2fbb6a7
Reviewed-by: default avatarKai Koehne <kai.koehne@nokia.com>
parent eb5a60db
......@@ -145,7 +145,6 @@ void TiledCanvas::componentComplete()
void TiledCanvas::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
Q_UNUSED(event);
qWarning("MPE");
}
QPixmap TiledCanvas::getTile(int xx, int yy)
......
......@@ -32,7 +32,6 @@
import QtQuick 1.0
import Monitor 1.0
import "MainView.js" as Plotter
Item {
id: detail
......
This diff is collapsed.
......@@ -32,22 +32,8 @@
.pragma library
var xmargin = 0;
var ymargin = 0;
var qmlEventList = 0;
var names = [ qsTr("Painting"), qsTr("Compiling"), qsTr("Creating"), qsTr("Binding"), qsTr("Handling Signal")]
//### need better way to manipulate color from QML. In the meantime, these need to be kept in sync.
var colors = [ "#99CCB3", "#99CCCC", "#99B3CC", "#9999CC", "#CC99B3", "#CC99CC", "#CCCC99", "#CCB399" ];
var origColors = [ "#99CCB3", "#99CCCC", "#99B3CC", "#9999CC", "#CC99B3", "#CC99CC", "#CCCC99", "#CCB399" ];
var xRayColors = [ "#6699CCB3", "#6699CCCC", "#6699B3CC", "#669999CC", "#66CC99B3", "#66CC99CC", "#66CCCC99", "#66CCB399" ];
function reset()
{
xmargin = 0;
ymargin = 0;
}
//draw background of the graph
function drawGraph(canvas, ctxt, region)
{
......@@ -56,7 +42,7 @@ function drawGraph(canvas, ctxt, region)
grad.addColorStop(1, '#ccc');
ctxt.fillStyle = grad;
ctxt.fillRect(0, 0, canvas.canvasSize.width + xmargin, canvas.canvasSize.height - ymargin);
ctxt.fillRect(0, 0, canvas.canvasSize.width, canvas.canvasSize.height);
}
//draw the actual data to be graphed
......@@ -65,8 +51,8 @@ function drawData(canvas, ctxt, region)
if ((!qmlEventList) || qmlEventList.count() == 0)
return;
var width = canvas.canvasSize.width - xmargin;
var height = canvas.height - ymargin;
var width = canvas.canvasSize.width;
var height = canvas.height;
var sumValue = qmlEventList.traceEndTime() - qmlEventList.traceStartTime();
var spacing = width / sumValue;
......@@ -74,10 +60,11 @@ function drawData(canvas, ctxt, region)
ctxt.fillStyle = "rgba(0,0,0,1)";
var highest = [0,0,0,0,0];
// todo: use "region" in the timemarks?
//### only draw those in range
for (var ii = 0; ii < qmlEventList.count(); ++ii) {
var xx = (qmlEventList.getStartTime(ii) - qmlEventList.traceStartTime()) * spacing + xmargin;
var xx = (qmlEventList.getStartTime(ii) - qmlEventList.traceStartTime()) * spacing;
if (xx > region.x + region.width)
continue;
......@@ -102,15 +89,3 @@ function plot(canvas, ctxt, region)
drawGraph(canvas, ctxt, region);
drawData(canvas, ctxt, region);
}
function xScale(canvas)
{
if ((!qmlEventList) || qmlEventList.count() == 0)
return;
var width = canvas.canvasSize.width - xmargin;
var sumValue = qmlEventList.traceEndTime() - qmlEventList.traceStartTime();
var spacing = sumValue / width;
return spacing;
}
/**************************************************************************
**
** This file is part of Qt Creator
**
** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
**
** Contact: Nokia Corporation (info@qt.nokia.com)
**
**
** GNU Lesser General Public License Usage
**
** This file may be used under the terms of the GNU Lesser General Public
** License version 2.1 as published by the Free Software Foundation and
** appearing in the file LICENSE.LGPL included in the packaging of this file.
** Please review the following information to ensure the GNU Lesser General
** Public License version 2.1 requirements will be met:
** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Nokia gives you certain additional
** rights. These rights are described in the Nokia Qt LGPL Exception
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
**
** Other Usage
**
** Alternatively, this file may be used in accordance with the terms and
** conditions contained in a signed written agreement between you and Nokia.
**
** If you have questions regarding the use of this file, please contact
** Nokia at info@qt.nokia.com.
**
**************************************************************************/
import QtQuick 1.0
import Monitor 1.0
import "Overview.js" as Plotter
TiledCanvas {
id: canvas
// ***** properties
height: 50
property bool dataAvailable: false
property variant startTime : 0
property variant endTime : 0
canvasSize.width: canvas.width
canvasSize.height: canvas.height
tileSize.width: width
tileSize.height: height
canvasWindow.width: width
canvasWindow.height: height
// ***** functions
function clearDisplay()
{
dataAvailable = false;
requestPaint();
}
function updateRange() {
var newStartTime = Math.round(rangeMover.x * qmlEventList.traceEndTime() / width);
var newEndTime = Math.round((rangeMover.x + rangeMover.width) * qmlEventList.traceEndTime() / width);
if (startTime !== newStartTime || endTime !== newEndTime) {
zoomControl.setRange(newStartTime, newEndTime);
}
}
// ***** connections to external objects
Connections {
target: zoomControl
onRangeChanged: {
if (qmlEventList) {
startTime = zoomControl.startTime();
endTime = zoomControl.endTime();
var newRangeX = startTime * width / qmlEventList.traceEndTime();
if (rangeMover.x !== newRangeX)
rangeMover.x = newRangeX;
var newWidth = (endTime-startTime) * width / qmlEventList.traceEndTime();
if (rangeMover.width !== newWidth)
rangeMover.width = newWidth;
}
}
}
Connections {
target: qmlEventList
onDataReady: {
if (qmlEventList.count() > 0) {
dataAvailable = true;
requestPaint();
}
}
}
// ***** slots
onDrawRegion: {
if (dataAvailable)
Plotter.plot(canvas, ctxt, region);
else {
Plotter.qmlEventList = qmlEventList;
Plotter.drawGraph(canvas, ctxt, region) //just draw the background
}
}
// ***** child items
MouseArea {
anchors.fill: canvas
function jumpTo(posX) {
var newX = posX - rangeMover.width/2;
if (newX < 0)
newX = 0;
if (newX + rangeMover.width > canvas.width)
newX = canvas.width - rangeMover.width;
rangeMover.x = newX;
updateRange();
}
onPressed: {
jumpTo(mouse.x);
}
onMousePositionChanged: {
jumpTo(mouse.x);
}
}
RangeMover {
id: rangeMover
visible: dataAvailable
}
Rectangle {
height: 1
width: parent.width
color: "#cccccc"
}
}
......@@ -32,7 +32,6 @@
import QtQuick 1.0
import Monitor 1.0
import "MainView.js" as Plotter
BorderImage {
id: rangeDetails
......@@ -56,7 +55,7 @@ BorderImage {
z: 1
visible: false
x: 200
y: 200
y: 25
//title
Text {
......@@ -99,13 +98,12 @@ BorderImage {
opacity: content.length !== 0 ? 1 : 0
label: qsTr("Location")
content: {
var file = rangeDetails.file
var pos = file.lastIndexOf("/")
var file = rangeDetails.file;
var pos = file.lastIndexOf("/");
if (pos != -1)
file = file.substr(pos+1)
file = file.substr(pos+1);
return (file.length !== 0) ? (file + ":" + rangeDetails.line) : "";
}
onLinkActivated: Qt.openUrlExternally(url)
}
}
......@@ -119,7 +117,9 @@ BorderImage {
height: 12
MouseArea {
anchors.fill: parent
onClicked: root.mouseOverSelection = !root.mouseOverSelection;
onClicked: {
root.mouseOverSelection = !root.mouseOverSelection;
}
}
}
......@@ -130,7 +130,9 @@ BorderImage {
text:"X"
MouseArea {
anchors.fill: parent
onClicked: root.hideRangeDetails();
onClicked: {
root.hideRangeDetails();
}
}
}
......
......@@ -30,124 +30,148 @@
**
**************************************************************************/
import "MainView.js" as Plotter
import QtQuick 1.0
import Monitor 1.0
Item {
Rectangle {
id: rangeMover
property color lighterColor:"#cc80b2f6"
property color darkerColor:"#cc6da1e8"
property color gapColor: "#666da1e8"
property real value: (canvas.canvasWindow.x + x) * Plotter.xScale(canvas)
property real zoomWidth: 20
onZoomWidthChanged: timeDisplayLabel.hideAll();
property color hardBorderColor: "blue"
width: 20
height: 50
function updateZoomControls() {
rightRange.x = rangeMover.width;
}
onXChanged: updateZoomControls();
color: lighterColor
width: Math.max(rangeMover.zoomWidth, 20); height: 50
property bool dragStarted: false
onXChanged: {
if (dragStarted) canvas.updateRange()
}
MouseArea {
anchors.fill: parent
drag.target: rangeMover
drag.axis: "XAxis"
drag.minimumX: 0
drag.maximumX: canvas.width - rangeMover.zoomWidth //###
}
Rectangle {
id: frame
color:"transparent"
anchors.fill: parent
anchors.rightMargin: 1
anchors.bottomMargin: 1
}
Rectangle {
id: rect
color: lighterColor
width: parent.zoomWidth
height: parent.height
}
Rectangle {
id: gapRect
color: gapColor
anchors.left: rect.right
anchors.right: rightRange.left
height: parent.height
drag.maximumX: canvas.width - rangeMover.width
onPressed: {
parent.dragStarted = true;
}
onReleased: {
parent.dragStarted = false;
}
}
Rectangle {
id: leftRange
property int currentX: rangeMover.x
property int currentWidth : rangeMover.zoomWidth
// used for dragging the borders
property real initialX: 0
property real initialWidth: 0
x: -width
x: 0
height: parent.height
width: 15
width: 1
color: darkerColor
border.color: hardBorderColor
border.width: 0
states: State {
name: "highlighted"
PropertyChanges {
target: leftRange
width: 3
border.width: 2
}
}
Text {
anchors.centerIn: parent
text:"<"
onXChanged: {
if (x !== 0) {
rangeMover.width = initialWidth - x;
rangeMover.x = initialX + x;
x = 0;
canvas.updateRange();
}
}
MouseArea {
anchors.fill: parent
x: -3
width: 7
y: 0
height: parent.height
drag.target: leftRange
drag.axis: "XAxis"
drag.minimumX: -parent.currentX
drag.maximumX: parent.currentWidth - width - 1
onPressed: {
parent.currentX = rangeMover.x;
parent.currentWidth = rangeMover.zoomWidth;
drag.minimumX: -parent.initialX
drag.maximumX: parent.initialWidth - 2
hoverEnabled: true
onEntered: {
parent.state = "highlighted";
}
}
onXChanged: {
if (x + width != 0) {
rangeMover.zoomWidth = currentWidth - x - width;
rangeMover.x = currentX + x + width;
x = -width;
onExited: {
if (!pressed) parent.state = "";
}
onReleased: {
if (!containsMouse) parent.state = "";
}
onPressed: {
parent.initialX = rangeMover.x;
parent.initialWidth = rangeMover.width;
}
}
}
Rectangle {
id: rightRange
property int currentX: rangeMover.x
property int widthSpace: rangeMover.width - rangeMover.zoomWidth
height: parent.height
width: 15
x: rangeMover.width
color: darkerColor;
height: parent.height
width: 1
color: darkerColor
border.color: hardBorderColor
border.width: 0
states: State {
name: "highlighted"
PropertyChanges {
target: rightRange
width: 3
border.width: 2
}
}
Text {
anchors.centerIn: parent
text:">"
onXChanged: {
if (x!=rangeMover.width) {
rangeMover.width = x;
canvas.updateRange();
}
}
MouseArea {
anchors.fill: parent
x: -3
width: 7
y: 0
height: parent.height
drag.target: rightRange
drag.axis: "XAxis"
drag.minimumX: 1 + parent.widthSpace
drag.maximumX: canvas.width - parent.currentX;
onPressed: {
parent.currentX = rangeMover.x;
parent.widthSpace = rangeMover.width - rangeMover.zoomWidth;
drag.minimumX: 1
drag.maximumX: canvas.width - rangeMover.x
hoverEnabled: true
onEntered: {
parent.state = "highlighted";
}
onReleased: rightRange.x = rangeMover.width;
}
onXChanged: {
if (x != rangeMover.width) {
rangeMover.zoomWidth = x - widthSpace;
onExited: {
if (!pressed) parent.state = "";
}
onReleased: {
if (!containsMouse) parent.state = "";
}
}
}
......
import QtQuick 1.0
import "MainView.js" as Plotter
Rectangle {
id: statusDisplay
property real percentage : root.progress
width: Math.max(200, statusText.width+20);
width: Math.max(200, statusText.width+20)
height: displayColumn.height + 20
visible: false;
color: "#CCD0CC"
border.width: 1
border.color: "#AAAEAA";
border.color: "#AAAEAA"
radius: 4
Column {
......@@ -42,7 +41,7 @@ Rectangle {
x: 1
y: 1
width: (parent.width-1) * statusDisplay.percentage
color: Qt.rgba(0.37 + 0.2*(1 - statusDisplay.percentage), 0.58, 0.37, 1);
color: Qt.rgba(0.37 + 0.2*(1 - statusDisplay.percentage), 0.58, 0.37, 1)
height: parent.height-1
}
}
......@@ -51,7 +50,7 @@ Rectangle {
states: [
// no data available
State {
when: (root.eventCount == 0) && !elapsedTimer.running;
when: (root.eventCount == 0) && !elapsedTimer.running
PropertyChanges {
target: statusDisplay
visible: true
......@@ -59,13 +58,15 @@ Rectangle {
PropertyChanges {
target: statusText
text: qsTr("No QML events recorded");
text: qsTr("No QML events recorded")
}
onCompleted: {
root.clearDisplay();
}
onCompleted: root.clearDisplay();
},
// running app
State {
when: elapsedTimer.running;
when: elapsedTimer.running
PropertyChanges {
target: statusDisplay
visible: true
......@@ -73,13 +74,13 @@ Rectangle {
PropertyChanges {
target: statusText
text: qsTr("Profiling application");
text: qsTr("Profiling application")
}
},
// loading data
State {
name: "loading"
when: (!root.dataAvailable) && (root.eventCount > 0);
when: (!root.dataAvailable) && (root.eventCount > 0)
PropertyChanges {
target: statusDisplay
visible: true
......@@ -87,7 +88,7 @@ Rectangle {
PropertyChanges {
target: statusText
text: qsTr("Loading data");
text: qsTr("Loading data")
}
PropertyChanges {
......
......@@ -32,37 +32,43 @@
import QtQuick 1.0
import Monitor 1.0
import "MainView.js" as Plotter
TiledCanvas {
id: timeDisplay
canvasSize {
width: timeDisplay.width
height: timeDisplay.height
}
property variant startTime : 0
property variant endTime : 0