Responsive Layouts
Bored of using an adaptive design? Check out this article and start creating responsive layouts using breakpoints in i4scada SmartEditor.
A responsive layout provides the best view of your application for every screen size. SmartEditor allows you to customize up to 25 individual layouts for every screen size your application needs to support. Each layout is defined by breakpoints which specify the maximum screen size for the dedicated layout.
Unlike using an adaptive design, using breakpoints in SmartEditor allows you to have complete control over each layout, no matter how varied they are.
Manage Breakpoints
Tip
To create your own responsive layout using breakpoints, follow up our step-based tutorial here.
Understanding breakpoints in SmartEditor
To start creating responsive layouts for each screen size, you first need to understand how breakpoints work in SmartEditor. A break-point defines the maximum screen (or window) width for which a layout variant will be displayed. This means that, when creating your application, each break-point layout must be designed and fine tuned.
Some of the extensions available in SmartEditor can exist in all your breakpoints as a single instance and will retain the size, position, and visibility for each breakpoint. For example, in the application pictured below, the same text, wf-switch-button, and wf-bargraph-horizontal extensions have different positions and sizes.
Example 1
Example 2
Example 3
Some extensions, like the wf-alarm-viewer, will need to be used once per each break-point and configured individually. These extensions that cannot transcend breakpoints can be hidden for all breakpoints in which they should not appear, using the Object Manager panel.
Any image or shape must be individually placed and configured in each break-point, and hidden in the breakpoints when it should not be visible. This is required since any size or position modification will be carried through all breakpoints and will look distorted in the ones that don't fit the initial setup.
Object Manager panel
Extensions can only be hidden or displayed depending on the break-point. If deleted, they will be deleted from all the breakpoints!