Archivaci mají v systému Control Web na starosti archivní datové sekce. Zobrazení archivních dat přístroj data_viewer. Toto rozdělení umožňuje jednak snadné sdílení archivních sekci mezi aplikacemi a také vytváření různých pohledů na stejná archivní data.

V naší ukázce budeme chtít, aby měl uživatel možnost z webové aplikace ve formuláři zadat rozsah dat (počáteční a koncové datum) grafu. Po potvrzení mu aplikace zobrazí požadovaný graf. Naučíme se, jak přenést data z webového formuláře do Control Webu. Jak nastavit parametry přístroje data_viewer a jak obrázek tohoto přístroje zobrazit ve webové aplikaci.

Krok 1: Aplikace archivuje

Začneme tím, že si v aplikaci vytvoříme jeden archivní datový element.

data
  alarm archiv1 {period = 1};
    arch_1 = rand() * 100;
  end_alarm;
end_data;

perioda určuje, jak často se bude výsledek zadaného výrazu archivovat. Pro ukládání dat doporučujeme používat SQL server, který je k dispozici při instalaci systému Control Web.

Vytvořenou aplikaci necháme chvíli běžet, abychom měli k dispozici nějakou historii a mohli se na ní později dívat.

Nyní do aplikace vložíme přístroj data_viewer, který nám umožní archivní data sledovat. data_viewer je velice mocný přístroj, který umožňuje zobrazit historická data v tabulce nebo grafu. Je možné vybírat z obrovského množství zobrazení, typů časových nebo datových os a podobně. Kompletní popis tohoto přístroje by vydal na samostatný článek. My si nyní vystačíme pouze se základním nastavením (kompletní popis přístroje je možné najít v dokumentaci).

V přístroji musíme nastavit jaké datové elementy bude zobrazovat. data_viever organizuje datové elementy ve skupinách (data groups). Pro náš datový element musíme vytvořit novou skupinu.

a textový zápis tohoto nastavení:

  data_viewer data_viewer_1;
    data_group
      group_name = 'group1';
      title = 'Skupina 1';
      data_elements
        item
          data_element = archiv1.arch_1;
        end_item;
      end_data_elements;
    end_data_group;
    active_group = 'group1';
  end_data_viewer;

Přístroj data_viewer může pracovat ve dvou režimech:

• online - přístroj je časovaný a zobrazuje aktuální hodnoty. Pokud je zobrazen graf, časová osa končí aktuálním časem. Při každé aktivaci se graf posune o uplynulý čas.

• historický - přístroj zobrazuje historická data, uživatel si sám posouvá časový kurzor a prohlíží hodnoty.

V našem příkladu nám bude data_viewer v historickém módu vykreslovat grafy, které budeme jako obrázky zobrazovat na webu.

Krok 2: Web server

Nyní máme aplikaci připravenou, zbývá jen doplnit webový přístup.

Web server je v systému Control Web v přístroji httpd. Pokud tento přístroj vložíme do aplikace bude součástí běžící aplikace web server. Podrobnější popis tohoto přístroje najdeme v jeho dokumentaci. Přístroj httpd může pracovat jako standardní HTTP server pouze vracející klientům soubory z disku. Současně ale poskytuje další služby:

• Do dokumentu lze dynamicky vygenerovat jakoukoliv část textu jako výsledek vyhodnocení výrazu nebo text generovaný libovolnou procedurou. Tento text může být informativní (např. číselné hodnoty v tabulce) nebo může tvořit také např. odkazy na jiné stránky (HTML tags) apod.

• Celý dokument může být vytvořen kompletně dynamicky kódem procedury, případně může kód procedury přesměrovat požadavek na jiný soubor apod.

• Požádá-li klient o obrázek přemapovaný jako vzhled přístroje, server dynamicky vrátí klientovi okamžitou grafickou podobu přístroje, aniž by tato podoba existovala jako soubor.

• Požádá-li klient o specifikovanou stránku, přístroj httpd dokáže aktivovat libovolné přístroje v běžící aplikaci ještě před vygenerováním a odesláním dokumentu.

• Data vrácená z HTML formulářů lze promítnout zpět do řízeného procesu. Proces lze prostřednictvím internetu nejen vizualizovat, ale i řídit.

• Prostřednictvím HTML formulářů lze nejen nastavovat hodnoty datových elementů, ale i aktivovat libovolné jiné přístroje v aplikaci či volat procedury.

My z této nabídky využijeme hned několik služeb. Nejprve vygenerujeme kořenovou stránku. Do ní vložíme HTML formulář pro zadání požadovaných parametrů (počátek a konec časové osy grafu). Data z formulářů příjmeme v Control Webu a podle nich vygenerujeme obrázek z přístroje data_viewer.

Jméno indexového souboru definuje parametr index_file přístroje httpd. My vytvoříme následující indexový soubor:

<html>
<head>
<title>Control Web</title>
</head>

<body>
  <b>Zobrazit graf</b><br>

  <form action="graf.html">

    Od: <input type="text" name="from"> 
    Do: <input type="text" name="to"> 

    <input type="hidden" name="akce" value="nastav_graf">

    <input type="submit" value="Zobrazit">

  </form> 

</body>
</html>

V HTML se k formátování používají tzv tagy, které se zapisují do ostrých závorek. Pokud jsou párové, ukončovací začíná lomítkem. Například <b> </b> se používá pro zápis tučného textu.

Pro definici webového formuláře se používá tag <form>. Všechny parametry, které jsou v rámci jednoho formuláře (tedy mezi form a /form) jsou odeslány současně v jednom požadavku. Parametry se definují tagem <input>. Mohou být zadávané uživatelem nebo skryté (type=hidden). Skryté parametry definuje autor HTML dokumentu a web serveru se odesílají vždy, bez možnosti zásahu uživatele (uživatel je na stránce nevidí).

Aby mohl uživatel formulář odeslat, je vhodné do něj umístit <input type="submit">, který je zobrazen jako tlačítko. Jeho zmáčknutím odešle data formulář na server. Při odeslání formuláře zároveň HTTP klient (prohlížeč) požádá o novou stránku ta je určena parametrem action tagu form.

Nyní můžeme naši aplikaci poprvé spustit a webovým prohlížečem se podívat na vytvořenou HTML stránku. Pokud přistupujeme z lokálního počítače, zadáme lokální adresu 127.0.0.1.

Krok 3: Hodnoty z formuláře

Parametry ve formuláři se definují tagem input. Ten má parametr type, který určuje, jak je hodnota zadávána. Volba text říká, že uživatel bude editovat hodnotu v textovém řádku. Parametr name definuje jméno, s nímž je hodnota parametru poslána na server.

V Control Webu bude každý příchozí parametr uložen do samostatné proměnné. Tyto proměnné se definují v parametrech přístroje httpd, v sekci forms.

  httpd Server;
    forms
      item
        id = 'from';
        output = DateTimeFrom;
      end_item;
      item
        id = 'to';
        output = DateTimeTo;
      end_item;
    end_forms;
  end_httpd

Proměnné DateTimeFrom a DateTimeTo vytvoříme v aplikaci jako globální typu string. Pokud přijdou hodnoty pojmenované from a to z formuláře, uloží jejich hodnoty přístroj httpd do těchto proměnných.

Poslední skrytý parametr pojmenovaný akce (bude vždy obsahovat hodnotu nastav_graf) použijeme k vyvolání akce, která nastaví počátek a konec grafu dle požadovaných parametrů. Tato akce se skládá ze dvou kroků. Prvním bude uživatelská procedura, která nastaví počátek a konec časové osy grafu. V druhém kroku aktivujeme přístroj data_viewer. Aktivace přístroje data_viewer je extrémně důležitá, zajistí, aby přístroj načetl data ze zadaného období a bylo možné z něj vytvořit obrázek, který později pošleme uživateli.

Vyvolání prvního kroku nastavíme v parametrech přístroje httpd:

    form_calls
      item
        id = 'nastav_graf';
        call = nastav_graf();
      end_item;
    end_form_calls;

V proceduře nastav_graf musíme ze dvou řetězců DateTimeFrom a DateTimeTo, zadaných uživatelem, dekódovat datum a čas a tyto zadat do přístroje data_viewer:

    procedure nastav_graf();
    var
      From : real;
      To : real;
    begin
      From = date.StringToJD( DateTimeFrom );
      To = date.StringToJD( DateTimeTo );
    
      DV.SetXAxisRange( From,To );
    end_procedure;

Uživatelem zadané hodnoty převedeme na Juliánské datum. Aby převod proběhl správně, musí uživatel zadat datum a čas ve správném formátu. Pokud je v operačním systému nastaveno české prostředí, musí zadat například 19.12.2017 08:10:00. Pokud by zapomněl například nulu před číslem 8, převod se nepovede. Pro praktické použití bude tedy nutné tuto ukázku rozšířit tak, aby akceptovala i ne zcela přesný formát data a času. Je také možné nechat uživatele zadávat datum a čas v samostatných políčkách nebo zadávat zvlášť hodiny minuty a podobně.

Další krok, který je nutné provést, je aktivace přístroje data_viewer. Tu opět zajistíme v parametrech přístroje httpd (web server):

form_receivers
  item
    id = 'nastav_graf';
    receivers = DV;
  end_item;
end_form_receivers;

Ještě jednou si zopakujme posloupnost akcí, které proběhnou, pokud uživatel potvrdí webový formulář:

• Prohlížeč odešle zadané parametry na server

• Server uloží zadaná data do proměnných (sekce code)

• Server zavolá proceduru (sekce form_calls)

• Server aktivuje přístroj data_viewer (sekce form_receivers)

Krok 4: Zobrazení grafu - přístroje

Jakmile uživatel potvrdí webový formulář, prohlížeč odešle data serveru a načte stránku graf.htm. To způsobí parametr action tagu form v našem HTML kódu:

<form action="graf.html">

Stránka graf bude obsahovat pouze obrázek grafu.

<html>
<head>
<title>Control Web</title>
</head>

<body>
  <b>Graf</b><br>

<img src="/DV">

</body>
</html>

Stránka obsahuje obrázek, který bude prohlížeč číst ze serveru. V našem web serveru musíme nastavit, aby tento obrázek nehledal na disku, ale vygeneroval jej při každém požadavku z přístroje data_viewer. To nastavíme v parametrech přístroje httpd:

instruments
  item
    path = '/DV';
    instrument = DV;
  end_item;
end_instruments;

Aplikaci máme nyní hotovou, můžeme ji spustit a vyzkoušet. Kompletní aplikaci najdete zde.