GaugeMeter

Data z měřicích jednotek jako jsou AirTracker, Meteo stanice nebo jednotky CO2 mohou být zobrazena ve speciálním administračním prostředí pro správu jednotek nebo z něj být exportována. Aby šlo data rychle a názorně kontrolovat nebo prohížet, vyvinuli jsme JavaScriptové řešení, které lze jednoduše vložit do stávajících WWW stránek: plně parametrizovatelný měřič zobrazující poslední (nebo několik posledních naměřených hodnot vybraných senzorů jednotek.

Produktový list k tomuto projektu je ke stažení zde
(a anglická verze zde).

Instalace a popis souborů

Balíček gaugeMeter.zip obsahující všechny potřebné soubory spolu s funkčním příkladem použití stáhnete tady.

Obsahuje následující soubory:

  • example.html – soubor s příkladem použití portletu GaugeMeter. Tento soubor musí obsahovat direktivy pro vložení všech potřebných JavaScriptových souborů a link na soubor style.css. V <head> sekci je potřeba vložit následující kód:
    <link href=„style.css“ rel=„stylesheet“ />
    <script src=„gauge.js“></script>
    <script src=„snog.js“></script>
    <script src=„gaugeMeter.js“></script>
    <script src=„resources.js“></script>

    U tagu <body> je nutné zavolat u inicializace funkci, která spustí samotné vykreslení GaugeMeter a načítání dat pro tento portlet:

    <body onload=onLoadFn();>

    Pak už stačí definovat, kde se bude GaugeMeter vykreslovat a na příslušné místo vložit následující <div>:

    <div id=„gauge“></div>
  • gaugeMeter.js – toto je soubor s hlavní funkcí onLoadFn(), která se zavolá hned po načtení HTML stránky. Tato funkce vytvoří potřebné HTML elementy pro GaugeMeter a podle parametrů zadaných na konci souboru ve struktuře snogOpts nastaví komunikaci se serverem SNOG a vlastnosti samotného elementu GaugeMeter. Následuje popis struktury snogOpts a jejich jednotlivých parametrů:
    var snogOpts = {
            username: ‚snog_username‘// SNOG username
            password: ‚snog_password‘// SNOG password
            server: ‚server_name‘// SNOG server name
            unitId: 999// SNOG unit ID
            resourceId: 1// SNOG resource ID
            measurementCnt: 3// number of last measurements shown in gauge
            htmlTooltip: tooltipElement// HTML element for timer
            gauge: gauge// gauge instance
            updateTimerTime: 60000// update time for timer requesting new values from server [ms], 
                               //if value == 0, data request is sent only once, not in the loop
            htmlLoadbarFunction: hideLoadbar// function that handles loadbar hiding
            updateLabelStr: ‚Aktualizace dat: ‚// string for label with „Last update“ information
            lastMeasuredStr: ‚Poslední naměřené hodnoty: ‚,
        };

    Všechny potřebné hodnoty jako je username, password, server, unitId a resourceId budou k dispozici od dodavatele. Uživatel si může nastavit počet ručiček s historickými hodnotami, které se budou v GaugeMeter zobrazovat (čím je naměřená hodnota starší, tím je víc průhledná), jak často se bude posílat požadavek na aktualizaci dat (updateTimerTime, hodnota je v [ms]) a je možné si předefinovat řetězce, které budou v tooltipu u vykreslování posledních naměřených hodnot.

  • gauge.js – v tomto souboru je definován element GaugeMeter, jeho zobrazení, animace u změny hodnot ap. Veškeré uživatelské změny nastavení pro GaugeMeter se provádí v souboru gaugeMeter.js
  • resources.js – tento soubor obsahuje pravidla pro nastavení jednotlivých barevných sekcí a hodnot (minimum, maximum) pro jednotlivé senzory. GaugeMeter se pokusí získat aktuální hodnoty přímo ze serveru, pokud se to nepodaří, využije defaultní hodnoty nadefinované přímo v tomto souboru.
  • snog.js – v tomto souboru je definována komunikace se serverem: navázání spojení a pak postupné odesílání žádostí o aktualizovaná data naměřená na zadaném senzoru vybrané jednotky.

Pro jakékoliv informace o projektu nebo technickou podporu kontaktujte Ústav bezpečnostních technologií a inženýrství Fakulty dopravní ČVUT.