The following feature is new in Ignition version 8.1.20
Click here to check out the other new features
Perspective Co-Branding is a Gateway setting that allows users to customize the look their Perspective Sessions with logos, pictures, and colors. Various aspects of Perspective can be customized, such as the login screen, the desktop icon, and more.  The table below lists various properties and elements that can be modified. These settings will not affect the internal contents or styles of the Perspective Session:

PropertyDescription
Custom BrandingChoose to toggle custom branding on or off. Default is off.
Background ColorChoose what the background color will be.
Text ColorChoose what the text color will be.
Button ColorChoose what color buttons will appear as.
Button Text ColorChoose what color button text will appear as.
LogoGraphic logo used on the Perspective Session login and loading screen. Supports .jpg or .png formats. Suggested logo size is 160x160 pixels.
FaviconFavicons will appear on your desktop browser tab after Session refresh. Supports .png format. Suggested logo size is 180x180 pixels.
App Icon

The iOS app icon is used when saving the page to the home screen. Supports .png format. Suggested logo size is 180x180 pixels. 

Note that the icon used on Android devices when creating a project shortcut is set by "Launch Icon" project property

PreviewShows a preview of the login and loading screens with custom branding applied.

On this page ...


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.

NameDefault 
ShowFalse

About Icon

About View

About Title


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

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

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.


Examples

Example 1 (Login and Terminal Screens)

The settings below will modify the look of the Perspective login, loading, and terminal screens:

PropertyValue
Custom BrandingTrue
Background Color#1383C3
Text Color#FFFFFF
Button Color#1383C3
Button Text Color#FFFFFF
Logo

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:

PropertyValue
showTrue
iconmaterial/clean_hands
pathappBarAboutView
titleI 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:


  • No labels