C++

Forum

 
GUI Design with C++

anmol2701 (43)
Hi,

I want to design GUI in c++ for a retail software. What i want is a main window with no minimize,maximize buttons and i want customized buttons. Also i want it be touch screen friendly and include functionalities like virtual keyword.

So recommend me, which library to use and its features.

Thanks
Little Bobby Tables (1079)
sfml, qt, sdl, opengl. not sure if any of those actually let you not have the minimize etc buttons w/o going full screen. i know that the java api does, but thats not c++.
Also i want it be touch screen friendly
do you mean for like a mobile app? then you need to be doing something very different.

and include functionalities like virtual keyword.
that makes no sense. virtual is a part of c++. thats like saying you want a library to provide int
ResidentBiscuit (4459)
QT is where it's at. Even has support for Android and iOS now.

do you mean for like a mobile app? then you need to be doing something very different.

Not really. Touch screens are not some drastic difference as far as the programmer is concerned.

that makes no sense. virtual is a part of c++

Are you serious right now? Virtual keyboard, ie touch screen keyboard. Ever use a smart phone?
Stewbond (2827)
I agree with everything Res said. Qt is what you're looking for.

With Qt you can program everything in C++ or: You can use Qt Creator to generate your GUI with a GUI for widget placement and slot registration, you can use QSS (Qt version of CSS) to style your buttons, and then use C++ to tie it all together. It's definately worth learning!

Little Bobby Tables (love the xkcd reference by the way) almost has a point with touch-screen friendly. Fortunately Qt will handle multi-touch gestures as regular events which is really the only technical difference. In terms of style, you just need to ensure that your touch-zones are big enough to handle fat sausage fingers and don't expect keyboard inputs anywhere. That's the big difference.

In terms of virtual keyboard, it's very easy to make in Qt. I would just make a keyboard option inherited from QDialog. This dialog would have QPushButtons representing each key, and a QLineEdit to display the current text. When you hit "Enter" the dialog would return true and the window would get destroyed. The parent window would call a function from the remaining object to extract that saved text.
Stewbond (2827)
Hold on, couldn't help myself... I'm making a Numpad in Qt to show how easy it is.
Little Bobby Tables (1079)
Not really. Touch screens are not some drastic difference as far as the programmer is concerned.
let me explain what i meant. i dont think there is a difference in programming for a touchscreen desktop and a regular one, but i could be wrong. however programming a mobile app is different than writing a desktop app. of course i dont know how well this applies to qt, so that could be an exception.

Are you serious right now? Virtual keyboard, ie touch screen keyboard. Ever use a smart phone?

he said he wanted the virtual keyword functionality. however, you are probably right in that he meant keyboard. it just didnt occur to me when i read that

(love the xkcd reference by the way)

thank you :) thats what i was going for. huge xkcd fan
giblit (3750)
sfml, qt, sdl, opengl. not sure if any of those actually let you not have the minimize etc buttons w/o going full screen.

You can remove the buttons without fullscreen in qt and sfml.

Qt you could simply use a QDialog instead of QWindow or there is probably a way in QWindow(have only played around with qt and read half my book). Also, in SFML you can do this fairly easy. When you create a new window just give it a style in the constructor.

http://www.sfml-dev.org/tutorials/2.1/window-window.php
ResidentBiscuit (4459)
he said he wanted the virtual keyword functionality

Wow, you're totally right. Sorry for that :p Funny how the brain sees what it wants.
Little Bobby Tables (1079)
i agree. i see pictures all the time that do that kind of thing to you. however your probably right in that he meant keyboard
Stewbond (2827)
Here's some code for a virtual touch-friendly number pad. Here's also a screenshot of what it looks like:
http://imgur.com/1EywNUQ

edit: should have cropped that

main.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
#include <QApplication>
#include <QDialog>
#include <QString>
#include <QLineEdit>
#include <QPushButton>

class NumPad : public QDialog
{
    Q_OBJECT
public:
    explicit NumPad(QWidget *parent = 0);
    void retranslateUi(QDialog *n);
    ~NumPad() {}
    int getInt()           { return m_string.toUInt();   }
    double getDouble()     { return m_string.toDouble(); }
private slots:
    void on_m_0_clicked()   { addChar('0');   }
    void on_m_1_clicked()   { addChar('1');   }
    void on_m_2_clicked()   { addChar('2');   }
    void on_m_3_clicked()   { addChar('3');   }
    void on_m_4_clicked()   { addChar('4');   }
    void on_m_5_clicked()   { addChar('5');   }
    void on_m_6_clicked()   { addChar('6');   }
    void on_m_7_clicked()   { addChar('7');   }
    void on_m_8_clicked()   { addChar('8');   }
    void on_m_9_clicked()   { addChar('9');   }
    void on_m_dot_clicked() { addChar('.');   }
    void on_m_ok_clicked()  { this->accept(); }
    void on_m_esc_clicked() { this->reject(); }
private:
    void addChar(char c)
    {
        m_string.append( c );
        m_display->setText(m_string);
    }

    QString m_string;
    QLineEdit   *m_display;
    QPushButton *m_0, *m_1, *m_2, *m_3, *m_4;
    QPushButton *m_5, *m_6, *m_7, *m_8, *m_9;
    QPushButton *m_dot, *m_ok, *m_esc;
};

main.cpp:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
#include <iostream>
#include "main.h"

NumPad::NumPad(QWidget *parent) : QDialog(parent)
{
    if (this->objectName().isEmpty())
        this->setObjectName(QString::fromUtf8("NumPad"));
    this->resize(270, 300);

    m_0       = new QPushButton(this);
    m_1       = new QPushButton(this);
    m_2       = new QPushButton(this);
    m_3       = new QPushButton(this);
    m_4       = new QPushButton(this);
    m_5       = new QPushButton(this);
    m_6       = new QPushButton(this);
    m_7       = new QPushButton(this);
    m_8       = new QPushButton(this);
    m_9       = new QPushButton(this);
    m_dot     = new QPushButton(this);
    m_ok      = new QPushButton(this);
    m_esc     = new QPushButton(this);
    m_display = new QLineEdit  (this);

    m_0->setObjectName      (QString::fromUtf8("m_0"));
    m_1->setObjectName      (QString::fromUtf8("m_1"));
    m_2->setObjectName      (QString::fromUtf8("m_2"));
    m_3->setObjectName      (QString::fromUtf8("m_3"));
    m_4->setObjectName      (QString::fromUtf8("m_4"));
    m_5->setObjectName      (QString::fromUtf8("m_5"));
    m_6->setObjectName      (QString::fromUtf8("m_6"));
    m_7->setObjectName      (QString::fromUtf8("m_7"));
    m_8->setObjectName      (QString::fromUtf8("m_8"));
    m_9->setObjectName      (QString::fromUtf8("m_9"));
    m_ok->setObjectName     (QString::fromUtf8("m_ok"));
    m_dot->setObjectName    (QString::fromUtf8("m_dot"));
    m_esc->setObjectName    (QString::fromUtf8("m_esc"));
    m_display->setObjectName(QString::fromUtf8("m_display"));

    m_0->setGeometry(      QRect(20 , 240, 111, 51 ));
    m_1->setGeometry(      QRect(20 , 180, 51 , 51 ));
    m_2->setGeometry(      QRect(80 , 180, 51 , 51 ));
    m_3->setGeometry(      QRect(140, 180, 51 , 51 ));
    m_4->setGeometry(      QRect(20 , 120, 51 , 51 ));
    m_5->setGeometry(      QRect(80 , 120, 51 , 51 ));
    m_6->setGeometry(      QRect(140, 120, 51 , 51 ));
    m_7->setGeometry(      QRect(20 , 60 , 51 , 51 ));
    m_8->setGeometry(      QRect(80 , 60 , 51 , 51 ));
    m_9->setGeometry(      QRect(140, 60 , 51 , 51 ));
    m_ok->setGeometry(     QRect(200, 180, 51 , 111));
    m_dot->setGeometry(    QRect(140, 240, 51 , 51 ));
    m_esc->setGeometry(    QRect(200, 60 , 51 , 111));
    m_display->setGeometry(QRect(20 , 10 , 231, 41 ));

    retranslateUi(this);

    QMetaObject::connectSlotsByName(this);
}

void NumPad::retranslateUi(QDialog *n)
{
    n->setWindowTitle(QApplication::translate("NumPad", "Dialog", 0, QApplication::UnicodeUTF8));
    m_7->setText(  QApplication::translate("NumPad", "7", 0, QApplication::UnicodeUTF8));
    m_4->setText(  QApplication::translate("NumPad", "4", 0, QApplication::UnicodeUTF8));
    m_1->setText(  QApplication::translate("NumPad", "1", 0, QApplication::UnicodeUTF8));
    m_0->setText(  QApplication::translate("NumPad", "0", 0, QApplication::UnicodeUTF8));
    m_8->setText(  QApplication::translate("NumPad", "8", 0, QApplication::UnicodeUTF8));
    m_9->setText(  QApplication::translate("NumPad", "9", 0, QApplication::UnicodeUTF8));
    m_5->setText(  QApplication::translate("NumPad", "5", 0, QApplication::UnicodeUTF8));
    m_6->setText(  QApplication::translate("NumPad", "6", 0, QApplication::UnicodeUTF8));
    m_2->setText(  QApplication::translate("NumPad", "2", 0, QApplication::UnicodeUTF8));
    m_3->setText(  QApplication::translate("NumPad", "3", 0, QApplication::UnicodeUTF8));
    m_dot->setText(QApplication::translate("NumPad", ".", 0, QApplication::UnicodeUTF8));
    m_ok->setText( QApplication::translate("NumPad", "OK", 0, QApplication::UnicodeUTF8));
    m_esc->setText(QApplication::translate("NumPad", "ESC", 0, QApplication::UnicodeUTF8));
}

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    NumPad n(0);
    n.exec();

    std::cout << n.getDouble();

    return a.exec();
}
Last edited on
Stewbond (2827)
WHat? Linker error? "undefined reference to 'vtable for NumPad'. That has to be the worst error ever on gcc. Impossible to track....

Fixed it, updating code above.
Last edited on
giblit (3750)
Have you considered using QtDesigner Stewbond?
Stewbond (2827)
What's the difference between QtDesigner and QtCreator? I actually used QtCreator to create this class. That took 1 hour. Minimizing Numpad.h/ui/cpp to what's shown above is what took me the other 2 hours.
giblit (3750)
QtCreator you have to create everything dynamically 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    m_0       = new QPushButton(this);
    m_1       = new QPushButton(this);
    m_2       = new QPushButton(this);
    m_3       = new QPushButton(this);
    m_4       = new QPushButton(this);
    m_5       = new QPushButton(this);
    m_6       = new QPushButton(this);
    m_7       = new QPushButton(this);
    m_8       = new QPushButton(this);
    m_9       = new QPushButton(this);
    m_dot     = new QPushButton(this);
    m_ok      = new QPushButton(this);
    m_esc     = new QPushButton(this);
    m_display = new QLineEdit  (this);


Designer you create the user interface (*.ui file) by dragging/dropping the widgets. You can reuse widigets/dialogs you create for other applications. I personally find it a lot easier to use designer for designing the layout.


*edit link
http://qt-project.org/doc/qt-5/qtdesigner-manual.html
Last edited on
Stewbond (2827)
Ah, I understand. Qt creator is the full IDE (which includes the designer). QtDesigner is the ui creator. My original code didn't display the ui stuff because the .h file included comes from a .ui file which is really a .xml file and isn't easy to read. So for the purposes of this post I "simplified it" by removing all references to the ui file and replaced it with c++ code. Though I'll put it below again for the sake of explanation. In this case, ui_numpad2.h is auto-generated and isn't shown below.

The code above is applicable to any environment with Qt libraries linked. The code below supports the UI auto-generated by QtCreator/QtDesigner:
Numpad2.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
#ifndef NUMPAD2_H // auto generated
#define NUMPAD2_H // auto generated

#include <QDialog> // auto generated

namespace Ui { // auto generated
class NumPad2; // auto generated
}           // auto generated

class NumPad2 : public QDialog   // auto generated
{
    Q_OBJECT   // auto generated
    
public:
    explicit NumPad2(QWidget *parent = 0);  // auto generated
    ~NumPad2();  // auto generated
    
private slots:
    void on_m_0_clicked()   { addChar('0');   } // custom
    void on_m_1_clicked()   { addChar('1');   } // custom
    void on_m_2_clicked()   { addChar('2');   } // custom
    void on_m_3_clicked()   { addChar('3');   } // custom
    void on_m_4_clicked()   { addChar('4');   } // custom
    void on_m_5_clicked()   { addChar('5');   } // custom
    void on_m_6_clicked()   { addChar('6');   } // custom
    void on_m_7_clicked()   { addChar('7');   } // custom
    void on_m_8_clicked()   { addChar('8');   } // custom
    void on_m_9_clicked()   { addChar('9');   } // custom
    void on_m_dot_clicked() { addChar('.');   } // custom
    void on_m_ok_clicked()  { this->accept(); } // custom
    void on_m_esc_clicked() { this->reject(); } // custom

private:
    void addChar(char c); // custom

    QString m_string; // custom

    Ui::NumPad2 *ui;  // auto generated
};

#endif // NUMPAD2_H  // auto generated

Numpad2.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#include "numpad2.h"  // auto generated
#include "ui_numpad2.h" // auto generated

NumPad2::NumPad2(QWidget *parent) : // auto generated
    QDialog(parent),         // auto generated
    ui(new Ui::NumPad2)    // auto generated
{
    ui->setupUi(this); // auto generated
}

NumPad2::~NumPad2() // auto generated
{
    delete ui; // auto generated
}

void NumPad2::addChar(char c) // custom
{
    m_string.append( c ); // custom
    ui->m_display->setText(m_string); // custom
}
Last edited on
Stewbond (2827)
Also just realized that this is in the Windows forum. Another advantage of Qt is that it can be used cross-platorm (Windows/Linux/Android/iOS)
Little Bobby Tables (1079)
so how does qt for ios work? i thought ios used cocoa with obj-c
ResidentBiscuit (4459)
Stewbond (2827)
That's a good question. I never really understood how a high-level language could be platform specific. I mean, it's the binary that matters, not the code ... right?

If iOS is like JRE, then this is where it would matter: code can be compiled at runtime. If that were the case, then Qt would need to invoke some crazy compiler commands to translate our C++ code into objective-C or some intermediate binary (CLI/Bytecode) which can be used by iOS.
Last edited on
Topic archived. No new replies allowed.