5 ms·

The circle drawing and spreadsheet tasks are very interesting, because most GUI frameworks and tutorials just focus on laying out standard widgets and make it d

The circle drawing and spreadsheet tasks are very interesting, because most GUI frameworks and tutorials just focus on laying out standard widgets and make it difficult to create custom components. Gtk and QT help you when your interface is a bunch of checkboxes and text inputs and buttons, but as soon as you want to plot a curve or make a custom tooltip or a chessboard, all it gives you is a canvas and some pixel commands. Web-based tools, on the other hand, have clearer ways to float divs around, or draw with svg elements, or even if you're just using a canvas they help you lay out your data in a convenient way. Am I missing something about GUI frameworks? As soon as you want to make something complex like Audacity (and audio and waveform editing tool), the frameworks stop being helpful and are just a way to get a blank window.

joshuak 6y ago
Actually this is exactly why we use QML. QML makes it easy to create new GUI primitives that can be called in the same way as the standard library widgets. The coding flow is also nice, in that you can start buy embellishing an element inline, and then when it reaches your complexity tolerance or you find other uses for the same component you can literally cut and paste your code into a new file remove hard coded layout and add imports and you've got your new custom GUI widget.
detaro 6y ago
You make a waveform display widget (where indeed, drawing the waveform is something you implement), and position that using the frameworks layouting options, position sub-elements using the framework tools, use event-handling mechanisms the framework provides, ... Just because you need one piece with custom rendering doesn't mean the framework isn't helpful for everything else, and often it brings tools for that too - e.g. plenty of Qt apps use SVG support for rendering graphics that fit the SVG model well, it has its own graphicsview features that do a lot more than a plain canvas, ...
gmueckl 6y ago
Well, I don't think you had a good look at toolkits like Qt. They provide a lot more than just a bumch of widget and window frames. There are application framework style features in there like a very capable undo stack, abstractions over resource loading, MVC pattern implementations, plugin loading, ... Also, advanced toolkits like WPF and Qt allow you to build upon existing controls and extent and nest them in really interesting ways to create powerful UIs. You can also do pretty crazy fringe stuff easily like adding arbitrary widgets to context menus. Arbitrary widgets within list view or tree view items are probably more useful. The trick is to take as much of that composability as you can for your use case and build upon it. (I am sure other mature toolkits have similar properties, but Ibam not familiar with them to the same extent)
detaro 6y ago
Addendum, but I'm really getting curious now: How did you come to this flawed impression of GUI frameworks? Why did you think people used them if they were so useless?
- lostdog 6y ago
  Glad you asked! I don't usually do GUI-related work, but each time I do I typically want to do something complex like plotting charts or drawing diagrams. Each time, I look for a tutorial, but I never find something helpful. The results I get are similar to this QPainter tutorial: https://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-example.html https://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-examp... . They show you that painting is possible, but figuring out how to get interactivity is left as an exercise to the reader. Compare that to working with d3 or react, where the mouse and keyboard events are easy to create. For example, the first time I used d3, I created a bar chart, and it took just a few minutes of googling to add tooltips on hover and other behaviors when clicking on the bars. I honestly do not know a straightforward way to draw a bar chart with hover affects in QT or Gtk. So how do I assume other people use them? Well, for the above problem you could write your own mouse picker to map from mouse location to the expected bar location. Having to write your own mouse picker certainly works, but it changes the task from something you can crank out in a few hours to needing to allocate a day or two to set up the infrastructure you need to write a good custom widget. This is also why I assumed people use Electron nowadays: you can get unusual UIs without the rigamarole of making a custom widget. So yes, I know it's possible to make GUIs that don't just compose standard widgets, but I assumed it's arduous. I'm glad you asked. I didn't realize how controversial my original comment was (it was in negative points for a while). But what am I missing here? Have I just been unable to find a good tutorial? If you were trying to do the "Circle Drawer" example, what tutorial or examples would you follow to get it done quickly?
  - gmueckl 6y ago
    I'd say that this tutorial would be a good next step for you: https://doc.qt.io/qt-5/qtwidgets-widgets-scribble-example.html https://doc.qt.io/qt-5/qtwidgets-widgets-scribble-example.ht... Depending on your needs, you can also have a good look at QGraphicsView. Maybe you'll have an easier time when you compose your UI using QGraphicsItems.

joshuak 6y ago

Actually this is exactly why we use QML. QML makes it easy to create new GUI primitives that can be called in the same way as the standard library widgets. The coding flow is also nice, in that you can start buy embellishing an element inline, and then when it reaches your complexity tolerance or you find other uses for the same component you can literally cut and paste your code into a new file remove hard coded layout and add imports and you've got your new custom GUI widget.

detaro 6y ago

You make a waveform display widget (where indeed, drawing the waveform is something you implement), and position that using the frameworks layouting options, position sub-elements using the framework tools, use event-handling mechanisms the framework provides, ... Just because you need one piece with custom rendering doesn't mean the framework isn't helpful for everything else, and often it brings tools for that too - e.g. plenty of Qt apps use SVG support for rendering graphics that fit the SVG model well, it has its own graphicsview features that do a lot more than a plain canvas, ...

gmueckl 6y ago

Well, I don't think you had a good look at toolkits like Qt. They provide a lot more than just a bumch of widget and window frames. There are application framework style features in there like a very capable undo stack, abstractions over resource loading, MVC pattern implementations, plugin loading, ... Also, advanced toolkits like WPF and Qt allow you to build upon existing controls and extent and nest them in really interesting ways to create powerful UIs. You can also do pretty crazy fringe stuff easily like adding arbitrary widgets to context menus. Arbitrary widgets within list view or tree view items are probably more useful. The trick is to take as much of that composability as you can for your use case and build upon it. (I am sure other mature toolkits have similar properties, but Ibam not familiar with them to the same extent)

detaro 6y ago

Addendum, but I'm really getting curious now: How did you come to this flawed impression of GUI frameworks? Why did you think people used them if they were so useless?

lostdog 6y ago
Glad you asked! I don't usually do GUI-related work, but each time I do I typically want to do something complex like plotting charts or drawing diagrams. Each time, I look for a tutorial, but I never find something helpful. The results I get are similar to this QPainter tutorial: https://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-example.html https://doc.qt.io/qt-5/qtwidgets-painting-basicdrawing-examp... . They show you that painting is possible, but figuring out how to get interactivity is left as an exercise to the reader. Compare that to working with d3 or react, where the mouse and keyboard events are easy to create. For example, the first time I used d3, I created a bar chart, and it took just a few minutes of googling to add tooltips on hover and other behaviors when clicking on the bars. I honestly do not know a straightforward way to draw a bar chart with hover affects in QT or Gtk. So how do I assume other people use them? Well, for the above problem you could write your own mouse picker to map from mouse location to the expected bar location. Having to write your own mouse picker certainly works, but it changes the task from something you can crank out in a few hours to needing to allocate a day or two to set up the infrastructure you need to write a good custom widget. This is also why I assumed people use Electron nowadays: you can get unusual UIs without the rigamarole of making a custom widget. So yes, I know it's possible to make GUIs that don't just compose standard widgets, but I assumed it's arduous. I'm glad you asked. I didn't realize how controversial my original comment was (it was in negative points for a while). But what am I missing here? Have I just been unable to find a good tutorial? If you were trying to do the "Circle Drawer" example, what tutorial or examples would you follow to get it done quickly?
- gmueckl 6y ago
  I'd say that this tutorial would be a good next step for you: https://doc.qt.io/qt-5/qtwidgets-widgets-scribble-example.html https://doc.qt.io/qt-5/qtwidgets-widgets-scribble-example.ht... Depending on your needs, you can also have a good look at QGraphicsView. Maybe you'll have an easier time when you compose your UI using QGraphicsItems.