===== 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 | 16x16, 32x32 | Povinné. Hlavní ikona aplikace |
| apple-touch-icon.png | .png | 180x180 | Doporučené. Ikona pro iPhone a iPad |
| android-192x192.png | .png | 192x192 | Doporučené. Ikona pro zařízení Android |
| android-512x512.png | .png | 512x512 | Doporučené. Ikona pro zařízení Android |
| favicon-velikost.png | .png | 24x24, 64x64, 128x128, ... | Volitelné. Další ikony s různými velikostmi |
| název.svg | .svg | 16x16 - 512x512 | 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 | 168x64 | Logo aplikace na přihlašovací obrazovce |

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

== AppLogoSmall ==
^ Položka konfigurace ^ Optimální velikost ^ Popis ^
| ESGVisionConfig.AppLogoSmall | 84x32 | Logo aplikace v levém horním rohu uživatelského rozhranní |

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

== AppLoadingImage ==
^ Položka konfigurace ^ Optimální velikost ^ Popis ^
| ESGVisionConfig.AppLoadingImage | 418x160 | Logo aplikace zobrazené při načítání dat |

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

== LoginLogo ==
^ Položka konfigurace ^ Optimální velikost ^ Popis ^
| ESGVisionConfig.LoginLogo | 168x64 | Doplňující logo na přihlašovací obrazovce. Logo je možné umístit kamkoliv v prostoru přihlašovací obrazovky |

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

=== 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) |

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

== 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 |

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

== ShowMervisNews ==
^ Položka konfigurace ^ Typ ^ Popis ^
| ESGVisionConfig.ShowMervisNews | boolean | Zobrazení nebo skrytí novinek Mervis na přihlašovací obrazovce |

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

== 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 |

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

== Přihlašovací obrazovka ==

**Barvy:**
^ Název ^ Originální hodnota ^
| loginBackgroundColor | #3399cc |
| loginTextColor | #ffffff |
| signInMainButtonColor | #004d7d |
| signInTextColor | #ffffff |
| invColor | #ffffff |

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

**Aktivní tlačítko:**
^ Název ^ Originální hodnota ^
| mainButtonActiveColor | #66ccff |

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

== Hlavní obrazovka ==

**Barvy:**
^ Název ^ Originální hodnota ^
| mainBackgroundColor | #3399cc |
| invColor | #ffffff |

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

== Záložky projektů ==

**Barvy:**
^ Název ^ Originální hodnota ^
| mainBackgroundColorProjectsDropdown | #004d7d |
| projectLabelButtonColor | #004d7d |
| mainBackgroundColor | #3399cc |
| commErrorButtonHoverColor | #ff9999 |
| alarmButtonActiveColor | #ff6666 |
| invColor | #ffffff |

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

== Hlavní menu ==

**Barvy:**
^ Název ^ Originální hodnota ^
| menuButtonBackgroundActiveColor | #66ccff |
| dpFilterDropdownButtonColor | #004d7d |
| dpSelectionColor | #ff6666 |
| menuButtonBackgroundDisabledColor | #767676 |

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

== Stromová nabídka ==

**Barvy:**
^ Název ^ Originální hodnota ^
| projectTreeSelectedBgColor | #ffffff |
| mainButtonActiveColor | #66ccff |
| projectTreeBgColor | #ffffff |

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

== 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 |

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

**Aktivní prvky:**
^ Název ^ Originální hodnota ^
| alarmBackgroundColor | #cc3333 |
| historyBackgroundColor | #009966 |
| alarmButtonActiveColor | #ff6666 |
| arrowUpActiveColor | #33cc33 |
| arrowDownActiveColor | #ff3333 |

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

== 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 |

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

== 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 |

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

**Aktivní filtry:**
^ Název ^ Originální hodnota ^
| alarmFilterActiveButtonActiveColor | #f19366 |
| alarmFilterMemoryButtonActiveColor | #66ccff |
| alarmFilterAcknowledgedButtonActiveColor | #66ff66 |
| alarmFilterMemoryNotActiveButtonActiveColor | #6ed7f7 |

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

== Historie projektů, Statistiky projektů ==

**Barvy:**
^ Název ^ Originální hodnota ^
| mainButtonDisabledColor | #333333 |
| historyButtonColor | #006633 |
| historyButtonActiveColor | #33cc99 |
| historyBackgroundColor | #009966 |
| invColor | #ffffff |
| mainBackgroundColor | #3399cc |

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

== Rozbalovací menu ==

**Barvy:**
^ Název ^ Originální hodnota ^
| menuGroupBackgroundColor | #126aa1 |
| menuTextColor | #ffffff |
| menuBackgroundColor | #0f5b8a |

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

**Aktivní řádek:**
^ Název ^ Originální hodnota ^
| tableRowActiveColor | #33cccc |

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

== Modální okno ==

**Barvy:**
^ Název ^ Originální hodnota ^
| modalTextColor | #ffffff |
| modalBackgroundColor | #004d7d |
| modalButtonColor | #3399cc |
| mainButtonActiveColor | #66ccff |
| invColor | #ffffff |

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

== 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 |

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

== Poznámky ==

**Barvy:**
^ Název ^ Originální hodnota ^
| noteOrange | #e19e6b |
| noteRed | #f25a64 |
| noteGreen | #a6cf7d |
| noteBlue | #7dbecf |
| noteGrey | #a6a6a6 |
| noteYellow | #f2ce5a |
| noteViolet | #b680cb |

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

==== Mobilní GUI ====

=== Logo ===

== AppLogo ==
^ Položka konfigurace ^ Optimální velikost ^ Popis ^
| appLogo | 300x64 | Logo aplikace na přihlašovací obrazovce |

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

=== 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 |

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

== 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 |

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

== Tabulka alarmů ==

**Barvy:**
^ Název ^ Originální hodnota ^
| primary-color | #2e5e85 |
| header-border-color | #babfc7 |

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

== 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 |

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

== Modální okno ==

**Barvy:**
^ Název ^ Originální hodnota ^
| primary-color | #2e5e85 |
| primary-inverse-color | #ffffff |
| header-border-color | #babfc7 |
| disabled-element | #a6a6a6 |

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

== Indikátor načítání ==

**Barvy:**
^ Název ^ Originální hodnota ^
| indication-panel-bg-color | #a6a6a6 |
| loading-bg-color | #80ba45 |

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

== Indikátor oflline ==

**Barvy:**
^ Název ^ Originální hodnota ^
| offline-bg-color | #a50d18 |

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