DISEO DE UNA PAGINA WEB

PARA PLC SIEMENS S7-1200

DISEO DE UN PAGINA WEB EN DREAMWEAVER 8
Se necesita crear una pgina para controlar y monitorear un PLC el cual est programado
para controlar el mdulo de almacenamiento.
Para lo siguiente se utilizara el programa DreamWeaver 8 el cual est diseado para hacer
pginas WEB.
A partir de ahora trataremos de dar indicaciones de hacer un manual o tutorial para
facilitar el uso de dicho programa.















CONFIGURACIN DE LA PGINA WEB
Es muy importante configurar los parmetros de nuestra pgina ya que estos definen las
acciones a tomar por parte del programa DreamWeaver 8 y nos ayuda a no tener errores
al momento de publicar.
Abrimos el programa DreamWeaver 8 y nos situamos donde dice Sitio de DreamWeaver:

Despus nos aparecer un recuadro como el siguiente simplemente escribimos el nombre
de nuestra pgina web en nuestro caso es Unidad de paletizado y luego clic es Siguiente












Despus aparecer un cuadro de dialogo donde nos dir si queremos usar la tecnologa de
servidores como PHP, ASP, NET, etc. Le diremos que no ya que no lo necesitaremos por el
momento simplemente siguiente.















El siguiente cuadro de dialogo es de suma importancia ya que nos dar la opcin de elegir
donde alojaremos nuestra pgina WEB y nos pone que si deseamos elegir un sitio en
nuestro PC o un sitio web en red local, nosotros en nuestro caso le diremos que lo
queremos guardar en nuestro disco duro y elegimos un lugar donde guardarlo, pon mucha
atencin en donde lo guardas esto es muy importante porque ah se guardaran todos los
datos que iremos generando de nuestra pgina web.













Luego nos preguntara si vamos a conectar nuestro sitio web para compartir archivos esto
no ser necesario as que clicamos en ninguno y damos siguiente.

Por ltimo nos mostrara un cuadro de dialogo que nos indicara nuestras indicaciones y
nos preguntara si son correctas, revisamos y si vemos que todo es correcto procedemos a
terminar de configurar nuestra pgina.



TABLAS
Las tablas nos van a ser indispensables ya que no existe otra manera ms fcil de
acomodar nuestra pgina web, bien empezamos
Despus de haber configurado nuestra pgina web (si no ha configurado, ver la seccin
anterior Configuracin de la pgina web) pasaremos a disear lo que ser la pgina en
s, para eso haremos nuestra pgina en este caso como si de un documento se tratara y un
documento siempre tiene; un ttulo o cabeza de pgina, un contenido, y un pie de pgina,
para hacer ese formato necesitaremos ayuda de las tablas.
Abrimos el programa DreamWeaver 8 y seleccionamos el apartado HTML

Ahora debe de haberse abierto una hoja en blanco como si fuera un Word o un bloc de
notas, donde nos va servir para escribir.







Ahora nos situamos en el men Comn. Esto es lo que se muestra cuando abrimos por
primera vez el DreamWeaver 8 pero es muy comn que sea algo molesto estar
accediendo al men a cada rato pero por suerte el programa tiene un modo de fichas
que son mucho ms cmodas le damos clic izquierdo y seleccionamos mostrar como
fichas




Despus se mostrara un men mucho ms amigable con el cual podremos trabajar
seleccionamos Diseo.




Como podremos ver ahora cambio la barra de la parte de abajo y nos muestra una serie
de iconos los cuales nos van a servir para hacer nuestro diseo de pgina, despus de eso
seleccionar el siguiente icono





Este icono sirve para insertar una tabla, despus de eso DreamWeaver 8 nos mostrara un
cuadro de dialogo, que nos indicara que vamos a poner una tabla y nos dar varias
opciones que nos sern de gran utilidad. Vamos a seleccionar 3 filas y 1 columna.




Luego nos aparecer algo como esto




Nosotros utilizaremos esa tabla como nuestra pgina web pero como pueden ver esa
pgina es muy pequea apenas podemos escribir en ella as que sele
seleccionamos la tabla y damos en la opcin propiedades



Pon mucha atencin en las propiedades si te fijas hay un formulario para cambiar el
tamao de la tabla y lo ponen como An y Al. Y enseguida de ellos ponen una lista
donde dice px. Bueno vamos a poner 100 en An y en Al y el Px lo vamos a
cambiar por %.


Observa que la tabla se ha estirado y no solo eso al tamao completo de nuestra pgina,
adems en el explorador el tamao de la pgina puede variar y la tabla cambiara de
tamao junto con el explorador. Pongmosle colores para identificar nuestras celdas.









Para cambiar el color de una celda simplemente la seleccionamos y despus en
propiedades donde dice Fnd le damos clic al cuadro y seleccionamos un color

As podemos cambiar el color de fondo de la pgina web

Si queremos hacer que dos celdas se unan podemos hacerlo con el botn unir, que se
encuentra en la ventana propiedades de celda. Seleccionamos las dos celdas que se
desean unir y luego clic en el botn unir

De la misma manera podemos separar una celda en 2 dos.



AGREGAR TABLAS DENTRO DE UNA CELDA.
Al hacer un pgina web te dars cuenta que para obtener el diseo visual que t quieras
no es solo hacer una tabla sino que adems se te ocurre poner otra cosa como botones y
esas cosas, entonces para eso te ensearemos a insertar una tabla dentro de otra tabla.
Comenzamos
Insertar una tabla dentro de una tabla es relativamente fcil solo hacemos clic dentro de
la celda que queramos insertar una tabla en el men propiedades seleccionamos donde
dice celda y pone Vert y Horiz seleccionamos Vert y ponemos Superior

Despus vamos al icono insertar tabla como normalmente lo hacemos, seleccionamos
cuantas filas y columnas queremos y listo

De esa manera podemos acomodar las pginas con tablas.



BARRA DE BANNER
Par hacer que nuestra pgina quede muy bonita querremos que se parezca a las dems
verdad o por lo menos que se vea como un pgina decente para eso necesitaremos una
barra de banners es la que se pone como un encabezado dentro de un pgina web, para
ello seleccionaremos la celda que nosotros marcamos como encabezado, y la vamos a
dividir en varias celdas en nuestro caso 3.










INSERTAR IMAGENES
Luego vamos insertar la imagen que queremos como banner y la seleccionamos por
partes, es necesario recortar la barra de banner para que sea dinmica y se pueda estirar.


Como pueden ver mi barra est dividida en 3 partes:






En cada celda se agrega una imagen diferente y se acomodan para que parezcan una sola.

Pero como pueden apreciar la barra no se une quedan unas rayas blancas ah estorbando,
esto se debe a que la celda tiene margen vamos a proceder a quitar dicho margen.

Para quitar el margen de la celda vamos a situarnos en la tabla, en propiedades vamos a
donde dice Rell. Celda y Esp. Celda y cambiaremos sus valores a 0 con eso debe de
desaparecer el margen y quedar un bonito banner de nuestra pgina.





De la misma manera ponemos ms imgenes en las dems celdas y tendremos un bonito
diseo de pgina.




AGREGAR VNCULOS
Una pgina web no est completa si no tiene vinculada otro pgina es decir un botn que
te enve a otro sitio web, en esta seccin vamos ensear como agregar vnculos
Para agregar un vnculo es necesario escribir un texto y despus seleccionarlo, luego en la
ventana propiedades ir a donde pone vnculo y dar clic en el icono de carpeta despus
buscar otro sitio y seleccionarlo eso es todo.








CREAR UNA PGINA PARA VISUALIZAR EL ESTADO DE ENTRADAS Y SALIDAS
Creamos una pgina web en el DreamWeaver con un nombre que nos permita
identificarla como entradas y salidas
Archivo/Guardar como/


En dicha pgina creamos una tabla y escribimos los sensores y actuadores que queremos
monitorear:


Ntese como los sensores y actuadores ponen:=webdata.b0:



Esto es porque de esa manera se comunicaran con el PLC.
Donde web data es una instruccin que pondremos en el PLC y b0, b1, b2, etc. Son los
nombres que les asignamos a los sensores, estos pueden ser cualquiera pero en el PLC se
deben de asignar los mismos nombres ms adelante veremos cmo se hace y por qu es
necesario.
Una vez hecho esto hemos terminado con la parte del monitoreo.
Nota: es muy importante que se ponga el cdigo;
:webdata.NDS:
De esta manera
Donde NDS es donde escribiremos el nombre que le asignaremos en el TIA Portal al sensor
Ya que si no se hace esto el cdigo no ser reconocido por el TIA PORTAL y al generar la
pgina web no reconocer las entradas ni salidas
Ejemplo de cmo puede quedar nuestro cdigo
:webdata.sensor pieza:
:webdata.b1:
:webdata.S0:
Todas las letras deben estar en minsculas.



CREAR UNA PGINA PARA ENVIAR DATOS AL PLC


Con el fin de manipular el PLC desde nuestra pgina web hacemos una o dos pginas
donde el accionamiento sea manual o automtico
En nuestro caso hicimos una para manual y otra para automtico
- Creamos una pgina en DreamWeaver con el nombre Automatico.html
- Creamos una tabla
- Dentro de la tabla creamos un formulario
En el men (barra superior) nos vamos a insertar despus en formulario
seleccionamos lista/men y aparecer el siguiente cuadro de dialogo:

Y aparecer algo como esto:










Clic en el formulario y en la pestaa propiedades elegimos Valores de lista
aparecer un cuadro de dialogo, hacemos clic en el botn +(mas), y escribimos
Activar despus enseguida escribimos 1 luego de nuevo al botn + y
escribimos Desactivar y 0:

Luego hacemos clic en el formulario y nos vamos a la pestaa Codigo aparecer
resaltado de azul el cdigo perteneciente al formulario

Para que se comunique correctamente con el PLC tenemos que editarlo y agregar
esta lnea

<!-- AWP_In_Variable Name='"webdata".inicio ' -->

Donde

webdata: es el nombre del bloque de datos que creamos en el programa de PLC
Inicio: es el nombre de la variable que se encuentra en el bloque de datos
(webdata).














Esa lnea de cdigo ser acomodada de esta manera:



Ntese que ha aparecido un botn a lado del formulario con el texto ENVIAR PLC.





Con esto la edicin de la pgina web termina.

Nota:
Es muy importante que en el cdigo se respeten las maysculas, minsculas signos de
puntuacin, etc. ya que sin estos puede no funcionar correctamente.
Para que no haya ningn problema pondremos el cdigo asi simplemente puede copiar y
pegar:











<!-- AWP_In_Variable Name='"webdata".inicio' -->
<form method="post" class="Estilo1">
<div align="center">
<p>AUTOMATICO
<select name='&quot;webdata&quot;.inicio'>
<option value=1>Activar</option>
<option value=0>Desactivar</option>






PREPARAR PLC PARA AGREGAR LA PGINA
Utilizar una pgina web para manipular y monitorear PLC es de gran utilidad ya que nos
puede resultar ms econmico que comprar una pantalla TOUCH para una empresa que
requiera un sistema para manipular y monitorear el estado de un PLC de una manera ms
sencilla, ya que esta pgina solo necesita de una computadora para visualizarla.
A continuacin se describe paso a paso como configurar el PLC siemens s7-1200 para el
monitoreo de un proceso:
Pas 1: Crear un nuevo proyecto.
En este paso ejecutamos el software SIEMENS TIA PORTAL 2011, despus se
despliega la ventana de inicio donde aparecen diferentes opciones.
Se elige la opcin CREAR PROYECTO.
En esta opcin se despliega varios campos, uno de ellos el de nombre del proyecto
y la ruta en donde se va guardar el proyecto.
Asignas el nombre a tu proyecto y la ruta donde se va a guardar tu proyecto.
Posteriormente se elige la opcin CREAR.








Pas 2: Agregar dispositivo.
Una vez creado nuestro proyecto, nos disponemos a agregar nuestro dispositivo, en este
caso el primer dispositivo que vamos a agregar es nuestro dispositivo S7-1200.
Posteriormente de creado nuestro proyecto se despliega una nueva ventana, en la
cual nuevamente aparecen nuevas y diferentes opciones.
Se elige la opcin DISPOSITIVOS Y REDES: CONFIGURAR UN DISPOSTIVO.














Posteriormente de haber elegido la opcin anterior se despliega una nueva
ventana, la cual se muestra a continuacin.

A continuacin despus de que aparece la nueva ventana, elegimos la opcin
AGREGAR DISPOSITIVO.
Despus de elegir esta opcin, aparece el recuadro donde se muestran los
iconos de PLC, HMI Y SISTEMAS PC, elige la opcin PLC.
En el campo de nombre del dispositivo, insertas el nombre de cmo se va llamar
tu dispositivo, en nuestro caso PAGINA_WEB_S7_1200
Despus de elegir la opcin PLC observamos que existen diferentes modelos de
PLCs, en esta ocasin trabajaremos con el S7-1200, despus de elegir la opcin
S7-1200, se nos despliegan los diferentes modelos de CPU para esta gama.
Elegiremos la opcin CPU 1214C AC/DC/RLY, despus de elegir nuestro modelo
y CPU, se despliega toda la informacin de nuestro dispositivo (referencia,
firmware y caractersticas principales) en la imagen superior se encuentra
encerrado en un recuadro color azul.
Posteriormente de elegir el modelo de nuestro dispositivo, damos clic en
AGREGAR.
Despus de agregar, se despliega una nueva ventana donde ya aparece nuestro
dispositivo agregado, esto se muestra a continuacin.
V2.0




Listo ahora tenemos nuestro PLC agregado y configurado correctamente.














AGREGAR LA PGINA WEB AL PLC
Ahora tenemos que agregar nuestra pgina web al PLC
En el TIA PORTAL nos vamos a Dispositivos / PLC / y le damos doble clic a Configuracin
de dispositivos
Luego a la seccin propiedades
Desplegamos el men donde dice General y abrimos Servidor Web
En sus dichas propiedades marcamos la casilla que dice Activar servidor web en el
modulo

Luego bajamos el scroll hasta abajo donde dice Pginas web definidas por el usuario
En directorio HTML le damos un clic al botn que tiene tres puntos (), y buscamos
nuestra carpeta que contenga nuestra pgina web.
Luego donde dice Pgina de inicio HTML le damos clic a los 3 puntos de nuevo y definimos
cual ser nuestra pgina principal.
En nombre de aplicacin definimos un nombre.
Despus al botn generar bloques.



A continuacin vern una animacin de que se estn creando los bloques

Ya hemos cargado nuestra pgina web en el PLC pero an no est configurada











AGREGAR BOQUE WEBDATA
Vamos a Dispositivos / PLC / Bloques del programa
Seleccionamos Agregar un nuevo bloque
Marcamos el botn bloque de datos y de nombre ponemos webdata

Pongan mucha atencin que el nombre debe de ser en letra minscula.







Mostrar un nuevo bloque con el nombre webdata
Y dentro tendremos celdas vacas como para agregar variables del PLC
Mucha atencin aqu
Este es el paso del que se hablaba en el DreamWeaver 8 es decir aqu se tiene que
respetar el nombre que se puso en DreamWeaver
Si en el cdigo pusiste:







Tienes que poner en Nombre inicio y declararlo como un Word

Y para los sensores pones los nombres de los sensores y los declaras como Bool










INSERTAR EL SERVIDOR DE USUARIO EN EL PROGRAMA
Ahora tenemos que hacer una secuencia para que el programa detecte nuestra pgina
web
Pero primero abrimos
Dispositivos / Bloques de programa / Bloque de sistemas / Servidor web
Veremos que hay muchos bloques
Entre ellos DB 333 y DB 334
Bueno empezare explicando el bloque DB 334

Los fragmentos son el nombre dado a cada archivo en la carpeta de pginas de usuario.
Principio que acabamos de crea un solo archivo llamado "Banda_Christiani_PaginaWeb"
pero tambin tenemos varios vnculos en la misma carpeta.
Por ejemplo:



Cabe mencionar que los seleccionados son los archivos html y lo dems imgenes ya que
todo tiene que estar en una misma carpeta ya que todos se guardan en bloques
fragmentados como se explicara ms adelante.
Al hacer clic en el botn "Generar bloques", el compilador toma todos estos archivos y
copia cada byte en una matriz en el elemento de los bloques de datos de fragmentos. La
primera DB Fragmento comienza a DB334. Un conjunto esta dimensionado para cada
archivo.




A continuacin se puede ver como cada byte del archivo se est guardado en un vector de
la matriz.

A medida que agrega ms archivos a la carpeta, es posible superar el nmero mximo de
bytes que pueden estar contenidos en un bloque de datos, cuando esto sucede, se crea
otro bloque de datos secuencia. Puede incluir archivos HTML, JavaScript, archivos CSS, e
incluso los archivos de imagen. Todos ellos se convierten en fragmentos de bloques de
datos.



El bloque DB333 se utiliza en conjunto con la funcin WWW que se explicara ms adelante
y este sirve para controlar la recuperacin y entrega de los fragmentos.

El cual se muestra en la imagen a continuacin como esta enlazado los bloques DB333 Y
DB334 y el bloque de comunicacin WWW.
Y todo esto es solo para que sepan que hace el PLC con nuestra pgina web, es repartida
en fragmentos de bloques y el ms importante y nico que usaremos es el DB 333 con el
vincularemos el PLC y la pgina web de la siguiente manera:

Para poder hacer esto vamos a
Dispositivos / Bloques de programa /


Y damos doble clic en main
Y en el ltimo segmento arrastramos un WWW que se encuentra en
Instrucciones / Comunicacin / Web server
Lo arrastramos y lo ponemos en el ltimo segmento despus en CTRL_DB ponemos DB
333 sin comillas, y en RET_VAL ponemos estado para esto la variable estado debe de
ser dado de alta en
Dispositivos / PLC / Variables del PLC
Con el nombre de estado y en tipo Int para que pueda ser reconocido por el sistema:















COMO AGREGAR SALIDAS AL SISTEMA (SENSORES)
Se inserta un segmento en la parte que sea, y se pone un contacto normalmente abierto
en el ponemos es sensor que queremos monitorear, y a continuacin al otro lado del
segmento ponemos un asignacin NA y en el escribimos webdata.sensor que deseamos
monitorear.


COMO AGREGAR ENTRADAS AL SISTEMA (ACTUADORES)
Aqu es igual de fcil creamos un segmento nuevo y ponemos un comparador en el
ponemos como nombre webdata.motor que queremos controlar
En la parte de abajo escribimos un 1 si queremos activar o un 0 si queremos desactivar lo
que pone abajo en azul se escribe solo dependiendo de lo que pongas, despus utilzalo
como si de un contacto normal se tratara y activa el motor fsico con su enclavamiento
para que no se desactive solo.



ACCESAR A LA PGINA EN EL PLC
Ahora esta lista su pgina web se encuentra comunicada totalmente con su PLC ahora solo
resta abrir el explorador y poner el Ip del PLC en la barra de direcciones
En nuestro caso es 192.168.19.221




Donde describimos brevemente cada rea de la pgina:
1. Encabezado del servidor web.
2. Iniciar o cerrar sesin de administrador.
3. Encabezado estndar de la pgina web con el nombre de la pgina visualizada.
4. Icono de actualizacin: para pginas con actualizacin automtica, activa o
desactiva esta funcin.
5. Icono de impresin: prepara y visualiza una impresin de la informacin
disponible.
6. rea de navegacin para pasar a otra pgina web.
7. rea de contenido de la pgina web estndar.
ARRANQUE Y PARO PLC S7-1200 A TRAVS DE SERVIDOR WEB
Nos dirigimos a Start Page la cual es la pgina de arranque muestra una representacin de
la CPU con la que se ha realizado la conexin e indica la informacin general sobre la CPU.
Si el usuario inicia sesin como administrador, tambin puede modificar el modo de
operacin de la CPU y encender los LED.





Los botones 1 y 2 aparecen nicamente si se ha iniciado sesin como "admin".
1. Permite encender los LED del CPU, los cuales parpadean para asegurarse de la
conexin del PLC dentro de la misma red de la computadora.
2. Permite arrancar o parar el PLC el mismo puede ser utilizado para apagado de
emergencia.





INFORMACIN DEL MODULO
La pgina de informacin del mdulo ofrece informacin sobre todos los mdulos en el
rack local.
La seccin superior de la pantalla muestra un resumen de los mdulos y la seccin inferior
muestra el estado y la identificacin del mdulo seleccionado.



ESTADO DE LAS VARIABLES
La pgina de estado de las variables permite ver cualquier dato de memoria o E/S en la
CPU. Se puede introducir una direccin directa como I0.0, un nombre de variable del PLC o
una variable de un bloque de datos determinado. Para variables de bloque de datos se
pone el nombre del bloque entre comillas dobles. Para cada valor de observacin se
puede seleccionar un formato de visualizacin de datos. Se puede continuar
introduciendo y especificando tantos valores como se desee dentro de los lmites de la
pgina.
Los valores de observacin se visualizan automticamente y se actualizan por defecto, a
menos que se haga clic en el icono "Off" en el rea superior derecha de la pgina. Cuando
la actualizacin automtica esta desactivada se puede hacer clic en "On" para activarla
nuevamente.





















PGINA WEB DEFINIDA POR EL USUARIO
El servidor web de S7-1200 tambin ofrece medios para crear paginas HTML especficas
para la aplicacin que incorporan datos del PLC. Se crea estas pginas utilizando el editor
de HTML deseado y se carga en la CPU en la que sern accesibles desde el men de la
pgina web estndar. Este proceso incluye varias tareas:
1. Crear paginas HTML con un editor de HTML en nuestro caso fue DreamWeaver 13.
2. Incluir comandos AWP en comentarios HTML con el cdigo HTML los comandos
AWP son un conjunto fijo de comandos que suministra Siemens para acceder a la
informacin de la CPU.
3. Configurar TIA portal para leer y procesar las paginas HTML.
4. Generar bloques desde la paginas HTML.
5. Programar TIA portal para controlar el uso de las paginas HTML.
6. Compilar y cargar los bloques en la CPU.
7. Acceder a las pginas web definidas por el usuario desde el PC.





Acceder a las pginas web definidas por el usuario
A la pgina web definidas por el usuario se accede desde la pgina web estndar. Las
pginas web estndar visualizan un enlace para "Paginas de usuario" en el men ubicado
en la parte izquierda, donde aparecen los enlaces para las dems pginas. Cuando se hace
clic en el enlace "Paginas de usuario", el navegador web va al vnculo que permite acceder
a la pgina predeterminada la cual configuramos.
En la parte interior del rea de contenidos definidos por el usuario, la navegacin depende
de cmo ha sido diseada la pgina especfica.



Pgina principal donde se puede acceder al men principal la cual est vinculada por
varias secciones como lo son Entradas, Salidas, Automtico, Autores, Informacin.























ndice:
Unidad ? Diseo de una pgina web para PLC SIEMENS S7-1200
DISEO DE UAN PAGINA WEB EN DreamWeaver 8
Configuracin de una pgina web
Tablas
Agregar tablas dentro de una celda
Barra de banner
Insertar imgenes
Agregar vnculos
Preparar la web para el PLC
Crear una pgina para visualizar entradas y salidas
Crear una pgina para enviar datos al PLC
Preparar el PLC para la web
Preparar el PLC para agregar la pagina
Agregar la pgina web al PLC
Agregar el bloque webdata
Insertar el servidor de usuario en el programa
Como agregar salidas al programa (sensores)
Como agregar entradas el programa (Actuadores)
Acceso e informacin del PLC a travs de servidor web
Accesar a la pgina en el PLC
Arranque y paro del PLC s7-1200 a travs de servidor web
Informacin del modulo
Estado de las variables
Pgina web definida por el usuario