177 views
in GUI Development by

Hi,

I have a question regarding overlap "Bitmap Frame" with "Opacity". Is possible cover privious "Bitmap Frame" and just show last "Bitmap Frame"? I made a simple project as following link for easy explain this question.

http://ask.embedded-wizard.de/?qa=blob&qa_blobid=1908665904280851901

You will see following picture after you open this project file. I hope the result of view by following item. 
a. 5 = 4 = 3 = 2 = 1
b. 8 = 9 = 10 = 7 = 6.

For more easy explain this question: My customer hope view effect are all same for "Opacity = 255" and "Opacity = 128". Is possible this effect by Embeddid Wizard?  

1 Answer

0 votes
by
 
Best answer

It can be possible. The effect depends however on your exact application case. Usually, when several semitransparent objects overlap one upon the other, the resulting screen image is a combination of images of all these involved objects. This is controlled by:

  • The content of an image itself (e.g. the bitmap). The more opaque the content of one object, the less visible are all objects lying behind it.
  • The Opacity property of the object. With this property you can additionally modulate the opacity of the original content.
  • The ColorTL .. ColorBR properties of the object. If these properties specify a non opaque color (color with alpha < 255), the values of these properties also modulate the opacity of the original content. Here however, specifying different values for the ColorTL .. ColorBR properties, the opacity modulation effect can have a linear gradient characteristic.

This behavior changes when you set the property AlphaBlended of an object to the value false. With this setting the graphics composition treates the object as if it where opaque. All objects lying behind it are simply clipped. Anyway, the opacity information of the affected object is taken over into the resulting screen image. Causing the parts of the screen itself to become semitransparent. I suppose, this is not what you are expecting to have.

The setting AlphaBlended = false is primarily used to 'punch holes' in the GUI where background content can show through. This is for example the case, when the GUI is layered over a video content or TV screen, etc.

However, together with the property Buffered, it can also be used for other more sophisticated application cases like yours. Usually during the screen composition all GUI components are drawn directly into the screen. With the property Buffered you can configure one component to store its own image within an internal buffer. In such case the stored image is drawn into the screen instead of all objects embedded within the component. The buffer itself is managed and udated automatically. You don't need to take care of it.

Now when you have the component filled with semitransparent objects and one of the objects lying in front has the property AlphaBlended = false, the affected object will clip all objects lying behind it. Moreover, its opacity information is stored within the internal buffer mentioned above. The resulting image of the component contains thus no color information of the covered objects. Later during the screen composition, when such component is drawn, its image is simply alphablended into the screen. On the screen you will see only the object signed with the property Alphablended = false. Its sibling objects lying behind it within the same component are clipped.

Following are the steps to implement such effect:

  • Add a new component to your project.
  • Fill the component with all desired objects (frame views, text, etc.)
  • Configure the frame views with the desired Opacity value.
  • For the 'important' view, set its property AlphaBlended = false.
  • Look in Inspector for the member called this. It represents the component you are currently edditing. 
  • Selet this member and change its property Buffered to the value true.
  • Now you can embedd the just created component within other components or the application itself.

So far, your particular application case appears to be feasible. I would however question this application case. From technical point of view, the described trick is not effective. Depending on the size of your component, a lot of additional video memory for the internal buffers will be necessary.

Much better would be to design the application so, that if several semi-transparent objects overlap and you wish to have some of these objects invisible, to switch off their Visible property accodingly. With this simple approach you will reach the best possible performance of the application by saving the memory.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...