FAQ Web Pages 8

Tworzenie projektu Modbus w S7-1200 PLC
Siemens Industry Online Support
Document zosta zaczerpnity ze stron supportu online firmy Siemens. Poniszy link
prowadzi bezporednio do strony z ktrej mona go pobra:
http://support.automation.siemens.com/WW/view/en/58862931
Uwaga
Funkcje i rozwizania opisane w tym artykule ograniczaj si gwnie do realizacji zada
automatyki. Ponadto prosz wzi pod uwag, e musza by uwzgldnione odpowiednie
rodki ochronne w kontekcie bezpieczestwa przemysowego przy podczaniu
sterownika do istniejcego obiektu, sieci zakadowej lub Internetu. Wicej informacji na
temat bezpieczestwa mona znale tutaj:
Jeeli podane informacje nie s wystarczajce, zachcamy do korzystania z forum

internetowego na stronach Service & Support:
http://www.siemens.com/forum-applications
Simatic Step 7 Basic v10.5 S7-1200 PLC

Tworzenie stron WWW dla sterownika S7-1200 FAQ:58862931/PL
Spis treci
1 OPIS ZAGADNIENIA OMAWIANEGO W DOKUMENCIE .........................................................................3
2 ROZWIZANIE W ZAKRESIE AUTOMATYKI ............................................................................................4
2.1 OGLNY PRZEGLD ROZWIZANIA ............................................................................................................4
2.2 OPIS ZAWARTOCI APLIKACJI ....................................................................................................................8
2.2.1 Zawarto przykadowej aplikacji .................................................................................................8
2.2.2 Opis i przegld interfejsu uytkownika .......................................................................................9
2.3 UYTE KOMPONENTY SPRZTOWE I PROGRAMOWE ................................................................................13
3 PODSTAWY TWORZENIA STRON INTERNETOWYCH .........................................................................15
3.1 OGLNE ZASADY PROJEKTOWANIA STRON INTERNETOWYCH ................................................................15
3.1.1 Zasady HTML ....................................................................................................................................15
3.1.2 Uywanie form..................................................................................................................................17
3.1.3 Podstawy stylu kaskadowego (CSS) ..........................................................................................17
3.1.4 Podstawy JavaScript ......................................................................................................................18
3.1.5 Automatyczne odwieanie strony web ....................................................................................19
3.2 PODSTAWY DOTYCZCE STANDARDOWEJ STRONY WEB ........................................................................21
3.3 PODSTAWY DOTYCZCE STRON UYTKOWNIKA ......................................................................................23
3.3.1 Tworzenie stron uytkownika ......................................................................................................23
3.3.2 Wymagane bloki WWW (SFC99)...............................................................................................25
3.4 WYWIETLANIE ZMIENNYCH CPU NA STRONIE INTERNETOWEJ .............................................................26
3.4.1 Interakcje midzy przegldark internetow a CPU ...............................................................26
3.4.2 Wymagania........................................................................................................................................27
3.4.3 Wymagane bloki WWW (SFC99)...............................................................................................27
3.5 ZAPIS ZMIENNYCH CPU ZE STRONY INTERNETOWEJ ..............................................................................28
3.5.1 Interakcje midzy przegldark internetow a CPU ...............................................................28
3.5.2 Wymagania........................................................................................................................................29
3.5.3 Procedura ..........................................................................................................................................29
3.6 POWIZANIE ZMIENNYCH Z TEKSTEM W PLIKU HTML .............................................................................31
3.6.1 Wymagania........................................................................................................................................32
3.7 TWORZENIE OPTYMALNYCH CZASOWO STRON UYTKOWNIKA (OPCJA) .................................................33
4 MECHANIZMY FUNKCJONALNE APLIKACJI .........................................................................................35
4.1 PODSTAWY FUNKCJONOWANIA PROGRAMU S7 ......................................................................................35
4.1.1 Blok startowy (OB100) ...................................................................................................................36
4.1.2 Main (OB1).........................................................................................................................................37
4.1.3 TankSimu (FB1) ...............................................................................................................................39
4.1.4 DataString (FB2) ..............................................................................................................................41
4.2 PODSTAWY FUNKCJONOWANIA PLIKU HTML .........................................................................................42
4.2.1 Komendy AWP .................................................................................................................................42
4.2.2 Informacje na temat doctype oraz nagwka pliku HTML .....................................................43
4.2.3 Wywietlanie obszarw .................................................................................................................45
4.2.4 Wywietlanie obrazw ...................................................................................................................47
4.2.5 Tworzenie tabel z tekstem .............................................................................................................48
4.2.6 Wywietlanie zmiennych CPU......................................................................................................49
4.2.7 Wywietlanie tekstu poprzez wyliczenia ...................................................................................49
4.2.8 Ustawianie zmiennych w CPU za pomoc wartoci i przycisku .........................................50
4.2.9 Ustawianie zmiennych w CPU tylko za pomoc przycisku ..................................................51
5 KONFIGURACJA I USTAWIENIA ...............................................................................................................52
5.1 PROCEDURA TWORZENIA STRONY INTERNETOWEJ .................................................................................52
5.2 KONFIGURACJA S7-1200 (1214C DC/DC/DC) .....................................................................................53
5.3 TWORZENIE ZMIENNYCH W TABLICY ZMIENNYCH LUB BLOKU DB...........................................................54
5.4 TWORZENIE PLIKW HTML .....................................................................................................................55
5.5 USTAWIENIA WEB SERWERA I GENEROWANIE BLOKW DANYCH ...........................................................56
5.6 TWORZENIE PLIKW HTML .....................................................................................................................57
5.7 TWORZENIE, KOMPILACJA I ADOWANIE PROGRAMU S7 ........................................................................58
5.8 WYWOANIE STRONY POPRZEZ PRZEGLDARK INTERNETOW ............................................................59
www.siemens.pl/simatic 1
Doradztwo techniczne: simatic.pl@siemens.com
6 INSTALACJA ...................................................................................................................................................61
6.1 PROCEDURA TWORZENIA STRONY INTERNETOWEJ .................................................................................61
6.2 INSTALACJA PRZYKADOWEJ APLIKACJI .................................................................................................62
7 PRACA Z APLIKACJ ..................................................................................................................................63
8 GLOSARIUSZ ..................................................................................................................................................67
9 LITERATURA...................................................................................................................................................68
1 Opis zagadnienia omawianego w dokumencie

Przegld
Przegld zagadnienia omawianego w dokumencie
Nowoczesna technologia automatyki coraz bardziej integruje technologie internetowe, ktre
wraz z komunikacj opart na Ethernecie umoliwiaj np. bezporedni dostp do systemu za
porednictwem intranetu. W fazie uruchomienia i testw inynier chce mie elastyczny dostp
do CPU; indywidualne dane maj by wizualizowane w trakcie pracy do celw
diagnostycznych.
Dla mechanizmw dostpu poprzez Internet lub intranet uzasadnione jest uywanie ju
istniejcych standardw, takich jak np. http, standardowe przegldarki internetowe, oraz
popularne jzyki programowania takie jak HTML (Hypertext Markup Language) lub JavaScript.
Rysunek 1-1
Opis zagadnienia
Dostp do CPU poprzez standardowy mechanizm web, jest moliwy po spenieniu
nastpujcych warunkw:
- Dostp do CPU poprzez standardowy hardware oraz standardowe mechanizmy za
porednictwem Industrial Ethernet. Nie jest potrzebny aden dodatkowy sprzt czy
oprogramowanie.
- Indywidualny dostp do CPU zwizanego z odpowiednim systemem (aplikacj).
Kade CPU posiada swoj wasn stron zaszyt w wewntrznej pamici
- Personel obsugi z podstawow wiedz z dziedziny automatyki.
2 Rozwizanie w zakresie automatyki

2.1 Oglny przegld rozwizania
Schemat
Sterowniki SIMATIC z interfejsem PROFINET daj moliwo dostpu do zmiennych w CPU za
pomoc stron www dostarczanych przez system.
Dostp do web serwera w CPU poprzez przegldark internetow. Oprcz standardowego
mechanizmw strony web, takich jak identyfikacja, bufor diagnostyczny, status moduw,
komunikacja, status zmiennych oraz logi danych, moliwe jest rwnie zaprojektowanie i
wywoanie wasnej strony Web odpowiedniej dla danej aplikacji.
Web serwer ze stron web jest standardowo zintegrowany w CPU.
Wasn stron web (user-defined web page), mona stworzy za pomoc dowolnych narzdzi
takich jak Microsoft Frontpage, Notepad++, etc.. Mona uywa wszystkich opcji oferowanych
przez HTML, CSS (Cascading Style Sheets) and JavaScript.
Dodatkowo jest zbir specjalnych komend (AWP command) do bezporedniej komunikacji z
CPU.
Poniszy rysunek daje obraz rozwizania.
Rysunek 2-1
Zalety i moliwoci aplikacyjne serwera www

Dziki opcji dostpu poprzez rne przegldarki internetowe, zmienne mog by odczytywane
oraz w ograniczonym stopniu zmieniane z dowolnego komputera z dostpem do Internetu, bez
instalowania dodatkowego oprogramowania.
Kolejn zalet jest moliwo wykorzystania istniejcej infrastruktury sieci zakadowej bez
adnych dodatkowych komponentw sprztowych. Oznacza to e dostp do dowolnego
sterownika moe si odby z dowolnego miejsca w zakadzie w ktrym jest przycze do sieci.
Ocena, diagnostyka i sterowanie moe odbywa si na due odlegoci lub poprzez sie WI-FI
lub telefony z dostpem do Internetu.
Jednake z powodu braku deterministycznego dostpu do web serwera, nie moe by on
penoprawnym zamiennikiem dla paneli operatorskich. Zadaniem tej aplikacji nie jest uycie
takiej wizualizacji zamiast panelu HMI.
Z powodu braku determinizmu, aplikacje oparte o web serwer nie mog by uywane
do realizacji funkcji bezpieczestwa SAFETY
UWAGA Ponadto naley pamita, e powinny by wzite pod uwag odpowiednie przemysowe
rodki bezpieczestwa, jeeli system jest podpity do innych czci obiektu, sieci
zakadowej lub Internetu. Aby uzyska wicej informacji prosz odwiedzi stron:
Procedura tworzenia stron internetowych w skrcie
Rysunek 2-2
L.p. Instrukcja
1 Utworzenie strony w edytorze HTML
Strona internetowa skada si z pojedynczych plikw rdowych np. *.html,
2
*.gif, *.js,
Pliki HTML z obrazami itd. s przechowywane w bloku danych z SIMATIC
3
STEP 7 V11 SP2. Wywoanie instrukcji WWW w programie S7
4 Transfer wszystkich blokw do CPU
Otwarcie strony web CPU poprzez przegldark internetow. Dostp do
5 serwera web CPU jest niezaleny od konfiguracji komputera. Kade
urzadzenie podczone do portu PN CPU moe wywietli stron web.
Dokadny opis procedury tworzenia strony web oraz programowania w STEP 7 znajduje si w
rozdziale 5 Konfiguracja i Ustawienia
Struktura aplikacji
Opisywana aplikacja zrealizowana bya z CPU 1214C DC/DC/DC. PC jest podczony poprzez
interfejs PROFINET. PC suy tutaj do tworzenia programu S7, strony html, jak rwnie
wywietlania strony w przegldarce internetowej. Pokazane zostan wszystkie kroki niezbdne
do stworzenia strony web i wywoania jej w CPU
Tematy nie ujte w aplikacji
Ta aplikacja jest wstpem do tworzenia stron uytkownika dla pocztkujcych. Pokazane
zostan proste metody dostpu przez stron web do CPU.
Aplikacja nie zawiera kompletnego opisu jzyka HTML. Aby uzyska wicej informacji na temat
HTML i JavaScript, naley zapozna si z literatur wyspecyfikowan w rozdziale 9 Literatura.
Wymagana wiedza
Podstawowa znajomo sterownikw S7 oraz programowania w STEP 7. Podstawowy wiedzy z
zakresu HTML nie s wymagane.
2.2 Opis zawartoci aplikacji

2.2.1 Zawarto przykadowej aplikacji
Przykadowa aplikacja dostarcza nastpujc tre:
- Konfiguracja web serwera dla CPU z interfejsem PN
- Utworzenie stronu uytkownika dla CPU z nastpujcymi funkcjami:
Numery w tabeli nawizuj do numerw na rysunkach 2-3 do 2-5
Tabela 2-2
L.p. Opis
1 Wywietlanie zmiennych CPU
2 Graficzne przedstawienie zmiennych
3 Zmiana danych w CPU
4 Sprawdzanie wartoci wejciowych z Javascript
5 Wyswietlanie tekstw poczonych ze zmiennymi w CPU
6 Wywietlanie obrazw poczonych ze zmiennymi w CPU
7 Przechodzenie do strony web poprzez adres wpisany w pasku adresu
8 Cykliczne odwieanie strony
9 Odswieanie zmiennych zoptyalizowane czasowo
- Szczegy tworzenia stron internetowych

- dostarczanie zmiennych dla strony web
- przetwarzanie zmiennych ze strony web w programie S7
2.2.2 Opis i przegld interfejsu uytkownika

Poniszy rysunek przedstawia stron internetow utworzon dla tej aplikacji
Strona startowa Start
Rysunek 2-3
Strona web pokazuje stron startow aplikacji.

Aplikacja moe zosta wystartowana przyciskiem Start i zatrzymana przyciskiem Stop.
Przycisk Reset inicjalizuje dane aplikacji do stanu pocztkowego. Status pracy aplikacji jest
wywietany przy uyciu diody LED.
Warto przepywu z jak zbiornik jest napeniany i oprniany definiowany jest poprzez
przycisk Set a new Fowrate. Domylnie przepyw ustawiony jest na 5. Im wysza warto
przepywu jest ustawiona tym szybciej zbiornik jest napeniany lub oprniany.
Wpisywane wartoci przepywu jest monitorowane przez skrypt. Jeeli warto jest
niepoprawna, wtedy wywietlany jest komunikat.
Aktualna warto przepywu wywietlana jest w polu Actual Flowrate.
Na pasku nawigacyjnym z lewej strony znajduj si linki do pozostaych stron aplikacji.
Strona Overview Tank

Rysunek 2-4
Strona web pokazuje zbiornik oraz jego poziom napenienia Tank Level. Wartoci graniczne
napenienia zbiornika pod Measurement.
Poprzez przycisk OpenValve otwarty zostaje zawr zbiornika i nastepuje oprnianie
zbiornika. Po nacinieciu przycisku CloseValve zawr zostaje zamknity i nastpuje
napenianie zbiornika. W zalenoci od tego ktry przycisk zosta wcinity, stan zaworu jest
przedstawiany poprzez zmian jego koloru.
Strona jest automatycznie odwieana.
Strona Data
Rysunek 2-5
Strona web pokazuje bufor zapisanych ostatnio 20 poziomw zbiornika.

Strona jest automatycznie odwieana.
Strona Data Optimized

Rysunek 2-6
Strona web jest podzielona na pliki HTML (strona gwna) bez zmiennych oraz dodatkowo pliki
HTML do czytania i zapisu danych. Dodatkowe pliki HTML s doczone jako ramki do strony
gwnej.
Strona web pokazuje 20 ostatnich wpisw poziomu cieczy w zbiorniku. Dane ktre maj by
wywietlane nie s przesyane indywidualnie do web serwera lecz jako 3 zmienne typu string.
Skrypt Java dzieli wyjciowe stringi na pojedyncze zmienne i udostpnia je na stronie jako dane
wyjciowe. Odwieanie poszczeglnych ramek jest realizowane z poziomu skryptu Java.
Uruchomienie aplikacji nastpuje po naciniciu przycisku Start, a zatrzymanie Stop. Ze
wzgldu na toze przyciski znajduj si w niezalenej ramce, caa strona nie zostanie
odwieona podczas zapisu.
2.3 Uyte komponenty sprztowe i programowe

Aplikacja stworzona zostaa w oparciu o nastpujce komponenty
Sprzt
UWAGA Dla tej aplikacji wymagany jest sterownik z aktualnym firmwarem. W zalenoci od typu CPU
poniszy link zawiera linki do pobrania odpowiedniego firmwareu
http://support.automation.siemens.com/WW/view/en/41886031/133100
Komponent ilo Numer zamwieniowy Uwagi

CPU 1214C Zamiennie dowolne CPU 1200 z
DC/DC/DC 1 6ES7214-1AE30-0XB0
Firmware V2.2 firmwarem 2.2 moe by uyte
PG/PC with Ethernet
1 - -
interface
IE FC TP Przewd ethernetowy, minimalna
STANDARD 1 6XV1840-2AH10
CABLE ilo zamwieniowa 20m
RJ45 plug-in Mog by dopasowane

2 6GK1901-1BB10-2AA0
connector odpowiednie inne wtyczki
Oprogramowanie
Komponent ilo Numer zamwieniowy Uwagi

SIMATIC STEP 7 V11
1 6ES7822-1AA01-0YC5 -
SP2
Oprogramowanie do tworzenia
stron internetowych,
1 - -
np. Frontpage,
Notepad++,
Przegldarka interneteowa np. Optymalnie Internet
Internet Explorer, 1 -
Mozilla Firefox 1) explorer 8.0
1)
Web servwer S7-1200 zosta sprawdzony z poniszymi przegldarkami:
- Internet Explorer 8.0 lub wyszy
- Mozilla Firefox 3.0 lub wyszy
- Opera 11.0 lub wyszy
UWAGA Przy uywaniu innych przegldarek moe by wymagane dokonanie pewnych modyfikacji
UWAGA Zauwaono problemy przy prbie zapisu tagw w przegldarce Internet Explorer 9.0. Nie jest
to win web serwera S7-1200 ani napisanej aplikacji. Aby unikn tego problemu zaleca si
stosowanie przegldarki Interet Explorer 8.0
Przykadowe pliki i projekty

Ponisza tabelka zawiera wszystkie pliki i projekty uyte w tej aplikacji
Komponent Uwagi:
Plik zip zawiera project STEP7 oraz plik
Example_S7-1200_Webserver.zip HTML. Plik HTML wraz z powizanymi
plikami jest zlokalizowany w \html
directory
58862931_S7-1200_Webserver_DOKU_V10_en.pdf Ten dokument
3 Podstawy tworzenia stron internetowych

Oglne informacje
W kontekcie projektowania stron internetowych, termin strona internetowa (strona web) suy
do okrelania dokumentu w globalnej sieci Web (Word Wide Web), ktra moe by
wywoywana z serwera www za pomoc przegldarki internetowej przez krelenie adresu
Uniform Resorce Lokator (URL).
Strona internetowa uytkownika (user-defined web page) jest rozumiana jako strona z
dodatkowymi komendami takimi jak AWP commands,ktre mog by uywane w celu
uzyskania dostpu do S7 CPU
z interfejsem PN.
3.1 Oglne zasady projektowania stron internetowych

Jeeli oglne zasady projektowania stron internetowych s znane, mona pomin punkt 3.1 i
przej od razu do punktu 3.2.
3.1.1 Zasady HTML
Skrt HTML oznacza Hypertext Markup Language i jest oparty na znacznikach nagwkw,
tekstw, list, tabel lub obrazw. Nie wykorzystuje natomiast deklaracji zmiennych oraz ptli tak
wic nie jest jzykiem programowania.
Struktura
Dokument HTML skada si z trzech obszarw:
- Deklaracja typu dokumentu (doctype) na pocztku pliku, rozpoczyna dokument definicj typu
(DTD) uzywajc np. HTML 4.01 Transitional.
- Nagwek HTML (head) informacje ktre nie sa wywietlane w przeldarce internetowej.
- Ciao HTML informacje, ktre s wywietlane w przegldarce internetowej.
Elementy HTML (tagi)
Elementy uywane do identyfikacji i struktury rnych czci strony internetowej. Plik HTML
zawiera elementy HTML HTML elements, ktre s oznaczane przez tagi (pary tagw).
Prawie wszystkie elementy HTML s oznaczone przez tag wstpny i koczcy.
Zawarto midzy tymi tagami to zakres stosowania danego elementu.
Przykad: Tekst oznaczony tagiem <p>. Tag koczcy jest reprezentowany przez wstpny znak
</.
<p>To jest tekst</p>
Tagi s kaskadowe i mog by zagniedane.
Typowe tagi
Ponisza tabela daje przegld najwaniejszych tagw do tworzenia struktury informacji, s one
uyte w tej przykadowej aplikacji.
Reprezentacja Funkja Przykad

 Kometarz comment! -->
<a> </a> Link
<b>This text is
<b> </b> Pogrubienie bold</b>.
Zawarto jest wywietlana w
<body> </body>
przegldarce
<div> </div> Grupowanie elementw
<form> </form> Definicja formy
<h1> </h1> Nagwek tekstu
<head> </head> Obszar nagwka pliku HTML
Fundamentalny tag strony
<html> </html>
internetowej
<iframe> </iframe> Definiuje wbudowane okno
<img> Integruje obraz
<input> Tworzy element formy
Tworzy logiczne powizanie z
<link>
innymi plikami
<meta> Definije dane meta
<p> </p> Paragraf
Definiuje obszar skryptu
<script> </script>
(np.JavaScript)
<style> </style> Definicja stylu formatowania
Tworzy tabel w powizaniu z <tr>
<table> </table>
oraz <td>
<td> </td> Kolumna tabeli
<th> </th> Nagwek tabeli
<tr> </tr> Wiersz tabeli
3.1.2 Uywanie form

Formy uywane s w celu umoliwienia stworzenia interakcji z uytkownikiem strony.
Na przykad, uytkownik moe wypenia pole tekstowe a nastpnie przesa ten tekst przez
nacinicie przycisku. Zawarto formy jest wtedy przesyana do web serwera.
Metoda POST suy do transferu zawartoci formy z przegldarki do web serwera.
3.1.3 Podstawy stylu kaskadowego (CSS)
Formatowanie CSS jest jzykiem formatowania dla elementw HTML. Za pomoca arkuszw
stylw s okrelane takie parametry jak np. czcionka, rozmiar czcionki, kolor, obramowanie,
wysoko, szeroko itd.
Mona zdefiniowa centralne formatowanie dla np. wszystkich nagwkw, okien tabeli itd.
Struktura formatowania CSS jest nastpujca:
Selektor {waciwo: warto}
Selektor moe zawiera kilka deklaracji {waciwo: warto}
Typowe waciwoci CSS

Ponisza tabela daje przegld najwaniejszych waciwoci formatowania elementw HTML,
s one uyte w tej przykadowej aplikacji.
Warto CSS Funkja Przykad

static, relative,
position Typ pozycji absolute, fixed
top Pozycja od gry
left Pozycja od lewej
10px, 2%
bottom Pozycja od dou
right
Pozycja od prawej
width Szeroko
100px, 20%
height Wysoko
direction Kierunek ltr, rtl
Pozycja w warstwach
z-index 1, 2
nakdajcych si
font-family Czcionka Arial, Helvetica
font-style Styl czcionki italic, oblique, normal
20px,100%, small,
font-size Rozmiar czcionki medium, large
bold, normal, bolder,
font-weight Waga czcionki lighter, 100 to 900
text-decoration Dekoracja tekstu underline, blink, none
text-transform Transformacja tekstu uppercase, lowercase
color Kolor tekstu rgb(51,102,170), #FFFFFF
vertical-align: Pionowe ustawienie top, middle, bottom
left, center, right,
text-align Poziome ustawienie justify
margin Margines/oglny odstp
margin-top Margines/odstp grny
margin-right Margines/odstp prawy 10px, 5%
margin-bottom Margines/odstp dolny
margin-left
Margines/odstp lewy
padding
padding-top
padding-right 10px, 5%
padding-bottom
padding-left
border[-top, -right, - Obramowanie/oglnie 2px solid white
bottom, -left] 2px, 1%, thin, medium,
border[-top, -right, -
Obramowanie/grubo thick
bottom, -left] #FFFF00, white
border[-top, -right, - none, hidden, dotted,
bottom, -left] Obramowanie/kolor solid, dashed, double
border[-top, -right, - separate, collapse
bottom, -left]
border-collapse Obramowanie/typ
Obramowanie/model
Kolor i obraz ta Image.png no-repeat
background rgb(51,102,170), #FFFFFF
background-color Kolor ta Image.png
background-image Obraz ta repeat, no-repeat,
background-repeat Efekt przeadowania strony repeat-x, repeat-y
background-attachment scroll, fixed
background-position Efekt znaku wodnego 10px 10px, top, bottom,
Pozycja ta center, left, right
none, square, circle,
list-style-type Lista typw stylu disc
empty-cells Wywietlanie pustych celek show, hide
Integracja styli CSS w HTML

Istnieje kilka sposobw integrowania arkuszy stylw w pliku HTML:
- wewntrz elementu HTML
- pomidzy tagami <script> oraz </script>
- w zewntrznym pliku CSS
Arkusze stylw definiowane s w oddzielnym pliku CSS, jeeli ma by uyte jednolite
wzornictwo w kilku pikach HTML. Ten plik CSS jest integrowany w pliku HTML. Skadnia jest
nastpujca:
<link rel="stylesheet" type="text/css" href="<Formats>.css">
Zdefiniowany arkusz stylw jest adresowany poprzez id oraz atrybut klasy tagw HTML. Plik
CSS dostarcza rozbudowane opcje formatowania.
3.1.4 Podstawy JavaScript

JavaScript jest jzykiem programowania stworzonym w celu optymalizacji stron HTML..
Aplikacje JavaScript s wykonywane w przegldarce internetowej i bezporednio przez ni
interpretowane w trybie runtime.
JavaScript nie zastpuje HTML, lecz jest uzupenieniem.
JavaScript jest cakiem inne od jzyka programowania Java. Podobiestwo nazewnictwa jest
spowodowane jedynie celami marketingowymi.
Dziki JavaScript mona, oprcz innych rzeczy, rozszerzy stron HTML przy uyciu
nastpujcych funkcji:
- Przetwarzanie da z klawiatury
- Dynamiczna modyfikacja stron web
Integracja JavaScript w HTML

Istnieje kilka sposobw integracji JavaScript w HTML:
- pomidzy tagami <script> oraz </script>
- poprzez referencj
- jako parametr Tagu HTML
- jako zewntrzny plik JS
Uyteczne jest pisanie kodu JavaScript w oddzielnych plikach, jeeli zachodzi potrzeba uycia
tych samych funkcji JavaScript w kilku plikach HTML.
Skadnia jest nastpujca:
<script src="<Script>.js" type="text/javascript"> </script>
3.1.5 Automatyczne odwieanie strony web

Czas trwania przeadowania strony
Czas trwania przeadowania strony zaley od zawartoci tej strony. Czci statyczne oraz
dynamiczne (zmienne) musz by odwieone.
Czas transmisji zmiennych
Wewntrzny czas przesyania midzy CPU i wbudowanym web serwerem zaley od iloci
przesyanych zmiennych. Prdko transmisji mona zwikszy w ustawieniach CPU, jako
procent czasu cyklu programu.
Przegld czasw transmisji w zalenoci od iloci uytych zmiennych i konfiguracji procentu
czasu cyklu przeznaczonego na komunikacj przedstawia tabela poniej.
Tabela 3-3
Liczba zmiennych Obcienie komunikacji [%] Czas odwieania [s]
10 20 2.4
10 40 2.1
20 20 3.3
20 40 2.8
40 20 5.9
40 40 4.8
UWAGA Naley wykasowa z pliku HTML wszelkie nieuywane tagi, aby zmniejszy czas transmisji.
Zaznaczenie zmiennych, jako komentarz jest niewystarczajce
Opcje
Opcja automatycznego odwieania dziaa tylko w przypadku standardowych stron web, nie
dziaa w przypadku stron uytkownika.
Strona HTML jest statyczna i nie reaguje na zmian zawartoci.
Podane jest natomiast aby wartoci zmiennych z programu S7 byy widoczne w
przegldarce. Istnieje kilka sposobw na odwieenie zawartoci strony:
- Rczne odwieanie za pomoc przycisku F5
- Automatyczne odwieanie za pomoc odpowiedniego polecenia w nagwku kodu HTML
- Automatyczne odwieanie za pomoc JavaScript umieszczonego w pliku HTML
W celu zapisania wartoci ze strony do CPU , powinna by utworzona oddzielna strona HTML
bez automatycznego odwieania. Pozwoli to zapobiec wpisaniu do CPU niekompletnej
wartoci podczas automatycznego odwieenia.
Rczne odwieanie
Po wciniciu klawisza F5 (Internet Explorer: View > Refresh), zawarto okna w
przegldarce zostaje odwieona.
Odwieanie przez HTML
Za pomoc poniszego kodu umieszczonego w nagwku HTML, zawarto strony internetowej
bdzie odwieana cy:klicznie:
<meta http-equiv="refresh" content="10; URL=Example.htm">
Czas cyklu odwieania podawany jest w sekundach. W przykadzie wpisano content=10,
oznacza to, e strona bdzie odwieana co 10s. Rzeczywisty czas odwieania strony zaley
od zoonoci strony internetowej. Im wicej zawartoci na stronie tym duszy czas
odwieania. Mona wpisa stron poprzez URL=. W przykadzie s to strony Overwiev.html
oraz Data.html.
Odwieanie za pomoc JavaScript

Poniszy kod umieszczony w ciele HTML pozwoli na odwieania zawartoci strony co 10
sekund:
<script type="text/javascript">
setInterval("document.location.reload()",1000);
</script>
3.2 Podstawy dotyczce standardowej strony web

Wymagania
Opcja web serwer musi zosta zaznaczona we waciwociach PLC.
Jeeli potrzebny jest bezpieczny dostp do standardowej strony naley zaznaczy opcj
Permit Access only with HTTPS.
Automatyczne odwieanie strony jest wczone. Czas odwieania jest standardowo
ustawiony na 10 sekund i nie moe by zmieniony.
Dostp poprzez HTTP lub HTTPS
Za pomoc URL http://ww.xx.yy.zz" lub https://ww.xx.yy.zz moliwy jest dostp do
standardowej strony web. ww.xx.yy.zz nawizuje do adresu IP sterownika S7-1200.
HTTPS jest uywane do szyfrowania i uwierzytelniania komunikacji midzy przegldark i
serwerem web. Gdy Permit access only with HTTPS jest zaznaczone, wywoanie strony jest
moliwe tylko poprzez HTTPS.
Logowanie
Nie ma potrzeby logowania aby mie dostp do strony web. Wykonywanie akcji takich jak
zmiana trybu pracy (RUN/STOP) lub zmiana wartoci zmiennych w sterowniku wymaga od
uytkownika zalogowania si jako admin. Pole do logowania znajduje si w lewym grnym
rogu strony.
Aby zalogowa si, jako administrator naley wpisa login admin oraz haso.
Name: admin
Password: brak lub skonfigurowane haso CPU (dla CPU zabezpieczonych hasem).
Ustawianie hasa jest opisane w rozdziale 5.5. Ustawianie hasa CPU.
Standardowe strony web sterownika SIMATIC S7-1200

Web serwer w sterowniku S7-1200 oferuje wiele informacji odnocie sterownika poprzez
zintegrowane standardowe strony web. Poszczeglne standardowe strony wymienione s
poniej:
Oznaczenie Zawarto
intro Strona wprowadzajca
Strona startowa oferuje przegldoglnych informacji o CPU, nazwie
Start Page CPU, typie i podstawowych informacjac o CPU oraz o aktualnym
trybie pracy
Wywietla statyczne informacje identyfikujce sterownik takie jak
Identification numer seryjny, numer zamwieniowy oraz informacj o wersji
firmware
Diagnostic
Buffet
Wywietla bufor diagnostyczny z ostatnimi wpisami
Module Wywietla informacje natemat komponentw stacji, pokazuje bdy na
Information moduach lub informacje o tym czy moduy s na swoim miejscu
Wywietlanie informacji o poczeniach komunikacyjnych otwartej
Communication
komunikacji, zasobach oraz adresach
Wywietla statusy zmiennych w programie uytkownika, daje
Variable Status
moliwo podgldu i zmiany ich wartoci
Archiwum zmiennych w formacie CSV moliwo zapisania na
Data Logs komputerze. Archiwum jest tworzone za pomoc instrukcji data log w
programie uytkownika
User Pages Dostp do strony uzytkownika
3.3 Podstawy dotyczce stron uytkownika

Ponisze rozdziay dostarczaj podstawowej wiedzy na temat stron uytkownika w relacji do
aplikacji.
Powizane informacje s dostpne w helpie online SIMATIC STEP 7 V11 SP2 pod hasem
WWW (SFC 99).
Korzyci
Moliwo tworzenia wasnych stron internetowych na sterowniku jest korzystne, jeeli nie jest
wymagany rozbudowany stay system HMI, a informacje diagnostyczne i wizualizacja s
potrzebne sporadycznie.
Rozwizanie z uyciem AWP jest rozsdne przy tworzeniu prostych wizualizacji tworzonych
indywidualnie wedug wymaga danej aplikacji.
3.3.1 Tworzenie stron uytkownika
Rysunek 3-1
Procedura
Nr |Instrukcja
Utworzenie pliku HTMLw edytorze HTML. Caa strona internetowa
moe skada si z kilku pojedynczych plikw rdowych: *.html,
1
*.png, *.js, *.css, itd. Aby mie dostp do zmiennych w CPU naley
wykorzysta komendy AWP
Przypisanie nazwy symbolicznej do zmiennej ktra ma zosta
2
wykorzystana na stronie internetowej
Generacja blokw (Web Control DB oraz dodatkowe bloki DB) za
pomoc STEP7 wykorzystujc pliki rdowe. Numery DB mog by
dowolne (domylnie: DB333 oraz powyej DB334). Bloki DB s
3 przechowywane w Program blocks > system blocks > Web Server w
drzewie projektu.Te bloki danych skadaj si z blokw ktre steruj
wywietlaniem strony oraz blokw ktre przechowuj stron
internetow.
Program tworzony jest przy uyciu STEP7. Synchronizacja pomidzy
4 programem i web serwerem nastpuje poprzez wywoanie w
programie instrukcji WWW (SFC99)
5 Transfer wszystkich blokw do CPU
Otwarcie przegldarki internetowej wpisujc adres IP sterownika
6
http://ww.xx.yy.zz lub https://ww.xx.yy.zz
Dostp do Web serwera w CPU jest moliwy niezalenie od konfiguracji komputera. Kade
urzdzenie z zainstalowan przegldarka internetow oraz interfejsem ethernetowym moe
wywietli stron www.
Aby mie moliwo zmiany wartoci zmiennych w sterowniku, trzeba by zalogowanym jako
administrator.
3.3.2 Wymagane bloki WWW (SFC99)

Za pomoc instrukcji WWW (SFC99) CPU moe zinterpretowa bloki danych i uy ich do
wywietlenia strony internetowej.
Bloki DB sterujce oraz DB przechowujce stron uytkownika

Podstaw wasnej strony uytkownika jest plik HTML (lub kilka poczonych plikw HTML z
obrazami).
Sterujcy blok danych DB (domylnie DB333) zawiera:
- zmienne statusowe i sterujce strony internetowej
- status komunikacji
- informacje o bdach
Oprcz sterujcego bloku danych s rwnie bloki DB zawierajce dane strony internetowe (
domylnie powyej DB334). Te bloki danych zawieraj zakodowane strony internetowe oraz
dodatkowe pliki (np. obrazy).
Wszystkie sterujce bloki danych s zlokalizowane w Program blocks > System blocks > Web
serwer.
Rozmiar pamici potrzebnej do przechowania strony uytkownika determinuje rozmiar pamici
sterownika. Rozmiar pamici jest ograniczony przez pami load.
UWAGA Jeeli zachodzi potrzeba zredukowania przestrzeni pamici przeznaczonej na stron

uytkownika, mona usun zbdne grafiki
Typowe uycie zmiennych

W tabeli poniej znajduje si przegld najczciej uywanych zmiennych:
Reprezentacja Funkcja Przykad Informacje

Wywietla zmienn :="TankLevelMinimum"
:=<Name> Rozdz. 3.4
CPU :
 metody POST

3.4 Wywietlanie zmiennych CPU na stronie internetowej

3.4.1 Interakcje midzy przegldark internetow a CPU
Rysunek 3-2
nr Opis
Zmienne ktre s odczytywane bd zapisywane ze strony musz
1. mie nazw symboliczn. Na przykad zmienne w bloku danych
Nazwa_DB.nazwa_zmiennej
2. Instrukcja WWW (SFC99) musi by wywoana w programie S7
Poprzez wywoanie funkcji WWW zostaje zainicjowany blok
3.
sterujcy (domylnie: DB333)
Web serwer w CPU konwertuje dane za pomoc informacji zawartych
w bloku DB sterujcym (domylnie: DB333) do formatu (=web page)
4. ktry bdzie moliwy do interpretacji przez przegldark.
Strona internetowa wywoywana jest w przegldarce poprzez adres IP
sterownika
Przy kadym wywoaniu z przegldarki, strona www jest odwieana
(rcznie lub automatycznie). Informacje na temat odwieania strony
mona znale w rozdziale 3.1.5 Automatyczne odwieanie strony.
5.
Wywoanie na stronie internetowej mona wykona rwnie poprzez
metod POST podczas zapisu zmiennej do CPU. Po wysaniu
strony, caa zawarto zostaje odwieona
3.4.2 Wymagania
Aby byo moliwe wywietlanie zmiennych CPU na stronie internetowej, musz by spenione
nastpujce wymagania
Program S7 Plik HTML

- Kada zmienna musi mie - Nie jest konieczne deklarowanie
przypisan zmienn symboliczn. zmiennych poprzez komend AWP w
Zmienna moe by wywietlona pliku HTML
na stronie internetowej wywoana
tylko przez nazwe symboliczn.
- Instrukcja WWW (SFC99) musi
by wywoana w cyklu programu
- Dozwolone s standardowe typy
danych (dane typu DTL nie s
dozwolone), typy danych
uytkownika oraz struktury
3.4.3 Wymagane bloki WWW (SFC99)

Program S7:
Nie ma potrzeby programowania czegokolwiek w programie S7
Plik HTML:
Zmienna moe by wywietlona w dowolnej pozycji w pliku HTML. Skadnia jest nastpujca:
:="<Variable>":
Przykad zmiennej TankLevelMaximum
<p>:="TankLevelMaximum":</p>
Wywietlanie zmiennej jest niezalene od jej typu. Odwieanie zmiennych jest opisane w
rozdziale 3.1.5.
3.5 Zapis zmiennych CPU ze strony internetowej

3.5.1 Interakcje midzy przegldark internetow a CPU
Rysunek 3-3
Nr Opis
1 Poprzez stron internetow uytkownik zmienia warto zmiennej przepyw
Flowrate na 10.
2 Przegldarka internetowa raportuje zapytanie (metoda POST)
3 Program S7 akceptuje zmienion warto zmiennej Flowrate, wywietlanie
zmiennej w przegldarce jest odwieone i nowa warto zostaje wywietlona.
3.5.2 Wymagania
Aby zapisywanie zmiennych w CPU przez przegldarke internetow byo moliwe musz
zosta spenione nastpujce wymagania:

- Kada zmienna musi mie - Zmienne musz zosta zadeklarowane
przypisan zmienn poprzez komend AWP 
by adresowana tylko przez -Zmienne musz zosta
nazwy symboliczne transferowane do CPU (np. metoda
POST w pliku HTML)
- Instrukcja WWW (SFC99)
musi by wywoana w cyklu
programu
- Dozwolone s standardowe
typy danych (dane typu DTL nie
s dozwolone), typy danych
3.5.3 Procedura
Program S7:
Instrukcja WWW (SFC99) musi by wywoywana cyklicznie
Plik HTML:
Komenda AWP dziki ktrej zmienna moe by zapisana do CPU jest nastpujca:

Przykad zapisania zmiennej Przepyw "Flowrate":

Komenda AWP typowo umieszczana jest na pocztku pliku HTML.
Transfer zmiennych z przegldarki

Transfer zmiennych midzy przegldark i web serwerem odbywa si za pomoc metody
POST. Forma skada si z dwch jednostek:
-Pole do wpisania wartoci
Pole jest nazwane poprzez zmienn np.
.
-Przycisk za pomoc ktrego wpisanie wartoci jest potwierdzane.
Przykad:
Kod:
<form method="post" action="" onsubmit=return check();>
<input type="text" name='"Flowrate"' size="2">
<input type="submit" value="Set a new Flowrate">
</form>
3.6 Powizanie zmiennych z tekstem w pliku HTML

Czasami jest uzasadnione aby informacje na stronie internetowej byy wywietlone
bezporednio jako tekst. Jest moliwe poczenie midzy zmiennymi w sterowniku i tekstem.
Tekst moe by w kilku jzykach. Opisywana aplikacja zawiera tekst w jednym jzyku.
Poniszy rysunek obrazuje interakcje midzy sterownikiem a przegldark.
Rysunek 3-4
Nr Opis
1. Program S7 wywouje instrukcj WWW (SFC99) i ustawia warto MW12
(Alarm) na 1.
2. Poprzez cykliczne wywoanie instrukcji WWW (SFC99) zmienna Alarm w
blokach DB333/DB334 s rwnie odwieane
3. Web serwer tworzy powizanie midzy zmienn Alarm i tekstem
4. W przegldarce wywietlany jest tekst zamiast wartoci zmiennej Alarm
3.6.1 Wymagania
Aby byo moliwe wywietlanie tekstu w miejsce zmiennej musz by spenione nastpujce
wymagania:

- Kada zmienna musi mie - Zmienne musz zosta zadeklarowane
przypisan zmienn poprzez komend AWP 
by adresowana tylko przez -Zmienne musz zosta
nazwy symboliczne transferowane do CPU (np. metoda
POST w pliku HTML)
- Instrukcja WWW (SFC99)
musi by wywoana w cyklu
programu
- Dozwolone s standardowe
typy danych (dane typu DTL nie
s dozwolone), typy danych
Tworzenie typw ENUM
Komenda AWP, poprzez ktr definiowane s typy ENUM jest nastpujca:

Przykad dla zmiennej AlarmValue:

Typowo komenda AWP znajduje si na pocztku pliku HTML lub znajduje si w odrbnym pliku
HTML.
Przypisywanie typw ENUM
Skadnia suca wywietlaniu tekstu zamiast wartoci zmiennej jest nastpujca (na
przykadzie zmiennej Alarm):


:="Alarm":
3.7 Tworzenie optymalnych czasowo stron uytkownika (opcja)

Tworzenie optymalnych czasowo stron HTML nie jest opisane w manualu S7-1200. Zaoenie
przedstawia poniszy rysunek:
Rysunek 3-5 Czytanie/zapis zmiennych
Nr Opis
1. Opisywana jest strona uytkownika ( poniej nazywana stron gwn). W tej
aplikacji jest to strona DataOpti.htm. Nie jest ona odwieana tote nie ma
odpowiednich instrukcji w kodzie html.
2. Strona gwna nie zawiera zmiennych i dlatego nie posiada bezporedniego
dostpu do zmiennych sterujcych. Wszystkie zmienne sterujce, ktre maj by
czytane lub zapisywane s umieszczone w dodatkowych plikach HTML (tutaj
Data_string.htm oraz Start_Stop_buttons.htm), ktre zawarte s na stronie
gwnej jako ramki (iframe) i z tego powodu nie ma potrzeby okresowego
odwieania strony internetowej. Tylko poszczeglne ramki s odwieane
3. Kolejnym wanym krokiem jest minimalizacja liczby zmiennych sterujcych ktre
maj by odczytywane.W programie uytkownika w sterowniku (tutaj FB
Data_String) indywidualne zmienne sterujce s oddzielone przecinkami,
zapisywane do cigu wyjciowego (string) i dopiero przesyane jako jedna
zmienna do web serwera co pozwala zaoszczdzi bardzo duo czasu. Cig jest
umieszczany jako zmienna wyjciowa w oddzielnym pliku html (tutaj
Data_String.htm), ktry wywietla si jako wbudowana ramka (iframe, patrz
punkt 2 tabeli) na stronie gwnej. Tutaj cig znakw jest wycznie dostarczany
do dalszej obrbki przez JavaScript (tutaj Data_String.js).
4. Dla zmiennych wejciowych (zobacz rozdzia 3.5) utworzone s formy ktre
umieszczone s w oddzielnych plikach HTML (tutaj Start_Stop_buttons.htm).
Pliki HTML s umieszczone na stronie gwnej jako ramki (iframes, zobacz punkt
2 tabeli). Moliwe jest zapisanie kilku ramek na stronie HTML
5. Strona gwna umoliwia odniesienie do pliku JavaScript (tutaj Data_String.js),
Ktry wykonuje ponisze zadania cyklicznie (w poniszym przykadzie, co
500ms):
- Dzielenie cigu wyjciowego (zobacz pkt 3 tabeli) na poszczeglne zmienne za
pomoc metody Split (,), ktre rwnolegle s przechowywane w tabeli
wyjciowej jako ss_values
- Dostarczenie elementw wyjciowych (tutaj: komrki tabeli), strony gwnej ze
zmiennymi sterujcymi. Ktre s dostarczane jako elementy ss_values tabeli
wyjciowej.
- Odwieanie ramek (zobacz pkt 3 tabeli) ktre zawieraj cig wyjciowy za
pomoc metody reload(0).
Rysunek 3-6 Wycignite ze skryptu Data_String.js
4 Mechanizmy funkcjonalne aplikacji

4.1 Podstawy funkcjonowania programu S7
Program S7 dla tej aplikacji suy wycznie do reprezentacji oglnych zasad funkcji STEP7.
Struktura wywoa w programie S7 jest nastpujca:
Rysunek 4-1
Nastpujce symbole i zmienne s w bloku danych Data_Buffer:
Rysunek 4-2
4.1.1 Blok startowy (OB100)

W bloku startowym Startup (OB100) ustawiana jest warto przepywu Flowrate oraz
wartoci graniczne przechowywanych zmiennych.
Rysunek 4-3
4.1.2 Main (OB1)

W bloku gwnym Main (OB1) status DB333 jest odpytywany cyklicznie aby byo moliwe
wychwycenie zapytania z web serwera. Powodem wysania zapytania moe by na przykad
zmiana wartoci zmiennej w przegldarce internetowej ktra ma by wysana do web serwera.
Rysunek 4-4
Synchronizacja stron uytkownika

Instrukcja WWW (SFC99) inicjalizuje web serwer w CPU. Informacja o bdach jest
wystawiona przez RET_VAL.
Rysunek 4-5
Wywoanie symulacji zbiornika

Aby mie pewno e napenianie lub oprnianie zbiornika nie nastpuje zbyt szybko, funkcja
TankSimu jest wywoana w OB1 raz na sekund.
Rysunek 4-6
Odpytywanie przyciskw Start, Stop, oraz Reset

Status przyciskw Start oraz Stop jest sprawdzany przez stron internetow. Jeeli jeden z
przyciskw zosta wcinity, status jest zapisany w zmiennej PLC StartStop. Dodatkowo
sprawdzany jest status przycisku Reset. Poprzez kliknicie Reset, zdefiniowana warto
pocztkowa pozycji zostaje utworzona za pomoc funkcji ResetData .
Odpytywanie przyciskw OpenValveoraz CloseValve

Dodatkowo odpytywany jest status przyciskw OpenValve oraz CloseValve. Jeeli jeden z
nich zostanie wcinity, status zostaje zapisany w zmiennej StatusValveCPU.
Wywoywanie bloku funkcyjnego DataString

Odwieanie zmiennych typu string jest wywoywane dwa razy na sekund. Odnosi si to do
czasu odwieania w Javascript.
Rysunek 4-7
4.1.3 TankSimu (FB1)

Funkcjonalno FB1
Rysunek 4-8
W FB1, symulowane jest napenianie lub oprnianie zbiornika, w zalenoci od ustawionego

przepywu i pozycji zaworu.
Blok jest wywoywany tylko raz na sekund.
Uytkownik moe zdefiniowa warto przepywu poprzez zmienn Flowrate na stronie
internetowej.
Poziom napenienia zbiornika jest zwikszany lub zmniejszany poprzez wywoanie FB1.
Aktualna warto poziomu napenienia jest przechowywana w zmiennej PLC TankLevel.
Poprzez dwie zmienne PLC OpenValve i CloseValve, pozycja zaworu jest odczytywana, a
nastpnie zapisywana w zmiennej PLC StatusValveCPU.
W zalenoci od poziomu napenienia zbiornika wywietlone zostaje:
- Zbiornik zosta cakowicie oprniony (TankLevelLack)
- Minimalny poziom zbiornika (TankLevelMinimum)
- Zbiornik jest napeniony w poowie (TankLevelMidth)
- Zbiornik jest peny (TankLevelMaximum)
- Przepenienie zbiornika (TankLevelOverflow)
Poprzez zmienn Alarm, poziom napenienia zbiornika wywietlany jest jako tekst.
Status StartStop
Tylko kiedy zmienna StartStop jest ustawiona, poziom napenienia zbiornika zmienia si i
zmienna s zapisywane do bufora.
Status zaworu
Poprzez bit StatusVentilCPU zapamitane jest ostatnie wcinicie przycisku (OpenValve lub
Close Valve)
W zalenoci od stanu tego bitu, zbiornik jest napeniany lub oprniany.
Napenianie zbiornika
Napenianie zbiornika rozpoczyna si od sprawdzenia czy jest napeniony.

Jeeli zbiornik nie jest peny, poziom napenienia zbiornika jest zwikszany z ustawionym
przepywem. Poziom napenienia zbiornika ograniczony jest poprzez zmienn
TankLevelOverflow
Oprnianie zbiornika
Oprnianie zbiornika jest analogiczne do napeniania. Poziom napenienia zbiornika jest

zmniejszany zgodnie z ustawionym przepywem i jest ograniczony wartoci 0.
Alarm status
Nastpnie poziom napenienia zbiornika porwnywany jest z wartociami limitw napenienia

zbiornika.
W zalenoci od osignicia poziomu napenienia, wartoci od 0 do 5 s zapisywane do
zmiennej Alarm. Na podstawie przypisanej wartoci do zmiennej Alarm, na stronie
internetowej wywietlany jest odpowiedni tekst alarmu.
Zapisywanie danych w buforze
Aktualny poziom napenienia zbiornika jest zapisywany ze znacznikiem czasowym (string) w

buforze piercieniowym. Przechowywanych jest 20 par wartoci.
Za pomoc funkcji TimeToString, znacznik czasowy jest zapisywany do zmiennej typu string.
Za pomoc funkcji CopyData pary wartoci s kopiowane do bufora piercieniowego.
4.1.4 DataString (FB2)

Funkcjonalno FB2
Rysunek 4-9
W FB2 pary zmiennych (stempel czasowy, warto) s zapisywane w buforze piercieniowym,

oddzielone przecinkami i zapisane jako zmienna typu string. Zmienna typu string moe mie
dugo 254 znakw, tak wic musz by wykorzystane trzy zmienne typu string i przesane do
servera jako pojedyncze zmienne.
Stempel czasowy jest ju zapisany jako string. Poziom zbiornika (warto) jest
przekonwertowana do typu string za pomoc funkcji Valstring.
Blok jest wywoywany tylko dwa razy na sekund.
4.2 Podstawy funkcjonowania pliku HTML

Poniszy rozdzia dostarcza szczegowych wyjanie dotyczcych poszczeglnych sekcji pliku
HTML. W celu stworzenia strony internetowej zostay uyte stae wartoci dla ustalenia pozycji i
wymiarw elementw. Zapobiega to rozjedaniu si i zachodzeniu na siebie elementw
podczas zmiany wymiarw okna.
4.2.1 Komendy AWP

Podstawy
Komendy AWP umieszczone s w pliku HTML jako komentarze. Mog by umieszczone w
dowolnym miejscu pliku. Jednake w celu zwikszenia przejrzystoci zaleca si umieszcza je
na pocztku pliku HTML.
Rysunek 4-10
Wyjanienia
Kod Wyjanienie
 musz zidentyfikowane jako
AWP_In_Variable.
Uwaga: Prosz mie na uwadze, e
cudzysw jest zagniedony. Zmienna
wpisana jest midzy znakami cudzysowie i
otoczone jest apostrofami.

<!-- AWP_Enum_Ref Typy anum s przypisane do zmiennych z
Name='"Alarm"'
Enum="AlarmValue" -- AWP_Enum_Ref.
>:="Alarm":
4.2.2 Informacje na temat doctype oraz nagwka pliku HTML

Podstawy
Ponisze informacj musz by uwzgldnione w kadym pliku HTML aby by zgodny z HTML.
Jedynym wyjtkiem jest tag "<meta http-equiv="refresh" >": Jeeli nie bdzie
uywane automatyczne odwieanie i zamiast tego uywany bdzie przycisk F5, mona nie
uywa tego tagu.
Rysunek 4-11
Wyjanienia
Kod Wyjanienie
<!DOCTYPE HTML PUBLIC "- Specyfikacja dokumentu HTML: typ
//W3C//DTD HTML 4.01
Transitional//EN"> dokumentu HTML w wersji jyka v4.1 w
wariancie transitional Kod EN okrela
jzyk Tagw, np. Angielski. Typ dokumentu
zawsze jest okrelony przed tagiem
<html>
<html> </html> Zawiera tre HTML
<title>Userdefined Website Tytu strony internetowej, ktry zostanie
Application Example</title> pniej wywietlony w nagwku
przegldarki internetowej
Jzyk zawartoci pliku

<meta http-equiv="Content-
Language" content="en" >
<meta http-equiv="Content-Type" Za pomoc "content="text/html"

content="text/html; charset=utf- wyspecyfikowano typ MIME, po ktrym
8" >
uyto zestawu znakw UTF-8
<meta http-equiv="refresh" Opcjonalne dane meta: z t komend

content="10; URL=Overview.htm"> strona web jest odwieana co 10 sekund.
Szczeglnie dla monitorowania procesu jest
wymagane aby strona odwieana bya
cyklicznie. Dla stron z polami wejciowymi,
odwieanie stron moe by
problematyczne. Wicej informacji znale
mona w rozdziale 3.1.5
<link rel="stylesheet" Poprzez link <link...> zostaje utworzone

type="text/css" powizanie z plikiem CSS ktry zawiera
href="Stylesheet/siemens_Stylesh
eet.css"> wszystkie informacje dotyczce wygldu
strony internetowej np. biae to, itd
<script Przestrze dla skryptw (np. JavaScript)
src="Script/siemens_script.js"
type="text/javascript"> definiowana jest midzy Tagami <script>
</script> oraz </script>.
<body> </body> Ciao dokumentu
4.2.3 Wywietlanie obszarw

Podstawy
W pliku HTML zostay uyte trzy obszary:

- obszar nagwka (header)
- pasek nawigacyjny (navi)
- obszar danych (page)
Wyjanienia
Rysunek poniej przedstawia obszary w pliku HTML
Formatowanie obszarw jest definiowany centralnie w oddzielnym pliku CSS

Rysunek 4-13
Kod Wyjanienie
#page { Format CSS ma nastpujc struktur:
POSITION: absolute; Selektor {waciwo:warto)
left: 150px; W tym przykadzie, page jest selektorem z
top: 0;
height: 800px; kilkoma deklaracjami (waciwo:warto):
width: 920px; Wicej informacji na temat formatowania elemet
padding-top: 180px; HTML moe by znalezionych w rozdziale 3.1.3
padding-left: 30px;
padding-right: 30px;
text-align: left;
border-color: white;
border-style: solid;
border-width: 1px;
background-color:
rgb(208,211,218);
border-collapse : separate;
z-index: 1;
}
4.2.4 Wywietlanie obrazw

Podstawy
W pliku HTML jest kilka obrazw:

- Obrazy statyczne
- Obrazy ta
- Oraz ze zmienn wysokoci
- Obraz dynamiczny ktry zmieniany jest w zalenoci od bitu statusowego CPU
Wyjanienia
Rysunek 4-14
Kod Wyjanienie
<img src="Images/SIEMENS_Logo.PNG"> Obraz jest integrowany poprzez tag
img
background="Images\TankExample.PNG" "background" specyfikuje obraz ta z
style="background-repeat:no-repeat;
background-position:bottom left" waciwociami
<img src="Images\blue.png" Dla obrazw ze zmienn wysokoci

alt="Level" takich jak na przykad, wywietlanie
width="56px"
height=":=TankLevelScal:px " poziomu, zmienna TankLevelScal jest
style="margin-left:48px; okrelona z : oraz jednostk miary np.
marginbottom:- px. zamiast wartoci dla wysokoci.
3px">
W tym przykadzie, margins
pozycjonuje wywietlacz w obrazie ta
<img Ten obraz zaley od zmiennej

src="Images\Valve:="StatusValveCPU":.
png" StatusValveCPU. Ta zmienna moe
name="Valve" przyjc warto 0 lub 1.
"StatusValveCPU = 0" Przechowywane obrazy to Valve0.png
id="StatusValveCPU" (zawr zamknity) oraz Valve1.png
alt="Valve"
style="margin-left:70px; marginright: (zawr otwarty). Gdy zawr jest
2px; margin-bottom:12px"> zamknity StatusValveCPU ma
warto 0: wywoanie obrazu
realizowane jest przez Valve + 0 +
.png=Valve0.png.
Z alt mona okreli tekst ktry
bdzie wywietlony jeeli obraz nie
bdzie mg by wywietlony. Za
pomoc margin zawr jest
pozycjonowany do obrazu ta
4.2.5 Tworzenie tabel z tekstem

Podstawy
Uywanie tabeli jest rekomendowane w celu uniknicia przesunicia tekstu w zalenoci od

wielkoci okna.
Oczywicie mona rwnie zdefiniowa tabel centralnie poprzez CSS.
Wyjanienia
Na poniszym obrazku pokazano tylko nagwek oraz dwie pierwsze linie tabeli w celu
zwikszenia przejrzystoci.
Rysunek 4-15
Kod Wyjanienie
<table border="1"></table) Grubo ramki tabeli wynosi "1".
Tabela bez ramki: border="0".
<tr> <tr> - wiersz tabeli.
<td Zawarto komrki tabeli znajduje si
class="static_field_headline_small">
Data</td> midzy <td> (table
<td data) oraz </td>.
class="static_field_headline_left"> Format np.
Time</td> "static_field_headline_small of
<td
class="static_field_headline_left"> dane tabeli definiowane w pliku CSS.
Value</td> "class=<name>" przypisuje format z
</tr> pliku CSS do elementw w pliku HTML.
4.2.6 Wywietlanie zmiennych CPU

Wyjanienia
Zmienne w CPU s zawsze wywietlane poprzez nazw symboliczn

Rysunek 4-16
Zamiast TankLevel, wywietlana jest aktualna warto zmiennej na stronie internetowej.
UWAGA Odkd zmienna jest umieszczona tabeli w tagu <td> . </td> dodatkowo jest tu wywietlana.
Centralny format output_field jest zdefiniowany w pliku CSS.
4.2.7 Wywietlanie tekstu poprzez wyliczenia

Wyjanienia
Poprzez wyliczenia, teksty mog by umieszczone w indywidualnych wartociach CPU
Rysunek 4-17
Zamiast indywidualnych wartoci zmiennej Alarm, uprzednio przypisany tekst w HTML jest
wywietlany. Teksty te SA przechowywane w typie enum AlarmValue. Te teksty s
przenoszone do strony internetowej poprzez DB333
UWAGA Odkd wyliczenia s umieszczone w tabeli, tag <td> . </td> jest wywietlany tutaj. Centralny
format output_field_long jest definiowany w pliku CSS. Rezultat wywietlany jest jako
pogrubiony co jest okrelone przez tag <b> . </b>.
4.2.8 Ustawianie zmiennych w CPU za pomoc wartoci i przycisku

Podstawy
Aby byo moliwe transferowanie zmiennych do CPU poprzez przegldark internetow, naley
uy form i np. metody POST
Wyjanienia
Rysunek 4-18
Kod Wyjanienie
<form method="post" action="" Wywanie formy z metod POST. Pod action
onsubmit="return check();"> nie potrzeba okrela adnych detail poniwa z
<input type="text" id="wert1" action aktualna strona jest wywoywana
name='"Flowrate"' size="2"
style="height: 45px; width: domylnie. Z wywoanym onsubmit, funkcja
50px; check() jest wykonywana tak jak jest
font-size: 21px; text-align: zdefiniowana w pliku JS. Poprzez kliknicie na
center; submit, funkcja sprawdza czy wejcie jest w
padding: 8px;"> przedziale 1 do 10.
<input type="submit" Jeeli warunek ten jest speniony, funkcja
value="Set a new Flowrate" check() raportuje TRUE w przeciwnym
style="height: 45px; width:
200px"> wypadku warto wyjsciowa to FALSE i
</form> wywietlany jest dodatkowy komunikat.
Z wejciowym type=text, pole wejciowe jest
powizane z zawartoci wysyana z web
serwera CPU z submit (tylko gdy
check()=TRUE). submit jest kontrolowany
poprzez przycisk Set a new Flowrate.
4.2.9 Ustawianie zmiennych w CPU tylko za pomoc przycisku

Podstawy
Aby przypisa zmiennej w CPU warto predefiniowan, naley uy formy POST z ukryt
wartoci.
Wyjanienia
Rysunek 4-19
UWAGA Odkd przyciski s zlokalizowane w tabeli, mona zobaczy tu rwnie tagi <td> . </td>
Kod Wyjanienie
<form method="post" action=""> Wywoanie formy z metod post. Pod action
<input type="submit" nie ma potrzeby okrelania detali poniewa z
value="OpenValve"> action aktualna strona jest wywoywana
<input type="hidden"
name='"OpenValve"' size="20px" domylnie. Z wejciowym type=hidden,
value="1"> zmiennej OpenValve jest przypisana warto 1,
<input type="hidden" a zmiennej CloseValve warto 0.
name='"CloseValve"' size="20px" Za pomoc przycisku submit, wartoci
value="0"> zmienncy s wysyane do web serwera CPU.
</form>
<form method="post" action=""> Akcja odwrotna do powyej opisanej: Wywoanie

<input type="submit" formy aby przypisac warto 1 do zmiennej
value="CloseValve"> CloseValve oraz wartoci 0 do zmiennej
name='"CloseValve"' size="20px" OpenValve
value="1">
name='"OpenValve"' size="20px"
value="0">
</form>
5 Konfiguracja i ustawienia
Rozdzia zawiera wszystkie informacje na temat moliwoci samodzielnego tworzenia i obsugi
strony internetowej dla CPU z interfejsem PN. W tym przykadzie uyto CPU 1214C DC/DC/DC.
Wszystkie ponisze kroki s kompletnymi przykadami. Aby uruchomi stron internetow
prosz przeczyta rozdzia 6.
5.1 Procedura tworzenia strony internetowej

Konfiguracja i ustawienia w STEP 7 oraz pisanie pliku w HTML s cile powizane. Ponisza
procedura jest rekomendowana dla:
1. Konfiguracji S7-1200 (1214C DC/DC/DC)
2. Tworzenie zmiennych w tablicy zmiennych lub boku DB
3. Tworzenie plikw HTML
4. Ustawienia Web serwera i generowanie blokw danych
5. Ustawianie hasa CPU
6. Tworzenie, kompilacja i adowanie programu S7
7. Wywoywanie strony w przegldarce internetowej
5.2 Konfiguracja S7-1200 (1214C DC/DC/DC)

Nr Akcja Komentarz
1. Uruchomi STEP 7 i utworzy nowy
project o nazwie Webserwer_S7-
1200 poprzez Project > New.
2. Umieci sterownik S7-1200
poprzez Add new device >> PLC
> SIMATIC S7-1200 > CPU 1214C
DC/DC/DC > 6ES7 214-1AE30-
0XB0 v2.2. Automatycznie otwiera
si widok ustawie sterownika
Device view.
3. Klikn na przycisk Add new
subnet we waciwociach
interfejsu Ethernet.
4. Przypisa adres IP do interfejsu
Ethernet. Poprzez ten adres IP
bdzie moliwe poczenie si ze
sterownikiem poprzez przegldark
internetow.
5.3 Tworzenie zmiennych w tablicy zmiennych lub bloku DB

Nr Akcja Komentarz
1. Klikn dwa razy na Defaul
tag table w folderze PLC_1 >
PLC tags
2. Edycja zmiennych.
5.4 Tworzenie plikw HTML

W celu stworzenie pliku HTML, potrzebna jest lista zmiennych z rozdziau 5.3. Tworzenie
zmiennych w tablicy zmiennych lub bloku danych DB. W celu stworzenia strony internetowej
polecane jest uycie edytora HTML takiego jak np. Microsoft FrontPage, ktry automatycznie
tworzy tagi, zaznacza na czerwono bdnie wpisany kod, lub uycie prostego narzdzia takiego
jak np. Notepad++.
Nr Akcja Komentarz
1. Utworzy plik HTML przy uyciu Szczegowe informacje na temat tworzenia pliku HTML moga by
edytora. Zapisa plik HTML z znalezione w rozdziale 3.3. Podstawy tworzenia stron uytkownika w
wymaganymi obrazami, formatkami rozdziale 4.2.
stylw i skryptami w ciece \html.
5.5 Ustawienia Web serwera i generowanie blokw danych

Nr Akcja Komentarz
1. Klikn Web serwer we
waciwociach PLC. Aktywowa
opcj Enable Web server on this
module oraz Automatic update.
Jeeli wymagany jest bezpieczny
dostp do standardowej strony
opcja Permit Access only with
HTTPS musi by zaznaczona.
2. Wpisa ciek dostpu do pliku
HTML i wybra stron startow.
3. Wygenerowa blok sterujcy (block
Control, domylnie: DB333) oraz
blok z danymi strony (Fragment
DB, domylnie od DB334) klikajc
Generate blocks. STEP 7 V11
sprawdza projekt w zwizku ze
zmiennymi, aduje poszczeglne
pliki, sprawdza odnoniki do
obrazw itd., nastpnie zapisuje
wszystko do DB333 i od DB334.
Status generowania wywietlany
jest w niezalenym oknie lub oknie
inspektora pod oknem info.
5.6 Tworzenie plikw HTML

W celu stworzenie pliku HTML, potrzebna jest lista zmiennych z rozdziau 5.3. Tworzenie
zmiennych w tablicy zmiennych lub bloku danych DB. W celu stworzenia strony internetowej
polecane jest
Nr Akcja Komentarz
1. Klikn Protection we
waciwociach PLC.
Zaznaczy Write
protection.
2. Wpisa haso i
potwierdzi to haso
UWAGA Ze strony Web serwera nie ma znaczenia czy jest zaznaczone Write protection lub Write/read
protection. Web serwer nie obsuguje ochrony przed zapisem.
5.7 Tworzenie, kompilacja i adowanie programu S7

Przykadowy program S7 moe by znaleziony jako zacznik do tego przykadu. Podczas
tworzenia programu naley pamita o nastpujcych aspektach:
- Wywoa funkcj WWW (SFC99). Funkcja WWW inicjalizuje web serwer w CPU.
Cykliczne wywoanie tej funkcji zapewnia wywietlanie na stronie zmieniajcych si zmiennych.
Cykliczne wywoanie SFC99 naley zrealizowa w OB1.
-Wpisa numer bloku sterujcego (Web Control DB: np. DB333) w miejscu parametru
wejciowego CTRL_DB funkcji WWW.
Nr Akcja Komentarz
1. Kompilacja
Klikn prawym na S7 1214C
DC/DC/DC I wybra Compile >>
All.
2. adowanie projektu Okno dialogowe do ustawienia interfejsu PG/PC jest pokazywane tylko
Klikn prawym przyciskiem myszy podczas pierwszego adowania.
na 7 1214C DC/DC/DC i wybra
Download to Device > All
Ustawi interfejs PG/PC w oknie
dialogowym:
-PN/IE
-<network adapter
(local) PN/IE
Wybra S7 1214C DC/DC/DC i
nastpnie klikn Load.
UWAGA Jeeli ma zosta uyte inne CPU, mona je zmieni w Devices & networks. Po zmianie,
naley pamita o ponownym ustawieniu opcji web serwer (patrz rozdzia 5.5 )
5.8 Wywoanie strony poprzez przegldark internetow

Nr Akcja Komentarz
1. Uruchomi przegldark
internetow np. Internet
Explorer. Wpisa adres IP
sterownika np.:
http://192.168.80.20.
Uwaga: komputer i
sterownik musz by w tej
samej podsieci.
aduje si strona startowa
sterownika.
- Klikn ENTER.
2. Wpisa nazw admin I

haso s7. Klikn Log in.
Kompletna strona
internetowa CPU jest
otwarta.
Uwaga: Jeeli wystpi problem z certyfikatem bezpieczestwa strony internetowej naley przej do
Introduction i cign Siemens security certificate np. w Internet eplorerze:
- Klikn link download certificate. Wywietla si komunikat File download Security Warning
- Klikn Open w oknie File download Security Warning aby otworzy plik. Otwiera si okno
Certificate
- Klikn przycisk Install certificate w oknie Certificate, w celu otworzenia asystenta importu
certyfikatu
- Postpowa zgodnie z pojawiajcymi si informacjami w Certificate iport Wizard w celu importu
certyfikatu. Trusted Root Certification Authorities
3. Aby otworzy stron

uytkownika, klikn User
Pages
4. Aby wystartowac
przykadow aplikacj
klikn Homepage of the
application. Otwiera si
strona startowa Start.
5. Szczegowe omwienie
dziaania przykadowej
strony znajduje si w
rozdziale 7
6 Instalacja
6.1 Procedura tworzenia strony internetowej

Instalacja sprztu
Poniszy rysunek pokazuje struktur sprztu przykadowej aplikacji.
Komputer z zainstalowan przegldark internetow musi by podczony do CPU poprzez
Industrial Ethernet, np.:
- bezporednio przez interfejs PN w CPU
- poprzez switch
Rysunek 6-1
UWAGA Prosz skorzysta z przewodnikw intalacji poszczeglnych elementw
Instalacja oprogramowania
Nr Akcja Komentarz
1. Zainstalowa STEP 7 V11 SP2
2. Zainstalowa a komputerze narzdzie do tworzenia
stron internetowych, np. MS frontpage lub
Notepad++.
3. Zainstalowa przegldark internetow na
komputerze np. Internet Explorer, Firefox
6.2 Instalacja przykadowej aplikacji

Nr Akcja Komentarz
1. Rozpakowa plik Example_S7-
1200_Webserwer.zip w folderze projektu
2. Uruchomi SIMATIC STEP 7 V11 SP2
3. Otworzy projekt w SIMATIC STEP 7 SP2
4. Przej do Device view
5. Jeeli posiadane CPU jest inne od tego w projekcie,
naley zmieni CPU za pomoc opcji change device
6. We waciwociach CPU, przypisa adres iP do Wicej informacji w rozdziale 5.2
interfejsu sterownika
7. Wybra Sterownik S7-1200 i zaadowa cay projekt
8. Otworzy przegldarke internetow i wywoa stron Wicej informacji w rozdziale 5.8
internetow sterownika poprzez wpisanie jego
adresu IP
7 Praca z aplikacj
W tym rozdziale
Ten rozdzia dostarcza informacji na temat pracy z przykadow aplikacj
Nr Akcja Komentarz
1. -uruchomi przegldark
internetow np. Internet Explorer.
Wpisa adres IP sterownika
http://192.168.80.20.
Otwiera si strona startowa
-wcisn ENTER
2. Wpisa nazw admin I haso s7.

Klikn Log in.
Kompletna strona internetowa CPU
jest otwarta.
Uwaga: Jeeli wystpi problem z certyfikatem bezpieczestwa strony internetowej naley przej do
Introduction i cign Siemens security certificate np. w Internet eplorerze:
- Klikn link download certificate. Wywietla si komunikat File download Security Warning
- Klikn Open w oknie File download Security Warning aby otworzy plik. Otwiera si okno
Certificate
- Klikn przycisk Install certificate w oknie Certificate, w celu otworzenia asystenta importu
certyfikatu
- Postpowa zgodnie z pojawiajcymi si informacjami w Certificate iport Wizard w celu importu
certyfikatu. Trusted Root Certification Authorities
3. Aby otworzy stron uytkownika,

klikn User Pages
4. Aby wystartowac przykadow

aplikacj klikn Homepage of the
application. Otwiera si strona
startowa Start.
5. Poprzez strony internetowe jest

bezporedni dostp do
sterownikia:
Strona Plant status:
- Uruchomic aplikacj poprzez
kliknicie przycisku Start
- Po klikniciu Stop aplikacja
zatrzymuje si
- Kliknicie przycisku Reset
powoduje powrt aplikacji do stanu
pocztkowego.
- Status pracy aplikacji
sygnalizowany jest przez LED
(czerwony: wyczona, zielony:
wczona)
- Warto przepywu moe by
wpisana rcznie. W programie S7,
rednia warto przepywu
ustawiona jest na 5. Im wysza
warto przepywu, tym szybszy
przepyw. Wpisywanie wartoci
przepywu kontrolowane jest przez
skrypt. Jeeli pojawi si
niewaciwe wartoci, zostaje
wywietlony komunikat. Poprzez
linki w pasku nawigacyjnym mona
przecza ekrany
6. Strona Tank overview:

- Poprzez niebieski pasek na zbiorniku
mona podeje aktualny poziom
zbiornika. Dodatkowo poziom
napenienia wywietlony jest w postaci
tekstu.
- po klikniciu przycisku OpenValve
nastepuje oprniaie zbiornika.
- po klikniciu CloseValve nastpuje
napenianie zbiornika.
zawr zielony:otwarty
- zawr czerwony: zamknity
- Strona jest automatycznie
odwieana.
7. Strona Data
-Ta strona pokazuje bufor
piercieniowy z dwudziestoma
ostatnimi wpisami poziomu
zbiornika.
- strona jest automatycznie
odwieana
8. Strona Data optimized:

-strona pokazuje dwadziecia
ostatnich poziomw zbiornika
-wpisy s automatycznie odwieane
poprzez JavaScript
-Uruchomi aplikacj poprzez przycisk
Start
-Po klikniciu Stop aplikacja
zatrzymuje si
9. Rwnolegle mona monitorowa

zmian wartoci w tablicy watch table
w STEP 7 V11.
8 Glosariusz
AWP
Automation Web Programming
AWP command (komenda AWP)
Komenda AWP jest rozumiana jako specjalna skadnia komendy okrelajca ktre dane s
wymieniane midzy sterownikiem I plikiem HTML
CSS
CSS (Cascading Style Sheets) definiuje sposb wywietlania zawartoci strony internetowe
(formatowanie).
HTML file (Plik HTML)
Pliki HTML s podstaw World Wide Web I s otwierane poprzez przegldark internetow.
HTTP
Hypertext Transfer Protocol (HTTP) jest protokoem sucym do transferu danych poprzez
sie.
HTTPS
Hypertext Transfer Protocol Secure jest protokoem komunikacyjnym, ktry jest uywany w
WWW do wymiany bezpiecznych danych
MIME type
Multipurpose Internet Mail Extensions (MIME), informuje przegldark internetow ktre dane
s wysyane poprzez web serwer, np. Czy to jest czysty tekst, plik HTML lub obraz PNG.
UTF-8
UTF-8 (8-bit UCS Transformation Format) jest najczciej uywanym kodem znakw Unicode.
Web browser (przegldarka internetowa)
Przegldarka internetowa jest programem wizualizacyjnym dl astron internetowych i komunikuj
si z web serwerami. Typowe przegldarki to:
-Microsoft Internet Explorer
-Mozilla Firefox
Web page (Strona Web)
Patrz plik HTML.
Web serwer
Web serwer przechowuje I udostpnia strone internetow. Web serwer jest programem ktry
transferuje dokumenty za pomoc standardowych protokow transmisji (http, HTTPS ) do
przegldarki internetowej.
9 Literatura
Ponisza lista zawiera jedynie wybr pozycji uzupeniajcych:
Nr Temat Tytu
/1/ STEP7 SIMATIC S7 -1200 Automating in STEP 7 with SIMATIC S7-1200
Author: Hans Berger
Publicis Publishing
ISBN: 978-3895783562
/2/ HTML HTML und CSS, Praxisrezepte fr Einsteiger
Robert R. Agular
mitp
ISBN 978-3-8266-1779-9
/3/ HTML HTML Handbuch
Stefan Mnz/Wolfgang Nefzger
Franzis Verlag
ISBN 3-7723-6654-6
/4/ Javascript JavaScript und Ajax, Das umfassende Handbuch
Christian Wenz
Galileo Press
ISBN 978-3-8362-1128-4

FAQ Web Pages 8

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FAQ Web Pages 8

Uploaded by

Copyright:

Available Formats

Tworzenie projektu Modbus w S7-1200 PLC

Siemens Industry Online Support

Jeeli podane informacje nie s wystarczajce, zachcamy do korzystania z forum

Simatic Step 7 Basic v10.5 S7-1200 PLC

1 Opis zagadnienia omawianego w dokumencie

2 Rozwizanie w zakresie automatyki

Zalety i moliwoci aplikacyjne serwera www

Procedura tworzenia stron internetowych w skrcie

2.2 Opis zawartoci aplikacji

- Szczegy tworzenia stron internetowych

2.2.2 Opis i przegld interfejsu uytkownika

Strona web pokazuje stron startow aplikacji.

Strona Overview Tank

Strona web pokazuje bufor zapisanych ostatnio 20 poziomw zbiornika.

Strona Data Optimized

2.3 Uyte komponenty sprztowe i programowe

Komponent ilo Numer zamwieniowy Uwagi

RJ45 plug-in Mog by dopasowane

Komponent ilo Numer zamwieniowy Uwagi

Przykadowe pliki i projekty

3 Podstawy tworzenia stron internetowych

3.1 Oglne zasady projektowania stron internetowych

Reprezentacja Funkja Przykad

3.1.2 Uywanie form

Typowe waciwoci CSS

Warto CSS Funkja Przykad

Integracja styli CSS w HTML

3.1.4 Podstawy JavaScript

Integracja JavaScript w HTML

3.1.5 Automatyczne odwieanie strony web

Odwieanie za pomoc JavaScript

3.2 Podstawy dotyczce standardowej strony web

Standardowe strony web sterownika SIMATIC S7-1200

3.3 Podstawy dotyczce stron uytkownika

3.3.1 Tworzenie stron uytkownika

3.3.2 Wymagane bloki WWW (SFC99)

Bloki DB sterujce oraz DB przechowujce stron uytkownika

UWAGA Jeeli zachodzi potrzeba zredukowania przestrzeni pamici przeznaczonej na stron

Typowe uycie zmiennych

Reprezentacja Funkcja Przykad Informacje

3.4 Wywietlanie zmiennych CPU na stronie internetowej

Program S7 Plik HTML

3.4.3 Wymagane bloki WWW (SFC99)

3.5 Zapis zmiennych CPU ze strony internetowej

Program S7 Plik HTML

Transfer zmiennych z przegldarki

3.6 Powizanie zmiennych z tekstem w pliku HTML

Program S7 Plik HTML

Tworzenie typw ENUM

Komenda AWP, poprzez ktr definiowane s typy ENUM jest nastpujca:

<!-- AWP_Enum_Def Name= ="<Name Enum type>"

Przykad dla zmiennej AlarmValue:

<!-- AWP_Enum_Def Name="AlarmValue" Values='0:"Tank empty!",

Przypisywanie typw ENUM

3.7 Tworzenie optymalnych czasowo stron uytkownika (opcja)

Rysunek 3-5 Czytanie/zapis zmiennych

Rysunek 3-6 Wycignite ze skryptu Data_String.js

4 Mechanizmy funkcjonalne aplikacji

Nastpujce symbole i zmienne s w bloku danych Data_Buffer:

4.1.1 Blok startowy (OB100)

4.1.2 Main (OB1)

Synchronizacja stron uytkownika