> For the complete documentation index, see [llms.txt](https://docs.vdttechnology.com/dokumentace-twin-skin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vdttechnology.com/dokumentace-twin-skin/jednotlive-sekce-aplikace/domovska-stranka.md).

# Domovská stránka

Domovská stránka představuje úvodní stránku aplikace. Po pravé, levé a ve spodní části obrazovky obsahuje karty zobrazující data ze senzorů. Uprostřed a na pozadí celé stránky se vyskytuje digitální dvojče úpravny vody (ÚV). Tato stránka zobrazuje aktuální údaje, které se sbírají v přítomném čase, tzv. real-time data.

## Aktuální průtok ÚV

Tato karta zobrazuje aktuální průtok vody v litrech za sekundu na daném místě v ÚV.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FUGECPE4wZsA1oHxoa5Kk%2Fimage.png?alt=media&amp;token=5ed6ec6e-20d9-473b-8fd5-03c924f1e008" alt="" width="298"><figcaption></figcaption></figure>

## Množství vody za den

Karta postupně zapisuje údaje z aktuálního průtoku a tvoří z něj jedno číslo, které představuje celkový průtok vody za daný den. Jednotkou je metr krychlový. Dále je ve spodní části zobrazen i údaj  celkového průtoku vody za den předešlý.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FxcU0gDxtjqv7a9y6KVD2%2Fimage.png?alt=media&amp;token=b1bc89ee-5be2-44e5-a5d5-b4e1d57a7d6d" alt="" width="302"><figcaption></figcaption></figure>

## Kvalita surové vody

Daná karta zobrazuje údaje surové vody, především její kvalitu, která přitéká do ÚV. V jednotlivém řádku je vypsán název zobrazovaného parametru, aktuální hodnota a jednotka parametru.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FShtH39LVeODViGyip3lg%2FSn%C3%ADmek%20obrazovky%202023-11-20%20170031.png?alt=media&amp;token=b75d4f7b-40ee-4d29-a8f8-647461fe2870" alt=""><figcaption></figcaption></figure>

## Předpověď počasí

Karta ve spodním levém rohu zobrazuje mapu a předpověď počasí pro dnešní den v místě vodárny. Na mapě je zobrazeno přesné místo, kde se vodárna nachází. V pravém horním rohu se nachází aktuální datum a čas. Po pravé straně je předpověď pro daný den rozdělena po 4 hodinách, kdy každý řádek obsahuje čas, stupně Celsia a obrázek s předpovědí počasí. Když uživatel najede myší na obrázek počasí, zobrazí se mu informace, zda bude pršet, oblačno, jasno apod. Poslední dosažená čtyř hodina je znázorněna modrým podbarvením.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FjZ9Qg2fCpwR19hSqhm9C%2FSn%C3%ADmek%20obrazovky%202023-11-20%20171355.png?alt=media&amp;token=26213ad4-6eee-4855-8610-98fe8d468d9d" alt=""><figcaption></figcaption></figure>

## Dávky chemie

Karta zobrazuje údaje dávky chemie, které jsou přidávány do vody v závislosti na kvalitě vody, jež přitéká do ÚV. V jednotlivém řádku je vypsán název parametru, aktuální hodnota a jednotka parametru.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FbFOJjd8MjxqsMo6qlhqj%2FSn%C3%ADmek%20obrazovky%202023-11-20%20174359.png?alt=media&amp;token=74634dd3-dcb1-47cc-86b6-85daa56fe60d" alt=""><figcaption></figcaption></figure>

## Graf

Zde je zobrazen graf, který vypisuje údaje dle vybraného parametru a dle zvoleného časového rozmezí.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FNnulFxImbhlVqqHwQh2v%2FSn%C3%ADmek%20obrazovky%202023-11-23%20150905.png?alt=media&amp;token=9e7af9b6-76e0-4a56-a169-f7ce894df687" alt=""><figcaption></figcaption></figure>

#### Volba parametru

Na levé straně je tlačítko, které po rozkliknutí zobrazí seznam parametrů, jenž jsou k dispozici pro zobrazení v grafu. Stačí kliknout na požadovaný parametr a změna se automaticky v grafu promítne.

&#x20;

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2Fslhkh46OHci5hqptTEyY%2FSn%C3%ADmek%20obrazovky%202023-11-20%20175131.png?alt=media&amp;token=90e20660-33c1-4158-bca4-6d781393650c" alt=""><figcaption></figcaption></figure>

#### Volba časového rozmezí

Jakmile uživatel otevře aplikaci, v grafu se automaticky zobrazí data 1 den zpětně. Pomocí skupiny tlačítek v pravém horním rohu má uživatel možnost rychlé volby časového rozmezí. Jakmile klikne na jednu ze čtyř možností, změna se automaticky promítne do grafu. Má tak možnost rychle přepínat mezi časovými rozmezími. Na rychlý výběr má možnost volby **1 den nazpět,  7 dní nazpět, 14 dní nazpět** a **30 dní zpětně**.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2F2ieHY1jlfSR5hEb759FV%2FSn%C3%ADmek%20obrazovky%202023-11-20%20175923.png?alt=media&amp;token=f0f3309d-2554-4477-9a38-d8dbffc5622e" alt=""><figcaption></figcaption></figure>

Samotný graf zobrazuje hodnoty parametrů formou časových řad. Hodnoty se postupně zapisují a tvoří tzv. časovou řadu, na které lze dobře pozorovat zapsané hodnoty v čase. V horní části je zobrazen vybraný název parametru, vlevo nahoře je jednotka parametru, po levé straně je graf popsán hodnotami, kterých daný parametr může nabývat a ve spodní části je graf popsán časem, kdy byly hodnoty zapsány. Uživatel má možnost přejet myší do prostoru grafu, kde se následně vykreslí malé okénko. Okno představuje popis grafu, konkrétně název i hodnotu parametru a čas v místě, kde se zrovna nachází ukazatel myši. Uživatel se tak může pohybovat po grafu a zobrazovat si přesné údaje dle času, které ho zajímají.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2F8bNcSKa7sOaISxiU7oiq%2FSn%C3%ADmek%20obrazovky%202023-11-20%20175307.png?alt=media&amp;token=707cdd9f-3c09-4a9e-b323-9199d7b366d9" alt=""><figcaption></figcaption></figure>

V pravém horním rohu se vyskytuje tlačítko, které otevře novou komponentu s Detailem daného grafu: <img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2F2F58sd0ctwZoVD0B717V%2FSn%C3%ADmek%20obrazovky%202023-11-20%20181335.png?alt=media&amp;token=af8d9702-381a-4a08-b7ca-c0809cbe305c" alt="" data-size="line">

### Detail grafu

Detail zobrazuje stejné údaje jako graf zmenšený, ovšem je rozšířen o možnost volby časového rozmezí. Zároveň zde již není možnost volby jiného parametru. Jedná se o detailnější zobrazení již předem vybrané parametry, tudíž pokud by si uživatel rád zobrazil parametr jiný, musí graf zavřít a navolit si ji v původní kartě.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FXFtqPhyvaNd5SU67YhaN%2FSn%C3%ADmek%20obrazovky%202023-11-20%20181657.png?alt=media&amp;token=c3f00a67-4286-4d4d-82d0-fd6f0ef1014d" alt=""><figcaption></figcaption></figure>

#### Volba datumu v detailu grafu

V horní části komponenty lze najít několik tlačítek pro vybrání časového rozmezí pro zobrazení hodnot v grafu. Po otevření komponenty je automaticky vybrán 1 den zpětně. Uživatel má 2 možnosti pro volbu rozmezí. Nejdříve na levé straně tlačítko pro vybrání libovolného datumu **od** kdy **do** kdy.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FacgJR9yLWpuzYMJngxlF%2FSn%C3%ADmek%20obrazovky%202023-11-20%20182309.png?alt=media&amp;token=793d6c27-3fee-4b3f-b666-b24b47dae9b6" alt=""><figcaption></figcaption></figure>

Jakmile uživatel klikne do prostoru datumu, zobrazí se komponenta s kalendářem, ve které je možné si vybrat rozptyl časového rozmezí zobrazených dat.

Stačí, aby uživatel najel na datum, kde chce začínat. Buď může pomocí šipek v horní části přejíždět doprava či doleva po jednom měsíci, nebo může kliknout na zkratku měsíce a vybrat si tak libovolný měsíc rychleji. Také může kliknout na rok a vybrat si rychleji libovolný rok. Jakmile je uživatel na požadovaném měsíci, klikne myší na datum, kterým by rád začínal časové rozmezí. Dále si najde datum, kterým by rád končil rozmezí a opětovně na něj klikne. Tím bylo navoleno časové rozmezí. Teď už stačí ve spodní části kliknutím na tlačítko „Zvolit“. Tím se potvrdí výběr a volba datumu se automaticky projeví do grafu. Tlačítkem „Zrušit“ se daná komponenta s výběrem časového rozmezí zavře a žádná změna se neprovede.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FqirXDuAQX4vvbtXJOdM5%2FSn%C3%ADmek%20obrazovky%202023-11-23%20120821.png?alt=media&amp;token=8618ac4f-93ad-45f3-a0a0-c05e250f1526" alt=""><figcaption></figcaption></figure>

V případě, že by uživatel rád detailnější zobrazení času v řádu hodin či minut, stačí kliknout na ikonku hodin pod kalendářem, čímž se zobrazí sekce s výběrem hodin a minut. Pokud chce uživatel přejít zpět na výběr datumu, postačí opětovně kliknout na ikonku kalendáře.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FyXIHkf58E7rBCrIZAY1K%2FSn%C3%ADmek%20obrazovky%202023-11-23%20120912.png?alt=media&amp;token=2c228ca8-48c2-46a1-aadd-37688ecd80b6" alt=""><figcaption></figcaption></figure>

Druhou možností, jak si vybrat časové rozmezí zobrazených hodnot je pomocí tlačítek v pravé horní části. Jakmile uživatel otevře komponentu, v grafu se automaticky zobrazí data 1 den zpětně. Pomocí této skupiny tlačítek má uživatel možnost rychlé volby časového rozmezí. Jakmile klikne na jednu ze čtyř možností, změna se automaticky promítne do grafu. Má tak možnost rychle přepínat mezi časovými rozmezími. Na rychlý výběr má možnost volby **1 den nazpět,  7 dní nazpět, 14 dní nazpět** a **30 dní zpětně.**

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2F2ieHY1jlfSR5hEb759FV%2FSn%C3%ADmek%20obrazovky%202023-11-20%20175923.png?alt=media&amp;token=f0f3309d-2554-4477-9a38-d8dbffc5622e" alt=""><figcaption></figcaption></figure>

#### Graf v detailu grafu

Samotný graf zobrazuje hodnoty parametru formou časových řad. Hodnoty se postupně zapisují a tvoří tzv. časovou řadu, na které lze dobře pozorovat zapsané hodnoty v čase. V horní části je zobrazen vybraný název parametru, vlevo nahoře je jednotka parametru, po levé straně je graf popsán hodnotami, kterých daný parametr může nabývat a ve spodní části je graf popsán časem, kdy byly hodnoty zapsány. Uživatel má možnost přejet myší do prostoru grafu, kde se následně vykreslí malé okénko. Okno představuje popis grafu, konkrétně název i hodnotu parametru a čas v místě, kde se zrovna nachází ukazatel myši. Uživatel se tak může pohybovat po grafu a zobrazovat si přesné údaje dle času, které ho zajímají.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FhNmaACl7Q5u0iUYDVRK4%2FSn%C3%ADmek%20obrazovky%202023-11-20%20183222.png?alt=media&amp;token=cd2311ea-e0e0-46a0-9e86-a161b33bfc11" alt=""><figcaption></figcaption></figure>

#### Zavřít

V pravém spodním rohu se vyskytuje zelené tlačítko „Zavřít“, které slouží pro zavření komponenty s Detailem grafu. Detail lze zavřít i křížkem v pravém horním rohu.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FBG78TLrdPOgzKoUSrhiT%2FSn%C3%ADmek%20obrazovky%202023-11-20%20183712.png?alt=media&amp;token=2a3613fd-0abf-449e-91d5-1ec3b3eb2267" alt=""><figcaption></figcaption></figure>

## Stav vodojemu

Tato karta zobrazuje momentální kapacitu z celkové kapacity vodojemu. Vzhledem k tomu, že z vodojemu probíhá odběr vody, karta také vypisuje čas zbývající kapacity vody při současném tempu odběru vody. Uživatel je přehledně informován, kolik vody zbývá, aby nedocházelo k jejímu úplnému odčerpání.&#x20;

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FN6xNc838prKqrRppgpSF%2FSn%C3%ADmek%20obrazovky%202023-11-21%20111502.png?alt=media&amp;token=ee8cbbc1-2780-47b4-96e9-bc4bcad43361" alt=""><figcaption></figcaption></figure>

## Kvalita upravené vody

Karta opět zobrazuje název parametru, jeho jednotku a hodnotu získávaných z provozu. Pokud nějaká hodnota není číselně vypsána, znamená to, že parametr není v provozu sbírán.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FBhKBJugpVWj7vJIMe1Cm%2FSn%C3%ADmek%20obrazovky%202023-11-21%20111611.png?alt=media&amp;token=0a616477-c479-491d-b458-af10e1874e7f" alt=""><figcaption></figcaption></figure>

## Procesní parametry

Daná karta zobrazuje údaje procesních parametrů provozu. V jednotlivé části karty je vypsán název sbíraného parametru, aktuální hodnota a jednotka parametru. Co se týče parametru „Prací Δ P“ daný parametr se vypočítává na základě tabulkových hodnot v závislosti na aktuálním průtoku vody. Vedle názvu parametru „UV“ je v obrázku vidět červený puntík. V případě, že je puntík černý, tak je problém s daty. Pokud je červený, je zapnutá UV lampa, pokud je puntík zelený, tak je UV lampa vypnuta.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FrZpysUnzdJV4AGx2sfY4%2FSn%C3%ADmek%20obrazovky%202023-11-21%20111916.png?alt=media&amp;token=baf6a75b-2a12-4665-bd70-bd7238417e7a" alt=""><figcaption></figcaption></figure>

## Digitální dvojče

Uprostřed stránky a přes celé pozadí je vyobrazeno tzv. digitální dvojče. Digitální dvojče představuje napodobeninu reálného objektu převedeného do digitálního světa. Neboli, je to digitální 3D model skutečných, například výrobních, měřicích i dalších zařízení, ale taky celých budov apod. V tomto případě se jedná o model úpravny vody. S modelem lze různě pohybovat a zobrazovat si jej z různých směrů. Stačí kliknout myší do prostoru, podržet stisknutí a začít pohybovat myší dle libosti. Model je takže možné si přibližovat a oddalovat pomocí kolečka na myši.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FSiYxb09fBK3mLYKXhdGS%2FSn%C3%ADmek%20obrazovky%202023-11-21%20130248.png?alt=media&amp;token=93614f63-fe49-4d52-a2c8-bb7cc011567e" alt=""><figcaption></figcaption></figure>

V dané úpravně v soustavě strojů je mnoho senzorů, které sbírají v reálném čase data. Tato data jsou prezentována v kartičkách na Domovské stránce popsaných výše. Druhou možností pro čtení těchto údajů je zobrazení dat přímo v digitálním dvojčeti provozu. Do modelu jsou přidány určité komponenty, které jsou napojeny na jednotlivé části soustavy strojů. Ať uživatel hýbe jakkoliv s modelem, dané komponenty budou vždy ukazovat na své části stroje.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FhuHdcYg4zTn6oaw3dySY%2FSn%C3%ADmek%20obrazovky%202023-11-21%20132609.png?alt=media&amp;token=2e786ec3-9520-4ef5-904f-49db460f0afe" alt=""><figcaption></figcaption></figure>

Jakmile uživatel přejede myší na jakoukoliv část komponenty ukazující na jistou část stroje, zobrazí se mu dodatkové informace. Ty popisují, o jaký stroj se jedná, jaký parametr se zde sbírá společné s jeho hodnotou i jednotkou. Uživatel má tak možnost si zobrazovat aktuální dění přímo na požadovaných místech soustavy v modelu.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FeDXDpcjyw46nXR6NhSsw%2FSn%C3%ADmek%20obrazovky%202023-11-21%20132626.png?alt=media&amp;token=6942c4df-351f-47e4-a9af-d3673b55016b" alt=""><figcaption></figcaption></figure>

Některé stroje ovšem nevypisují dané parametry, ale odkazují uživatele do systému **COMOS**. Zde je k naleznutí technická dokumentace společně s dalšími parametry.

<figure><img src="https://1110040602-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ1L4ZdUCgbjILnDtjYVn%2Fuploads%2FqRTgpGGOVaJTUKtztTsr%2FSn%C3%ADmek%20obrazovky%202023-11-21%20133116.png?alt=media&amp;token=91f5405c-3147-4da9-b6b6-36748258d698" alt=""><figcaption></figcaption></figure>
