Re: [Interest] Qml Canvas is too slow

[Christoph Keller]

If this is just about drawing squares, you can also use a *GridView* or 
*Repeater* and repeat a delegate of *Rectangle*s. If that's not fast 
enough, Jérôme Godbout approach also sounds good.


Alternatively, you should prefer *QtQuick.Shapes* to *Canvas*: 
https://doc.qt.io/qt-5/qml-qtquick-shapes-shape.html


Regards,
Christoph

On 31.10.19 17:42, Alexander Dyagilev wrote:


Hello,

The following code is too slow (paint operation takes few seconds):

Canvas{

id:map
width:columnsCount*rectangleSize
height:rowsCount*rectangleSize
anchors.horizontalCenter:alignCenter?parent.horizontalCenter:undefined
anchors.left:alignCenter?undefined:parent.left
anchors.bottom:parent.bottom
propertyintoffset:1
onPaint:drawMap()
functiondrawMap(){
if(columnsCount===0||rowsCount===0){
return;
}
varmap=downloadProgressMap.map();
varctx=getContext("2d");
for(vari=0;ihttps://lists.qt-project.org/listinfo/interest
___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest

Re: [Interest] Qml Canvas is too slow

[Mitch Curtis]

There are a few articles online about improving its performance that should 
also apply to Qt. I just picked the first three I found:

- 
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
- https://www.html5rocks.com/en/tutorials/canvas/performance/ 
- 
https://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices

Essentially you should avoid unnecessary rendering.

You could also try rendering to an FBO:

https://doc.qt.io/qt-5/qml-qtquick-canvas.html#renderTarget-prop

I did that with QQuickPaintedItem and got a huge speedup, but I'm not sure if 
it works the same here.

> -Original Message-
> From: Interest  On Behalf Of Alexander
> Dyagilev
> Sent: Thursday, 31 October 2019 5:43 PM
> To: interest@qt-project.org
> Subject: [Interest] Qml Canvas is too slow
> 
> Hello,
> 
> The following code is too slow (paint operation takes few seconds):
> 
> Canvas {
> 
> id: map
> width: columnsCount * rectangleSize
> height: rowsCount * rectangleSize
> anchors.horizontalCenter: alignCenter ? parent.horizontalCenter :
> undefined
> anchors.left: alignCenter ? undefined : parent.left
> anchors.bottom: parent.bottom
> property int offset: 1
> 
> onPaint: drawMap()
> 
> function drawMap() {
> if (columnsCount === 0 || rowsCount === 0) {
> return;
> }
> 
> var map = downloadProgressMap.map();
> var ctx = getContext("2d");
> 
> for (var i = 0; i < map.length; i++) {
> var x = (i % columnsCount) * rectangleSize;
> var y = (Math.floor(i/columnsCount)) * rectangleSize;
> 
> if (map[i]) {
> drawFillRect(ctx, x, y);
> } else {
> drawClearRect(ctx, x, y);
> }
> }
> }
> 
> function drawFillRect(ctx, x, y) {
> ctx.fillStyle = appWindow.theme.progressMapFillBorder
> ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2,
> rectangleSize - offset * 2);
> ctx.fillStyle = appWindow.theme.progressMapFillBackground
> ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
> (offset + 1) * 2,
> rectangleSize - (offset + 1) * 2);
> }
> 
> function drawClearRect(ctx, x, y) {
> ctx.fillStyle = appWindow.theme.progressMapClearBorder
> ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2,
> rectangleSize - offset * 2);
> ctx.fillStyle = appWindow.theme.background
> ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
> (offset + 1) * 2,
> rectangleSize - (offset + 1) * 2);
> }
> }
> 
> Can anything be done to improve its speed, or should we use c++ instead?
> 
> It paints the following:
> 
> 
> 
> Map size: 2323 elements.
___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest

Re: [Interest] Qml Canvas is too slow

[Jason H]

Very simply, you don't have to repaint the entire thing every time.

You can paint the squares, then fill them in one by one.

You're essentiallt re-drawing over already dorawn pixels.

 

 

Sent: Thursday, October 31, 2019 at 11:42 AM
From: "Alexander Dyagilev" 
To: "interest@qt-project.org" 
Subject: [Interest] Qml Canvas is too slow



Hello,

The following code is too slow (paint operation takes few seconds):

Canvas {

id: map

width: columnsCount * rectangleSize

height: rowsCount * rectangleSize

anchors.horizontalCenter: alignCenter ? parent.horizontalCenter : undefined

anchors.left: alignCenter ? undefined : parent.left

anchors.bottom: parent.bottom

property int offset: 1

 

onPaint: drawMap()

 

function drawMap() {

if (columnsCount === 0 || rowsCount === 0) {

return;

}

 

var map = downloadProgressMap.map();

var ctx = getContext("2d");

 

for (var i = 0; i < map.length; i++) {

var x = (i % columnsCount) * rectangleSize;

var y = (Math.floor(i/columnsCount)) * rectangleSize;

 

if (map[i]) {

drawFillRect(ctx, x, y);

} else {

drawClearRect(ctx, x, y);

}

}

}

 

function drawFillRect(ctx, x, y) {

ctx.fillStyle = appWindow.theme.progressMapFillBorder

ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, rectangleSize - offset * 2);

ctx.fillStyle = appWindow.theme.progressMapFillBackground

ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - (offset + 1) * 2, rectangleSize - (offset + 1) * 2);

}

 

function drawClearRect(ctx, x, y) {

ctx.fillStyle = appWindow.theme.progressMapClearBorder

ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, rectangleSize - offset * 2);

ctx.fillStyle = appWindow.theme.background

ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - (offset + 1) * 2, rectangleSize - (offset + 1) * 2);

}

}

Can anything be done to improve its speed, or should we use c++ instead?

It paints the following:



Map size: 2323 elements.

___ Interest mailing list Interest@qt-project.org https://lists.qt-project.org/listinfo/interest



___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest

Re: [Interest] Qml Canvas is too slow

[Nuno Santos]

Alexander,

Why do you want to stick to pure Qml?

What are the reasons?

--
Nuno Santos

No dia 31/10/2019, às 18:13, Alexander Dyagilev  escreveu:

> Thanks for the answer.
> 
> This means I'll have to use c++. But I was asking for a way to stick with a 
> pure QML.
> 
> 
> 
>> On 10/31/2019 7:52 PM, Nuno Santos wrote:
>> Alexander,
>> 
>> You should use QtQuick Scene Graph. It will be 100x faster.
>> 
>> Look for examples on QtCreator under the welcome tab. Use the search input 
>> box and write “scene graph”.
>> 
>> Scene Graph - Custom Geometry
>> Scene Graph - Graph
>> 
>> If it is the first time, it might look confusing but it will pay off.
>> 
>> Best,
>> 
>> Nuno
>> 
>>> On 31 Oct 2019, at 16:42, Alexander Dyagilev  wrote:
>>> 
>>> Hello,
>>> 
>>> The following code is too slow (paint operation takes few seconds):
>>> 
>>> Canvas {
>>> 
>>> id: map
>>> width: columnsCount * rectangleSize
>>> height: rowsCount * rectangleSize
>>> anchors.horizontalCenter: alignCenter ? parent.horizontalCenter : 
>>> undefined
>>> anchors.left: alignCenter ? undefined : parent.left
>>> anchors.bottom: parent.bottom
>>> property int offset: 1
>>> onPaint: drawMap()
>>> function drawMap() {
>>> if (columnsCount === 0 || rowsCount === 0) {
>>> return;
>>> }
>>> var map = downloadProgressMap.map();
>>> var ctx = getContext("2d");
>>> for (var i = 0; i < map.length; i++) {
>>> var x = (i % columnsCount) * rectangleSize;
>>> var y = (Math.floor(i/columnsCount)) * rectangleSize;
>>> if (map[i]) {
>>> drawFillRect(ctx, x, y);
>>> } else {
>>> drawClearRect(ctx, x, y);
>>> }
>>> }
>>> }
>>> function drawFillRect(ctx, x, y) {
>>> ctx.fillStyle = appWindow.theme.progressMapFillBorder
>>> ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 
>>> 2, rectangleSize - offset * 2);
>>> ctx.fillStyle = appWindow.theme.progressMapFillBackground
>>> ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
>>> (offset + 1) * 2, rectangleSize - (offset + 1) * 2);
>>> }
>>> function drawClearRect(ctx, x, y) {
>>> ctx.fillStyle = appWindow.theme.progressMapClearBorder
>>> ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 
>>> 2, rectangleSize - offset * 2);
>>> ctx.fillStyle = appWindow.theme.background
>>> ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
>>> (offset + 1) * 2, rectangleSize - (offset + 1) * 2);
>>> }
>>> }
>>> 
>>> Can anything be done to improve its speed, or should we use c++ instead?
>>> 
>>> It paints the following:
>>> 
>>> 
>>> 
>>> Map size: 2323 elements.
>>> ___
>>> Interest mailing list
>>> Interest@qt-project.org
>>> https://lists.qt-project.org/listinfo/interest
>> 
___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest

Re: [Interest] Qml Canvas is too slow

[Jérôme Godbout]

Maybe not as fast or future proof, but Maybe a simple Item Rectangle of each 
type (full and empty) and use a repeater of Qml ShaderEffect {} to duplicate 
the rendering, may lead to decent performance. Not sure if this will be good 
enough.


[36E56279]
une compagnie  [cid:image002.jpg@01D58FF6.802FCA00]
RAPPROCHEZ LA DISTANCE
Jérôme Godbout
Développeur Logiciel Sénior /
Senior Software Developer
p: +1 (418) 800-1073 ext.:109
amotus.ca<http://www.amotus-solutions.com/>
statum-iot.com<http://statum-iot.com/>
[cid:image003.png@01D58FF6.802FCA00]<https://www.facebook.com/LesSolutionsAmotus/>
 [cid:image004.png@01D58FF6.802FCA00] 
<https://www.linkedin.com/company/amotus-solutions/>  
[cid:image005.png@01D58FF6.802FCA00] <https://twitter.com/AmotusSolutions>  
[cid:image006.jpg@01D58FF6.802FCA00] 
<https://www.youtube.com/channel/UCoYpQgsmj1iJZyDjTQ3x8Ig>


From: Interest  On Behalf Of Alexander Dyagilev
Sent: October 31, 2019 2:13 PM
To: Nuno Santos 
Cc: interest@qt-project.org
Subject: Re: [Interest] Qml Canvas is too slow


Thanks for the answer.

This means I'll have to use c++. But I was asking for a way to stick with a 
pure QML.


On 10/31/2019 7:52 PM, Nuno Santos wrote:
Alexander,

You should use QtQuick Scene Graph. It will be 100x faster.

Look for examples on QtCreator under the welcome tab. Use the search input box 
and write “scene graph”.

Scene Graph - Custom Geometry
Scene Graph - Graph

If it is the first time, it might look confusing but it will pay off.

Best,

Nuno


On 31 Oct 2019, at 16:42, Alexander Dyagilev 
mailto:alervd...@gmail.com>> wrote:

Hello,
The following code is too slow (paint operation takes few seconds):
Canvas {

id: map

width: columnsCount * rectangleSize

height: rowsCount * rectangleSize

anchors.horizontalCenter: alignCenter ? parent.horizontalCenter : 
undefined

anchors.left: alignCenter ? undefined : parent.left

anchors.bottom: parent.bottom

property int offset: 1

onPaint: drawMap()

function drawMap() {

if (columnsCount === 0 || rowsCount === 0) {

return;

}

var map = downloadProgressMap.map();

var ctx = getContext("2d");

for (var i = 0; i < map.length; i++) {

var x = (i % columnsCount) * rectangleSize;

var y = (Math.floor(i/columnsCount)) * rectangleSize;

if (map[i]) {

drawFillRect(ctx, x, y);

} else {

drawClearRect(ctx, x, y);

}

}

}

function drawFillRect(ctx, x, y) {

ctx.fillStyle = appWindow.theme.progressMapFillBorder

ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, 
rectangleSize - offset * 2);

ctx.fillStyle = appWindow.theme.progressMapFillBackground

ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
(offset + 1) * 2, rectangleSize - (offset + 1) * 2);

}

function drawClearRect(ctx, x, y) {

ctx.fillStyle = appWindow.theme.progressMapClearBorder

ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, 
rectangleSize - offset * 2);

ctx.fillStyle = appWindow.theme.background

ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
(offset + 1) * 2, rectangleSize - (offset + 1) * 2);

}

}



Can anything be done to improve its speed, or should we use c++ instead?



It paints the following:







Map size: 2323 elements.
___
Interest mailing list
Interest@qt-project.org<mailto:Interest@qt-project.org>
https://lists.qt-project.org/listinfo/interest

___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest

Re: [Interest] Qml Canvas is too slow

[Alexander Dyagilev]

Thanks for the answer.

This means I'll have to use c++. But I was asking for a way to stick 
with a pure QML.



On 10/31/2019 7:52 PM, Nuno Santos wrote:

Alexander,

You should use QtQuick Scene Graph. It will be 100x faster.

Look for examples on QtCreator under the welcome tab. Use the search 
input box and write “scene graph”.


Scene Graph - Custom Geometry
Scene Graph - Graph

If it is the first time, it might look confusing but it will pay off.

Best,

Nuno

On 31 Oct 2019, at 16:42, Alexander Dyagilev > wrote:


Hello,

The following code is too slow (paint operation takes few seconds):

Canvas{

id:map
width:columnsCount*rectangleSize
height:rowsCount*rectangleSize
anchors.horizontalCenter:alignCenter?parent.horizontalCenter:undefined
anchors.left:alignCenter?undefined:parent.left
anchors.bottom:parent.bottom
propertyintoffset:1
onPaint:drawMap()
functiondrawMap(){
if(columnsCount===0||rowsCount===0){
return;
}
varmap=downloadProgressMap.map();
varctx=getContext("2d");
for(vari=0;i

Map size: 2323 elements.
___
Interest mailing list
Interest@qt-project.org 
https://lists.qt-project.org/listinfo/interest


___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest

Re: [Interest] Qml Canvas is too slow

[Nuno Santos]

Alexander,

You should use QtQuick Scene Graph. It will be 100x faster.

Look for examples on QtCreator under the welcome tab. Use the search input box 
and write “scene graph”.

Scene Graph - Custom Geometry
Scene Graph - Graph

If it is the first time, it might look confusing but it will pay off.

Best,

Nuno

> On 31 Oct 2019, at 16:42, Alexander Dyagilev  wrote:
> 
> Hello,
> 
> The following code is too slow (paint operation takes few seconds):
> 
> Canvas {
> 
> id: map
> width: columnsCount * rectangleSize
> height: rowsCount * rectangleSize
> anchors.horizontalCenter: alignCenter ? parent.horizontalCenter : 
> undefined
> anchors.left: alignCenter ? undefined : parent.left
> anchors.bottom: parent.bottom
> property int offset: 1
> onPaint: drawMap()
> function drawMap() {
> if (columnsCount === 0 || rowsCount === 0) {
> return;
> }
> var map = downloadProgressMap.map();
> var ctx = getContext("2d");
> for (var i = 0; i < map.length; i++) {
> var x = (i % columnsCount) * rectangleSize;
> var y = (Math.floor(i/columnsCount)) * rectangleSize;
> if (map[i]) {
> drawFillRect(ctx, x, y);
> } else {
> drawClearRect(ctx, x, y);
> }
> }
> }
> function drawFillRect(ctx, x, y) {
> ctx.fillStyle = appWindow.theme.progressMapFillBorder
> ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, 
> rectangleSize - offset * 2);
> ctx.fillStyle = appWindow.theme.progressMapFillBackground
> ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
> (offset + 1) * 2, rectangleSize - (offset + 1) * 2);
> }
> function drawClearRect(ctx, x, y) {
> ctx.fillStyle = appWindow.theme.progressMapClearBorder
> ctx.fillRect(x + offset, y + offset, rectangleSize - offset * 2, 
> rectangleSize - offset * 2);
> ctx.fillStyle = appWindow.theme.background
> ctx.fillRect(x + offset + 1, y + offset + 1, rectangleSize - 
> (offset + 1) * 2, rectangleSize - (offset + 1) * 2);
> }
> }
> 
> Can anything be done to improve its speed, or should we use c++ instead?
> 
> It paints the following:
> 
> 
> 
> Map size: 2323 elements.
> ___
> Interest mailing list
> Interest@qt-project.org
> https://lists.qt-project.org/listinfo/interest

___
Interest mailing list
Interest@qt-project.org
https://lists.qt-project.org/listinfo/interest