Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved GUI for placing shapes in GraphicsView

    General and Desktop
    2
    17
    3966
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Macive Xiong
      Macive Xiong last edited by 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.

      1 Reply Last reply Reply Quote 1
      • mrjj
        mrjj Lifetime Qt Champion last edited by

        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 1 Reply Last reply Reply Quote 1
        • Macive Xiong
          Macive Xiong @mrjj last edited by 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 1 Reply Last reply Reply Quote 1
          • mrjj
            mrjj Lifetime Qt Champion @Macive Xiong last edited by

            @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 1 Reply Last reply Reply Quote 0
            • Macive Xiong
              Macive Xiong @mrjj last edited by

              @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 1 Reply Last reply Reply Quote 0
              • mrjj
                mrjj Lifetime Qt Champion @Macive Xiong last edited by

                @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 1 Reply Last reply Reply Quote 0
                • Macive Xiong
                  Macive Xiong @mrjj last edited by

                  @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 1 Reply Last reply Reply Quote 0
                  • mrjj
                    mrjj Lifetime Qt Champion @Macive Xiong last edited by

                    @Macive-Xiong

                    hi
                    the spinedit has a value function

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

                    Macive Xiong 1 Reply Last reply Reply Quote 0
                    • Macive Xiong
                      Macive Xiong @mrjj last edited by 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 1 Reply Last reply Reply Quote 1
                      • mrjj
                        mrjj Lifetime Qt Champion @Macive Xiong last edited by

                        @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 1 Reply Last reply Reply Quote 0
                        • Macive Xiong
                          Macive Xiong @mrjj last edited by

                          @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 1 Reply Last reply Reply Quote 1
                          • mrjj
                            mrjj Lifetime Qt Champion @Macive Xiong last edited by

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

                            Macive Xiong 1 Reply Last reply Reply Quote 0
                            • Macive Xiong
                              Macive Xiong @mrjj last edited by

                              @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 1 Reply Last reply Reply Quote 0
                              • mrjj
                                mrjj Lifetime Qt Champion @Macive Xiong last edited by

                                @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 2 Replies Last reply Reply Quote 1
                                • Macive Xiong
                                  Macive Xiong @mrjj last edited by

                                  @mrjj

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

                                  1 Reply Last reply Reply Quote 1
                                  • Macive Xiong
                                    Macive Xiong @mrjj last edited by

                                    @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.

                                    1 Reply Last reply Reply Quote 0
                                    • mrjj
                                      mrjj Lifetime Qt Champion last edited by

                                      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 :)

                                      1 Reply Last reply Reply Quote 1
                                      • First post
                                        Last post