Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
> It probably wasn't mentioned because it's got a bad reputation as being slow. > It's easy to abuse it and end up with crappy performance. As long as you > limit the amount of painting you do and how often you do it, I don't think > using it is really an issue in practice. ... > like Canvas is not the really good solution - just a workaround. That is, it > not claims to be "support for arbitrary shapes in QtQuick". Yes Canvas uses QPainter to render a texture on the CPU, which is then uploaded to the GPU. Besides the drawing commands being in Javascript. It’s not that bad in practice, just not as efficient as it could be. You might not be able to redraw it at 60FPS. ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
> It probably wasn't mentioned because it's got a bad reputation as being > slow. It's easy to abuse it and end up with crappy performance. As long as > you limit the amount of painting you do and how often you do it, I don't > think using it is really an issue in practice. I see, thanks for help! ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
It probably wasn't mentioned because it's got a bad reputation as being slow. It's easy to abuse it and end up with crappy performance. As long as you limit the amount of painting you do and how often you do it, I don't think using it is really an issue in practice. From: Interest <interest-bounces+mitch.curtis=qt...@qt-project.org> on behalf of Oleg Evseev <ev.m...@gmail.com> Sent: Wednesday, 12 October 2016 1:48:54 PM To: Qt Project Subject: Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup? Great thanks, Shawn. Canvas is what I searching for! Even in canvas example there is a Talk bubble example that is look similar to tipped Popup! [Встроенное изображение 1] Canvas is Qt Quick Item, so it is quite easy to add it on the scene and add a shadows (or other effects) to it [Встроенное изображение 2] and use it as background for Qt Quick Controls. Only thing that I miss is the inner border in Canvas (to be identical to Rectangle drawing principle). But for simple tipped popup (rectangle with rounded corners and tip) it was quite easy to recalculate coordinates points. Plus, apparently there is the other solution with globalCompositeOperation http://stackoverflow.com/a/34234589/5765076 for complex shapes (didn't test it). I made tipped rectangle with Canvas and it looks great! I really surprised, why using Canvas item was not suggested in first place?! And you, Shawn, write this: ... we've always needed support for arbitrary shapes in QtQuick. We’ll have them eventually… like Canvas is not the really good solution - just a workaround. That is, it not claims to be "support for arbitrary shapes in QtQuick". Why? How your ideal support for arbitrary shapes in QtQuick will look like in general words, then? What about Canvas vs QSGGeometry Node approach? Only performance aspects? -- Regards, Oleg. 2016-10-10 10:41 GMT+03:00 Shawn Rutledge <shawn.rutle...@qt.io<mailto:shawn.rutle...@qt.io>>: You can add two rotated rectangles, one underneath for the border, and one (on top) for the fill, to cover up the edge of the main rectangle. Next you will want a drop shadow, then you need a couple more Rectangles (or something from GraphicalEffects) underneath. This is a good illustration of why we've always needed support for arbitrary shapes in QtQuick. We’ll have them eventually… Meanwhile you can use Canvas (draw the shape) or BorderImage (pull edge, corner and center pieces from an image and assemble them into a resizable balloon). ___ Interest mailing list Interest@qt-project.org<mailto:Interest@qt-project.org> http://lists.qt-project.org/mailman/listinfo/interest ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
Jérôme, I didn't understand what your suggestion for? One can easy draw round cornered rectangle with Canvas (see roundedrect.qml in canvas example) [image: Встроенное изображение 1] Based on that example I did my rectangle (with *all *rounded corners) with tip in one draw path and solved my problem. 2016-10-12 16:32 GMT+03:00 Jérôme Godbout: > For the round corner with rectangle: > > Rectangle > { > border.width: 2 > border.color: "black" > color: Qt.rgba(0,0,0,0) > clip: true > width: canvas_.width > height: canvas_.height > Canvas > { > ... > } > } > > Using the clip and the round corner should work. > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
For the round corner with rectangle: Rectangle { border.width: 2 border.color: "black" color: Qt.rgba(0,0,0,0) clip: true width: canvas_.width height: canvas_.height Canvas { ... } } Using the clip and the round corner should work. On Wed, Oct 12, 2016 at 7:48 AM, Oleg Evseevwrote: > Great thanks, Shawn. > > Canvas is what I searching for! > > Even in canvas example there is a Talk bubble example that is look similar > to tipped Popup! > [image: Встроенное изображение 1] > > Canvas is Qt Quick Item, so it is quite easy to add it on the scene and > add a shadows (or other effects) to it > [image: Встроенное изображение 2] > and use it as background for Qt Quick Controls. > > Only thing that I miss is the inner border in Canvas (to be identical to > Rectangle drawing principle). But for simple tipped popup (rectangle with > rounded corners and tip) it was quite easy to recalculate coordinates > points. > Plus, apparently there is the other solution with globalCompositeOperation > http://stackoverflow.com/a/34234589/5765076 for complex shapes (didn't > test it). > > I made tipped rectangle with Canvas and it looks great! > > *I really surprised, why using Canvas item was not suggested in first > place?!* > > And you, Shawn, write this: > > ... we've always needed support for arbitrary shapes in QtQuick. We’ll >> have them eventually… > > > like Canvas is *not *the really good solution - just a workaround. That > is, it not claims to be "support for arbitrary shapes in QtQuick". > > Why? How your ideal support for arbitrary shapes in QtQuick will look like > in general words, then? > > What about Canvas vs QSGGeometry Node approach? Only performance aspects? > > -- > Regards, Oleg. > > 2016-10-10 10:41 GMT+03:00 Shawn Rutledge : > >> You can add two rotated rectangles, one underneath for the border, and >> one (on top) for the fill, to cover up the edge of the main rectangle. >> Next you will want a drop shadow, then you need a couple more Rectangles >> (or something from GraphicalEffects) underneath. >> >> This is a good illustration of why we've always needed support for >> arbitrary shapes in QtQuick. We’ll have them eventually… >> >> Meanwhile you can use Canvas (draw the shape) or BorderImage (pull edge, >> corner and center pieces from an image and assemble them into a resizable >> balloon). >> >> ___ >> Interest mailing list >> Interest@qt-project.org >> http://lists.qt-project.org/mailman/listinfo/interest >> > > ___ > Interest mailing list > Interest@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest > > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
Great thanks, Shawn. Canvas is what I searching for! Even in canvas example there is a Talk bubble example that is look similar to tipped Popup! [image: Встроенное изображение 1] Canvas is Qt Quick Item, so it is quite easy to add it on the scene and add a shadows (or other effects) to it [image: Встроенное изображение 2] and use it as background for Qt Quick Controls. Only thing that I miss is the inner border in Canvas (to be identical to Rectangle drawing principle). But for simple tipped popup (rectangle with rounded corners and tip) it was quite easy to recalculate coordinates points. Plus, apparently there is the other solution with globalCompositeOperation http://stackoverflow.com/a/34234589/5765076 for complex shapes (didn't test it). I made tipped rectangle with Canvas and it looks great! *I really surprised, why using Canvas item was not suggested in first place?!* And you, Shawn, write this: ... we've always needed support for arbitrary shapes in QtQuick. We’ll > have them eventually… like Canvas is *not *the really good solution - just a workaround. That is, it not claims to be "support for arbitrary shapes in QtQuick". Why? How your ideal support for arbitrary shapes in QtQuick will look like in general words, then? What about Canvas vs QSGGeometry Node approach? Only performance aspects? -- Regards, Oleg. 2016-10-10 10:41 GMT+03:00 Shawn Rutledge: > You can add two rotated rectangles, one underneath for the border, and one > (on top) for the fill, to cover up the edge of the main rectangle. Next > you will want a drop shadow, then you need a couple more Rectangles (or > something from GraphicalEffects) underneath. > > This is a good illustration of why we've always needed support for > arbitrary shapes in QtQuick. We’ll have them eventually… > > Meanwhile you can use Canvas (draw the shape) or BorderImage (pull edge, > corner and center pieces from an image and assemble them into a resizable > balloon). > > ___ > Interest mailing list > Interest@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
> using an Image is a very simple solution Thanks for suggestion! 2016-10-07 8:27 GMT+03:00 Gunnar Sletta: > Although you can do a custom shape like this using QSGGeometryNode, using > an Image is a very simple solution which also gives you complete control > over the look and how it integrates with the rest of the popup. And all > from QML.. > > cheers, > Gunnar > > > On 06 Oct 2016, at 21:22, Oleg Evseev wrote: > > > > But lack of this solution - you can not set the opacity of such > constructed popup :) > > > > Plus, I think, set elevation to get shade of popup without doing it for > arrow tip will not have a good look. > > > > 2016-10-06 22:16 GMT+03:00 Oleg Evseev : > > And yes I understand that this could be done with help of clipping > rotated rectangle by half and get it ahead of popup with border offset > overlap. > > > > But lack of this solution - you can not set the opacity of such > constructed popup :) > > > > > > 2016-10-06 22:11 GMT+03:00 Oleg Evseev : > > Thanks for suggestion, Jérôme. > > I thought about such workaround, but for me it would be very nice to > have border of such popup. > > > > 2016-10-06 21:19 GMT+03:00 Jérôme Godbout : > > More a workaround then a real solution, but could work as long as the > triangle is still sharp 90 angle. > > > > Item > > { > > id: component > > property real sizing: 10 > > property alias color: rect_.color > > property alias border: rect_.border > > width: sizing > > height: sizing > > clip: true > > > > Rectangle > > { > > id: rect_ > > width: component.width > > height: component.height > > color: "gray" > > // change the rotation values based on orientation here > > transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } > > } > > } > > > > On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev wrote: > > Hi everyone, > > > > I'm interesting how to add arrow tip to popup, that looks like this: > > > > > > > > If I understand correctly, according to http://doc.qt.io/qt-5/qtquick- > scenegraph-customgeometry-example.html I have an option to do custom > shape qt quick item instead of simple rectangle with help of QSGGeometry. > > > > Is this a best way to do such things? > > > > Thanks in advance for recommendations. > > > > --- > > Regards, Oleg > > > > ___ > > Interest mailing list > > Interest@qt-project.org > > http://lists.qt-project.org/mailman/listinfo/interest > > > > > > > > > > > > ___ > > Interest mailing list > > Interest@qt-project.org > > http://lists.qt-project.org/mailman/listinfo/interest > > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
Although you can do a custom shape like this using QSGGeometryNode, using an Image is a very simple solution which also gives you complete control over the look and how it integrates with the rest of the popup. And all from QML.. cheers, Gunnar > On 06 Oct 2016, at 21:22, Oleg Evseevwrote: > > But lack of this solution - you can not set the opacity of such constructed > popup :) > > Plus, I think, set elevation to get shade of popup without doing it for arrow > tip will not have a good look. > > 2016-10-06 22:16 GMT+03:00 Oleg Evseev : > And yes I understand that this could be done with help of clipping rotated > rectangle by half and get it ahead of popup with border offset overlap. > > But lack of this solution - you can not set the opacity of such constructed > popup :) > > > 2016-10-06 22:11 GMT+03:00 Oleg Evseev : > Thanks for suggestion, Jérôme. > I thought about such workaround, but for me it would be very nice to have > border of such popup. > > 2016-10-06 21:19 GMT+03:00 Jérôme Godbout : > More a workaround then a real solution, but could work as long as the > triangle is still sharp 90 angle. > > Item > { > id: component > property real sizing: 10 > property alias color: rect_.color > property alias border: rect_.border > width: sizing > height: sizing > clip: true > > Rectangle > { > id: rect_ > width: component.width > height: component.height > color: "gray" > // change the rotation values based on orientation here > transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } > } > } > > On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev wrote: > Hi everyone, > > I'm interesting how to add arrow tip to popup, that looks like this: > > > > If I understand correctly, according to > http://doc.qt.io/qt-5/qtquick-scenegraph-customgeometry-example.html I have > an option to do custom shape qt quick item instead of simple rectangle with > help of QSGGeometry. > > Is this a best way to do such things? > > Thanks in advance for recommendations. > > --- > Regards, Oleg > > ___ > Interest mailing list > Interest@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest > > > > > > ___ > Interest mailing list > Interest@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
> > But lack of this solution - you can not set the opacity of such > constructed popup :) Plus, I think, set elevation to get shade of popup without doing it for arrow tip will not have a good look. 2016-10-06 22:16 GMT+03:00 Oleg Evseev: > And yes I understand that this could be done with help of clipping rotated > rectangle by half and get it ahead of popup with border offset overlap. > > But lack of this solution - you can not set the opacity of such > constructed popup :) > > > 2016-10-06 22:11 GMT+03:00 Oleg Evseev : > >> Thanks for suggestion, Jérôme. >> I thought about such workaround, but for me it would be very nice to have >> border of such popup. >> >> 2016-10-06 21:19 GMT+03:00 Jérôme Godbout : >> >>> More a workaround then a real solution, but could work as long as the >>> triangle is still sharp 90 angle. >>> >>> Item >>> { >>> id: component >>> property real sizing: 10 >>> property alias color: rect_.color >>> property alias border: rect_.border >>> width: sizing >>> height: sizing >>> clip: true >>> >>> Rectangle >>> { >>> id: rect_ >>> width: component.width >>> height: component.height >>> color: "gray" >>> // change the rotation values based on orientation here >>> transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } >>> } >>> } >>> >>> On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev wrote: >>> Hi everyone, I'm interesting how to add arrow tip to popup, that looks like this: If I understand correctly, according to http://doc.qt.io/qt-5/qtquick- scenegraph-customgeometry-example.html I have an option to do custom shape qt quick item instead of simple rectangle with help of QSGGeometry. Is this a best way to do such things? Thanks in advance for recommendations. --- Regards, Oleg ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest >>> > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
And yes I understand that this could be done with help of clipping rotated rectangle by half and get it ahead of popup with border offset overlap. But lack of this solution - you can not set the opacity of such constructed popup :) 2016-10-06 22:11 GMT+03:00 Oleg Evseev: > Thanks for suggestion, Jérôme. > I thought about such workaround, but for me it would be very nice to have > border of such popup. > > 2016-10-06 21:19 GMT+03:00 Jérôme Godbout : > >> More a workaround then a real solution, but could work as long as the >> triangle is still sharp 90 angle. >> >> Item >> { >> id: component >> property real sizing: 10 >> property alias color: rect_.color >> property alias border: rect_.border >> width: sizing >> height: sizing >> clip: true >> >> Rectangle >> { >> id: rect_ >> width: component.width >> height: component.height >> color: "gray" >> // change the rotation values based on orientation here >> transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } >> } >> } >> >> On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev wrote: >> >>> Hi everyone, >>> >>> I'm interesting how to add arrow tip to popup, that looks like this: >>> >>> >>> >>> If I understand correctly, according to http://doc.qt.io/qt-5/qtquick- >>> scenegraph-customgeometry-example.html I have an option to do custom >>> shape qt quick item instead of simple rectangle with help of QSGGeometry. >>> >>> Is this a best way to do such things? >>> >>> Thanks in advance for recommendations. >>> >>> --- >>> Regards, Oleg >>> >>> ___ >>> Interest mailing list >>> Interest@qt-project.org >>> http://lists.qt-project.org/mailman/listinfo/interest >>> >>> >> ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
Thanks for suggestion, Jérôme. I thought about such workaround, but for me it would be very nice to have border of such popup. 2016-10-06 21:19 GMT+03:00 Jérôme Godbout: > More a workaround then a real solution, but could work as long as the > triangle is still sharp 90 angle. > > Item > { > id: component > property real sizing: 10 > property alias color: rect_.color > property alias border: rect_.border > width: sizing > height: sizing > clip: true > > Rectangle > { > id: rect_ > width: component.width > height: component.height > color: "gray" > // change the rotation values based on orientation here > transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } > } > } > > On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev wrote: > >> Hi everyone, >> >> I'm interesting how to add arrow tip to popup, that looks like this: >> >> >> >> If I understand correctly, according to http://doc.qt.io/qt-5/qtquick- >> scenegraph-customgeometry-example.html I have an option to do custom >> shape qt quick item instead of simple rectangle with help of QSGGeometry. >> >> Is this a best way to do such things? >> >> Thanks in advance for recommendations. >> >> --- >> Regards, Oleg >> >> ___ >> Interest mailing list >> Interest@qt-project.org >> http://lists.qt-project.org/mailman/listinfo/interest >> >> > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
My bad, oups 90 deg and bad rotation center... Item { id: component property real sizing: 100 property alias color: rect_.color property alias border: rect_.border width: sizing height: sizing clip: true Rectangle { id: rect_ width: component.width height: component.height color: "gray" transform: Rotation { angle: 45 } // change the translation values based on orientation here x: component.width * -0.5 y: 0 } } On Thu, Oct 6, 2016 at 2:19 PM, Jérôme Godboutwrote: > More a workaround then a real solution, but could work as long as the > triangle is still sharp 90 angle. > > Item > { > id: component > property real sizing: 10 > property alias color: rect_.color > property alias border: rect_.border > width: sizing > height: sizing > clip: true > > Rectangle > { > id: rect_ > width: component.width > height: component.height > color: "gray" > // change the rotation values based on orientation here > transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } > } > } > > On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev wrote: > >> Hi everyone, >> >> I'm interesting how to add arrow tip to popup, that looks like this: >> >> >> >> If I understand correctly, according to http://doc.qt.io/qt-5/qtquick- >> scenegraph-customgeometry-example.html I have an option to do custom >> shape qt quick item instead of simple rectangle with help of QSGGeometry. >> >> Is this a best way to do such things? >> >> Thanks in advance for recommendations. >> >> --- >> Regards, Oleg >> >> ___ >> Interest mailing list >> Interest@qt-project.org >> http://lists.qt-project.org/mailman/listinfo/interest >> >> > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
Re: [Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
More a workaround then a real solution, but could work as long as the triangle is still sharp 90 angle. Item { id: component property real sizing: 10 property alias color: rect_.color property alias border: rect_.border width: sizing height: sizing clip: true Rectangle { id: rect_ width: component.width height: component.height color: "gray" // change the rotation values based on orientation here transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 } } } On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseevwrote: > Hi everyone, > > I'm interesting how to add arrow tip to popup, that looks like this: > > > > If I understand correctly, according to http://doc.qt.io/qt-5/qtquick- > scenegraph-customgeometry-example.html I have an option to do custom > shape qt quick item instead of simple rectangle with help of QSGGeometry. > > Is this a best way to do such things? > > Thanks in advance for recommendations. > > --- > Regards, Oleg > > ___ > Interest mailing list > Interest@qt-project.org > http://lists.qt-project.org/mailman/listinfo/interest > > ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest
[Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?
Hi everyone, I'm interesting how to add arrow tip to popup, that looks like this: If I understand correctly, according to http://doc.qt.io/qt-5/qtquick-scenegraph-customgeometry-example.html I have an option to do custom shape qt quick item instead of simple rectangle with help of QSGGeometry. Is this a best way to do such things? Thanks in advance for recommendations. --- Regards, Oleg ___ Interest mailing list Interest@qt-project.org http://lists.qt-project.org/mailman/listinfo/interest