Separate Component Problem About Tutorial: The AudioThumbnail Class

General JUCE discussion
1

Hi everyone,

I am new to C++ and JUCE and I just started studying the tutorial, and now I have a problem about Tutorial: The AudioThumbnail Class. Sorry for my poor English, I will try to describe my problem clearly.

In the last part of this tutorial, the tutorial suggests to separate the thumbnail drawing and position line drawing into two child component since it can avoid redrawing the waveform every frame when updating the timeline marker.

To test it, I use two integer value to calculate the execution number of repaint() for Class SimpleThumbnailComponent and Class SimplePositionOverlay. Class SimplePositionOverlay inherits the Timer class, it would execute paint() function every 40ms. While the repaint() function in class SimpleThumbnailComponent would only execute when the “source” changed.

I totally tested it in three conditions:

  1. The code in the tutorial is as follows, two child components are arranged same bounds. To show the execution information, I just modified the parameter value for Rectangle:
    const Rectangle thumbnailBounds(10, 100, getWidth() - 20, 80);
    thumbnailComp.setBounds(thumbnailBounds);
    positionOverlay.setBounds(thumbnailBounds);

The result is:
image

  1. I modified it, two child components are arranged two different bounds:
    const Rectangle thumbnailBounds(10, 100, getWidth() - 20, 80);
    thumbnailComp.setBounds(thumbnailBounds);

     const Rectangle<int> timelineBounds(10, 200, getWidth() - 20, 50);
 positionOverlay.setBounds(timelineBounds);

The result is:
image

  1. I modified it again, two child components are arranged two different bounds, but overlapped with each other:
    const Rectangle thumbnailBounds(10, 100, getWidth() - 20, 80);
    thumbnailComp.setBounds(thumbnailBounds);

     const Rectangle<int> timelineBounds(10, 150, getWidth() - 20, 50);
 positionOverlay.setBounds(timelineBounds);

The result is:
image

So I think the conclusion of my test is:
If two child components are overlapped, then if one component is repainted, the other component would also be repainted.

And my questions are:

  1. Does something wrong with my description and conclusion, because it does’t consistent with the words in tutorial.

  2. If my description is right, then how to solve this issue. That is, to redraw one child component but keep the other child component arranged the same bound.

Thanks for your time to read my question, it maybe just a simple question, but I have been puzzled for several days.