Button grid with label rotate 90 degree

[whitefurrows]

I would like to build the follow grid with the qt designer:



Now i have two problems:

1.) How can i rotate a label 90 degree?
2.) How can i build a button grid. If a button compressed should be a cross indicated and only one button can be pressed?

Thanks in advance

[Lykurg]

1.) How can i rotate a label 90 degree?

You have to subclass QLabel and do the painting yourself.

2.) How can i build a button grid. If a button compressed should be a cross indicated and only one button can be pressed?

use QGridLayout with the buttons and setAutoExclusive to them. For the cross on the buttom a) subclass and do the painting or b) use style sheets ": on" and ": off"

[whitefurrows]

You have to subclass QLabel and do the painting yourself

OK, i try it.

use QGridLayout with the buttons and setAutoExclusive to them. For the cross on the buttom a) subclass and do the painting or b) use style sheets ": on" and ": off"

I think a QGridLayout with buttons looks like dirty. You know a qt widget as MSFlexGrid or can i use a tablewidget? If your answer is yes how can i customize the tablewidge for the right look?

[Lykurg]

Optical there is no difference if you use a QGridLayout or a QTableView, but QGridLayout is more easier.
(Quick designer work with grid layout and buttons look like your screenshot)

[whitefurrows]

Optical there is no difference if you use a QGridLayout or a QTableView, but QGridLayout is more easier.
(Quick designer work with grid layout and buttons look like your screenshot)

Thank you, the screenshot looks good. I can set a cross(image) or color with css (QPushButton:checked{ background-color: red;}) and can controlling the button state with checkable and autoExclusive. But i can't get a look for my QGridLayout like your screenshot.

I have attached my form, please can you modified the form for my?

How can i query or set the state for checked button. I mine a function like setPushButtonChecked( int row, int column ). I need it to save and restore the user input.

Thanks in advanced

[wysota]

I would create a completely custom widget for this...

[whitefurrows]

I would create a completely custom widget for this...

OK, and how can i do that? How looks that widget?

[wysota]

It looks how you implement it to look. Just subclass QWidget and implement what you need. Drawing is simple, handling mouse should be easy as well.

[luf]

You can also have a look at the Qxt library:

Push button with vertical text:
http://doc.libqxt.org/0.5.0/classQxtPushButton.html

Download it from here: http://libqxt.org/

[whitefurrows]

Hi,

thank you, Qxt library is nice.

I know how can i subclass QWidget and rotate a label or button 90 degrees.

Im not sure what widget i can implement to bulid a grid of buttons and query the row or column for the checked button. You mine i should draw my own grid? I think if i draw a grid i don't have the functionality of a button. Is it right?

Can you tell me ho can i do that?

[wysota]

A functionality of the button comes down to clicking that you can handle in three lines of code by reimplementing mouseReleaseEvent().

[whitefurrows]

A functionality of the button comes down to clicking that you can handle in three lines of code by reimplementing mouseReleaseEvent().

I can reimplement mouseReleaseEvent(), but is a little bit complex for me to paint a grid of buttons that have a different state and only one butten can be pressed. You know a example for that?

If you don't have a example i have another idea, i subclass a QGraphicsItem and add one QButton. This GraphicItem would add to a QGraphicsScene and display in a QGraphicsView. You think that is OK too?

[Lykurg]

You think that is OK too?

If you want the total overkill, then yes

[whitefurrows]

I have try to paint a button grid and rotate a label.

To rotate the label i have subclass a QLabel and rotate the coordinate system the given angle clockwise 270 degree in the paintEvent(). The label text was rotated but not paint on the right place on the label.

To paint a button grid i have subclass a QWidget an reimplement the paint paintEvent() and mousePressEvent(). The grid looks dirty, code a function to query the row or column is difficult and the grid size is less than real size. The real size circa 15 x 15.

I have attached a example. Can you help me to make it professionally, please?

[whitefurrows]

Please can you help me, write a function to query or set the state for checked button? It would be nice if i can build the grid a little bit dynamic in size!

I have subclass a QWidget to build a button grid. I build the grid like this:

QGridLayout* layout = new QGridLayout(this);
	layout->setMargin(3);
	layout->setSpacing(0);
 
	// Create cells
	for (int i = 0; i < 9; ++i) {
		int col = (i % 3) * 3;
		int max_col = col + 3;
		int row = (i / 3) * 3;
		int max_row = row + 3;
 
		QGridLayout* box = new QGridLayout;
		box->setMargin(2);
		box->setSpacing(1);
		layout->addLayout(box, row / 3, col / 3);
 
		for (int r = row; r < max_row; ++r) {
			for (int c = col; c < max_col; ++c) {
				//Cell* cell = new Cell(c, r, this, this);
				QPushButton* cell = new QPushButton(this);
				cell->setCheckable(true);
				cell->setAutoExclusive(true);
				box->addWidget(cell, r - row, c - col);
				m_cells[c][r] = cell;
			}
		}
	}

QGridLayout* layout = new QGridLayout(this);
	layout->setMargin(3);
	layout->setSpacing(0);

	// Create cells
	for (int i = 0; i < 9; ++i) {
		int col = (i % 3) * 3;
		int max_col = col + 3;
		int row = (i / 3) * 3;
		int max_row = row + 3;

		QGridLayout* box = new QGridLayout;
		box->setMargin(2);
		box->setSpacing(1);
		layout->addLayout(box, row / 3, col / 3);

		for (int r = row; r < max_row; ++r) {
			for (int c = col; c < max_col; ++c) {
				//Cell* cell = new Cell(c, r, this, this);
				QPushButton* cell = new QPushButton(this);
				cell->setCheckable(true);
				cell->setAutoExclusive(true);
				box->addWidget(cell, r - row, c - col);
				m_cells[c][r] = cell;
			}
		}
	}

To copy to clipboard, switch view to plain text mode 

Here is my solution for all other user to rotate a QLabel:

myLabel.h

#ifndef MYLABEL_H
#define MYLABEL_H
 
#include <QLabel>
 
class MyLabel : public QLabel{
	Q_OBJECT
 
public:
    MyLabel(QWidget *parent = 0);
    ~MyLabel();
 
	bool rotateText(float degrees);
 
private:
	float rotation;
 
protected:
	void paintEvent(QPaintEvent *);
	void drawRotatedText(QPainter *painter, float degrees, int x, int y, const QString &text);
};
 
#endif

#ifndef MYLABEL_H
#define MYLABEL_H

#include <QLabel>

class MyLabel : public QLabel{
	Q_OBJECT

public:
    MyLabel(QWidget *parent = 0);
    ~MyLabel();

	bool rotateText(float degrees);

private:
	float rotation;

protected:
	void paintEvent(QPaintEvent *);
	void drawRotatedText(QPainter *painter, float degrees, int x, int y, const QString &text);
};

#endif

To copy to clipboard, switch view to plain text mode 

myLabel.cpp:

#include "myLabel.h"
#include <QPainter>
 
MyLabel::MyLabel(QWidget *parent) : QLabel(parent)
{
	this->rotateText(NULL);
}
 
bool MyLabel::rotateText(float degrees)
{
	if (degrees >=0 && degrees <= 360)
	{
		rotation=degrees;
		update();
		return TRUE;
	}
	return FALSE;
}
 
void MyLabel::paintEvent(QPaintEvent *)
{
	QPainter p;
	p.begin( this );
	p.setFont(font());
	drawRotatedText(&p, rotation, width() / 2, height() / 2, text());
	p.end();
}
 
void MyLabel::drawRotatedText(QPainter *painter, float degrees, int x, int y, const QString &text)
{
	painter->save();
	painter->translate(x, y);
	painter->rotate(degrees);
	painter->drawText(0, 0, text);
	painter->restore();	
}

#include "myLabel.h"
#include <QPainter>

MyLabel::MyLabel(QWidget *parent) : QLabel(parent)
{
	this->rotateText(NULL);
}

bool MyLabel::rotateText(float degrees)
{
	if (degrees >=0 && degrees <= 360)
	{
		rotation=degrees;
		update();
		return TRUE;
	}
	return FALSE;
}

void MyLabel::paintEvent(QPaintEvent *)
{
	QPainter p;
	p.begin( this );
	p.setFont(font());
	drawRotatedText(&p, rotation, width() / 2, height() / 2, text());
	p.end();
}

void MyLabel::drawRotatedText(QPainter *painter, float degrees, int x, int y, const QString &text)
{
	painter->save();
	painter->translate(x, y);
	painter->rotate(degrees);
	painter->drawText(0, 0, text);
	painter->restore();	
}

To copy to clipboard, switch view to plain text mode