Monthly Archives: October 2013

Qt 5.1.1 with OpenGL for Windows 32-bit Visual Studio 2012

In case you would like to use the latest version of Qt using OpenGL instead of ANGLE in combination with Visual Studio 2012 and target a 32-bit platform you will be disappointed to find out that there are no precompiled libraries available from the Qt-Project website...

Instead of using precompiled libraries you need to compile Qt yourself if you still want to use Qt with Visual Studio 2012.

Requirements

In order to compile Qt you first need a couple of prerequisites, be sure to get the 32-bit versions.

  1. Download and install Python http://www.python.org/getit/ (x86).
  2. Download and install Perl http://strawberryperl.com/ (32 bit).
  3. Download jom http://qt-project.org/wiki/jom.
  4. Download and extract the Qt sources from http://qt-project.org/downloads.
    • You need to find the zip for windows, it's below all the installer downloads.qtdownload
  5. Copy the jom contents to the Qt sources directory.
  6. Make sure python and perl are accessible everywhere from the commandline by testing "python --version" and "perl -v".qtcheck

Compiling the Qt sources

  1. Open the Visual Studio 2012 command prompt.
    • It should be located in Start > Microsoft Visual Studio 2012 > Visual Studio Tools > VS2012 x86 Native Tools Command Prompt.
    • Be sure you are opening the x86 version and not the x64 version!
  2. Navigate to the Qt sources directory by using "cd <directory here>".
  3. Type "configure -developer-build -opensource -opengl desktop -nomake examples -nomake tests"
    • It should ask you to accept the terms of the license.
    • Then it should start configuring the Qt sources for compilation, this will just take a minute.
  4. Finally type "jom" to compile Qt.
    • This can take a long time, around 30-60 minutes depending on how fast your computer is. It took me 50 minutes to compile...

Integrating Qt with Visual Studio 2012

After you compiled the Qt libraries you can install the Visual Studio 2012 Add-in for Qt to make life easier. You can get the Add-in from the downloads page under "Other downloads": http://qt-project.org/downloads.

In Visual Studio 2012 I pointed Qt to the qtbase directory in the Qt sources directory by going in the Qt Options. Qt5 > Qt Options. Add a new Qt version and select the qtbase directory, pick a suitable name and press OK. Use this Qt version in your project and you should be able to compile for 32-bit platforms.

References

  1. http://zulis.blogspot.nl/2013/03/compiling-qt-501-with-visual-studio-2012.html
  2. http://stackoverflow.com/questions/15826893/downloading-and-integrating-qt5-with-visual-studio-2012
  3. http://qt-project.org/downloads

Create something like the Widget Box as in the Qt Designer

Widget Box

Widget Box

Widget Box

There is something called the Widget Box in the Qt Designer. It contains a list of widgets separated by categories. Each category button can be clicked in order to expand and collapse the list below the button.

You might want something like the Widget Box for one reason or another, to display your own collapsible list of items.

Tree Widget

In my approach in recreating the Widget Box I used a Tree Widget because it already has the basic idea of expanding and collapsing items in the list to display and hide its child widgets. The gist of turning the Tree Widget into a Widget Box is adding buttons as top level items and adding a frame with a layout as the child of those top level items. The button should then expand and collapse its own Tree Widget Item when clicked to display and hide the contents of a category. The button will require a custom class inheriting the QPushButton class in order to expand and collapse the Tree Widget Items.

You might want to disable root decoration and set indentation to 0 on the Tree Widget to turn it into a flat list. The custom button type is named QtCategoryButton in this snippet.

MyApplication::MyApplication(QWidget *parent, Qt::WFlags flags)
	: QMainWindow(parent, flags)
{
	ui.setupUi(this);

	ui.treeWidget->setRootIsDecorated(false);
	ui.treeWidget->setIndentation(0);

	// First category
	{
		QTreeWidgetItem* pCategory = new QTreeWidgetItem();
		ui.treeWidget->addTopLevelItem(pCategory);
		ui.treeWidget->setItemWidget(pCategory, 0,
			new QtCategoryButton("Category 1", ui.treeWidget, pCategory));

		QFrame* pFrame = new QFrame(ui.treeWidget);
		QBoxLayout* pLayout = new QVBoxLayout(pFrame);
		pLayout->addWidget(new QPushButton("Btn1"));
		pLayout->addWidget(new QPushButton("Btn2"));

		QTreeWidgetItem* pContainer = new QTreeWidgetItem();
		pContainer->setDisabled(true);
		pCategory->addChild(pContainer);
		ui.treeWidget->setItemWidget(pContainer, 0, pFrame);
	}

	// Second category
	{
		QTreeWidgetItem* pCategory = new QTreeWidgetItem();
		ui.treeWidget->addTopLevelItem(pCategory);
		ui.treeWidget->setItemWidget(pCategory, 0,
			new QtCategoryButton("Category 2", ui.treeWidget, pCategory));

		QFrame* pFrame = new QFrame(ui.treeWidget);
		QBoxLayout* pLayout = new QHBoxLayout(pFrame);
		pLayout->addWidget(new QPushButton("Btn1"));
		pLayout->addWidget(new QPushButton("Btn2"));

		QTreeWidgetItem* pContainer = new QTreeWidgetItem();
		pContainer->setDisabled(true);
		pCategory->addChild(pContainer);
		ui.treeWidget->setItemWidget(pContainer, 0, pFrame);
	}
}

Custom button

The custom button is a quite simple class, all it does it catch the pressed() signal and expands or collapses the Tree Widget Item it is bound to.

class QtCategoryButton : public QPushButton
{
	Q_OBJECT
public:
	QtCategoryButton(const QString& a_Text, QTreeWidget* a_pParent,
		QTreeWidgetItem* a_pItem);

private slots:
	void ButtonPressed();

private:
	QTreeWidgetItem* m_pItem;
};

 

QtCategoryButton::QtCategoryButton( const QString& a_Text,
		QTreeWidget* a_pParent, QTreeWidgetItem* a_pItem )
	: QPushButton(a_Text, a_pParent)
	, m_pItem(a_pItem)
{
	connect(this, SIGNAL(pressed()), this, SLOT(ButtonPressed()));
}

void QtCategoryButton::ButtonPressed()
{
	m_pItem->setExpanded( !m_pItem->isExpanded() );
}

Finally

Custom Widget Box

Custom Widget Box

If everything went well you should get something like this. You can of course use any other widgets, not just buttons.