Branding
Hosting Mervis SCADA nabízí možnost využití vlastního vzhledu a provozu celé hostované aplikace na vlastní doméně.
Níže jsou uvedeny základní požadavky.
Doména
Branding je svázán se zákaznickou doménou. Je potřeba registrovat příslušnou doménu druhého (např. mojefirma.cz) nebo třetího (např. scada.mojefirma.cz) řádu a nasměrovat její CNAME DNS záznamy na scada.mervis.info resp. nasměrovat ji na odpovídající IP adresu.
Desktop GUI
Favicon
Čtvercový obrázek (logo) zobrazené na různých místech podle typu zařízení (záložka internetového prohlížeče, historie, oblíbené stránky, ikona na ploše mobilního zařízení….)
| Soubor | Formát | Velikost | Popis |
|---|---|---|---|
| favicon.ico | .ico | 16×16, 32×32 | Povinné. Hlavní ikona aplikace |
| apple-touch-icon.png | .png | 180×180 | Doporučené. Ikona pro iPhone a iPad |
| android-192×192.png | .png | 192×192 | Doporučené. Ikona pro zařízení Android |
| android-512×512.png | .png | 512×512 | Doporučené. Ikona pro zařízení Android |
| favicon-velikost.png | .png | 24×24, 64×64, 128×128, … | Volitelné. Další ikony s různými velikostmi |
| název.svg | .svg | 16×16 - 512×512 | Volitelné. Svg ikona pro světlý a tmavý motiv prohlížeče |
Loga
Podporované formáty obrázků loga jsou všechny, které podporuje HTML. Preferované formáty jsou png, svg a jpg. U každého loga je uvedena optimální velikost, která závisí na elementu, do kterého je logo vkládáno. Pokud je logo větší než rodičovský element, je logo zmenšeno na velikost elementu. Pokud je logo menší než rodičovský element, je zachována tato velikost a logo umístěno doprostřed elementu.
AppLogo
| Položka konfigurace | Optimální velikost | Popis |
|---|---|---|
| ESGVisionConfig.AppLogo | 168×64 | Logo aplikace na přihlašovací obrazovce |
AppLogoSmall
| Položka konfigurace | Optimální velikost | Popis |
|---|---|---|
| ESGVisionConfig.AppLogoSmall | 84×32 | Logo aplikace v levém horním rohu uživatelského rozhranní |
AppLoadingImage
| Položka konfigurace | Optimální velikost | Popis |
|---|---|---|
| ESGVisionConfig.AppLoadingImage | 418×160 | Logo aplikace zobrazené při načítání dat |
LoginLogo
| Položka konfigurace | Optimální velikost | Popis |
|---|---|---|
| ESGVisionConfig.LoginLogo | 168×64 | Doplňující logo na přihlašovací obrazovce. Logo je možné umístit kamkoliv v prostoru přihlašovací obrazovky |
Konfigurační položky
AppTitle
| Položka konfigurace | Typ | Popis |
|---|---|---|
| ESGVisionConfig.AppTitle | string | Název aplikace zobrazený v okně prohlížeče (v záložce prohlížeče) |
ShowLoginContacts
| Položka konfigurace | Typ | Popis |
|---|---|---|
| ESGVisionConfig.ShowLoginContacts | boolean | Povolení nebo zakázání zobrazení kontaktů na přihlašovací obrazovce. Konkrétní nastavení kontaktů se provádí konfigurační položkou ESGVisionConfig.LoginContacts |
LoginContacts
| Položka konfigurace | Typ | Popis |
|---|---|---|
| ESGVisionConfig.LoginContacts | string[] | Pole objektů pro nastavení kontaktů na přihlašovací obrazovce. Každý objekt může obsahovat položky name, email, mobile, link |
ShowMervisNews
| Položka konfigurace | Typ | Popis |
|---|---|---|
| ESGVisionConfig.ShowMervisNews | boolean | Zobrazení nebo skrytí novinek Mervis na přihlašovací obrazovce |
LoginWidth
| Položka konfigurace | Typ | Popis |
|---|---|---|
| ESGVisionConfig.LoginWidth | string (např. „350px“) | Šířka formuláře na přihlašovací obrazovce |
Barevné schéma
Základní barvy
V této tabulce jsou uvedeny barvy, které vystačí pro základní branding celé aplikace. Další detailní nastavení jednotlivých barev pro konkrétní prvky aplikace lze nalézt níže.
Barvy:
| Název | Originální hodnota |
|---|---|
| mainBackgroundColor | #3399cc |
| mainButtonColor | #004d7d |
| invColor | #ffffff |
| mainButtonActiveColor | #66ccff |
| alarmButtonActiveColor | #ff6666 |
| menuButtonBackgroundDisabledColor | #767676 |
| commErrorButtonHoverColor | #ff9999 |
| alarmMainButtonColor | #990000 |
| historyButtonColor | #006633 |
Přihlašovací obrazovka
Barvy:
| Název | Originální hodnota |
|---|---|
| loginBackgroundColor | #3399cc |
| loginTextColor | #ffffff |
| signInMainButtonColor | #004d7d |
| signInTextColor | #ffffff |
| invColor | #ffffff |
Aktivní tlačítko:
| Název | Originální hodnota |
|---|---|
| mainButtonActiveColor | #66ccff |
Hlavní obrazovka
Barvy:
| Název | Originální hodnota |
|---|---|
| mainBackgroundColor | #3399cc |
| invColor | #ffffff |
Záložky projektů
Barvy:
| Název | Originální hodnota |
|---|---|
| mainBackgroundColorProjectsDropdown | #004d7d |
| projectLabelButtonColor | #004d7d |
| mainBackgroundColor | #3399cc |
| commErrorButtonHoverColor | #ff9999 |
| alarmButtonActiveColor | #ff6666 |
| invColor | #ffffff |
Hlavní menu
Barvy:
| Název | Originální hodnota |
|---|---|
| menuButtonBackgroundActiveColor | #66ccff |
| dpFilterDropdownButtonColor | #004d7d |
| dpSelectionColor | #ff6666 |
| menuButtonBackgroundDisabledColor | #767676 |
Stromová nabídka
Barvy:
| Název | Originální hodnota |
|---|---|
| projectTreeSelectedBgColor | #ffffff |
| mainButtonActiveColor | #66ccff |
| projectTreeBgColor | #ffffff |
Pravý panel
Barvy:
| Název | Originální hodnota |
|---|---|
| invColor | #ffffff |
| alarmMainButtonColor | #990000 |
| historyButtonColor | #006633 |
| arrowUpDisableColor | #006600 |
| arrowDownDisableColor | #660000 |
| timeRecency2Color | #cccccc |
| timeRecency3Color | #333333 |
| timeRecency4Color | #666666 |
| textColorRecency | #ffffff |
Aktivní prvky:
| Název | Originální hodnota |
|---|---|
| alarmBackgroundColor | #cc3333 |
| historyBackgroundColor | #009966 |
| alarmButtonActiveColor | #ff6666 |
| arrowUpActiveColor | #33cc33 |
| arrowDownActiveColor | #ff3333 |
Tabulkový pohled
Barvy:
| Název | Originální hodnota |
|---|---|
| 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 |
Alarmy
Barvy:
| Název | Originální hodnota |
|---|---|
| projectTreeBgColor | #ffffff |
| alarmButtonActiveColor | #ff6666 |
| alarmFilterActiveButtonColor | #913307 |
| alarmFilterMemoryButtonColor | #004d7d |
| alarmFilterAcknowledgedButtonColor | #029307 |
| alarmFilterMemoryNotActiveButtonColor | #008ab4 |
| tableRowGroupColor | #cccccc |
| invColor | #ffffff |
| mainBackgroundColor | #3399cc |
| alarmBackgroundColor | #cc3333 |
| alarmMainButtonColor | #990000 |
| mainButtonColor | #004d7d |
Aktivní filtry:
| Název | Originální hodnota |
|---|---|
| alarmFilterActiveButtonActiveColor | #f19366 |
| alarmFilterMemoryButtonActiveColor | #66ccff |
| alarmFilterAcknowledgedButtonActiveColor | #66ff66 |
| alarmFilterMemoryNotActiveButtonActiveColor | #6ed7f7 |
Historie projektů, Statistiky projektů
Barvy:
| Název | Originální hodnota |
|---|---|
| mainButtonDisabledColor | #333333 |
| historyButtonColor | #006633 |
| historyButtonActiveColor | #33cc99 |
| historyBackgroundColor | #009966 |
| invColor | #ffffff |
| mainBackgroundColor | #3399cc |
Rozbalovací menu
Barvy:
| Název | Originální hodnota |
|---|---|
| menuGroupBackgroundColor | #126aa1 |
| menuTextColor | #ffffff |
| menuBackgroundColor | #0f5b8a |
Aktivní řádek:
| Název | Originální hodnota |
|---|---|
| tableRowActiveColor | #33cccc |
Modální okno
Barvy:
| Název | Originální hodnota |
|---|---|
| modalTextColor | #ffffff |
| modalBackgroundColor | #004d7d |
| modalButtonColor | #3399cc |
| mainButtonActiveColor | #66ccff |
| invColor | #ffffff |
Přehledový panel
Barvy:
| Název | Originální hodnota |
|---|---|
| invColor | #ffffff |
| alarmButtonActiveColor | #ff6666 |
| overviewHeaderColor | #004d7d |
| overviewHeaderColorHover | #66ccff |
| projectPanelIcoGoodColor | #009900 |
| projectPanelIcoBadColor | #ff6666 |
| overviewGoToSchemaColor | #004d7d |
| mainButtonDisabledColor | #333333 |
Poznámky
Barvy:
| Název | Originální hodnota |
|---|---|
| noteOrange | #e19e6b |
| noteRed | #f25a64 |
| noteGreen | #a6cf7d |
| noteBlue | #7dbecf |
| noteGrey | #a6a6a6 |
| noteYellow | #f2ce5a |
| noteViolet | #b680cb |
Mobilní GUI
Logo
AppLogo
| Položka konfigurace | Optimální velikost | Popis |
|---|---|---|
| appLogo | 300×64 | Logo aplikace na přihlašovací obrazovce |
Barevné schéma
Základní barvy
V této tabulce jsou uvedeny barvy, které vystačí pro základní branding celé aplikace. Další detailní nastavení jednotlivých barev pro konkrétní prvky aplikace lze nalézt níže.
Barvy:
| Název | Originální hodnota |
|---|---|
| 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 |
Tabulka datapointů
Barvy:
| Název | Originální hodnota |
|---|---|
| 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 |
Tabulka alarmů
Barvy:
| Název | Originální hodnota |
|---|---|
| primary-color | #2e5e85 |
| header-border-color | #babfc7 |
Obrazovka profilu
Barvy:
| Název | Originální hodnota |
|---|---|
| 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 |
Modální okno
Barvy:
| Název | Originální hodnota |
|---|---|
| primary-color | #2e5e85 |
| primary-inverse-color | #ffffff |
| header-border-color | #babfc7 |
| disabled-element | #a6a6a6 |
Indikátor načítání
Barvy:
| Název | Originální hodnota |
|---|---|
| indication-panel-bg-color | #a6a6a6 |
| loading-bg-color | #80ba45 |
Indikátor oflline
Barvy:
| Název | Originální hodnota |
|---|---|
| offline-bg-color | #a50d18 |
