QChartView and QScatterSeries overrdide the label of a QPointF - c++

I have a QChartView which displays some 2D points which are representing each one a specific project I want to label each point with the project name AND NOT with it's x,y coordinates as the default behaviour
Is there any way to achieve override the function that creates or render the labels?

Why this could be difficult to achieve without changing the Qt source code
QXYSeries::setPointLabelsFormat wouldn't be of much help to you. It does indeed allow you to change the format of the labels, but the only variable part of it are the coordinates of the points.
All the drawing is done in the private part of the Qt classes. Here is the whole story:
The labels are drawn in the private part of QXYSeries (painter->drawText(position, pointLabel);):
void QXYSeriesPrivate::drawSeriesPointLabels(QPainter *painter, const QVector<QPointF> &points,
const int offset)
{
if (points.size() == 0)
return;
static const QString xPointTag(QLatin1String("#xPoint"));
static const QString yPointTag(QLatin1String("#yPoint"));
const int labelOffset = offset + 2;
painter->setFont(m_pointLabelsFont);
painter->setPen(QPen(m_pointLabelsColor));
QFontMetrics fm(painter->font());
// m_points is used for the label here as it has the series point information
// points variable passed is used for positioning because it has the coordinates
const int pointCount = qMin(points.size(), m_points.size());
for (int i(0); i < pointCount; i++) {
QString pointLabel = m_pointLabelsFormat;
pointLabel.replace(xPointTag, presenter()->numberToString(m_points.at(i).x()));
pointLabel.replace(yPointTag, presenter()->numberToString(m_points.at(i).y()));
// Position text in relation to the point
int pointLabelWidth = fm.width(pointLabel);
QPointF position(points.at(i));
position.setX(position.x() - pointLabelWidth / 2);
position.setY(position.y() - labelOffset);
painter->drawText(position, pointLabel);
}
}
drawSeriesPointLabels is called from the paint method of ScatterChartItem (this class is not included in the official documentation):
void ScatterChartItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
Q_UNUSED(option)
Q_UNUSED(widget)
if (m_series->useOpenGL())
return;
QRectF clipRect = QRectF(QPointF(0, 0), domain()->size());
painter->save();
painter->setClipRect(clipRect);
if (m_pointLabelsVisible) {
if (m_pointLabelsClipping)
painter->setClipping(true);
else
painter->setClipping(false);
m_series->d_func()->drawSeriesPointLabels(painter, m_points,
m_series->markerSize() / 2
+ m_series->pen().width());
}
painter->restore();
}
The ScatterChartItem in turn is created in the private part of QScatterSeries and can't be substituted with a custom class:
void QScatterSeriesPrivate::initializeGraphics(QGraphicsItem* parent)
{
Q_Q(QScatterSeries);
ScatterChartItem *scatter = new ScatterChartItem(q,parent);
m_item.reset(scatter);
QAbstractSeriesPrivate::initializeGraphics(parent);
}
What you might wanna try
Hide the original labels with setPointLabelsVisible(false); The labels will be drawn separately afterwards.
Subclass QChartView and reimplement the paintEvent, invoking first QChartView::paintEvent and then calling a custom function (lets say drawCustomLabels), which is a modified version of QXYSeriesPrivate::drawSeriesPointLabels. By calling drawCustomLabels pass:
a local painter drawing on the vieport of MyChartView,
the points as returned by QXYSeries::points,
the desired offset.
Here is an example of how the drawCustomLabels might look like:
void MyChartView::drawCustomLabels(QPainter *painter, const QVector<QPointF> &points, const int offset)
{
if (points.count() == 0)
return;
QFontMetrics fm(painter->font());
const int labelOffset = offset + 2;
painter->setFont(m_pointLabelsFont); // Use QXYSeries::pointLabelsFont() to access m_pointLabelsFont
painter->setPen(QPen(m_pointLabelsColor)); // Use QXYSeries::pointLabelsColor() to access m_pointLabelsColor
for (int n(0); n < points.count(); n++) {
QString pointLabel = "..."; // Set the desired label for the n-th point of the series
// Position text in relation to the point
int pointLabelWidth = fm.width(pointLabel);
QPointF position(points.at(n));
position.setX(position.x() - pointLabelWidth / 2);
position.setY(position.y() - labelOffset);
painter->drawText(position, pointLabel);
}
}

Related

How to animate the color of a QTableview cell in time once it's value gets updated?

I want to animate the color (in time) of a QTableview cell once it's value is updated via the connected data model to attract the end-users attention that something has changed.
The idea is that the color changes in gradients of f.i. blue, starts off blue just after the value change and fades to white in about 1 ~ 2 seconds.
I guess one has to use the QStyledItemDelegate here since I use the model-view concept (http://doc.qt.io/qt-5/model-view-programming.html).
One needs a trigger for the cell's value-change for the animation to start, this can be achieved via the paint() method since it is called on a value change. One can figure out the row and column, from the index parameter that is passed to paint(), to get a hold of which cell to animate.
So far so good, you can set the color of that cell to let's say blue.
Here comes the problem; the color shall fade towards white in time steps. So I was thinking about a QTimer in the QStyledItemDelegate class and maintain a kinda bookkeeping for the cell's that are being animated (could be a simple list of countdown values that are used to calculate the blue-gradient color. The lower the value the more the gradient goes towards white, once 0 the result is white which is the default color of the cell. On each QTimer timeout() event all values not equal to 0 are lowered by 1. The QStyledItemDelegate is only connected to the row of the QTableview that I want to color-animate i.e. where the value items are displayed.
Problem I face is that:
paint() is a const method so you cannot change any class
parameters.
how to re-paint the cell color on a QTimer event
(re-paint the whole QTableview is not god-style)
I managed to get it to work but I consider it a dirty solution. What I did is maintain the bookkeeping of the color animation for each cell in the data-model. I consider it a dirty solution because the color-animation is only a visual aspect so imho it should not reside in the data-model. In this way it is also not a portable solution i.e. in another project you have to rework a lot to get it to work.
I stripped down my application to the core problem. Full code can be found here (a working application): https://github.com/fruitCoder123/animated_tableview_cell
void TableViewDelegateValueWritable::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
// Paint background
uint8_t red_gradient = calculate_color_gradient(RGB_RED_MAX, RGB_RED_MIN, red_gradient_step_size, m_step_value);
uint8_t green_gradient = calculate_color_gradient(RGB_GREEN_MAX, RGB_GREEN_MIN, green_gradient_step_size, m_step_value);
painter->fillRect(option.rect, QColor(red_gradient, green_gradient, 255));
// Paint text
QStyledItemDelegate::paint(painter, option, index);
}
uint8_t TableViewDelegateValueWritable::calculate_color_gradient(const uint8_t MAX_COLOR, const uint8_t MIN_COLOR, const uint8_t step_size, uint8_t step) const
{
uint16_t color = (step_size * (1 + MAX_COLOR_GRADIENT_STEP - step)) + MIN_COLOR;
// Handle overflow and rounding errors
if(color > MAX_COLOR || color > (MAX_COLOR-(step_size/2)))
color = MAX_COLOR;
return static_cast<uint8_t>(color);
}
void TableViewDelegateValueWritable::gradient_timer_elapsed()
{
if(m_step_value)
{
m_step_value--;
m_timer->start(GRADIENT_TIMEOUT_VALUE);
//this->paint(m_painter, m_option, m_model_index);
}
}
I spent a horrific amount of hours to find a nice solution. I started with Qt a month ago so maybe I lack knowledge. Hopefully someone can give a hint how to solve it in a nice way - encapsulated in the view and not entangled with the data-model.
For the stated problems :
paint() is declared as const, you can use a mutable variable member and modify it whenever you want. For example :
class TableViewDelegateValueWritable : public QStyledItemDelegate
{
Q_OBJECT
mutable QTableView * m_view;
public:
explicit TableViewDelegateValueWritable(QTableView * view, QObject *parent){
m_view = view;
//...
}
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {
//...
int nFrame m_view->getFrameOfIndex(index);
drawFrame (painter, nFrame );
m_view->setFrameOfIndex(index, ++nFrame);
//...
}
//class body
}
Repaint the whole QTableView is not a god-style but repaint only the QTableView's viewport is a good option, in the MainWindow constructor :
m_db->insert_record(QString("my_val_1"), "0");
m_db->insert_record(QString("my_val_2"), "0");
m_db->insert_record(QString("my_val_3"), "0");
QTimer * timer = new QTimer( this );
connect( timer, &QTimer::timeout, this, [this](){
ui->tableView->viewport()->repaint();
});
timer->start( TIME_RESOLUTION ); //set to 1000ms
Here is a snippet to animate a cell when it was modified, the color will be changed each 1s, the method used is to subclass QSqlTableModel to track the modified cell (via dataChanged signal) :
enum MyDataRole {
ItemModifiedRole = Qt::UserRole + 1
};
class MySqlTableModel : public QSqlTableModel {
Q_OBJECT
QMap<int, QVariant > mapTimeout;
public:
MySqlTableModel( QObject *parent = Q_NULLPTR, QSqlDatabase db = QSqlDatabase() )
:QSqlTableModel( parent, db ) {
connect( this, &QSqlTableModel::dataChanged,
this, [this]( const QModelIndex &topLeft, const QModelIndex &bottomRight, const QVector<int> &roles )
{
for(int i = topLeft.row(); i <= bottomRight.row(); i ++ ){
mapTimeout.insert( i , QDateTime::currentDateTime() );
}
} );
}
//this data function will be called in the delegate paint() function.
QVariant data(const QModelIndex &idx, int role = Qt::DisplayRole) const Q_DECL_OVERRIDE
{
if( role != ItemModifiedRole )
return QSqlTableModel::data( idx, role );
QMap<int, QVariant>::const_iterator it = mapTimeout.find( idx.row() );
return it == mapTimeout.end() ? QVariant() : it.value();
}
void clearEffects() {
mapTimeout.clear();
}
};
And the delegate paint() function:
// background color manipulation
void TableViewDelegateValueWritable::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
QSqlTableModel * db_model = (QSqlTableModel *)index.model();
QVariant v = db_model->data( index, ItemModifiedRole );
if( !v.isNull() ){
QDateTime dt = v.toDateTime();
int nTimePassed = dt.secsTo( QDateTime::currentDateTime() );
int step_value = nTimePassed + 2;
uint8_t red_gradient = calculate_color_gradient( RGB_RED_MAX, RGB_RED_MIN, red_gradient_step_size, step_value );
uint8_t green_gradient = calculate_color_gradient( RGB_GREEN_MAX, RGB_GREEN_MIN, red_gradient_step_size, step_value );
painter->fillRect( option.rect, QColor( red_gradient, green_gradient, 255) );
}
// Paint text
QStyledItemDelegate::paint(painter, option, index);
}
You should use QSqlRecord way if possible instead of executing a sql statement. In fact, after each sql statement was executed, you call the select() function, this will reset the whole table model. Here is an example of insert/update record :
void dbase::insert_record(const QString &signal_name, const QString &value)
{
QSqlRecord r = db_model->record();
r.setValue( "signal_name", signal_name );
r.setValue( "signal_value", value );
db_model->insertRecord(-1, r );
}
void dbase::update_record(const QString &signal_name, const QString &new_value)
{
for(int row = 0; row < db_model->rowCount(); row ++ ){
QSqlRecord r = db_model->record( row );
if( r.value("signal_name").toString() == signal_name ){
r.setValue("signal_value", new_value );
db_model->setRecord( row, r );
break;
}
}
}

QListView only showing a single item in the view

I am utilizing the Model View Delegate framework used by Qt for displaying lists of objects with custom 'views' or layouts.
Background:
I require showing a country flag, country name, city name and an optional 'premium' rating star in a list, which can be selected by a user.
To achieve this, I use the following components:
Model - a QStandardItemModel, see doc page, which holds all the data of the QListView and interaction concerns, doc page
Delegate - For drawing/displaying the data in a custom layout fashion, I use a QStyledItemDelegate, see doc page.
View - For the view, a simple QListView will suffice, as this is a single column list containing a collection of objects with a custom layout.
Tutorials and Help:
Using the following tutorial(s),
1. a messageviewer application showing how to implement a detailed model-delegate-view concept in accordance with,
2. the basics of a simple messaging menu system for Nokia smartphones, I have been able to create, with relative ease, the desired layout for my QListView.
Problem:
I am required to add QStandardItem items to my model, which will be added to my view. I do so, and it is confirmed by the delegate where each item is drawn by the paint override method.
However, during runtime, the QListView only displays 1 item. But I can use my up/down arrow keys to select various other items in the list.
Please see code below:
Setting up MVC(delegate):
mainwindow.h
//...
QStandardItemModel *modelServers;
ServerDelegate* serverDelegate;
//...
mainwindow.cpp
modelServers = new QStandardItemModel(0);
serverDelegate = new ServerDelegate(0);
ui->listServers->setModel(modelServers);
ui->listServers->setItemDelegate(serverDelegate);
and adding items (QStandardItem's) to list:
for (int i = 0; i < someList->length(); ++i) {
Server server = someList->value(i);
QStandardItem *item = new QStandardItem();
item->setData(server.getCountryName, item->setData(QPixmap("", "PNG"), ServerDelegate::DataRole::CountryFlag);
item->setData(server.getCountry(), ServerDelegate::DataRole::CountryText);
item->setData(server.getCity(), ServerDelegate::DataRole::CityText);
item->setData(i, ServerDelegate::ListIndex);
//...
modelServer->appendRow(item)
}
The finally the list displays the data, however the list is only populated with items, but only the first has visible text and images.
note: when scrolling down, only the top item is visible, see images below for an example.
e.g.
Initial Loaded list:
One scroll down
Selecting an item with no text/images:
Additional Code below:
ServerDelegate class handling the custom layout
ServerDelegate.h
#ifndef SERVERDELEGATE_H
#define SERVERDELEGATE_H
#include <QApplication>
#include <QtGui>
#include <QStyledItemDelegate>
#include <QtWidgets>
#include <qglobal.h>
#include "global.h"
class ServerDelegate : public QStyledItemDelegate
{
Q_OBJECT
public:
ServerDelegate(QStyledItemDelegate* parent = 0);
virtual ~ServerDelegate();
enum DataRole{
CountryText = Qt::UserRole + 100,
CityText = Qt::UserRole+101,
CountryFlag = Qt::UserRole+102,
SideIconFlag = Qt::UserRole+103,
ListIndex = Qt::UserRole+105
};
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const;
private:
QFont fontCountry, fontCity;
};
#endif // SERVERDELEGATE_H
ServerDelegate.cpp
#include "serverdelegate.h"
ServerDelegate::ServerDelegate(QStyledItemDelegate *parent)
: QStyledItemDelegate(parent)
{
fontCountry = QApplication::font();
fontCountry.setBold(true);
fontCountry.setPointSize(QApplication::font().pointSize() + 3);
fontCity = QApplication::font();
fontCity.setItalic(true);
fontCity.setPointSize(QApplication::font().pointSize() - 1);
}
ServerDelegate::~ServerDelegate(){
}
QSize ServerDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const{
Q_UNUSED(index)
QSize totalCountrySize = QPixmap("","").size();
QSize totalSideIcon = QPixmap(":/res/images/premium", "PNG").size();
QFontMetrics fmCountry(fontCountry);
QFontMetrics fmCity(fontCity);
int fontHeight = (2 * 2) + (2 * 5) + fmCountry.height() + fmCity.height();
int iconHeight = (2 * 2) + (totalCountrySize.height() > totalSideIcon.height() ? totalCountrySize.height() : totalSideIcon.height());
int height = (fontHeight > iconHeight) ? fontHeight : iconHeight;
int width = option.rect.width();
QSize size = QSize(width, height);
return size;
}
void ServerDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const{
QStyledItemDelegate::paint(painter, option, index);
QRect rec = option.rect;
painter->save();
painter->setClipRect(rec);
QString countryText = index.data(DataRole::CountryText).toString();
QString cityText = index.data(DataRole::CityText).toString();
QPixmap countryFlag = QPixmap(qvariant_cast<QPixmap>(index.data(DataRole::CountryFlag)));
QPixmap sideIcon = qvariant_cast<QPixmap>(index.data(DataRole::SideIconFlag));
// Get a rectangle by size x, y.
// With cooridinates [0,0]; [x,0]; [x,y]; [0,y]
QRect topLine = option.rect,
bottomLine = option.rect;
// create top 'seperator' of X px's width, green in color;
topLine.setTop(0);
topLine.setLeft(0);
topLine.setRight(option.rect.width());
topLine.setBottom(2); // 1px down
painter->setPen(QColor(116, 183, 151));
painter->fillRect(topLine, QColor(116, 183, 151));
painter->drawRect(topLine);
// create bottom 'seperator' of X px's width, green in color;
bottomLine.setTop(option.rect.height() - 2);
bottomLine.setLeft(0);
bottomLine.setRight(option.rect.width());
bottomLine.setBottom(option.rect.height()); // 1px down
painter->setPen(QColor(116, 183, 151));
painter->fillRect(bottomLine, QColor(116, 183, 151));
painter->drawRect(bottomLine);
// create background rectangle
QRect content(0, topLine.bottom(), option.rect.width(), bottomLine.top());
painter->setPen(QColor(116, 183, 151));
painter->fillRect(content, QColor(116, 183, 151));
painter->drawRect(content);
// create content rectangles from content container.
QRect rectCountryFlag = content,
rectSideIcon = content;
// create country icon rectangle
QSize countryFlagSize = countryFlag.size();
int cFPos = (rectCountryFlag.height() / 2) - (countryFlagSize.height() / 2) - 8;
rectCountryFlag.setTop(cFPos);
rectCountryFlag.setBottom(content.height() - cFPos);
rectCountryFlag.setLeft(20 - 8);
rectCountryFlag.setRight(20 + 16 + countryFlagSize.width());
painter->drawPixmap(rectCountryFlag, countryFlag);
// create side icon rectangle
QSize sideIconSize = sideIcon.size();
int siPos = (rectSideIcon.height() / 2) - (sideIconSize.height() / 2) - 4;
rectSideIcon.setTop(siPos);
rectSideIcon.setBottom(content.height() - siPos);
rectSideIcon.setLeft(rec.width() - (10 + 8 + sideIconSize.width()));
rectSideIcon.setRight(rec.width() - 10);
painter->drawPixmap(rectSideIcon, sideIcon);
const QRect textContent(rectCountryFlag.right() + 5 + 20, content.top() + 5,
rectSideIcon.left() - 5, content.bottom() - 5);
// create country text rectangle
QRect rectCountryText = content,
rectCityText = content;
rectCountryText.setLeft(textContent.left());
rectCountryText.setTop(textContent.top());
rectCountryText.setRight(textContent.right());
rectCountryText.setBottom(qRound(textContent.height() * 0.6) - 5);
painter->setPen(QColor(26, 26, 26));
painter->setFont(fontCountry);
painter->drawText(rectCountryText, countryText);
// create city text rectangle
rectCityText.setLeft(textContent.left() + ( 2 * 5));
rectCityText.setTop(rectCountryText.bottom() + 5);
rectCityText.setRight(textContent.right());
rectCityText.setBottom(textContent.height());
painter->setPen(QColor(77, 77, 77));
painter->setFont(fontCity);
painter->drawText(rectCityText, cityText);
// restore painter
painter->restore();
}
Before I post my answer, a big shoutout to scopchanov for his assistance and example provided, also hinting to the fact that an offset occurs on each call to the paint, something that I was blissfully unaware of.
Problem Explained:
The offset values provided by option.rect is the same QSize which is returned by the sizeHint method. In my case, my concern was with the y offset which had a value of 56.
My Understanding
Using the concept of the iterative offset value, I modified my code (which had previously the desired output), where I assumed that the paint method was drawn from an origin of [0,0], where infact I had to account for the offset aswel, i.e. I was not provided with a container which was placed at the next QListView item's location, instead I was given the location of the next QListView's item start point, and am required to build the item from there.
The solution:
In my case, I had the desired item layout, but items were drawn ontop of each other, due to the [0,0] origin, causing the single item effect. After changing a few values, and building a dependency hierachy of sorts, I was presented with a list of items having the desired layout.
The Code
Updated ServerDelegate.cpp
#include "serverdelegate.h"
ServerDelegate::ServerDelegate(QStyledItemDelegate *parent)
: QStyledItemDelegate(parent)
{
fontCountry = QApplication::font();
fontCountry.setBold(true);
fontCountry.setPointSize(QApplication::font().pointSize() + 3);
fontCity = QApplication::font();
fontCity.setItalic(true);
fontCity.setPointSize(QApplication::font().pointSize() - 1);
}
ServerDelegate::~ServerDelegate(){
}
QSize ServerDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const{
Q_UNUSED(index)
QSize totalCountrySize = Global::getCountryFlagFromCache(index.data(DataRole::CountryText).toString()).size();
QSize totalSideIcon = QPixmap(":/res/images/premium", "PNG").size();
QFontMetrics fmCountry(fontCountry);
QFontMetrics fmCity(fontCity);
int fontHeight = (2 * AppGlobal::Style_List_Seperator_Width) + (2 * AppGlobal::Style_List_Text_Item_Margin) + fmCountry.height() + fmCity.height();
int iconHeight = (2 * AppGlobal::Style_List_Seperator_Width) + (totalCountrySize.height() > totalSideIcon.height() ? totalCountrySize.height() : totalSideIcon.height());
int height = (fontHeight > iconHeight) ? fontHeight : iconHeight;
int width = option.rect.width();
QSize size = QSize(width, height);
return size;
}
void ServerDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const{
QStyledItemDelegate::paint(painter, option, index);
QFontMetrics fmCountry(fontCountry);
QFontMetrics fmCity(fontCity);
QRect rec = option.rect;
painter->save();
painter->setClipRect(rec);
QString countryText = index.data(DataRole::CountryText).toString();
QString cityText = index.data(DataRole::CityText).toString();
QPixmap countryFlag = QPixmap(qvariant_cast<QPixmap>(index.data(DataRole::CountryFlag)));
QPixmap sideIcon = qvariant_cast<QPixmap>(index.data(DataRole::SideIconFlag));
// Get a rectangle by size x, y.
// With cooridinates [0,0]; [x,0]; [x,y]; [0,y]
QRect topLine = option.rect,
bottomLine = option.rect;
// create top 'seperator' of X px's width, green in color;
topLine.setTop(rec.top());
topLine.setLeft(rec.left());
topLine.setRight(rec.right());
topLine.setBottom(rec.top() + AppGlobal::Style_List_Seperator_Width); // 1px down
painter->setPen(AppGlobal::Style_List_Seperator_Color);
painter->fillRect(topLine, AppGlobal::Style_List_Seperator_Color);
painter->drawRect(topLine);
// create bottom 'seperator' of X px's width, green in color;
bottomLine.setTop(rec.bottom() - AppGlobal::Style_List_Seperator_Width);
bottomLine.setLeft(rec.left());
bottomLine.setRight(rec.right());
bottomLine.setBottom(rec.bottom()); // 1px down
painter->setPen(AppGlobal::Style_List_Seperator_Color);
painter->fillRect(bottomLine, AppGlobal::Style_List_Seperator_Color);
painter->drawRect(bottomLine);
// create background rectangle
QRect content(rec.left(), topLine.bottom(), (rec.right() - rec.left()), (bottomLine.top() - topLine.bottom()));
painter->setPen(AppGlobal::Style_List_Background_Color);
painter->fillRect(content, ((option.state & QStyle::State_MouseOver) ? AppGlobal::Style_List_Hover_Color : AppGlobal::Style_List_Background_Color ));
painter->drawRect(content);
// create content rectangles from content container.
QRect rectCountryFlag = content,
rectSideIcon = content;
// create country icon rectangle
QSize countryFlagSize = countryFlag.size();
int cFPos = ((rectCountryFlag.bottom() - rectCountryFlag.top()) / 2) - (countryFlagSize.height() / 2) - 8;
rectCountryFlag.setTop(rectCountryFlag.top() + cFPos);
rectCountryFlag.setBottom(content.bottom() - cFPos);
rectCountryFlag.setLeft(AppGlobal::Style_List_Left_Item_Margin - 8);
rectCountryFlag.setRight(AppGlobal::Style_List_Left_Item_Margin + 16 + countryFlagSize.width());
painter->drawPixmap(rectCountryFlag, countryFlag);
// create side icon rectangle
QSize sideIconSize = sideIcon.size();
int siPos = ((rectSideIcon.bottom() - rectSideIcon.top()) / 2) - (sideIconSize.height() / 2) - 4;
rectSideIcon.setTop(rectSideIcon.top() + siPos);
rectSideIcon.setBottom(content.bottom() - siPos);
rectSideIcon.setLeft(rec.width() - (AppGlobal::Style_List_Right_Item_Margin + 8 + sideIconSize.width()));
rectSideIcon.setRight(rec.width() - AppGlobal::Style_List_Right_Item_Margin);
painter->drawPixmap(rectSideIcon, sideIcon);
int textContentLeft = rectCountryFlag.right() + AppGlobal::Style_List_Text_Item_Margin + AppGlobal::Style_List_Left_Item_Margin,
textContentTop = content.top() + AppGlobal::Style_List_Text_Item_Margin;
const QRect textContent( textContentLeft , textContentTop,
(rectSideIcon.left() - AppGlobal::Style_List_Text_Item_Margin) - textContentLeft, (content.bottom() - AppGlobal::Style_List_Text_Item_Margin) - textContentTop);
// create country text rectangle
QRect rectCountryText = content,
rectCityText = content;
rectCountryText.setLeft(textContent.left());
rectCountryText.setTop(textContent.top());
rectCountryText.setRight(textContent.right());
rectCountryText.setBottom(textContent.top() + fmCountry.height());
painter->setPen(AppGlobal::Style_Heading_Color);
painter->setFont(fontCountry);
painter->drawText(rectCountryText, countryText);
// create city text rectangle
rectCityText.setLeft(textContent.left() + ( 2 * AppGlobal::Style_List_Text_Item_Margin));
rectCityText.setTop(rectCountryText.bottom());
rectCityText.setRight(textContent.right());
rectCityText.setBottom(textContent.bottom() + fmCity.height());
painter->setPen(AppGlobal::Style_SubText_Color);
painter->setFont(fontCity);
painter->drawText(rectCityText, cityText);
// restore painter
painter->restore();
}
The problem you describe is caused by a mistake in the reimplementation of the paint method in the custom QStyledItemDelegate. You assume (0, 0) as the origin and paint everything relative to that point. However, each item has a vertical offset, which you have to take into account by using the geometry of QStyleOption::rect instead.
Here is an example of a fancy delegate with custom drawings and animations to help you further.

QGraphicsScene/View Scale Understanding

I'm lost with understanding the scale value of QGraphicsScene/View.
Here is how I'm placing my targets in the scene.
QPointF Mainwindow::pointLocation(double bearing, double range){
int offset = 90; //used to offset Cartesian system
double centerX = baseSceneSize/2;//push my center location out to halfway point
double centerY = baseSceneSize/2;
double newX = centerX + qCos(qDegreesToRadians(bearing - offset)) * range;
double newY = centerY + qSin(qDegreesToRadians(bearing - offset)) * range;
QPointF newPoint = QPointF(newX, newY);
return newPoint;
}
So each target has a bearing and range. As long as I don't scale, or zoom, the scene, these values work sufficiently. My problem is that I need to implement the zooming.
Here's where things go wrong:
I have a target at Bearing 270, Range 10.
When the app runs, and my vertical slider is at a value of zero, I can see this target in my view. I should not. I need for this target to only come into view when the slider has gotten to a value of 10. Just think each position value on the slider equates to 1 nautical mile. So if a target is at 10 NMs it should only be visible once the slider is >= 10.
here is how I'm doing the zooming:
void MainWindow:: on_PlotSlider_sliderMoved(int position){
const qreal factor = 1.01;
viewScaleValue = qPow(factor, -position);//-position to invert the scale
QMatrix matrix;
matrix.scale(viewScaleValue, viewScaleValue);
view->setMatrix(matrix);
}
I've tried making the View bigger, the Scene bigger, but nothing is having the proper effect.
Here is my Scene setup:
view = ui->GraphicsView;
scene = new QGraphicsScene(this);
int baseSize = 355;
scene->setSceneRect(0,0,baseSize,baseSize);
baseSceneSize = scene->sceneRect().width();
view->setScene(scene);
How do I take the range of my target and push it out into the scene so that it lines up with the slider value?
QGraphicsView::fitInView is everything you need to select the displayed range and center the view.
Here's how you might do it. It's a complete example.
// https://github.com/KubaO/stackoverflown/tree/master/questions/scene-radar-40680065
#include <QtWidgets>
#include <random>
First, let's obtain random target positions. The scene is scaled in e.g. Nautical Miles: thus any coordinate in the scene is meant to be in these units. This is only a convention: the scene otherwise doesn't care, nor does the view. The reference point is at 0,0: all ranges/bearings are relative to the origin.
QPointF randomPosition() {
static std::random_device dev;
static std::default_random_engine eng(dev());
static std::uniform_real_distribution<double> posDis(-100., 100.); // NM
return {posDis(eng), posDis(eng)};
}
Then, to aid in turning groups of scene items on and off (e.g. graticules), it helps to have an empty parent item for them:
class EmptyItem : public QGraphicsItem {
public:
QRectF boundingRect() const override { return QRectF(); }
void paint(QPainter *, const QStyleOptionGraphicsItem *, QWidget *) override {}
};
A scene manager sets up the display. The empty items act as item collections and they can be easily made hidden/visible without having to modify child items. They also enforce the relative Z-order of their children.
class SceneManager : public QObject {
Q_OBJECT
Q_PROPERTY(bool microGraticuleVisible READ microGraticuleVisible WRITE setMicroGraticuleVisible)
QGraphicsScene m_scene;
QPen m_targetPen{Qt::green, 1};
EmptyItem m_target, m_center, m_macroGraticule, m_microGraticule;
An event filter can be installed on the view to signal when the view has been resized. This can be used to keep the view centered in spite of resizing:
bool eventFilter(QObject *watched, QEvent *event) override {
if (event->type() == QEvent::Resize
&& qobject_cast<QGraphicsView*>(watched))
emit viewResized();
return QObject::eventFilter(watched, event);
}
Scene has the following Z-order: center cross, macro- and micro-graticule, then the targets are on top.
public:
SceneManager() {
m_scene.addItem(&m_center);
m_scene.addItem(&m_macroGraticule);
m_scene.addItem(&m_microGraticule);
m_scene.addItem(&m_target);
m_targetPen.setCosmetic(true);
addGraticules();
}
We can monitor a graphics view for resizing; we also expose the visibility of the micro graticule.
void monitor(QGraphicsView *view) { view->installEventFilter(this); }
QGraphicsScene * scene() { return &m_scene; }
Q_SLOT void setMicroGraticuleVisible(bool vis) { m_microGraticule.setVisible(vis); }
bool microGraticuleVisible() const { return m_microGraticule.isVisible(); }
Q_SIGNAL void viewResized();
Targets can be randomly generated. A target has a fixed size in view coordinates. Its position, though, is subject to any scene-to-view transformations.
The pens for targets and graticules are cosmetic pens: their width is given in the view device units (pixels), not scene units.
void newTargets(int count = 200) {
qDeleteAll(m_target.childItems());
for (int i = 0; i < count; ++i) {
auto target = new QGraphicsEllipseItem(-1.5, -1.5, 3., 3., &m_target);
target->setPos(randomPosition());
target->setPen(m_targetPen);
target->setBrush(m_targetPen.color());
target->setFlags(QGraphicsItem::ItemIgnoresTransformations);
}
}
The graticules are concentric circles centered at the origin (range reference point) and a cross at the origin. The origin cross has fixed size in view units - this is indicated by the ItemIgnoresTransformations flag.
void addGraticules() {
QPen pen{Qt::white, 1};
pen.setCosmetic(true);
auto center = {QLineF{-5.,0.,5.,0.}, QLineF{0.,-5.,0.,5.}};
for (auto l : center) {
auto c = new QGraphicsLineItem{l, &m_center};
c->setFlags(QGraphicsItem::ItemIgnoresTransformations);
c->setPen(pen);
}
for (auto range = 10.; range < 101.; range += 10.) {
auto circle = new QGraphicsEllipseItem(0.-range, 0.-range, 2.*range, 2.*range, &m_macroGraticule);
circle->setPen(pen);
}
pen = QPen{Qt::white, 1, Qt::DashLine};
pen.setCosmetic(true);
for (auto range = 2.5; range < 9.9; range += 2.5) {
auto circle = new QGraphicsEllipseItem(0.-range, 0.-range, 2.*range, 2.*range, &m_microGraticule);
circle->setPen(pen);
}
}
};
The mapping between the scene units and the view is maintained as follows:
Each time the view range is changed (from e.g. the combo box), the QGraphicsView::fitInView method is called with a rectangle in scene units (of nautical miles). This takes care of all of the scaling, centering, etc.. E.g. to select a range of 10NM, we'd call view.fitInView(QRect{-10.,-10.,20.,20.), Qt::KeepAspectRatio)
The graticule(s) can be disabled/enabled as appropriate for a given range to unclutter the view.
int main(int argc, char ** argv) {
QApplication app{argc, argv};
SceneManager mgr;
mgr.newTargets();
QWidget w;
QGridLayout layout{&w};
QGraphicsView view;
QComboBox combo;
QPushButton newTargets{"New Targets"};
layout.addWidget(&view, 0, 0, 1, 2);
layout.addWidget(&combo, 1, 0);
layout.addWidget(&newTargets, 1, 1);
view.setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
view.setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
view.setBackgroundBrush(Qt::black);
view.setScene(mgr.scene());
view.setRenderHint(QPainter::Antialiasing);
mgr.monitor(&view);
combo.addItems({"10", "25", "50", "100"});
auto const recenterView = [&]{
auto range = combo.currentText().toDouble();
view.fitInView(-range, -range, 2.*range, 2.*range, Qt::KeepAspectRatio);
mgr.setMicroGraticuleVisible(range <= 20.);
};
QObject::connect(&combo, &QComboBox::currentTextChanged, recenterView);
QObject::connect(&mgr, &SceneManager::viewResized, recenterView);
QObject::connect(&newTargets, &QPushButton::clicked, [&]{ mgr.newTargets(); });
w.show();
return app.exec();
}
#include "main.moc"
So as Kuba suggested, I was overcomplicating this a bit. With his help this is what ended up getting me the result I needed. Not 100% sure on some of it, but for now it's working the way I need it to.
view = ui->GraphicsView;
scene = new QGraphicsScene(this);
int baseSize = 1000; // MAGIC value that works, anything other than this, not so much
view->setSceneRect(0,0,baseSize,baseSize);
baseViewSize = view->sceneRect().width();
view->setScene(scene);
My drawPoint method works fine, no changes were needed.
Finally, here is my slider
void MainWindow:: on_PlotSlider_sliderMoved(int position){
const qreal factor = 1.01;
viewScaleValue = qPow(factor, -position);//-position to invert the scale
QMatrix matrix;
// below is the update, again 6 is a MAGIC number, no clue why 6 works...
matrix.scale((baseViewSize/6 / position, baseViewSize/6 / position);
view->setMatrix(matrix);
}
While my problem is solved, I would love some explanation as to my 2 MAGIC numbers.
Why does it all only work is the baseSize is 1000?
Why does it only scale correctly if I divide the BaseViewSize by 6?

Qt Scaling Custom QGraphicsItem with unscaled text

I'm trying to create customObject (rectangle and it inherit from QGraphicsItem) that will be painted on scene with ceratin text(stored in attribute), but when I scale it - i wish to keep same size of text. Here is my over. paint function:
void CustomRectangle::paint(QPainter *painter, const QStyleOptionGraphicsItem *options, QWidget *widget)
{
QColor currentColor = get_ColorByCurrentState();
QRectF rect = boundingRect();
QPen pen(currentColor, Own_LineWidith);
painter->setPen(pen);
painter->drawRect(rect);
QRectF rect_text(rect.x(), rect.y(),100,100);
painter->drawText(rect_text,this->getText() );
}
and my two scaling functions:
void CustomObject::scaleUp()
{
scale(ScaleFactor_X,ScaleFactor_Y);
}
void CustomObject::scaleDown()
{
scale(1/ScaleFactor_X,1/ScaleFactor_Y);
}
But text still keep scaling along with rectangle.
EDIT 1
I tried adding it another way, i nfucntion that creates and adds my rectangle to scene (here - named "newObject"), but result is still the same.
QGraphicsTextItem* GTI = new QGraphicsTextItem(newObject->toStringForScene(), newObject);
I'm beginign to think that I shoud create each text object as separeted object and save it different list. Ofcours, i would have to update it then, whenever it's object moved.
Try this:
QGraphicsTextItem* gti = new QgraphicsTextItem("text");
gti->setFont(QFont("Arial", 18));
// this is important
gti->setFlag(QGraphicsTextItem::ItemIgnoresTransformations, true);
scene->addItem(gti);
The QGraphicsItem::ItemIgnoresTransformations flag prevents your graphics item to be scaled when you scale your view (QGraphicsView).
That means that you need a separated item for rendering text. But it can be a child item of your rectangle item.
I resolved this with QGraphicsTextItem's poitner as class's attribute.
QGraphicsTextItem* GTI;
I initialzie it in constructor:
GTI_Description = new QGraphicsTextItem(this->toStringForScene());
and then I call function to updated it's X and Y:
void updateTextPosition()
{
GTI->setX( this->x() );
GTI->setY( this->y() );
}
and to add it to the scene:
addTextToScene(DragScene* _scene)
{
updateDescriptionPosition();
_scene->addItem(GTI_GTI);
_scene->update();
}
Then i just call updateTextPosition() whenerver I change positions (in my mouseRelease event's handler).

what is the qtransform in QGraphicsScene::itemAt()

I create a custom QGraphicsItem. And overwrite the boundingRect() and paint().
QRectF myTile::boundingRect() const
{
return QRectF(xPos*10, yPos*10, 10, 10);
}
void myTile::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
QRectF rec = boundingRect();
int gvi = value * 255;
QColor gv(gvi, gvi, gvi, 255);
QBrush brush(gv);
painter->fillRect(rec, brush);
painter->drawRect(rec);
}
Then I use addItem() to add a item to a scene. Now I want to get it from the scene by its position. I find the itemAt function. But the problem is I don't know what is the const QTransform & deviceTransform. What should I use for the QTransform?.
Because I didn't implement any transform in the QGraphicsItem. This confuses me.
QGraphicsItem * QGraphicsScene::itemAt ( const QPointF & position, const QTransform & deviceTransform ) const
Returns the topmost visible item at the specified position, or 0 if
there are no items at this position. deviceTransform is the
transformation that applies to the view, and needs to be provided if
the scene contains items that ignore transformations. This function
was introduced in Qt 4.6.
So I would say, if you have the need to transform some items and ignore the others, you can simply go with the default value of QTransform() or even better the QGraphicsView::transform() const.
soo long zai