{"id":12560,"date":"2021-06-30T11:59:41","date_gmt":"2021-06-30T09:59:41","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=12560"},"modified":"2023-05-04T14:48:58","modified_gmt":"2023-05-04T12:48:58","slug":"tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/","title":{"rendered":"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6"},"content":{"rendered":"\n<div class=\"dowiesz-sie\">\n<h3>Z tego artyku\u0142u dowiesz si\u0119:<\/h3>\n<ul class=\"bulleted\">\n<li>jak stworzy\u0107 podstawow\u0105 wizualizacj\u0119 w oprogramowaniu Codesys,\n<\/li>\n<li>jak korzysta\u0107 z najbardziej popularnych funkcji wizualizacji,<\/li>\n<li>jak uruchomi\u0107 wizualizacj\u0119 na przegl\u0105darce internetowej.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Zapraszamy na kolejny odcinek kursu programowania w Codesys od podstaw. Tym razem skupimy si\u0119 na tworzeniu wizualizacji w \u015brodowisku Codesys. Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie, poniewa\u017c korzystasz z jednej, centralnej bazy zmiennych.<\/p>\n\n\n\n<div class=\"dowiesz-sie\" style=\"margin-top:40px; margin-bottom:40px\">\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/kurs-programowania-w-codesys\/\"><h3>Kurs programowania w Codesys<\/h3><\/a>\n\n<h4 style=\"font-size:20px; margin-top:25px;\">Cz\u0119\u015b\u0107 I \u2013 Podstawowe funkcjonalno\u015bci \u015brodowiska Codesys<\/h4>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-stworzyc-program-pierwsze-kroki-w-codesys-kurs-programowania-w-codesys-odc-1\/\">1. Pierwsze kroki w Codesys. Jak stworzy\u0107 program?<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/pierwsze-podlaczenie-i-przygotowanie-codesys-do-pracy-ze-sterownikiem-plc-kurs-programowania-w-codesys-odc-2\/\">2. Pierwsze pod\u0142\u0105czenie i przygotowanie Codesys do pracy ze sterownikiem PLC.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jezyk-drabinkowy-ld-kurs-programowania-w-codesys-odc-3\/\">3. J\u0119zyk drabinkowy (LD).<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/typy-danych-w-codesys-rodzaje-zmiennych-sposoby-ich-tworzenia-kurs-programowania-w-codesys-odc-4\/\">4. Typy danych w Codesys, rodzaje zmiennych, sposoby ich tworzenia.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jezyk-schematow-blokowych-fbd-kurs-programowania-w-codesys-odc-5\/\">5. J\u0119zyk schemat\u00f3w blokowych (FBD).<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/\">6. Tworzenie podstawowej wizualizacji HMI.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jezyk-strukturalny-st-kurs-programowania-w-codesys-odc-7\/\">7. J\u0119zyk strukturalny (ST).<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/diagnostyka-w-codesys-jak-sprawdzac-dzialanie-oprogramowania-i-sterownika-kurs-programowania-w-codesys-odc-8\/\">8. Diagnostyka w Codesys \u2013 jak sprawdza\u0107 dzia\u0142anie oprogramowania i sterownika?<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jezyk-blokow-funkcyjnych-cfc-kurs-programowania-w-codesys-odc-9\/\">9. J\u0119zyk blok\u00f3w funkcyjnych (CFC).<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/funkcja-blok-funkcyjny-program-zmodyfikuj-program-w-codesys-dla-lepszej-funkcjonalnosci-kurs-programowania-w-codesys-odc-10\/\">10. Funkcja, blok funkcyjny, program \u2013 zmodyfikuj program w Codesys dla lepszej funkcjonalno\u015bci.<\/a><br\/>\n<h4 style=\"font-size:20px; margin-top:25px;\">Cz\u0119\u015b\u0107 II \u2013 Zaawansowane funkcje i mo\u017cliwo\u015bci \u015brodowiska Codesys<\/h4>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-mqtt-jak-skonfigurowac-w-codesys-kurs-programowania-w-codesys-odc-11\/\">11. Komunikacja MQTT \u2013 jak skonfigurowa\u0107 w Codesys?<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-ethercat-konfiguracja-i-przykladowa-aplikacja-kurs-programowania-w-codesys-odc-12\/\">12. Komunikacja EtherCAT \u2013 konfiguracja i przyk\u0142adowa aplikacja.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/softmotion-synchronizacja-serwonapedow-przy-pomocy-sterownika-plc-kurs-programowania-w-codesys-odc-13\/\">13. Softmotion \u2013 synchronizacja serwonap\u0119d\u00f3w przy pomocy sterownika PLC.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-modbus-rtu-i-tcp-ip-w-srodowisku-codesys-kurs-programowania-w-codesys-odc-14\/\">14. Komunikacja Modbus RTU i TCP\/IP w \u015brodowisku Codesys.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-projektow-w-codesys-ze-sterownikami-bezpieczenstwa-safety-architektura-systemu-bezpieczenstwa-kurs-programowania-w-codesys-odc-15\/\">15. Tworzenie projekt\u00f3w w Codesys ze sterownikami bezpiecze\u0144stwa Safety: architektura systemu bezpiecze\u0144stwa.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/programowanie-sterownika-bezpieczenstwa-w-codesys-kurs-programowania-w-codesys-odc-16\/\">16. Programowanie sterownika bezpiecze\u0144stwa w Codesys.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/integracja-sterownika-plc-z-systemem-scada-w-codesys-kurs-programowania-w-codesys-odc-17\/\">17. Integracja sterownika PLC z systemem SCADA w Codesys.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/konfiguracja-maszyny-cnc-z-wykorzystaniem-sterownika-plc-obsluga-g-code-kurs-programowania-w-codesys-odc-18\/\">18. Konfiguracja maszyny CNC z wykorzystaniem sterownika PLC \u2013 obs\u0142uga G-Code.<\/a><br\/>\n\n<h4 style=\"font-size:20px; margin-top:25px;\">Dodatkowe materia\u0142y i lekcje dla kursant\u00f3w:<\/h4>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-stworzyc-wirtualny-serwonaped-i-przetestowac-jego-dzialanie-w-srodowisku-codesys-pierwsze-kroki\/\" target=\"_blank\" rel=\"noopener\">1. Jak stworzy\u0107 wirtualny serwonap\u0119d w Codesys? Instrukcja krok po kroku.<\/a><br\/>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/przykladowa-aplikacja-codesys-w-jezyku-st-i-ld-napelnianie-i-oproznianie-zbiornikow-wraz-z-alarmowaniem\/\" target=\"_blank\" rel=\"noopener\">2. Przyk\u0142adowa aplikacja Codesys w j\u0119zyku ST i LD: nape\u0142nianie i opr\u00f3\u017cnianie zbiornik\u00f3w wraz z alarmowaniem.<\/a><br\/>\n\n<h4 style=\"font-size:20px; margin-top:25px;\">Najcz\u0119\u015bciej zadawane pytania:<\/h4>\n\n<a href=\"https:\/\/www.astor.com.pl\/oferta\/automatyzacja\/sterowanie\/sterowniki-plc\/astraada-one-modular.html#faq\" target=\"_blank\" rel=\"noopener\">Sprawd\u017a odpowiedzi na najcz\u0119\u015bciej zadawane pytania dotycz\u0105ce \u015brodowiska Codesys.<\/a><br\/>\n\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Jest to bardzo wygodne rozwi\u0105zanie, kt\u00f3re radykalnie przyspiesza proces integracji maszyny\/procesu, poniewa\u017c nie wymaga konfiguracji komunikacji na linii sterownik PLC&nbsp; &#8211; HMI.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1339\" height=\"799\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-840x501.jpg\" alt=\"\" class=\"wp-image-12561\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-840x501.jpg 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-768x458.jpg 768w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1.jpg 1339w\" sizes=\"auto, (max-width: 1339px) 100vw, 1339px\" \/><figcaption class=\"wp-element-caption\"><em>Wizualizacja webowa w sterowniku Astraada One, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Dodatkowym plusem takiego rozwi\u0105zania jest fakt, \u017ce zar\u00f3wno aplikacja steruj\u0105ca, jak i wizualizacja zapisane s\u0105 w pami\u0119ci sterownika PLC. Jak\u0105 niesie to korzy\u015b\u0107? Przyk\u0142adowo, korzystaj\u0105c z sterownika Astraada One w maszynie, mo\u017cesz zrezygnowa\u0107 z u\u017cycia panelu\/terminalu HMI. Dlaczego? Poniewa\u017c zapisana w jego pami\u0119ci wizualizacja mo\u017ce zosta\u0107 uruchomiona poprzez dowoln\u0105 przegl\u0105dark\u0119 webow\u0105, a wi\u0119c na komputerze, smartfonie czy tablecie. Brzmi ciekawie, prawda?<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">Przygotowania do tworzenia wizualizacji HMI w Codesys<\/h1>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Wizualizacja HMI w Codesys to kolokwialnie m\u00f3wi\u0105c \u201etemat-rzeka\u201d. Wynika to z faktu, \u017ce Codesys oferuje spor\u0105 gam\u0119 narz\u0119dzi i mo\u017cliwo\u015bci, tak wi\u0119c przy tworzeniu wizualizacji ogranicza Ci\u0119 g\u0142\u00f3wnie wyobra\u017ania.<\/p>\n\n\n\n<p>W tym odcinku zaczniesz od podstaw:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>stworzysz <strong>wizualizacj\u0119 HMI<\/strong>, kt\u00f3ra b\u0119dzie sk\u0142ada\u0107 si\u0119 z dw\u00f3ch ekran\u00f3w \u2013 powitalnego oraz operatorskiego; w ekranie operatorskim umie\u015bcisz troch\u0119 tekstu wst\u0119pu i przyciski umo\u017cliwiaj\u0105ce nawigacj\u0119 po wizualizacji,<\/li>\n\n\n\n<li>w oknie operatorskim umie\u015bcisz <strong>wykres zmiany zmiennej<\/strong>, a tak\u017ce niewielki <strong>system monitorowania i reagowania<\/strong> na zmiany tej zmiennej z komunikatem ostrzegaj\u0105cym przed przekroczeniem stanu krytycznego.<\/li>\n<\/ol>\n\n\n\n<p>Tak wi\u0119c do pracy! Prac\u0119 rozpocznij od przygotowania programu. B\u0119dziesz potrzebowa\u0107 zmiennej, kt\u00f3ra zmienia sw\u00f3j stan cyklicznie w p\u0119tli &#8211; licznika zliczaj\u0105cego ilo\u015b\u0107 tych zmian, kt\u00f3rego reset wyzwalany jest z op\u00f3\u017anieniem 4 sekund.<\/p>\n\n\n\n<p>Dodatkowo przyda si\u0119 zmienna, kt\u00f3ra poinformuje Ci\u0119 o przekroczeniu krytycznego stanu. Stanem krytycznym b\u0119dzie 5 cykli zmian. Program mo\u017cesz przygotowa\u0107 samodzielnie, na podstawie naszych poprzednich odcink\u00f3w lub skorzysta\u0107 z gotowej podpowiedzi, kt\u00f3r\u0105 umieszczamy tu\u017c poni\u017cej ????<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1238\" height=\"646\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_1.png\" alt=\"\" class=\"wp-image-12562\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_1.png 1238w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_1-840x438.png 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_1-768x401.png 768w\" sizes=\"auto, (max-width: 1238px) 100vw, 1238px\" \/><figcaption class=\"wp-element-caption\"><em>Przyk\u0142adowy program do wizualizacji HMI w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Jak dzia\u0142a nasza <em>podpowied\u017a<\/em>? Zmienna FLAGA_1 ulega cyklicznym zmianom stanu z 0 na 1 co 2 sekundy. Nast\u0119pnie licznik CTU_0 zlicza wszystkie stany wysokie zmiennej FLAGA_1. Licznik zosta\u0142 opatrzony przyciskiem RESET, kt\u00f3ry jest dodatkowo op\u00f3\u017aniony o 4 sekundy poprzez timer TON.<\/p>\n\n\n\n<p>Ostatnim elementem programu jest blok funkcyjny GE, kt\u00f3ry monitoruje stan licznika CTU_0 i je\u017celi przekroczy on 10, to wystawi zmienn\u0105 ALARM w stan wysoki. W programie jest te\u017c ostatnia ga\u0142\u0105\u017a, kt\u00f3ra neguje sygna\u0142 ALARM \u2013 dlaczego? Odpowied\u017a poznasz w dalszej cz\u0119\u015bci. Zmienna FLAGA_3 jest stale w\u0142\u0105czona w stan wysoki.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">Jak doda\u0107 wizualizacj\u0119 HMI do projektu w Codesys?<\/h1>\n\n\n\n<p>Skoro masz ju\u017c gotowy program, kt\u00f3ry chcesz zwizualizowa\u0107, rozbuduj projekt o elementy odpowiedzialne za wizualizacj\u0119.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"748\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1.gif\" alt=\"\" class=\"wp-image-12564\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie wizualizacji HMI do projektu w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"285\" height=\"338\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/2_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_2.png\" alt=\"\" class=\"wp-image-12563\"\/><figcaption class=\"wp-element-caption\"><em>Drzewko projektu rozbudowane o wizualizacj\u0119, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W drzewku projektu, opr\u00f3cz wizualizacji pojawi\u0142y si\u0119 3 dodatkowe obiekty. S\u0105 to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Visualization Manager<\/strong> \u2013 obiekt, w kt\u00f3rym mo\u017cesz zdefiniowa\u0107 takie parametry, jak np. u\u017cywany styl obiekt\u00f3w wizualizacji lub zdefiniowa\u0107 poziomy dost\u0119pu o danych okien wizualizacji.<\/li>\n\n\n\n<li><strong>TargetVisu<\/strong> \u2013 w tym okienku zdefiniujesz parametry u\u017cywanego panelu\/terminalu HMI; przyk\u0142adowo, dla sterownik\u00f3w Astraada One mo\u017cesz zdefiniowa\u0107 tutaj parametry <a href=\"https:\/\/www.astor.com.pl\/sklep\/panele-operatorskie\/astraada-one-terminal\/222002600.html\">terminalu operatorskiego ET2115<\/a>.<\/li>\n\n\n\n<li><strong>WebVisu <\/strong>\u2013 w tym okienku zdefiniujesz parametry wizualizacji webowej wy\u015bwietlanej w oknie przegl\u0105darki internetowej. Wi\u0119cej informacji na ten temat znajdziesz w dalszej cz\u0119\u015bci odcinka.<\/li>\n<\/ul>\n\n\n\n<p><strong>Visualization Manager w oprogramowaniu Codesys<\/strong><\/p>\n\n\n\n<p>Visualization Manager to centrum dowodzenia wizualizacj\u0105. W sekcji 1 zaznaczonej na rysunku poni\u017cej mo\u017cesz wybra\u0107 og\u00f3lny wygl\u0105d i motyw wizualizacji. W standardzie dost\u0119pne jest kilkana\u015bcie r\u00f3\u017cnych wariant\u00f3w \u2013 mo\u017cna tak\u017ce wgra\u0107 wi\u0119cej, ale to nie jest temat na dzisiaj \ud83d\ude09<\/p>\n\n\n\n<p>Sekcja 2 umo\u017cliwia wyb\u00f3r j\u0119zyka wizualizacji, czyli uwzgl\u0119dnienie (b\u0105d\u017a nie) znak\u00f3w specjalnych dla danego j\u0119zyka.<\/p>\n\n\n\n<p>Sekcja 3 umo\u017cliwia sterowanie niekt\u00f3rymi funkcjami, takimi jak np. multitouch.<\/p>\n\n\n\n<p>Dodatkowa Sekcja 4 daje Ci mo\u017cliwo\u015b\u0107 ograniczenia zu\u017cycia pami\u0119ci przez wizualizacj\u0119, a tak\u017ce ustawienia odno\u015bnie klient\u00f3w zalogowanych do wizualizacji jednocze\u015bnie.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"456\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_3-840x456.jpg\" alt=\"\" class=\"wp-image-12565\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_3-840x456.jpg 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_3-768x417.jpg 768w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_3.jpg 1035w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption class=\"wp-element-caption\"><em>Visualization Manager w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Visualization Manager ma tak\u017ce dodatkowe zaawansowane funkcje w zak\u0142adach powy\u017cej, takie jak dodawanie login\u00f3w i hase\u0142, zmiany odno\u015bnie komunikacji z wizualizacj\u0105 (czy ma to by\u0107 numad, klawiatura czy zewn\u0119trzne urz\u0105dzenie), a tak\u017ce zarz\u0105dzenie wszystkimi ekranami wizualizacji. Teraz, w zwi\u0105zku z podstawowym charakterem naszego przyk\u0142adu, pozostawiamy Managera w ustawieniach domy\u015blnych.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>TargetVisu w oprogramowaniu Codesys<\/strong><\/p>\n\n\n\n<p>Kolejnym elementem jest TargetVisu. Mo\u017cna to wprost wyt\u0142umaczy\u0107 jako \u201eurz\u0105dzenia wy\u015bwietlacza\u201d. W tym miejscu mo\u017cesz zdecydowa\u0107, kt\u00f3ry ekran to ekran startowy w <em>Start Visualization<\/em>, cz\u0119stotliwo\u015b\u0107 od\u015bwie\u017cania ekran\u00f3w, a tak\u017ce opcje skalowania i \u017ar\u00f3d\u0142o polece\u0144 zewn\u0119trznych.<\/p>\n\n\n\n<p>Domy\u015blnie TargetVisu ustawiony jest do automatycznego skalowania, tak wi\u0119c tutaj r\u00f3wnie\u017c mo\u017cesz pozostawi\u0107 ustawienia domy\u015blne.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"427\" height=\"386\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/4_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_4.jpg\" alt=\"\" class=\"wp-image-12566\"\/><figcaption class=\"wp-element-caption\"><em>TargetVisu w oprogramowaniu Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>WebVisu w oprogramowaniu Codesys<\/strong><\/p>\n\n\n\n<p>Ostatnim elementem jest WebVisu. Jest to element odpowiedzialny za wy\u015bwietlanie wizualizacji w przegl\u0105darce webowej.<\/p>\n\n\n\n<p>Ustawienia ma takie same jak element TargetVisu, z dodatkow\u0105 opcj\u0105 <em>Name of .htm file<\/em>. Jest to bardzo wa\u017cna opcja, gdy\u017c za pomoc\u0105 tej nazwy mo\u017cesz logowa\u0107 si\u0119 do wizualizacji przez Internet. Mo\u017cesz zostawi\u0107 ustawienia domy\u015blne lub zmieni\u0107 nazw\u0119 na dowoln\u0105 &#8211; jak\u0105 chcesz.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"458\" height=\"418\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/5_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_5.jpg\" alt=\"\" class=\"wp-image-12567\"\/><figcaption class=\"wp-element-caption\"><em>WebVisu w oprogramowaniu Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Element <em>Visualisation <\/em>to Tw\u00f3j pierwszy ekran wizualizacji! <\/strong><\/p>\n\n\n\n<p>Zacznij prac\u0119 od zmiany nazwy na <em>Ekran1<\/em> \u2013 u\u0142atwi to dalsze modyfikacje programu. Aby to zrobi\u0107, kliknij prawym przyciskiem myszy na <em>Visualisation <\/em>i wybierz opcj\u0119 <em>Refactoring<\/em>, a nast\u0119pnie <em>Rename. <\/em>Wpisz docelow\u0105 nazw\u0119 i potwierd\u017a wszystkie zmiany.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"748\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/2.gif\" alt=\"\" class=\"wp-image-12568\"\/><figcaption class=\"wp-element-caption\"><em>Zmiana nazwy ekranu wizualizacji<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Kliknij dwukrotnie na pierwszy ekran wizualizacji. Zobaczysz puste bia\u0142e pole \u2013 to tw\u00f3j obszar roboczy! Po prawej stronie natomiast pojawi si\u0119 ToolBox z elementami wizualizacji posegregowanymi na kategorie.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"325\" height=\"734\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/6_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_6-325x734.jpg\" alt=\"\" class=\"wp-image-12569\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/6_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_6-325x734.jpg 325w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/6_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_6.jpg 398w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><figcaption class=\"wp-element-caption\"><em>Toolbox wizualizacji w oprogramowaniu Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Je\u017celi nie widzisz element\u00f3w wizualizacji, kliknij na samym dole okna zak\u0142adk\u0119 <em>Visualization ToolBox.<\/em> W segmencie Basic znajdziesz g\u0142\u00f3wnie kszta\u0142ty, a tak\u017ce element umo\u017cliwiaj\u0105cy wprowadzenie zdj\u0119cia czy wstawienie ramki okna.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sekcja <strong><em>Common Controls<\/em><\/strong> zawiera najcz\u0119\u015bciej u\u017cywane elementy, a wi\u0119c przyciski, elementy tekstowe, tabele itd.<\/li>\n\n\n\n<li><strong><em>Alarm Manager<\/em><\/strong> to system alarm\u00f3w i notyfikacji.<\/li>\n\n\n\n<li><strong><em>Measurement Controls<\/em><\/strong>zawiera elementy, kt\u00f3re wizualizuj\u0105 aktualne stany zmiennej za pomoc\u0105 analogowych wskaz\u00f3wek \u2013 co\u015b jak licznik pr\u0119dko\u015bci w samochodzie.<\/li>\n\n\n\n<li><strong><em>Lamps\/Switches\/Bitmaps<\/em><\/strong>\u2013 w tym miejscu znajdziesz sygnalizatory w postaci lampek oraz prze\u0142\u0105czniki.<\/li>\n\n\n\n<li><strong><em>Special Controls<\/em><\/strong>to wykresy oraz trendy.<\/li>\n\n\n\n<li><strong><em>Date\/Time controls<\/em><\/strong>to wy\u015bwietlanie i kontrolowanie aktualnego czasu.<\/li>\n<\/ul>\n\n\n\n<p>Zacznij tworzy\u0107 sw\u00f3j projekt! Przejd\u017a do zak\u0142adki <em>Common Controls<\/em>, wybierz element <em>Label<\/em> \u2013 jest to element do wprowadzania tekst\u00f3w.<\/p>\n\n\n\n<p>Teraz stw\u00f3rz pierwszy komunikat: <em>Witaj w mojej pierwszej wizualizacji!<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"615\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3.gif\" alt=\"\" class=\"wp-image-12570\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3.gif 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/3-768x562.gif 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption class=\"wp-element-caption\"><em>Wprowadzanie tekstu do wizualizacji w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Co\u015b kr\u00f3tki ten tekst jak na tytu\u0142 prawda? Jak pewnie zauwa\u017cy\u0142e\u015b\/a\u015b, po klikni\u0119ciu w element po prawej stronie wy\u015bwietla si\u0119 tabela. Tego typu tabela wy\u015bwietla si\u0119 dla ka\u017cdego elementu graficznego. Mo\u017cesz w nim ustawia\u0107 nazw\u0119 elementu, jego rodzaj, pozycj\u0119, przypisywa\u0107 zmienne, a tak\u017ce definiowa\u0107 cechy unikalne dla danego elementu. Jest to swojego rodzaju ma\u0142e centrum dowodzenia danym elementem.<\/p>\n\n\n\n<p>Tak wi\u0119c przejd\u017a do tej tabeli. Kliknij dwukrotnie w wierszu <em>Font<\/em>, rozwi\u0144 list\u0119 i wybierz wi\u0119ksz\u0105 czcionk\u0119 \ud83d\ude42<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/4_zmiana_rozmiaru_czcionki.gif\" alt=\"\"\/><figcaption class=\"wp-element-caption\"><em>Zmiana rozmiaru czcionki w wizualizacji Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Skoro ju\u017c przywita\u0142e\u015b\/a\u015b si\u0119 z u\u017cytkownikami wizualizacji, daj im co\u015b do podzia\u0142ania. Zgodnie z za\u0142o\u017ceniami ekran ten opr\u00f3cz powitania, ma mie\u0107 tak\u017ce przycisk, kt\u00f3ry umo\u017cliwi przej\u015bcie do drugiego ekranu.<\/p>\n\n\n\n<p>Mo\u017cesz teraz stworzy\u0107 <strong>drugi ekran<\/strong>! Kliknij prawym przyciskiem myszy na <em>Application<\/em> nast\u0119pnie <em>Add Object<\/em> i wybierz <em>Visualisation<\/em>. Nazwij ten ekran jako Ekran2 i potwierd\u017a.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/5.gif\" alt=\"\" class=\"wp-image-12572\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie ekranu do wizualizacji Codesys<\/em>, \u017ar\u00f3d\u0142o: ASTOR<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Teraz masz gdzie odes\u0142a\u0107 u\u017cytkownika. Do przechodzenia mi\u0119dzy ekranami mo\u017cesz wykorzysta\u0107 element Button z sekcji <em>Common Controls<\/em>. Wybierz go i przeci\u0105gnij na obszar roboczy, a nast\u0119pnie kliknij na niego, by zobaczy\u0107 po prawej stronie tabel\u0119 z konfiguracj\u0105.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/6.gif\" alt=\"\" class=\"wp-image-12573\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie elementu Button do wizualizacji w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Jak pewnie zauwa\u017cy\u0142e\u015b\/a\u015b, element Button ma znacznie wi\u0119cej opcji do konfiguracji. Dzisiaj jednak skupisz si\u0119 tylko i wy\u0142\u0105cznie na podstawach. Przycisk mo\u017cna nazwa\u0107 \u2013 u\u017cyj do tego wierszu <em>Text<\/em> i wpisz tam <em>Przejd\u017a do ekranu steruj\u0105cego<\/em>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"404\" height=\"785\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/7_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_7.jpg\" alt=\"\" class=\"wp-image-12574\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/7_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_7.jpg 404w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/7_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_7-378x734.jpg 378w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><figcaption class=\"wp-element-caption\"><em>Konfiguracja elementu Button, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Skoro przycisk zosta\u0142 nazwany, nadaj mu funkcj\u0119. Do tego s\u0142u\u017cy sekcja <em>Input Configuration<\/em> \u2013 rozwi\u0144 j\u0105.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"384\" height=\"209\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/8_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_8.jpg\" alt=\"\" class=\"wp-image-12575\"\/><figcaption class=\"wp-element-caption\"><em>Konfiguracja dzia\u0142ania przycisku w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Jak widzisz, opcji wyzwolenia przycisku masz ca\u0142kiem sporo. Mo\u017ce to by\u0107 najazd myszki, ruch myszk\u0105 odjazd myszki z danego obszaru, klik myszk\u0105 &#8211; gdzie myszka rozumiana jest jako kursor lub po prostu palec operatora.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Przypisanie zmiennej do przycisku dla wizualizacji HMI w Codesys<\/strong><\/p>\n\n\n\n<p>Opr\u00f3cz tych zdarze\u0144 masz jeszcze do dyspozycji opcje <strong><em>Tap<\/em>, <em>Toggle<\/em> oraz <em>Hotkey<\/em><\/strong>. Te trzy opcje dotycz\u0105 przypisania zmiennej do przycisku na zasadzie \u2013 jak klikniesz w przycisk, to zmieni si\u0119 zmienna.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>W przypadku <strong><em>Tap<\/em><\/strong> zmienna zostanie zmieniona tak d\u0142ugo, jak trzymasz wci\u015bni\u0119ty przycisk.<\/li>\n\n\n\n<li>W opcji <strong><em>Toggle<\/em><\/strong> wystarczy raz wcisn\u0105\u0107 przycisk, \u017ceby zmieni\u0107 zmienn\u0105, a potem wcisn\u0105\u0107 raz jeszcze, aby przywr\u00f3ci\u0107 stan poprzedni.<\/li>\n\n\n\n<li>Funkcja <strong><em>Hotkey<\/em><\/strong> s\u0142u\u017cy do powielenia przycisk\u00f3w klawiatury (F1, F2, strza\u0142ki, DELETE, a nawet liczby czy te\u017c litery itd.).<\/li>\n<\/ul>\n\n\n\n<p>Teraz wr\u00f3\u0107 do swojego przyk\u0142adu. Plan jest taki, aby ten przycisk po wci\u015bni\u0119ciu przenosi\u0142 operatora na drugi ekran. Tak wi\u0119c kliknij w wierszu <em>OnMouseClick<\/em> na opcj\u0119<em> Configure<\/em>. Zobaczysz okno <em>Input Configuration.<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"523\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/9_Kurs_Codesys_Astraada_One_ASTOR_Wizualizacja_HMI_9.jpg\" alt=\"\" class=\"wp-image-12576\"\/><figcaption class=\"wp-element-caption\"><em>Okno Input Configuration w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Okno to umo\u017cliwia zdefiniowanie dok\u0142adnego zadania, jakie ma wykona\u0107 przycisk. Zada\u0144 jest du\u017co: od otwarcia okna dialogowego, poprzez zmian\u0119 zmiennej, ko\u0144cz\u0105c na przes\u0142aniu pliku lub wykonaniu komendy w j\u0119zyku ST.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Definiowanie przycisk\u00f3w dla wizualizacji HMI w Codesys<\/strong><\/p>\n\n\n\n<p>Logika definiowania przycisk\u00f3w jest bardzo prosta \u2013 najpierw wybierasz, jakie zdarzenie ma wyzwoli\u0107 przycisk, a nast\u0119pnie definiujesz, co konkretnie ma si\u0119 sta\u0107 po wyzwoleniu przycisku.<\/p>\n\n\n\n<p>Wybierz opcj\u0119 <em>Change shown visualization,<\/em> kilknij strza\u0142k\u0119 w prawo i w polu <em>Assign <\/em>wybierz <em>Ekran2<\/em>. Nast\u0119pnie potwierd\u017a wszystko przyciskiem OK.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"519\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/10_skonfigurowany_przycisk_w_wizualicaji_codesys_ASTOR.png\" alt=\"\" class=\"wp-image-12577\"\/><figcaption class=\"wp-element-caption\"><em>Skonfigurowany przycisk w wizualizacji Codesys, \u017ar\u00f3d\u0142o: ASTOR.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Pierwszy ekran masz ju\u017c gotowy<\/strong>. Mo\u017cesz doda\u0107 troch\u0119 kolor\u00f3w, aby nieco urozmaici\u0107 t\u0119 bia\u0142\u0105 pustk\u0119.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/7.gif\" alt=\"\" class=\"wp-image-12578\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie przycisku powrotu, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Przejd\u017a teraz do <strong>drugiego ekranu<\/strong>. Kliknij dwa razy na drzewku w Ekran2. Wy\u015bwietli si\u0119 pole robocze drugiego ekranu. Zacznij od dodania przycisku powrotu, tak aby nie trafi\u0107 w \u015blepy r\u00f3g z Twoj\u0105 wizualizacj\u0105. Zr\u00f3b to analogicznie jak w przypadku pierwszego przycisku.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/8.gif\" alt=\"\" class=\"wp-image-12579\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie przycisku powrotu, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Konfiguracja wykresu dla wizualizacji HMI w Codesys<\/strong><\/p>\n\n\n\n<p>Drugie okno wizualizacji rozpocznij od wykresu. Przejd\u017a w <em>Toolbox<\/em> do zak\u0142adki <em>Special Controls<\/em> i wybierz element <em>Trace<\/em>. Nast\u0119pnie kliknij na niego i w tabeli z parametrami po prawej stronie kliknij dwukrotnie w wierszu <em>Trace<\/em>. Wy\u015bwietli Ci si\u0119 okno konfiguracji wykresu.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/9.gif\" alt=\"\" class=\"wp-image-12580\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie wykresu do wizualizacji, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Nast\u0119pnie skonfiguruj wykres. W sekcji <em>Task<\/em> wybierz <em>MainTask, <\/em>w kt\u00f3rym zawiera si\u0119 program g\u0142\u00f3wny. W lewym dolnym rogu zobaczysz opcj\u0119 <em>Add Variable <\/em>\u2013 kliknij j\u0105.<\/p>\n\n\n\n<p>Wy\u015bwietli Ci si\u0119 okno dodawania zmiennej do wykresu. W sekcji Variable dodaj zmienn\u0105, kt\u00f3ra w programie zmienia si\u0119 cyklicznie. W Twoim przyk\u0142adzie jest to FLAGA_1. W opcjach poni\u017cej mo\u017cesz zdefiniowa\u0107 kolor linii na wykresie, jej grubo\u015b\u0107 i styl \u2013 wedle uznania.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/10.gif\" alt=\"\" class=\"wp-image-12581\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie zmiennej do wykresu<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Zmienna zosta\u0142a dodana! Na wykresie mo\u017cesz umieszcza\u0107 dowoln\u0105 ilo\u015b\u0107 zmiennych. Je\u017celi chcesz obserwowa\u0107 status innych zmiennych, mo\u017cesz \u015bmia\u0142o analogicznie doda\u0107 inne warto\u015bci do wykresu.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Lampka sygnalizacyjna dla wizualizacji HMI w Codesys<\/strong><\/p>\n\n\n\n<p>To nie wszystko. Sprawd\u017a, jak dzia\u0142a prostszy spos\u00f3b obserwowania zmiennej, a wi\u0119c zwyk\u0142a lampka sygnalizacyjna. Przejd\u017a do sekcji <em>Lamps\/Switches\/Bitmaps <\/em>w <em>Toolbox<\/em> i przeci\u0105gnij na pole robocze element Lamp1. Nast\u0119pnie w tabeli z parametrami po prawej stronie, kliknij w wierszu <em>Variable<\/em> i wybierz zmienn\u0105, kt\u00f3ra cyklicznie zmienia stan \u2013 czyli t\u0119, kt\u00f3ra zosta\u0142a dodana do wykresu.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"739\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/11.gif\" alt=\"\" class=\"wp-image-12582\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie lampki sygnalizacyjnej do wizualizacji w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W ten spos\u00f3b mo\u017cesz sygnalizowa\u0107 aktualny stan zmiennej przy pomocy prostej lampki, kt\u00f3ra zapali si\u0119 w momencie pojawienia si\u0119 stanu wysokiego.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Przedstawienie warto\u015bci licznika dla wizualizacji HMI w Codesys<\/strong><\/p>\n\n\n\n<p>Kolejnym etapem Twojej wizualizacji jest przedstawienie warto\u015bci licznika. Mo\u017cesz zrobi\u0107 to na dwa sposoby \u2013 graficznie i tekstowo.<\/p>\n\n\n\n<p>Zacznij od tekstu. Element <em>Textfield<\/em> s\u0142u\u017cy nie tylko do wpisywania tekst\u00f3w, ale mo\u017ce r\u00f3wnie\u017c pos\u0142u\u017cy\u0107 do wy\u015bwietlania warto\u015bci przypisanych do zmiennej.<\/p>\n\n\n\n<p>Przeci\u0105gnij element <em>Textfield<\/em> z sekcji<em> Common Controls<\/em> i kliknij na niego, tak aby wy\u015bwietli\u0107 tabel\u0119 konfiguracji po prawej stronie. W wierszu <em>Text <\/em>wpisz warto\u015b\u0107 \u201e<em>%d<\/em>\u201d jest to znak informuj\u0105cy sterownik PLC, \u017ce w tym miejscu ma si\u0119 pojawi\u0107 aktualna warto\u015b\u0107 liczbowa zmiennej. Jakiej zmiennej? Zdefiniuj j\u0105 rozwijaj\u0105c segment <em>Text variables<\/em> i w wierszu <em>Variables<\/em> wybierz zmienn\u0105, w kt\u00f3rej przechowujesz aktualny stan licznika.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/12.gif\" alt=\"\"\/><figcaption class=\"wp-element-caption\"><em>Tekstowe wy\u015bwietlenie aktualnej zmiennej, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W podgl\u0105dzie wizualizacji widnieje wci\u0105\u017c napis %d, ale po uruchomieniu zmieni si\u0119 on na aktualn\u0105 warto\u015b\u0107 zmiennej.<\/p>\n\n\n\n<p>Dodaj do tego te\u017c graficzne przedstawienie przy pomocy wska\u017anik\u00f3w analogowych. U\u017cyj do tego element <em>Meter180<\/em> z sekcji <em>Measurement Controls<\/em>. Przeci\u0105gnij go na pole robocze. W tabeli konfiguracyjnej ustaw zmienn\u0105 w wierszu <em>Value<\/em>. Nast\u0119pnie rozwi\u0144 segment <em>Scale,<\/em> aby wyskalowa\u0107 element od 0 do 5, tak aby dok\u0142adnie pokazywa\u0142 zmiany.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/13.gif\" alt=\"\"\/><figcaption class=\"wp-element-caption\"><em>Dodawanie graficznego przedstawienia zmiennej do wizualizacji, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Dodanie przycisku Reset do wizualizacji HMI w Codesys<\/strong><\/p>\n\n\n\n<p>Ostatnim elementem b\u0119dzie dodanie przycisku Reset do wizualizacji. Przycisk ten ma si\u0119 pojawi\u0107 tylko w momencie, gdy za\u015bwieci si\u0119 zmienna ALARM. Przycisk musi by\u0107 aktywny przez przynajmniej 4 sekundy, aby zrestartowa\u0107 licznik.<\/p>\n\n\n\n<p>Przeci\u0105gnij element <em>Button<\/em> z <em>Common Controls<\/em>. Nazwij go <em>RESET<\/em>. Nast\u0119pnie rozwi\u0144 sekcj\u0119 <em>Input Configuration<\/em> w tabeli konfiguracyjnej po prawej stronie i kliknij w opcj\u0119 <em>Toggle<\/em>. Nasz przycisk ma by\u0107 wci\u015bni\u0119ty przez przynajmniej 4 sec, do tego mo\u017ce pos\u0142u\u017cy\u0107 funkcja <em>Toggle.<\/em> W wierszu Variable ustaw zmienn\u0105 RESET.<\/p>\n\n\n\n<p>Jak teraz zrobi\u0107 aby przycisk ten by\u0142 niewidzialny? Tutaj w\u0142a\u015bnie przyda si\u0119 zanegowana zmienna ALARM. Tabela konfiguracyjna posiada wiersz <em>Invisible<\/em> \u2013 wiersz ten jest dost\u0119pny w ka\u017cdym elemencie pod sekcj\u0105 <em>State variables<\/em>.<\/p>\n\n\n\n<p>Zmienna tam wpisana decyduje o widoczno\u015bci elementu. Je\u017celi zmienna jest w stanie wysokim, element jest niewidoczny, je\u017celi w niskim \u2013 widoczny. Zmienna ALARM jest w stanie wysokim w momencie przekroczenia umownej granicy. Wykorzystuj\u0105c t\u0119 zmienn\u0105, Tw\u00f3j przycisk RESET znikn\u0105\u0142by w momencie przekroczenia warto\u015bci 5, a ma dzia\u0142a\u0107 zupe\u0142nie odwrotnie. Dlatego te\u017c w to miejsce przypisz zanegowany sygna\u0142 ALARM.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"840\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/14.gif\" alt=\"\" class=\"wp-image-12585\"\/><figcaption class=\"wp-element-caption\"><em>Konfiguracja przycisku RESET w wizualizacji w Codesys, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Uda\u0142o si\u0119!<\/strong><\/p>\n\n\n\n<p>Twoja pierwsza wizualizacja jest ju\u017c gotowa! Wgraj j\u0105 na sterownik i przetestuj jak dzia\u0142a. Poni\u017cej gif prezentuj\u0105cy poprawne dzia\u0142anie wizualizacji.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"840\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/15.gif\" alt=\"\" class=\"wp-image-12586\"\/><figcaption class=\"wp-element-caption\"><em>Test aplikacji, \u017ar\u00f3d\u0142o: ASTOR<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>\u0141\u0105czenie z wizualizacj\u0105 HMI z poziomu przegl\u0105darki webowej w Codesys<\/strong><\/h1>\n\n\n\n<p><br>Skoro stworzy\u0142e\u015b\/a\u015b ju\u017c swoj\u0105 wizualizacj\u0119, po\u0142\u0105cz si\u0119 z ni\u0105 poprzez przegl\u0105dark\u0119. Jak tego dokona\u0107? W przypadku sterownik\u00f3w Astraada One to bardzo proste. Po\u0142\u0105cz sw\u00f3j sterownik do sieci internetowej, ustawiaj\u0105c zmienny adres IP w sterowniku i pod\u0142\u0105cz go do routera sieciowego lub po prostu pozostaw wpi\u0119ty sterownik PLC do komputera, tak jak go programowa\u0142e\u015b\/a\u015b.<\/p>\n\n\n\n<p>Nast\u0119pnie otw\u00f3rz przegl\u0105dark\u0119 i w wyszukiwarce wpisz adres IP sterownika z nazw\u0105 wizualizacji i portem komunikacji czyli:<\/p>\n\n\n\n<p><strong>169.254.255.XX:8080\/webvisu.htm<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>XX<\/strong> to dwie ostatnie cyfry numeru seryjnego sterownika (mowa tutaj oczywi\u015bcie o fabrycznym numerze IP),<\/li>\n\n\n\n<li><strong>webvisu<\/strong> to nazwa wizualizacji nadana w elemencie WebVisu.<\/li>\n<\/ul>\n\n\n\n<p>Wizualizacja uruchomi si\u0119 dok\u0142adnie tak jak na panelu HMI! W kolejnym odcinku skupisz si\u0119 na j\u0119zyku ST w Codesys. Poznasz jego podstawy, sk\u0142adni\u0119 i stworzysz pierwszy podstawowy program ST w Codesys! Do nast\u0119pnego!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tym razem skupimy si\u0119 na tworzeniu wizualizacji w \u015brodowisku Codesys. Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.<\/p>\n","protected":false},"author":43,"featured_media":12592,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[234],"tags":[142,210],"class_list":["post-12560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automatyka-w-praktyce","tag-codesys","tag-wizualizacje"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\r\n<title>Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6 | Poradnik Automatyka<\/title>\r\n<meta name=\"description\" content=\"Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/\" \/>\r\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6 | Poradnik Automatyka\" \/>\r\n<meta property=\"og:description\" content=\"Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Poradnik Automatyka\" \/>\r\n<meta property=\"article:published_time\" content=\"2021-06-30T09:59:41+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2023-05-04T12:48:58+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-min.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1339\" \/>\r\n\t<meta property=\"og:image:height\" content=\"799\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Rafa\u0142 Pilch\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafa\u0142 Pilch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minut\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/\"},\"author\":{\"name\":\"Rafa\u0142 Pilch\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#\\\/schema\\\/person\\\/17cb08c703a403daf1e3e789c9f40f23\"},\"headline\":\"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6\",\"datePublished\":\"2021-06-30T09:59:41+00:00\",\"dateModified\":\"2023-05-04T12:48:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/\"},\"wordCount\":2746,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/1-min.jpg\",\"keywords\":[\"Codesys\",\"wizualizacje\"],\"articleSection\":[\"Automatyka w praktyce\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/\",\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/\",\"name\":\"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6 | Poradnik Automatyka\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/1-min.jpg\",\"datePublished\":\"2021-06-30T09:59:41+00:00\",\"dateModified\":\"2023-05-04T12:48:58+00:00\",\"description\":\"Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/1-min.jpg\",\"contentUrl\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/1-min.jpg\",\"width\":1339,\"height\":799},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Automatyka w praktyce\",\"item\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/category\\\/automatyka-w-praktyce\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#website\",\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/\",\"name\":\"Poradnik Automatyka\",\"description\":\"Poradnik Automatyka to przydatne kursy, u\u017cyteczne artyku\u0142y i merytoryczne webinary dla ka\u017cdego automatyka i elektryka.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#organization\",\"name\":\"ASTOR\",\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/ASTOR_zwykly_sam_logotyp.png\",\"contentUrl\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2018\\\/08\\\/ASTOR_zwykly_sam_logotyp.png\",\"width\":3322,\"height\":1078,\"caption\":\"ASTOR\"},\"image\":{\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/#\\\/schema\\\/person\\\/17cb08c703a403daf1e3e789c9f40f23\",\"name\":\"Rafa\u0142 Pilch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/R.-Pilch.jpg\",\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/R.-Pilch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/R.-Pilch.jpg\",\"caption\":\"Rafa\u0142 Pilch\"},\"description\":\"Absolwent Politechniki Krakowskiej, kierunku Automatyka i Robotyka. Opiekun marki Astraada w ASTOR, szczeg\u00f3lnie zorientowany na systemy nap\u0119dowe. Prywatnie entuzjasta gier planszowych oraz MMORPG, a tak\u017ce amator grania na gitarze.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/rafa\u0142-pilch-b556b0170\"],\"url\":\"https:\\\/\\\/www.astor.com.pl\\\/poradnikautomatyka\\\/autor\\\/rafalp\\\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6 | Poradnik Automatyka","description":"Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/","og_locale":"pl_PL","og_type":"article","og_title":"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6 | Poradnik Automatyka","og_description":"Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.","og_url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/","og_site_name":"Poradnik Automatyka","article_published_time":"2021-06-30T09:59:41+00:00","article_modified_time":"2023-05-04T12:48:58+00:00","og_image":[{"width":1339,"height":799,"url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-min.jpg","type":"image\/jpeg"}],"author":"Rafa\u0142 Pilch","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Rafa\u0142 Pilch","Szacowany czas czytania":"20 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#article","isPartOf":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/"},"author":{"name":"Rafa\u0142 Pilch","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/person\/17cb08c703a403daf1e3e789c9f40f23"},"headline":"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6","datePublished":"2021-06-30T09:59:41+00:00","dateModified":"2023-05-04T12:48:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/"},"wordCount":2746,"commentCount":2,"publisher":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#organization"},"image":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#primaryimage"},"thumbnailUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-min.jpg","keywords":["Codesys","wizualizacje"],"articleSection":["Automatyka w praktyce"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/","name":"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6 | Poradnik Automatyka","isPartOf":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#primaryimage"},"image":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#primaryimage"},"thumbnailUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-min.jpg","datePublished":"2021-06-30T09:59:41+00:00","dateModified":"2023-05-04T12:48:58+00:00","description":"Jak pewnie wiesz, oprogramowanie Codesys pozwala na tworzenie aplikacji steruj\u0105cej oraz aplikacji wizualizacyjnej w jednym projekcie.","breadcrumb":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#primaryimage","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-min.jpg","contentUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2021\/06\/1-min.jpg","width":1339,"height":799},{"@type":"BreadcrumbList","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/tworzenie-podstawowej-wizualizacji-hmi-kurs-programowania-w-codesys-odc-6\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Automatyka w praktyce","item":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/category\/automatyka-w-praktyce\/"},{"@type":"ListItem","position":2,"name":"Tworzenie podstawowej wizualizacji HMI | Kurs programowania w Codesys odc. 6"}]},{"@type":"WebSite","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#website","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/","name":"Poradnik Automatyka","description":"Poradnik Automatyka to przydatne kursy, u\u017cyteczne artyku\u0142y i merytoryczne webinary dla ka\u017cdego automatyka i elektryka.","publisher":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#organization","name":"ASTOR","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/logo\/image\/","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2018\/08\/ASTOR_zwykly_sam_logotyp.png","contentUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2018\/08\/ASTOR_zwykly_sam_logotyp.png","width":3322,"height":1078,"caption":"ASTOR"},"image":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/person\/17cb08c703a403daf1e3e789c9f40f23","name":"Rafa\u0142 Pilch","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/R.-Pilch.jpg","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/R.-Pilch.jpg","contentUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/R.-Pilch.jpg","caption":"Rafa\u0142 Pilch"},"description":"Absolwent Politechniki Krakowskiej, kierunku Automatyka i Robotyka. Opiekun marki Astraada w ASTOR, szczeg\u00f3lnie zorientowany na systemy nap\u0119dowe. Prywatnie entuzjasta gier planszowych oraz MMORPG, a tak\u017ce amator grania na gitarze.","sameAs":["https:\/\/www.linkedin.com\/in\/rafa\u0142-pilch-b556b0170"],"url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/autor\/rafalp\/"}]}},"_links":{"self":[{"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts\/12560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/comments?post=12560"}],"version-history":[{"count":1,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts\/12560\/revisions"}],"predecessor-version":[{"id":17296,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts\/12560\/revisions\/17296"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/media\/12592"}],"wp:attachment":[{"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/media?parent=12560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/categories?post=12560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/tags?post=12560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}