Dispositivo remoto

Cuando se escriben valores en un dispositivo remoto hay que introducir primero su dirección
IP o seleccionar el dispositivo existente.

--------------------------------------------------------------------------------------
LOGO WEB EDITOR
Es una aplicación desarrollada por Siemens y está disponible de forma gratuita.
La misma, permite crear una página web con una interfaz más atractiva y personalizada.
Se pueden incluir imágenes estáticas, gif animados, botones, barras de deslizamiento para incorporar valores
analógicos, indicadores lineales de valores analógicos, cuadros indicadores de valores y mucho más!!!
Compatibilidad
¡LOGO! Web Editor está disponible para:
● LOGO! Módulo base: LOGO! 8 6ED1052-xxx08-0BA0.
● Java Runtime Environment 1.8.0_121, que es la versión recomendada;
● los siguientes tipos de navegadores web que admiten HTML5:
- Microsoft Internet Explorer con versión mínima 10.0

13
- Mozilla Firefox con versión mínima 11.0
- Google Chrome con versión mínima 16.0
- Apple Safari con versión mínima 5.0
● las siguientes versiones del sistema operativo:
- Windows 32 y 64 bits, incluidos Windows 7 y Windows 10;
- Mac OS, incluidos 10.9, 10.10 y 10.11;
- Linux Suse, 11.3 sp3, kernel 3.0.76

Imagen de la pantalla principal de LWE

Menú de opciones

Estructura de la página
Propiedades

Herramientas u objetos disponibles Area de diseño de los objetos

Como podrán apreciar, el programa está realizado en inglés!!!. Veremos qué significa cada función-

Barra de menús
La parte superior del LOGO! La ventana del editor web contiene la barra de menú. Aquí, puede encontrar
varios comandos para editar y administrar sus proyectos, así como funciones para definir su configuración
predeterminada y para transferir el proyecto hacia y desde LOGO !.

14
Barra de herramientas estandar
La barra de herramientas estándar aparece sobre el árbol del proyecto y la interfaz del panel Editor.
Inicialmente, LOGO! Web Editor le muestra una barra de herramientas estándar reducida que proporciona
solo las funciones esenciales.
La barra de herramientas estándar proporciona acceso directo a las funciones esenciales de LOGO! Editor
web.
Después de abrir un proyecto para editarlo, puede ver la barra de herramientas estándar completa.

Puede usar estos íconos para crear un nuevo proyecto o descargar, guardar un proyecto existente, deshacer
/ rehacer la última acción o iniciar los datos transferidos hacia y desde LOGO! dispositivos.

Nuevo proyecto
Proyecto abierto
Cerrar proyecto
Salvar
Salvar a todos
Girar a la izquierda
Girar a la derecha
Rehacer
Deshacer
Descargar
Subir
Implementar en tarjeta SD

Árbol del Proyecto

Esta sección contiene información sobre los siguientes temas:

· Resumen del árbol del proyecto

· Páginas
· Etiquetas globales
· Navegador

15
Resumen del árbol del proyecto
En el panel del árbol de proyectos, puede configurar y administrar sus proyectos. Cuando crea un nuevo
proyecto desde la barra de menú de Archivo -> Nuevo proyecto, LOGO! Web Editor crea un nuevo proyecto
con páginas, etiquetas globales y un navegador automáticamente.

· Páginas
· Etiquetas globales
· Navegador

Páginas
Pages es un contenedor de tus páginas. Puede definir las páginas web aquí. Después de terminar de editar
las páginas, puede guardarlas como archivos HTML y verlas en el navegador web.
Las páginas contienen una página de inicio predeterminada y otras páginas.
Página de inicio
Esta es la página de inicio de su proyecto, y la página de inicio no se puede eliminar. Puede abrirlo haciendo
doble clic en el icono de la página de inicio o haciendo clic con el botón derecho en el icono de la página de
inicio y seleccione el botón Abrir.
Otras paginas
Estas son las otras páginas definidas por el usuario para su proyecto. Puede abrirlo haciendo doble clic en el
icono de la página o haciendo clic con el botón derecho en el icono de la página y seleccione el botón Abrir.

Edite la página definida por el usuario

Cuando crea un nuevo proyecto, el nuevo proyecto contiene tres partes: Páginas, Etiquetas globales y
Navegador. La página de inicio aparece debajo de las páginas en el árbol del proyecto automáticamente.
Para crear una nueva página, haga clic con el botón derecho en el icono de Páginas y seleccione el botón
Nueva página, aparecerá una nueva página_1 debajo de la Página de inicio y la nueva página se abrirá
automáticamente en el panel Editor.
Para abrir, eliminar o cambiar el nombre de la nueva página, haga clic con el botón derecho en el icono de la
página_1 y seleccione las opciones correspondientes según su necesidad, por ejemplo, seleccione la opción
Abrir, Eliminar o Cambiar nombre en el menú contextual.
Después de editar la página, haga clic en el icono en la barra de herramientas estándar o seleccione Archivo -
> Guardar en el menú Archivo para guardar el cambio.

16
Las propiedades de las páginas:
NOTA: PARA COLOCAR LOS OBJETOS EN LA PÁGINA DE TRABAJO, SE DEBEN PINCHAR Y ARRASTRAR A LA
UBICACIÓN DESEADA.
Básico
Nombre: Página
Resolución: puede modificar la información de ancho y alto desde el panel Tamaño. Dependiendo si se va a
acceder desde un teléfono o una PC.
Estilos
Imagen de fondo: seleccione las imágenes apropiadas para la página actual de la Biblioteca de gráficos
cuando lo necesite o déjelo vacío para ninguna.
Objetos aplicables a las páginas

Imágenes básicas

Control digital (Botón)

Controles y visores analógicos

Escala de tiempo y reloj

Nota
¡Graph Library es el LOGO! Editor gráfico web integrado en la biblioteca. Contiene tres partes: Build-In
Graph, Color y My Graph. Puede elegir cualquiera de los gráficos para la imagen seleccionando la imagen y
confirmar la selección haciendo clic en el botón Aceptar. Para obtener información detallada, consulte el
capítulo Biblioteca de gráficos.

Nombre de la página

Resolución (Define el tamaño apropiado dependiendo del dispositivo que se va a utilizar

para visualizar la página). Para PC: 1.440 x 900, para celular:370 x 600

Color o imagen del fondo de la página

17
Navigator (Navegador)
Navigator es una página flotante del sitio web y está destinada a ayudar a los usuarios a cambiar entre
diferentes páginas web o cerrar sesión durante la operación de tiempo de ejecución.
Edite el navegador
Cuando crea un nuevo proyecto, aparece un Navegador en el árbol del Proyecto.

Para abrir el navegador en el panel Editor:

Haga clic derecho en el icono del navegador y seleccione el botón Abrir; o haga doble clic en el icono del
navegador.
Nombre

Tamaño

Ubicación

Color del fondo

Color del texto

Para editar el navegador arrastrando el componente Elemento del navegador directamente debajo de la
barra de navegación, y haga lo siguiente en el panel de propiedades.
Modifique la fuente para el texto en el navegador seleccionando el valor y haciendo clic en el botón Aceptar
en Fuente.
Defina el nombre del elemento del navegador modificando el contenido en Texto.
Enlace a cada página seleccionando las páginas que ha creado en el menú desplegable.
Después de editar el Navegador, haga clic en el icono en la barra de herramientas estándar o seleccione
Archivo -> Guardar en el menú Archivo para guardar el cambio.

Las propiedades para el elemento del navegador:

Básico
Nombre: elemento del navegador
Estilos
Fuente: seleccione Fuente, Estilo de fuente y Tamaño según sus necesidades. Haga clic en el botón Aceptar
para guardar la corrección o haga clic en el botón Restablecer valores predeterminados para restablecer la
configuración predeterminada.
Valores
Texto: escriba el nombre del elemento del navegador para cada página.
Enlace: seleccione Página de inicio u otro nombre de página que haya creado en el menú desplegable.---------
-------------------------------------------------------------------------------------------------------------------------------------
18
Veamos las propiedades de los objetos que podemos utilizar en la página Web

Objetos Herramientas

Polilínea
Nos permite realizar cualquier formato de imagen con líneas rectas.
Propiedades

Grosor de la línes

Color de la línea

Transparencia

Rectángulo

Ubicación

Tamaño

Grosor del borde

Estilo del borde

Color del borde

Color del relleno

Transparencia (Altera la transparencia. Valor 0 no es transparente, 100 es totalmente transparente)

Rellenar con el color de relleno (cuando está tildado)

Círculo
Posee las mismas propiedades del rectángulo.

---------------------------------------------------------------------------------------------------------------------------------------------------------

19
 Objetos Básicos

Texto
Permite incorporar un texto en cualquier parte de la página.
Propiedades

Tipo de letra y tamaño

Color del texto

Color del fondo

Rellena el fondo con el color elegido si está tildado

Permite modificar el texto

Imagen
Permite agregar un cuadro con un color específico o una imagen.
Propiedades

Permite seleccionar un color o una imagen

Link o Enlace a una página Web

Permite crear un link a una página web.
Propiedades

Permite elegir el tipo y tamaño de la letra

Permite elegir el color del texto

Permite elegir un color de relleno

Muestra el color de relleno si está tildado

Texto para mostrar

Dirección de la página web

NOTA: PARA PROBAR EL DISEÑO DEBEMOS CARGARLO EN LA MEMORIA MICRO SD INSTALADA EN EL LOGO!

20
Veamos como verificar el avance del diseño:
Pasos previos:
Con el Logo! apagado, debemos colocar una memoria microSD en el Logo!

Insertar una memoria microSD (los contactos hacia arriba)

Si bien el programa de control se instala en la memoria interna del Logo!, la página web se guarda en la
memoria microSD instalada en el Logo!
Una vez finalizada la configuración, debemos cargar la página web en el Logo!,

Pasos para guardar la página web en la microSD

Hacer clic en el ícono o en
Aparece la siguiente ventana:

21
 Dirección IP del Logo (En este ejemplo es: 192.168.0.3)

Pulsar OK y dar OK a todas las preguntas.

Para acceder desde el teléfono, Tablet o una PC, es fundamental que se encuentren en la misma red.
En el navegador colocar la dirección IP del Logo! y pulsar Enter.
Aparecerá la siguiente pantalla:

Debe estar tildado para acceder a la página personalizada

Colocar la contraseña y hacer clic en Log on

22
 Digital
Permite agregar un objeto que puede interactuar con el Logo!, tanto como entrada como
salida.
Además, se le puede colocar una imagen, por ejemplo un botón, un motor, un ventilador y hasta un gif
animado. Es posible asignarle una imagen cuando el objeto está activado y otra cuando está desactivado.
Propiedades

Tipo de bloque o variable para activar o referenciar

Número de bloque o variable

Imagen para cuando el objeto este en On

Imagen para cuando el objeto este en Off

Texto para cuando el objeto este en On

Texto para cuando el objeto este en Off

Ejemplo de un botón con distinta imagen para On y para Off

Modo de funcionamiento
Block Type
Tiene las siguientes opciones:

Block Type Block Number Writable En español

I I1-I24 Read Only solo lectura
Q Q1-Q20 Read and Write lectura y escritura
M M1-M64 Read and Write lectura y escritura
VB: 0-850 Read and Write lectura y escritura
V
Bits: 0-7 Read and Write lectura y escritura
Cursor Key C1-C4 Read Only solo lectura
Function Key F1-F4 Read Only solo lectura

23
 S1.1-S1.8,S2.1-
S2.8,
Shift Register Read Only solo lectura
S3.1-S3.8,S4.1-
S4.8,

En la tabla se puede apreciar que con objeto DIGITAL, podemos leer algunos bloques, mientras que a otros
bloques los podemos leer (verificar su estado) y escribir (aplicar un cambio)
Los Bloques I, Cursor Key, Function Key y Shift Register solo pueden leer, es decir, solamente podemos
verificar su estado (0 o 1)
Los Bloques Q, M y V pueden ser leídos y escritos, es decir, que podemos verificar su estado y además
podemos enviarles un 1 o un 0.
Las propiedades On Image y Off Image permiten personalizar el objeto. Podemos asignarle un color o una
imagen cuando está en Off y otro color o imagen cuando está en On.
Vamos paso a paso. Al arrastrar el objeto a la página de diseño aparece de la siguiente manera:

Las propiedades de Animación aparecen así:

Para asignar la imágen debemos hacer clic en la línea de las propiedades donde dice Default y se abrirá la
siguiente ventana:

24
 Si

desplazamos la línea vertical aparecerán más opciones:

Con todas estas opciones tenemos la posibilidad de asignar al objeto además de colores, imágenes y gif
animados que están en la carpeta Animation.
Pero no estamos limitados a los colores e imágenes que nos brinda el programa. Al final del listado aparece
la siguiente carpeta:

Al seleccionarla aparecen las imágenes personalizadas o que hayamos creado nosotros.

25
Podemos agregar más imágenes personalizadas haciendo clic en se abrirá el explorador de
archivos para buscar y seleccionar las imágenes.
NOTA: Para agregar imágenes a la carpeta es necesario ejecutar el programa como Administrador!!!

Ejemplo 1
Vamos a activar la salida Q1 en forma directa

Para hacerlo vamos a crear un comando Digital con las siguientes propiedades:

Para enviar el comando debe estar tildado

Nota: El comando Digital funciona como un interruptor !!!, no como pulsador cuando comanda una marca
o una salida Q. Para poder controlar una salida Q, la entrada de la misma no debe estar conectada a
ningún bloque. La salida si debe estar conectada a una marca, conector abierto o salida de red.
Cuando llega al Logo el comando por medio de una entrada de red digital (VB) funciona como pulsador.
Si deseamos ver si la salida Q1 se activó, podemos colocar otro comando Digital como lector:

26
Con las siguientes propiedades:

Para recibir el estado debe estar destildado

Se abrirá una página web con el diseño que hemos creado

Ahora podemos hacer clic en el botón “Q1 DIRECTO OFF” para ver el resultado del comando.
Al hacer clic en el botón “Q1 DIRECTO OFF”, el mismo cambia de color y el texto cambia a “Q1 DIRECTO
ON”, y “Q1 OFF” cambia de color y su texto cambia a “Q1 ON”

----------------------------------------------------------------------------------------------------------------------------------------------
Ahora veamos como activar una salida Q con una Marca:
Ejemplo 2
Vamos a activar la salida Q1 a través de una Marca

Para hacerlo vamos a crear un comando Digital con las siguientes propiedades:

27
 Seleccionamos la Marca M1

Para enviar el comando debe estar tildado

Si deseamos ver si la salida Q1 se activó, podemos colocar otro comando Digital como lector:

Con las siguientes propiedades:

Para recibir el estado debe estar destildado

El resultado del comando es idéntico al del Ejemplo 1

-----------------------------------------------------------------------------------------------------------------------------------------------

28
Ahora veamos como activar una salida Q con una Variable:
Ejemplo 3

Vamos a activar la salida Q1 a través de una Variable

Para hacerlo vamos a crear un comando Digital con las siguientes propiedades:

Seleccionamos Variable

En este ejemplo seleccionamos la variable V0.0 (Variable 0 bit 0)

Para enviar el comando debe estar tildado

Nota: El comando Digital funciona como un interruptor !!!, no como pulsador.

Si deseamos ver si la salida Q1 se activó, podemos colocar otro comando Digital como lector:

Con las siguientes propiedades:

29
 Para recibir el estado debe estar destildado

El resultado del comando es idéntico al del Ejemplo 1 y 2

ANALOG (Analógicos)
Valor Analógico
Utilice el componente Valor analógico cuando desee mostrar o escribir un valor analógico.
Las propiedades para el valor analógico:
Tipo de bloque: seleccione AI, AQ, AM, VB, VD o VW para el tipo de
variable.
Número de bloque: siga la tabla a continuación para seleccionar
cada valor.
Formato de bloque: seleccione Hex, Binario, Con signo o Sin signo
para el formato de visualización.
Unidad: seleccione las unidades apropiadas.
Escribible: haga clic en la casilla de verificación dependiendo de si
tiene la función de escritura; para obtener información detallada,
consulte la siguiente tabla.
Block
Block Number Writable
Type
AI AI1 -AI16 Read Only

30