Obrazovky

Obrazovky slouží k vygenerování přehledové stránky pro ePaper, kam můžete dosadit vlastní hodnoty a vytvořit si tak dynamickou nástěnku.

Název
Vaše pojmenování obrazovky, které je vidět na webu ŽO.

Rozlišení obrazovky
Přesné rozlišení plochy, kterou bude obrazovka zabírat. Chcete-li obrazovku vytvořit na výšku (např. 300×400) a ePaper má rozlišení na šířku (např. 400×300), pak ho zde prohoďte (na 300×400). V nastavení ePaperu ale vždy nechte rozlišení, jaké má daný displej (typicky na šířku).

Interval, po kterém má ePaper znovu stáhnout obrazovku
Nastavte jak často se má ePaper připojovat pro načtení obrazovky s aktuálními daty. Krátký interval znamená, že ePaperu dojde dříve baterie. Jako rozumný nejkratší interval lze považovat 5 minut a nejdelší 60 minut. Především však záleží na tom, jaké údaje zobrazujete a jak často je potřebujete mít obnovené.

Podkladový obrázek
Chcete-li použít pro obrazovku nějaký podklad (kde si můžete např. nakreslit chlívky pro hodnoty, dát půdorys bytu, …) pak ho zde můžete nahrát, ideálně v přesném rozlišení jako bude obrazovka. Po nahrátí můžete obrázek dát Optimalizovat pro co nejlepší výsledek na konkrétním ePaperu.

Výchozí font pro texty
U textových prvků můžete měnit styl písma. Protože je lepší mít font jednotný a abyste u každé položky vždy pracně nemuseli font měnit na vámi preferovaný, tak zde můžete nastavit font, který se při přidání nové položky do Obrazovky použije jako výchozí.

Design obrazovky je lehce technická záležitost. Jednotlivé prvky se pro přesné pozicování umisťují přes souřadnice X (šířka) a Y (výška), ale máte možnost je i přemisťovat myší po Obrazovce a následně jen případně x/y doladit přesnou hodnotou.

Jakmile znovu otevřete editor obrazovky, kde již jsou umístěné prvky, tak se tyto prvky v seznamu seřadí podle sloupců (Y) a řádků (X), aby alespoň přibližně šly v pořadí, ve kterém se zobrazují na Obrazovce (odshora dolů a v pomyslných řádcích zleva doprava).

Nejjednoduší identifikací prvku je na něj najet na vygenerované Obrazovce myší či dvojkliknout - prvek se v seznamu ohraničí červeným obdélníkem. A funguje to i naopak - když přejedete myší nad prvkem v seznamu, tak se obdélníkem ohraničí na vygenerované Obrazovce.

Pokud kliknete na prvek na obrazovce nebo na jeho kartu v levém sloupci, tak ho následně můžete posunovat šipkami o 1 px. Držte shift pro skok prvku o 10 px (nebo o tolik, kolik máte nastaveno pro přetahování - viz níže).

Prvky můžete také skrývat - stačí kliknout na ikonu prvku v řádku, ta zešedne a prvek z obrazovky zmizí. Můžete tak mj. zjistit o který prvek na Obrazovce se jedná.

Pro přetahování prvků po Obrazovce myší můžete nastavit po kolika px budou "poskakovat".

Pro snazší zarovnání prvků na obrazovce si můžete zapnout zobrazení mřížky, která se zobrazuje každých 10 px (s tím, že každý 50 sloupec i řádek jsou tmavší barvou).

Obrazovka může vypadat hezky, pokud prohodíte černou a bílou barvu. Můžete to jednoduše nastavit a zase zrušit touto volbou.

Potřebujete-li posunout několik elementů najednou, můžete využít tuto funkci. Po její aktivaci se u každého elementu objeví zaškrtávátko - označte prvky, které chcete posunout a nastavte relativní kladný/záporný posun v ose X a/nebo Y a klikněte na "Posunout" (akci můžete opakovat). Nejjednodušeji prvky pro pohyb označíte tak, že je při zapnuté funkci hromadného posunu na obrazovce naklikáte a ony se obarví zeleně. Pro jednoznačné označení prvků se také může hodit funkce, kdy když najedete nad prvek, tak se označí v seznamu a naopak. Také můžete využít skrytí/zobrazení prvku po kliknutí na jeho ikonu (viz výše).

• X a Y - souřadnice X a Y, tedy umístění prvku na vodorovné a svislé ose v pixelech (obrazových bodech).
• Zarovnání - typicky textu. V případě zarovnání vlevo souřadnice X určuje, kde od levého kraje text začíná. Pro uprostřed souřadnice X určuje střed textu na obrazovce a pro vpravo kde na obrazovce prvek končí.
• Font - styl písma. Je možné vybrat z několika stylů, které jsou na serveru připravené.
• Velikost - výška fontu v pixelech.
• Písmena - velikost písmen v textu. Typicky beze změny, ale někde se může hodit nastavit všechna na velká apod.
• Barva - můžete vybírat z několika na ePaperech běžně podporovaných barev. Pokud displej barvu nepodporuje, tak se zobrazí tmavě nebo vůbec.
• Vrstva - pomyslná vrstva, ve které se prvek zobrazí. Budete-li například chtít umístit do černého obdélníku bíle text, pak obdélník musí mít nižší číslo vrstvy než text, aby ho obdélník nepřekryl. Text tedy bude mít vyšší číslo, aby byl nad obdélníkem.
• Prefix / Suffix - Text před/za hodnotou/proměnnou. Typicky třeba jednotka, např. " m/s" apod. Text se stane součástí prvku, takže ho pozicujete jako celek.
• Obrys a Barva obrysu slouží k vytvoření barevného obrysu okolo písma, takže výsledný text bude jednoduše čitelný při umístění nad pozadí.
• Rotace - Natočení prvku o nastavený počet stupňů.

Text

Libovolný text k umístění na obrazovku. V textu můžete použít \n pro odřádkování.

Do textu také můžete umístit Proměnné a Hodnoty, což jsou jinak samostatné prvky. Abyste toho docílili, stačí mezi dvojité složené uvozovky {{ a }} vepsat buď název proměnné (viz tabulka níže pod dokumentací prvku Proměnná), nebo název Hodnoty.

Např. text:
Napětí baterie je {{54:43:b2:de:b5:2c-napeti-procenta}}%, což je {{54:43:b2:de:b5:2c-napeti-volty}} V v den, kdy má svátek {{SVATEKCZ}}.
se na Obrazovce nahradí za:
Napětí baterie je 83%, což je 3.91 V v den, kdy má svátek Michal.
(pochopitelně musíte použít vlastní Hodnoty, aby to fungovalo).

Proměnnou/Hodnotu je potřeba vepsat přesně tak, jak se jmenuje včetně zachování velikosti písmen, jinak nedojde k nahrazení. Tato funkce je užitečná, když chcete do jednoho textu za sebe umístit víc informací, které by jinak byl problém do věty napozicovat jako samostatné prvky. Na druhou stranu samostatné prvky mají výhodu v tom, že jim můžete dodat extra formátování a vlastnosti - viz popis Proměnných a Hodnot níže.

Ikona

Můžete vybrat jednu z více než 2 000 ikon, které jsou součástí Bootstrap Icons. Kompletní přehled ikon s inteligentním vyhledáváním najdete na stránce projektu: https://icons.getbootstrap.com/

Ikony v rozměrech 10, 20, 30, 40, 50, 60, 70, 80, 90 a 100 pixelů jsou přímo vytvořené z křivek pro co nejlepší výsledek. Ostatní hodnoty jsou dopočítávané z vyšší bitmapové varianty.

Proměnná

Dynamická hodnota, např. datum, čas nebo svátek, která se na určeném místě zobrazí vždy aktuální při vygenerování nové Obrazovky.

Proměnnou vyberete ze seznamu a následně se na obrazovce objeví už přímo její nahrazená hodnota. Seznam hodnot, které můžete použít:

Hodnota

Hodnoty vznikají hned několika cestami - můžete zasílat vlastní na server, server některé (označené jako globální) udržuje sám, můžete je nechat vyčítat z TMEPu nebo se mohou vytvářet z počasí (načítaného pro dané souřadnice uvedené u ePaperu). Více o Hodnotách najdete na samostatné stránce.

• Upozornění při hodnotě starší - Pokud bude vyčtená hodnota starší než zvolený časový úsek, tak se před ní a za ní objeví vykřičníky. Navíc - pokud bude starší než 1 den, tak místo ní bude uvedená jen pomlčka.
• Podmíněná barva hodnoty - Můžete nastavit porovnání hodnoty z databáze s vámi zadanou hodnotou. Pokud porovnání vyhoví, tak se barva hodnoty změní na vámi definovanou (pochopitelně ji ale ePaper musí umět zobrazit).
• Zaokrouhlit - Číselnou hodnotu můžete nechat zaokrouhlit na určitý počet desetinných míst (nebo na půl stupně).
• Počet desetinných míst - Funkce se trochu kryje se Zaokrouhlit, ale hodnota není zaokrouhlena, jde čistě o zobrazení.
• Oddělovač tisíců - Pro lepší přehlednost je možné tisíce oddělit mezerou (nebo neoddělovat kde to není žádoucí).
• Desetinná čárka - Ve výchozím zobrazení se používá anglická tečka, je možné změnit na českou čárku.

Graf z hodnoty

Veškeré Hodnoty, které jsou číselné, mohou na obrazovce vytvářet graf. U takových hodnot se totiž v databázi vytváří historie několik dní nazpátek a je možné je takto automaticky využít.

Většina nastavení v grafu vychází z obecných vlastností prvků. Dále můžete nastavit:

• Základ
  • Šířka a výška - Celkový rozměr (v px) plochy pro graf včetně legend os X a Y a případného nadpisu.
  • Typ - Zvolte typ grafu, na výběr je mezi spojnicovým a sloupcovým. U sloupcového nezapomeňte pod "Křivka/sloupec" nastavit šířku na např. 10 px, aby byly jednotlivé sloupce dobře vidět.
  • Historie - Kolik hodin do minulosti se má na grafu zobrazovat.
  • Popisek osy X - Zda zobrazovat k hodině a minutě i datum, jen hodinu a minutu nebo jen po hodinách. Právě po hodinách je nejpřehlednější.
• Osa x/y
  • Osa Y - pevný rozsah od - Pokud chcete u osy Y nastavit jasný rozsah, vyplňte obě hodnoty. Rozhození kroků na ose je automatické v závislosti na rozumném kroku mezi od/do a výškou grafu. Zkuste experimentovat.
• Rámeček
  • Okolo - Okolo celého grafu, tedy nadpisu a legend.
  • Uvnitř - Ohraničení křivky s grafem.
• Křivka/sloupec
  • Výplň pod čárou hodnot - Barva sahající od hodnoty na křivce dolů po znázornění osy X.
• Vnitřní okraje - Jedná se mezeru mezi (pomyslným) vnějším a vnitřním rámečkem grafu. Podle toho, jestli bude popisek os delší a/nebo dáte grafu nadpis bude potřeba mezery upravit. Vyzkoušejte si je schválně změnit ať vidíte rozdíl a jestli by nebylo lepší je poštelovat.

Graf může mít i vzhled budíku, který má své vlastní nastavení odlišné od spojnicového/sloupcového grafu. Zobrazuje se na něm poslední číselná hodnota v rozsahu, který si nastavíte.

Vzhled můžete do velké míry upravit - jestli bude budík poloviční (půlkulatý) nebo celý (kulatý), jak často budou vidět dílky a popisky na nich. Můžete dokonce nechat nastavit podbarvení budíku ve zvoleném rozsahu od/do.

Apple, Google a Microsoft kalendář

Je možné vyčítat a zobrazovat data z kalendářů u Applu, Googlu nebo Microsoftu. Aktuální události se z kalendáře načítají nejdříve po hodině od posledního vyčtení. Je potřeba do prvku vložit tajnou adresu na kalendář ve formátu iCal, kterou všechny tři společnosti poskytují a je možné ji získat.

Ve widgetu můžete dále nastavit:

• Vypisovat události - Můžete zvolit, jestli budou vidět události od začátku celého dne, aktuálního času (takže ty starší zmizí), od včerejšího dne nebo od začátku týdne.
• Vypsat max X událostí - Máte-li na ePaperu pro události z kalendáře místo pro např. 4 řádky, pak omezte výpis na právě 4 události, aby vám text nepřetékal pryč.
• Výška řádku v px - Výchozí řádkování je poměrně úsporné a je lepší nastavit vyšší (vyzkoušejte) pro lepší přehlednost.
• Načíst až X dnů - Chcete-li omezit, aby se vám události nenačítaly příliš do budoucnosti, je možné to takto upravit. Technicky se stejně zpracovávají všechny, takže není problém nechat načítat více událostí. Jejich celkový vypsaný počet je také omezený počtem vypisovaných událostí (viz výše Vypsat max X událostí).
• Dnešní události, předchozí dny, další dny - Pro odlišení zobrazených událostí je můžete rozlišit odlišným fontem nebo (ePaperem podporovanou) barvou. Typicky dnešní události (tučnější font anebo výraznější barva) od těch budoucích.
• Zmenšit font u dlouhých událostí - Pokud by měla událost kalendáře přetéct pravý okraj obrazovky, tak se font kterým je psaná může zmenšit až o několik px, aby se na displej vešla. Pokud se nevejde, tak z ní alespoň bude vidět delší popisek díky menšímu fontu.
• Formát řádku - Zda mít čas s datem v samostatném sloupečku (bez viditelného ohraničení) zarovnaném k jeho levému či pravému okraji, nebo mít vše spolu s událostí pohromadě.

Google - Jak získat adresu na iCal

Na webu Google Kalendáře v levém panelu u toho konkrétního klikněte na tři tečky:

A zvolte nastavení a sdílení:

Dole v nastavení najdete "Tajná adresa ve formátu iCal" - tu nechte zobrazit a zkopírujte do Widgetu.

V případě, že byste se báli o její vyzrazení můžete na tomto místě přes "Resetovat" nechat vygenerovat adresu novou (kterou pak případně musíte ve Widgetu aktualizovat).

Apple - Jak získat adresu na iCal

• Na iCloud.com se přihlaste do svého Apple účtu.
• Zvolte v aplikacích Kalendář:
• 
• V levém menu u konkrétního kalendáře zvolte možnost "Sdílet kalendář":
• 
• Zapněte možnost sdílet kalendář:
• 
• Objeví se odkaz, který můžete zkopírovat a vložit do Widgetu na Živém Obrazu.

Microsoft- Jak získat adresu na iCal

Ve webové verzi Office kalendáře zvolte v horním menu "Zobrazit" a "Nastavení kalendáře" (případně jen ikona ozubeného kola):

V nastavení v levém menu pod "Kalendář" zvolte položku "Sdílené kalendáře" a zde v sekci "Publikovat kalendář" přepněte oprávnění na "Může zobrazovat všechny podrobnosti" a klikněte na "Publikovat":

Následně se vám ukážou dva odkazy ze zkopírování. Zkopírujte ten ICS a vložte ho do widgetu kalendáře na ŽO:

Odpočet

Můžete umístit informaci o tom, kolik času zbývá do vloženého data (a času) nebo naopak kolik času od nějaké doby uběhlo.

• Počítat - Řešit čas od data (např. datum narození), nebo do data (např. kolik dní zbývá do Štědrého dne).
• Formát - Co vše chcete v odpočtu uvést.
• Rok v datu - Zda máte brát v potaz uvedený rok v odpočtu. Pokud odpočítáváte od/do konkrétního data včetně roku, tak nechte rok v datu řešit. Pokud ale např. chcete mít vždy odpočet každý rok do konkrétního data, tak zvolte rok v datu neřešit.
• Vynechat ve formátu, když je něčeho 0 - pokud zvolíte ano, pak zmizí položky, které by byly "0", např. "0 let, 0 měsíců" se vynechá a zbydou jen hodiny, dny a minuty.

QR kód

Vloží QR kód k naskenování telefonem apod. Pod "Obecné" můžete kromě barvy a vrstvy nastavit i velikost zobrazeného QR kódu v pixelech.

Typy kódů:

• Text/E-mail/URL
• Vizitka
  • Údaje, které nevyplníte, se do vizitky nepromítnou.
• Wi-Fi síť
  • SSID a heslo jsou podstatné, můžete ještě doplnit šifrování a zda je skryté SSID sítě.

Progress bar

Prvek graficky znázorňuje průběh dané hodnoty na rozsahu od/do, který určíte. Pro progress bar zvolíte Hodnotu z databáze. Např. můžete graficky znázornit z kolika % už uběhl aktuální rok, naplněnost nádrže na vodu apod.

• Šířka a Výška - Rozměr progress baru v pixelech bez případného rámečku.
• Směr - Udává odkud kam průběh "poběží". Zleva doprava tedy znamená, že sloupec bude postupně přibývat od levého okraje atd.
• Min. a Max. hodnota - Udává rozsah od/do, ve kterém se má pohybovat znázornění vámi vybrané hodnoty z databáze. Pokud bude hodnota z databáze mimo rozsah, tak se progress bar zastaví na 0 resp. 100% svojí délky.
• Rámeček a Odsazení rámečku - Ohraničení progress baru.
• Otestovat s hodnotou - Abyste se mohli jednoduše podívat, jak bude progress bar vypadat při různých hodnotách (a otestovat třeba i jeho podmíněné obarvení), tak zde můžete vyplnit hodnotu, která se použije pro jeho zobrazení. Nezapomeňte hodnotu opět vymazat a Obrazovku uložit!
• Podmíněná barva progress baru - Můžete nastavit porovnání s vámi zadanou hodnotou. Pokud porovnání vyhoví, tak se barva progress baru změní na vámi definovanou (pochopitelně ji ale ePaper musí umět zobrazit).

Čára

Čára z počátečního bodu X1Y1 do koncového bodu X2Y2, u které můžete zvolit její šířku a použít ji např. jako oddělovač obsahu.

Obdélník

Obdélník začínající z bodu X1Y1 a končící v bodu X2Y2. Kromě šířky čáry, která obdélník tvoří, můžete nastavit také jeho výplň. Můžete tak například udělat černý obdélník a nad něj umístit bílý text. V tom případě zvolte v jeho vlastnostech nižší vrstvu než tu, kterou přiřadíte prvku "nad" obdélníkem.