Do Projektu iAutomatyka dołączyli:

Skąd brać grafiki do wizualizacji SCADA i paneli HMI?


Wbrew pozorom, szata graficzna ekranu wizualizacji jest bardzo ważna. Klienta lub operatora nie interesują zaawansowane skrypty tylko to czy ekrany są ładne, przejrzyste i intuicyjne. Same napisy, lampki i przyciski to za mało aby stworzyć eleganckie ekrany wizualizacji. Konieczne jest wykorzystanie grafik, a przecież większość systemów SCADA i paneli HMI ma możliwość implementacji obrazów, więc czemu nie korzystać z tej funkcji.

Ten artykuł kierowany jest do osób rozpoczynających swoją przygodę z budowaniem wizualizacji. Doświadczeni programiści SCADA z pewnością mają swoje patenty i sposoby na grafiki, ale może i tu znajdą coś co będą mogli wykorzystać w swojej codziennej pracy z wizualizacjami. Zapraszamy!

Grafika rastrowa i grafika wektorowa

Grafikę komputerową możemy podzielić na dwa główne rodzaje: grafikę rastrową i grafikę wektorową. Ich cel jest wspólny, zapisać w postaci bitów pewien obraz, jednak podejście do tego zapisu jest zupełnie inne. Poniżej postaramy się pokrótce opisać te rodzaje grafik i pokazać główne różnice.

Grafika rastrowa jest sposobem prezentacji obrazu za pomocą prostokątnej siatki regularnie położonych pikseli o tej samej wielkości. Każdy piksel zawiera informacje o swoim kolorze. Z grafiką rastrową mamy styczność wszędzie. Jest ona wykorzystywana praktycznie na każdym portalu internetowym. Cała fotografia cyfrowa opiera się na grafice rastrowej. Do popularnych formatów plików należą między innymi: JPEG, PNG, GIF, BMP, TIFF, ICO.

W grafice wektorowej do opisu obrazu wykorzystuje obiekty składające się  z punktów, linii i figur geometrycznych umieszczonych w układzie współrzędnych. Każdy obiekt ma określone parametry opisujące między innymi kolor, wypełnienie, grubość linii, stopień przezroczystości. Takie podejście do zapisu umożliwia dowolne powiększanie lub obracanie obrazu, co w przypadku grafiki rastrowej zaowocuje tak zwaną „pikselozą”.

Jak widać na powyższym przykładzie, powiększenie obrazka PNG spowodowało pojawienie się widocznych pikseli i ogólną utratę jakości. W przypadku obrazu SVG nie tylko nie stracił on na jakości, ale też widoczne są dodatkowe szczegóły. Powyższy przykład został wykonany w interfejsie WebHMI (multisterownik SCADA) o którym więcej możesz przeczytać na stronie https://zestapro.pl

Grafika wektorowa nie nadaje się jednak do zapisywania zdjęć, na których mamy dużo szczegółów i cieni. Mniejsza popularność tego typu grafiki wiąże się z niekompatybilnością niektórych formatów z różnymi urządzeniami i aplikacjami oraz z przyzwyczajenia ludzi do grafiki rastrowej. Popularne typy rozszerzeń plików wektorowych to: AI, CDR, EPS, PDF, SVG, SWF. Jako ciekawostkę można dodać, że grafiki wektorowe można otworzyć notatnikiem i zmieniać współrzędne punktów czy parametry kolorów.

Przy wyborze formatu grafik, które chcemy wykorzystać na panelach wizualizacji musimy wziąć pod uwagę możliwość wykorzystania przezroczystego tła, bo przecież nikt nie chce widzieć na swoich ekranach wizualizacji brzydkich, białych prostokątów wokół każdej grafiki. Przezroczyste tło jest dostępne w obrazach z rozszerzeniami PNG, GIF i ICO oraz we wszystkich formatach grafiki wektorowej w tym SVG, które zalecamy do stosowania w WebHMI.

Reklama

Przygotowywanie własnych grafik

Odpowiadając na pytanie z tytułu tego artykułu, najlepszym źródłem grafik do ekranów wizualizacji jest ich własne tworzenie. Nie musimy się wtedy martwić o prawa autorskie, nie jesteśmy ograniczeni elementami z domyślnych bibliotek zaimplementowanych do naszej SCADY oraz mamy pełną kontrolę nad wyglądem tych grafik i symboli. Jestem pewien że wiele osób uważa, że są tylko programistami a nie artystami i nie umieją rysować, ale przecież rysować każdy może, trochę lepiej lub trochę gorzej :). Na naszą korzyść działa też obecny trend minimalizmu i prostoty wyglądu, który mówi: „im prościej tym lepiej”. Przeszukaj też google na frazę „flat design” – jest to coraz bardziej popularny styl.

Programów do tworzenia i edycji grafik jest bardzo dużo, zarówno płatnych jak i bezpłatnych. W tym artykule przedstawię cztery bezpłatne opcje, które zawierają wiele zaawansowanych funkcji i dają efekty zbliżone do tych płatnych i często bardzo drogich programów.

  • Inkscape

Inkscape to darmowy program to tworzenia grafiki wektorowej. Zawiera wszystkie potrzebne funkcje do tworzenia nawet bardzo zaawansowanych grafik wektorowych, a jednocześnie jest bardzo prosty w obsłudze. W sieci można znaleźć wiele poradników pokazujących pierwsze kroki z tym programem i to wystarczy, aby zacząć przygotowywać własne grafiki wektorowe. Stworzone obrazy można zapisać w formacie SVG lub jako grafika rastrowa w PNG. Link do pobrania tego programu znajdziesz tutaj.

  • Edytor obrazów GIMP

GIMP to program do edycji grafiki rastrowej. Nie nadaje się on za bardzo do tworzenia nowych grafik od zera, co nie znaczy, że się nie da. Gimpa należy traktować jako darmowy odpowiednik Photoshopa, który przydaje się zdecydowanie bardziej do edycji obrazów, na przykład gdy chcemy ze zdjęcia wyciąć jakiś przedmiot, zmienić jego proporcje, dokleić inny element lub usunąć tło z obrazka. Podobnie jak w przypadku Inkscape, tutaj również znajdziemy wiele poradników, a na różnych forach uzyskamy odpowiedź na praktycznie każde nurtujące nas pytanie. GIMP obsługuje szereg formatów graficznych w tym te, które nas najbardziej interesują: PNG, GIF, ICO. Pliki instalacyjne tego programu znajdziemy tutaj.

  • ScreenToGif

ScreenToGif to mały i prosty programik do tworzenia obrazów z rozszerzeniem GIF. Nazwa tego programu zdradza główną funkcję, czyli nagrywanie ekranu i zapisanie nagrania jako obraz GIF. Dodatkowo możemy też zaimportować kilka obrazów statycznych, ustalić czasy pomiędzy kolejnymi klatkami i zapisać tak utworzoną animację jako GIF. Jeśli Twoja SCADA obsługuje ten format plików, to program ScreenToGif pozwoli na szybkie stworzenie potrzebnych obrazów. Link do pobrania.

Tak. Ten gif został utworzony za pomocą tego programu 🙂

  • Method Draw – edytor grafiki wektorowej online

Ostatnia pozycja na tej liście to pewnego rodzaju ciekawostka. Jest to przeglądarkowy edytor grafiki wektorowej. Nie jest on tak rozbudowany jak Inkscape lub inne programy do grafiki wektorowej ale z pewnością wystarczy na przykład do szybkiego przygotowania prostej grafiki z jakimś napisem. Edytor można znaleźć pod tym adresem.

Biblioteki z darmowymi grafikami

Co jeśli nie chcemy jednak rysować własnych symboli lub potrzebujemy na szybko symbol na przykład koła zębatego? Możemy wtedy skorzystać z internetowych bibliotek grafik i symboli. Poniżej przedstawię kilka ciekawych stron na których można szukać takich grafik.

  • Opto22

Na stronie opto22.com znajdziemy kilkaset grafik przygotowanych z myślą o wizualizacji procesów przemysłowych. Wszystkie obrazy są w formacie SVG, które dodatkowo możemy transformować lub edytować kolorystykę przed pobraniem. Wszystkie dostępne obrazy są darmowe i nie wymagają uznania autorstwa.

  • Flaticon

Flaticon to strona na której znajduje się blisko milion ikon i symboli z różnych działów tematycznych. Wyszukując hasła takie jak „cog”, „industry”, „reservoir” bez problemu znajdziemy wiele grafik. Każdą grafikę możemy pobrać jako pliki SVG, PNG, PSD lub EPS, a wykorzystanie tych grafik w celach komercyjnych jest możliwe po uznaniu autorstwa.

  • Icons8

Na Icons8 znajduje się ponad 70 tysięcy obrazków, które tylko czekają na wykorzystanie na ekranach wizualizacji. Możemy zmieniać kolorystykę każdego symbolu lub dodawać tekst przed pobraniem. Za darmo można pobrać obrazki o ograniczonej wielkości i tylko w formacie PNG oraz jeśli chcemy taki obrazek wykorzystać to konieczne jest uznanie autorstwa.

  • Iconarchive

Iconarchive jest platformą do wyszukiwania grafik i symboli z różnych źródeł. Ich baza zawiera ponad 700 tysięcy obrazków. Dostępne formaty, wielkości oraz licencje są różne i zależą od wybranej grafiki.

  • OpenAutomationSoftware 

Na stronie openautomationsoftware.com możliwe jest pobranie paczki 500 grafik do wykorzystania na ekranie wizualizacji. Znajdziemy tu elementy takie jak silniki, pompy, zbiorniki, zawory, rurociągi czy kolanka, a każdy element w kilku kolorach i wielkościach. „Cena” tych grafik to Twoje dane podawane przy rejestracji.

Podsumowanie

Mam nadzieję, że informacje zamieszczone w tym artykule przydadzą się komuś w przyszłej pracy z ekranami wizualizacji. Pamiętajmy, że najlepszy efekt końcowy osiągniemy tworząc własne grafiki do naszych wizualizacji, a biblioteki grafik mogą być bardzo przydatne w poszukiwaniu inspiracji do tworzonych obrazów. Zapraszamy również zapoznać się z proponowanym przez nas sterownikiem SCADA WebHMI który importuje grafiki wektorowe SVG i inne aż miło 🙂

Masz jakieś ciekawe źródło grafik do SCADA? Podziel się z nami w komentarzu!

Autor:
Łukasz Gudel we współpracy z ZestaPRO.pl



24 lipca 2018 / Kategoria: , , ,
  • Autor: ZestaPRO - importer WebHMI
  • ZestaPRO - importer multisterownika SCADA WebHMI. WebHMI to urządzenie które ułatwi Tobie zbudowanie systemu wizualziacji SCADA, ponieważ jest to jeden sterownik z wbudowanym serwerem WEB. Nie ma limitów rejestrów, nie potrzeba żadnych licencji ani oprogramowania. Wystarczy przeglądarka internetowa. Sprawdź na zestapro.pl
  • Profil Autora
  • https://zestapro.pl/

Reklama

Newsletter

Zapisz się i jako pierwszy otrzymuj nowości!

Zapoznałem się i akceptuję klauzulę informacyjną.



.

NAJNOWSZE PUBLIKACJE OD UŻYTKOWNIKÓW I FIRM

>KLIKNIJ<

Przybyłem, otworzyłem, podłączyłem – unboxing zestawu XV100 BOX od EATON

Przybyłem, otworzyłem, podłączyłem – unboxing zestawu XV100 BOX od EATON

>KLIKNIJ<

Jak skonfigurować router przemysłowy 4G LTE: server OpenVPN, zdalny dostęp i DDNS – na przykładzie Teltonika RUT240

Jak skonfigurować router przemysłowy 4G LTE: server OpenVPN, zdalny dostęp i DDNS – na przykładzie Teltonika RUT240

>KLIKNIJ<

ctrlX AUTOMATION: Dwa kroki przed konkurencją

ctrlX AUTOMATION: Dwa kroki przed konkurencją

>KLIKNIJ<

ABB rozszerza portfolio szybkich robotów przemysłowych dzięki przejęciu Codian

ABB rozszerza portfolio szybkich robotów przemysłowych dzięki przejęciu Codian

>KLIKNIJ<

Wprowadzenie do Open Core Engineering

Wprowadzenie do Open Core Engineering

>KLIKNIJ<

Współpraca sterownika LOGO! 8 z panelami HMI KTP Basic

Współpraca sterownika LOGO! 8 z panelami HMI KTP Basic

>KLIKNIJ<

ReeR Safe Gate kurtyna z funkcją mutingu

ReeR Safe Gate kurtyna z funkcją mutingu

>KLIKNIJ<

Patchcordy na cały świat – odbierz darmowe próbki nowoczesnych przewodów ETHERLINE

Patchcordy na cały świat – odbierz darmowe próbki nowoczesnych przewodów ETHERLINE

>KLIKNIJ<

Cyfryzacja – Samodzielnie czy z partnerem? Zrobić czy kupić? Jak przyspieszyć proces wdrażania IIoT

Cyfryzacja – Samodzielnie czy z partnerem? Zrobić czy kupić? Jak przyspieszyć proces wdrażania IIoT

>KLIKNIJ<

10 pytań o szafy sterownicze #1

10 pytań o szafy sterownicze #1

>KLIKNIJ<

Nie chciałbyś zostać Mistrzem Automatyki 2020?

Nie chciałbyś zostać Mistrzem Automatyki 2020?

>KLIKNIJ<

5 ciekawych funkcjonalności w sterownikach PLC

5 ciekawych funkcjonalności w sterownikach PLC

>KLIKNIJ<

Automatyzacja procesów: niewielki początek, duży potencjał rozwoju

Automatyzacja procesów: niewielki początek, duży potencjał rozwoju

>KLIKNIJ<

ProCobot: Technicznie Rzecz Biorąc

ProCobot: Technicznie Rzecz Biorąc

>KLIKNIJ<

Pomiar parametrów środowiskowych z Advantech WISE 4200

Pomiar parametrów środowiskowych z Advantech WISE 4200

>KLIKNIJ<

Systemy automatyki, ewolucja Ethernetu, fotowoltaika, szafy – Technology Days Online

Systemy automatyki, ewolucja Ethernetu, fotowoltaika, szafy – Technology Days Online

>KLIKNIJ<

Sterowanie serwonapędu IndraDrive poprzez sieć Profinet

Sterowanie serwonapędu IndraDrive poprzez sieć Profinet

>KLIKNIJ<

Zdalny dostęp serwisowy a bezpieczeństwo – Wywiad z Bartkiem Morawskim Sabur

Zdalny dostęp serwisowy a bezpieczeństwo – Wywiad z Bartkiem Morawskim Sabur

>KLIKNIJ<

Analiza sygnałów z enkoderów inkrementalnych w jeszcze niższej cenie i na mniejszej przestrzeni.

Analiza sygnałów z enkoderów inkrementalnych w jeszcze niższej cenie i na mniejszej przestrzeni.

>KLIKNIJ<

Złączki do węży SILVYN® – mniejsze opakowania

Złączki do węży SILVYN® – mniejsze opakowania





MOŻESZ SIĘ TYM ZAINTERESOWAĆ




KATEGORIE ARTYKUŁÓW
POLECANE ARTYKUŁY
Wydarzenia