Interaktivní aplikace · Digitální obsah · 2025
Smart City Expo
Dotyková aplikace pro svislou 4K obrazovku, která na veletrhu v Barceloně představovala prototypy pražských nabíječek a ovládala skutečné světlo na stánku.
O projektu
Interaktivní kiosek, který na veletrhu Smart City Expo v Barceloně představoval prototypy pražských nabíječek a chytré osvětlení.
Na podzim 2025 jela Praha pod hlavičkou THMP na veletrh do Barcelony s vizí a prototypy nabíječek elektromobilů. Můj úkol zněl vytvořit interaktivní představení, které poběží na dotykové svislé obrazovce ve 4K.
Vznikla z toho aplikace, kde se nad digitální kresbou Prahy v minutové smyčce střídá den a noc a návštěvník si proklikává nabíječky a osvětlení. Když na obrazovce změní jas světel, změní se i skutečné světlo u nabíječky na stánku.
Cíl: představit prototypy a chytré osvětlení tak, aby si je návštěvník mohl sám vyzkoušet.
Moje role
Od původní myšlenky po hotovou aplikaci.
- Původní koncept
- Digitální kresba Prahy a její animace
- Návrh rozhraní
- Ilustrace a obsah ve spolupráci s odborníky
- Sestavení aplikace ve Webstudiu
- Napojení hotového kódu pro ovládání světla na tlačítka v aplikaci
Výzva
Jak vytvořit aplikaci, která:
- Poběží na svislé 4K dotykové obrazovce bez dozoru
- Mluví třemi jazyky: česky, anglicky a španělsky
- Ovládá obrazovku i skutečné světlo jedním dotykem
Nejtěžší překážka: přijít s původní myšlenkou, jak by to celé mohlo vypadat.
Proces
Nápad: město, které se mění ze dne na noc
Základem byla moje digitální kresba Prahy a její animace. V minutové smyčce se město proměňuje ze svítání přes den do noci, kdy se v domech rozsvěcují okna a na ulicích lampy.
Smyčka je video ve formátu 2160 × 3840 px, tedy přesně na svislou 4K obrazovku, a běží na 60 snímcích za vteřinu, aby pohyb působil plynule i na velké ploše.
Rozhraní
Ovládání jsem dal do sloupce u levého okraje, zbytek plochy patří kresbě města. Jsou v něm jazyky, dvě sekce (Chytré nabíjení a Chytré osvětlení) a tři úrovně světla: 100 %, 50 % a vypnuto. Tlačítka mají tvar šestiúhelníku.
Ilustrace a obsah
S odborníky jsme dali dohromady obsah, který se dal proklikat: přehled nabíječky, kompaktní all-in-one provedení, instalace bez rozkopávání ulic, jednotný městský design, způsoby platby, typy osvětlení, osvětlení v číslech a časová osa.
Ilustrace jsou bílé linkové kresby na tmavém pozadí. Nabíječka v nich stojí ve sloupu veřejného osvětlení, u autobusové zastávky i na ulici, aby bylo vidět, že patří do města.
Tři jazyky
Celý obsah je ve třech jazycích a přepíná se jedním dotykem. Čeština pro domácí návštěvníky, angličtina a španělština pro veletrh. Jazykové verze mají i vlastní verze ilustrací, kde je text přímo v obrázku.
Světlo, které je vidět i ve skutečnosti
Tlačítka 100 %, 50 % a vypnuto mění jas světel ve kresbě a zároveň posílají příkaz skutečnému světlu u nabíječky na stánku. Na obrazovce to dělá vrstva světel nad kresbou, ve skutečnosti ovladač, kterému stránka pošle požadovaný jas.
Kód pro ovládání světla jsem nepsal. Dostal jsem ho hotový od příslušných kolegů, já ho vložil do aplikace a napojil na tlačítka.
Webstudio
Postavil jsem to ve Webstudiu, který jsem tehdy zkoušel pro budoucí tvorbu webů. Výsledek je statická stránka, video, písma i ilustrace jsou součástí balíčku a nic se nestahuje z internetu.
Klíčové prvky
- Den a noc v minutové smyčce nad kresbou Prahy
- Světlo na obrazovce i ve skutečnosti, ovládané stejným tlačítkem
- Tři jazyky: čeština, angličtina, španělština
- Linkové ilustrace nabíječek a osvětlení
- Rozhraní navržené pro svislou 4K dotykovou obrazovku
Výsledek
Aplikace běžela na stánku na Smart City Expo v Barceloně. Projekt měl velmi silné ohlasy a řekli mi, že bez něj bychom tam nejspíš vůbec nejeli.
Co jsem se naučil
Atypický projekt stojí za to. Dostal jsem kreativní svobodu udělat to po svém a vyřádit se mnohem víc, než jsem musel. Nakonec to opravdu stálo za to.
Webstudio jsem později nepoužíval dál, ale pro tenhle projekt byl dobrou volbou: šlo o web, a ten umím.
