Dokumentace souboru index.js

Funkce
menuBtn	addEventListener ('click',()=> { sideMenu.style.display="block";}) closeBtn.addEventListener('click'
function	openFullscreen ()
function	openWSConnection (protocol, hostname, port, endpoint)
	Otevře WebSocket připojení k danému serveru a nastaví všechny handlery pro příjem, odesílání a zpracování zpráv.
function	getRndInteger (min, max)
	Vrátí náhodné celé číslo v zadaném intervalu.
function	updateChart (value)
	Přidá novou hodnotu do hlavního QuickChart grafu a aktualizuje jeho vykreslení.
function	removeData (chart)
	Vymaže všechna data z prvního datasetu zadaného grafu a graf následně aktualizuje.
function	updateProgressBar (value)
	Aktualizuje vizuální stav progress baru na stránce.
function	deviceBussy ()
	Nastaví stav zařízení na "Bussy" a změní barvu indikátoru.
function	startMeasure ()
	Odesílá příkaz pro zahájení měření přes WebSocket.
function	startDevel ()
	Odesílá příkaz pro spuštění vývojového režimu přes WebSocket.
function	startDevel2 ()
	Odesílá příkaz pro spuštění druhé verze mereni přes WebSocket.
function	configureDevel ()
	Odesílá konfigurační hodnoty pro vývojový modul přes WebSocket.
function	configureLparams ()
	Odesílá konfigurační parametry L a P přes WebSocket.
function	configureRefparams ()
	Odesílá konfigurační referenční parametry přes WebSocket.
function	calibrationDevel ()
	Spustí kalibraci zařízení přes WebSocket.
function	amodule ()
	Přepne uživatelské rozhraní na zobrazení modulu ESP.
function	asettings ()
	Přepne uživatelské rozhraní na zobrazení nastavení ("Settings").
function	adashboard ()
	Přepne uživatelské rozhraní na zobrazení hlavního dashboardu.
function	adevel ()
	Přepne uživatelské rozhraní na zobrazení vývojové stránky.
function	ahistory ()
	Přepne uživatelské rozhraní na zobrazení stránky historie.
function	getHistory ()
	Pošle požadavek na server pro načtení historie měření.
function	readDevel ()
	Pošle požadavek na server pro načtení konfiguračních dat vývojového režimu.
function	readEspModule ()
	Pošle požadavek na server pro načtení konfigurace ESP modulu.
function	readLparams ()
	Pošle požadavek na server pro načtení konfiguračních parametrů L.
function	readRefparams ()
	Pošle požadavek na server pro načtení referenčních parametrů.
function	dataEspModule ()
	Pošle požadavek na server pro získání dat ESP modulu.
function	saveEspConfig ()
	Uloží konfiguraci ESP modulu a odešle ji na server.
function	rebootESPModule ()
	Odesílá příkaz pro restart ESP modulu přes WebSocket.
function	displayFiles (files)
	Zobrazí seznam JSON souborů a umožní jejich načtení a vizualizaci.

Proměnné
const	sideMenu = document.querySelector("aside")
const	menuBtn = document.querySelector("#menu-btn")
const	closeBtn = document.querySelector("#close-btn")
const	quickBtn = document.querySelector("#quickButton")
const	espConfigBtn = document.querySelector("#espconfigbtn")
const	espResetbtn = document.querySelector("#esprebootbtn")
const	develbtn = document.querySelector("#develbtn")
const	develbtn2 = document.querySelector("#develbtn2")
const	develConfig = document.querySelector("#develConfig")
const	develCalibration = document.querySelector("#develCalibration")
const	lparamsbutton = document.querySelector("#lparamsbtn")
const	refparamsbutton = document.querySelector("#refparamsbtn")
const	sH = document.getElementById('sH')
const	sD = document.getElementById('sD')
const	qR = document.getElementById('qR')
const	A = document.getElementById('A')
const	sHstate = document.getElementById('sHstate')
const	sDstate = document.getElementById('sDstate')
const	qRstate = document.getElementById('qRstate')
const	Astate = document.getElementById('Astate')
const	sHref = document.getElementById('sHref')
const	sDref = document.getElementById('sDref')
const	qRref = document.getElementById('qRref')
const	Aref = document.getElementById('Aref')
const	colorSuccess = "#41f1b6"
const	colorDanger
let	labels = []
let	dataV1 = []
let	dataV2 = []
let	dataX = []
var	elem = document.documentElement
var	currentIP = window.location.hostname
const	ctx1 = document.getElementById('quickChart').getContext('2d')
const	quickchart
const	ctxV1 = document.getElementById('chartV1').getContext('2d')
const	chartV1
	Inicializuje graf pro vykreslování dvou napěťových průběhů (V1 a V2).
const	ctxX = document.getElementById('chartX').getContext('2d')
const	chartX

Dokumentace funkcí

adashboard()

function adashboard

(

)

Přepne uživatelské rozhraní na zobrazení hlavního dashboardu.

Funkce zobrazí stránku page1 a skryje všechny ostatní stránky (page2, page3, page4, page5). Aktivuje záložku "adashboard" a deaktivuje ostatní záložky (amodule, adevel, ahistory, asettings).

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

addEventListener()

menuBtn addEventListener	(		'click',
			(),
			{ sideMenu.style.display="block";}
	)

adevel()

function adevel

(

)

Přepne uživatelské rozhraní na zobrazení vývojové stránky.

Funkce zobrazí stránku page3 a skryje všechny ostatní stránky (page1, page2, page4, page5). Aktivuje záložku "adevel" a deaktivuje ostatní záložky (amodule, adashboard, ahistory, asettings). Vymaže hodnoty polí pro konfiguraci WiFi a přihlášení a načte aktuální vývojová nastavení pomocí funkce readDevel().

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

ahistory()

function ahistory

(

)

Přepne uživatelské rozhraní na zobrazení stránky historie.

Funkce zobrazí stránku page4 a skryje všechny ostatní stránky (page1, page2, page3, page5). Aktivuje záložku "ahistory" a deaktivuje ostatní záložky (adevel, amodule, asettings, adashboard). Vymaže hodnoty polí pro konfiguraci WiFi a přihlášení a načte historii pomocí funkce getHistory().

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

amodule()

function amodule

(

)

Přepne uživatelské rozhraní na zobrazení modulu ESP.

Funkce skryje všechny ostatní stránky (page1, page3, page4, page5) a zobrazí stránku page2. Aktivuje záložku "amodule" a deaktivuje ostatní záložky (adashboard, adevel, ahistory, asettings). Vymaže hodnoty vstupních polí pro konfiguraci WiFi a přihlášení. Na závěr zavolá funkci readEspModule() pro načtení dat z ESP modulu.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

asettings()

function asettings

(

)

Přepne uživatelské rozhraní na zobrazení nastavení ("Settings").

Funkce skryje všechny ostatní stránky (page1, page2, page3, page4) a zobrazí stránku page5. Aktivuje záložku "asettings" a deaktivuje ostatní záložky (amodule, adashboard, adevel, ahistory). Vymaže hodnoty vstupních polí pro konfiguraci WiFi a přihlášení. Na závěr zavolá funkci readLparams() pro načtení konfiguračních parametrů. Obsahuje také zpožděné provedení kódu po 1 sekundě (aktuálně prázdné).

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

calibrationDevel()

function calibrationDevel

(

)

Spustí kalibraci zařízení přes WebSocket.

Funkce vytvoří zprávu s příkazem "calibration" a odešle ji přes otevřený WebSocket. Po odeslání je zpráva zaznamenána v konzoli s časovým razítkem.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

configureDevel()

function configureDevel

(

)

Odesílá konfigurační hodnoty pro vývojový modul přes WebSocket.

Funkce načte hodnoty X, Y a Z z HTML input prvků s ID "devX", "devY" a "devZ", vytvoří objekt zprávy s příkazem "writeDevel" a těmito hodnotami. Zpráva je převedena na JSON a odeslána přes otevřený WebSocket.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

configureLparams()

function configureLparams

(

)

Odesílá konfigurační parametry L a P přes WebSocket.

Funkce načte hodnoty jednotlivých parametrů (L1–L11, L15, P7_1, P7_2, P8_1, P8_2, D1, D2) z HTML input prvků, vytvoří objekt zprávy s příkazem "writeLparams" a těmito hodnotami. Zpráva je převedena na JSON a odeslána přes otevřený WebSocket.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

configureRefparams()

function configureRefparams

(

)

Odesílá konfigurační referenční parametry přes WebSocket.

Funkce načte hodnoty referenčních parametrů (refsH, refsD, refqR, refA) a jejich minimálních a maximálních hodnot z HTML input prvků, vytvoří objekt zprávy s příkazem "writeRefparams" a těmito hodnotami. Zpráva je převedena na JSON a odeslána přes otevřený WebSocket.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

dataEspModule()

function dataEspModule

(

)

Pošle požadavek na server pro získání dat ESP modulu.

Funkce vytvoří objekt s příkazem "dataEsp", převede jej na JSON a odešle přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro účely debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

deviceBussy()

function deviceBussy

(

)

Nastaví stav zařízení na "Bussy" a změní barvu indikátoru.

Funkce zobrazí element s ID 'state', nastaví jeho text na "Bussy" a změní barvu textu na červenou (hodnota z proměnné colorDanger).

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

displayFiles()

function displayFiles

(

files

)

Zobrazí seznam JSON souborů a umožní jejich načtení a vizualizaci.

Funkce filtruje a seřadí soubory podle časového razítka, zobrazí posledních 10 souborů, a umožní jejich načtení kliknutím na ikonu. Po načtení souboru se zobrazí:

1. Tabulka s parametry, výsledky a referencemi.
2. Graf naměřených dat pomocí Chart.js.

Parametry

{string[]}

files Pole názvů JSON souborů.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

getHistory()

function getHistory

(

)

Pošle požadavek na server pro načtení historie měření.

Funkce vytvoří objekt s příkazem "gethistory", převede jej na JSON a odešle přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

getRndInteger()

function getRndInteger	(		min,
			max
	)

Vrátí náhodné celé číslo v zadaném intervalu.

Funkce generuje náhodné číslo pomocí Math.random() a převádí jej na celé číslo včetně obou hranic intervalu.

Parametry

[in]	min	Dolní hranice intervalu (včetně).
[in]	max	Horní hranice intervalu (včetně).

Návratová hodnota

int Náhodné celé číslo v rozsahu <min, max>.

openFullscreen()

function openFullscreen

(

)

openWSConnection()

function openWSConnection	(		protocol,
			hostname,
			port,
			endpoint
	)

Otevře WebSocket připojení k danému serveru a nastaví všechny handlery pro příjem, odesílání a zpracování zpráv.

Tato funkce vytvoří URL dle zadaných parametrů, založí WebSocket objekt a nastaví události:

• onopen – po úspěšném navázání spojení
• onclose – po uzavření spojení
• onerror – při chybě komunikace
• onmessage – při příjmu nové zprávy ze serveru

Funkce zároveň zpracovává přijaté zprávy dle hodnoty parseMsg.command a provádí aktualizace DOM prvků, grafů nebo stavů aplikace.

Parametry

[in]	protocol	Protokol použitého WebSocket spojení (např. "ws" nebo "wss").
[in]	hostname	IP adresa nebo název hostitele WebSocket serveru.
[in]	port	Číslo portu WebSocket serveru.
[in]	endpoint	Koncový path-endpoint serveru (např. "/ws" nebo "/socket").

Návratová hodnota

void Funkce nevrací hodnotu.

readDevel()

function readDevel

(

)

Pošle požadavek na server pro načtení konfiguračních dat vývojového režimu.

Funkce vytvoří objekt s příkazem "readDevel", převede jej na JSON a odešle přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

readEspModule()

function readEspModule

(

)

Pošle požadavek na server pro načtení konfigurace ESP modulu.

Funkce vytvoří objekt s příkazem "readEsp", převede jej na JSON a odešle přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

readLparams()

function readLparams

(

)

Pošle požadavek na server pro načtení konfiguračních parametrů L.

Funkce vytvoří objekt s příkazem "readLparams", převede jej na JSON a odešle přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

readRefparams()

function readRefparams

(

)

Pošle požadavek na server pro načtení referenčních parametrů.

Funkce vytvoří objekt s příkazem "readRefparams", převede jej na JSON a odešle přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro účely debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

rebootESPModule()

function rebootESPModule

(

)

Odesílá příkaz pro restart ESP modulu přes WebSocket.

Funkce vytvoří objekt s příkazem "rebootEspModule" a odešle jej přes WebSocket. Zároveň zaznamená čas a obsah odeslané zprávy do konzole pro debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

removeData()

function removeData

(

chart

)

Vymaže všechna data z prvního datasetu zadaného grafu a graf následně aktualizuje.

Funkce kompletně vyprázdní data v datasetu s indexem 0 a poté zavolá chart.update(), aby se změna projevila ve vykreslení.

Parametry

[in,out]

chart

Instance grafu Chart.js, ze kterého mají být odstraněna data.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

saveEspConfig()

function saveEspConfig

(

)

Uloží konfiguraci ESP modulu a odešle ji na server.

Funkce načte hodnoty Wi-Fi a přihlašovacích údajů z HTML formuláře, vytvoří objekt s příkazem "writeEspConfig" a odešle jej přes WebSocket. Také vypíše čas a obsah odeslané zprávy do konzole pro účely debugování.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

startDevel()

function startDevel

(

)

Odesílá příkaz pro spuštění vývojového režimu přes WebSocket.

Funkce vytvoří objekt zprávy s příkazem "startDevel" a parametry načtenými z HTML input prvků:

• maxsteps: počet kroků měření,
• measureevery: frekvence měření,
• motorspeed: rychlost motoru,
• motoraccel: zrychlení motoru,
• motordelay: zpoždění motoru.

Zpráva je převedena na JSON a odeslána přes otevřený WebSocket. Po odeslání se aktualizuje progress bar a skryje tlačítko pro stažení výsledků.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

startDevel2()

function startDevel2

(

)

Odesílá příkaz pro spuštění druhé verze mereni přes WebSocket.

Funkce vytvoří objekt zprávy s příkazem "startDevel2" a parametry načtenými z HTML input prvků:

• maxsteps: počet kroků měření,
• measureevery: frekvence měření,
• motorspeed: rychlost motoru,
• motoraccel: zrychlení motoru.

Zpráva je převedena na JSON a odeslána přes otevřený WebSocket. Po odeslání se zobrazí progress bar a skryje tlačítko pro stažení výsledků.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

startMeasure()

function startMeasure

(

)

Odesílá příkaz pro zahájení měření přes WebSocket.

Funkce vytvoří objekt zprávy s příkazem "startMeasure", převede ho na JSON a odešle přes otevřený WebSocket. Současně se do konzole vypíše čas a obsah odeslané zprávy.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

updateChart()

function updateChart

(

value

)

Přidá novou hodnotu do hlavního QuickChart grafu a aktualizuje jeho vykreslení.

Funkce vloží novou hodnotu do datasetu s indexem 0 (hlavní lineární průběh) a následně zavolá quickchart.update(), čímž se graf okamžitě překreslí.

Parametry

[in]

value

Číselná hodnota, která bude přidána do grafu.

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

updateProgressBar()

function updateProgressBar

(

value

)

Aktualizuje vizuální stav progress baru na stránce.

Funkce nastaví šířku a obsah elementu s ID "progress-bar" podle zadané hodnoty. Hodnota se předává v procentech a zobrazí se také přímo uvnitř progress baru.

Parametry

[in]

value

Číslo představující procentuální pokrok (0-100).

Návratová hodnota

void Funkce nevrací žádnou hodnotu.

Dokumentace proměnných

A

const A = document.getElementById('A')

Aref

const Aref = document.getElementById('Aref')

Astate

const Astate = document.getElementById('Astate')

chartV1

ctxV1 D renderovací kontext canvas prvku s ID chartV1

Inicializační hodnota:

= new Chart(ctxV1, {
    type: 'line',
    data: { labels: [], datasets: [{ label: 'V1', data: [], borderColor: 'red', borderWidth: 1, pointRadius: 0 }, { label: 'V2', data: [], borderColor: 'blue', borderWidth: 1, pointRadius: 0 }] },
    options: { responsive: true },
})

Inicializuje graf pro vykreslování dvou napěťových průběhů (V1 a V2).

Tento graf zobrazuje dvě datové řady:

• Dataset "V1" (červená křivka)
• Dataset "V2" (modrá křivka)

Osa X používá textové/číselné popisky dle labels. Oba datasety jsou vykresleny jako spojnicový graf bez viditelných bodů (pointRadius = 0).

Graf je responzivní a přizpůsobuje se velikosti okna.

chartX

const chartX

Inicializační hodnota:

= new Chart(ctxX, {
    type: 'line',
    data: { labels: [], datasets: [{ label: 'X', data: [], borderColor: 'green', borderWidth: 1, pointRadius: 0 }, {
              type: 'scatter',
              label: 'Points',
              data: [],
              backgroundColor: 'red',
              pointRadius: 5,
              showLine: false
            }] },
    options: { responsive: true, 
            scales: {
            x: { type: 'linear', position: 'bottom' },
            y: { beginAtZero: false, reverse: true }
        } },
})

closeBtn

const closeBtn = document.querySelector("#close-btn")

colorDanger

const colorDanger

Inicializační hodnota:

= "#ff7782"
 
 
let dataBuffer = []

colorSuccess

const colorSuccess = "#41f1b6"

ctx1

const ctx1 = document.getElementById('quickChart').getContext('2d')

ctxV1

const ctxV1 = document.getElementById('chartV1').getContext('2d')

ctxX

const ctxX = document.getElementById('chartX').getContext('2d')

currentIP

var currentIP = window.location.hostname

dataV1

let dataV1 = []

dataV2

let dataV2 = []

dataX

let dataX = []

develbtn

const develbtn = document.querySelector("#develbtn")

develbtn2

const develbtn2 = document.querySelector("#develbtn2")

develCalibration

const develCalibration = document.querySelector("#develCalibration")

develConfig

const develConfig = document.querySelector("#develConfig")

elem

var elem = document.documentElement

espConfigBtn

const espConfigBtn = document.querySelector("#espconfigbtn")

espResetbtn

const espResetbtn = document.querySelector("#esprebootbtn")

labels

let labels = []

lparamsbutton

const lparamsbutton = document.querySelector("#lparamsbtn")

menuBtn

const menuBtn = document.querySelector("#menu-btn")

qR

const qR = document.getElementById('qR')

qRref

const qRref = document.getElementById('qRref')

qRstate

const qRstate = document.getElementById('qRstate')

quickBtn

const quickBtn = document.querySelector("#quickButton")

quickchart

const quickchart

Inicializační hodnota:

= new Chart(ctx1, {
    type: 'line',
    data: { labels: [], datasets: [{ label: 'X', data: [], borderColor: 'green', borderWidth: 1, pointRadius: 0 }, {
              type: 'scatter',
              label: 'Points',
              data: [],
              backgroundColor: 'red',
              pointRadius: 5,
              showLine: false
            }] },
    options: { responsive: true, 
            scales: {
            x: { type: 'linear', position: 'bottom' },
            y: { beginAtZero: false, reverse: true }
        } },
})

refparamsbutton

const refparamsbutton = document.querySelector("#refparamsbtn")

sD

const sD = document.getElementById('sD')

sDref

const sDref = document.getElementById('sDref')

sDstate

const sDstate = document.getElementById('sDstate')

sH

const sH = document.getElementById('sH')

sHref

const sHref = document.getElementById('sHref')

sHstate

const sHstate = document.getElementById('sHstate')

sideMenu

const sideMenu = document.querySelector("aside")