22. fejezet – HMI — CODESYS Visualization és WebVisu

Kezelőfelület böngészőben — és két olyan tanulság, amelyet a látványos felület mögött könnyű elfelejteni: a biztonság és a frissítési idő.

Ebben a fejezetben
  1. 22.1 HMI és SCADA
  2. 22.2 A vizualizációs objektum
  3. 22.3 Elemek és változók összekötése
  4. 22.4 A WebVisu bekapcsolása
  5. 22.5 Elérés böngészőből
  6. 22.6 Méretezés
  7. 22.7 Biztonság — kötelező alfejezet
  8. 22.8 A frissítési gyakoriság és a PLC-ciklus
  9. 22.9 Miért nem szabad biztonsági funkciót HMI-re bízni?
  10. 22.10 Gyakorlat: kezelőfelület a záróprojekthez
  11. Összefoglalás
  12. Gyakorlatok
  13. Ellenőrző kérdések
  14. Tudáspróba
  15. A fejezet forrásai

A CC100-nak nincs beépített kijelzője (7. fejezet): LED-jei vannak, képernyője nincs. A szakképesítés viszont HMI-t kér, és a projektfeladat kifejezetten „HMI kezelését igénylő” vezérlőprogramot vár el.

A megoldás a WebVisu: a kezelőfelület a vezérlőben fut, és böngészőből érhető el. Nem kell külön HMI-panelt venni — a saját laptopod vagy telefonod a kijelző.

22.1 HMI és SCADA

Először tisztázzuk a fogalmakat — a 19. fejezet automatizálási piramisa alapján.

HMI SCADA
Mit lát? egy berendezést több vezérlő adatait
Hol van a piramison? az 1. szint mellett a 2. szinten4
Meghatározás egy gép kezelőfelülete „központosított figyelőrendszerek, amelyek több különböző vezérlőtől gyűjtenek adatot”4

A különbség tehát nem a képernyő méretében van, hanem abban, hány vezérlőt lát.

💡 A WebVisu hova tartozik?

A WebVisu HMI: egyetlen vezérlő felülete, amelyet az a vezérlő szolgál ki. Ha több gép adatait kellene egy helyen látni, az már SCADA-feladat, és más eszközt kíván.

22.2 A vizualizációs objektum

„Az objektum egyetlen vizualizációt képvisel.”3

A vizualizációs objektum beilleszthető egy alkalmazás alá, projektszinten a gyökér alá, vagy közvetlenül POU-kba is.3 Szerkesztéshez az eszközfában vagy a POU-nézetben duplán kell kattintani rajta.3

[ Képernyőkép-helyőrző: Képernyőkép: a vizualizációszerkesztő a Toolbox elemkészletével és a Properties ablakkal. ]
22.1. ábra. A vizualizációszerkesztő.

22.3 Elemek és változók összekötése

Ez a HMI-készítés lényege — és nem a rajzolás.

Minden elemnek tulajdonságcsoportjai vannak. Egy nyomógombnál például:5

Csoport Mire való?
Element name „egyedi nevek hozzárendelése, hogy az elemek gyorsabban megtalálhatók legyenek”
Position X, Y koordináták, szélesség és magasság képpontban
Colors normál szín, riasztási szín, átlátszóság, színátmenet
Texts a felirat és a buboréksúgó
State variables a láthatóság és a kezelhetőség vezérlése változóval
Button state variable a lenyomott/felengedett állapot ábrázolása
Color variables a színek futásidejű vezérlése
Blinking villogás megadott időközzel
Input configuration egér- és billentyűesemények kezelése
Permissions hozzáférési jogok
Elem és változó összekötése A vizualizációs elem INDÍTÁS nyomógomb (Button) Tulajdonságcsoportok Element name, Position Colors, Texts State variables Invisible (BOOL) Deactivate inputs (BOOL) Button state variable Input configuration esemény → művelet Color variables, Blinking… A programváltozó PLC_PRG.bIndit példányútvonalként adjuk meg Ez a HMI-készítés lényege Nem a rajzolás — hanem az, hogy melyik tulajdonsághoz melyik változót kötöd. A megjelenítéshez állapotváltozó, a kezeléshez bemeneti konfiguráció kell.
22.2. ábra. Az elem tulajdonságain keresztül kötjük össze a felületet a programmal.

A State variables csoport két tulajdonsága:5

Tulajdonság Mit csinál?
Invisible „változó (BOOL) az elem láthatóságának kapcsolására”
Deactivate inputs „változó (BOOL) az elem kezelhetőségének kapcsolására”

A változókat példányútvonalként adjuk meg — például PLC_PRG.bIsVisible.5

💡 A `Deactivate inputs` a legjobb barátod

Ezzel valósítható meg az, hogy egy gomb csak akkor legyen nyomható, amikor szabad. Például: az „Indítás” gomb legyen kezelhetetlen, amíg a védőajtó nyitva van.

Ez a felület szintjén valósít meg reteszelést — de figyelem: ez csak kényelmi és kezelési szintű védelem, nem biztonsági (22.7 és 22.9).

A kezelés konfigurálása az Input configuration tulajdonságcsoportban történik.6 Itt kell bemeneti eseményt (például OnMouseClick) és hozzá műveletet választani; a lehetséges műveletek között szerepel például az ST-kód végrehajtása.6

⚠️ Amit a könyv nem sorol fel tételesen

A bemeneti események és a választható műveletek teljes listáját a felhasznált gyártói lap nem közli. A könyv ezért csak azt állítja, amit a forrás kimond — a teljes listát a saját CODESYS-verziód Input configuration párbeszédpaneljén találod meg.

Ez egyébként jó gyakorlat: nyisd meg a panelt, és nézd végig, mi minden van benne. Sokkal többet ér, mint egy elavult listát megtanulni.

22.4 A WebVisu bekapcsolása

Előfeltétel:1 a projektben legyen már futtatható vizualizáció, a Visualization Manager task-konfigurációjával.

A lépéssor:1

  1. WebVisu objektum hozzáadása: a Visualization Manageren jobb gomb → Add Object → WebVisu Object.
  2. Elnevezés — például webvisu_app.
  3. Beállítás a WebVisu szerkesztőben: - Start visualization: a kezdőképernyő vizualizációjának neve; - Name of .htm file: a weblap neve.
  4. Aktiválás: a Show Used Visualizations gombbal ellenőrizni, hogy a vizualizáció engedélyezve van a WebVisu változathoz.
  5. Eszközbeállítás: a kommunikációs beállítások megadása.
  6. Kiadás: fordítás, letöltés, indítás olyan futtatókörnyezeten, amely webkiszolgálót és WebVisu-t támogat.

A WebVisu objektum beállításai:2

Beállítás Jelentés
Start visualization „annak a vizualizációnak a neve, ahol az indulás megjelenik CODESYS WebVisu-ként”
Name of .htm file a weblap elérési alapja
Update rate (ms) a böngészőben történő frissítés gyakorisága
Default communication buffer size „alapértelmezett méret a kommunikációs pufferhez (bájtban). Meghatározza a webkliens és a webkiszolgáló közötti adatátvitelhez rendelkezésre álló maximális memóriát.”

22.5 Elérés böngészőből

Az URL általános alakja:1

http://<a webkiszolgáló IP-címe>:<a webkiszolgáló portja>/<a HTM fájl neve>

A gyártói alapértelmezett példa: http://localhost:8080/webvisu_app.htm.1

Böngésző-követelmény:1 a böngészőnek támogatnia kell a JavaScriptet és a HTML5 canvas-t; a súgó Edge-et, Chrome-ot vagy Firefoxot javasol.

És egy fontos működési tudnivaló:1 a webkiszolgáló automatikusan elindul, amikor egy WebVisu-konfigurációval rendelkező alkalmazás fut.

⚠️ A port platformfüggő

Az alapértelmezett példa a 8080-as portot használja, de a gyártói súgó megemlíti, hogy például BeagleBone Black rendszereken 9090.2 Vagyis a port eszközfüggő.

Hogy a CC100 WebVisu-ja melyik porton érhető el, és hogy a WBM-ben kell-e a webkiszolgálót külön engedélyezni, azt a felhasznált források nem mondják ki.

Gyakorlati lépés: próbáld a 8080-at a vezérlő IP-címén, és ha nem megy, nézd meg a WBM Configuration → Network Services oldalát (9. fejezet). Jegyezd fel, amit találsz.

[ Képernyőkép-helyőrző: Képernyőkép: a WebVisu felület böngészőben, a CC100 IP-címén megnyitva. ]
22.3. ábra. A kezelőfelület böngészőben.

22.6 Méretezés

A felület alkalmazkodhat a böngészőablak méretéhez:2

Mód Viselkedés
Fixed a vizualizáció a beállított Client height/width méretet tartja
Isotropic „a vizualizáció mérete a böngésző méreteihez igazodik, az arányok megtartásával”
Anisotropic teljesen a böngésző méreteihez alkalmazkodik, az arányok megtartása nélkül

További megjelenítési lehetőségek:2 Antialiased Drawing (élsimított rajzolás), szövegbevitel érintőképernyős billentyűzetről vagy hagyományos billentyűzetről, és: „érintőképernyős eszközökön az érintési események egéreseményként kerülnek kezelésre”.

💡 Melyiket válaszd?

Ha a felületet telefonon is nézni fogják, az Isotropic a jó választás: alkalmazkodik, de nem torzít. A Fixed akkor jó, ha pontosan tudod, mekkora képernyőn fog futni — például egy szekrénybe épített panelen.

22.7 Biztonság — kötelező alfejezet

Ez a fejezet legfontosabb része, és a legkönnyebben elfelejtett.

A gyártói súgó két dolgot határozottan javasol, mielőtt a felületet közzéteszik:1

  1. jelszavas védelem;
  2. HTTPS, SSL/TLS titkosítással.
⚠️ Gondold végig, mit jelent ez

A WebVisu alapértelmezés szerint elérhető mindenkinek, aki a hálózaton eléri a vezérlőt — és a felületről a gép vezérelhető.

Ez nem elméleti kockázat. Egy gyári hálózaton egy jelszó nélküli WebVisu közvetlen gépindítási lehetőséget ad bárkinek, aki rátalál. Nem kell hozzá hacker: elég egy böngésző és az IP-cím.

Kötelező ellenőrzőlista, mielőtt a felület elhagyja a laborasztalt:

  • [ ] jelszavas védelem bekapcsolva;
  • [ ] HTTPS beállítva;
  • [ ] a WBM gyári jelszava lecserélve (9. fejezet);
  • [ ] átgondolva: kinek kell hozzáférnie, és mihez.

(A jelszó és a HTTPS ajánlása a gyártó saját szövege; a fenti következtetés a könyv indokolt megfogalmazása.)

💡 A `Permissions` tulajdonságcsoport

A vizualizációs elemeknek van Permissions (hozzáférési jogok) tulajdonságcsoportja is.5 Ezzel elemenként szabályozható, ki mit használhat — például a kezelő indíthat és leállíthat, de a paramétereket csak a karbantartó módosíthatja.

Ez a felület biztonságának második rétege, a bejelentkezés után.

22.8 A frissítési gyakoriság és a PLC-ciklus

Ez a fejezet második nagy tanulsága, és szorosan összefügg az elsővel.

Hogyan működik a WebVisu? PLC-program ciklikusan fut pl. 10 ms (task-intervallum) webkiszolgáló a vezérlőben automatikusan elindul, ha WebVisu-konfiguráció van böngésző JavaScript + HTML5 canvas PC, tablet vagy telefon változók parancsok HTTP kattintás Update rate (ms) A HMI lassabban frissül, mint ahogy a program fut Amit a képernyőn látsz, az nem feltétlenül a legfrissebb érték — és nem is minden köztes állapotot látsz. Ezért nem szabad biztonsági funkciót HMI-re bízni.
22.4. ábra. A WebVisu működése. A frissítési gyakoriság független a PLC ciklusidejétől.

A PLC-program milliszekundumos ciklusidővel fut (8. fejezet). A WebVisu felülete viszont az Update rate (ms) beállítás szerint frissül2 — ez külön paraméter.

⚠️ Amit a képernyőn látsz, nem feltétlenül a legfrissebb

Két következmény:

  1. A HMI lemarad. Ha a task 10 ms-os, a HMI frissítése pedig 200 ms, akkor a képernyőn látott érték akár 20 ciklussal korábbi is lehet.
  2. Nem látod az összes köztes állapotot. Egy 30 ms-ig tartó jelimpulzus a képernyőn egyszerűen nem jelenik meg — a frissítések között történt.

Ez nem hiba, hanem a rendszer természete. De tudni kell róla — különösen hibakeresésnél (23. fejezet), amikor a HMI-n látott érték alapján próbálsz következtetni.

22.9 Miért nem szabad biztonsági funkciót HMI-re bízni?

Most rakjuk össze, amit a 24. fejezetből és az előző alfejezetből tudunk.

Ok Magyarázat
Késleltetés a felület az Update rate szerint frissül, nem ciklusonként (22.8)
Hálózatfüggés a kapcsolat megszakadhat; a böngésző lefagyhat; a Wi-Fi eldobhat
Nincs tanúsítva a WebVisu nem tanúsított biztonsági eszköz (24. fejezet)
Nem redundáns egycsatornás, önellenőrzés nélküli út (24. fejezet, kategóriák)
Elérhetőség egy vészleállításnak „mindenkor rendelkezésre kell állnia” (24. fejezet) — egy böngészőablak nem ilyen
⚠️ A könyv szabálya, most már negyedszer

Biztonsági funkciót nem valósítunk meg szoftverben — sem a PLC-programban (24. fejezet), sem a kezelőfelületen.

A vészleállítás hardveres: vörös gomb sárga háttéren, mechanikus reteszeléssel, biztonsági relével, a vezérlőtől függetlenül (24. fejezet). A HMI jelezheti a vészállapotot — de nem válthatja ki és nem oldhatja fel.

Egy „VÉSZLEÁLLÍTÁS” feliratú gomb a képernyőn veszélyesebb, mint a semmi: azt a látszatot kelti, hogy van vészleállítás.

22.10 Gyakorlat: kezelőfelület a záróprojekthez

Nézzünk egy tipikus, teljes kezelőfelületet — ez lesz a 26. fejezet záróprojektjének HMI-je.

Amit meg kell jelenítenie:

Terület Elemek
Üzemmód kézi / automata választó, aktuális üzemmód kijelzése
Kezelés Indítás, Leállítás, Nyugtázás gomb
Állapot a berendezés futásjelzése, az aktuális lépés (SFC/állapotgép, 15. fejezet)
Adatok darabszám, üzemóra, mért analóg értékek
Riasztás aktív hibák listája, színes jelzéssel
Rendszer a programverzió kijelzése (25. fejezet)

Tervezési szempontok:

💡 Négy szabály egy használható felülethez

1. A legfontosabb információ legyen a legnagyobb. A kezelő 3 méterről is lássa, hogy megy-e a gép.

2. Szín önmagában ne hordozzon információt. A színvakság gyakoribb, mint hinnéd — a szín mellé mindig tegyél szöveget vagy alakot is.

3. A veszélyes műveletet legyen nehéz véletlenül kiváltani. A Deactivate inputs tulajdonsággal (22.3) tiltsd le a gombot, amikor nem szabad használni.

4. Az állapot mindig látszódjon. Egy jó felületen a kezelő nem kérdezi meg, mi történik — látja.

💡 A programverzió kijelzése

A 25. fejezetből: a projektinformációban beállított verziószám a generált POU-kon keresztül a programból kiolvasható, és megjeleníthető a felületen. Így a kezelő és a szerviz mindig látja, melyik programverzió fut.

Ez látványos plusz a vizsgaprojektben — és az ipari gyakorlatban komoly érték.

Összefoglalás

  • A HMI egy gép kezelőfelülete; a SCADA több vezérlő adatait gyűjti (2. szint).
  • A CC100-nak nincs kijelzője, ezért a HMI böngészőben, WebVisu formájában valósul meg.
  • A vizualizációs objektum alkalmazás alá, gyökér alá vagy POU-ba illeszthető.
  • A HMI-készítés lényege a változóhoz kötés: az elem tulajdonságcsoportjaiban adjuk meg a változókat, példányútvonalként (PLC_PRG.bIndit).
  • A State variables csoportban az Invisible és a Deactivate inputs tulajdonság BOOL változóval vezérli a láthatóságot és a kezelhetőséget.
  • A kezelés az Input configuration csoportban konfigurálható: esemény → művelet.
  • WebVisu bekapcsolása: WebVisu objektum a Visualization Manager alá, Start visualization és Name of .htm file beállítása, majd letöltés webkiszolgálót támogató futtatókörnyezetre.
  • Elérés: http://<IP>:<port>/<htm fájl>; a port platformfüggő (a példa 8080).
  • Méretezés: Fixed, Isotropic (arányőrző), Anisotropic.
  • Biztonság: a gyártó jelszavas védelmet és HTTPS-t javasol. Jelszó nélkül bárki, aki eléri a vezérlőt, vezérelheti a gépet.
  • Az Update rate független a PLC ciklusidejétől: a HMI lemarad, és nem látod az összes köztes állapotot.
  • Biztonsági funkciót HMI-re bízni nem szabad. A képernyőn lévő „vészleállítás” gomb veszélyesebb, mint a semmi.

Gyakorlatok

🛠️ 22.1. feladat — Az első vizualizáció

Készíts vizualizációt egy nyomógombbal és egy lámpával. A gombot kösd a PLC_PRG.bIndit változóhoz (Input configuration), a lámpa színét pedig a PLC_PRG.bMotor állapotához. Futtasd szimulációban, és próbáld ki. Jegyezd fel, melyik tulajdonságcsoportban találtad meg a szükséges beállításokat.

🛠️ 22.2. feladat — Kapcsold be a WebVisu-t

Kapcsold be a WebVisu-t a 22.4. alfejezet lépéssora szerint, töltsd le a CC100-ra, és nyisd meg böngészőből. Jegyezd fel a pontos URL-t, amellyel sikerült — az IP-címet, a portot és a fájlnevet. Ha a 8080-as port nem működött, írd le, hogyan találtad meg a helyeset.

Utána próbáld ki telefonról is, ugyanazon a hálózaton.

🛠️ 22.3. feladat — Mérd meg a késleltetést

Írj egy programot, amely egy számlálót léptet minden ciklusban, és jelenítsd meg az értékét a WebVisu-n. Állítsd az Update rate értékét sorban 100, 500 és 1000 ms-ra, és minden esetben figyeld meg, mennyit ugrik a kijelzett szám két frissítés között.

Utána tegyél a programba egy 30 ms-ig tartó impulzust, és nézd meg: látszik-e a felületen? Írd le, mit tanultál ebből a hibakeresésre nézve.

🛠️ 22.4. feladat — Biztonság

Kapcsold be a jelszavas védelmet a WebVisu-n, és próbáld ki, hogy jelszó nélkül tényleg nem érhető el. Utána vizsgáld meg a Permissions tulajdonságcsoportot: hozz létre két „szerepkört”, és állítsd be, hogy az indítógombot mindkettő, a paraméterbeviteli mezőt viszont csak az egyik használhassa.

Végül: nézd meg a Deactivate inputs tulajdonsággal, hogyan tilthatod le az „Indítás” gombot, amíg egy ajtójelzés aktív.

🛠️ 22.5. feladat — Teljes kezelőfelület

Készítsd el a 22.10. alfejezet szerinti teljes kezelőfelületet a saját projektedhez: üzemmód, kezelőgombok, állapotjelzés, adatok, riasztások és a programverzió. Tartsd be a négy tervezési szabályt.

Utána add oda valakinek, aki nem ismeri a rendszert, és ne magyarázz semmit. Kérd meg, hogy indítsa el a gépet. Ha nem sikerül neki, a felület nem elég egyértelmű.

Ellenőrző kérdések

  1. Mi a különbség a HMI és a SCADA között?
  2. Miért WebVisu-t használunk a CC100-hoz?
  3. Hova illeszthető be a vizualizációs objektum?
  4. Hogyan adjuk meg a változókat egy elem tulajdonságában?
  5. Mit csinál az Invisible és a Deactivate inputs tulajdonság?
  6. Hol konfigurálható az, hogy egy gomb megnyomása mit tegyen?
  7. Sorold fel a WebVisu bekapcsolásának lépéseit!
  8. Mi az elérési URL általános alakja?
  9. Miért nem lehet egy fix portszámot megadni a könyvben?
  10. Mi a három méretezési mód közötti különbség?
  11. Mit javasol a gyártó a felület közzététele előtt, és miért?
  12. Mi történhet egy jelszó nélküli WebVisu-val egy üzemi hálózaton?
  13. Hogyan viszonyul az Update rate a PLC ciklusidejéhez, és mi ennek a két következménye?
  14. Adj négy indokot arra, miért nem szabad biztonsági funkciót HMI-re bízni!

Tudáspróba

Válaszd ki az egyetlen helyes választ!

1. A SCADA az automatizálási piramis melyik szintjén van? a) 0. b) 1. c) 2. d) 4.

2. A vizualizációs objektum: a) alkalmazás alá, gyökér alá vagy POU-ba is; b) csak alkalmazás alá illeszthető; c) csak a gyökér alá; d) nem illeszthető sehova.

3. A változókat az elem tulajdonságában így adjuk meg: a) csak a változó nevével; b) példányútvonalként (pl. PLC_PRG.bIndit); c) a memóriacímmel; d) sorszámmal.

4. A Deactivate inputs tulajdonság: a) elrejti az elemet; b) a színét változtatja; c) törli az elemet; d) a kezelhetőségét kapcsolja.

5. A WebVisu elérési URL-jének általános alakja: a) http://<IP>:<port>/<htm fájl neve> b) http://<IP>/<változónév> c) ftp://<IP>/webvisu d) modbus://<IP>:502

6. A WebVisu alapértelmezett példaportja: a) 80 b) 502 c) 8080 d) 9090

7. Az arányokat megtartó méretezési mód: a) Fixed b) Isotropic c) Anisotropic d) Antialiased

8. A gyártó ezt javasolja a felület közzététele előtt: a) semmit; b) a port átállítását; c) csak nagyobb betűméretet; d) jelszavas védelmet és HTTPS-t.

9. Az Update rate: a) független a PLC ciklusidejétől; b) megegyezik a PLC ciklusidejével; c) mindig 1 ms; d) nem állítható.

10. Vészleállító gomb a HMI-n: a) elfogadható megoldás; b) veszélyesebb, mint a semmi, mert a védelem látszatát kelti; c) kötelező; d) csak HTTPS-sel megengedett.

A megoldókulcs a B függelékben található.

A fejezet forrásai

  1. CODESYS Online Help: Run as WebVisu (V4.10.0.0). CODESYS GmbH. (2026-07-29) ↩↩↩↩↩↩↩

  2. CODESYS Online Help: Object: CODESYS WebVisu (V4.10.0.0). CODESYS GmbH. (2026-07-29) ↩↩↩↩↩

  3. CODESYS Online Help: Object: Visualization (V4.10.0.0). CODESYS GmbH. (2026-07-29) ↩↩↩

  4. Glossary – Field Level. Hilscher Gesellschaft für Systemautomation mbH. (2026-07-29) A SCADA meghatározása és az automatizálási szintek. ↩↩

  5. CODESYS Visualization Help: Visualization Element: Button (V4.10.0.0). CODESYS GmbH. (2026-07-31) A tulajdonságcsoportok és a State variables. ↩↩↩↩

  6. CODESYS Visualization Help: Configuring User Inputs for Visualization Elements (V4.10.0.0). CODESYS GmbH. (2026-07-31) ↩↩

Mennyire volt hasznos ez a fejezet?

Még nincs értékelés.