Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to design this widget?
Forum Updated to NodeBB v4.3 + New Features

How to design this widget?

Scheduled Pinned Locked Moved Solved General and Desktop
pyqtnode
4 Posts 2 Posters 1.4k Views 1 Watching
  • 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.
  • A Offline
    A Offline
    agoose77
    wrote on last edited by
    #1

    Hi everyone,
    I'm designing a UI frontend to a compositional programming framework, and I am a little unsure of how best to design the code node widget.

    Mockup

    Widget mockup

    I've currently composed the widget as follows:

    NodeWidget
    - QGraphicsLinearLayout
       - HeaderWidget ['drone']
       - FieldWidget ['score.pull_out']
          - QGraphicsLinearLayout
             - SubFieldWidget ['pre_triggered']
             - SubFieldWidget ['triggered']
    

    A stripped down implementation can be found here

    The problem

    I am not sure how to right/left justify the text place the circular "sockets" over the border of the root NodeWidget.

    In a previous effort, I effectively implemented the layout in NodeWidget by manually moving each FieldWidget instance, and then resizing the NodeWidget. This made it possible to do all the formatting by hand, but prevented me from using any of the nicer layout options available in Qt.

    Is there a way of using QGraphicsLinearLayout for this problem, or do I need to the placement by hand? The socket widget will need to receive mouse events from user interaction.

    Many thanks in advance,
    Angus Hollands

    mrjjM 1 Reply Last reply
    0
    • A agoose77

      Hi everyone,
      I'm designing a UI frontend to a compositional programming framework, and I am a little unsure of how best to design the code node widget.

      Mockup

      Widget mockup

      I've currently composed the widget as follows:

      NodeWidget
      - QGraphicsLinearLayout
         - HeaderWidget ['drone']
         - FieldWidget ['score.pull_out']
            - QGraphicsLinearLayout
               - SubFieldWidget ['pre_triggered']
               - SubFieldWidget ['triggered']
      

      A stripped down implementation can be found here

      The problem

      I am not sure how to right/left justify the text place the circular "sockets" over the border of the root NodeWidget.

      In a previous effort, I effectively implemented the layout in NodeWidget by manually moving each FieldWidget instance, and then resizing the NodeWidget. This made it possible to do all the formatting by hand, but prevented me from using any of the nicer layout options available in Qt.

      Is there a way of using QGraphicsLinearLayout for this problem, or do I need to the placement by hand? The socket widget will need to receive mouse events from user interaction.

      Many thanks in advance,
      Angus Hollands

      mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #2

      @agoose77
      Hi
      If the only interaction you need is clicking the socket, have you considered simply painting
      the whole thing in paint and keep a list of sockets area for click hit testing?
      It would make it far more light and very easy to draw overlapping things.
      Just a thought as i dont know all the requirements or if you use any of the widgets signals etc.

      1 Reply Last reply
      0
      • A Offline
        A Offline
        agoose77
        wrote on last edited by
        #3

        Thanks for the reply mrjj,

        In the end, it turns out that positioning a graphicsitem outside the rect of the parent does not prevent it receiving events, so I have taken that approach!

        I would do something simpler, but I plan to add more involved interaction than just sockets, so I wanted to take a more extensible approach!

        mrjjM 1 Reply Last reply
        0
        • A agoose77

          Thanks for the reply mrjj,

          In the end, it turns out that positioning a graphicsitem outside the rect of the parent does not prevent it receiving events, so I have taken that approach!

          I would do something simpler, but I plan to add more involved interaction than just sockets, so I wanted to take a more extensible approach!

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by mrjj
          #4

          @agoose77
          Then a composite widget is the way to go as you have done.
          Just as a note from other post in case you want inspiration.
          https://github.com/paceholder/nodeeditor

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved