GUI for placing shapes in GraphicsView

Macive Xiong

Hey guys,

I would like to make a GUI for placing shapes in GraphicsView window by input the values My GUI like this

Form left to right is x1, y1, x2, y2. For two shapes.

My code is:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    scene = new QGraphicsScene(this);
    ui->graphicsView->setScene(scene);

    QBrush redBrush(Qt::red);
    QBrush blueBrush(Qt::blue);
    QPen blackpen(Qt::black);
    blackpen.setWidth(2);

    ellipse = scene->addEllipse(x1,y1,100,100,blackpen,redBrush);
    //ellipse->setFlag(QGraphicsItem::ItemIsMovable);
    rectangle = scene->addRect(x2,y2,100,100,blackpen,blueBrush);
    //rectangle->setFlag(QGraphicsItem::ItemIsMovable);


}

MainWindow::~MainWindow()
{
    delete ui;
}



void MainWindow::on_x1_valueChanged(int arg1)
{

}

void MainWindow::on_y1_valueChanged(int arg1)
{

}

I need some suggestion what command and codes should I put in my Spinbox and placing shapes by the number I input.

Thank you guys so much.

mrjj

Hi
How do you plan this to work?
Since there are 2 values. how do u know when
user wants to insert shape?

Say user input 100 in x and 200 in y.

Now u have 2 values and u could create shape.

But what if user just change y.
How will u know that he do not want to change x also?
before making shape.

So u need some sort of Create button or make it a rule that
user MUST input both before you create.

Macive Xiong

@mrjj thanks for your reply.

What if I build a button for each shape? When I input x1 and y1 then click the button for re-place that shape??

Or can I make it if users do not change x, then it stay in the last x position??

Any suggestion on my code?

mrjj

@Macive-Xiong
Hi
Its unclear to me if u want the user to use the values to create new or to move existing.
Its 2 different cases.

But yes if you add a button, to create it would work.

Have you thought about use a dialog ?
It works better for both cases as you
can just see if user had shape selected and then use values to move or
if none is selected, then create new, when user press OK for dialog.

Macive Xiong

@mrjj
In this case, I would like to create a new shape. When the user input the new value for x and y, it creates a new shape on that position.
Here's the GUI I modify

I added a button for creating a new shape every time I input a new value.

mrjj

@Macive-Xiong
ok. super.
so when button calls the slot, you
simply read the values, and insert the new item.
This way you know when to create.

Macive Xiong

@mrjj

OK, I put everything in the click button

void MainWindow::on_creat_btn_clicked()
{
    QBrush redBrush(Qt::red);
    QBrush blueBrush(Qt::blue);
    QPen blackpen(Qt::black);
    blackpen.setWidth(2);
    ellipse = scene->addEllipse(x, y, 10, 10,blackpen,redBrush);

}

Some suggestion for declaring the x and y ?? Thank you :)

mrjj

@Macive-Xiong

hi
the spinedit has a value function

so
int x= ui->spin1->value();
int y= ui->spin2->value();

Macive Xiong

@mrjj

OMG!! It works!!!! Thank you soooo much. And sorry for those dumb questions...I am a noob on Qt and trying to create multiple projects to practice. Next step I would like to add the different colors while create different shapes and area.

Thank you again:)

mrjj

@Macive-Xiong
No worries.
Beginner questions are very allowed/welcome here :)

To select color, you can use
http://doc.qt.io/qt-5/qcolordialog.html#details

its not much code to allow selection of color
QColor color = QColorDialog::getColor(Qt::yellow, this );
if( color.isValid() )
{
qDebug() << "Color Choosen : " << color.name();
}

for type of shape, you could use a QCombobox
http://doc.qt.io/qt-4.8/qcombobox.html
so it has list of types.

Macive Xiong

@mrjj

Thanks for your information. It's really helpful. And I must say, your kindness and patience are really important for the novice like me. Thanks again:)

mrjj

@Macive-Xiong
You are most welcome.
Are you new to c++ too?

Macive Xiong

@mrjj

Yep I kinda a new to C++. My projects are making connection with Qt and Arduino. Build a GUI on Qt and control Arduino. In this case, I would like to input position values on Qt and send these values to Arduino and do some math. Then send back to Qt and place the shape.

mrjj

@Macive-Xiong
ok. just asking as if really new to C++ , some dont really realize that
adding variables to mainwindow.h makes it accessible to all methods.

class MainWindow : public QMainWindow {
Q_OBJECT
public:
explicit MainWindow(QWidget* parent = 0);
~MainWindow();

private slots:
void on_pushButton_released();

void on_pushButton_3_released();

private:
Ui::MainWindow* ui;
<<<< good spot for variables.
};

Also, if you are going to use serial comm with Arduino
then this sample is super to start with
http://doc.qt.io/qt-5/qtserialport-terminal-example.html

Macive Xiong

@mrjj

OK, thanks for the information.
These are really helpful:)
Will ask more questions if I get more problem.

Macive Xiong

@mrjj

Hi, now I am facing a problem.
When I input the value, say x = 500, y = 0. The ellipse shows at the center of my GraphicsView. My GraphicsView's boundary is 512*512.

My code:

void MainWindow::on_creat_btn_clicked()
{
    QBrush redBrush(Qt::red);
    QBrush blueBrush(Qt::blue);
    QPen blackpen(Qt::black);
    blackpen.setWidth(1);

   int x  = ui->spin1->value();
   int y  = ui->spin2->value();

    
    ellipse = scene->addEllipse(x, y, 5, 5,blackpen,redBrush);



}

Any suggestion?? Thank you so much.

mrjj

well you should read
http://doc.qt.io/qt-5/graphicsview.html
section
Scene Coordinates

you can also define your own
scene->setSceneRect(-180, -90, 360, 180);

Short story.
0,0, might not be where u think it is :)

Update: Forum Guidelines & Code of Conduct

Solved GUI for placing shapes in GraphicsView