How to design this widget?



  • 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


  • Qt Champions 2016

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



  • 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!


  • Qt Champions 2016

    @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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.