===== Branding =====

Hosting Mervis SCADA offers the option to use custom branding and run the entire hosted application on your own domain.

Below are the basic requirements.

==== Domain ====

Branding is tied to the customer domain. It is necessary to register the appropriate second-level domain (e.g., mycompany.cz) or third-level domain (e.g., scada.mycompany.cz) and point its CNAME DNS records to ''scada.mervis.info'' or direct it to the corresponding IP address.

==== Desktop GUI ====
=== Favicon ===

Square image (logo) displayed in various places depending on the type of device (browser tab, history, favorite pages, desktop icon on a mobile device....)

^ File ^ Format ^ Size ^ Description ^
| favicon.ico | .ico | 16x16, 32x32 | Required. Main application icon |
| apple-touch-icon.png | .png | 180x180 | Recommended. Icon for iPhone and iPad |
| android-192x192.png | .png | 192x192 | Recommended. Icon for Android devices |
| android-512x512.png | .png | 512x512 | Recommended. Icon for Android devices |
| favicon-size.png | .png | 24x24, 64x64, 128x128, ... | Optional. Additional icons with various sizes |
| name.svg | .svg | 16x16 - 512x512 | Optional. SVG icon for light and dark browser themes |

=== Logos ===

Supported image formats for logos are all those supported by HTML. Preferred formats are png, svg, and jpg. The optimal size for each logo is provided, which depends on the element into which the logo is inserted. If the logo is larger than the parent element, it will be resized to fit the element. If the logo is smaller than the parent element, its size will be maintained and the logo will be centered within the element.

== AppLogo ==
^ Configuration Item ^ Optimal Size ^ Description ^
| ESGVisionConfig.AppLogo | 168x64 | Application logo on the login screen |

{{:cs:mervis-scada:47-scada.mervis.info:applogo.png?nolink|}}

== AppLogoSmall ==
^ Configuration Item ^ Optimal Size ^ Description ^
| ESGVisionConfig.AppLogoSmall | 84x32 | Application logo in the top left corner of the user interface |

{{:cs:mervis-scada:47-scada.mervis.info:applogosmall.png?nolink|}}

== AppLoadingImage ==
^ Configuration Item ^ Optimal Size ^ Description ^
| ESGVisionConfig.AppLoadingImage | 418x160 | Application logo displayed during data loading |

{{:cs:mervis-scada:47-scada.mervis.info:apploadingimage.png?nolink&600|}}

== LoginLogo ==
^ Configuration Item ^ Optimal Size ^ Description ^
| ESGVisionConfig.LoginLogo | 168x64 | Supplementary logo on the login screen. The logo can be placed anywhere within the login screen space |

{{:cs:mervis-scada:47-scada.mervis.info:loginlogo.png?nolink&600|}}

=== Configuration Items ===

== AppTitle ==
^ Configuration Item ^ Type ^ Description ^
| ESGVisionConfig.AppTitle | string | Application title displayed in the browser window (browser tab) |

{{:cs:mervis-scada:47-scada.mervis.info:apptitle.png?nolink|}}

== ShowLoginContacts ==
^ Configuration Item ^ Type ^ Description ^
| ESGVisionConfig.ShowLoginContacts | boolean | Enable or disable the display of contacts on the login screen. Specific contact settings are configured via the ESGVisionConfig.LoginContacts item |

== LoginContacts ==
^ Configuration Item ^ Type ^ Description ^
| ESGVisionConfig.LoginContacts | string[] | Array of objects for setting contacts on the login screen. Each object can contain items name, email, mobile, link |

{{:cs:mervis-scada:47-scada.mervis.info:logincontacts.png?nolink|}}

== ShowMervisNews ==
^ Configuration Item ^ Type ^ Description ^
| ESGVisionConfig.ShowMervisNews | boolean | Show or hide Mervis news on the login screen |

{{:cs:mervis-scada:47-scada.mervis.info:showmervisnews.png?nolink|}}

== LoginWidth ==
^ Configuration Item ^ Type ^ Description ^
| ESGVisionConfig.LoginWidth | string (e.g., "350px") | Width of the form on the login screen |

=== Color Scheme ===

== Basic Colors ==

This table lists the colors that suffice for basic branding of the entire application. Additional detailed settings of individual colors for specific application elements can be found below.

**Colors:**
^ Name ^ Original Value ^
| mainBackgroundColor | #3399cc |
| mainButtonColor | #004d7d |
| invColor | #ffffff |
| mainButtonActiveColor | #66ccff |
| alarmButtonActiveColor | #ff6666 |
| menuButtonBackgroundDisabledColor | #767676 |
| commErrorButtonHoverColor | #ff9999 |
| alarmMainButtonColor | #990000 |
| historyButtonColor | #006633 |

{{:cs:mervis-scada:47-scada.mervis.info:basic.png?nolink|}}

== Login Screen ==

**Colors:**
^ Name ^ Original Value ^
| loginBackgroundColor | #3399cc |
| loginTextColor | #ffffff |
| signInMainButtonColor | #004d7d |
| signInTextColor | #ffffff |
| invColor | #ffffff |

{{:cs:mervis-scada:47-scada.mervis.info:logincolors1.png?nolink|}}

**Active Button:**
^ Name ^ Original Value ^
| mainButtonActiveColor | #66ccff |

{{:cs:mervis-scada:47-scada.mervis.info:logincolors2.png?nolink|}}

== Main Screen ==

**Colors:**
^ Name ^ Original Value ^
| mainBackgroundColor | #3399cc |
| invColor | #ffffff |

{{:cs:mervis-scada:47-scada.mervis.info:mainscreen.png?nolink|}}

== Project Tabs ==

**Colors:**
^ Name ^ Original Value ^
| mainBackgroundColorProjectsDropdown | #004d7d |
| projectLabelButtonColor | #004d7d |
| mainBackgroundColor | #3399cc |
| commErrorButtonHoverColor | #ff9999 |
| alarmButtonActiveColor | #ff6666 |
| invColor | #ffffff |

{{:cs:mervis-scada:47-scada.mervis.info:projecttabs.png?nolink|}}

== Main Menu ==

**Colors:**
^ Name ^ Original Value ^
| menuButtonBackgroundActiveColor | #66ccff |
| dpFilterDropdownButtonColor | #004d7d |
| dpSelectionColor | #ff6666 |
| menuButtonBackgroundDisabledColor | #767676 |

{{:cs:mervis-scada:47-scada.mervis.info:mainbuttons.png?nolink|}}

== Tree View ==

**Colors:**
^ Name ^ Original Value ^
| projectTreeSelectedBgColor | #ffffff |
| mainButtonActiveColor | #66ccff |
| projectTreeBgColor | #ffffff |

{{:cs:mervis-scada:47-scada.mervis.info:treeview.png?nolink|}}

== Right Panel ==

**Colors:**
^ Name ^ Original Value ^
| invColor | #ffffff |
| alarmMainButtonColor | #990000 |
| historyButtonColor | #006633 |
| arrowUpDisableColor | #006600 |
| arrowDownDisableColor | #660000 |
| timeRecency2Color | #cccccc |
| timeRecency3Color | #333333 |
| timeRecency4Color | #666666 |
| textColorRecency | #ffffff |

{{:cs:mervis-scada:47-scada.mervis.info:rightpanel.png?nolink|}}

**Active Elements:**
^ Name ^ Original Value ^
| alarmBackgroundColor | #cc3333 |
| historyBackgroundColor | #009966 |
| alarmButtonActiveColor | #ff6666 |
| arrowUpActiveColor | #33cc33 |
| arrowDownActiveColor | #ff3333 |

{{:cs:mervis-scada:47-scada.mervis.info:rightpanelactive.png?nolink|}}

== Table View ==

**Colors:**
^ Name ^ Original Value ^
| dpFilterButtonColor | #004d7d |
| dpTypeDiscreteInputIconColor | #999900 |
| mainButtonInactiveColor | #666666 |
| dpTypeDiscreteOutputIconColor | #009900 |
| dpTypeDateTimeInputOutputIconColor | #993300 |
| timeRecency2Color | #cccccc |
| timeRecency3Color | #333333 |
| timeRecency4Color | #666666 |
| textColorRecency | #ffffff |
| icoCommErrorColor | #ff6666 |
| icoAlarmWarningColor | #ff9966 |
| alarmFilterAcknowledgedButtonActiveColor | #66ff66 |
| icoAlarmInformColor | #66ccff |
| tableGridHeadBacgroundColor | #004d7d |
| tableRowActiveColor | #33cccc |
| dpTableColor | #3399cc |
| dpTableColorActive | #66ccff |
| dpTableTextColorActive | #cc3333 |
| mainButtonColor | #004d7d |
| menuBackgroundColor | #0f5b8a |

{{:cs:mervis-scada:47-scada.mervis.info:tableview1.png?nolink|}}

== Alarms ==

**Colors:**
^ Name ^ Original Value ^
| projectTreeBgColor | #ffffff |
| alarmButtonActive

Color | #ff6666 |
| alarmFilterActiveButtonColor | #913307 |
| alarmFilterMemoryButtonColor | #004d7d |
| alarmFilterAcknowledgedButtonColor | #029307 |
| alarmFilterMemoryNotActiveButtonColor | #008ab4 |
| tableRowGroupColor | #cccccc |
| invColor | #ffffff |
| mainBackgroundColor | #3399cc |
| alarmBackgroundColor | #cc3333 |
| alarmMainButtonColor | #990000 |
| mainButtonColor | #004d7d |

{{:cs:mervis-scada:47-scada.mervis.info:alarms.png?nolink|}}

**Active Filters:**
^ Name ^ Original Value ^
| alarmFilterActiveButtonActiveColor | #f19366 |
| alarmFilterMemoryButtonActiveColor | #66ccff |
| alarmFilterAcknowledgedButtonActiveColor | #66ff66 |
| alarmFilterMemoryNotActiveButtonActiveColor | #6ed7f7 |

{{:cs:mervis-scada:47-scada.mervis.info:alarmsactive.png?nolink|}}

== Project History, Project Statistics ==

**Colors:**
^ Name ^ Original Value ^
| mainButtonDisabledColor | #333333 |
| historyButtonColor | #006633 |
| historyButtonActiveColor | #33cc99 |
| historyBackgroundColor | #009966 |
| invColor | #ffffff |
| mainBackgroundColor | #3399cc |

{{:cs:mervis-scada:47-scada.mervis.info:logs.png?nolink|}}

== Dropdown Menu ==

**Colors:**
^ Name ^ Original Value ^
| menuGroupBackgroundColor | #126aa1 |
| menuTextColor | #ffffff |
| menuBackgroundColor | #0f5b8a |

{{:cs:mervis-scada:47-scada.mervis.info:dropdownmenu.png?nolink|}}

**Active Row:**
^ Name ^ Original Value ^
| tableRowActiveColor | #33cccc |

{{:cs:mervis-scada:47-scada.mervis.info:dropdownmenuactive.png?nolink|}}

== Modal Window ==

**Colors:**
^ Name ^ Original Value ^
| modalTextColor | #ffffff |
| modalBackgroundColor | #004d7d |
| modalButtonColor | #3399cc |
| mainButtonActiveColor | #66ccff |
| invColor | #ffffff |

{{:cs:mervis-scada:47-scada.mervis.info:modal.png?nolink|}}

== Overview Panel ==

**Colors:**
^ Name ^ Original Value ^
| invColor | #ffffff |
| alarmButtonActiveColor | #ff6666 |
| overviewHeaderColor | #004d7d |
| overviewHeaderColorHover | #66ccff |
| projectPanelIcoGoodColor | #009900 |
| projectPanelIcoBadColor | #ff6666 |
| overviewGoToSchemaColor | #004d7d |
| mainButtonDisabledColor | #333333 |

{{:cs:mervis-scada:47-scada.mervis.info:overview.png?nolink|}}

== Notes ==

**Colors:**
^ Name ^ Original Value ^
| noteOrange | #e19e6b |
| noteRed | #f25a64 |
| noteGreen | #a6cf7d |
| noteBlue | #7dbecf |
| noteGrey | #a6a6a6 |
| noteYellow | #f2ce5a |
| noteViolet | #b680cb |

{{:cs:mervis-scada:47-scada.mervis.info:notes.png?nolink|}}

==== Mobile GUI ====

=== Logo ===

== AppLogo ==
^ Configuration Item ^ Optimal Size ^ Description ^
| appLogo | 300x64 | Application logo on the login screen |

{{:cs:mervis-scada:47-scada.mervis.info:mobileloginlogo.png?nolink&200|}}

=== Color Scheme ===

== Basic Colors ==

This table lists the colors that suffice for basic branding of the entire application. Additional detailed settings of individual colors for specific application elements can be found below.

**Colors:**
^ Name ^ Original Value ^
| bg-color | #ffffff |
| header-bg-color | #ffffff |
| header-text-color | #2e5e85 |
| header-tab-active-bg-color | #2e5e85 |
| header-tab-active-color | #ffffff |
| header-tab-color | #2e5e85 |
| header-tab-bg-color | #f2f2f2 |

{{:cs:mervis-scada:47-scada.mervis.info:mobilebasic.png?nolink|}}

== Datapoint Table ==

**Colors:**
^ Name ^ Original Value ^
| primary-color | #2e5e85 |
| main-menu-active-color | #2e5e85 |
| main-menu-bg-color | #ffffff |
| main-menu-color | #9b9b9b |
| dp-group-selector-border-color | #2e5e85 |
| mobile-app-level-1 | #dde9f3 |
| mobile-app-level-2 | #e870f7 |
| mobile-app-level-3 | #f4f8fb |
| badquality-base-color | #eb9019 |
| recency-brand-new | #80ba45 |
| selected-bg-color | #2fb12a |

{{:cs:mervis-scada:47-scada.mervis.info:mobiledp.png?nolink|}}

== Alarm Table ==

**Colors:**
^ Name ^ Original Value ^
| primary-color | #2e5e85 |
| header-border-color | #babfc7 |

{{:cs:mervis-scada:47-scada.mervis.info:mobilealarms.png?nolink|}}

== Profile Screen ==

**Colors:**
^ Name ^ Original Value ^
| section-header-color | #ffffff |
| section-header-bg-color | #2e5e85 |
| primary-inverse-color | #ffffff |
| primary-color | #2e5e85 |
| select-border-color | #a6a6a6 |
| switch-color | #a6a6a6 |
| switch-active-color | #2e5e85 |
| slider-color | #2e5e85 |

{{:cs:mervis-scada:47-scada.mervis.info:mobilesettings.png?nolink|}}

== Modal Window ==

**Colors:**
^ Name ^ Original Value ^
| primary-color | #2e5e85 |
| primary-inverse-color | #ffffff |
| header-border-color | #babfc7 |
| disabled-element | #a6a6a6 |

{{:cs:mervis-scada:47-scada.mervis.info:mobilealarmmodal.png?nolink|}}

== Loading Indicator ==

**Colors:**
^ Name ^ Original Value ^
| indication-panel-bg-color | #a6a6a6 |
| loading-bg-color | #80ba45 |

{{:cs:mervis-scada:47-scada.mervis.info:mobileindication.png?nolink|}}

== Offline Indicator ==

**Colors:**
^ Name ^ Original Value ^
| offline-bg-color | #a50d18 |

{{:cs:mervis-scada:47-scada.mervis.info:mobileoffline.png?nolink|}}