46 views
in GUI Development by

Hi,

We have a requirement where we want the screen orientation of the UI to be changed based on variant.

Is there any possibility to achieve this within a solution, along with the scenes(classes with views) rotated and aligned based on Portrait/Landscape mode(Screen size).

Consider the below example

 

Thanks & Regards,

Kavya

1 Answer

0 votes
by

Hello Kavya,

variants are useful to create different layouts of a GUI component. So, yes, you can manage within a project multiple designs of one and the same GUI component and switch the design if necessary. See also Managing variants.

The rotation, however, is a problematic aspect. If there is no GPU in the target system able to perform the rotation, this will impact the performance of the GUI application. To avoid this, Embedded Wizard provides the attribute  ScreenOrientation. This attribute affects how image and font resources are generated and stored in the target system. In this manner, the resources are already prepared for the desired rotation so the HW (e.g. 2D accelerators) can access and copy the images or font glyphs directly without applying any additional rotation steps.

With ScreenOrientation you are thus able to select the desired orientation without any performance disadvantages. The selection, however, is static and can't change at the runtime. Thus if your question "Is there any possibility to achieve this within a solution ..." asks for the possibility to manage two different rotations within one binary in the target system, the answer is 'no', or at least 'yes, but with performance impact'.

If your target system contains a 3D GPU (it is e.g. OpenGL ES 2.0 compatible), orientation can be configured at the runtime. Otherwise you can modify the default implementation provided in the Build Environment so that when copying the graphical contents rendered by the GUI application, you take care of an additional rotation step. In other words, Embedded Wizard renders into an off-screen frame buffer without any rotation and then at the end of the screen update you copy the pixel from the off-screen buffer to the final frame buffer by taking in account the desired rotation. You implement for this purpose two for-loops to iterate over the pixel from the off-screen buffer and copy them to the frame buffer.

If your question "Is there any possibility to achieve this within a solution ..." asks for the possibility to manage two different rotations within one Embedded Wizard project, the answer is 'yes'. In such case, you would need two Profile members in your project. One Profile for the Landscape orientation and the second profile for the Portrait orientation. The desired orientation is configured for each Profile by using its ScreenOrientation attribute. For example, you configure the Landscape profile with orientation Normal and the Portrait profile with orientation Rotated_90.

Now, you can create all the GUI components needed in your project (e.g. menus, dialogs, screens, etc.). You design the components consequently for the Landscape layout. Then you override each GUI component by a new variant and adapt the size and the layout of the component to be Portrait. Finally you configure the attribute VariantCond of each variant to correspond to the name of the Profile representing the Portrait layout. 

When you generate code for the profile Landscape, the variants are not taken in account. Thus, from the generated code you can create a binary for the Landscape layout. When you select the Portrait profile for code generation, the variants are active and override the layout of all GUI components to be Portrait. From the generated code you can create a binary for the Portrait layout. So from one and the same Embedded Wizard project you can create two binaries for two different layouts/rotations.

So far the technical backgrounds and the possibilities. Does it help you further?

Best regards

Paul Banach

by

Hi Paul,

Thanks for the information! Managing 2 orientations using profiles in a solution sounds good!

I have the following couple of queries from the above explanation 

1. "Then you override each GUI component by a new variant and adapt the size and the layout of the component to be Portrait.". This can be easily achieved when we configure the two profiles with different screen sizes. But, with the same screen size and only the Screen Orientation change, it will reflect only in the target system, but inside Embedded Wizard studio, the original orientation i.e., Normal will be visible even if the Profile's orientation is Rotated_90. In such case, how do we adapt/edit the size and layout of the components?

2. Also, is there a possibility of automatic layout and alignment through Screen Orientation, without rotating the components? (Example-(1) in the diagram)

Is Screen Orientation really useful for the below scenario?

 

Thanks and regards,

Kavya

by

Hello Kavya,

1. ... but inside Embedded Wizard studio, the original orientation i.e., Normal will be visible even if the Profile's orientation is Rotated_90. In such case, how do we adapt/edit the size and layout of the components?

In Embedded Wizard Studio when editing the GUI you see what you will see in the target system with the LCD installed in the desired rotation. For example, if you configure ScreenOrientation with Rotated_90, then Embedded Wizard will take care of all the necessary conversion steps during the code generation. Nevertheless, during the design time, all GUI components still appear exactly as they will be shown in your product.

In fact, it would be very confusing for the designer to edit a GUI component which appears rotated in the Composer. What you need is to configure the ScreenSize attribute for each profile. For example, the Landscape profile is configured with ScreenSize <640,480> and the Portrait profile is configured with the ScreenSize <480,640>.

2. Also, is there a possibility of automatic layout and alignment through Screen Orientation, without rotating the components? (Example-(1) in the diagram)

There is no automatism to determine the rules how views are arranged depending on the orientation. You will need to rearrange the views manually. However, following trick can simplify this. Following example: let's assume you have created a GUI component designed for the Landscape layout:

Now you have overridden the GUI component by a variant for the Portrait layout. When open the variant, it appears exact as the original GUI component (see the screenshot above). Thus as first step you change the bounds of the component (you drag on the thick blue border). This would result in following content of the Composer window:

The size of the component is thus already correct for the Portrait layout. The arrangement of the views is still in the Landscape layout. Now, select all the views in the composer. The views are surrounded by a selection border:

Klick in the bottom-right corner of the selection border and drag it to fill the canvas area (the blue border). Thereupon all the views are moved/resized proportionally:

In the final step you can individually move and adjust the size of views to achieve the desired layout. For example, you can arrange the buttons one below the other:

Concerning you last question "Is Screen Orientation really useful for the below scenario?", the ScreenOrientation is an instruction for the code generation to automatically rotate all bitmap and font resources so no rotation need to be performed at the runtime in the target device. The rotation is executed at the code generation time only. So, yes, the icons will appear as desired (case 1 from your image) and the user can see them correctly.

Does it help you further?

Best regards

Paul Banach

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

...