The Application tab is a workspace in Atmosphere Studio for developing an IoT project’s interface that interacts with the end device. The Application tab also often acts as a gateway between the Embedded and Cloud tabs, and is used to have data sent from the embedded firmware up to Atmosphere. While in the Application tab, the Element Toolbox displays elements that execute on the application, which includes visual elements that represent interface components and functional elements that run in the background.
The Application tab’s toolbar includes access to the app builder.
The app builder is a visual representation of a project’s interface. After a project is compiled, its interface is accessible on Atmosphere from the associated end device’s page in Devices.
Click the button to display the interface editor beside the Application tab’s canvas.
When a visual element is added to the canvas, a corresponding interface component is added to the app builder. For instance, adding a button element to the canvas causes a button to appear in the app builder. This button can then be moved, scaled, and customized to your liking.
The app builder includes a toolbar with a range of operations that facilitate in designing the interface:
|App grid||Turn on the app grid lines. These aren’t displayed in the finished app, but assist with placing things on the interface.|
|App grid increase||Increase the size of the app grid. This can only be used if the app grid is visible.|
|App grid decrease||Decrease the size of the app grid. This can only be used if the app grid is visible.|
|Snap to grid||Snap components to the grid. While a component is moved, it will align automatically to the closest grid lines.|
|Bring to front||Bring the selected component to the foreground of the interface.|
|Send to back||Send the selected component to the back of the interface. If a background color or image is enabled, the component will remain above it.|
|Preview||Run the application in preview mode. Preview mode allows you to simulate running the application and lets you interact with its components. It doesn’t connect to the end device however or allow you to simulate an end-to-end application-to-hardware preview.|
A project’s interface can be built for numerous display sizes so it may fit the screen appropriately based on the device. The app builder includes several operations based on editing the display:
|X/Y||Coordinates||The x- and y-coordinates of a selected element. Editing the coordinates will move the selected element to that location. Coordinate axes begin at the top-left of the interface, and all coordinates for a component are based on its top-left corner.|
|W/H||Scale||The width and height of a selected element. Editing the scale will resize the selected component.|
|Rotate display||Rotate the interface to portrait or landscape. Components automatically shift on the display to account for the rotation. The interface is set to portrait by default.|
|Select display||Select the display size to work on. The display drop-down menu contains all display sizes added to the project. The smallest supported display size (320x560) is available by default to ensure the interface can fit any screen.|
|Add display||Select additional display sizes for the project. For information on adding displays, visit Adding Display Sizes below.|
Adding Display Sizes
To view the list of display size options, click the button.
A complete list of supported display sizes is available to choose from. These sizes include many of the most common and popular devices, allowing you to ensure the interface can fit the devices you intend to use it with.
To add any number of display sizes, click its switch in the table and click Save. The selected display sizes are then available in the Select Display drop-down menu. After adding a new display, the interface components are automatically moved to fit within the size.
When working with multiple displays, each size is managed independently in the app builder. This offers you control over how the interface looks on a given device. Visual changes on one display don’t affect other displays, so if a component is scaled or a background image modified, it only impacts the display being worked on. Likewise, if a visual change needs to be done across all displays those changes must be performed on each display size individually.
If a visual element is removed from the canvas, the corresponding visual component is removed from all displays.