New Feature - Ignition & Perspective Co-Branding

Hello everyone, I’m happy to announce the release of the feature of Co-Branding for Perspective that will be available on the nightly builds.

The purpose of this feature is to give designers the ability to add branding to their projects for end users. The feature can be found in a new category in the Config section - Perspective > Branding Customization. Co-branding is currently a Gateway wide setting that will affect all Perspective projects.

Brand Theme Customization

Background Color, Text Color, Button Color, Button Text Color

This is a user defined color scheme that will be used in various parts of the Perspective application such as the authentication application in Perspective and terminal pages.

Logo

This image is currently being used as the loading screen logo and authentication application in Perspective.

Favicon

The favicon is an image that serves as branding for your web application for browsers. The favicon is used in various locations, but the classic example is the image used in your browser’s tab. Examples include - Windows tiles when saving the application to the start menu or taskbar through Microsoft Edge or saving the web application onto the home screen on Android.

For typical uses in desktop environments, 16x16 or 32x32 are recommended. Modern browsers will downscale images, so using larger images will work as well. For multi-platform environments, 180x180 or 192x192 are some recommended sizes since many Android devices will not use favicons smaller than a certain size.

App Icon

This is Apple’s flavor of a favicon in a sense. In the context of this feature, this is the apple-touch-icon that iOS platforms will use. For example, saving your web application to your home screen will use this icon. For best results, app icons should follow Apple’s best practices guidelines for icons. Refer here for more details, App Icons - Foundations - Human Interface Guidelines - Design - Apple Developer Note some browsers on Android in varying circumstances may use this icon.

Perspective Session About Page Customization

Users can now provide a custom view for the About Page launched from our app bar. This is set in the designer through the session props.

about_props

Custom About Page in action:

That wraps up the introduction. Please give this feature and go and feel free to post feedback down below. Thank you!

18 Likes

That’s perfect. But we can have even better if user can design each page in perspective and assign their view path in session property for each section(login, session Closed,…)
As an example I can have some overview of plant during loading resources page

1 Like

For loading I think the issue here would be it being a view, the loading is pulling in the resources necessary to show views at all. Likely it would need to be a static page to work, or something built directly out of HTML.

For the other screens mentioned it would probably work.

Yes even having access to modify the HTML, CSS code is nice too.

What I did:

After some testing, and this is likely not supported, I did manage to get a plant to show here!

And on the loading, logout, and session timeout screens:

How I did it:

The CSS To perform this dark magic
/* This is whats needed  to replace the login panel content */
.client-login .brand-side-panel .gradient-background {
    background-image: url("https://cgaxisimages.fra1.cdn.digitaloceanspaces.com/2014/07/17-copy1.jpg") !important;
    background-position: center; 
}

.client-login .brand-side-panel .gradient-background.perspective {
    background-image: url("https://cgaxisimages.fra1.cdn.digitaloceanspaces.com/2014/07/17-copy1.jpg") !important;
    background-position: center; 
}

/* This is how I clear out the text "Log in" */
.login-header span {
    display: none;
}

/* And replace it with new text */
.login-header::after {
    content: "Hello World!" !important;

    /* I add this background color just because my picture was too dark for the new text */
    background-color: #E5E5E5E5;
}

/* Here is how I Replace the background for the loading/logging pages */
.terminal-state-page.--standard, .terminal-login-page {
    background-image: url("https://c0.wallpaperflare.com/preview/652/943/804/close-up-fresh-freshness-garden.jpg") !important;
    background-size: cover;
}

/* And one again I give the loading section a background because my picture is too dark! */
.client-loading-page .loading-display .multi-stage-wheel {
    background-color: #E5E5E5E5;
}

/* And I give the logout message a background because my picture is too dark! */
.terminal-state-message {
    background-color: #E5E5E5E5;
}

However I did notice that one page in particular I can’t seem to hack through and that’s the page between “Continue to log in” and actually logging in.

I believe this has to do with the fact that it uses a different style sheet than the perspective app itself. So no matter what I am adding into theming, it never makes its way to this page. Maybe someone smarter than me (@victordcq ?) can figure out how to hack through this one as well, but I have fiddled with it quite a while!

My thoughts:

I do think that this new feature is a fantastic one, I know many of us have been begging for it and I think it will really help the customization of client projects. I do think that making this a little easier to do would be nice, I really appreciate the built in config webpage to make this happen, but for “super users” it would be nice for it to be easier to manage.

I do understand why IA is treading carefully here, because at the end of the day the product is theirs and this is co-branding. Meaning they have to be careful about how much we can tweak, so that the product is still uniform and resembles the tool they have built. I would like to see something between what I have done, and what they have currently put out. Something where we could easily make some more “advanced” tweaks, even if they (understandably) need to leave logos and page structures mostly the same.

Thank you for coming to my TED talk. Nice new feature!

9 Likes

Very nice! Looking forward to trying this out :slight_smile:
When you talk about cobranding though, ignition is really a development suite offering a dev environment and functionality to build your own custom application, similar to Visual Studio. I understand that there should be some identification in the client to show what it’s powered by, but this shouldn’t be a focus. It’s great to see we’re able to do all of this now though

1 Like

Not quite. Yes, Ignition is a development framework. But in a very limited commercial niche that commands a hefty runtime licence. Visual Studio applications have no runtime license fee.

IA very much has a case to insist on their branding.

3 Likes

Perfect hack.
Can we use the image management system to supply images for CSS?
if yes what is the syntax to access them in here?

use the copy path and the type in background-image: url("/system/images/COPIEDPATH")

1 Like

there should not be a space in between those, tho the line above should still work, let me check

Yup seems like its a different file…

i also tried to inject the img in the config page… the preview shows it works but seems ignition has protected the backend so i cant post it if its not of type color xP There might be a way to find out where exactly this gets stored in the gateway tho…

edit:
ah nope i found where to set it, but it breaks the cobranding :frowning: Seems they have some magic protection against my black magic :stuck_out_tongue: Eventho it works on the preview xD

2 Likes

Fixed! Good Catch.