{"id":24918,"date":"2025-09-17T08:48:23","date_gmt":"2025-09-17T06:48:23","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=24918"},"modified":"2025-09-18T12:19:02","modified_gmt":"2025-09-18T10:19:02","slug":"jak-umozliwic-nawigacje-miedzy-ekranami-operatorskimi-oraz-jak-korzystac-z-gotowych-obiektow-graficznych-w-srodowisku-cscape-kurs-programowania-sterownikow-horner-apg-w-srodowisku-cscape-10","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-umozliwic-nawigacje-miedzy-ekranami-operatorskimi-oraz-jak-korzystac-z-gotowych-obiektow-graficznych-w-srodowisku-cscape-kurs-programowania-sterownikow-horner-apg-w-srodowisku-cscape-10\/","title":{"rendered":"Jak umo\u017cliwi\u0107 nawigacj\u0119 mi\u0119dzy ekranami operatorskimi oraz jak korzysta\u0107 z gotowych obiekt\u00f3w graficznych w \u015brodowisku Cscape? | Kurs programowania sterownik\u00f3w Horner APG\u00a0 w \u015brodowisku Cscape 10, odc. 11"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku rozbudujemy nasz\u0105 aplikacj\u0119 \u2013 stworzymy kolejny ekran, na kt\u00f3rym zaprezentowany zostanie schemat instalacji.<\/p>\n\n\n\n

\n

Kurs programowania sterownik\u00f3w Horner APG w \u015brodowisku Cscape 10<\/strong><\/h3>\n

Wprowadzenie i podstawy<\/h4>\n1. Jak skonfigurowa\u0107, pod\u0142\u0105czy\u0107 oraz uruchomi\u0107 sterownik PLC?<\/a>\n2. Jak tworzy\u0107 i edytowa\u0107 projekty w oprogramowaniu Cscape 10?<\/a>\n

Programowanie w j\u0119zyku drabinkowym<\/h4>\n3. Jak tworzy\u0107 oraz konfigurowa\u0107 baz\u0119 zmiennych w \u015brodowisku Cscape?<\/a>\n4. Jak korzysta\u0107 ze styk\u00f3w, cewek i blok\u00f3w operacji arytmetycznych w programie steruj\u0105cym?<\/a>\n5. Jak odmierza\u0107 czas w programie steruj\u0105cym i jak konfigurowa\u0107 timery?<\/a>\n6. Jak por\u00f3wnywa\u0107 warto\u015bci i wykorzysta\u0107 wyniki operacji logicznych?<\/a>\n7. Jak zlicza\u0107 impulsy i konfigurowa\u0107 liczniki?<\/a>\n8. Jak konwertowa\u0107 typy zmiennych i przemieszcza\u0107 zmienne w programie?<\/a>\n9. Jak sterowa\u0107 wykonywaniem programu logicznego? Instrukcja skoku warunkowego?<\/a>\n

Programowanie zintegrowanego panelu HMI<\/h4>\n10. Jak budowa\u0107 ekrany operatorskie z obiektami do wizualizacji i zadawania warto\u015bci zmiennych?<\/a>\n11. Jak umo\u017cliwi\u0107 nawigacj\u0119 mi\u0119dzy ekranami operatorskimi oraz jak korzysta\u0107 z gotowych obiekt\u00f3w graficznych w \u015brodowisku Cscape?<\/a>\n12. Jak wizualizowa\u0107 zmienne analogowe oraz jak modyfikowa\u0107 ich warto\u015bci przy pomocy obiekt\u00f3w graficznych?<\/a>\n13. Jak korzysta\u0107 z obiektu menu?<\/a>\n14. Konfiguracja i obs\u0142uga alarm\u00f3w w sterownikach PLC.<\/a>\n15. Trend Graph.<\/a>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Do zbudowania schematu wykorzystasz elementy graficzne: zbiornik<\/strong>, rury<\/strong>, zawory<\/strong>. Dodatkowo schemat wyposa\u017cysz w elementy umo\u017cliwiaj\u0105ce monitorowanie bie\u017c\u0105cego stanu w zbiornikach oraz sterowanie zaworami nape\u0142niaj\u0105cymi i opr\u00f3\u017cniaj\u0105cymi. Finalnie umo\u017cliwisz nawigacj\u0119 mi\u0119dzy stworzonymi ekranami operatorskimi, wykorzystuj\u0105c przyciski ekranowe oraz logik\u0119 programu steruj\u0105cego.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Krok 1: Jak skonfigurowa\u0107 kolejny ekran operatorski w oprogramowaniu narz\u0119dziowym Cscape?<\/h2>\n\n\n\n

W celu stworzenia kolejnego ekranu w zak\u0142adce User Interface<\/strong> kliknij prawym klawiszem myszy na Main Screen<\/strong> i wybierz opcj\u0119 New Screen<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Znajduj\u0105ce si\u0119 na pasku narz\u0119dziowym ikony Previous Screen<\/strong> oraz Next Screen<\/strong> umo\u017cliwiaj\u0105 przechodzenie pomi\u0119dzy poszczeg\u00f3lnymi ekranami operatorskimi.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Przechodzenie pomi\u0119dzy ekranami operatorskimi mo\u017ce tak\u017ce by\u0107 realizowane z poziomu zak\u0142adki Main screen<\/strong> poprzez wybranie odpowiedniego ekranu, a tak\u017ce poprzez wyb\u00f3r ekranu znajduj\u0105cego si\u0119 na pasku podgl\u0105du.<\/p>\n\n\n\n

Zgodnie z zasad\u0105 przyj\u0119t\u0105 w poprzednim odcinku, na g\u00f3rze ekranu nale\u017cy umie\u015bci\u0107 tekst statyczny, informuj\u0105cy na kt\u00f3rym ekranie aktualnie znajduje si\u0119 u\u017cytkownik.<\/p>\n\n\n\n

Aby obiekt Text Label<\/strong> by\u0142 zgodny z wygl\u0105dem pola na pierwszym ekranie, skopiuj go i wklej, a nast\u0119pnie zmie\u0144 jego tre\u015b\u0107 na \u201eEKRAN 2<\/em><\/strong>\u201d.<\/p>\n\n\n\n

W celu przej\u015bcia do ekranu 1, wybierz opcj\u0119 Previous Screen<\/strong> z paska narz\u0119dziowego, skopiuj element Text Label<\/strong>, a nast\u0119pnie przy pomocy ikony Next Screen<\/strong> powr\u00f3\u0107 do ekranu numer 2, wklej obiekt oraz zmie\u0144 tre\u015b\u0107.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Krok 2: Jak wykorzysta\u0107 gotowe elementy graficzne?<\/h2>\n\n\n\n

W celu zbudowania schematu instalacji otw\u00f3rz bibliotek\u0119 element\u00f3w graficznych. Klikaj\u0105c prawym klawiszem myszy na ekranie, wybierz opcj\u0119 Start Symbol Picker\u2026<\/strong> z menu kontekstowego.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Nast\u0119pnie przejd\u017a do kategorii Tanks<\/strong> i wybierz grafik\u0119 zbiornika, kt\u00f3r\u0105 chcesz umie\u015bci\u0107 na ekranie operatorskim. Dowolnie skonfiguruj schemat kolor\u00f3w oraz t\u0142o, a nast\u0119pnie dwukrotnie kliknij na grafik\u0119 skonfigurowanego zbiornika. Pojawi si\u0119 on na edytowanym ekranie operatorskim, gdzie mo\u017cesz osadzi\u0107 go w odpowiednim miejscu.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Je\u015bli preferujesz transparentne t\u0142o, mo\u017cesz je ustawi\u0107 we w\u0142a\u015bciwo\u015bciach obiektu, klikaj\u0105c na niego dwukrotnie. Zaznacz opcj\u0119 Treat Background As Transparent<\/strong>, nast\u0119pnie korzystaj\u0105c z opcji Transparency Color<\/strong> wybierz kolor najbardziej zbli\u017cony do koloru t\u0142a. Zaznacz r\u00f3wnie\u017c opcj\u0119 Treat similar color as transparent<\/strong> i poni\u017cej znajduj\u0105cym si\u0119 suwakiem dostosuj czu\u0142o\u015b\u0107, przy jakiej kolory podobne do t\u0142a zaczn\u0105 by\u0107 traktowane jako niewidoczne.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Kolejno skopiuj i wklej dwukrotnie gotowy element, tak by liczba element\u00f3w graficznych by\u0142a r\u00f3wna liczbie zbiornik\u00f3w w instalacji.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

W nast\u0119pnym kroku powr\u00f3\u0107 do biblioteki element\u00f3w graficznych i z zak\u0142adek Pipes<\/strong> oraz Valves<\/strong> skompletuj elementy niezb\u0119dne do z\u0142o\u017cenia poni\u017cszej konfiguracji:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Kopiuj\u0105c elementy, skompletuj ich odpowiedni\u0105 ilo\u015b\u0107 i nast\u0119pnie z du\u017c\u0105 precyzj\u0105 spr\u00f3buj u\u0142o\u017cy\u0107 je w estetyczn\u0105 ca\u0142o\u015b\u0107.<\/p>\n\n\n\n

Ustaw odpowiedni\u0105 precyzj\u0119 przemieszczania element\u00f3w manewruj\u0105c dostosowaniem siatki. W tym celu u\u017cyj ikon g\u00f3rnego paska narz\u0119dziowego.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Kiedy schemat jest gotowy, przejd\u017a do dodania kolejnych element\u00f3w. Z paska narz\u0119dziowego w zak\u0142adce Live Text Data<\/strong> wybierz element Numeric<\/strong> i umie\u015b\u0107 go na zbiorniku. Pos\u0142u\u017cy on do monitorowania bie\u017c\u0105cego stanu zbiornika.<\/p>\n\n\n\n

Konfiguracja tego elementu b\u0119dzie analogiczna jak w poprzednim odcinku kursu. Obiekty nie wymagaj\u0105 tylko nazwy definiowanej w Legend Properties<\/strong>, poniewa\u017c wiadomo, kt\u00f3ry zbiornik reprezentuj\u0105.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

W kolejnym kroku skopiuj i dwukrotnie wklej przygotowany element Numeric Data<\/strong>, a nast\u0119pnie przypisz do nich zmienne Zbiornik_2<\/strong> i Zbiornik_3<\/strong> oraz umie\u015b\u0107 w odpowiednim miejscu na zbiorniku.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Kolejnym wa\u017cnym elementem s\u0105 przyciski do sterowania zaworami. Umie\u015b\u0107 prze\u0142\u0105czniki Switch<\/strong> pod ka\u017cdym zaworem, a ich konfiguracj\u0119 przeprowad\u017a analogicznie, jak w poprzednim odcinku. Pomi\u0144 konfiguracj\u0119 nazwy w Legend Properties<\/strong> oraz zdefiniuj inny kolor, jak w przyk\u0142adzie poni\u017cej:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Skopiuj i wklej czterokrotnie skonfigurowany element, nast\u0119pnie przypisz zmienne: Zawor_napelniajacy_ZB2<\/strong>, Zawor_oprozniajacy_ZB1<\/strong>, Zawor_oprozniajacy_ZB2<\/strong>, Zawor_oprozniajacy_ZB3<\/strong>, odpowiednio do miejsca po\u0142o\u017cenia prze\u0142\u0105cznika.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Do pe\u0142nej funkcjonalno\u015bci ekranu wystarczy uzupe\u0142ni\u0107 schemat o prze\u0142\u0105czniki, pozwalaj\u0105ce na sterowanie procesem grzania i mieszania w zbiorniku numer 3. W tym celu wstaw kontrolki Switch<\/strong> po lewej stronie zbiornika numer 3 i skonfiguruj je tak jak w poprzednim odcinku.<\/p>\n\n\n\n

Finalnie ekran powinien wygl\u0105da\u0107 jak na grafice poni\u017cej, wraz z odpowiednio przypisanymi zmiennymi.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Krok 3: Jak umo\u017cliwi\u0107 nawigacj\u0119 mi\u0119dzy ekranami przy pomocy elementu Screen Jump?<\/h2>\n\n\n\n

Aby przej\u015b\u0107 z ekranu 2 do ekranu 1, wykorzystaj element Screen Jump<\/strong>, znajduj\u0105cy si\u0119 na pasku narz\u0119dziowym w zak\u0142adce Touch Objects<\/strong>. W tym celu wybierz odpowiadaj\u0105c\u0105 mu ikon\u0119 i umie\u015b\u0107 j\u0105 w prawym dolnym rogu. Nast\u0119pnie klikaj\u0105c w obiekt dwukrotnie, przejd\u017a do jego konfiguracji.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Pierwsza cz\u0119\u015b\u0107 okna konfiguracyjnego s\u0142u\u017cy do okre\u015blenia numeru ekranu, do kt\u00f3rego ma nast\u0105pi\u0107 przekierowanie po naci\u015bni\u0119ciu przycisku. Dost\u0119pne s\u0105 r\u00f3wnie\u017c dwie opcje: Simulate ESC<\/strong> oraz Allow ESC To Return<\/strong>, om\u00f3wione na pocz\u0105tku tego odcinka. Zaznacz opcj\u0119 Simulate ESC<\/strong>, co pozwoli na powr\u00f3t do ekranu numer 1.<\/p>\n\n\n\n

W nast\u0119pnej kolejno\u015bci przejd\u017a do cz\u0119\u015bci Display Properties<\/strong>, gdzie mo\u017cesz konfigurowa\u0107 wygl\u0105d przycisku. Wybierz opcj\u0119 Legend<\/strong>, kt\u00f3ra s\u0142u\u017cy do opisu elementu, a nast\u0119pnie wprowad\u017a tekst \u201ePOWROT<\/em><\/strong>\u201d, ustaw wy\u015brodkowanie i wybierz czcionk\u0119 Canvas 15<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Zaakceptuj wprowadzone zmiany, po kt\u00f3rych przycisk powinien wygl\u0105da\u0107 jak na grafice poni\u017cej.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Ekran numer 2 nale\u017cy wywo\u0142a\u0107 z poziomu tworzonej aplikacji. Zrealizujesz to na 2 sposoby.<\/p>\n\n\n\n

Pierwszy spos\u00f3b to wywo\u0142anie ekranu 2 z poziomu ekranu 1. W tym celu przy pomocy ikony paska narz\u0119dziowego przejd\u017a do ekranu numer 1:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Nast\u0119pnie w prawym dolnym rogu umie\u015b\u0107 obiekt Screen Jump<\/strong>. Przechodz\u0105c do konfiguracji, w sekcji Jump to Screen<\/strong> numer, wprowad\u017a numer 2<\/strong> oraz zaznacz opcj\u0119 Allow ESC to Return<\/strong>.<\/p>\n\n\n\n

Nast\u0119pnie przejd\u017a do cz\u0119\u015bci Display Properties<\/strong> i wybieraj\u0105c opcj\u0119 Legend<\/strong>, wprowad\u017a tekst \u201eSchemat instalacji<\/em><\/strong>\u201d, ustaw wy\u015brodkowanie i czcionk\u0119 Canvas 10<\/strong>. Display Style<\/strong> ustaw jako Classic Style<\/strong>.<\/p>\n\n\n\n

W ko\u0144cowej wersji element powinien wygl\u0105da\u0107 jak poni\u017cej:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Drugim sposobem przej\u015bcia do ekranu 2 b\u0119dzie wykorzystanie klawisza funkcyjnego F1<\/strong> znajduj\u0105cego si\u0119 na froncie panelu operatorskiego sterownika Horner.<\/p>\n\n\n\n

W tym celu zamknij modu\u0142 edycji ekran\u00f3w operatorskich i przejd\u017a do edycji programu steruj\u0105cego. W programie g\u0142\u00f3wnym Main<\/strong> dodaj kolejny szczebel, wstawiaj\u0105c poni\u017cej przygotowanego kodu styk normalnie otwarty. Przypisz do niego zmienn\u0105 K1<\/strong>, kt\u00f3ra powi\u0105zana jest z przyciskiem funkcyjnym F1<\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

U\u017cycie klawisza F1<\/strong> spowoduje ustawienie bitu w stan wysoki i przepuszczenie sygna\u0142u do kolejnych element\u00f3w, w tym przypadku do cewki. Dodaj wi\u0119c z paska narz\u0119dziowego cewk\u0119 i przypisz do niej zmienn\u0105 d2<\/strong>, kt\u00f3ra powi\u0105zana jest z ekranem numer 2. Poni\u017cej wybierz opcj\u0119 Force Screen (%SR2)<\/strong>,co spowoduje, \u017ce ekran b\u0119dzie wy\u015bwietlany tylko w momencie naci\u015bni\u0119cia przycisku.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Krok 4: Wgranie programu do sterownika<\/h2>\n\n\n\n

Tak przygotowany program mo\u017cna wgra\u0107 do sterownika, u\u017cywaj\u0105c odpowiedniej ikony z g\u00f3rnego paska narz\u0119dziowego.<\/p>\n\n\n\n

Przetestuj przechodzenie mi\u0119dzy kolejnymi ekranami, wykorzystuj\u0105c przyciski na panelu oraz klawisz funkcyjny F1.<\/p>\n\n\n\n

W kolejnym odcinku czekaj\u0105 na viebie zagadnienia zwi\u0105zane z wizualizacj\u0105 zmiennych analogowych. Poznasz elementy s\u0142u\u017c\u0105ce do przedstawiania oraz modyfikowania tych warto\u015bci, takie jak Progress Bar<\/strong>, Meters<\/strong> czy Sliders<\/strong>. Tworzona aplikacja zostanie rozbudowana o te elementy, przez co zwi\u0119kszysz jej funkcjonalno\u015b\u0107.<\/p>\n\n\n\n

Nast\u0119pny odcinek: Jak wizualizowa\u0107 zmienne analogowe oraz jak modyfikowa\u0107 ich warto\u015bci przy pomocy obiekt\u00f3w graficznych?<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n
\n

Autor artyku\u0142u:<\/p><\/br>\n

Jacek Dynak<\/strong><\/h2>\n

Praktykant ASTOR<\/p>\n

Student IV roku kierunku \u201eautomatyka i robotyka\u201d na Politechnice Krakowskiej<\/p><\/p>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n
\n

Newsletter Poradnika Automatyka<\/h3><\/div>\n

Czytaj trendy i inspiracje, podstawy automatyki, automatyk\u0119 w praktyce<\/p>\n<\/div>\n

\n
\n