New Feature - Ignition & Perspective Co-Branding

[ayu]

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.

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!

[nader.chinichian]

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

[kgamble]

@nader.chinichian

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

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.

[nader.chinichian]

@kgamble

ge to work, or something built directly out of HTM

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

[kgamble]

What I did:

@nader.chinichian

As an example I can have some overview of plant during loading resources page

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, .login-header.perspective span {
    display: none;
}

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

    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!

[nminchin]

Very nice! Looking forward to trying this out
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

[pturmel]

@nminchin

dev environment and functionality to build your own custom application, similar to Visual Studio

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.

[nader.chinichian]

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?

[victordcq]

@nader.chinichian

image management

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

[victordcq]

@kgamble

.gradient-background .perspective

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 Seems they have some magic protection against my black magic Eventho it works on the preview xD

[kgamble]

@victordcq

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

Fixed! Good Catch.

[Arnaud_Declerck]

@ayu
where are my feedback:

• Really easy to customized fast your project with your own data
• I've done it in less that 5 min with the color picker

Where are my wanted feature:

• It would be nice if we could add some background picture natively
• Allow to change the "Log In" text by any other text like the project name for example
• Allow change of sessions close icon.
• Change the text font, size

For a first try this is more than welcome.
Thanks

[Phillip_Seboa]

Any opportunity to put my face on an app is a good one, i love that IA actively listen to the community.

[kgamble]

In some cases it looks like the login text is given another class in some cases named perspective so I updated the above css to include that optional class:

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

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

    background-color: #E5E5E5E5;
} 

[tupanaster]

Why was it pushed as co-branding instead of giving us the ability to brand our products without Ignition's logo?

At the beginning, I was just looking for a way to login without being forward to the Ignition login page. I never thought about the favicon and app icon. I'm sure at some point I was going to bump in those requests as other people already have.

Going back to my main point, Ignition is already the best. Why push their logo where we don't want it?

Edit #1:
When I say "we" I refer to my group of people rather than the whole community. Other groups/people can speak for themselves.

[pturmel]

@tupanaster

without Ignition's logo?

Because Inductive wants its logo on all installations. It doesn't want integrators or other vendors claiming that a solution presented is entirely their own. I'd do the same. I'd do it so that end users know that they have a support option if they get upset with their integrator/vendor. I understand but disagree with an integrator's desire to not give their client any options.

IA has said similar many times. They ended the white label program from earlier versions, probably from that kind of consideration. If you want something entirely white label, go create your own or apply $$$ branding to something else.

And running Ignition as a service for end-users is explicitly not supported. Not forbidden, but not supported.

[tupanaster]

@pturmel

It doesn't want integrators or other vendors claiming that a solution presented is entirely their own.

I think it's entirely clear in the quotation the Ignition will be used and not another brand. I guess some companies would try or have tried to hide that.

@pturmel

And running Ignition as a service for end-users is explicitly not supported. Not forbidden, but not supported.

What kind of "dark" contracts are you referring to?

@pturmel

If you want something entirely white label, go create your own or apply $$$ branding to something else.

If there were some type of malpractice that would explain it.

[Kevin.Herron]

@tupanaster

Why was it pushed as co-branding instead of giving us the ability to brand our products without Ignition's logo?

I don't know what answer you want to hear besides "because that's what we decided".

We think it's important to retain some of Ignition and Perspective's branding presence. That's it. You might not agree, but too bad.

[Bradley_Williams]

Has this feature made it out of nightly releases yet? If so, what version (or higher) do we need to be on in order to use this feature?

Currently on 8.1.17 and not seeing it