Budoucnost vektorové grafiky na webu, 4. část

Minule jsme si předvedli, že standardní vektorová grafika SVG-XML (oficiální standard W3) se stala skutečností v moderních webových prohlížečích Mozilla Firefox 1.5 (Camino 1) a Opera 9. Ve všech pádech skloňované XML už není nějakou akademickou nebo nepraktickou hříčkou, nýbrž reálným nástrojem, který je díky zmíněným prohlížečům dostupný úplně všem.

Transformace XML dat pomocí XSLT doplňují náš technický arzenál o další mocný nástroj. Pokud věnujete trochu energie na překonání zdánlivé počáteční složitosti, otevře se před vámi obrovská škála možností, o kterých se vám předtím ani ve snu nezdálo.

XML jako synonymum pro budoucnost

XML jako flexibilní formát pro ukládání a přenos dat bylo původně doménou spíše velkých "podnikových" nebo serverových aplikací, ovšem dnes je dostupné prakticky každému a rozšířené i v "malých" programech jako třeba různé kancelářské balíčky typu "Office" nebo všelijaké databáze.

Nu a tam, kde je spousta dat a informací vzniká často potřeba ukázat je člověku v přístupnější, stravitelnější podobě - v grafickém zobrazení. Což je úkol stvořený vyloženě pro SVG - jakožto značkovací jazyk pro popis animované a interaktivní 2D grafiky. Ale to už víte z předchozích článků o SVG.

Tento úkol jistě dobře znají studenti, kteří jsou nuceni vytvářet protokoly z různých laboratorních cvičení. Stejně tak se vizualizace využije při prezentaci ekonomických výsledků a hospodářských statistik. Informace o počasí bude v podobě mapy tísíckráte názornější než jakákoliv tabulka. A určitě byste sami přišli na další příklady využití.

XSLT - co to je a k čemu je to vlastně dobré?

Měli bychom-li stručně charakterizovat XSLT, tak řekneme, že jde o nástroj umožňující měnit formát XML dat. Tedy něco, co se více než hodí k převodu například databázových dat do podoby HTML tabulky. (X)HTML je samozřejmě také jen jedno z mnoha možných nářečí XML. A jelikož máme nyní k dispozici webové prohlížeče vykreslující grafiku popsanou v jednom z nářečí XML - tedy SVG - můžeme stejně tak dobře XSLT použít k převodu na tento formát.

Programátorům můžeme představit inkriminovanou technologii ještě jinak: XSLT je funkcionální programovací jazyk zapsaný pomocí XML syntaxe a specializovaný právě na transformace XML dat. Tedy proces je popsán tzv. deklarativně. Nasazením XSLT si můžeme ušetřit mnoho práce. Neocenitelným vedlejším efektem je, mimo jiné, totální eliminace případných chyb ve struktuře výstupních XML dat. Ty, jak známo, při klasickém způsobu programování vznikají velmi snadno.

Vyzkoušejte si to sami, aneb Na vlastní oči

Tak s chutí do toho - pokusíme si nyní podrobněji osvětlit jak může XSLT pracovat při vytváření SVG grafiky. Sami uvidíte, že tato technika není vůbec tak komplikovaná, jak se mnozí obávají, a její ovládnutí není vůbec ničím nedostupným.

Co potřebujete vědět předem

Pro plné pochopení textů je nutno mít alespoň základní povědomí o webovém standardu SVG - výklad najdete v mém kurzu SVG nebo třeba přímo v textu normy na w3.org. Dále o technice XSLT - informace můžete najít třeba na zvon.org nebo v kurzu Jiřího Koska.

Vstupní data

K získání vstupních dat použiji pro všechny asi nejdostupnější program, kterým budou Open Office ve verzi 2. Tabulková data si uložíme ve formátu MS-XML. Na těchto datech si ukážeme techniky použitelné k vytváření různých druhů grafů. Jako třešničku na dortu použijeme standardní animační techniky SMIL, které nám umožní vcelku bezpracně vyšperkovat a oživit statické zobrazení.

Ukázka XML kódu tabulkových dat:

<ss:Worksheet ss:Name="Tabulkový list 1">
  <Table ss:StyleID="ta1">
    <Column ss:StyleID="Default" ss:Span="1" ss:Width="64.2614"/>
    <Row ss:Height="12.8409">
      <Cell>
        <Data ss:Type="Number">
          0
        </Data>
      </Cell>
      <Cell ss:Formula="=SIN(RC[-1])*COS(RC[-1])">
        <Data ss:Type="Number">
          0
        </Data>
      </Cell>
    </Row>

  ...

  </Table>
  <x:WorksheetOptions/>
</ss:Worksheet>

Zapojení XSLT do hry

Abychom mohli transformovaná XML data shlédnout v prohlížeči, přidáme odkaz na transformační styl XSLT do hlavičky XML dat:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="table2svg.xsl" media="screen"?>

<?mso-application progid="Excel.Sheet"?>
<Workbook ...>
...
</Workbook>

XML soubor nyní můžeme otevřít v některém ze zmíněných moderních browserů: Mozilla Firefox 1.5 (Camino 1), Opera 9... a pravděpodobně bychom se v relativně krátkém horizontu mohli dočkat podpory SVG i v Safari / Konqueroru. (Nejnovější vývojová verze Safari z 2006-03 se zapnutou SVG podporou již náš příklad zvládá. Bohužel obsahuje ještě dost nedostatků - takže zatím stále dobré třetí místo :)

Klepněte pro větší obrázek

SVG graf automaticky generovaný z XML dat pomocí XSLT - prohlížeč Safari 2 už to umí také (pozor - verze s nativní podporou SVG zatím není v systému standardně instalována) (XML UKÁZKA)


Proces transformace

Hodně zjednodušeně: Transformační předpis, alias XSLT stylesheet, je v podstatě skupina šablon definujících co bude odpovídat konkrétnímu vstupnímu prvku, atributu atd. na výstupu.
Jednotlivé prvky ze vstupních XML dat jsou vybírány pomocí podmínek vyjádřených v tzv. XPath syntaxi.
Toto je základní struktura šablony XSLT v praxi. Ve výpisu jsou vidět nezbytné hlavičkové deklarace včetně nastavení výstupní metody pro SVG-XML, dále volání základní šablony template match="/" zpracovávající "kořenový" prvek ze vstupu:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="
http://www.w3.org/1999/XSL/Transform"
  xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
  xmlns:xlink="
http://www.w3.org/1999/xlink"
  xmlns="
http://www.w3.org/2000/svg"
>
<xsl:strip-space elements="*" />
<xsl:output method="xml"
  media-type="image/svg+xml"
  indent="no" encoding="UTF-8" />

...

<xsl:template match="/">
  <svg viewBox="0 0 {$width} 100"
       xmlns="
http://www.w3.org/2000/svg" version="1.1">

...

    <xsl:apply-templates />
  </svg>
</xsl:template>

...

</xsl:stylesheet>

Sloupcový graf

Nyní vám podrobněji popíši, co dělají jednotlivé šablony v našem stylesheetu. Poté prozradím několik pokročilejších a složitějších triků, jež nám umožní grafy lépe automaticky přizpůsobit variabilnímu množství datových položek a rozsahu vstupních hodnot. Dílo završíme třešničkou - rozpohybováním některých grafických prvků.

Popis jednotlivých šablon

template match="/"

Šablona zpracovává "kořen" tabulkového dokumentu. Vytvoří základní SVG prvek a definuje koordináty pracovní plochy uvnitř SVG prostoru. Povšimněte si, že rozměry nejsou definovány - díky tomu se vektorová grafika vždy roztáhne na plnou šířku okna.

Krom titulku je v této šabloně vykreslen modrý rám okolo grafu a souřadnicová osa X. Následuje obligátní prvek xsl:apply-templates zajišťující vyvolání dalších šablon.

Konstrukce "{$width}" doplní do výstupu transformace hodnotu XSLT proměnné, jejíž výpočet si osvětlíme později. (Proměnné se v XSLT vždy označují znakem "dolar", stejně tak složené závorky se vždy používají pro vkládání výpočetních výrazů tohoto jazyka do výstupního XML kódu.)

<xsl:template match="/">
  <svg viewBox="0 0 {$width} 100"
       xmlns="
http://www.w3.org/2000/svg" version="1.1">
    <title>XML*XSLT == HTML+SVG</title>
    <rect x="0" y="0" width="{$width}" height="100"
     fill="lightblue" stroke="blue" stroke-width=".6"/>
    <line x1="3" y1="50" x2="{$width - 3}" y2="50"
     stroke="gray" stroke-width=".6"/>
    <xsl:apply-templates />
  </svg>
</xsl:template>


template match="ss:Worksheet[1]"

Dokumenty tabulkových kalkulátorů mohou obsahovat více "listů" - naše šablona vybírá první z nich (template match="ss:Worksheet[1]") a současně vytvoří nadpis tabulky (SVG element text) - vezme jej z atributu "Name" (value-of select="@ss:Name").

<xsl:template match="ss:Worksheet[1]">
  <text x="6" y="8" font-size="4" letter-spacing="0">
    <xsl:value-of select="@ss:Name"/>
  </text>
  <xsl:apply-templates />
</xsl:template>


template match="ss:Table[1]"

Tato šablona vybere první tabulku nacházející se na prvním listu. Pro další zpracování řádků jsou poté využity XSLT konstrukce jako for-each select="ss:Row", které v podstatě odpovídají smyčkám z klasičtějších programovacích jazyků:

<xsl:template match="ss:Table[1]">
  <xsl:for-each select="ss:Row">

...zpracování jednoho řádku...

  </xsl:for-each>
</xsl:template>

Vzorová data mají na každém řádku 2 hodnoty. Druhou z nich (hodnota Y) použijeme pro nastavení výšky vykreslovaného sloupce grafu. (První v tomto případě obsahuje hodnotu X.)

Standard SVG nám pro vytvoření vektorového obdélníku nabízí více různých cest. Já použil obdélníkový prvek rect. Ten má nejjednodušší a zcela zřejmý zápis. Ovšem, vzhledem k tomu, že šířka a výška musí být vždy kladné, bylo nutno doplnit XSLT test (when test="$val >= 0"), který umožni generovat obdélník pro záporné hodnoty jinak.

Pro zpřehlednění zápisu jsem si vytvořil pomocné XSLT proměnné (pos...pořadové číslo sloupce, val...aktuální hodnota Y, colHeight...výška sloupce). Pro pořádek doplňuji, že tečka v zápisu atributů (např. ".*50") zastupuje hodnotu aktuálního XML uzlu:

<xsl:variable name="pos" select="position()" />
<xsl:variable name="val" select="." />
<xsl:variable name="colHeight" select=".*50" />

Smyčka for-each select="ss:Cell[1]/ss:Data[1]" by procházela číselné hodnoty v prvním sloupci tabulky - jelikož se ale jedná o lineárně rostoucí hodnoty X, můžeme se bez nich při této demonstraci klidně obejít. Smyčka pro druhý tabulkový sloupec for-each select="ss:Cell[2]/ss:Data[1]" vytváří zelené a červené obdélníky podle toho, zda je hodnota kladná či záporná.
Takto vypadá celek:

<xsl:template match="ss:Table[1]">
  <xsl:for-each select="ss:Row">
    <xsl:variable name="pos" select="position()" />
    <xsl:for-each select="ss:Cell[2]/ss:Data[1]">
      <xsl:variable name="val" select="." />
      <xsl:variable name="colHeight" select=".*50" />
      <xsl:choose>
        <xsl:when test="$val >= 0">

<!-- vytvoř sloupec pro kladnou hodnotu -->
<rect x="{3*$pos}" y="{50-$colHeight}" width="2" height="{$colHeight}"
 fill="green" opacity=".5" stroke="none"/>

        </xsl:when>
        <xsl:otherwise>

<!-- vytvoř sloupec pro zápornou hodnotu -->
<rect x="{3*$pos}" y="{50}" width="2" height="{-$colHeight}"
 fill="red" opacity=".5" stroke="none"/>

        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
  </xsl:for-each>
</xsl:template>

Ne všechny třešničky jsou rudé

Příště si jako slibované třešničky navrch přidáme něco animací podle receptury SMIL. Aneb trocha pohybu nikdy neuškodí...

Témata článku: Software, Programování, Budoucnost, Select, Match, Cell, Open Office, Strip

3 komentáře

Nejnovější komentáře

  • Lada 15. 12. 2006 0:56:46
    Dobry den, bohuzel se mi nepovedlo udelat to co Vam v clanku, muzete mi...
  • nxt 13. 4. 2006 13:44:25
    existuje cela rada programu, ktere XSLT umi debugovat po jednotlivych...
  • deda.jabko 13. 4. 2006 11:34:28
    xslt je sice velice hezky a turingovsky uplny jazyk (a to se u...
Určitě si přečtěte

Monitory do 10 tisíc: poradíme, jaké jsou teď nejlepší

Monitory do 10 tisíc: poradíme, jaké jsou teď nejlepší

** Dobrý monitor s kvalitním panelem lze pořídit pod tři tisíce korun ** Pod deset tisíc si můžete koupit pracovní 27" monitor nebo nejlevnější použitelné 4K ** Vybrali jsme také ideální model pro vícemonitorovou konfiguraci

27.  11.  2016 | Stanislav Janů | 13

Sbíječky vyměnili za klávesnice. Nový projekt má za cíl přeučit horníky na programátory

Sbíječky vyměnili za klávesnice. Nový projekt má za cíl přeučit horníky na programátory

** Programátorů je málo a horníků bez práce po uzavření dolu Paskov bude moc ** Problém řeší unikátní projekt ** Pilotní kurz dává naději, že by z horníků mohli být použitelní kodéři

28.  11.  2016 | David Polesný | 76