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.