Category Archives: UserInterface

iKatastr.cz pro mobilní web

Pár poznámek k nové mobilní verzi iKatastr.cz.

To co je na této verzi zajimavé je, že jsem se nakonec rozhodl ignorovat všechna možná pokušení o využití JavaScriptovych knihoven, tedy kromě základní mapové komponenty – ta je založena na Leafletu v 1.0.3, kde jsem ještě musel udělat pár úprav, aby vše fungovalo správně. Leaflet má v komprimované formě 48KB. Využívám i komponentu Mapy API ale jen pro vyhledávání a navíc je tato část nahrána až když uživatel opravdu klikne na hledání.

Vlastní kód iKatastru má v komprimované formě pouze 13.3 KB. Celý výkonný kód, včetně HTML, CSS a fontu (který je také na míru vyroben) zabere při studeném startu (bez cache) pod 70 KB.  Zbytek je už vlastní obsah  – data  – hlavně dlaždice ze zdrojů Mapy.cz a ČÚZK.

Při každém dotazu do mapy aplikace vyšle požadavky na webové služby ČÚZK, ty zaberou v jedné odpovědi pod 10 KB.

 Uživatelské rozhraní 

Vertikální menu ve stylu rozbalovacích panelů nakonec zvítězilo a myslim si, že je hbité, pěkné a funkční. Opět nechtěl jsem dělat tendenční UI ani animace, které nakonec  berou čas uživateli. Na mobilu se dovoluje kvůli místu mít pouze jeden panel rozbalený, navíc funguje libovolné tapnutí do mapy k tomu aby se panel zabalil – to je navýkové a pohodlné. Ovšem panely se dají zavírat více způsoby – samotnou ikonou co je otevíra a samozřejmě křížkem vpravo.

Informace z katastru nemovitostí:

Tohle byl asi největší problém – tedy ne samotné informace – ty jsou úplně na jiné úrovni než před 8 lety, kdy iKatastr začínal, spíš problém jak do mapy tapnout – dlouze, nebo krátce ? Dlouhý stisk je zavedený v mobilnich aplikacích, krátký klik je zase pohodlný a rychlý na webu.  Nakonec má uživatel k dispozici oboje (a k mému údivu to šlo vyřešit) a navíc může si zvolit, jestli se má na jedno tapnutí přímo zobrazit nahlížení (tedy tak jak byl zvyklý z minulých verzí) . To otevírá poměrně hladkou cestu na přenesení této mobilní verze na desktop. Ona tam funguje, dokonce i na Internet Exploreru (jen si stěžuje že  potřebuje pomoci s povolením otevřít popup okno …opět) a na EDGE prohlížeči nefungují některé dotazy – je to chybou v EDGE prohlížeči, naštěstí se rozjedou vždy záložní dotazy, které fungují, takže z pohledu uživatele se pouze nezvýrazní parcely/budovy.

Budu rád pokud mi sem napíšete vaše postřehy, připomínky k této mobilní verzi – co funguje, co se lébi/nelébi a jak používate vlastně iKatastr a při jaké práci.

 

GPU accelerated visual analytics

Recent months I had lot of fun working   on WebGL component called “mGL” for visualizing and filtering large amount of data in the browser. It has been used  for Incident Analyzer and Area Analyzer Smart M.Apps. Here are  2 videos of the testing app of the mGL that shows its potential.  Most interesting is the filtering part that takes place in the fragment shader. mGL itself has API that can connect to crossfilter to control filtering  or has adapter to be used with dc.js.

First video shows 400k parcels in Cincinaty  and second   400k road network in North Caroline. Both  with fast cross-filtering on several attributes. You can switch between dimensions represented by charts by clicking on their label. Map (road network) will reflects chart’s color and immediately response to changing filters on either chart or on map.second video shows 400k parcels in Cincinaty with the same behavior.

 

 

Smart M.App

  Recent months I have been programming  “Green Space Analyzer” web app that shows modern  approach to visualize and  query   multi temporal geospatial data.  User see information in a form he can interact with and discover new patterns, phenomena or information just by very fast ‘feed-back’ of the UI response on the user input.  When user selects for example certain area, all graphs instantly animates transition to reflect selection made, this helps to  better  understand  dynamics of the change. Animation can be seen everywhere – from labels on bar chart, through colors change of the choropleth up to title summary. it creates subtle feeling of control or knowing what has changed and how it has changed. At HxGN 15 conference in   hexagon geospatial keynote, CEO Mladen Stojic showcased it as part of the  vision  called Smart M.App, worth to look at (at 52:40 starts Smart M.App demo):

 

my Smart M.App  ‘world tour’:

 

 

 

Skylight UI for SONAR X1 – inspiration for geospatial desktops

This might be of your interest to see  how music production software solved the UI for many controls and options the user might want to control at the same (real!) time.   SONAR X1 actually haven’t brought any new functionality in this new version, just completely redesigned UI and build on top of this marketing campaign. Another fact I like is that they haven’t use all these fancy styles on windows that makes things look ‘nice’ like powerpoint but are not well readable or effective for eyes. To me it is kind of mixture of VisualStudio 2010 UI plus Office Ribbon bar plus good color scheme and additional tweaks to make it really usable.

watch the video here: http://www.youtube.com/watch?v=97LnrViar38