App Bar Customization
In addition to the login, loading, and terminal screens, you can also personalize the bottom-docked App Bar by:
- Choosing to toggle the App Bar off or on.
- Changing the icon for the About button.
- Changing the view that displays the about modal.
- Changing the title of the about modal.
The table below lists the customizable elements of the App Bar, as well as with what they look like by default. For more information about individual Session properties that affect the App Bar, click here.
Best Practices (Favicons and App Icons)
There are some considerations to take when selecting or designing a logo to use as a favicon or app icon. While some of these considerations are not mandatory, they may give some insight into optimal logo design.
Here are a few tips that applies to both favicons and app icons:
- Use a higher resolution of the final icon you have selected, if possible.
- Since your image resolution may be downscaled, using a higher resolution picture will help retain image quality.
- If bandwidth or some other bottlenecking factor is an issue, using smaller favicons may help reduce data load.
Favicons are generally used in browser tab icons, desktop icons, and Android icons. The bullet(s) below contain tips on designing favicons:
- (Chrome on Android specific) If your favicon is too small, then the favicon will not be used when saving to the home screen.
- For typical uses in desktop environments, either 16x16px or 32x32px are recommended.
- Modern browsers downsize images, so larger images will also work.
- For multi-platform environments, either 180x180px or 192x192px are recommended.
- Many Android devices will not use favicons smaller than a certain size.
App icons are used by Apple devices and may follow some different rules than favicons. For Apple's official documentation detailing best practices and creating an app icon for iOS and other Apple devices, click here.
One caveat to keep in mind is that while the favicon and logo fields will accept and render icons with transparent designs without issue, attempting to use an icon with transparency as an app icon will result in the icon appearing all black.
Best Practices (Design)
Listed below are a few basic tips when designing your Perspective login, loading, and terminal screens. These tips are not mandatory, as styles, personalization, and customization preferences differ from person to person and organization to organization. Additionally, these tips may extend to apply during general Perspective Session design.
- Use text colors that can be easily seen against their backgrounds.
- Keeping designs simple will help minimize cognitive load.
- Use logos and icons that are easily identifiable.
Example 1 (Login and Terminal Screens)
The settings below will modify the look of the Perspective login, loading, and terminal screens:
|Button Text Color||#DB6B6B#FFFFFF|
Inductive Automation Logo
The following is the rendered output:
Example 2 (App Bar)
The settings below will modify the look of the Perspective Session's App Bar:
|title||I am a new title!|
The following is the rendered output affected by the icon property:
The following is the rendered output affected by the path and title properties: