Gisquick a multimédia

Nástroj Gisquick umožňuje publikovat “snadno a rychle” projekt vytvořený v programu QGIS.  Webová aplikace pak nabízí řadu možností pro uživatele jak s geodaty pracovat. Mezi základní nástroje patří samozřejmě jejich prohlížení v podobě mapy tak jak byla nastylována v QGIS, dále pak je to zobrazení atributů vybraných objektů a v neposlední řadě pak editace jak hodnot atributů tak geometrie. V základní konfiguraci umožňuje webová aplikace zobrazení atributů ve formě textu, čísel, datumu a statických obrázků.

TIP: Gisquick můžete vyzkoušet na veřejném serveru, například v projektu Central Europe

Pokud chcete zobrazovat grafy nebo videa nebo přehrávat zvuky musíte v současné době přistoupit k vlastí úpravě komponenty pro infopanel (detail prvku), kde se údaje zobrazují. Na obecné variantě se zatím pracuje, ale není třeba zoufat, uživatelská úprava není tak složitá a Gisquick nabízí vše, co je pro takovou úpravu potřeba.

V následující části si popíšeme jak k takové úpravě přistoupit. Úprava spočívá ve třech krocích:

  1. Instalace serveru
  2. Instalace vývojového prostředí
  3. Modifikace šablony pro Vue.js

Instalace serveru

Instalace serveru je jednoduchá díky tomu, že autoři vytvořili instalační nástroj. Nástroj je dostupný na https://github.com/gislab-npo/gisquick-cli a pokud budete postupovat podle návodu neměl by být s instalací problém. V mém případě jsem pouze musel instalovat klienta jako uživatel sudo. Druhý možný problém je pak použití dat v neprojektovaném souřadnicovém systému, doporučuji tedy např. EPSG:3857.

Instalace vývojového prostředí

Osobně používám IntelliJ IDEA, ale v zásadě by mělo být celkem jedno v čem budete provádět úpravu – stačí textový editor. Gisquick je k dispozici na https://github.com/gislab-npo/gisquick a část, kterou budeme upravovat pak najdete v adresáři clients/gisquick-web. Zde je samozřejmě nutné provést instalaci node modulů, tak jak je popsáno v dokumentaci. Tedy npm install. Pak již můžete spustit klienta pomocí npm run serve. Je však důležité aby vám běžel server z předchozího kroku.

Modifikace šablony pro Vue.js

Samotný infopanel se nachází v src/components/GenericInfoPanel.vue. Jedná se o šablonu frameworku Vue.js, která obsahuje HTML a JavaScript kód. Pokud se těchto jazyků nebojíte můžete zkusit její modifikaci, tak aby se uživateli zobrazoval multimediální obsah. My si toto demonstrujeme na použití videa, kdy v atributové tabulce má objekt uvedeno URL, které ukazuje na MP4 soubor s videem.

Vytvoříme jednu funkci a jednu konstantu, které nám zajistí potřebnou funkcionalitu.

První funkce isVideo pouze kontroluje zda se v URL nachází přípona mp4 (nebo ogg) a tak tedy určí zda jde o video či nikoli. Funkci můžete samozřejmě libovolně udělat složitejší a např. si přečíst metadata daného videa nebo zkontrolovat zda je daná URL validní, apod.

function isVideo (val) {
  return val && val.match(/\.(mp4|ogg)$/i) !== null
}

Konstanta VideoWidget představuje grafické uživatelské rozhraní, které bude přehrávat video. Jedná se o značku jazyka HTML ve verzi 5. Je zde nastavené automatické přehrání a zobrazení uživatelských tlačítek pro kontrolu přehrávání. Samotná hodnota URL videa se předává jako parametr anonymní (arrow) funkce.

const VideoWidget = Widget((h, ctx) => (
  <video width="200" controls autoplay>
  <source src={ctx.props.value} type="video/mp4"/>
  Your browser does not support HTML video.
  </video>
))

Poslední úprava spočívá v modifikaci funkce widgets() v sekci computed. Tato funkce se volá vždy při jakékoli změně a je tak dynamicky měněn obsah infopanelu např. když se změní vybraný objekt. Část, která pracuje s atributy, které jsou URL se změní na:

if (isImage(value)) {
  return ImageWidget
} else if (isVideo(value)) {
  return VideoWidget
} else {
  return UrlWidget
}

Tento kód zachová původní funkcionalitu, tedy obrázky budou zobrazeny jako obrázky, jiná URL jako odkazy a přidá, že v případě MP4 nebo OGG dojde k zobrazení videa.

Takto snadno dosáhneme toho, že se URL adresy s MP4 budou zobrazovat v infopanelu jako videa a rovnou se přehrají. Tak jak je zobrazeno na následujícím obrázku.

Závěr

Z příkladu je patrné, že modifikace infopanelu je snadná a není potřeba příliš mnoho dovedností k její realizaci. Je také jasné, že složitější příklady jako práce s grafy, již tak triviální nebudou. Nicméně např. doplnění loga firmy nebo nějaké další popisné informace do infopanelu je opravdu jednoduchá.

Post navigation