Diseñador Mimic - SCADA, IoT, and Smart City Solutionsscada.com/Content/UserGuides/StatusEnterprise_ES/Status Enterprise... · Extensibilidad ilimitada con .NET “code Behind”

Guía de Usuario Parte 3

Diseñador “Mimic”

Status Enterprise Diseñador de “Mimics”

1

Contenidos 1 RESUMEN

1.1 Diseñadores HMI .................................................................................................................. 5 1.1.1 Diseñador “Mimic” .............................................................................................................. 5 1.1.2 Diseñador de Aplicaciones ................................................................................................ 5 1.2 General ................................................................................................................................. 5 1.3 Implementación ..................................................................................................................... 5

2 CREACIÓN DE “MIMICS” ............................................................................................................. 7

2.1 Como Comenzar ................................................................................................................... 7 2.2 Creando un “Mimic” .............................................................................................................. 7 2.3 Componentes del Diseñador de “Mimics” ............................................................................ 9 2.3.1 Árbol de Documentos ........................................................................................................ 9 2.3.2 Toolbox Panel .................................................................................................................. 10 2.3.3 Panel de Propiedades ..................................................................................................... 11 2.3.4 Panel de Recursos .......................................................................................................... 12 2.3.5 Ventana de Previsualización ........................................................................................... 12 2.3.6 Registro de Actividad ....................................................................................................... 13 2.4 Iconos de la Barra de Herramientas ................................................................................... 14 2.4.1 Iconos de Administración de Archivo .............................................................................. 14 2.4.2 Iconos de Control en cache y Visualización .................................................................... 15 2.4.3 Iconos de Edición ............................................................................................................ 15 2.4.4 Iconos de Test de Ejecución, Visualizar paneles y Visualizar código. ............................ 16 2.4.5 Iconos de Unir Formas .................................................................................................... 17 2.4.6 Iconos de Disposición ...................................................................................................... 17 2.4.7 Iconos de Manipulación de Controles ............................................................................. 18 2.4.8 Iconos de mostrar Cuadricula y de Ajustar Cuadrícula ................................................... 19 2.4.9 Seleccionar Todo, Visibilidad y Búsqueda ...................................................................... 19 2.5 Añadiendo controles a la Superficie de Diseño .................................................................. 20 2.5.1 Añadiendo un nuevo control como “hijo” de Otro ............................................................ 20 2.5.2 Añadir un Control de Indicador a un Documento XAML ................................................. 21 2.5.3 Añadiendo una Forma a un Documento XAML ............................................................... 22 2.5.4 Añadiendo Formas por “Clic & Drag” .............................................................................. 22 2.5.5 Añadir una forma Polilínea con un Clic ........................................................................... 22 2.5.6 Añadiendo Formas usando el lápiz de Polilíneas y Poligonos. ....................................... 22 2.5.7 Uniendo Formas .............................................................................................................. 22 2.6 Formularios y Documentos ................................................................................................. 24 2.6.1 Creando Formularios ....................................................................................................... 24 2.6.2 Viendo Documentos ........................................................................................................ 26 2.6.3 Visor de Documentos ...................................................................................................... 26 2.6.4 Enlace a Documento ....................................................................................................... 27 2.6.5 Arbol de Documentos ...................................................................................................... 27 2.7 Guardando un “Mimic” ........................................................................................................ 28 2.8 Atajos .................................................................................................................................. 29 2.8.1 Keyboard Short Cuts ....................................................................................................... 29 2.8.2 Otros Comandos .............................................................................................................. 29 2.8.3 Adornos de Objetos ......................................................................................................... 30 2.8.4 Cursores del Ratón .......................................................................................................... 30

3 ENLACE DE DATOS. .................................................................................................................. 31

3.1 Configurando un Enlace de Datos ...................................................................................... 31 3.2 Testeando el Enlace de Datos ............................................................................................ 34

4 CONTROLES DE “TOOLBOX” ..................................................................................................... 35

4.1 Resumen de Control ........................................................................................................... 35 4.2 Controles Compatibles con Web ........................................................................................ 37


2

5 “MIMIC RUNTIME” .................................................................................................................... 38

5.1 Iniciando el Entorno de Ejecución de Status “Mimic” ......................................................... 38 5.2 Embebiendo el “Mimic Runtime” dentro de tu Propia Aplicación Windows........................ 39

6 MISCELANEA ............................................................................................................................ 41

6.1 _Extendiendo y Personalizando en Diseñador de “Mimic” ................................................. 41 6.2 Creando Controles Personalizados para “Mimics” ............................................................. 41

APÉNDICE 1 – CÓDIGO EJEMPLO EMBEBER EL “MIMIC RUNTIME” ...................................................... 43


3

Imágenes y Tablas

Imagen 1 – “Mimics” ...................................................................................................................................... 6

Imagen 2 – Pantalla de Inicio de Sesión ....................................................................................................... 7

Imagen 3 – Nuevo Archivo ............................................................................................................................ 8

Imagen 4 – Cuadro de Diálogo Nuevo Mimic ............................................................................................... 8

Imagen 5 – Árbol del Documento ................................................................................................................. 9

Imagen 6 – Panel “Toolbox” ........................................................................................................................ 10

Imagen 7 – Panel de Propiedades .............................................................................................................. 11

Imagen 8 – Iconos de ordenado de Propiedades ....................................................................................... 11

Imagen 9 – Panel de Recursos ................................................................................................................... 12

Imagen 10 – Ventana de Previsualización .................................................................................................. 13

Imagen 11 – Registro de Actividad ............................................................................................................. 13

Imagen 12 – Barra de Herramientas ........................................................................................................... 14

Imagen 13 – Iconos de Administración de Archivo ..................................................................................... 14

Imagen 14- Iconos de Adminitración de Archivo ........................................................................................ 15

Imagen 15 - Iconos de Control en cache y Visualización ........................................................................... 15

Imagen 16 – Iconos de Edición ................................................................................................................... 15

Imagen 17 - Iconos de Test de Ejecución, Visualizar paneles y Visualizar código. ................................... 16

Imagen 18 – Visualizar Paneles ................................................................................................................. 16

Imagen 19 – Ver código .............................................................................................................................. 17

Imagen 20 – Iconos de Disposición ............................................................................................................ 17

Imagen 21 – Descripcion de iconos de Disposición ................................................................................... 18

Imagen 22 - Iconos de Manipulación de Controles .................................................................................... 18

Imagen 23 – Descripciones de los Iconos de Manipulación de Controles ................................................. 19

Imagen 24 - Iconos de mostrar Cuadricula y de Ajustar Cuadrícula .......................................................... 19

Imagen 25 – Seleccionar Todo, Visibilidad y Búsqueda ............................................................................. 19

Imagen 26 – Cuadro de Diálogo Añadir “Hijo” ............................................................................................ 20

Imagen 27 – Pegado Especial .................................................................................................................... 21

Imagen 28 – Panel “Toolbox”- Indicadores ................................................................................................. 21

Imagen 29 – Barra de Herramientas – Herramientas de Unir Formas. ...................................................... 22

Imagen 30 - Unir ......................................................................................................................................... 23

Imagen 31 - Sustracción ............................................................................................................................. 23

Imagen 32 - Intersección ............................................................................................................................. 24

Imagen 33 – Ejemplo de Formulario de Solicitud de Cambios ................................................................... 25

Imagen 34 – ormularios en el Árbol de Activos del Modelo de Datos. ....................................................... 26

Imagen 35 – Árbol de Documentos ............................................................................................................ 27

Imagen 36 – Opcion Guardar en Menú e Icono.......................................................................................... 28

Imagen 37 – Cuadro de Diálogo “Guardar Mimic” ...................................................................................... 28


4

Imagen 38 – Adornos de Objetos ............................................................................................................... 30

Imagen 39 – Vista de Árbol de Sistema ...................................................................................................... 31

Imagen 40 – Árbol de Tipos Relativos ........................................................................................................ 32

Imagen 41 – Panel de Propiedades ............................................................................................................ 32

Imagen 42 – Configurando el enlace a Datos............................................................................................. 33

Imagen 43 – Icono de Testear Ejecución. .................................................................................................. 34

Imagen 44 – Silos de Fluido 3D .................................................................................................................. 35

Imagen 45 – Inicio de Sesión en el Servidor Status ................................................................................... 38

Imagen 46 – Cuadro de Diálogo Abrir “Mimic”............................................................................................ 39

Imagen 47 – Añadir Control WPF ............................................................................................................... 41

Imagen 48 – Gráfico de Barras ................................................................................................................... 41


5

1 Resumen Los “Mimics” pueden también ser llamados cuadros de mandos o pantallas HMI. Status Enterprise tiene dos entornos de diseño para crear pantallas HMI.

1.1 Diseñadores HMI

1.1.1 Diseñador “Mimic”

Diseña de una vez para el cliente Windows o el navegador HTML5 Las pantallas son guardadas en el Modelo de Datos en Status Server No requerido despliegue Capacidades de “code behind” limitadas Pantallas visibles por del Navegador del Modelo (Model Browser) Pantallas enbebidas en aplicaciones de terceros Soporta controles personalizados WPF

1.1.2 Diseñador de Aplicaciones

Alto Rendimiento Extensibilidad ilimitada con .NET “code Behind” en C# o VB con Intelisense Pantallas compiladas en un ensamblado .NET y vistas por un Cliente Windows Programación de pantalla automatizada para señalización digital y otras aplicaciones Soporta controles WPF personalizados

Este documento define las lineas de diseño y creación de interfaces gráficas usando el Diseñador

“Mimic”. El Diseñador de Aplicaciones será tratado en la Parte 4 – Diseñador de Aplicaciones.

1.2 General El diseñador “Mimic” es usado para crear pantallas (Mimics) con gráficos y controles de interfaz de usuario, y une esos gráficos y controles a datos en el modelo de objetos con los enlaces a datos. Como los datos se actualizan en el modelo de datos de forma manual o desde un servidor remoto, el Status Server envía notificaciones con el cambio de valores. Los clientes cargan las pantallas, escuchan por el cambio de propiedades, y actualizan los controles de la interfaz de usuario como están configurados. Los “Mimics” pueden ser vistos por un cliente Windows o un dispositivo habilitado con HTML 5. Los “Mimics” son frecuentemente utilizados como HMI para visualizar datos gráficos, pero son también utilizados para otro tipo de tareas necesarias como crear formularios y ver documentos.

1.3 Implementación Los “Mimics” son almacenados en el Modelo de Datos del Status Server y recuperados por el Cliente


6

Status o con el “Status Model Browser”. Usando la Pasarela Status Enterprise, las pantallas pueden ser vistas por un navegador web o un dispositivo móvil.

Imagen 1 – “Mimics”

Los “Mimics” son almacenados como XAML (Extensible Application Markup Language), un formato XML desarrollado por Microsoft.


7

2 Creación de “Mimics”

2.1 Como Comenzar Cuando el Diseñador de “Mimics” es abierto por primera vez, se abrirá el cuadro de diálogo de inicio de sesión de Status Server. Tu puedes iniciar sesión usando los ajustes por defecto o configurar los tuyos propios. Para más información puedes ver la Guía de Usuario Status Enterprise Parte 1 – Resumen y Conceptos Básicos.

Imagen 2 – Pantalla de Inicio de Sesión

2.2 Creando un “Mimic”

Para crear un “mimic” selecciona el icono de “nuevo archivo”, el cuadro de diálogo de “nuevo Mimic” aparecerá.


8

Imagen 3 – Nuevo Archivo

Introduce el nombre del documento que deseas crear.

Imagen 4 – Cuadro de Diálogo Nuevo Mimic

El Diseñador de “Mimics” es capaz de crear dos tipos de “mimics”: una plantilla de “Mimic” para un determinado tipo de “Asset” o un “Mimic” regular.

Una plantilla de “Mimic” es un gráfico que puede ser usado sobre diferentes instancias de un “type”

(“Assets”). Por ejemplo, si quieres hacer un “Mimic” para ver datos de una turbina de viento, y tu modelo

de datos tiene muchas turbinas similares en él, podrías querer crear una plantilla para el “type” ‘Turbina

de viento’. Este “mimic” único podría ser usado para todas tus “turbinas de viento”

Un “Mimic” regular es usualmente usado para menús principales, o si tienes un “asset” y solo habrá una instancia de este “Asset”. Este tipo de “mimic” enlaza directamente con un “Asset” específico, no puede ser usado por ningún otro. Los “Mimics” regulares son también el tipo de documento correcto para una página principal o una página destinada a la navegación. In el cuadro de diálogo de “Nuevo Mimic” introduce el nombre del “mimic” y selecciona su tipo, regular o plantilla. Si estás creando una plantilla, necesitarás asociar un tipo de “Asset” a esa plantilla. También se te dará la opción de elegir un “Canvas” o un “Grid” como capa raíz. En un “Canvas” los objetos son posicionados explicitamente empezando desde la esquina superior izquierda del “Canvas”


9

de acuerdo a unas coordenadas exactas x,y. Los objetos son redimensionados uniformemente en el “Mimic” si éste es redimensionado. Un “Grid” consiste en filas y columnas adaptables y tiene capacidades de redimensionamiento del propio “Grid” y también de los objetos. Precisa espacio para las columnas y las filas y puede ser fijado con la propiedad “Margin”. “Los Grids” son mas complicados de utilizar, pero proveen de algunas capacidades de disposición que no posee el “Canvas”. Para más información acerca de “Grids” y “Canvas”, consulta la parte 5 de esta Guía de usuario o la documentación de Microsoft .NET WPF. Una vez seleccionado <OK>, tendrás una superficie de diseño limpia para crear tu “Mimic” Cuando un documento es guardado, se salva dentro de una carpeta del Status Server.

2.3 Componentes del Diseñador de “Mimics”

2.3.1 Árbol de Documentos

El Panel de Árbol de Documento mantiene la estructura del documento (también referido como Árbol Lógico) esto corresponde al documento que estás editando actualmente. El Árbol del Documento es una jerárquica representación visual de todos los elementos del espacio de trabajo. El panel de Árbol de Documento permanece en blanco hasta que tu abres un documento.

Imagen 5 – Árbol del Documento

El propósito del Árbol del Documento es: Proveerte con una referencia visual de la estructura de Documento. Indica como el objeto se relaciona con otros objetos. Te habilita a elegir capas u objetos dentro del documento, para añadir, editar o borrar estas capas u objetos. Te permite añadir y mover objetos entre capas mediante “drag & drop” El Árbol del Documento muestra los iconos de cada objeto en tu documento, así como tres simbolos diferentes que te ayuda a realizar un seguimiento de donde estás (por ejemplo, cuando un objeto esta seleccionado para su edición) en tu “Mimic”. Elipse Azul con un Árbol Invertido: la elipse azul, se muestra a la izquierda del icono, indicando que capa está seleccionada para editar. Se dará cuenta de que el símbolo se mueve a través de la estructura del documento mientras se mueve dentro y fuera de diferentes capas, pero no siempre se mostrará a la izquierda de cada icono. Los items del Árbol indican exactamente que objetos son los actualmente seleccionados en el diseñador. El diseñador de “Mimics” trabaja en capas. El diseñadir de “Mimics” mantiene una capa activa todo el tiempo. Puedes seleccionar editar, borrar, añadir, y reponer objetos en la capa activa. Puedes cambiar capas de dos maneras. Puedes hacer doble clic en el un item del árbol (un canvas) para hacerlo la capa


10

activa, o puedes hacer clic con el botón derecho en un objeto en la superficie de edición y seleccionar <Editar capa> para hacerla la capa activa. Como regla general las capas siguientes pueden considerarse editables en Status Enterprise: Cualquier Canvas, Panel, Borde o “Path” o contenedor similar. Capas especiales como “InkCanvas” o “ViewPort3D” La “list box” y el “Stack Panel” son capas editables. Las siguientes se consideran capas no editables: Excluyendo “Path”, cualquier clase derivada de Shape no pueden ser una capa editable (Rectángulo, Elipse, Polilínea, etc.) Cualquier clase que no tenga controles “hijo”, como un control de Imagen. Cualquier objeto cuya visibilidad este oculta o colapsada. Puedes ocultar capas de la superficie de diseño alternando la visibilidad del objeto en el Árbol del Documento. Esto simplemente modifica la visibilidad de un objeto mientras lo estás editando. Asegurate de hacer el objeto visible de nuevo antes de publicar tu proyecto. Dentro del Árbol del Documento tu puedes hacer “Drag & Drop” de un control en otro. Esto permite hacer asignaciones con capas cruzadas de los controles para los nuevos controles “padre”. También permite que algunas propiedades como la información de herramientas y encabezados tengan contenido. Los controles pueden ser arrastrados desde la “Toolbox” y soltados en nuevos objetos “padre” en el Árbol del Documento. Las pantallas que tienen un montón de objetos en ellas pueden hacer dificil la localización de un control particular. La barra de búsqueda en la barra de herramientas te permite buscar el objeto que deseas y después seleccionarlo si está en la capa activa.

2.3.2 Toolbox Panel

Imagen 6 – Panel “Toolbox”


11

El panel “Toolbox” contiene los controles disponibles para usar en el diseñador de “Mimics”

2.3.3 Panel de Propiedades El panel de propiedades almacena las propiedades correspondientes, o características, de cada objeto que está seleccionado actualmente en el documento actual.

Imagen 7 – Panel de Propiedades

Por defecto, a todos los elementos se les da un nombre de <elemento><número> el cual es relevante a qué tipo de elemento es ( p.e. Botón, Grid, etc...) así como a cuantos de estos elementos en la superficie de diseño. Un grupo de iconos cerca de la parte de arriba del panel te permite ordenar las propiedades expuestas en cualquier objeto de varias maneras para adaptarlas a tus preferencias.

Imagen 8 – Iconos de ordenado de Propiedades

Las opciones disponibles de ordenación incluyen: Alfabético – ordena todas las propiedades desde la A a la Z basandose en su nombre. En uso – enseña cuales propiedades están en uso actualmente para el elemento seleccionado (no para los valores por defecto) Categoría – organiza todas las propiedades dentro de grupos basados en que hace la propiedad al elemento (p.e. Apariencia, disposición, etc..) Tipo – organiza todas las propiedades en grupos basandose en que tipo de valor se espera de esa propiedad (p.e. Doble, espesor, etc...) Clase – organiza todas las propiedades in grupos basados en lo que se derivan e .NET (p.e. “FrameworkElement”, “UIElement”, etc...)


12

2.3.4 Panel de Recursos El panel de Recursos es una colección de objetos que pueden ser soltados dentro de la superficie de diseño. EL diseñador de “Mimics” viene con muchas piezas prefabricadas de imágenes prediseñadas. Estas pueden ser arrastradas desde el panel de Recursos y soltadas en la superficie de diseño.

Imagen 9 – Panel de Recursos

Puedes exportar tu propia imagen prediseñada desde la superficie de diseño en el panel Recursos. La localización de la carpeta para este panel puede variar dependiendo de su sistema operativo. Los usuarios de Windows XP la encontrarán en C:\Documents and Settings\All Users\Application Data\StatusEnterprise\Resources Los usuarios de Windows 7 y 8 la encontrarán en C:\ProgramData\B-Scada\StatusEnterprise\MimicDesigner\Resources

2.3.5 Ventana de Previsualización

El panel de Previsualización aloja la ventana de previsualización para tu documento. Esta ventana es una instantanea del documento general y es una catacterística útil para documentos extremadamente largos y detallados que exceden las dimensiones del espacio de trabajo del diseñador.


13

Imagen 10 – Ventana de Previsualización

Si tu documento no excede el área del espacio de trabajo (p.e. no requiere barras de desplazamiento horizontales ni verticales para verlo a tamaño completo), entonces una previsualización de todo tu documento se mostrará dentro de el cuadro de previsualización azul. Si, por el contrario excede ese el área de trabajo (bien sea por que el documento es muy grande o porque se está viendo a un mayor tamaño de el 100%) un cuadrado rojo aparecerá dentro de la ventana de previsualización. Los elementos dentro del cuadrado rojo corresponden a los que verás dentro de tu area de trabajo. Como se ha mencionado arriba, esta característica ayuda a tener una perspectiva de “imagen grande” cuando solo ciertos elementos del diseño caben dentro del espacio de trabajo disponible. Si has hecho un “zoom” en tu documento, puedes ir al panel de previsualización y arrastrar el rectangulo rojo para desplazar automaticamente la vista de tu documento.

2.3.6 Registro de Actividad El Registro de Actividad muestra un registro contínuo de los mensajes de comunicación con el servidor Status. Si el diseñador está teniendo problemas en coger datos de buena calidad o no se puede conectar al servidor, esto se mostrará en la información del panel del Registro de Actividad.

Imagen 11 – Registro de Actividad


14

2.4 Iconos de la Barra de Herramientas La barra de herramientas del diseñador de “Mimics” provee de varios iconos para efectuar tareas comunes rápida y fácilmente. Algunos iconos son para la administración de archivos, mientras que otros son para manipular gráficos. Algunos iconos son contextuales y podrían inhabilitarse ciertas ocasiones. Si un icono no está inhabilitado, posando tu raton encima deberá revelar un consejo para indicar el propósito del icono.

Imagen 12 – Barra de Herramientas

2.4.1 Iconos de Administración de Archivo

Imagen 13 – Iconos de Administración de Archivo

Los iconos Agrupados en la parte más a la izquierda de la barra de herramientas son usados prar proveer varias funciones de administración de Archivo:

Nuevo Archivo – Haz clic en este icono para crear un nuevo “Mimic” o una nueva plantilla.

Abrir Archivo – Haz clic en este icono para abrir un “Mimic” salvado con anterioridad

Guardar – Haz clic en este icono para guardar el “Mimic” que estas trabajando en la superficie de diseño.

Guardar Como – Haz clic en este icono para guardar el “Mimic” que estas trabajando en la superficie de diseño en otra localización o con otro nombre.

Exportar XAML – Haz clic en este icono para exportar el “raw XAML” que describe tu “Mimic”

Exportar “Raster” – Haz clic en este icono para exportar tu “Mimic” como una imagen

Cerrar – Haz clic en este icono para cerrar tu “Mimic”


15

Imagen 14- Iconos de Adminitración de Archivo

2.4.2 Iconos de Control en cache y Visualización

Imagen 15 - Iconos de Control en cache y Visualización

El siguiente grupo de iconos inmediatamente a la derecha de los de administración de archivos proveen dos funciones distintas. El primero es un icono con la descripción textual del control que está en cache y preparado para añadir a la superficie de diseño (Elipse en este caso). Esto cambiará cada vez que un nuevo control sea seleccionado en la “Toolbox”. Inmediatamente a la derecha del icono de “control en caché” hay 3 herramientas para hacer zoom o alejar la superficie de diseño. Puedes seleccionar un nivel de zoom desde el menú desplegable o usar las herramientas +/- para pasar a través de los distintos niveles de zoom.

2.4.3 Iconos de Edición

Imagen 16 – Iconos de Edición

Continuando a la derecha a lo largo de la barra de herramientas, el siguiente grupo de iconos provee de algunas opciones básicas de edición de tu “Mimic”:

Cortar – Haz clic en este icono para eliminar una zona seleccionada de la superficie de diseño y ponerla en el portapapeles para pegarla en cualquier sitio.

Copiar – Haz clic en este icono para copiar una zona seleccionada de la superficie de diseño y ponerla en el portapapeles para pegarla en cualquier sitio

Pegar – Haz clic en este icono para pegar el contenido de tu portapapeles en la superficie de diseño

Borrar – Haz clic en este icono para borrar un control.


16

Deshacer – Haz clic en este icono para deshacer la acción más reciente.

Rehacer – Haz clic en este icono para rehacer la acción más reciente que fué deshecha.

Imagen 17 – Descripción de iconos de Edición.

2.4.4 Iconos de Test de Ejecución, Visualizar paneles y Visualizar código.

Imagen 17 - Iconos de Test de Ejecución, Visualizar paneles y Visualizar código.

Inmediatamente a la derecha de los iconos de Edición, el siguiente grupo contiene los Iconos de Test de

Ejecución, Visualizar paneles y Visualizar código. El test de ejecución se utiliza para abrir el “Mimic”

actual en el Entorno de Ejecución y te permite verlo con datos en vivo, navegar por él y funcionalidades

completas.

Haciendo clic en el icono de Visualizar Paneles revelará un menú desplegable que te permitirá alternar la

visibilidad de los distintos paneles dentro de la interfaz del diseñador de “Mimics”

Imagen 18 – Visualizar Paneles

Haciendo clic en el icono ver código abriras una nueva ventana que contiene el código fuente XAML para

el “Mimic” actualmente abierto.


17

Imagen 19 – Ver código

2.4.5 Iconos de Unir Formas

Imagen 21 – Grupo de Iconos de Unir Formas

La unión de formas te permite dibujar dos formas distintas en la superficie de diseño, una elipse y un rectangulo por ejemplo, y después que estas dos formas se “unan” en una sola combinando las formas, o cortando una forma desde la otra. Hablaremos más de la unión de formas más adelante.

2.4.6 Iconos de Disposición

Imagen 20 – Iconos de Disposición

E siguiente grupo de iconos a la derecha de los de unión de formas incluyen opciones para cambiar la disposición de los controles en la superficie de diseño:


18

Mandar Atrás – Haz clic en este icono para mover el control

seleccionado y que aparezca detrás de todos los demás en esta capa.

Mover Atrás – Haz clic en este icono para mover el control seleccionado

y que aparezca un paso atrás en esta capa.

Mover Adelante – Haz clic en este icono para mover el control

seleccionado y que aparezca un paso adelante en esta capa

Traer al Frente – Haz clic en este icono para mover el control

seleccionado y que aparezca adelante de todos los demás en esta capa.

Alinear – Haz clic en este icono cuando múltiples controles están

seleccionados para revelar una lista de las opciones de alineamiento y

espaciado.

Imagen 21 – Descripcion de iconos de Disposición

2.4.7 Iconos de Manipulación de Controles

Imagen 22 - Iconos de Manipulación de Controles

El siguiente grupo de iconos provee opciones para cambiar el tamaño, forma y rotación de los controles en la superficie de diseño:


19

Redimensionar – Haz clic en este icono para incrementar o decrecer

manualmente el tamaño de un control seleccionado.

Rotar – Haz clic en este icono para rotar manualmente el control.

Oblicuidad – HAz clic en este icono para cambiar la oblicuidad de los

controles seleccionados manualmente.

Rotar a la Izquierda – Haz clic en este icono para rotar un control

seleccionado 90 grados a la izquierda.

Rotar a la derecha – Haz clic en este icono para rotar un control

seleccionado 90 grados a la derecha.

Flip Horizontal – Haz clic en este icono para hacer un “flip” horizontal de

180º del control seleccionado.

Flip Vertical – Haz clic en este icono para hacer un “flip” vertical de 180º

del control seleccionado

Imagen 23 – Descripciones de los Iconos de Manipulación de Controles

2.4.8 Iconos de mostrar Cuadricula y de Ajustar Cuadrícula

Imagen 24 - Iconos de mostrar Cuadricula y de Ajustar Cuadrícula

Los siguientes dos iconos proveen opciones para usar la cuadrícula para mejorar tus capacidades de diseño con el “Mimic” haciendo clic en el icono Mostrar Cuadrícula veremos sobreimpresa una cuadrícula en la superficie de diseño que nos ayudará a colocar y dimensionar los controles. Esta cuadrícula tiene únicamente propósitos de diseño y no afecta al “Mimic” en ejecución. Haciendo clic en ajustar cuadrícula antes de poner un control en la superficie de diseño hará que se alinee el borde del control con la línea de la cuadrícula más cercana cuando se coloca.

2.4.9 Seleccionar Todo, Visibilidad y Búsqueda

Imagen 25 – Seleccionar Todo, Visibilidad y Búsqueda

El grupo final de iconos en la barra de herramientas incuye los iconos de Seleccionar Todo, Visibilidad y Búsqueda.


20

El icono de Seleccionar todo te permite seleccionar todos los controles de tu superficie de diseño simultáneamente. El de Visibilidad te permite alternar la visibilidad de los controles seleccionados. (Los controles que no sean visibles en la superficie de diseño tampoco serán visibles en el entorno de ejecución). La Búsqueda te permitira buscar un control por su nombre. Simplemente introduce el nombre del control y, si se encuentra, el control será seleccionado en la superficie de diseño y en tu ventana de previsualización.

2.5 Añadiendo controles a la Superficie de Diseño Hay varias maneras para que los controles sean añadidos a la superficie de diseño. La mayoría pueden ser añadidos simplemente arrastrando desde la “Toolbox” y soltando en la superficie de diseño, o seleccionando en control en la “Toolbox” y poniendolo fuera en la superficie de diseño. Alernativamente, los controles pueden ser arrastrados y soltados directamente en el çArbol del Documento dentro de la capa especificada- Los controles pueden ser también copiados, cortados y pegados en la superficie de diseño.

2.5.1 Añadiendo un nuevo control como “hijo” de Otro Muchas veces será útil añadir un control determinado como un “hijo” de otro control. Por ejemplo, tu podrías querer poner un Control de Alarma y una Tendencia en fichas separadas de la misma pestaña de Control para hacerlos accesibles más fácilmente. Esto puede conseguirse añadiendo el Control Alarma como “hijo” de un elemento pestaña y al control Tendencia “hijo” de otro elemento Pestaña. Hay un par de maneras en que esto se puede lograr. Tu puedes arrastrar y soltar un elemento dentro de otro elemento en el Árbol del Documento. Esto revelará un cuadro de diálogo proveyendo las opciones de como tu podrías querer añadir un control al otro.

Imagen 26 – Cuadro de Diálogo Añadir “Hijo”

Otra opción es Copiar/Cortar un control de la superficie de diseño, después hacer clic con el botón derecho en el objeto “padre” y seleccionar “pegado especial” desde el menú contextual.


21

Imagen 27 – Pegado Especial

Esto revelará el cuadro de dialogo “Añadir Hijo” para que elijas la manera específica en la que querrías añadir el control.

2.5.2 Añadir un Control de Indicador a un Documento XAML

Con un nuevo proyecto iniciado, posiciona el puntero del ratón en la pestaña “Toolbox” y haz clic.

Imagen 28 – Panel “Toolbox”- Indicadores

Con el puntero del ratón haz clic en Indicadores (Gauges). La barra de título del panel se expandirá y mostrará los diferentes tipos de Controles Indicadores. Haz clic en Indicador Dual (Dual Gauge) y verás que el fondo se selecciona indicando el control seleccionado. Mueve el cursor del ratón al centro del lienzo del proyecto(el cursor ahora debería ser una cuz), haz un “click&Drag” para mostrar el Indicador Dual con el tamaño deseado y suelta. El contol seleccionado del “Toolbox” aparecerá en tu lienzo del proyecto. La mayoría de los controles pueden ser arrastrados y soltados desde el “Toolbox”.


22

2.5.3 Añadiendo una Forma a un Documento XAML

Algunas Formas podrían ser añadidas al Documento XAML con la característica de “Arrastrar y Soltar” como una Elipse y un rectangulo. Otros lo haremos usando el clic del ratón. Selecciona la Forma de Elipse, haz clic en el lienzo del proyecto y arrastra el puntero a otra localización del lienzo y suelta. Adornos azules aparecerán en el principio y final de la forma.

2.5.4 Añadiendo Formas por “Clic & Drag”

Para añadir una forma línea, selecciona <Línea>. Mueve el ratón al lienzo del proyecto, haz clic y arrastra el ratón hacia otro sitio del lienzo. Con esta característica, el cursor del ratón cambiará a una cruz y cuando termines volvera a ser una mano. La línea que se crea tendrá que editar los adornos en los puntos de salida y llegada de la forma.

2.5.5 Añadir una forma Polilínea con un Clic

Añadir una forma Polilínea al lienzo (canvas) se consigue con un clic. Selecciona la forma Polilinea y mueve el cursor del ratón a algún sitio del lienzo. Haz clic izquierdo con el ratón y después mueve el ratón a otra localización y haz clic izquierdo. Una Poliínea aparecerá desde el punto de inicio A y estará conectada al punto B. El cursor estará todavía activo y se podrá hacer un nuevo punto. Esta funcionalidad será desactivada pulsando <Esc> o el botón derecho del ratón. Aparecerán adornos azules en los principales puntos de la forma. Presionando de nuevo la tecla Esc terminará la operación.

2.5.6 Añadiendo Formas usando el lápiz de Polilíneas y Poligonos.

Añadir Formas usando el Lápiz de Poligonos y Polilíneas se consigue con un clic. Con el lápiz de Polígonos la forma es continuamente creada y rellenada usando un clic y arrastrando, termina cuando el botón del ratón es soltado. La misma acción se aplica al lápiz de Polilíneas pero este lápiz solo dibuja líneas.

2.5.7 Uniendo Formas

Todas las formas que son encontradas en el “Toolbox” pueden ser unidas para formas Formas Complejas. Puedes unir formas de una de estas tres maneras. Union, Intersección y Sustracción. Tu puedes combinar solo formas si son más de una y no tienen rotación. Estas opciones pueden verse en el menú cuando 2 o más formas son seleccionadas.

Imagen 29 – Barra de Herramientas – Herramientas de Unir Formas.


23

2.5.7.1 Unir

Imagen 30 - Unir

Before: After:

Las 3 formas en la superficie de diseño son seleccionadas y después unidas para hacer una sola.

2.5.7.2 Sustracción

Imagen 31 - Sustracción

Before: After:

Las dos formas en la superficie de diseño han sido seleccionadas y después la opción de sustracción ha sido seleccionada. Nota que la sustracción solo funciona con 2 formas.


24

2.5.7.3 Intersección

Imagen 32 - Intersección

Before: After:

Las dos formas en la superficie de diseño son seleccionadas y despues seleccionamos la opción de intersección. Nota que esta función solo funciona con dos formas.

2.6 Formularios y Documentos El Diseñador de “Mimics” también provee la habilidad de crear Formularios y ver Documentos en el entorno de ejecución desde dentro de tu “Mimic”.

2.6.1 Creando Formularios Las plantillas de “Mimic” pueden ser creadas para varios tipos de formularios: Formularios de Peticiones de Cambio, Ordenes de Trabajo, Ordenes de Compra, etc... El diseño y la función de tu Formulario es determinada por tí en el momento de su creación.


25

Imagen 33 – Ejemplo de Formulario de Solicitud de Cambios

Los controles útiles para la creación de formularios incluyen Cajas de Texto, “Combo Box” y Bloques de Texto. Las cajas de texto y los “combo box” son configurados como enlace de dos sentidos por defecto, son capaces de escribir nuevos valores en la BBDD, así como de leer valores. En el entorno de ejecución, los formularios pueden ser recuperados, crear nuevos formularios, y los formularios existentes pueden ser editados. Cuando un formulario creado es guardado, se convierte en un Activo en tu Modelo de Datos. Nota que los campos en tu formulario están directamente enlazados a tus datos en el modelo de datos. Tan pronto como tu cambies los datos de un campo se actualizarán en el modelo. No hay botón “enviar” o “ok” que haga una carga de escritura en todos los calores del formulario del modelo de datos.


26

Imagen 34 – ormularios en el Árbol de Activos del Modelo de Datos.

2.6.2 Viendo Documentos El diseñador de “Mimics” provee de unos controles útiles para la visión de documentos dentro de tus “Mimics”. Estos incluyen el control del Visor de Documentos, el Enlace a Documentos y el Árbol de Documentos.

2.6.3 Visor de Documentos El ontrol del visor de documentos es usado para ver documentos con contenido fijo (como documentos de especificaciones XML (XPS)) en un formato paginado. Para que el Visor de Documentos pueda mostrar el documento, el documento debe ser un Activo de tu Modelo de Datos almacenado en el Servidor Status. Una vez el documento sea parte de tu modelo de datos, tu puedes enlazar su propiedad “Contenido” a la propiedad “Documento” del control Visor de Documentos. Para más información del Visor de Documentos, mira la sección 2.11.1 de la Parte 5 – Referencia de Controles de Mimic.


27

2.6.4 Enlace a Documento

El Enlace a Documento te permite insertar un enlace clicable que puede ser usado para abrir un

documento específico usando la aplicación por defecto para abrir ese tipo de documento.

Para configurar el enlace a Documento, usa la propiedad <SetUp> del panel propiedades para definir el

“path” del Activo hasta el documento deseado.

Para más información del Visor de Documentos, mira la sección 2.12.1 de la Parte 5 – Referencia de Controles de Mimic.

2.6.5 Arbol de Documentos El Control Árbol de Documento es listado bajo la sección “Colecciones” de la “Toolbox”. Este control te permite añadir a tus “Mimics” una lista colapsable de documentos que residen en tu modelo de datos.

Imagen 35 – Árbol de Documentos

Seleccionando <Abrir> se abrirá el documento con la aplicación por defecto para ese tipo de documento. Seleccionando <Eliminar> se eliminará permanentemente el documento de todas las colecciones y Activos del Modelo de Datos. Seleccionando la raíz del Árbol se pondrá activo el botón <Añadir> y se inhabilitarán los botones <Abrir> y <Eliminar>. Seleccionando <Añadir> te permitirá navegar para añadir un documento a tu modelo de datos. Para más información del Visor de Documentos, mira la sección 1.6.2 de la Parte 5 – Referencia de Controles de Mimic..


28

2.7 Guardando un “Mimic”

Para guardar tu “Mimic”, tu puedes hacer clic en el icono de <Guardar> o seleccionar <Guardar> en el menú Archivo.

Imagen 36 – Opcion Guardar en Menú e Icono

También puedes usar el atajo de teclado Ctrl+S para guardar el “Mimic”. Elijas la opción que elijas se te mostrará un cuadro de diálogo de “Salvar Mimic”

Imagen 37 – Cuadro de Diálogo “Guardar Mimic”


29

Da un nombre a tu “Mimic” y elige una Vista dentro de tu modelo de objetos en la cual tu quieras que el “Mimic” sea guardado. El “Mimic” guardado será ahora un Activo de tu Modelo de Datos, y será accesible por cualquier cliente compatible, Windows o web a través de HTML5 a través de la Pasarela Web Status. Si tu estás diseñando tu “Mimic” para ser visto en HTML 5, lleva cuidado con los controles que utilizas y asegurate que son compatibles con HTML 5, solo un subconjunto de la “Toolbox” es compatible conHTML5. Mira la parte 5 – REferencia de Controles del Diseñador para más información acerca de cuales son compatibles con HTML5.

2.8 Atajos Con uno o más objetos en el espacio de trabajo, las siguientes acciones podrían ser hechas usando atajos del teclado. Para utilizarlos los objetos tienen que estar seleccionados.

2.8.1 Keyboard Short Cuts

Borrar – Borra los objetos seleccionados. Ctrl + C – Copia todos los objetos seleccionados. Ctrl + X – Corta Todos los objetos seleccionados. Ctrl + V – Pega los objetos en el portapapeles en el Documento XAML. Ctrl +Z – Deshacer la última tarea. Shift + Ctrl + Z – Rehacer la última tarea deshecha. Ctrl + S – Guardar el documento XAML actual. F1 – Ayuda.

2.8.2 Otros Comandos

Otros Comandos válidos para un afinamiento de los objetos seleccionados en el Documento XAML: Mayus + Botón izquierdo del ratón – Seleccioar un objeto sin deseleccionar los objetos previamente seleccionados. Ctrl + Botón Izquierdo del Ratón – Alternar la seleccion de un objeto sin deseleccionar objetos previamente seleccionados(p.e. puedes deseleccionar un objeto seleccionado sin afectar a los demas) Flecha Arriba – Mover los objetos seleccionados Arriba 5 pixeles Flecha Abajo – Mover los objetos seleccionados abajo 5 pixeles Flecha Derecha – Mover los objetos seleccionados a la derecha 5 pixeles Flecha Izquierda – Mover los objetos seleccionados a la izquierda 5 pixeles Mayus + Flecha Arriba – Mover los objetos seleccionados Arriba 1 pixel Mayus + Flecha Abajo – Mover los objetos seleccionados Abajo 1 pixel Mayus + Flecha Derecha – Mover los objetos seleccionados a la Derecha 1 pixel Mayus + Flecha Izquierda – Mover los objetos seleccionados a la Izquierda 1 pixel


30

2.8.3 Adornos de Objetos

Azul – Indica que está seleccionado para Edición. Dependiendo de cursor del ratón el objeto puede ser movido en el espacio de trabajo o redimensionado.

Naranja – Indica que el bojeto está seleccionado para Rotación.

Violeta – Indica que el objeto está seleccionado para darle oblicuidad

Imagen 38 – Adornos de Objetos

2.8.4 Cursores del Ratón

Mano Blanca – Indica que no hay objetos en la caché y el objeto existente puede ser, o es, seleccionado y puede ser arrastrado al workspace. Cruz – Una cruz indica que el objeto seleccionado está en la caché y puede ser añadido al espacio de trabajo. Este cursos aparece cuando los objetos son añadidos a otro objeto que especifica coordenadas x, y. Solo es aplicable al lienzo y a las cuadrículas. Flecha Blanca – Este indica que el cursor está fuera del área editable del documento XAML. Existe la posibilidad de hacer clic en y seleccionar elementos en otros paneles del Explorador. Flecha NWSE – En conjunto con los adornos azules indica que el objeto está preparado para redimensionado. Una doble flecha negra horizontal redimensiona la anchura del objeto, una doble flecha negra vertical redimensionala altura del objeto, una doble flecha negra diagonal redimensiona ambas, la anchura y la altura. Flechas Negras Circulares – Usadas en conjunto con los adornos naranjas, indican que el objeto está seleccionado para rotación. Flecha Negra Inconexa – Usada en conjunto con los adornos violetas, indica que el objeto es seleccionado para darle oblicuidad. Las Flechas Negras Inconexas verticales dan oblicuidad al objeto en su plano vertical, las horizontales lo hacen en su plano horizontal. Nota: Si el objeto ha sido rotadoun mínimo de 90 grados los movimientos de oblicuidad serán revertidos. Signo + en negrita con la parabla “Objeto” – Esto indica que el objeto seleccionado está en la caché y puede ser añadido al espacio de trabajo; este cursor aparece cuando los objetos son añadidos a otro objeto que no especifica coordenadas x,y.


31

3 Enlace de Datos. El enlace a Datos de Status Enterprise es el proceso de navegar por los elementos del Modelo de Datos, y asociar los valores de los elementos de datos con una propiedad de un control de la superficie de diseño. Cuando el valor del Dato cambia, la propiedad visual en la superficie de trabajo también cambia. El Enlace a Datos puede ser bidireccional, cuando una propiedad cambia en el control de la superficie de diseño el cambio es propagado al elemento de datos en el Modelo, como un check box por ejempo.

3.1 Configurando un Enlace de Datos Para empezar con el Enlace de Datos, selecciona un control de interfaz de usuario en la superficie de diseño. El panel de Enlace a Datos mostrará vistas de los Activos que están disponibles para Enlazar.

Imagen 39 – Vista de Árbol de Sistema

Si tu “Mimic” es regular y no una plantilla, la Vista del Árbol de Sistema será tu única opción y contendrá

todos los Asset a los cuales puedes enlazar elementos en tu “Mimic”. Si tu estás creando una plantilla, El

panel de Enlace a Datos incluirá un Árbol de Tipos Relativo, el cual se expandirá para revelar todas las

propiedades y componentes de tu tipo particular de Mimic. Si tu Mimic es una plantilla, deberías usar

propiedades del Árbol de Tipos para tus enlaces.


32

Imagen 40 – Árbol de Tipos Relativos

Selecciona el elemento que querrías enlazar desde los elementos disponibles en el árbol y después selecciona la propiedad que quieres enlazar a tu gráfico. Con la propiedad seleccionada, una lista de atributos seleccionables para esa propiedad aparecerá en el panel de propiedades directamente debajo.

Imagen 41 – Panel de Propiedades

En la mayoría de los casos, tu enlazarás el valor de una propiedad, aunque puede haber casos en los que tu quieras enlazar a otros atributos como “DisplayName” o “TimeStamp”, dependiendo de tu aplicación. En el panel de Enlace de Datos tu puedes seleccionar el objetivo específico del control al cual querrías enlazas los datos. Usualmente tu no necesitarás cambiar esto porque el Diseñador elegirá la propiedad por defecto del control para el enlace, pero en algunos casos tu podrías querer enlazar a una propiedad diferente.


33

Imagen 42 – Configurando el enlace a Datos

Las opciones adicionales son configuradas en el panel de Enlace de Datos: “Update Rate” te permite cambiar la frecuencia con la cual el gráfico será actualizado con los cambios en los valores. “String Format” te permite formatear la salida del enlace; por ejemplo si tu estás mostrando un valor tipo doble en un control bloque de texto, deberías limitar el número de decimales a 2 en lugar de 16. “Binding Mode” te permite elegir cuando usar un enlace en un sentido (OneWay), en dos sentidos (TwoWay)o de una vez (OneTIme): “OneWay” – El enlace del control será de lectura pero no de escritura. “TwoWay” – El enlace será de lectura y escritura. “OneTime” – El control del enlace se actualizará con el cambio de la propiedad una vez, los cambios adicionales de la propiedad en el servidor no afectarán al control. El modo de Monitorización permite elegir entre “Reporting”, “Sampling” o “Deshabilitado” para determinar como los cambios de datos serán recibidos. El “Reporting” está basado en eventos, cuando la propiedad cambia. El “Sampling” está basado en un intervalo a un tiempo fijo. Cuando todas las opciones de enlaces estén configuradas como quieras, haz clic en el botón <Aplicar> cerca del fondo del panel para aplicar los enlaces. Si el enlace es un enlace directo a un Activo específico, el control de la interfaz de usuario será actualizado con los datos de la propiedad que tu estás enlazando en el modelo de datos. Si enlazamos a la propiedad sobre una plantilla, el control no actualizará con datos hasta la ejecución cuando el “Mimic” asociado con un Activo que concuerde con el tipo de documento.


34

3.2 Testeando el Enlace de Datos Para testear tus “Mimics” con datos en vivo selecciona el icono de ejecutar test en la barra de herramientas. Esto lanzará el Cliente Status el cual mostrará tu “Mimic” con los datos del Servidor Status. Mire el cliente Status en la Parte 6 – Navegador del Modelo y Ejecución para más información.

Imagen 43 – Icono de Testear Ejecución.


35

4 Controles de “Toolbox”

4.1 Resumen de Control

Imagen 44 – Silos de Fluido 3D

Lo siguiente es una lista parcial de algunos de los controles disponibles en el “Toolbox” del Diseñador de “Mimic”. Muchos otros están disponibles – incluyendo controles especializados. Todos los controles son discutidos con gran detalle en la Parte 5 – Referencia de Controles del Diseñador.

Controles 3D Silo de Fluidos Motor Pesado Motor Helicoidad Medidor de FLujo Magnético Tanque de Agua Cuadrado Taque de Agua Tanque de Agua de Torre

Gráficos Gráfico de Barras Gráfico Mixto Gráfico de Pastel Gráfico Apilado

Contenedores “Blowout Border” Control de Placa

Fecha y Hora Reloj Analógico Calendario Recogedor de Fecha “Display” de fecha y hora Control de Tiempo transcurrido

Indicadores

Indicador Dual Indicador Dinámico Indicador Lineal Horizontal Indicador Parabólico “Racing Gauge”


36

Indicador Radial Indicador Simple Indicador Variable Indicador Vertical Lineal

Indicadores (II) Indicador de Nivel de Cinco Estados Indicador de Nivel de Tres Estados Indicador de Torre de Cinco Estados Indicador de Torre de Tres Estados

“Input” Caja de Datos en Texto

Eiquetas

Etiqueta de Datos Etiqueta Genérica Etiqueta de Indicador Etiqueta de Variables

“Displays” LED “LED Five by Seven Matrix” Luz LED LED de siete segmentos LED de dieciseis segmentos

Media Control de Imagen Enlazable Media Control Bloqueo de Texto

Miscelanea Fuego Animado Control de Botón de Radio de Enumeración Control de Valoraciones

Motores y Ventiladores Bomba Centrífuga Engranaje Motor Pesado Motor Heliciodal Rueda de Aire de Metal Rueda de Paleta Vntilador Simple Pequeña Rueda de Viento Rueda de Espigas Motor Cuadrado Neumático Generador de Viento

Navegación Botón de Navegación de Gel Atrás Botón de Navegación de Gel Botón de Navegación Atrás Borde de Navegación Botón de Navegación Combo de Navegación Lista de Navegación

Tanques y Tuberías Recorte del Tanque Tanque de Cilindro “Fitted Elbow Pipe”


37

Tubería Ajustada Tubería de Marquesina Tanque Embudo Tanque Indicador Tanque de Escala Tanque de Mezclado “Standard Elbow Pipe” Tbería Estándar Tubería Estandar de Marquesina Conctor Universal de Tubería Valvula

Desplazamiento Marquesina Desplazamiento de Noticias

Tendencia Control de Tendencia

Imagen 47 – Controles “Toolbox”

4.2 Controles Compatibles con Web Los “Mimics” que están destinados para verse en un navegador web necesitan usar un subconjunto disponible de controles y formas en el Diseñador “Mimic”. Mientras algunos controles son soportados para usar en los navegadores web, hay algunos que no. Para ver una lista de controles de “Mimics” soportados en la Web, por favor mira la parte 5 – Referencia de Controles del Diseñador. Los “Mimics” vistos en la Web permiten la mayoría de las funcionalidades de las vistas en el “Mimic Runtime” o el Navegador del Modelo. Los “Mimics” basados en Web soportan navegación, multiples capas y enlaces de doble camino. Los Datos en tiempo real pueden leerse en tiempo real, y pueden escribirse de nuevo en el servidor. Los “Mimics” destinados a funcionar en la web deberían ser concebidos un comprendidos sobre cuales funcionarán y cuales no antes de ser diseñados. Si el mismo “Mimic” suele ser usado en el cliente Windows y en la Web, esto podría ser una buena práctica para usar solo controles Web cuando diseñamos el “Mimic”.


38

5 “Mimic Runtime” Status Enterprse provee de entornos de ejecución separados para ejecutar los “Mimics” creados en el Diseñador de “Mimics” y el Diseñador de Aplicaciones. Adicionalmente, algunos “Mimics” pueden ser convertidos a HTML 5 vía la Pasarela Web. Para más información sobre la Pasarela Web de Status Enterprise, por favor mira la parte 8 – Pasarela Web.

5.1 Iniciando el Entorno de Ejecución de Status “Mimic” El “Mimic Runtime” es usado para ejecutar “Mimics” creados como documentos XAML en el Diseñador de “Mimics”. El “Mimic Runtime” es iniciado de la misma manera que todas las aplicaciones Status. El usuario necesitará hacer inicio de sesión en el “Status Server” con una cuenta de usuario válida. Para más información sobre el inicio de sesión en el Servidor Status, mira la Parte 1 – Resumen y Conceptos básicos.

Imagen 45 – Inicio de Sesión en el Servidor Status

Después de iniciar sesión, el entorno de ejecución necesitará conocer que “Mimic” abrir como tu pantalla principal. Si seleccionamos una plantilla tu también necesitarás seleccionar el Activo correspondiente.


39

Imagen 46 – Cuadro de Diálogo Abrir “Mimic”

Haciendo clic en <OK>, el “Mimic” será desplegado en la aplicación de ejecución de “Mimics”. Si el “Mimic” ha sido diseñado con controles de Navegación podrás navegar hacia otros “Mimics”

5.2 Embebiendo el “Mimic Runtime” dentro de tu Propia Aplicación Windows El “Mimic Runtime” es un conteol WPF .NET. Este control puede ser incluido en una aplicación WPF .NET de Windows. Cuando una aplicación se ejecuta esta autentica y carga el “Mimic” seleccionado de la misma manera que el “Mimic Runtime”. Código de Ejemplo para embeber el “Mimic Runtime” está disponible en el Ápendice 1. Para utilizar el “Mimic Runtime” las siguientes referencias de ensamblado serán requeridas:

GenericBinding Opc.Ua.Client Opc.Ua.Core Status.Common.Diagnostics Status.Common.Interfaces Status.Common.ThemeManager Status.Controls.UIControls Status.DataModel.DataBinding Status.DataModel.DataSource Status.DataModel.ObjectModel Status.Resources.CommonResources Status.Resources.StatusResources Status.Runtime.ControlLibrary


40

Status.StatusServer.Common StatusBrushConverter StatusControls StatusVisibilityConverter VantagePoint.Charts VantagePoint3D VantagePointTrend


41

6 Miscelanea

6.1 _Extendiendo y Personalizando en Diseñador de “Mimic”

El diselador de “Mimics” Status Enterprise fue diseñado desde el fondo hacia arriba para ser extensible y personalizable. Usando el Modelo de Objetos, los plugings pueden fácilmente ser escritos para extender la funcionalidad del Diseñador. Muchos servicios están disponibles, así como el acceso a la superficie de diseño y estructura del documento Para una guía de desarrolladores para entender Status Enterprise, por favor contacte con soporte.

6.2 Creando Controles Personalizados para “Mimics” Los Controles personalizados en .NET pueden ser creadas y añadidas a tus “Mimics”. Estos controles deben ser .NET 4.0 – 4.5 WPF. Para añadir un control para el Diseñador “Mimic”, selecciona <Add WPF Control> en el “Toolbox” y selecciona el ensamblado .NET que contiene tu control.

Imagen 47 – Añadir Control WPF

Un cuadro de Diálogo será mostrado para coger un control en la lista de tipos de tu ensamblado .NET. Una vez el cuadro de diálogo es apartado, el control estará disponible en el “Toolbox”.

Imagen 48 – Gráfico de Barras

Para que el Navegador del Modelo y el “Mimic Runtime” carguen tu control, el control – y todas sus

dependencias – necesita estar en un directorio de ejecutables del Navegador Status y el “Mimic Runtime”

o en la Caché de Ensamblados Global de tu ordenador.


42

Tu control puede conseguir el “Status Object Model” para interactuar con el Servidor Status Enterprise. Para consegui el “Status OBject Model” tu control necesitará enlazar con los siguientes ensamblados: Status.Common.Diagnostics Status.Common.Interfaces Status.DataModel.ObjectModel Status.DataModel.ViewModels Status.Runtime.ControlLibrary Status.StatusServer.Common Tu también necesitarás enlazar a los siguientes ensamblados OPC UA: Opc.Ua.Client Opc.Ua.Core El siguiente código expone el “Status Object Model” a tu aplicación.

StatusRuntimeControl _statusRuntimeControl = Helper.GetCurrentStatusRuntimeControl(this); if (_statusRuntimeControl == null) // design time { return; } //get the object model _objectModel = _statusRuntimeControl.StatusObjectModel; Para más información para el “Status Object Model” mira la parte 9 – Referencia del Modelo de Objetos


43

Apéndice 1 – Código Ejemplo Embeber el “Mimic Runtime”

El código siguiente puede ser utilizado para embeber el “Status Runtime” en tu aplicación WPF.

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Net.Sockets; using System.IO; using Opc.Ua; using Opc.Ua.Client; using System.Security.Cryptography.X509Certificates; using System.Net; using Opc.Ua.Bindings; using System.Diagnostics; using Status.DataModel.ObjectModel; using Status.DataModel.ObjectModel.Login; using Status.Runtime.ControlLibrary; using Status.Common; using Status.Common.Diagnostics; using Status.DataModel.ObjectModel.ServerLogin.Dialogs; using Status.DataModel.DataSource; using GenericBinding; using Status.Resources.CommonResources; using Status.Runtime.ControlLibrary.Supporting; using Status.DataModel.ObjectModel.Assets; using Status.StatusServer.Common.Helpers; using Status.DataModel.ObjectModel.Common; using Status.DataModel.ObjectModel.Files; namespace StatusClient { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { /// <summary> /// Initializes a new instance of the <see cref="MainWindow"/> class. /// </summary> public MainWindow() { InitializeComponent(); Loaded += new RoutedEventHandler(MainWindow_Loaded); } internal StatusObjectModel _objectModel; StatusServerClient _statusServerClient = null;


44

void MainWindow_Loaded(object sender, RoutedEventArgs e) { Background = ThemeManager.Current.ApplicationBackground; Icon = Status.Resources.StatusResources.StatusIcons.GetBitmap("Status32.png"); Application.Current.MainWindow = this; Initialize(this); //get the arguments string[] args = Environment.GetCommandLineArgs(); if (args.Length > 1) { //use arguments to start the client InitializeStatusClientControlArguments(args); } else { InitializeStatusClientControl(); } } StatusRuntimeControl _statusClientControl = null; /// <summary> /// Initializes this instance. /// </summary> private void Initialize(Window ownerWindow) { try { SResult sresult = LoginToUAServer(); if (sresult.IsNotGood()) { sresult.ShowMessage(); Application.Current.Shutdown(0); return; } if (sresult.Code == 11010048) { return; // shutting down } _statusServerClient.GetObjectModel(out _objectModel); if (sresult.IsNotGood()) { sresult.ShowMessage(); Application.Current.Shutdown(0); } GenericBindingManager.CurrentBindingManager.RemoveAllDataSources(true); StatusServerDataSource dataSource = new StatusServerDataSource(_objectModel); dataSource.DisplayName = "uaserver"; } catch (Exception ex) { MessageBox.Show(ex.Message, CommonStrings.ERROR); if (Application.Current != null) { Application.Current.Shutdown(0); } }


45

} /// <summary> /// Start status client control /// </summary> void InitializeStatusClientControl() { if (_objectModel == null) { return;// shutting down } try { // the status client as a control _statusClientControl = new StatusRuntimeControl(); _statusClientControl.InitializeCompleted += new EventHandler(_statusClientControl_Initialized); _statusClientControl.Initialize(this, _objectModel); this.Content = _statusClientControl; this.Title = "Status Enterprise Runtime"; } catch (Exception ex) { MessageBox.Show(ex.Message, CommonStrings.ERROR); if (Application.Current != null) { Application.Current.Shutdown(0); } } } /// <summary> /// Start status client control with passed in arguments /// </summary> /// <param name="args"></param> void InitializeStatusClientControlArguments(string[] args) { if (_objectModel == null) { return;// shutting down } string userNodeId = null; string assetId = null; args = args[1].Split('|'); userNodeId = args[0]; if (args.Count() > 1) assetId = args[1]; try { // the status client as a control _statusClientControl = new StatusRuntimeControl(); _statusClientControl.Initialize(this, _objectModel); this.Content = _statusClientControl; this.Title = "Status Enterprise Runtime"; SResult sResult = null; ObjectBase objectBase = _objectModel.ObjectFromNodeId(NodeHelper.NodeIdFromKey(userNodeId), out sResult); if (objectBase == null) return;


46

Asset asset = null; if (assetId != null) asset = _objectModel.ObjectFromNodeId(NodeHelper.NodeIdFromKey(assetId), out sResult) as Asset; _statusClientControl.OpenMimic((UserFile)objectBase, asset, false, false); } catch (Exception ex) { MessageBox.Show(ex.Message, CommonStrings.ERROR); if (Application.Current != null) { Application.Current.Shutdown(0); } } } void _statusClientControl_Initialized(object sender, EventArgs e) { try { // if no command line arguements, show a mimic picker _statusClientControl.PickMimic(); } catch (Exception ex) { SResult.Create(ex, "Showing the mimic failed", "").ShowMessage(); } } /// <summary> /// Shows the connection dialog to the UA server /// </summary> SResult LoginToUAServer() { LoginDialog loginDialog = new LoginDialog(); loginDialog.Owner = this; loginDialog.Resources = ThemeManager.Current; loginDialog.Background = loginDialog.Resources["ApplicationBackground"] as Brush; if (loginDialog.ShowDialog() == false) { if (Application.Current != null) { Application.Current.Shutdown(); } return SResult.Create(StatusCodes.GoodShutdownEvent, "User canceled", ""); } _statusServerClient = loginDialog.StatusServerClient; return SResult.Good; } } }