{"id":8543,"date":"2020-04-08T07:17:43","date_gmt":"2020-04-08T05:17:43","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=8543"},"modified":"2023-05-15T18:09:19","modified_gmt":"2023-05-15T16:09:19","slug":"jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/","title":{"rendered":"Jak zaprojektowa\u0107 interfejs graficzny? Podstawowe obiekty graficzne wykorzystywane w systemach HMI | Kurs programowania paneli HMI odc. 4"},"content":{"rendered":"\n<div class=\"dowiesz-sie\">\n<h3>Podczas kursu dowiesz si\u0119 m.in.:<\/h3>\n<ul class=\"bulleted\">\n<li>Jakie obiekty graficzne warto pozna\u0107 na pocz\u0105tku (zbiornik, mikser, zaw\u00f3r, wykres s\u0142upkowy, lampa sygnalizacyjna, ruroci\u0105g)\n<\/li>\n<li>Jak dostosowa\u0107 rozmiar i wygl\u0105d obiekt\u00f3w graficznych.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W poprzednim artykule z cyklu <a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-dodawac-i-edytowac-ekrany-operatora-programowanie-paneli-hmi-3\/\">\u201eJak dodawa\u0107 i edytowa\u0107 ekrany operatora? |Kurs Programowanie paneli HMI odc.3\u201d<\/a> pozna\u0142e\u015b\/a\u015b sposoby dodawania i konfigurowania ekran\u00f3w aplikacji. Dowiedzia\u0142e\u015b\/a\u015b si\u0119 r\u00f3wnie\u017c, jak skompilowa\u0107 projekt oraz uruchomi\u0107 jego symulacj\u0119 offline. <\/p>\n\n\n\n<p>W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie w\u0142a\u015bciwej aplikacji na <a href=\"https:\/\/www.astor.com.pl\/produkty\/sterowanie\/panele-operatorskie.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"panel operatorski (opens in a new tab)\">panel operatorski<\/a>, kt\u00f3r\u0105 b\u0119dziesz z czasem rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca procesem mieszania kolor\u00f3w z trzech zbiornik\u00f3w: czerwonego, zielonego oraz niebieskiego.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"dowiesz-sie\" style=\"margin-top:40px; margin-bottom:40px\">\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/programowanie-paneli-hmi-kurs-dla-automatykow\/\"><h3>Programowanie paneli HMI &#8211; kurs dla automatyk\u00f3w<\/h3><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-stworzyc-pierwszy-projekt-programowanie-paneli-hmi-1\/\">1. Jak stworzy\u0107 pierwszy projekt na panel HMI?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-skonfigurowac-ustawienia-aplikacji-interfejs-i-podstawowe-funkcje-srodowiska-deweloperskiego-kurs-programowania-paneli-hmi-odc-2\/\">2. Jak skonfigurowa\u0107 ustawienia aplikacji? Interfejs i podstawowe funkcje \u015brodowiska deweloperskiego.<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-dodawac-i-edytowac-ekrany-operatora-programowanie-paneli-hmi-3\/\">3. Jak dodawa\u0107 i edytowa\u0107 ekrany operatora?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\">4. Jak zaprojektowa\u0107 interfejs graficzny? Podstawowe obiekty graficzne wykorzystywane w systemach HMI.<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jakie-typy-zmiennych-wykorzystywane-sa-w-panelach-operatorskich-kurs-programowania-paneli-hmi-cz-5\/\">5. Jakie typy zmiennych wykorzystywane s\u0105 w panelach operatorskich?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/co-to-sa-makra-i-jak-wykorzystac-je-w-aplikacji-hmi-kurs-programowania-paneli-hmi-odc-6\/\">6. Co to s\u0105 makra i jak wykorzysta\u0107 je w aplikacji HMI?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-skonfigurowac-alarmy-w-panelach-operatorskich-kurs-hmi-7\/\">7. Jak skonfigurowa\u0107 alarmy w panelach operatorskich?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-utworzyc-i-modyfikowac-receptury-kurs-programowania-paneli-hmi-odc-8\/\">8. Jak utworzy\u0107 i modyfikowa\u0107 receptury?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-wprowadzic-automatyzacje-pracy-aplikacji-programowanie-paneli-hmi-9\/\">9. Jak wprowadzi\u0107 automatyzacj\u0119 pracy aplikacji?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-dodac-funkcje-rejestrowania-plikow-procesowych-zapisywanie-danych-kurs-hmi-10\/\">10. Jak doda\u0107 funkcj\u0119 rejestrowania plik\u00f3w procesowych? Jak zapisywa\u0107 dane?<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zapewnic-komunikacje-ze-sterownikiem-plc-konfiguracja-driverow-kurs-programowania-paneli-hmi-odc-11\/\">11. Jak zapewni\u0107 komunikacj\u0119 ze sterownikiem PLC? Konfiguracja driver\u00f3w.<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-ograniczyc-dostep-do-aplikacji-hasla-operatorskie-kurs-hmi-12\/\">12. Jak ograniczy\u0107 dost\u0119p do aplikacji? Has\u0142a operatorskie.<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jakie-dodatkowe-funkcjonalnosci-moga-byc-przydatne-przy-projektowaniu-aplikacji-na-panel-hmi-kurs-hmi-13\/\">13. Jakie dodatkowe funkcjonalno\u015bci mog\u0105 by\u0107 przydatne przy projektowaniu aplikacji? <\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/podsumowanie-jak-efektywnie-programowac-panele-hmi-kurs-hmi-14\/\">14. Podsumowanie. Jak efektywnie programowa\u0107 panele operatorskie?<\/br><\/a>\n<br>\n<h3>Komunikacja paneli HMI Astraada z produktami innych producent\u00f3w<\/h3>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-paneli-astraada-hmi-ze-sterownikami-siemens-s7-1200\/\">1. Komunikacja paneli Astraada HMI ze sterownikami Siemens S7-1200<\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-sterownika-siemens-logo-z-panelem-astraada-hmi-za-pomoca-protokolu-modbus-tcp\/\">2. Komunikacja sterownika Siemens LOGO! z panelem Astraada HMI za pomoc\u0105 protoko\u0142u Modbus TCP <\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-paneli-astraada-hmi-ze-sterownikami-firmy-horner\/\">3. Komunikacja sterownika Horner APG z panelem Astraada HMI <\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-paneli-astraada-hmi-ze-sterownikami-emerson-serii-versamax\/\">4. Komunikacja sterownika Emerson VersaMax z panelem Astraada HMI <\/br><\/a>\n<a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/komunikacja-paneli-astraada-hmi-ze-sterownikiem-plc-astraada-one\/\">5. Komunikacja sterownika Astraada One z panelem Astraada HMI <\/br><\/a>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Dodawanie element\u00f3w graficznych do aplikacji<\/h2>\n\n\n\n<p>Dodaj obiekt <strong><em>Picture Object<\/em><\/strong>, kt\u00f3ry\nznajdziesz w zak\u0142adce <strong><em>Draw &gt; Picture<\/em><\/strong>.<\/p>\n\n\n\n<p>Umie\u015b\u0107 obiekt na ekranie i wejd\u017a w jego ustawienia, klikaj\u0105c na niego dwukrotnie kursorem myszy (obiekt b\u0119dzie przezroczysty, poniewa\u017c nie ma jeszcze przypisanej \u017cadnej grafiki). W zak\u0142adce <strong><em>Name<\/em><\/strong> wybierz opcj\u0119 <strong><em>Select\/Import from Library<\/em><\/strong> (\u015brodkowy przycisk). <\/p>\n\n\n\n<p>Nast\u0119pnie wybierz z menu <strong><em>Picture Library File<\/em><\/strong> opcj\u0119 <strong><em>Tanks<\/em><\/strong>. Wybierz obiekt o nazwie <strong><em>Tank 6<\/em><\/strong> i wstaw go na ekranie. Aby usun\u0105\u0107 bia\u0142e t\u0142o, zaznacz opcj\u0119 <strong><em>Transparent<\/em><\/strong>. Pami\u0119taj, aby za ka\u017cdym razem zaznacza\u0107 opcj\u0119 <strong><em>Fit to Object<\/em><\/strong>, poniewa\u017c dzi\u0119ki temu domy\u015blnie dodawana grafika zachowa sw\u00f3j oryginalny rozmiar i nie b\u0119dziesz m\u00f3g\u0142\/mog\u0142a jej dopasowa\u0107 do okna. <\/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=\"610\" height=\"502\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/Dodanie-zbiornika.gif\" alt=\"\" class=\"wp-image-17645\"\/><\/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 z g\u00f3rnego menu wybierz wykres s\u0142upkowy, kt\u00f3ry znajdziesz w <strong><em>Object &gt; Graph\/Chart &gt; Bar Graph<\/em><\/strong>. Umie\u015b\u0107 go na zbiorniku i skonfiguruj. W ten spos\u00f3b zobrazujesz poziom substancji w zbiorniku. Skonfiguruj parametry obiektu tak, jak 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=\"535\" height=\"601\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/Dodanie-bar-chartu.gif\" alt=\"\" class=\"wp-image-17646\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Zwr\u00f3\u0107 uwag\u0119 na rozwijane menu, znajduj\u0105ce si\u0119 na samej g\u00f3rze, dzi\u0119ki kt\u00f3remu mo\u017cesz wybra\u0107, kt\u00f3rym obiektem chcesz aktualnie zarz\u0105dza\u0107. Nast\u0119pnie dodaj obiekt typu <strong><em>Picture Object<\/em><\/strong> na ekranie.<\/p>\n\n\n\n<p>Wejd\u017a ponownie w bibliotek\u0119\nobiekt\u00f3w graficznych i wybierz grup\u0119 <strong><em>Mixers<\/em><\/strong>, a z niej wska\u017c <strong><em>Magnetic\nMixer<\/em><\/strong>. Podobnie jak w poprzednim kroku, dostosuj rozmiar i wygl\u0105d\nobiektu. <\/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=\"613\" height=\"488\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/Dodanie-mixeru.gif\" alt=\"\" class=\"wp-image-17647\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Dodaj przycisk do startu dzia\u0142ania programu, wybieraj\u0105c\u00a0<em><strong>Object > Bit Button<\/strong><\/em>\u00a0z g\u00f3rnego menu. Nast\u0119pnie w zak\u0142adce\u00a0<em><strong>Label<\/strong><\/em>\u00a0przypisz odpowiednie grafiki dla stan\u00f3w\u00a0<em><strong>ON Picture<\/strong><\/em>\u00a0i\u00a0<em><strong>OFF Picture<\/strong><\/em>. Znajdziesz je w tej samej bibliotece co poprzednio, w folderze\u00a0<em><strong>3D Pushbuttons<\/strong><\/em>. Pami\u0119taj o funkcjach\u00a0<em><strong>Transparent<\/strong><\/em>\u00a0i\u00a0<em><strong>Fit To Object<\/strong>.<\/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=\"613\" height=\"488\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/Dodanie-bit-button.gif\" alt=\"\" class=\"wp-image-17648\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Analogicznie dodaj obiekt <strong><em>Bit Lamp<\/em><\/strong> wybieraj\u0105c odpowiednie grafiki z folderu <strong><em>Lights<\/em><\/strong>. Rozmie\u015b\u0107 obiekty na ekranie jak 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-large\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"434\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image07-840x434.png\" alt=\"\" class=\"wp-image-17649\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image07-840x434.png 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image07-768x397.png 768w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image07.png 1031w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Teraz dodaj kolejny obiekt graficzny przypominaj\u0105cy zbiornik, znajdziesz go w zak\u0142adce\u00a0<em><strong>Tanks1<\/strong><\/em>. Umie\u015b\u0107 go w lewym g\u00f3rnym rogu ekranu. Dostosuj rozmiar i parametry zaimportowanej grafiki oraz umie\u015b\u0107 na nowym kontenerze pole tekstowe, wybieraj\u0105c z g\u00f3rnego menu\u00a0<em><strong>Draw > Text<\/strong><\/em>. Kliknij na pole tekstowe dwukrotnie i zmieniaj\u0105c parametry wy\u015bwietlanego tekstu dostosuj je tak, aby opis wygl\u0105da\u0142 tak jak na rysunku 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=\"121\" height=\"121\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image08.png\" alt=\"\" class=\"wp-image-17651\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Skorzystaj teraz z opcji\u00a0<em><strong>Pipeline<\/strong><\/em>, kt\u00f3ra znajduje si\u0119 w zak\u0142adce\u00a0<em><strong>Object<\/strong><\/em>\u00a0w g\u00f3rnym menu. Z jej pomoc\u0105 narysuj ruroci\u0105g, kt\u00f3ry po\u0142\u0105czy zbiornik z kontenerem oraz dostosuj jego parametry w ustawieniach.<\/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=\"613\" height=\"488\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/Tworzenie-rurociagu.gif\" alt=\"\" class=\"wp-image-17653\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Analogicznie poprowad\u017a drugi ruroci\u0105g od do\u0142u kontenera w praw\u0105 stron\u0119 ekranu, jako odp\u0142yw.<\/p>\n\n\n\n<p>W nast\u0119pnym kroku dodaj grafiki przedstawiaj\u0105ce zawory, podobnie jak wcze\u015bniej za pomoc\u0105 funkcji\u00a0<em><strong>Picture Display<\/strong><\/em>. Zacznij od parametr\u00f3w graficznych, tzn. wybierz dla dw\u00f3ch stan\u00f3w obiektu dwie r\u00f3\u017cne grafiki, wybieraj\u0105c tak jak poprzednio obiekty z biblioteki, kolejno:\u00a0<em><strong>Hand valve \u2013 horizontal<\/strong><\/em>\u00a0oraz\u00a0<em><strong>Hand valve 2<\/strong><\/em>. Nast\u0119pnie w zak\u0142adce\u00a0<em><strong>General<\/strong><\/em>\u00a0przypisz monitorowan\u0105 zmienn\u0105\u00a0<em><strong>$U10.1<\/strong><\/em>, w zale\u017cno\u015bci od kt\u00f3rej b\u0119dzie si\u0119 wy\u015bwietla\u0142a jedna lub druga grafika.<\/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=\"1237\" height=\"538\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image09.png\" alt=\"\" class=\"wp-image-17656\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image09.png 1237w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image09-840x365.png 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image09-768x334.png 768w\" sizes=\"auto, (max-width: 1237px) 100vw, 1237px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Po skonfigurowaniu zaworu wyjd\u017a z jego ustawie\u0144, skopiuj go (standardowo Ctrl+C) i wstaw kopi\u0119 na drugim zestawie rur, kt\u00f3ry poprowadzony jest z do\u0142u kontenera.<\/p>\n\n\n\n<p>Wejd\u017a w jego ustawienia i zmie\u0144 tylko jego monitorowan\u0105 warto\u015b\u0107 zmienn\u0105 na&nbsp;<strong><em>$U10.2<\/em><\/strong>, a nast\u0119pnie zaakceptuj wprowadzone zmiany. Po dodaniu oraz skonfigurowaniu zawor\u00f3w.<\/p>\n\n\n\n<p>Upewnij si\u0119, \u017ce o niczym nie zapomnia\u0142e\u015b\/a\u015b, skompiluj program.<\/p>\n\n\n\n<p>Przejd\u017a teraz do ekranu\u00a0<strong><em>DANE<\/em><\/strong>. Wstaw w nim obiekt\u00a0<strong><em>Numeric Display<\/em><\/strong>\u00a0i w jego ustawieniach przypisz mu\u00a0<strong><em>Monitoring Adress<\/em><\/strong>\u00a0jako\u00a0<strong><em>$U0<\/em><\/strong>. Nast\u0119pnie, zaznacz opcj\u0119\u00a0<strong><em>External Label<\/em><\/strong>\u00a0w g\u00f3rnej cz\u0119\u015bci okna i wybierz now\u0105 zak\u0142adk\u0119, kt\u00f3ra odpowiada tej opcji.<\/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=\"424\" height=\"622\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/Dodanie-numeric-display.gif\" alt=\"\" class=\"wp-image-17657\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W polu&nbsp;<strong><em>Text<\/em><\/strong>&nbsp;wpisz POZIOM. Warto\u015b\u0107 wy\u015bwietlana b\u0119dzie symulowa\u0107 poziom cieczy w g\u0142\u00f3wnym zbiorniku.<\/p>\n\n\n\n<p>W podobny spos\u00f3b dodaj nast\u0119pnie trzy lampy sygnalizacyjne (<strong><em>Bit Lamp<\/em><\/strong>). Przypisz do nich kolejno bity\u00a0<strong><em>$U10.0, $U10.1\u00a0<\/em><\/strong>oraz\u00a0<strong><em>$U10.2<\/em><\/strong>. Rozmie\u015b\u0107 je podobnie jak 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=\"662\" height=\"431\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/05\/image10.png\" alt=\"\" class=\"wp-image-17658\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Testowanie programu w symulatorze\noffline<\/strong><\/h2>\n\n\n\n<p>Zapisz, skompiluj i przetestuj program w symulatorze offline, aby sprawdzi\u0107 czy dodane przez ciebie funkcje dzia\u0142aj\u0105 w spos\u00f3b poprawny.<\/p>\n\n\n\n<p>Je\u015bli wszystko jest w porz\u0105dku, to w ekranie&nbsp;<em><strong>DANE<\/strong><\/em>&nbsp;po uruchomieniu programu powiniene\u015b\/powinna\u015b obserwowa\u0107 wszystkie trzy bit lampy w stanie niskim (kolor czerwony i komunikat&nbsp;<em><strong>OFF<\/strong><\/em>), a warto\u015b\u0107&nbsp;<em><strong>POZIOM<\/strong><\/em>&nbsp;powinna wskazywa\u0107 0.<\/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\"><img loading=\"lazy\" decoding=\"async\" width=\"1037\" height=\"685\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/5_12.png\" alt=\"\" class=\"wp-image-8555\" srcset=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/5_12.png 1037w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/5_12-840x555.png 840w, https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/5_12-768x507.png 768w\" sizes=\"auto, (max-width: 1037px) 100vw, 1037px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div class=\"link-box d-flex align-items-center\">\r\n\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/themes\/poradnik\/public\/images\/icons\/icon-link.svg\" alt=\"arrow\" class=\"ml-3\">\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t<div><p><!-- wp:heading --><\/p>\n<h2 class=\"wp-block-heading\">Materia\u0142y uzupe\u0142niaj\u0105ce \u2013 dla tych, kt\u00f3rzy chc\u0105 wi\u0119cej:<\/h2>\n<p><!-- \/wp:heading --> <!-- wp:list {\"className\":\"bulleted\"} --><\/p>\n<ul class=\"bulleted\">\n<li style=\"list-style-type: none;\">\n<ul class=\"bulleted\"><!-- wp:list-item --><\/p>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=Vna6RybDl6I&amp;feature=youtu.be\">Lekcja w postaci filmu, je\u015bli wolisz ogl\u0105da\u0107 zamiast czyta\u0107<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --> <!-- wp:list-item --><\/p>\n<ul class=\"bulleted\">\n<li style=\"list-style-type: none;\">\n<ul class=\"bulleted\">\n<li><a href=\"https:\/\/download.astor.com.pl\/dokumentacja\/Astraada\/Oprogramowanie%20narz%C4%99dziowe\/Astraada%20HMI%20CFG\/Aktualizacje%20oprogramowania\/Astraada-HMI-nowe-obiekty-graficzne.zip\">Dodatkowa baza symboli graficznych, zgodna z nowoczesnymi trendami projektowania aplikacji HMI<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --> <!-- wp:list-item --><\/p>\n<ul class=\"bulleted\">\n<li style=\"list-style-type: none;\">\n<ul class=\"bulleted\">\n<li><a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/kurs-hmi-scada\/\">Kurs projektanta system\u00f3w HMI\/SCADA<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><!-- \/wp:list-item --><\/p>\n<p><!-- \/wp:list --><\/p>\n<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>W tym odcinku kursu pozna\u0142e\u015b\/a\u015b bibliotek\u0119 element\u00f3w graficznych dost\u0119pnych w <a href=\"https:\/\/www.astor.com.pl\/produkty\/sterowanie\/panele-operatorskie\/astraada-hmi-panel.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"oprogramowaniu Astraada HMI CFG (opens in a new tab)\">oprogramowaniu Astraada HMI CFG<\/a> oraz spos\u00f3b dodawania i edytowania obiekt\u00f3w graficznych na ekranie. W kolejnym odcinku poznasz zmienne oraz ich typy. <\/strong><\/p>\n\n\n\n<p><strong>Je\u017celi masz jakie\u015b pytania na tym etapie kursu, napisz je w komentarzu \u2013 ch\u0119tnie odpowiemy \ud83d\ude42<\/strong><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>W kolejnej cz\u0119\u015bci kursu <strong><a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jakie-typy-zmiennych-wykorzystywane-sa-w-panelach-operatorskich-kurs-programowania-paneli-hmi-cz-5\/?preview=true&amp;_thumbnail_id=8568\">\u201eJakie typy zmiennych wykorzystywane s\u0105 w panelach operatorskich? | Kurs programowania paneli HMI cz.5\u201d<\/a><\/strong><a href=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jakie-typy-zmiennych-wykorzystywane-sa-w-panelach-operatorskich-kurs-programowania-paneli-hmi-cz-5\/?preview=true&amp;_thumbnail_id=8568\"> <\/a>dowiesz si\u0119:<\/p>\n\n\n\n<ul class=\"bulleted wp-block-list\">\n<li>co to s\u0105 zmienne i do czego s\u0142u\u017c\u0105,<\/li>\n\n\n\n<li>jakie typy zmiennych s\u0105 dost\u0119pne w panelach\noperatorskich,<\/li>\n\n\n\n<li>jak przypisa\u0107 nazwy do zmiennych u\u017cywanych w\naplikacji.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Autorzy:<\/strong><br>Pawe\u0142 Podsiad\u0142o<br>Ewelina Nizio\u0142ek\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zobacz jak rozbudowa\u0107 aplikacj\u0119 na panel HMI o obiekty graficzne.<\/p>\n","protected":false},"author":50,"featured_media":8556,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[16,156,96,41],"class_list":["post-8543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bez-kategorii","tag-astraada","tag-astraada-hmi-cfg","tag-astraada-hmi-panel","tag-panele-operatorskie"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Podstawowe obiekty graficzne u\u017cywane w systemach HMI | Kurs HMI<\/title>\r\n<meta name=\"description\" content=\"W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie aplikacji, kt\u00f3r\u0105 b\u0119dziesz rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca mieszaniem kolor\u00f3w.\" \/>\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\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\" \/>\r\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Podstawowe obiekty graficzne u\u017cywane w systemach HMI | Kurs HMI\" \/>\r\n<meta property=\"og:description\" content=\"W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie aplikacji, kt\u00f3r\u0105 b\u0119dziesz rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca mieszaniem kolor\u00f3w.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Poradnik Automatyka\" \/>\r\n<meta property=\"article:published_time\" content=\"2020-04-08T05:17:43+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2023-05-15T16:09:19+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"914\" \/>\r\n\t<meta property=\"og:image:height\" content=\"503\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Mateusz Fas\" \/>\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=\"Mateusz Fas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\"},\"author\":{\"name\":\"Mateusz Fas\",\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/person\/7029e2ba4cc4e4e1c9bfd3b6a47a8b67\"},\"headline\":\"Jak zaprojektowa\u0107 interfejs graficzny? Podstawowe obiekty graficzne wykorzystywane w systemach HMI | Kurs programowania paneli HMI odc. 4\",\"datePublished\":\"2020-04-08T05:17:43+00:00\",\"dateModified\":\"2023-05-15T16:09:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\"},\"wordCount\":958,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg\",\"keywords\":[\"Astraada\",\"Astraada HMI CFG\",\"Astraada HMI Panel\",\"Panele operatorskie\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\",\"url\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\",\"name\":\"Podstawowe obiekty graficzne u\u017cywane w systemach HMI | Kurs HMI\",\"isPartOf\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg\",\"datePublished\":\"2020-04-08T05:17:43+00:00\",\"dateModified\":\"2023-05-15T16:09:19+00:00\",\"description\":\"W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie aplikacji, kt\u00f3r\u0105 b\u0119dziesz rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca mieszaniem kolor\u00f3w.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage\",\"url\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg\",\"contentUrl\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg\",\"width\":914,\"height\":503},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Bez kategorii\",\"item\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/category\/bez-kategorii\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jak zaprojektowa\u0107 interfejs graficzny? Podstawowe obiekty graficzne wykorzystywane w systemach HMI | Kurs programowania paneli HMI odc. 4\"}]},{\"@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\/7029e2ba4cc4e4e1c9bfd3b6a47a8b67\",\"name\":\"Mateusz Fas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/M.-Fas.jpg\",\"contentUrl\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/M.-Fas.jpg\",\"caption\":\"Mateusz Fas\"},\"description\":\"Absolwent Mechaniki i Budowy Maszyn na AGH. Absolwent Zarz\u0105dzania i In\u017cynierii Produkcji. W ASTOR aktualnie zajmuje si\u0119 opiek\u0105 nad produktami z oferty Astraada HMI oraz PC.\",\"sameAs\":[\"www.linkedin.com\/in\/mateusz-fas-38a6631a3\/\"],\"url\":\"https:\/\/www.astor.com.pl\/poradnikautomatyka\/autor\/mateuszf\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Podstawowe obiekty graficzne u\u017cywane w systemach HMI | Kurs HMI","description":"W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie aplikacji, kt\u00f3r\u0105 b\u0119dziesz rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca mieszaniem kolor\u00f3w.","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\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/","og_locale":"pl_PL","og_type":"article","og_title":"Podstawowe obiekty graficzne u\u017cywane w systemach HMI | Kurs HMI","og_description":"W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie aplikacji, kt\u00f3r\u0105 b\u0119dziesz rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca mieszaniem kolor\u00f3w.","og_url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/","og_site_name":"Poradnik Automatyka","article_published_time":"2020-04-08T05:17:43+00:00","article_modified_time":"2023-05-15T16:09:19+00:00","og_image":[{"width":914,"height":503,"url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg","type":"image\/jpeg"}],"author":"Mateusz Fas","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Mateusz Fas","Szacowany czas czytania":"8 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#article","isPartOf":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/"},"author":{"name":"Mateusz Fas","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/person\/7029e2ba4cc4e4e1c9bfd3b6a47a8b67"},"headline":"Jak zaprojektowa\u0107 interfejs graficzny? Podstawowe obiekty graficzne wykorzystywane w systemach HMI | Kurs programowania paneli HMI odc. 4","datePublished":"2020-04-08T05:17:43+00:00","dateModified":"2023-05-15T16:09:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/"},"wordCount":958,"commentCount":2,"publisher":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#organization"},"image":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg","keywords":["Astraada","Astraada HMI CFG","Astraada HMI Panel","Panele operatorskie"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/","name":"Podstawowe obiekty graficzne u\u017cywane w systemach HMI | Kurs HMI","isPartOf":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage"},"image":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg","datePublished":"2020-04-08T05:17:43+00:00","dateModified":"2023-05-15T16:09:19+00:00","description":"W tej cz\u0119\u015bci kursu rozpoczniesz tworzenie aplikacji, kt\u00f3r\u0105 b\u0119dziesz rozbudowywa\u0142\/a o kolejne funkcje. B\u0119dzie to aplikacja steruj\u0105ca mieszaniem kolor\u00f3w.","breadcrumb":{"@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#primaryimage","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg","contentUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2020\/04\/kurs-hmi-cz4-start.jpg","width":914,"height":503},{"@type":"BreadcrumbList","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/jak-zaprojektowac-interfejs-graficzny-podstawowe-obiekty-graficzne-wykorzystywane-w-systemach-hmi-programowanie-paneli-hmi-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Bez kategorii","item":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/category\/bez-kategorii\/"},{"@type":"ListItem","position":2,"name":"Jak zaprojektowa\u0107 interfejs graficzny? Podstawowe obiekty graficzne wykorzystywane w systemach HMI | Kurs programowania paneli HMI odc. 4"}]},{"@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\/7029e2ba4cc4e4e1c9bfd3b6a47a8b67","name":"Mateusz Fas","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/#\/schema\/person\/image\/","url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/M.-Fas.jpg","contentUrl":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-content\/uploads\/2023\/04\/M.-Fas.jpg","caption":"Mateusz Fas"},"description":"Absolwent Mechaniki i Budowy Maszyn na AGH. Absolwent Zarz\u0105dzania i In\u017cynierii Produkcji. W ASTOR aktualnie zajmuje si\u0119 opiek\u0105 nad produktami z oferty Astraada HMI oraz PC.","sameAs":["www.linkedin.com\/in\/mateusz-fas-38a6631a3\/"],"url":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/autor\/mateuszf\/"}]}},"_links":{"self":[{"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts\/8543","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\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/comments?post=8543"}],"version-history":[{"count":2,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts\/8543\/revisions"}],"predecessor-version":[{"id":17661,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/posts\/8543\/revisions\/17661"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/media\/8556"}],"wp:attachment":[{"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/media?parent=8543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/categories?post=8543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wp-json\/wp\/v2\/tags?post=8543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}