Obsah

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.

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

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

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