Siemens 1200/1500 Webserwer – Tworzenie własnej strony internetowej

W poprzednim artykule zbliżyłem temat konfiguracji usługi Webserver, którą dostarcza sterownik Siemens S7-1200/1500. Usługa ta umożliwia wymianę danych pomiędzy sterownikiem a użytkownikiem przy użyciu przeglądarki internetowej.

Dziś natomiast chciałbym przedstawić funkcję User pages, która jest częścią usługi Webserver. User pages, czyli inaczej strony użytkownika, które dają nam możliwość stworzenia własnej strony internetowej przy użyciu której możemy sterować oraz nadzorować dane z PLC. Funkcja ta jest bardzo pomocna w momencie, gdy w naszym zakładzie nie posiadamy systemu nadrzędnego a chcielibyśmy przekazać technologom możliwość kontroli procesu bez koniczności bezpośredniego łączenia się z sterownikiem PLC.

Zapraszam do lektury

Rekomenduję pobranie projektu strony internetowej umieszczonego w poniższym linku. Jest to przykładowa strona internetowa, którą możesz dostosować do swoich potrzeb lub wykorzystać zawarte w nim polecenia do zbudowania własnej strony.

Projekt zawiera poniższe pliki:

  • CSS – to folder, w którym znajduje się plik style.css. Jest to arkusz stylów naszej strony internetowej. Przy pomocy tego pliku możemy zdefiniować jednakowe formatowanie określonych elementów na wielu stronach naszej aplikacji. Jeśli podejmiemy decyzje o zmianie kolorystyki lub wielkości obrazu w nagłówku na wszystkich stronach aplikacji internetowej, możemy to zrobić, wyłącznie modyfikując plik style.css.
  • Jqyery-3.2.1.min jest to plik będący biblioteką języka JavaScript. Dzięki niej dane z sterownika PLC na naszej stronie internetowej będą odświeżane na bieżąco dzięki czemu nie ma potrzeby odświeżać strony przy użyciu klawisza F5. Jest to bardzo pomocne, zwłaszcza gdy chcemy kontrolować przepływy danego strumienia.
  • folder images, to folder,w którym należy przechowywać wszystkie obrazy, które chcemy umieścić na naszej stronie internetowej.


PRZYPISYWANIE ZMIENNYCH:

  • Plik IO_mapping to plik zawierający przypisanie zmiennych, które przechowuje sterownik PLC do zmiennych wykorzystywanych do zbudowania strony internetowej. Tworzenie takiego pliku jest dobrą praktyką, ponieważ w momencie modyfikacji nazwy zmiennej w sterowniku PLC wystarczy zmodyfikować plik IO_mapping. Nieutworzenie pliku IO_mapping skutkuje dokonywaniem zmian w każdym pliku .html w chwili modyfikacji nazwy zmiennej w sterowniku PLC.

Przypisywanie zmiennych PLC do zmiennych kodu HTML możemy zrealizować w poniższy sposób:

METODA 1

  1. Poniższy przykład przedstawia realizację przypisywania wartości do zmiennej, gdy zmienna w sterowniku PLC jest zadeklarowana jako zmienna globalna. Zmienna globalna, czyli zmienna, która zadeklarowana jest w zakładce PLC tags (TIA PORTAL).
"START_HTML" : ":=START:"

METODA 2

2. W sytuacji, gdy chcemy odwołać się do zmiennej w sterowniku zadeklarowanej w obszarze bloku danych (DB) należy dopisać nazwę bloku danych przed nazwą zmiennej.

"LiczbaAHTML" : ":="DODAWANIE_DB".LiczbaA:"

Poniższy rysunek przedstawia strukturę pliku IO_mapping.html, w którym realizowane jest przypisywanie zmiennych. Warto zwrócić szczególną uwagę na przecinki oddzielające wiersze. Ponadto pamiętaj aby w ostatniej linii nie umieszczać przecinka.


Ponadto podczas zapisywania pliku należy pamiętać o dodaniu do nazwy rozszerzenia .html. Przykład za obrazowano na poniższym rysunku.


TWORZENIE STRONY GŁÓWNEJ:

  • Plik index.html. Jest to fundamentalny plik, ponieważ określa stronę startową naszej aplikacji. Struktura pliku zawiera znaczniki takie jak <head> lub <body>. Tworzą one ramy dokumentu i wszystkie informacje będziemy umieszczać pomiędzy nimi. Aplikacja może składać się z dowolnej ilości podstron, gdzie każda z nich to osobny plik utworzony w ten sam sposób, jak strona główna. Poniższej przedstawiono przykład polecenia umożliwiającego przejście do podstron.
<li><a class="active" title="Strona glowna" href="index.html">Strona glowna</a></li>
<li><a title="Silnik" href="SILNIK.html">Silnik</a></li>

Tworzenie stron WWW bez wcześniejszego zaznajomienia się z tematem jest wyzywaniem stosunkowo złożonym. W związku z tym zachęcam do odwiedzenia blogów opisujących poradniki tworzenia stron WWW w celu wyjaśnienia poszczególnych linijek.

DYNAMICZNE WYŚWIETLANIE OBRAZU W ZALEŻNOŚCI OD STANU:

W zależności od stanu logicznego zmiennej „SILNIK_załacz” przechowywanej w pamięci PLC wyświetlany jest obraz przedstawiający silnik w stanie postoju lub pracy. Dzięki poniższemu kodowi źródłowemu obraz zmienia się w sposób nie wymagający odświeżania strony przy użyciu klawisza F5.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Strony UserPage Siemens</title> 
<script src="jquery-3.2.1.min.js"></script>
<meta http-equiv="Content-Language" content="en-gb" />
<!--<meta http-equiv="refresh" content="30">  --> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>

<p id="Silnik"><img class="pictrue" id="SILNIK_zalaczHTML" src="images/MotorRed.gif"> </p>	


<script type="text/javascript">
SILNIK_zalaczHTML = 0;

$(document).ready(function()

{
$.ajaxSetup({ cache: false });
setInterval(function()
{
$.getJSON("IO_mapping.html", function(data)
{
SILNIK_zalaczHTML = data.SILNIK_zalaczHTML;
$('#SILNIK_zalacz_HTML').text(data.SILNIK_zalacz_HTML);
}
);
if(SILNIK_zalaczHTML == 1) 
	{
	document.getElementById("SILNIK_zalaczHTML").src = "images/MotorGreen.gif";
	}
	else 
	{	
	document.getElementById("SILNIK_zalaczHTML").src = "images/MotorRed.gif";
	}
	
},1000);

});
</script>
</body>
</html>

WYŚWIETLANIE WARTOŚCI ZMIENNEJ ORAZ ZAPISYWANIE DO ZMIENNEJ:

Poniższy kod źródłowy HTML przedstawia możliwość zadeklarowania wartości zmiennej w PLC poprzez zdefiniowanie w czarnym polu wielkości a następnie zatwierdzenie jej poprzez kliknięcie ikony dyskietki. Kolejno zdefiniowana wartość jest programowo przypisywana w sterowniku PLC do nowych zmiennych i wyświetlana na stronie w szarych polach.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Strony UserPage Siemens</title> 
<script src="jquery-3.2.1.min.js"></script>
<meta http-equiv="Content-Language" content="en-gb" />
<!--<meta http-equiv="refresh" content="30">  --> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>

	<label class="ramka" id="LiczbaAHTML">0</label> liczba A
	<input class="poleinput" id='LiczbaA_Set' type="number" 

min="-25" max="100"/>
	<input type="image" id="LiczbaA_Act" class="dyskietka" 

src="images/Dyskietka.png" alt="Wyslij">

	<label class="ramka" id="LiczbaBHTML">0</label> Liczba B
	<input class="poleinput" id='LiczbaB_Set' type="number" 

min="0" max="100"/>
	<input type="image" id="LiczbaB_Act" class="dyskietka" 

src="images/Dyskietka.png" alt="Wyslij">


<script type="text/javascript">
$(document).ready(function()

{
$.ajaxSetup({ cache: false });
setInterval(function()
{

$.getJSON("IO_mapping.html", function(data)
{
$('#LiczbaAHTML').text(data.LiczbaAHTML);
$('#LiczbaBHTML').text(data.LiczbaBHTML);
}
);
},1000);

 $('#LiczbaA_Act').click(function(){
 url="AWP_command.html";
 name='"DODAWANIE_DB".WpiszLiczbaA';
 val=$('input[id=LiczbaA_Set]').val();
 sdata=escape(name)+'='+val;
 $.post(url,sdata,function(result){});
 });


 $('#LiczbaB_Act').click(function(){
 url="AWP_command.html";
 name='"DODAWANIE_DB".WpiszLiczbaB';
 val=$('input[id=LiczbaB_Set]').val();
 sdata=escape(name)+'='+val;
 $.post(url,sdata,function(result){});
 });
});

</script>
</body>
</html>

Zawartość pliku AWP_command:

<!-- AWP_In_Variable Name='"DODAWANIE_DB".WpiszLiczbaA' -->:="DODAWANIE_DB".WpiszLiczbaA:
<!-- AWP_In_Variable Name='"DODAWANIE_DB".WpiszLiczbaB' -->:="DODAWANIE_DB".WpiszLiczbaB:


PODSUMOWANIE CZĘŚCI HTML:

Powyżej przedstawione sposoby zapisywania, odczytywania wartości zmiennych i wyświetlanie obrazków to niewiele z możliwości jakie oferuje wbudowany serwer sterownika Siemens S7. Są to co prawda podstawowe funkcje, lecz umożliwiają zbudowanie strony pozwalającej na swobodne sterowanie procesem oraz jego nadzorowanie. W tym poradniku nie poddałem analizie kodu HTML, lecz wierze, że po chwili skupienia zrozumiesz jego algorytm działania i pozwoli Ci to na stworzenie własnej aplikacji. Umieszczony do pobrania projekt strony internetowej jest nieznacznie rozbudowany o formatowanie strony w menu oraz nagłówek informujący o tytule strony i przedstawiający logo.

KONFIGURACJA STEROWNIKA PLC

W chwili, gdy strona internetowa jest ukończona kolejnym krokiem jest przystąpienie do konfiguracji sterownika PLC. W tym celu należy uruchomić środowisko TIA Portal i utworzyć nowy projekt. Pomocnym materiałem, który jest instrukcją do utworzenia i konfiguracji Webservera jest poprzedni post, do którego prowadzi poniższy link.

Konfiguracja WebServer

1. Aby móc przystąpić do kroku drugiego w tym poście niezbędne jest wykonanie kroku numer 2 oraz 5 z postu do którego prowadzi powyższy link. Krok 2 mówi o aktywowaniu usługi Webserver w zakładce Device Configuration, zaś krok 5 przedstawia instrukcję zdefiniowania adresu IP.

2. Kolejno należy przejść do opcji Device Configuration i utworzyć zakładkę User-defined pages. Naszym oczom powinien ukazać się poniższy widok.

W polu HTML directory należy zdefiniować ścieżkę do folderu, w którym umieszczony jest projekt strony internetowej.

W polu Default HTML page należy wybrać plik zawierający stronę główną projektu. Wybrana strona będzie uruchamiana jako strona startowa.

W polu Application Name należy zadeklarować nazwę pod jaką będzie reprezentowany projekt.

W chwili, gdy powyższe pola zostaną uzupełnione należy kliknąć przycisk Generate blocks. W oknie Status wyświetlona zostanie informacja DB Generated w sytuacji poprawnego przebiegu konwertowania plików projektów do bloków danych.

3. Kolejnym krokiem jest wywołanie instrukcji WWW. W tym celu należy przejść do zakładki tworzenia kodu źródłowego programu użytkownika i z biblioteki bloków wybrać funkcję WWW. W polu CTRL_DB należy wpisać domyślną wartość 333. CTRL_DB to numer bloku danych, który jest odpowiedzialny za kontrolę strony. Pole RET_VAL przypisuje do zmiennej wartość całkowitą, która informuję nas o występujących błędach.

4. Po wykonaniu powyższych kroków należy wgrać projekt do sterownika w celu sprawdzenia poprawności działania funkcji Webserwera oraz stron użytkownika.

PAMIĘTAJ!

Aby móc zmieniać wartości zmiennych w sterowniku z poziomu strony internetowej należy być zalogowanym jako użytkownik z uprawnieniami administratora. Jeśli posiadasz sterownik S7-1200 w wersji firmware 3.0 to domyślnym użytkownikiem z uprawnieniami administrora jest użytkownik o loginie: admin, zaś pole hasła należy pozostawić puste po czym kliknąć polecenie Log on. Naomiast jeśli Twój sterownik posiada firmware 4.0 to odwiedź mój poprzedni post o kofiguracji Webserver, w którym opisałem instrukcje tworzenia użytkowników oraz nadawania im praw.

PAMIĘTAJ O MEMORY LOAD!!

Im bardziej rozbudowana aplikacja internetowa tym rozmiar projektu jest większy. Należy pamiętać, że wgrany projekt strony internetowej przechowywany jest w pamięci sterownika co bezpośrednio oddziałowuje na wolną przestrzeń przeznaczoną na program użytkownika. Z pomocą przychodzi rozszerzenia pamięci Load Memory przy użyciu karty SMC (Simatic Memory Card), która zwiększa wielkość Load Memory. Maksymalny rozmiar karty SMC to rozmiar 32 MB.  Ponadto warto wspomnieć, że karty SMC oraz MMC są formatowane przez producenta Siemens i w momencie umieszczenia jej w komputerze i sformatowaniu przy użyciu systemu operacyjnego Windows tracą swoja kompatybilność z sterownikami PLC.

W sieci można również kupić kartę pamięci MMC (Micro memory card), która jest przeznaczona dla sterowników S7-300.

Aby uzyskać dostęp do podglądu wolnej przestrzenia pamięci należy połączyć się z sterownikiem w tryb Online a następnie przejść do zakładki Online & diagnostick.

W momencie pojawienia się problemów lub zastrzeżeń zapraszam do dyskusji w komentarzach lub o kontakt drogą mejlową na adres:

automatykablog@gmail.com

0 0 vote
Article Rating
Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments