Controles Disponibles para Diseño de Scadascada.com/Content/UserGuides/StatusEnterprise_ES/Status...

Guía de Usuario Parte 5

Controles Disponibles para Diseño de Scada

Status Enterprise Controles Disponibles para Diseño de Scada

1

Contents

CONTROLES DE INTERFAZ DE USUARIO ............................................................................................. 12

1 PROPIEDADES COMUNES DE LOS CONTROLES ........................................................................... 13

2 CONTROLES 3D ........................................................................................................................ 14

2.1 Depósitos para Fluidos ....................................................................................................... 14 2.2 Motor Pesado ...................................................................................................................... 15 2.3 Motor de Bobina Helicoidal ................................................................................................. 15 2.4 Medidor Magnético de Fluidos ............................................................................................ 16 2.5 Depósito de Fluidos Rectangular ........................................................................................ 16 2.6 Tanque de Agua ................................................................................................................. 17 2.7 Depósito en Torre para Fluidos .......................................................................................... 17

3 ALARMAS 19

3.1 Control de Alarmas ............................................................................................................. 19

4 BOTONES 21

4.1 Botón con Flecha ................................................................................................................ 21 4.2 Interruptor Plano ................................................................................................................. 22 4.3 Botón de “Gel” ..................................................................................................................... 23 4.4 Botón de Gel de Repetición ................................................................................................ 23 4.5 Botón de Gel de Palanca .................................................................................................... 24 4.6 Botón Genérico ................................................................................................................... 24 4.7 Botón de Repetición Generico ............................................................................................ 25 4.8 Botón de Conmutación Generico ........................................................................................ 25 4.9 Botón Industrial de Presión ................................................................................................. 26 4.10 Botón Industrial de Repetición ............................................................................................ 26 4.11 Botón de Conmutación Industrial ........................................................................................ 27 4.12 Botón de Conmutación de Potencia ................................................................................... 28 4.13 Interruptor Conmutador ...................................................................................................... 28 4.14 Botón de Seguridad ............................................................................................................ 29

5 DIAGRAMAS ............................................................................................................................. 31

5.1 Diagrama de Barras ............................................................................................................ 31 5.2 Gráfico Mixto ....................................................................................................................... 32 5.2.1 [Añadir] Barra Mixta ......................................................................................................... 33 5.2.2 [Añadir] Línea Mixta ......................................................................................................... 34 5.3 Gráfico de Pastel ................................................................................................................ 34 5.3.1 [Añadir] Pieza de Pastel .................................................................................................. 35 5.4 Gráfico Apilado ................................................................................................................... 37 5.4.1 [Añadir] Parte de Barra Apilada ...................................................................................... 37

6 CONTROLES DE COLECCIÓN ..................................................................................................... 38

6.1 Colección Cuadrícula o ‘Grid’ ............................................................................................. 38 6.2 Árbol del Documento .......................................................................................................... 42 6.3 Control de Datos Históricos ................................................................................................ 43 6.4 Control Lista de Fichas de Objetos ..................................................................................... 45 6.5 Propiedad ‘Grid’ .................................................................................................................. 47

7 CONTROLES COMUNES ............................................................................................................. 49

7.1 ‘Check Box’ ......................................................................................................................... 49 7.2 Expansor ............................................................................................................................. 50 7.3 Deslizador Horizontal .......................................................................................................... 51 7.4 Imagen ................................................................................................................................ 52 7.5 Etiqueta ............................................................................................................................... 52 7.6 Campo de Password .......................................................................................................... 53


2

7.7 Barra de Progreso............................................................................................................... 53 7.8 Caja de texto Enriquecido ................................................................................................... 54 7.9 Caja de Texto ...................................................................................................................... 55 7.10 Botón Conmutador .............................................................................................................. 56 7.11 Deslizador Vertical .............................................................................................................. 56

8 CONTENEDORES ....................................................................................................................... 58

8.1 Lupa .................................................................................................................................... 58 8.2 Control Tipo Placa .............................................................................................................. 59

9 CINTAS 60

9.1 Cinta Transportadora .......................................................................................................... 60

10 CONTROLES DE ADMINISTRACIÓN DE DATOS ............................................................................. 61

10.1 Botón de Cambio de Componente ..................................................................................... 61 10.2 Botón de Gel de Cambio de Componente .......................................................................... 62 10.3 Botón para Crear Objeto ..................................................................................................... 63 10.4 Botón de Gel para Crear objetos ........................................................................................ 64

11 CONTROLES DE FECHA Y HORA ................................................................................................ 66

11.1 Reloj Analógico ................................................................................................................... 66 11.2 Calendario ........................................................................................................................... 67 11.3 Selector de Fecha ............................................................................................................... 68 11.4 Panel de Fecha y Hora ....................................................................................................... 69 11.5 Control de Tiempo Transcurrido ......................................................................................... 69 11.6 Control de Hora ................................................................................................................... 71

12 DIAGNOSTICO ........................................................................................................................... 72

12.1 Control de Log de Actividad ................................................................................................ 72

13 DOCUMENTOS .......................................................................................................................... 74

13.1 Visor de Documentos ......................................................................................................... 74 13.2 Enlace a Documentos ......................................................................................................... 74

14 MEDIDORES .............................................................................................................................. 76

14.1 Doble Medidor ..................................................................................................................... 76 14.2 Medidor Dinámico ............................................................................................................... 78 14.3 Medidor Lineal Horizontal o “Horizontal Linear Gauge” ..................................................... 79 14.4 Medidor Parabólico o “Parabolic Gauge” ........................................................................... 80 14.5 Medidor de Competición o “Racing Gauge” ....................................................................... 81 14.6 Medidor Radial .................................................................................................................... 82 14.7 Medidor Simple ................................................................................................................... 83 14.8 Medidor Variable ................................................................................................................. 84 14.9 Medidor Lineal Vertical ....................................................................................................... 85

15 GRIDS Y PANELES .................................................................................................................... 87

15.1 Borde .................................................................................................................................. 87 15.2 Lienzo o “Canvas” ............................................................................................................... 87 15.3 “Dock Panel” ....................................................................................................................... 88 15.3.1 Cuadrícula o “Grid” .......................................................................................................... 88 15.4 Divisor de Cuadrícula o “Grid Splitter” ................................................................................ 89 15.5 “Ink Canvas” ........................................................................................................................ 89 15.6 “Stack Panel” ...................................................................................................................... 90 15.7 Cuadrícula Uniforme o “Uniform Grid” ................................................................................ 90 15.8 Lupa .................................................................................................................................... 91 15.9 “Viewport 3D” ...................................................................................................................... 91 15.10 “Wrap Panel” ....................................................................................................................... 92

16 CONTROLES CON INDICADORES ................................................................................................ 93


3

16.1 Indicador de Nivel de Cinco Estados .................................................................................. 93 16.2 Indicador de Nivel de Tres Estados .................................................................................... 94 16.3 Columna Indicador de Cinco Estados ................................................................................ 95 16.4 Columna Indicador de Tres Estados .................................................................................. 96

17 VALORES DE ENTRADA ............................................................................................................. 97

17.1 Caja de Texto ...................................................................................................................... 97

18 CONTROL DE ELEMENTOS ......................................................................................................... 98

18.1 Control de Enumeración ..................................................................................................... 98 18.1.1 Control de Enumeración de Elementos ........................................................................... 99 18.2 Barra de Estado .................................................................................................................. 99 18.2.1 [Agregar] Elemento de Barra de Estado. ....................................................................... 100 18.3 Control de Tipo Ficha ....................................................................................................... 100 18.3.1 [Agregar] Componente Ficha......................................................................................... 101 18.4 Barra de Herramientas y Bandeja de Barra de Herramientas .......................................... 102 18.5 Control Vista de Arbol ....................................................................................................... 103 18.5.1 Tree View Item [Add] ..................................................................................................... 103

19 ETIQUETAS ............................................................................................................................. 105

19.1 Etiqueta de Datos ............................................................................................................. 105 19.2 Etiqueta Genérica ............................................................................................................. 105 19.3 Etiqueta Indicadora ........................................................................................................... 106 19.4 Etiqueta de Función Varianza ........................................................................................... 107

20 VISORES DE LED ................................................................................................................... 109

20.1 Visor de LED de Cinco por Siete ...................................................................................... 110 20.2 Luz LED ............................................................................................................................ 110 20.3 LED de Siete Segmentos ................................................................................................. 112 20.4 LED de Dieciseis Segmentos ........................................................................................... 112

21 MULTIMEDIA ........................................................................................................................... 114

21.1 Imagen Enlazable ............................................................................................................. 114 21.2 Media Control .................................................................................................................... 114 21.3 “Video Text Block”............................................................................................................. 115 21.4 Navegador Web ................................................................................................................ 116

22 CONTROLES DE MISCELÁNEA .................................................................................................. 117

22.1 Fuego Animado ................................................................................................................. 117 22.2 Control de Botón de Radio de Enumeración .................................................................... 118 22.2.1 Control de Elemento de Botón de Radio de Enumeración ............................................ 118 22.3 Control de Puntuaciones .................................................................................................. 120

23 MOTORES Y VENTILADORES .................................................................................................... 121

23.1 Bomba Centrifugadora ...................................................................................................... 121 23.2 Engranaje .......................................................................................................................... 122 23.3 Motor Pesado .................................................................................................................... 122 23.4 Motor de Bobina Helicoidal ............................................................................................... 123 23.5 Rueda de Metal ................................................................................................................. 125 23.6 Rueda de Palas ................................................................................................................ 125 23.7 Ventilador Simple .............................................................................................................. 126 23.8 Rueda Pequeña ................................................................................................................ 126 23.9 Rueda Dentada ................................................................................................................. 127 23.10 Motor Cuadrado ................................................................................................................ 128 23.11 Neumático ......................................................................................................................... 129 23.12 Aero Generador ................................................................................................................ 129

24 BOTONES DE NAVEGACIÓN. .................................................................................................... 131

24.1 Botón de Navegación de Funciones Clave ...................................................................... 133


4

24.2 Botón de Navegación de Gel “Atrás” ................................................................................ 134 24.3 Botón de Navegación de Gel ............................................................................................ 134 24.4 Botón de Navegación “Atrás” ............................................................................................ 135 24.5 Borde de Navegación ....................................................................................................... 137 24.6 Botón de Navegación ....................................................................................................... 137 24.7 Menú Desplegable de Navegación ................................................................................... 138 24.8 Lista de Opciones de Navigation ...................................................................................... 139

25 CONDUCTOS Y DEPÓSITOS ...................................................................................................... 140

25.1 Conector de Conductos .................................................................................................... 140 25.2 Depósito Seccionado ........................................................................................................ 141 25.3 Depósito Cilindrico ............................................................................................................ 141 25.4 Fitted Elbow Pipe .............................................................................................................. 142 25.5 Conducto Ajustable ........................................................................................................... 143 25.6 Conducto Ajustable con Indicador de Flujo ...................................................................... 143 25.7 Tanque de Embudo .......................................................................................................... 144 25.8 Depósito con Indicador Vertical ........................................................................................ 144 25.9 Depósito Mezclador .......................................................................................................... 146 25.10 Conducto Curvado Estandar ............................................................................................ 146 25.11 Conducto Estandar ........................................................................................................... 147 25.12 Conducto Estandar con Indicador de Flujo ...................................................................... 147 25.13 Conector Universal de Conductos .................................................................................... 148 25.14 Válvula .............................................................................................................................. 148 25.15 Depósito Vessel ................................................................................................................ 149

26 SCRIPT 150

26.1 Botón ................................................................................................................................. 150 26.2 Combo Box ....................................................................................................................... 150 26.2.1 Elemento de Combo Box [Agregar] DISEÑADOR DE ‘MIMICS’| DISEÑADOR DE APLICACIONES150 26.3 Lista .................................................................................................................................. 151 26.3.1 Añadir Elemento Lista .................................................................................................... 152 26.4 Vista de Lista .................................................................................................................... 152 26.4.1 [Añadir] Elemento a la Vista de Lista ............................................................................. 153 26.5 Menu ................................................................................................................................. 153 26.5.1 [Añadir] Elemento a Menú ............................................................................................. 154 26.6 Control de Script ............................................................................................................... 155

27 CONTROLES DE DESPLAZAMIENTO .......................................................................................... 156

27.1 Desplazamiento Decolorado ............................................................................................. 156 27.2 Marquesina ....................................................................................................................... 157 27.3 Visor de Canal RSS .......................................................................................................... 158

28 FORMAS BÁSICAS .................................................................................................................. 159

28.1 Elipse ................................................................................................................................ 159 28.2 Línea ................................................................................................................................. 159 28.3 Trazos ............................................................................................................................... 160 28.4 Polígono ............................................................................................................................ 161 28.5 Multilíneas ......................................................................................................................... 161 28.6 Polígono y Lápiz Multilínea ............................................................................................... 161 28.7 Rectangulo ........................................................................................................................ 162

29 GRÁFICAS DE TENDENCIA ....................................................................................................... 163

29.1 Gráfica de Tendencia ....................................................................................................... 163 29.2 Línea Gráfica de Tendencia ............................................................................................. 165

30 VISORES 167

30.1 Barra de Desplazamiento ................................................................................................. 167 30.2 Controles de Terceros ...................................................................................................... 168


5

30.3 Agregar Control WPF ....................................................................................................... 168 Imagen 1- Tabla de Propiedades Comunes ..................................................................................................... 13 Imagen 2 – Depósitos para Fluidos ................................................................................................................... 14 Imagen 3 – Tabla de propiedades del grupo de Depósitos para Fluidos ................................................. 14 Imagen 4 – Motor Pesado ..................................................................................................................................... 15 Imagen 5 – Tabla de propiedades del Motor Pesado .................................................................................... 15 Imagen 6 – Vista 3D del Motor de Bobina Helicoidal ..................................................................................... 15 Imagen 7 – Tabla de Propiedades del Motor de Bobina Helicoidal ........................................................... 15 Imagen 8 – Medidor Magnético de Fluidos ...................................................................................................... 16 Imagen 9 - Tabla de Propiedades del Medidor Magnético de Fluidos ...................................................... 16 Imagen 10 – Depósito de Fluidos Rectangular ............................................................................................... 16 Imagen 11 - Tabla de Propiedades del Depósito de Fluidos Rectangular ............................................... 17 Imagen 12 – Tanque de Agua .............................................................................................................................. 17 Imagen 13 - Tabla de Propiedades del Tanque de Agua .............................................................................. 17 Imagen 14 – Depósito en Torre para Fluidos .................................................................................................. 18 Imagen 15 - Tabla de Propiedades del Depósito en Torre para Fluidos .................................................. 18 Imagen 16 – Control de Alarmas......................................................................................................................... 19 Imagen 17 - Tabla de Propiedades del Control de Alarmas ........................................................................ 20 Imagen 18 - Tabla de Propiedades Comunes de Botones. .......................................................................... 21 Imagen 19 – Botón con Flecha ............................................................................................................................ 22 Imagen 20 - Tabla de Propiedades del Botón Flecha .................................................................................... 22 Imagen 21 – Interruptor Plano ............................................................................................................................. 22 Imagen 22 - Tabla de Propiedades del Interruptor Plano ............................................................................. 23 Imagen 23 – Botón de Gel .................................................................................................................................... 23 Imagen 24 - Tabla de Propiedades Botón de Gel ........................................................................................... 23 Imagen 25 – Botón de Gel de Repetición . ....................................................................................................... 23 Imagen 26 - Tabla de Propiedades Botón de Gel de Repetición ................................................................ 24 Imagen 27 – Botón de Gel de Palanca ............................................................................................................... 24 Imagen 28 - Tabla de Propiedades del Botón de Gel de Palanca............................................................... 24 Imagen 29 – Botón Genérico ............................................................................................................................... 24 Imagen 30 – Tabla de Propiedades del Botón Genérico .............................................................................. 25 Imagen 31 – Botón de Repetición Genérico .................................................................................................... 25 Imagen 32 - Tabla de Propiedades del Botón de Repetición Genérico .................................................... 25 Imagen 33 – Botón de Conmutación Genérico ............................................................................................... 25 Imagen 34 - Tabla de Propiedades Botón de Conmutación Generico ...................................................... 26 Imagen 35 – Botón Industrial de Presión ......................................................................................................... 26 Imagen 36 - Tabla de Propiedades Botón Industrial de Presión. ............................................................... 26 Imagen 37 – Botón Industrial de Repetición .................................................................................................... 27 Imagen 38- Tabla de Propiedades del Botón Industrial de Repetición ..................................................... 27 Imagen 39 – Botón de conmutación Industrial ............................................................................................... 27 Imagen 40 - Tabla de Propiedades del Botón de Conmutación Industrial .............................................. 28 Imagen 41 – Botón de Conmutación de Potencia .......................................................................................... 28 Imagen 42 – Tabla de Propiedades Botón de Conmutación de Potencia ................................................ 28 Imagen 43 – Interruptor Conmutador ................................................................................................................ 29 Imagen 44 - Tabla de Propiedades del Interruptor Conmutador ................................................................ 29 Imagen 45 – Botón de Seguridad ....................................................................................................................... 29 Imagen 46 – Tabla de Propiedades del Interruptor de Seguridad .............................................................. 30 Imagen 47 – Gráfico de Barras ............................................................................................................................ 31 Imagen 48 - Tabla de Propiedades de gráfico de Barras. ............................................................................ 31 Imagen 49 - Barra [Añadir] ................................................................................................................................... 32 Imagen 50 - Tabla de Propiedades [Añadir] Barra ......................................................................................... 32 Imagen 51 – Gráfico Mixto .................................................................................................................................... 32 Imagen 52 - Tabla de Propiedades de Gráfico Mixto ..................................................................................... 33


6

Imagen 53 - [Añadir] Barra Mixta ........................................................................................................................ 33 Imagen 54 - Tabla de Propiedades [Añadir] Barra Mixta. ............................................................................. 34 Imagen 55 – Icono de [Añadir] Línea Mixta ...................................................................................................... 34 Imagen 56 - Tabla de Propiedades Línea Mixta .............................................................................................. 34 Imagen 57 – gráfico de Pastel ............................................................................................................................. 35 Imagen 58 - Tabla de Propiedades Gráfico de Pastel ................................................................................... 35 Imagen 59 – Icono [Añadir] Pieza de Pastel .................................................................................................... 35 Imagen 60 - Tabla de Propiedades [Añadir] Pieza de Pastel ....................................................................... 36 Imagen 61 – Gráfico Apilado ................................................................................................................................ 37 Imagen 62 – Icono de [Añadir] Parte de Barra Apilada ................................................................................ 37 Imagen 63 - Tabla de Propiedades Parte de Barra Apilada ......................................................................... 37 Imagen 64 - Colección Cuadrícula o ‘Grid’ ...................................................................................................... 38 Imagen 65 – Cuadro de Diálogo Colección Cuadrícula o ‘Grid’ ................................................................. 38 Imagen 66 – Cuadro de Dialogo “Filtrar”.......................................................................................................... 39 Imagen 67 – Colección ‘Grid’ con un filtro añadido. ..................................................................................... 40 Imagen 68 - Tabla de Propiedades de Colección ‘Grid’ ................................................................................ 41 Imagen 69 – Control Árbol del Documento ...................................................................................................... 42 Imagen 70 - Tabla de Propiedades del Control Árbol de Documentos. ................................................... 42 Imagen 71 – Control Datos Históricos .............................................................................................................. 43 Imagen 72 – Configuración de Propiedades de la Colección del Control Histórico ............................. 43 Imagen 73 – Control Recogedor de Componentes Histórico ...................................................................... 44 Imagen 74 – Control Histórico ............................................................................................................................. 44 Imagen 75 - Tabla de Propiedades Control Histórico. .................................................................................. 45 Imagen 76 – Configuración de Propiedades de la Colección de Control Lista de Fichas de Objetos

............................................................................................................................................................................ 45 Imagen 77 - Control Lista de Fichas de Objetos............................................................................................. 45 Imagen 78 - Tabla de Propiedades de Control Lista de Fichas de Objetos ............................................. 46 Imagen 79 – Propiedad ‘grid’ con Adornos Azules para redimensionamiento. ..................................... 47 Imagen 80 – Propiedad ‘Grid’ en ejecución ..................................................................................................... 47 Imagen 81 – Cuadro de Dialogo de Instalación de la Propiedad ‘Grid’ .................................................... 48 Imagen 82 - Tabla de Propiedades Propiedad ‘Grid’ ..................................................................................... 48 Imagen 83 – ‘Check Box’ ...................................................................................................................................... 49 Imagen 84 - Tabla de Propiedades ‘Check Box’ ............................................................................................. 49 Imagen 85 - Expansor ............................................................................................................................................ 50 Imagen 86 - Tabla de Propiedades del Expander ........................................................................................... 50 Imagen 87 – Deslizador Horizontal ..................................................................................................................... 51 Imagen 88 - Tabla de Propiedades del Deslizador Horizontal .................................................................... 51 Imagen 89 – Control de Imagen .......................................................................................................................... 52 Imagen 90 - Tabla de Propiedades del Control Imagen ................................................................................ 52 Imagen 91 - Etiqueta .............................................................................................................................................. 52 Imagen 92 - Tabla de Propiedades del Control Etiqueta .............................................................................. 53 Imagen 93 – Campo de Password ...................................................................................................................... 53 Imagen 94 - Tabla de Propiedades de Campo de Password ....................................................................... 53 Imagen 95 – Barra de Progreso .......................................................................................................................... 53 Imagen 96 - Tabla de Propiedades de la Barra de Progreso ....................................................................... 54 Imagen 97 – Caja de Texto Enriquecido ........................................................................................................... 54 Imagen 98 - Tabla de Propiedades Caja de Texto Enriquecido .................................................................. 54 Imagen 99 – Caja de Texto ................................................................................................................................... 55 Imagen 100 - Tabla de Propiedades de la Caja de Texto .............................................................................. 55 Imagen 101 – Botón Conmutador ....................................................................................................................... 56 Imagen 102 - Tabla de Propiedades del Botón Conmutador ....................................................................... 56 Imagen 103 – Deslizador Vertical ....................................................................................................................... 57 Imagen 104 - Tabla de Propiedades del Deslizador Vertical ....................................................................... 57 Imagen 105 - Lupa .................................................................................................................................................. 58 Imagen 106 - Tabla de Propiedades de la Lupa .............................................................................................. 58


7

Imagen 107 –Control Tipo Placa ......................................................................................................................... 59 Imagen 108 - Tabla de Propiedades del Control Tipo Placa ........................................................................ 59 Imagen 109 – Cinta Transportadora ................................................................................................................... 60 Imagen 110 - Tabla de Propiedades de la Cinta Transportadora ............................................................... 60 Imagen 111 – Botón de Cambio de Componente ........................................................................................... 61 Imagen 112 - Tabla de Propiedades del Botón de Cambio de Componente ........................................... 61 Imagen 113 – Configuración del Botón Cambio de Componente .............................................................. 62 Imagen 114 – Selección de Usuario en el Botón de Cambio de Componente ........................................ 62 Imagen 115 – Botón de Gel de Cambio de Componente .............................................................................. 62 Imagen 116 - Tabla de Propiedades del Botón de Cambio de Componente de Tipo Gel .................... 63 Imagen 117 – Botón para Crear Objeto ............................................................................................................. 63 Imagen 118 - Tabla de Propiedades del Botón de Crear Objeto................................................................. 63 Imagen 119 – Ventana Setup de las propiedades del Botón de Crear Objeto ........................................ 64 Imagen 120 – Botón de Gel para Crear Objetos ............................................................................................. 64 Imagen 121 - Tabla de Propiedades del Botón de Gel para Crear Objetos ............................................. 65 Imagen 122 - Tabla de Propiedades de Fecha y Hora ................................................................................... 66 Imagen 123 – Reloj Analógico ............................................................................................................................. 66 Imagen 124 - Tabla de Propiedades del Reloj Analógico ............................................................................. 67 Imagen 125 - Calendario ....................................................................................................................................... 67 Imagen 126 - Tabla de Propiedades del Calendario ...................................................................................... 68 Imagen 127 – Selector de Fecha ......................................................................................................................... 68 Imagen 128 - Tabla de Propiedades del Selector de Fecha ......................................................................... 68 Imagen 129 – Panel de Fecha y Hora ................................................................................................................. 69 Imagen 130 - Tabla de Propiedades del Panel de Fecha y Hora................................................................. 69 Imagen 131 – Conrol de Tiempo Transcurrido ................................................................................................ 69 Imagen 132 - Elapsed Time Control Tabla de Propiedades ......................................................................... 70 Imagen 133 – Control de Hora ............................................................................................................................. 71 Imagen 134 - Tabla de Propiedades Control de Hora .................................................................................... 71 Imagen 135 - Tabla de Propiedades de los Controles de Diagnóstico ..................................................... 72 Imagen 136 – Control de Log de Actividad ...................................................................................................... 72 Imagen 137 - Tabla de Propiedades de Control de Log de Actividad ....................................................... 73 Imagen 138 – Visor de Documentos .................................................................................................................. 74 Imagen 139 - Tabla de Propiedades del Visor de Documentos .................................................................. 74 Imagen 140 – Enlace a Documentos .................................................................................................................. 75 Imagen 141 - Tabla de Propiedades del Enlace de Documentos ............................................................... 75 Imagen 142 - Tabla de Propiedades de los Medidores ................................................................................. 76 Imagen 143 – Doble Medidor ............................................................................................................................... 76 Imagen 144 - Tabla de Propiedades de Medidor Dual ................................................................................... 78 Imagen 145 – Medidor Dinámico......................................................................................................................... 78 Imagen 146 - Tabla de Propiedades “Dynamic Gauge” ................................................................................ 79 Imagen 147 – Medidor Lineal Horizontal .......................................................................................................... 79 Imagen 148 - Tabla de Propiedades “Horizontal Linear Gauge” ................................................................ 80 Imagen 149 – Medidor Parabólico o Parabolic Gauge .................................................................................. 80 Imagen 150 - Tabla de Propiedades del Medidor Parabólico ...................................................................... 81 Imagen 151 – Medidor de Competición ............................................................................................................. 81 Imagen 152 - Tabla de Propiedades de Medidor de Competición. ............................................................. 82 Imagen 153 – Medidor Radial .............................................................................................................................. 82 Imagen 154 - Tabla de Propiedades del medidor Radial. ............................................................................. 83 Imagen 155 – Medidor Simple ............................................................................................................................. 83 Imagen 156 - Tabla de Propiedades de Medidor Simple .............................................................................. 84 Imagen 157 – Medidor Variable ........................................................................................................................... 84 Imagen 158 - Tabla de Propiedades de Medidor Variable. .......................................................................... 85 Imagen 159 – Medidor Lineal Vertical ............................................................................................................... 86 Imagen 160 - Tabla de Propiedades del Medidor Lineal Vertical ............................................................... 86 Imagen 161 - Borde ................................................................................................................................................ 87


8

Imagen 162 - Tabla de Propiedades de Borde ................................................................................................ 87 Imagen 163 - Canvas .............................................................................................................................................. 87 Imagen 164 - Tabla de Propiedades del Canvas ............................................................................................. 88 Imagen 165 – “Dock Panel” .................................................................................................................................. 88 Imagen 166 - Tabla de Propiedades de Dock Panel ....................................................................................... 88 Imagen 167 – Cuadrícula o “Grid” ...................................................................................................................... 88 Imagen 168 - Tabla de Propiedades del Grid ................................................................................................... 89 Imagen 169 - Grid Splitter ..................................................................................................................................... 89 Imagen 170 - Tabla de Propiedades del Grid Splitter .................................................................................... 89 Imagen 171 - Ink Canvas ....................................................................................................................................... 89 Imagen 172 - Tabla de Propiedades de Ink Canvas ....................................................................................... 90 Imagen 173 – “Stack Panel” ................................................................................................................................. 90 Imagen 174 - Tabla de Propiedades del Stack Panel ..................................................................................... 90 Imagen 175 – “Uniform Grid” .............................................................................................................................. 90 Imagen 176 - Tabla de Propiedades de “Uniform Grid”................................................................................ 90 Imagen 177 - Lupa .................................................................................................................................................. 91 Imagen 178 - Tabla de Propiedades Lupa ........................................................................................................ 91 Imagen 179 – “Viewport 3D” ................................................................................................................................ 91 Imagen 180 - Tabla de Propiedades “Viewport 3D” ....................................................................................... 92 Imagen 181 – “Wrap Panel” ................................................................................................................................. 92 Imagen 182 - Tabla de Propiedades de “Wrap Panel” .................................................................................. 92 Imagen 183 - Tabla de Propiedades Comunes de Indicadores .................................................................. 93 Imagen 184 – Indicador de Nivel de Cinco Estados ...................................................................................... 94 Imagen 185 – Propiedades del Indicador de Nivel de Cinco Estados ....................................................... 94 Imagen 186 – Indicador de Nivel de Tres Estados ......................................................................................... 94 Imagen 187 – Tabla de Propiedades del Indicador de Tres Estados ........................................................ 95 Imagen 188 – Columna Indicador de Cinco Estados ..................................................................................... 95 Imagen 189 - Tabla de Propiedades de la Columna Indicador de Cinco Estados ................................. 96 Imagen 190 – Columna Indicador de Tres Estados ....................................................................................... 96 Imagen 191 - Tabla de Propiedades Columna Indicador de Tres Estados .............................................. 96 Imagen 192 – Caja de Texto ................................................................................................................................. 97 Imagen 193 - Data Text Box Tabla de Propiedades ....................................................................................... 97 Imagen 194 – Control de Enumeración con Lista Desplegable .................................................................. 98 Imagen 195 - Tabla de Propiedades Control Enumeración ......................................................................... 99 Imagen 196 - Control de Enumeración de Elementos ................................................................................... 99 Imagen 197 - Tabla de Propiedades de Control Enumeración y Control de Enumeración de

Elementos ........................................................................................................................................................ 99 Imagen 198 – Barra de Estado ............................................................................................................................ 99 Imagen 199 – [Agregar] Elemento de la Barra de Estado .......................................................................... 100 Imagen 200 - Tabla de Propiedades de la Barra de Estado ....................................................................... 100 Imagen 201 – Control de Tipo Ficha ................................................................................................................ 101 Imagen 202 – Icono para [Agregar] Nueva Ficha ......................................................................................... 101 Imagen 203 - Tabla de Propiedades del Control de Tipo Ficha ................................................................ 102 Imagen 204 – Bandeja de Barra de Herramientas y Barras de Herramientas Asociadas. ................. 102 Imagen 205 - Tabla de Propiedades del Control Barra de Herramientas ............................................... 103 Imagen 206 – Control Vista de Arbol ............................................................................................................... 103 Imagen 207 - Tree View Item [Add] Icon ......................................................................................................... 103 Imagen 208 - Tabla de Propiedades Vista de Árbol ..................................................................................... 104 Imagen 209 – Etiqueta de Datos ....................................................................................................................... 105 Imagen 210 - Tabla de Propiedades de Etiquea de Datos. ......................................................................... 105 Imagen 211 – Etiqueta Genérica ....................................................................................................................... 106 Imagen 212 - Tabla de Propiedades Etiqueta Genérica .............................................................................. 106 Imagen 213 – Etiqueta Indicadora .................................................................................................................... 107 Imagen 214 - Tabla de Propiedades de la Etiqueta Indicadora. ................................................................ 107 Imagen 215 – Etiqueta de Función Varianza .................................................................................................. 107


9

Imagen 216 - Tabla de Propiedades de la Etiqueta de Función Varianza .............................................. 108 Imagen 217 – Tabla de Propiedades Comunes de los Visores LED ........................................................ 109 Imagen 218 - Visor de LED de Cinco por Siete ............................................................................................. 110 Imagen 219 - Tabla de Propiedades de Visor de LED de Cinco por Siete ............................................. 110 Imagen 220 – Luz LED ......................................................................................................................................... 110 Imagen 221 - Tabla de Propiedades de Luz LED .......................................................................................... 110 Imagen 222 - LED de Siete Segmentos ........................................................................................................... 112 Imagen 223 - Tabla de Propiedades de LED de Siete Segmentos. .......................................................... 112 Imagen 224 - LED de Dieciseis Segmentos. .................................................................................................. 112 Imagen 225 - Tabla de Propiedades de LED de Dieciseis Segmentos. .................................................. 113 Imagen 226 – Imagen Enlazable ........................................................................................................................ 114 Imagen 227 - Tabla de Propiedades de Imagen Enlazable ......................................................................... 114 Imagen 228 - Media Control ............................................................................................................................... 115 Imagen 229 - Tabla de Propiedades Media Control ..................................................................................... 115 Imagen 230 – “Video Text Block” ..................................................................................................................... 115 Imagen 231 - Tabla de Propiedades “Video Text Block” ............................................................................ 116 Imagen 232 – Navegador Web ........................................................................................................................... 116 Imagen 233 – Tabla de Propiedades de Navegador Web. .......................................................................... 116 Imagen 234 - Animated Fire ............................................................................................................................... 117 Imagen 235 - Tabla de Propiedades de Fuego Animado ............................................................................ 117 Imagen 236 - Control de Botón de Radio de Enumeración ........................................................................ 118 Imagen 237 – Tabla de Propiedades del Control Enumeración de Botón de Radio ........................... 118 Imagen 238 - Control de Elemento de Botón de Radio de Enumeración ............................................... 118 Imagen 239 - Tabla de Propiedades de Control de Elemento de Botón de Radio de Enumeración

.......................................................................................................................................................................... 119 Imagen 240 – Control de Puntuaciones .......................................................................................................... 120 Imagen 241 - Rat Tabla de Propiedades del Control de Puntuaciónes. ................................................. 120 Imagen 242 – Tabla de Propiedades Comunes de Motores y Ventiladores .......................................... 121 Imagen 243- Bomba Centrifugadora ................................................................................................................ 121 Imagen 244 - Tabla de Propiedades de Bomba Centrifugadora ............................................................... 122 Imagen 245 - Engranaje ....................................................................................................................................... 122 Imagen 246 - Tabla de Propiedades de Engranaje ....................................................................................... 122 Imagen 247 – Motor Pesado ............................................................................................................................... 123 Imagen 248 - Tabla de Propiedades Motor Pesado ..................................................................................... 123 Imagen 249 – Motor de Bobina Helicoidal ...................................................................................................... 123 Imagen 250 - Tabla de Propiedades Motor de Bobina Helicoidal ............................................................. 124 Imagen 251 – Rueda de Metal ............................................................................................................................ 125 Imagen 252 - Tabla de Propiedades de Rueda de Metal ............................................................................. 125 Imagen 253 – Rueda de Palas ............................................................................................................................ 125 Imagen 254 - Tabla de Propiedades Rueda de Palas .................................................................................. 126 Imagen 255 – Ventilador Simple ....................................................................................................................... 126 Imagen 256 - Tabla de Propiedades de Ventilador Simple ........................................................................ 126 Imagen 257 – Rueda Pequeña ........................................................................................................................... 127 Imagen 258 - Tabla de Propiedades de Rueda Pequeña ............................................................................ 127 Imagen 259 – Rueda Dentada ............................................................................................................................ 127 Imagen 260 - Tabla de Propiedades de Rueda Dentada ............................................................................. 128 Imagen 261 – Motor Cuadrado .......................................................................................................................... 128 Imagen 262 - Tabla de Propiedades Motor Cuadrado. ................................................................................ 128 Imagen 263 - Neumático...................................................................................................................................... 129 Imagen 264 - Tabla de Propiedades de Neumático ...................................................................................... 129 Imagen 265 – Aero Generador ........................................................................................................................... 129 Imagen 266 - Tabla de Propiedades de Aero Generador. ........................................................................... 130 Imagen 267 – Configurar Propiedades de Navegación en el Diseñador de ‘Mimics’ ......................... 131 Imagen 268 – Configuración de Propiedades de Navegación en el Diseñador de Aplicaciones. ... 132 Imagen 269 - Tabla de Propiedades Comunes de los Botones de Navegación. .................................. 133


10

Imagen 270 - Botón de Navegación de Funciones Clave ........................................................................... 133 Imagen 271 - Tabla de Propiedades de Botón de Navegación de Funciones Clave ........................... 134 Imagen 272 - Botón de Navegación de Gel “Atrás” ..................................................................................... 134 Imagen 273 - Tabla de Propiedades de Botón de Navegación de Gel “Atrás” ..................................... 134 Imagen 274 – Botón de Navegación de Gel ................................................................................................... 135 Imagen 275 - Tabla de Propiedades de Botón de Navegación de Gel. ................................................... 135 Imagen 276 - Botón de Navegación “Atrás” .................................................................................................. 135 Imagen 277 - Tabla de Propiedades de Botón de Navegación “Atrás” .................................................. 136 Imagen 278 – Borde de Navegación ................................................................................................................ 137 Imagen 279 - Tabla de Propiedades del Borde de Navegación ................................................................ 137 Imagen 280 – Botón de Navegación ................................................................................................................ 137 Imagen 281 - Tabla de Propiedades de Botón de Navegación. ................................................................ 138 Imagen 282 – Menú Desplegable de Navegación ......................................................................................... 138 Imagen 283 - Tabla de Propiedades del Menú Desplegable de Navegación ......................................... 138 Imagen 284 – Lista de Opciones de Navegación .......................................................................................... 139 Imagen 285 - Tabla de Propiedades de la Lista de Opciones de Navegación ...................................... 139 Imagen 286 – Tabla de Propiedades de Conductos y Depósitos. ............................................................ 140 Imagen 287 – Conector de Conductos ............................................................................................................ 140 Imagen 288 - Tabla de Propiedades de Conector de Conductos ............................................................. 141 Imagen 289 – Depósito Seccionado ................................................................................................................. 141 Imagen 290 - Tabla de Propiedades Deposito Seccionado ....................................................................... 141 Imagen 291 – Depósito Cilindrico..................................................................................................................... 142 Imagen 292 - Tabla de Propiedades de Depósito Cilíndrico ...................................................................... 142 Imagen 293 – Tubería en forma de codo ........................................................................................................ 142 Imagen 294 - Tabla de Propiedades Tubería en forma de codo. .............................................................. 142 Imagen 295 – Conducto Ajustable ................................................................................................................... 143 Imagen 296 - Tabla de Propiedades de Conducto Ajustable .................................................................... 143 Imagen 297 – Conducto Ajustable con Indicador de Flujo ........................................................................ 143 Imagen 298 - Tabla de Propiedades Conducto Ajustable con Indicador de Flujo ............................... 143 Imagen 299 – Tanque de Embudo .................................................................................................................... 144 Imagen 300 - Tabla de Propiedades del Tanque de Embudo. ................................................................... 144 Imagen 301 – Depósito con Indicador Vertical ............................................................................................. 144 Imagen 302 - Tabla de Propiedades del Depósito con Indicador Vertical ............................................. 145 Imagen 303 – Depósito Mezclador ................................................................................................................... 146 Imagen 304 - Tabla de Propiedades del Depósito Mezclador ................................................................... 146 Imagen 305 – Conducto Curvado Estandar ................................................................................................... 146 Imagen 306 - Tabla de Propiedades del Conducto Curvado Estandar ................................................... 147 Imagen 307 – Conducto Estandar .................................................................................................................... 147 Imagen 308 - Tabla de Propiedades del Conducto Estandar .................................................................... 147 Imagen 309 – Conducto Estandar con Indicador de Flujo ......................................................................... 147 Imagen 310 - Tabla de Propiedades del Conducto Estandar con Indicador de Flujo. ........................ 147 Imagen 311 – Conector Universal de Conductos ......................................................................................... 148 Imagen 312 - Tabla de Propiedades del Conector Universal de Conductor .......................................... 148 Imagen 313 - Válvula ............................................................................................................................................ 148 Imagen 314 - Tabla de Propiedades de la Válvula ........................................................................................ 149 Imagen 315 – Depósito Vessel .......................................................................................................................... 149 Imagen 316 – Depósito Vessel .......................................................................................................................... 149 Imagen 317 - Botón .............................................................................................................................................. 150 Imagen 318 - Combo Box.................................................................................................................................... 150 Imagen 319 – Elemento de Combo Box [Add] .............................................................................................. 150 Imagen 320 - Tabla de Propiedades de Añadir Elemento Combo ............................................................ 151 Imagen 321 - Lista................................................................................................................................................. 151 Imagen 322 - Añadir Elemento Lista ................................................................................................................ 152 Imagen 323 - Tabla de Propiedades Añadir Elemento Lista ...................................................................... 152 Imagen 324 - List View ......................................................................................................................................... 153


11

Imagen 325 - [Añadir] Elemento a la Vista de Lista ..................................................................................... 153 Imagen 326 - Tabla de Propiedades de Vista de Lista ................................................................................ 153 Imagen 327 - Menu ............................................................................................................................................... 154 Imagen 328 - [Añadir] Elemento a Menú ......................................................................................................... 154 Imagen 329 - Tabla de Propiedades de Menú ................................................................................................ 155 Imagen 330 – Panel de Propiedades cuando se selecciona un Control de Script. ............................. 155 Imagen 331 - Tabla de Propiedades del Control de Script ......................................................................... 155 Imagen 332 – Desplazamiento Decolorado .................................................................................................... 156 Imagen 333 - Tabla de Propiedades de Desplazamiento Decolorado ..................................................... 156 Imagen 334 - Marquesina .................................................................................................................................... 157 Imagen 335 - Tabla de Propiedades de la Marquesina................................................................................ 157 Imagen 336 – Visor de Canal RSS .................................................................................................................... 158 Imagen 337 - Tabla de Propiedades del Visor de Canal RSS .................................................................... 158 Imagen 338 - Tabla de Propiedades de las Formas Básicas ..................................................................... 159 Imagen 339 - Elipse .............................................................................................................................................. 159 Imagen 340 - Línea ............................................................................................................................................... 159 Imagen 341 – Objetos Utilizados en los Trazos ............................................................................................ 160 Imagen 342 - Polígono ......................................................................................................................................... 161 Imagen 343 – Polilinea ......................................................................................................................................... 161 Imagen 344 – Polígono y Lapiz Multilínea ...................................................................................................... 162 Imagen 345 - Rectangulo .................................................................................................................................... 162 Imagen 346 – Gráfica de Tendencia ................................................................................................................. 163 Imagen 347 - Tabla de Propiedades de la Gráfica de Tendencia ............................................................. 164 Imagen 348 - Línea Gráfica de Tendencia ...................................................................................................... 165 Imagen 349 - Tabla de Propiedades del Gráfico de Tendencia. ............................................................... 166 Imagen 350 – Barra de Desplazamiento.......................................................................................................... 167 Imagen 351 - Tabla de Propiedades de la Barra de Desplazamiento ...................................................... 167 Imagen 352 – Agregar Control WPF ................................................................................................................. 168 Imagen 353 – Ventana para localizar el control WPF .................................................................................. 168 Imagen 354 – Cuadro de Diálogo Exportar Tipo ........................................................................................... 168


12

Controles de Interfaz de Usuario El propósito de este documento es facilitar una visión general y referencias para los controles disponibles para la creación de “Mimics” en el Status Enterprise. La Tabla de Propiedades provista no es exhaustiva; son meramente representativas de las significativas propiedades que pueden ser modificadas para personalizar los controles en tus “mimics”. Las propiedades que no están definidas aquí están en el documento .NET para controles WPF. La “Toolbox” es muy extensa, y nos esforzamos por proveer controles para cada posible aplicación. Sin embargo, si se desean controles adicionales, el Diseñador de “Mimics” de Status Enterprise también soporta controles externos en WPF. Mientras la mayoría de los controles listados están disponibles en el Diseñador de “mimics” y en el Diseñador de Aplicaciones, algunos controles funcionan exclusivamente en uno u otro. Adicionalmente, solo un subconjunto de los controles disponibles son soportados en HTML 5 y pueden ser usados para ver los “mimics” en la Web.

La disponibilidad de cada control será listada inmediatamente bajo el nombre del control(p.e. DISEÑADOR DE

‘MIMICS’| DISEÑADOR DE APLICACIONES | HTML5).

Para una lista de terminos frecuentes, definiciones y abreviaturas, por favor mire la Parte 1 – Resumen y Conceptos Básicos


13

1 Propiedades Comunes de los Controles Aunque este documento describe las propiedades de cada control de forma individual, existen un gran número de propiedades comunes a muchos de estos controles. La siguiente tabla nos muestra estas propiedades comunes.

Nombre de la Propiedad Tipo Descripción

Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily FontFamily Configura la fuente de texto del control.

FontSize FontSize Configura el tamaño de la fuente.

FontWeight FontWeight Configura el grosor de la fuente. Foreground Brush Configura el color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico Left Double Configura la posicion del objeto en el

canvas. El valor por defecto es Left=0. Opacity Double Configura el factor de opacidad aplicado al

elemento. Top Double Configura la posición del objeto en el

lienzo. El valor por defecto es Top=0. Value Double Configura el valor del control. Width Double Configura el ancho del elemento. Los

cambios de estado son Auto y Numérico Workspaces String Asigna para qué Espacios de Trabajo será

visible este control. Para configurar varios Espacios de Trabajo se deben separa con “;”.

Imagen 1- Tabla de Propiedades Comunes


14

2 Controles 3D Un control 3D nos proporciona ilustraciones más complejas que mejoran la sensación del usuario. Los controles 3D están disponibles para todos los entornos de diseño de B-Scada pero no están disponibles para el entorno de ejecución de la pasarela Web.

2.1 Depósitos para Fluidos Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 2 – Depósitos para Fluidos

Los Depósitos para Fluidos, son un grupo de 3 tanques conectados. Cada depósito tiene una propiedad de valor mínimo y máximo así como un color individual y valor de nivel.


Tank1Brush Brush Asigna el color del fluido del Depósito1. Tank1Level Double Asigna el valor del Depósito1. Tank1Maximum Double Asigna el valor máximo del Depósito1. Tank1Minimum Double Asigna el valor mínimo del Depósito1. Tank1ShowLevel Boolean Oculta en fluido del Depósito 1. Tank2Brush Brush Asigna el color del fluido del Depósito2. Tank2Level Double Asigna el valor del Depósito2. Tank2Maximum Double Asigna el valor máximo del Depósito2. Tank2Minimum Double Asigna el valor mínimo del Depósito2. Tank2ShowLevel Boolean Oculta en fluido del Depósito 2. Tank3Brush Brush Asigna el color del fluido del Depósito3. Tank3Level Double Asigna el valor del Depósito3 Tank3Maximum Double Asigna el valor máximo del Depósito3. Tank3Minimum Double Asigna el valor mínimo del Depósito3. Tank3ShowLevel Boolean Oculta en fluido del Depósito 3.

Imagen 3 – Tabla de propiedades del grupo de Depósitos para Fluidos


15

2.2 Motor Pesado Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 4 – Motor Pesado

Esta es una representación visual en 3D de un motor pesado. Este control tiene el aspecto de un gran motor industrial. Las propiedades de datos Booleanos se suelen enlazar as la propiedad “IsOn”.


IsOn NullableBoolean Configura la posición "on" del control. ShowCutAway Boolean Cuando se selecciona, se cubre el interior del motor.

Imagen 5 – Tabla de propiedades del Motor Pesado

2.3 Motor de Bobina Helicoidal Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 6 – Vista 3D del Motor de Bobina Helicoidal

Esta es una representación visual en 3D del motor de bobina Helicoidal. Este control tiene el aspecto de un gran motor industrial. Las propiedades de datos Booleanos se suelen enlazar as la propiedad “IsOn”.


IsOn NullableBoolean Configura la posición "on" del control. ShowCutAway Boolean Cuando está marcado, se cubrirá el interior del motor.

Imagen 7 – Tabla de Propiedades del Motor de Bobina Helicoidal


16

2.4 Medidor Magnético de Fluidos Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 8 – Medidor Magnético de Fluidos

El medidor magnético de fluidos se conecta a un conducto y usa ondas magnéticas para determinar la frecuencia a la cual el fluido está moviéndose a través del conducto, por defecto la unidad es el Galón por minuto (GPM) pero se pueden seleccionar otras unidades.


IsOn NullableBoolean Determina si el valor está on u off. Cuando se configura off, no se muestra nada.

Maximum Double Asigna el valor máximo de flujo. Minimum Double Asigna el valor mínimo de flujo. Units String Asigna las unidades en que se mostrarán los

valores. Por defecto se muestra ‘GPM’ (Galones Por Minuto), estas unidades no tienen efecto sobre el valor.

Value Double Asigna el valor de nivel del Medidor.

Imagen 9 - Tabla de Propiedades del Medidor Magnético de Fluidos

2.5 Depósito de Fluidos Rectangular Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 10 – Depósito de Fluidos Rectangular

Se trata de un depósito en posición horizontal y con propiedades configurables de nivel y color del fluido.


FluidBrush Brush Asigna el color del fluido. Maximum Double Asigna el valor máximo del Depósito.


17

Minimum Double Asigna el valor mínimo del Depósito. WaterLevel Double Asigna el valor del Depósito. WaterTankShowLevel Boolean Cuando se selecciona oculta el fluido del depósito.

Imagen 11 - Tabla de Propiedades del Depósito de Fluidos Rectangular

2.6 Tanque de Agua Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 12 – Tanque de Agua

Es un Tanque orientado verticalmente con un valor de nivel configurable, así como color de fondo del fluido.


FluidBrush Brush Asigna el color del fluido del Tanque de Agua. Maximum Double Asigna el valor máximo del Tanque. Minimum Double Asigna el valor mínimo del Tanque. WaterLevel Double Asigna el valor de nivel del Tanque de Agua. WaterTankShowLevel Boolean Cuando se selecciona, se oculta el nivel de fluido.

Imagen 13 - Tabla de Propiedades del Tanque de Agua

2.7 Depósito en Torre para Fluidos Diseñador de ‘Mimics’| Diseñador de Aplicaciones


18

Imagen 14 – Depósito en Torre para Fluidos

Se posiciona verticalmente con valores configurables de nivel y de color de fluido.


FluidBrush Brush Asigna el color del Fluido del Depósito. Maximum Double Asigna el valor máximo del Depósito. Minimum Double Asigna el valor mínimo del Depósito. WaterLevel Double Asigna el valor de nivel del Depósito. WaterTankShowLevel Boolean Cuando se selecciona se oculta el nivel de fluido.

Imagen 15 - Tabla de Propiedades del Depósito en Torre para Fluidos


19

3 Alarmas Notifica al usuario de los cambios de estado en las propiedades del servidor. (Lea Parte 8 para información detallada sobre Alarmas.)

3.1 Control de Alarmas Diseñador de ‘Mimics’

Pueden mostrar información sobre alarmas y desviaciones.

Imagen 16 – Control de Alarmas


ButtonBackground Brush Configura el color del fondo de un Botón. ButtonBorderBrush Brush Configura el color del borde de un botón. ButtonBorderThickness Thickness Configura el grosor del borde de un botón. ButtonForeground Brush Configura el color del frontal del botón. ButtonHighlightBrush Brush Obtiene un ‘SolidBrush’ que es el color de

resaltado de un elemento 3-D. ButtonPadding Thickness Configura el relleno horizontal y vertical

dentro de su matriz. HeaderBackground Brush El pincel

The brush utilizado para pintar el fondo de la cabecera.

HeaderBorderBrush Brush Configura el color del fondo del borde de la cabecera del control.

HeaderBorderThickness Thickness Configura el grosor del borde de la cabecera del control.

HeaderPadding Thickness Configura el relleno horizontal y vertical dentro de su matriz.

RowBackground Brush Configura el pincel usado para pintar los fondos de las filas.

RowSelectedBackground Brush Configura el pincel para el fondo de las filas que está actualmente seleccionado.


20

RowSelectedForeground Brush Configura el pincel para el primer plano de las filas que está seleccionado.

SetUp NavigateParameters

Asigna la ruta de los documentos que se visualizarán.

Imagen 17 - Tabla de Propiedades del Control de Alarmas


21

4 Botones El Control Botón es un ‘ContentControl’, lo cual significa que puede contener tanto texto, como imágenes

o paneles. Un Botón de control reacciona con un ‘ButtonBase’. El evento al hacer clic se suele utilizar

con “code behind” para implementar funcionalidades personalizadas. Los botones de palanca están

normalmente enlazados a un valor Booleano.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color de fondo del control. BorderThickness Thickness Configura el grosor del borde del control. ClickMode ClickMode Configura que ocurre al hacer clic en el

evento. Content* Object Permite insertar texto u otros objetos en el

contenido. FocusBorderThickness Thickness El espesor del anillo de enfoque en el exterior

del botón. FocusBrush Brush Consigue o fija el pencil que aparecera en la

parte exterior del elemento cuando pasemos el cursor del ratón por encima.

FuenteFamily* FontFamily Configura la Familia de fuentes del Control. FontSize* FontSize Configura el tamaño de la fuente. FontStretch* FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground* Brush Configura el color del color del frontal. GlareBrush Brush Configura el brillo sobre todo el control. HorizontalContentAlignment*

HorizontalAlignment

Configura la alineación horizontal del contenido del control.

InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del

elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde

interior del elemento. RequiresSafetySwitch Checkbox Cuando se habilita, el botón o interruptor no

pueden ser accionados a menos que el botón de seguridad esté presionado. Esta propiedad puede ser utilizada únicamente mediante interruptores de seguridad y pantallas táctiles.

VerticalContentAlignment* VerticalAlignment

Configura la alineación vertical del contenido del control.

Imagen 18 - Tabla de Propiedades Comunes de Botones.

*Heredado, no se utiliza

4.1 Botón con Flecha Diseñador de Aplicaciones


22

Imagen 19 – Botón con Flecha

Se trata de un Botón con de tres tipos diferentes de flechas y en cualquier dirección cardinal: Arriba, Abajo, Derecha e Izquierda. Otras propiedades nos permiten editar la apariencia del botón.

Nombre de la Propiedad

Tipo Descripción

ArrowDesign ArrowDesign Configura el tipo de flecha que será mostrada. ArrowDirection ArrowDirection Configura la dirección de la fecha. PressedBrush Brush Color de fondo cuando se pulsa el botón.

Imagen 20 - Tabla de Propiedades del Botón Flecha

4.2 Interruptor Plano Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 21 – Interruptor Plano

Es un botón con hasta tres estados disponibles: IsChecked=True, IsChecked=False, IsChecked=Null. Este interruptor provoca un evento cuando se activa.


CornerRadius CornerRadius Configura el radio de la esquina del borde exterior del elemento.

IsChecked NullableBoolean La posición de ‘two-state’ del control. IsThreeState Boolean Activa los tres estados en el control. LeverBrush Brush Color de la palanca del control.


23

Imagen 22 - Tabla de Propiedades del Interruptor Plano

4.3 Botón de “Gel” Diseñador de Aplicaciones

Imagen 23 – Botón de Gel

El Control Botón de Gel añade un botón con un estilo de gel a la superficie de diseño. La funcionalidad

es tipicamente definida con “code-behind”.


Tipo Descripción

CornerRadius CornerRadius Configura el radio de la esquina del borde exterior del

elemento. Content Object Configura el contenido que aparecerá en el botón.

Imagen 24 - Tabla de Propiedades Botón de Gel

4.4 Botón de Gel de Repetición Diseñador de Aplicaciones

Imagen 25 – Botón de Gel de Repetición El Botón de Gel de Repetición añade un botón de repetición con un estilo de gel a la superficie de diseño. Al contrario que otros botones, los de repetición no necesitan ser clicados multiples veces para enviar multiples eventos, cuando mantenemos el botón pulsado se seguirán enviando pulsaciones de botón hasta que sea liberado.


Tipo Descripción

Content Object Configura el contenido que aparecerá en el botón


24


Delay Int32 Configura la cantidad de tiempo en milisegundos que el Botón de Repetición espera desde que es presionado, hasta que empieza las repeticiones.

Imagen 26 - Tabla de Propiedades Botón de Gel de Repetición

4.5 Botón de Gel de Palanca Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 27 – Botón de Gel de Palanca

El botón de gel de palanca es un botón con estilo tipo gel. Este control tiene dos estados, true/false.



IsChecked NullableBoolean Habilita dos estados como posiciones del control. IsThreeState Boolean Habilita tres estados como posiciones del control.

Imagen 28 - Tabla de Propiedades del Botón de Gel de Palanca

4.6 Botón Genérico Diseñador de Aplicaciones

Imagen 29 – Botón Genérico

Añade un botón a la capa de diseño que puede ser configurado a través de programación.


25


Content Object Configura el contenido que aparecerá en el botón. CornerRadius CornerRadius Configura el radio de la esquina del borde exterior del

elemento.

Imagen 30 – Tabla de Propiedades del Botón Genérico

4.7 Botón de Repetición Generico Diseñador de Aplicaciones

Imagen 31 – Botón de Repetición Genérico

Añade un botón a la capa de diseño que puede ser configurado a través de programación. A diferencia de otros botones, el botón de repetición no precisa que se haga clic multiples veces para generar multiples eventos; cuando se mantiene pulsado, continua enviando eventos hasta que se libere.


Content Object Configura el contenido que aparecerá en el botón. CornerRadius CornerRadius Configura el radio de la esquina del borde exterior del

elemento. Delay Int32 Configura la cantidad de tiempo en milisegundos en

que el Botón de Repetición esperará antes de que las repeticiones comiencen.

Imagen 32 - Tabla de Propiedades del Botón de Repetición Genérico

4.8 Botón de Conmutación Generico Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 33 – Botón de Conmutación Genérico


26

Tiene la posibilidad de configurarse con tres estados: IsChecked=True, IsChecked=Null, y IsChecked=False. Inicia un evento cuando se presiona. El color del botón cambia dependiendo de su estado (On, Off o Null).



IsChecked NullableBoolean Activa los dos estados del control. IsThreeState Boolean Activa los tres estados del control. PressedBrush Brush El fondo que aparece al presionarlo. PressedBrushState3 Brush El fondo que aparece cuando la

condición de tres estados está activa y el valor es Null.

Imagen 34 - Tabla de Propiedades Botón de Conmutación Generico

4.9 Botón Industrial de Presión Diseñador de Aplicaciones

Imagen 35 – Botón Industrial de Presión

Es un botón con acabado Hexagonal. La apariencia es distinta cuando se pulsa el botón.


Content Content Configura el contenido que aparecerá en el botón. PowerOffBrush Brush Color del botón cuando el estado es Off. PowerOnBrush Brush Color del botón cuando el estado es On.

Imagen 36 - Tabla de Propiedades Botón Industrial de Presión.

4.10 Botón Industrial de Repetición Diseñador de Aplicaciones


27

Imagen 37 – Botón Industrial de Repetición

Es un botón de repeticiones con acabado hexagonal. Este botón tiene una apariencia independiente

cuando se hace clic. Los botones de repetición permiten enviar con un solo clic, multiples eventos

mientras se mantiene pulsado, hasta que se suelte.


Content Object Configura el contenido que se mostrará en el botón. Delay Int32 Configura la cantidad de tiempo en milisegundos

que el botón espera antes de que empiece las repeticiones.

PowerOffBrush Brush El color del botón cuando el estado es Off. PowerOnBrush Brush El color del botón cuando el estado es On.

Imagen 38- Tabla de Propiedades del Botón Industrial de Repetición

4.11 Botón de Conmutación Industrial Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 39 – Botón de conmutación Industrial

Es un botón con acabado Hexagonal. Este botón tiene tres posibles estados: IsChecked=True, IsChecked=Null, y IsChecked=False. Este botón conmuta entre los estados cada vez que es presionado.


28


IsChecked NullableBoolean Activa dos posiciones del control. IsThreeState Boolean Activa las tres posiciones del control. PowerNullBrush Brush El color cuando está en el tercer estado. PowerOffBrush Brush El color cuando el estado es Off. PowerOnBrush Brush El color cuando el estado es On.

Imagen 40 - Tabla de Propiedades del Botón de Conmutación Industrial

4.12 Botón de Conmutación de Potencia Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 41 – Botón de Conmutación de Potencia

El Botón de Conmutación de Potencia es un control con el simbolo estándar de potencia en la cara del botón. Este control alterna entre estados de encendido y apagado cuando se pulsa. El simbolo de potencia cambia de color cuando el botón es presionado.



IsChecked NullableBoolean Activa las dos posiciones del control. IsThreeState Boolean Activa las tres posiciones del control. PowerNullBrush Boolean El color del símbolo de Potencia cuando está activo el

tercer estado. PowerOffBrush Brush Color del símbolo de Potencia cuando el control es Off. PowerOnBrush Brush Color del símbolo de Potencia cuando el control es On. Stroke Thickness Double Configura el grosor del trazo del fondo.

Imagen 42 – Tabla de Propiedades Botón de Conmutación de Potencia

4.13 Interruptor Conmutador Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5


29

Imagen 43 – Interruptor Conmutador

Es un control con tres estados: IsChecked=True, IsChecked=Null, IsChecked=False. Cada vez que se activa, se crea un nuevo evento.



IsChecked NullableBoolean Activa las dos posiciones del control. IsThreeState Boolean Activa las tres posiciones del control.

Imagen 44 - Tabla de Propiedades del Interruptor Conmutador

4.14 Botón de Seguridad

Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 45 – Botón de Seguridad

Se utiliza en pantallas táctiles, junto a otros botones e interruptores de tipo Botón Conmutador o

Interruptor Conmutador, donde sus propiedades deben ser configuradas para requerir en sus


30

propiedades el Botón de seguridad, entonces el interruptor Conmutador por ejemplo, únicamente podrá

ser activado si el botón de Seguridad se mantiene pulsado al mismo tiempo.



PressedBrush Brush Color de fondo cuando se pulsa el botón. IsFlicksEnabled Boolean Permite el uso de un gesto o un movimiento

rápido. Utilizado únicamente en una pantalla táctil compatible.

Imagen 46 – Tabla de Propiedades del Interruptor de Seguridad


31

5 Diagramas

Un Diagrama o Gráfico es una información con formato de tabla, gráfico o diagrama. Todos los gráficos son accesibles desde ambos diseñadores y todos los entornos excepto la Pasarela Web.

5.1 Diagrama de Barras Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 47 – Gráfico de Barras

El diagrama de barras permite la cración de un gráfico de barras y la habilidad de enlazar cada barra con el valor individual de una propiedad.


Header Object Asigna el título del gráfico. HeaderFontSize Double Asigna el tamaño de la fuente de la cabecera. RangeStart Double Asigna el valor inicial. RangeEnd Double Asigna el valor final. TickFrequency Double Asigna la frecuencia de las marcas. CornerRadius CornerRadius Asigna el ‘CornerRadius’. TickStroke Thickness Double Asigna el grosor del trazo. TickStroke Brush Asigna el trazo de la marca. TickStrokeDashArray DoubleCollection Asigna en conjunto de instrumentos en la marca.

Imagen 48 - Tabla de Propiedades de gráfico de Barras.


32

Imagen 49 - Barra [Añadir]

Los objetos barra son los responsables de suministrar datos a los gráficos de bara. La clase Barra incluye propiedades para configurar las características visuales al mostrar la barra.


Tipo Descripción

Caption String Asigna el título de la barra. CornerRadius CornerRadius Asigna el ‘CornerRadius’ de la barra. Value Double Asigna el valor de la barra.

Imagen 50 - Tabla de Propiedades [Añadir] Barra

5.2 Gráfico Mixto Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 51 – Gráfico Mixto


33

El gráfico mixto permite a los usuarios incluir un gráfico que incluya barras y líneas. Las barras y líneas serán añadidas como “hijos” del gráfico. El gráfico contiene eje-x y eje-y. Cualquier elemento ”hijo” añadido primero (barra o línea) usará la izquierda del eje-y.

Nombre de la Propiedad Tipo Descripción AxisTitle String Determina la etiqueta que aparecerá a lo largo

del eje-y- Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color de borde del fondo. BorderThickness Thickness Configura la anchura del borde. ChartMode Mode Determina cuando el gráfico mostado será de

líneas, barras o mixto. FontFamily FontFamily Configura la fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del frontal. Header Object Configura el contenido de la cabecera.

Imagen 52 - Tabla de Propiedades de Gráfico Mixto

5.2.1 [Añadir] Barra Mixta

Imagen 53 - [Añadir] Barra Mixta

Selecciona esta opcion para añadir una nueva barra a tu gráfico. Las barras son añadidas con un valor por defecto de 0, así que no son visibles en el gráfico hasta que su valor ha cambiado. Configura la propiedad <Posición> para fijar la localización de la barra a lo largo del eje-x. Si dos barras caen en la misma posición, se dibujarán juntas. Sino están en la misma posición pero están cerca, se dibujarán una detrás de la otra. La que tenga el valor más alto del eje-x será la que esté delante.


Background Brush Configura el color del fondo de la barra. Caption String Determina la etiqueta que aparece a lo largo

del color de la barra en la leyenda. Position Double Configura la posición de la barra a lo largo del

eje-x. Value Double Configura el valor actual de la barra.


34

Imagen 54 - Tabla de Propiedades [Añadir] Barra Mixta.

5.2.2 [Añadir] Línea Mixta

Imagen 55 – Icono de [Añadir] Línea Mixta

Selecciona esta opción para añadir una nueva línea al gráfico mixto. Las líneas usan un eje-y separado de las barras, pero barras y líneas están en el mismo eje-x.


Caption String Determina la etiqueta que aparece a lo largo del color de la barra en la leyenda.

Line Fill Brush Configura el pincel que define el color de la línea.

PointFill Brush Configura el pincel que define el color de relleno de la línea.

PointShape PointShape Configura la forma de los puntos que son puestos en el gráfico.

PointStrokeThicknes Thickness Configura el grosor de la línea. Value Double Configura el valor actual de la línea.

Imagen 56 - Tabla de Propiedades Línea Mixta

5.3 Gráfico de Pastel Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 57 – gráfico de Pastel

El gráfico de Pastel añadirá un pastel estándar a la superficie de diseño. Las piezas del pastel son añadidas al gráfico como “hijos”. Al contrario de otros gráficos, los de pastel no requieren eje-x y eje-y


35

para mostrar sus valores. Los valores son expresados en relación proporcional a las piezas del pastel. El tamaño y forma de cada pieza determina el valor que representa.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color que define el fondo del Control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily FontFamily Configura la fuente de texto del control.


FontStretch FontStretch Configura el grado en que una fuente se comprime o se expande en la pantalla.

FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. Header Object Configura el contenido de la cabecera del gráfico.

Imagen 58 - Tabla de Propiedades Gráfico de Pastel

5.3.1 [Añadir] Pieza de Pastel

Imagen 59 – Icono [Añadir] Pieza de Pastel

Selecciona esta opción para añadir una nueva pieza a tu gráfico de pastel. Usa el panel de propiedades

para configurar las opciones de color, etiqueta, y su valor actual.


Background Brush Configura el color de fondo de la pieza.

BorderBrush Brush Configura el color del borde del fondo.

Foreground Brush Configura el color del frontal. SectionName String Determina la etiqueta que aparece

a lo largo del color de la barra en la leyenda.

Value Double Configura el valor de la pieza.

Imagen 60 - Tabla de Propiedades [Añadir] Pieza de Pastel


36

5.4 Gráfico Apilado Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 61 – Gráfico Apilado

Un gráfico apilado está emparentado con un gráfico de barras, excepto que las barras representan valores que pueden estar apilados verticalmente para representar una suma de valores. Multiples grupos de valores apilados se pueden representar para el mismo gráfico.

5.4.1 [Añadir] Parte de Barra Apilada

Imagen 62 – Icono de [Añadir] Parte de Barra Apilada

Selecciona este icono para añadir una parte de barra apilada. Configura las propiedades para asignar

colores y valores a las partes, asi como asignarles un grupo específico si lo deseas.


Background Brush Configura el color del fondo del control. GroupName String Determina el grupo en el cual la parte de barra será

posicionada, y la etiqueta que aparecerá a lo largo del eje-x.

Value Double Configura el valor de la parte de barra para que esta aparezca en el gráfico.

Imagen 63 - Tabla de Propiedades Parte de Barra Apilada


37

6 Controles de Colección Un control de Colección representa una Colección de Objetos.

6.1 Colección Cuadrícula o ‘Grid’ Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 64 - Colección Cuadrícula o ‘Grid’

La Colección Cuadrícula o ‘Grid’ permite una manera simple, facil de leer y editable visualizar una

colección con sus propiedades y valores asociados. La configuración inicial para la colección es

establecida seleccionando <SetUp> en el panel de propiedades.

Imagen 65 – Cuadro de Diálogo Colección Cuadrícula o ‘Grid’

Un número de opciones son provistas dentro del cuadro de diálogo <SetUp>. De arriba a abajo, el check box Relativo determina cuando tu selección de Ruta de Lista de Objetos será relativa al “mimic” dentro del cual el control sea posicionado, o una ruta absoluta seleccionada del Árbol. El botón de la Ruta de la Lista de Objetos te permite navegar hasta la colección objetivo. Tendrás una opción para elegir cual de las propiedades disponibles quieres que se muestren en tu ‘grid’. El botón de navegación te permite elegir un “mimic” para ser mostrado cuando un usuario presiona el botón <Edit> en un control en


38

ejecución. Tu también puedes elegir cuando una columna es mostrada para los nombres asignados. Finalmente, tu puedes seleccionar el número de filas que deberían ser devueltas en ejecución.

La colección en ejecución provee de opciones de configuración adicionales, incluyendo la opción de opdenar la columna haciendo clc en la cabecera de la columna. Varios botones también son provistos en la ejecución.

Selecciona el botón <filtrar> para revelar un cuadro de dialogo para filtrar información de acuerdo con el criterio seleccionado.

Imagen 66 – Cuadro de Dialogo “Filtrar”

Crea tu filtro seleccionando una propiedad desde un menú desplegable, entonces selecciona un operador de comparación (=, <, >, etc.) y el valor objetivo. Puedes refinar el filtro utilizando operadores booleanos y añadiendo condiciones adicionales.

Elige <Evaluar> para testear la validez de tu filtro. Elige <OK> para aceptar el filtro y volver al ‘grid’. Elige <Cancelar> para deshacer todos los cambios.

El botón <Añadir> añadirá otra línea para crear otra condicion de filtrado. <Borrar> eliminará la condición seleccionada actualmente. <Clear> las eliminará todas.

Después de seleccionar <OK>, tu volverás al ‘grid’ con tu filtro etiquetado en la parte de arriba. Presiona <Go> para ejecutar el filtro.


39

Imagen 67 – Colección ‘Grid’ con un filtro añadido.

Opciones adicionales: <Añadir existente>, <Añadir>, y <Eliminar> permite añadir y eliminar los asignados al ‘grid’. El botón <Editar> recuperará el “mimic” que seleccionaste bajo opción del cuadro de diálogo <SetUp>, y puede ser usada para hacer cambios en la lista de asignados y sus valores en las propiedades.

Nombre de la Propiedad Tipo Descripción AddButtonVisibility Visibility Configura la visibilidad de la

interfaz de usuario de un botón Añadir.

ButtonBackground Brush Configura el color del fondo de un botón.

ButtonBorderBrush Brush Configura el color del borde del fondo de un botón.

ButtonBorderThickness Thickness Configura el grosor del borde de un botón.

ButtonForeground Brush Configura el color frontal de un botón.

ButtonHighlightBrush Brush Conigue un ‘SolidBrush’ que destaca el color de un elemento 3-D.

ButtonPadding Thickness Configura el relleno horizontal y vertical con su elemento “padre”.

EditButtonVisibility Visibility Configura la visibilidad de la interfaz de usuario de un botón Editar.

HeaderBackground Brush El pincel utilizado para pintar el fondo de la cabecera.

HeaderBorderBrush Brush Configura el color del borde del fondo de la cabecera del control.

HeaderBorderThickness Thickness Configura el grosor del borde de la cabecera del control

HeaderPadding Thickness Configura el relleno horizontal y vertical con su elemento “padre”.

RemoveButtonVisibility Visibility Configura la visibilidad de la interfaz de usuario de un botón Eliminar.

RowBackground Brush Configura el pincel usado para pintar los fondos de las filas.

RowForeground Brush Configura el color del frontal de las filas.

RowSelectedBackground Brush Configura un pincel para el fondo de las filas que estan actualmente selecionadas.

RowSelectedForeground Brush Configura un pincel para el frontal de las filas que están actualmente seleccionadas.

SetUp NavigateParameters Asigna la ruta de los documentos que se visualizarán.

ViewButtonVisibility Visibility Configura la visibildad de la interfaz de usuario (UI) de un botón de vista.


40

Imagen 68 - Tabla de Propiedades de Colección ‘Grid’


41

6.2 Árbol del Documento Diseñador de ‘Mimics’

Imagen 69 – Control Árbol del Documento

Este control permite añadir a tus “mimics” una lista colapsable de documentos que reside en tu modelo de datos. El control permite a los usuarios añadir nuevos documentos, así como eliminar o ver los existentes. Para configurar el control, selecciona <SetUp> en el panel de propiedades. Usa el cuadro de diálogo para apuntar tu control a una Ruta de Activo específica donde está tu documento. Es una buena práctica cuando creas un Modelo de Datos especificar una Vista particular que almacene todos los documentos del modelo. Cuando usas este control en ejecución, los botones cerca de la parte de abajo, permiten a los usuarios editar el Árbol de Documentos. Seleccionando <Abrir> para abrir un documento con la aplicación por defecto para ese documento. Seleccionando <Eliminar> borrará permanentemente el documento de todas las colecciones. Destacando la raíz del Árbol del Documento hará que el botón <Añadir> se active y se deshabiliten los botones de <Abrir> y <Eliminar>. Seleccionando <Añadir> navegarás hasta el documento que quieras añadir de tu modelo de datos.

Nombre de la Propiedad Tipo Descripción Background Brush Configura el pincel que describe el

fondo del control. BorderBrush Brush Configura el color tendrá el borde

del fondo del control. BorderThickness Thickness Configura el grosor del borde del

control. SetUp NavigateParameters Asigna la ruta de los documentos

que se visualizarán. ShowButtons Boolean Alterna la visibilidad de los

botones del control.

Imagen 70 - Tabla de Propiedades del Control Árbol de Documentos.


42

6.3 Control de Datos Históricos Diseñador de ‘Mimics’

Imagen 71 – Control Datos Históricos

El Control de Histórico muestra un histórico de un conjunto de valores de las propiedades. Una vez ha sido añadido a la superficie de diseño, el control se configura seleccionando <SetUp> en el panel de propiedades.

Imagen 72 – Configuración de Propiedades de la Colección del Control Histórico

El cuadro de diálogo de Configurar las Propiedades de la Colección permite que selecciones propiedades de las que quieres ver el histórico. Para “mimics” para un tipo de Activo, las propiedades pueden ser relativas al tipo asociado con el documento marcando el tipo de Activo. Si la propiedad es desmarcada, tu puedes seleccionar una propiedad sobre un Activo específico.


43

Haciendo Clic en el boton <Añadir> te permitirá seleccionar la propiedad para añadir a la lista.

Imagen 73 – Control Recogedor de Componentes Histórico

Cuando el “mimic” es mostrado en ejecución, el control mostraráel histórico de los elementos configurados para un periodo específico de tiempo desde el presente. La cantidad de histórico mostrado es configurado en el tiempo de diseñarlo con la propiedad “Periodo”.

Imagen 74 – Control Histórico


Tipo Descripción

AlternationCount Int32 Configura el número de contenedores de elementos alternos en el Control de Elementos, el cual habilita que los contenedores con elementos alternos tengan una única apariencia..

Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del fondo del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.

FontSize* FontSize Configura el tamaño de la fuente.


44

FontStretch* FontStretch Configura el grado en que una fuente se comprime o se expande en la pantalla.

FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. SetUp NavigateParameters Asigna la ruta de los documentos que se

visualizarán.

Imagen 75 - Tabla de Propiedades Control Histórico.


6.4 Control Lista de Fichas de Objetos Diseñador de ‘Mimics’ El control Lista de Fichas de Objetos, te permite abrir “mimics” para cada colección asignada a la vez y tiene los “mimics” posicionado en un control ficha. Las dos propiedades que necesitas especificar son la colección de elementos y el documento para abrir estos elementos. En el panel de Propiedades, selecciona <SetUp>. Recoge una colección asignada y un “mimic” para ser aberto para cada Activo.

Imagen 76 – Configuración de Propiedades de la Colección de Control Lista de Fichas de Objetos

El Control Lista de Fichas de Objetos esta diseñado para ser usado con “mimics” creados para un tipo específico. Cuando el “mimic” es mostrado con el Control Lista de Fichas de Objetos en él, el control abrirá cada colección con el “mimic”especificado.

Imagen 77 - Control Lista de Fichas de Objetos


45


Tipo Descripción


Imagen 78 - Tabla de Propiedades de Control Lista de Fichas de Objetos


46

6.5 Propiedad ‘Grid’ Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 79 – Propiedad ‘grid’ con Adornos Azules para redimensionamiento.

La propiedad ‘Grid’ muestra datos en un ‘Grid’ personalizable. Este Control se usará actualmente en el

activo por defecto, pero puede también apuntar a un componente “hijo” del activo actual usando una ruta

relativa. Una colección de ‘strings’ especifica los valores mostrados en la tabla.

Imagen 80 – Propiedad ‘Grid’ en ejecución

La propiedad ‘Grid’ es configurada seleccionando <SetUp> en el panel de propiedades. Usa el cuadro de

dialogo de <SetUp> para seleccionar el Activo o ruta hacia el Activo.


47

Imagen 81 – Cuadro de Dialogo de Instalación de la Propiedad ‘Grid’


Tipo Descripción

AlternationCount Int32 Configura el número de contenedores de elementos alternos en el Control de Elementos, el cual habilita que los contenedores con elementos alternos tengan una única apariencia.

Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del fondo del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.



FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del frontal. SetUp NavigateParameters Asigna la ruta de los documentos que se

visualizarán.

Imagen 82 - Tabla de Propiedades Propiedad ‘Grid’



48

7 Controles Comunes

A continuación hay una lista de controles comunes .NET 4.0 disponibles en Status. Los controles disponibles pueden variar para Aplicaciones Web. Por favor mira la documentación de Microsoft que se encuentra en www.msdn.com para más detalle sobre un control individual.

7.1 ‘Check Box’ Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 83 – ‘Check Box’

Las ‘Check boxes’ son buenas para grupos de elementos no exclusivos, donde más de un elemento en el grupo puede ser seleccionado al mismo tiempo. Las ‘Check boxes’ son tipicamente enlazadas a datos booleanos. En contraste al uso del botón de radio, donde la selección de un elemento se presenta como una opción ‘o’. Similar a un botón, la apariencia de una ‘Check Box’ y el comportamiento de sus propiedades puede ser cambiado. Éste es un ‘ContentControl’, para modificar el texto o contenido usa la propiedad Contenido.


Content Object Configura el contenido identificado en la Check Box

Foreground Brush Configura el color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico IsChecked Boolean Determina cuando un ‘box’ es seleccionado

por defecto. Left Double Configura la posición del objeto en el



canvas. El valor por defecto es Top=0. Width Double Configura el ancho del elemento. Los

cambios de estado son Auto y Numérico

Imagen 84 - Tabla de Propiedades ‘Check Box’

http://www.msdn.com/


49

7.2 Expansor Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 85 - Expansor

Un expansor es un control que organiza objetos y ofrece a los usuarios la capacidad de expandir o contraer el contenidos hacia un sentido definido.La propiedad Header se utiliza para poner una cabecera y puede ser un texto por ejempo u otro elemento WPF.

El contenido del expansor se configura en la propiedad de contenido y suele ser un Panel o una cuadrícula con sus elementos hijos. Importante: El control Expansor puede no funcionar correctamente si se configura la propiedad ‘Height’, asegurese que se configura como ‘Auto’.

Para visualizar el estado abierto y cerrado del control Expansor, use la propiedad ‘IsExpanded’.


Content Object Configura el contenido que será mostrado cuando se expanda el control.

Foreground Brush Configura el color del color del frontal. Header Object Configura el contenido de la cabecera. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico IsExpanded Boolean Determina si se expande o no por defecto. Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. Opacity Double Factor de opacidad aplicado al elemento. Top Double Configura la posición del objeto en el



Imagen 86 - Tabla de Propiedades del Expander


50

7.3 Deslizador Horizontal Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 87 – Deslizador Horizontal

Permite a los usuarios seleccionar el rango de valores moviendo el deslizador de un lado hacia el otro. El enlace a datos se realiza normalmente con la propiedad ‘Value’ de este control.


Fill Brush Configura el color del deslizador Foreground Brush Configura el color del color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico IsAnnotated Boolean Determina si se ponen etiquetas de medida. Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. Maximum Double Configura el valor máximo del Deslizador. Minimum Double Configura el valor mínimo del Deslizador. Opacity Double Configura el factor de opacidad aplicado al


canvas. El valor por defecto es Top=0. Value Double Configura el valor mostrado en el Deslizador. Width Double Configura el ancho del elemento. Los


Imagen 88 - Tabla de Propiedades del Deslizador Horizontal


51

7.4 Imagen Diseñador de Aplicaciones

Imagen 89 – Control de Imagen

El Control de imagen le permite colocar una imagen sobre el diseño. Se configura utilizando la propiedad

<Source>. Por defecto, la imagen se ajusta para completar el tamaño y forma del contenedor. Esta

opción puede ser configurada a través de la propiedad <Stretch>.


Height Double Configura la altura del elemento. Los cambios de estado son Auto y Numérico

Source ImageSource Configura el origen de la imagen que será mostrada. Stretch Stretch Configura como debe ajustarse la imagen. Width Double Configura el ancho del elemento. Los cambios de estado

son Auto y Numérico

Imagen 90 - Tabla de Propiedades del Control Imagen

7.5 Etiqueta Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 91 - Etiqueta

Es un control usado para etiquetar objetos en el documento XAML. Una etiqueta es un ‘ContentControl’, la propiedad de contenido acepta una cadena u otro elemento de WPF como contenido. En las aplicaciones Web, un control de tipo Caja de Texto se utiliza a menudo en lugar de una etiqueta.


Content Object Contenido mostrado por la etiqueta. Foreground Brush Configura el color del color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico Opacity Double Configura el factor de opacidad aplicado a

todo el elemento. Top Double Configura la posición del objeto en el

canvas. El valor por defecto es Top=0.


52

Width Double Configura el ancho del elemento. Los cambios de estado son Auto y Numérico

Imagen 92 - Tabla de Propiedades del Control Etiqueta

7.6 Campo de Password Diseñador de Aplicaciones

Imagen 93 – Campo de Password

El control de Campo de Password consiste en una caja de texto que acepta la introducción de datos por parte del usuario pero que visualmente oculta el contenido de los datos escrito para preservar la integridad del Password introducido.


Background Brush Configura un color de fondo del control. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numerico. Width Double Configura el ancho del elemento. Los


Imagen 94 - Tabla de Propiedades de Campo de Password

7.7 Barra de Progreso Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 95 – Barra de Progreso

La Barra de Progreso es un control con una animación en bucle pre configurada y es comúnmente utilizada para mostrar que una operación está realizándose en ese momento. La barra de progreso animada indica que el usuario debe esperar antes de realizar otra tarea.

Por defecto, la propiedad ‘IsIndeterminate’ no está seleccionada. Activandola, se habilitará la animación en la barra de progreso.

Otras propiedades utilizadas habitualmente para la Barra de Progreso, son Minimum, Maximum y Value.


Fill Brush Configura el color del relleno. Foreground Brush Configura el color del frontal. Height Double Configura la altura del elemento. Los



53

Left Double Configura la posición del objeto al canvas. El valor por defecto es Left=0.

Maximum Double Configura el valor máximo de la barra. Minimum Double Configura el valor mínimo de la barra. Opacity Double Configura el factor de opacidad aplicado al

elemento. Orientation Orientation Determina dependiendo de la barra de

progreso si estará orientada de forma Horizontal o Vertical.

Top Double Configura la posición del objeto en el canvas. El valor por defecto es Top=0.

Value Double Configura el valor actualmente mostrado por la barra.


Imagen 96 - Tabla de Propiedades de la Barra de Progreso

7.8 Caja de texto Enriquecido Diseñador de Aplicaciones

Imagen 97 – Caja de Texto Enriquecido

Caja de Texto Enriquecido representa una Caja de Texto que permite más opciones de formato para textos que una caja de texto estándar y facilita otras posibilidades de edición del control.


Background Brush Configura el color que describe el fondo del control.

SelectionBrush Brush Configura el color del texto cuando está seleccionado.

VerticalAlignment VerticalAlignment Configura la alineación vertical de características aplicada a este elemento cuando es compuesto dentro de un elemento “padre” como un panel o un control de elementos.

VerticalContentAlignment VerticalAlignment Configura la alineación vertical del contenido del control.

VerticalScrollBarVisibility ScrollBarVisibility Configura el valor que indica cuando la barra de desplazamiento vertical es mostrada.


Imagen 98 - Tabla de Propiedades Caja de Texto Enriquecido


54

7.9 Caja de Texto Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 99 – Caja de Texto

Una Caja de Texto es un control utilizado para la entrada y edición de texto. Las propiedades de este objeto están orientadas a Alineación, Ajuste de línea, Texto Multilínea, las cuales habilitan la posibilidad de trabajar con mayores secciones de texto.

La configuración del Texto introducido en las cajas de texto se realiza utilizando la propiedad ‘Text’. Este control se usa con frecuencia en lugar de utilizar controles de tipo Etiqueta en aplicaciones Web.


Foreground Brush Configura el color del color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. Maximum Double Configura el valor máximo de la barra. Minimum Double Configura el valor mínimo de la barra. Opacity Double Configura el factor de opacidad aplicado al

elemento. Text String Configura el contenido de la Caja de Texto. TextWrapping TextWrapping Determina el método de envolver el texto que

será empleado por el control. Top Double Configura la posición del objeto en el



Imagen 100 - Tabla de Propiedades de la Caja de Texto


55

7.10 Botón Conmutador Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 101 – Botón Conmutador

Es un control que lanza un evento específico cuando es accionado. Tiene hasta tres posibles estados: IsChecked=True, IsChecked=False, y IsChecked=Null, que se enlazan normalmente a valores Booleanos.


Content Object Contenido que será mostrado en el Botón. Foreground Brush Color del frontal del Control Botón. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico IsChecked Boolean Determina si el botón está seleccionado o no

por defecto. Left Double Configura la posición del objeto en el





Imagen 102 - Tabla de Propiedades del Botón Conmutador

7.11 Deslizador Vertical Diseñador de ‘Mimics’| Diseñador de Aplicaciones


56

Permite a los usuarios seleccionar el rango de valores moviendo el deslizador de abajo a arriba. El enlace a datos se realiza normalmente con la propiedad ‘Value’ de este control.


Fill Brush Define el color del deslizador. Foreground Brush Configura el color del color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico IsAnnotated Boolean Define si se muestran o no las etiquetas de

medida. Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. Maximum Double Configura el valor máximo del deslizador. Minimum Double Configura el valor mínimo del deslizador. Opacity Double Configura el factor de opacidad aplicado al


canvas. El valor por defecto es Top=0. Value Double Valor actual mostrado en el deslizador. Width Double Configura el ancho del elemento. Los


Imagen 104 - Tabla de Propiedades del Deslizador Vertical

Imagen 103 – Deslizador Vertical


57

8 Contenedores Permiten la agrupación de uno o más componentes.

8.1 Lupa Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 105 - Lupa

Magnifica el contenido del control cuando el ratón pasa por encima. Pueden ser configurados para mostrar diferentes niveles de aumento cambiando la propiedad ‘Scale’..


AnimationSpeed Double Velocidad en que se muestra el aumento. Left Double Configura la posición del objeto en el canvas. El

valor por defecto es Left=0. Scale Double Determina, a través de un múltiplo numérico (por

ejemplo; 2x el valor por defecto) el tamaño por el cual el contenido es aumentado.


Imagen 106 - Tabla de Propiedades de la Lupa


58

8.2 Control Tipo Placa Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 107 –Control Tipo Placa

Es un control con una cabecera y un contenido. Por defecto, el control tiene un aspecto plateado para acentuar o destacar contenido. Se pueden incluir otros objetos dentro de este control para darle una imagen más sofisticada.



GlareBrush Brush Configura el reflejo de todo el control. Header Object Configura los datos de la cabecera. HeaderBackground Brush Color del fondo de la cabecera. HeaderCornerRadius CornerRadius Configura el radio de la del borde de la

cabecera del elemento. HeaderFontFamily FontFamily Fuente utilizada en la cabecera. HeaderFontSize Double Tamaño de la fuente de la cabecera. HeaderFontStretch FontStretch Compresión o expansión de la fuente

de texto de la cabecera. HeaderFontStyle FontStyle Estilo de la fuente de la cabecera. HeaderFontWeight FontWeight Configura el grosor de la fuente

seleccionada en la cabecera. HeaderForeground Brush Color del frontal de la cabecera. HeaderHorizontalContentAlignment HorizontalAlignment Alineación horizontal de la cabecera. HeaderVerticalContentAlignment VerticalAlignment Configura la alineación vertical del

contenido de la cabecera.

Imagen 108 - Tabla de Propiedades del Control Tipo Placa


59

9 Cintas

9.1 Cinta Transportadora

Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 109 – Cinta Transportadora

La cinta transportadora es un control animado utilizado para simular cintas trasnportadoras. El

movimiento de la cinta se puede animar en todas las direcciones, así como la velocidad de la cinta o su

estado de activo o inactivo. El control permite la configuración de hasta cinco estado diferentes através

del color de la cinta.


AnimateOnRun Boolean Asigna si el control se animará al inicio. ApplyTransparencyOnStop Boolean Puede habilitarse la opción de opacidad

cuando la cinta esté parada. ArrowBackground Brush Asigna el color de fondo de las flechas de

dirección. BeltLeftDirection Boolean Asigna la dirección de la cinta y flechas. BeltSpeed Double Configura la velocidad de la cinta. HideArrowOnStop Boolean Esconde las flechas cuando la cinta está

parada. HideStatusOnStop Boolean La cinta volverá al Estado neutral cuando el

transportador se detiene. IsOn Boolean Configura cuando la cinta está en estado

encendido o apagado. ShowArrowTop Boolean Muestra u oculta las flechas de la cinta,

Superior, Medio o Inferior. ShowBackGroundTexture Boolean Muestra u oculta la textura de fondo de la

cinta. Status Boolean Activa el estado de la cinta del 1 al 5. StatusColor Brush Asigna el color de fondo de cada uno de los 5

estados.

Imagen 110 - Tabla de Propiedades de la Cinta Transportadora


60

10 Controles de Administración de Datos

10.1 Botón de Cambio de Componente Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 111 – Botón de Cambio de Componente

Si se configuran sus componentes para actuar con las cuentas de usuario u otro tipo de ‘Activos’, se podría utilizar el componente para cambiar de usuario.



Increment Double La cantidad que se incrementará cada vez que se presione el botón.

PressedBackground Brush El fondo que aparece cuando se presiona el botón. SetUp NavigateParameters Asigna la ruta de los documentos que se visualizarán. Value Double Configura el valor actual del control.

Imagen 112 - Tabla de Propiedades del Botón de Cambio de Componente

Para configurar el Botón de Cambio de Componente, seleccione la propiedad <Set Up> y especifique la propiedad que el botón modificará cuando se accione.


61

Imagen 113 – Configuración del Botón Cambio de Componente

En ejecución, cuando se hace clic sobre el Botón, aparece la ventana de selección de usuario permitiendo que se seleccione un nuevo usuario para la propiedad específica.

Imagen 114 – Selección de Usuario en el Botón de Cambio de Componente

10.2 Botón de Gel de Cambio de Componente Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 115 – Botón de Gel de Cambio de Componente


62

El botón de Cambio componentes del Gel tiene la misma funcionalidad que el componente botón visto anteriormente, pero tiene un aspecto de tipo gel.




InnerBorderBrush* Brush Configura el color del borde interior. InnerBorderThickness* Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. SetUp NavigateParameters Asigna la ruta de los documentos que se

visualizarán. Value Double Configura el valor actual del control.

Imagen 116 - Tabla de Propiedades del Botón de Cambio de Componente de Tipo Gel


10.3 Botón para Crear Objeto Diseñador de ‘Mimics’

Imagen 117 – Botón para Crear Objeto

El botón Crear objeto le permite crear un nuevo objeto en el modelo de objetos, agréguelo a una colección de un activo y, opcionalmente, abrir un documento con el objeto recién creado. Este control puede ser útil para crear órdenes de trabajo.




PressedBackground Brush El fondo que se muestra cuando se presiona el Botón. SetUp NavigateParameters Asigna la ruta de los documentos que se visualizarán. Value Double Configura el valor actual del control.

Imagen 118 - Tabla de Propiedades del Botón de Crear Objeto


63

Para configurar el botón de Crear Objeto, seleccione la propiedad <Set Up> del panel.

Imagen 119 – Ventana Setup de las propiedades del Botón de Crear Objeto

Configuración para Crear Objeto:

‘New Object Type’ – El nuevo tipo de objetos a crear.

‘New Object Name’ – Nombre del nuevo objeto. Puede ser un nombre fijo, auto genreado o puede ser introducido por el usuario desde un control de tipo Caja de texto.

‘Object List’ – El nuevo objeto será añadido a una colección definida.

‘Document to Open’ – Una nueva propiedad se puede configurar para mostrar un ‘Mimic’ con el nuevo Activo creado.

10.4 Botón de Gel para Crear objetos Diseñador de ‘Mimics’

Imagen 120 – Botón de Gel para Crear Objetos

Es muy similar al Botón para crear Objetos pero con aspecto de Gel.




InnerBorderBrush* Brush Configura el color del borde interior. InnerBorderThickness* Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. SetUp NavigateParameters Asigna la ruta de los documentos que se mostrará.


64

Value Double Configura el valor actual del control.

Imagen 121 - Tabla de Propiedades del Botón de Gel para Crear Objetos



65

11 Controles de Fecha y Hora

Un control de Fecha y Hora, permite que el usuario seleccione la fecha y la hora, y la muestre con

formato específico.


Background Brush Color de fondo del control. BorderBrush Brush Color del borde exterior del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily FontFamily Configura la fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Configura el grado en que una fuente de texto

es comprimida o expandida. FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color que describe el color del

frontal. GlareBrush Brush Configura el reflejo de todo el control. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 122 - Tabla de Propiedades de Fecha y Hora


11.1 Reloj Analógico Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 123 – Reloj Analógico

El reloj Analógico está diseñado para simular un reloj estándar que automáticamente muestra la hora configurada en el PC donde se ejecuta en un formato analógico.


CenterCapBorderBrush Brush Color del borde exterior.


66

CenterCapBrush Brush Color de la tapa del centro. Content Object Permite configurar texto como contenido. HourOffset Integer Número de horas de diferencia (basadas en la hora

del sistema donde se ejecuta). NeedleBrush Brush El color asignado a la manecilla de las horas. SecondsNeedleBrush Brush El color asignado a la manecilla de los segundos. TickBorderBrush Brush Color del borde de los marcadores. TickBrush Brush Color de los marcadores. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido del

control.

Imagen 124 - Tabla de Propiedades del Reloj Analógico


11.2 Calendario Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 125 - Calendario

Proporciona una representación gráfica de un calendario de papel estándar con fechas que son seleccionables en tiempo de ejecución. La fecha actual es mostrada por defecto en un formato estándar mensual, pero puede ser cambiada para mostrar por el año o por la década. Otras opciones de configuración incluyen su opción de la familia de fuentes, tamaño y peso, así como color de fondo. Este control típicamente se enlaza a la propiedad DisplayDate para un elemento de datos que es un tipo de datos de fecha.


DisplayDate

TimeDate

Configura la fecha que se mostrará por defecto.

DisplayMode DisplayMode Permite mostrar la fecha por Mes, Año o década.

FirstDayOfWeek FirstDayOfWeek Permite la elección de cual es el primer día de la semana cuando se visualiza el calendario en modo mensual.


67

Imagen 126 - Tabla de Propiedades del Calendario

11.3 Selector de Fecha Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 127 – Selector de Fecha

El control de selector de fecha, permite al usuario selecciona una fecha específica desde un calendario desplegable. Cuando se hace clic sobre el control, un calendario interactivo aparece y permite al usuario seleccionar la fecha que se mostrará en la caja de texto. El calendario tendrá la fecha actual seleccionada por defecto a menos que se configure lo configuradp como tipo de datos fecha.


DisplayDate TimeDate Configura la fecha que será mostrada por defecto. FontFamily FontFamily Configura la fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente del control. IsEnabled Boolean Determina si al usuario se le permitirá o no

seleccionar una fecha. IsTodayHighlighted Boolean Define si la fecha actual se muestra por defecto.

Imagen 128 - Tabla de Propiedades del Selector de Fecha

11.4 Panel de Fecha y Hora Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 129 – Panel de Fecha y Hora


68

Es un reloj que puede mostrar fecha y hora mediante una serie de opciones predefinidas. Elija entre la sencillez de una pantalla de formato corto (29/02/08 10:03) al formato largo detallado (viernes, 29 de febrero de 2008 10:03:54) para satisfacer sus necesidades. Puede rellenar el contenido, con la propiedad DateTimeFormat.


CornerRadius CornerRadius Configura el radio del borde de la esquina exterior del elemento.

DateTimeFormat String Configura el formato de Fecha/Hora con String. DateTimeFormats DateTimeFormats Configura la Fecha/Hora de (alfanumerico) en una

lista desplegable. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del

elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina for el borde

interior del elemento. UpdateRate Double La tasa, en milisegundos, que la visualización del

tiempo actualiza su texto.

Imagen 130 - Tabla de Propiedades del Panel de Fecha y Hora

11.5 Control de Tiempo Transcurrido Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 131 – Conrol de Tiempo Transcurrido

El Control de Tiempo Transcurrido provee una actualización textual dinámica de la representación del tiempo que ha pasado desde la última actualización de un elemento. La propiedad ‘LastUpdateTime’ puede ser configurada en el panel de propiedades, y el texto del control se actualizará automáticamente para reflejar la diferencia entre el ‘LastUpdateTime’ y el tiempo actual en el reloj del ordenador del usuario. Las opciones de configuración también son provistas para la fuente, tamaño, estilo y peso. Este control es tipicamente enlazado de la propiedad ‘LastUpdateTime’ al sello de tiempo de un elemento.


LastUpdateTime CornerRadius Configura el tiempo exacto usado para determinar cuanto ha pasado.

FontFamily FontFamily Configura la fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente del control. FontWeight FontWeight Configura el peso de la fuente del control. Foreground Brush Configura el color del frontal


69

Imagen 132 - Elapsed Time Control Tabla de Propiedades


70

11.6 Control de Hora Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 133 – Control de Hora

Poniendo un Control de Hora en la superficie de diseño añadirá un interfaz de reloj digital a tu “mimic”. Este control no controla el tiempo, pero permite que la hora sea editada durante la ejecución- Usa los botones de flechas en el lado para ajustar el control de la hora, minutos y segundos, y para alternar entre AM y PM.


BorderBrush Brush Configura el color del borde del fondo del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily FontFamily Configura la fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Configura el grado en que una fuente se comprime

o se expande en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del frontal. Time Time Configura la hora inicial que será mostrada.

Imagen 134 - Tabla de Propiedades Control de Hora


71

12 Diagnostico Permiten agregar un registro visible de actividad del servidor a sus ‘Mimics’


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily FontFamily Configura la fuente de texto del control.


FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. Height Double Configura la altura del elemento. Los cambios

de estado son Auto y Numérico Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. Top Double Configura la posición del objeto en el

canvas. El valor por defecto es Top=0. Width Double Configura el ancho del elemento. Los cambios

de estado son Auto y Numérico

Imagen 135 - Tabla de Propiedades de los Controles de Diagnóstico

12.1 Control de Log de Actividad Diseñador de Aplicaciones

Imagen 136 – Control de Log de Actividad

Muestra mensajes de comunicación con diferentes servidores. Si su diseño‘Mimic’ está teniendo

problemas para conseguir datos de buena calidad o no se puede conectar a un servidor en tiempo de

ejecución, la información será mostrada en el Control de registro de actividad.


ClearCaption String Texto que aparece en el Botón de Limpiar. Header String Texto que aparece en la cabecera. Tag Object Valor del objeto que puede ser utilizado para

almacenar información. ToolTip Object Configura el contenido del ‘ToolTip’.


72

Imagen 137 - Tabla de Propiedades de Control de Log de Actividad


73

13 Documentos

La sección de documentos provee controles para l portabilidad, la alta fidelidad, fijar formato de los

documentos con acceso de lectura para selección de texto de los usuarios, navegación de teclado y

búsqueda.

13.1 Visor de Documentos Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 138 – Visor de Documentos

El control del Visor de documentos es usado para ver el contenido ‘FixedDocument’ (Como Documentos ‘XML Paper Specification (XPS)’) en un formato paginado. El Visor de Documentos es configurado enlazando la propiedad ‘Documento’ del control a la propiedad contenido de un Archivo de Usuario en el modelo de Datos, o enlazando la propiedad ‘Source’ a una propiedad ‘String’ del modelo de datos. La propiedad ‘String’ será la ruta al documento deseado. Esta ruta debe ser accesible por la estación de trabajo cliente.


Background Brush Configura el color del fondo del control. BorderBrush Brush Color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily FontFamily Configura la fuente de texto del control.


FontWeight FontWeight Grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. Height Double Configura altura del elemento. Los cambios de

estado son Auto y Numérico Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. Top Double Configura la posición del objeto en el

canvas. El valor por defecto es Top=0. Width Double Configura el ancho del elemento. Los cambios

de estado son Auto y Numérico

Imagen 139 - Tabla de Propiedades del Visor de Documentos

13.2 Enlace a Documentos Diseñador de ‘Mimics’| Diseñador de Aplicaciones


74

Imagen 140 – Enlace a Documentos

Permite insertar un enlace clicable que puede usarse para abrir un documento especificado usando la aplicación predeterminada para el documento. Use la propiedad <SetUp> del panel para definir la ruta de los Activos donde se encuentran los documentos a mostrar.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color de fondo del control. BorderThickness Thickness Grosor del borde del control. ContentStringFormat Object Permite insertar texto en el contenido. FontFamily FontFamily Configura la fuente de texto del control.


FontWeight FontWeight Grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. Height Double Configura la altura del elemento. Los

cambios de estado son Auto y Numérico Left Double Configura la posición del objeto en el

canvas. El valor por defecto es Left=0. SetUp NavigateParameters Asigna la ruta de los documentos que se

visualizarán. Top Double Configura la posición del objeto en el



Imagen 141 - Tabla de Propiedades del Enlace de Documentos


75

14 Medidores

Es un tipo de control que Asigna y muestra gráficamente un valor de un rango continuo de posibles

valores seleccionados por el usuario. Todos los controles están disponibles para los diseñadores de B-

scada y accesible en todos los entornos de ejecución.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. CornerRadius CornerRadius Configura el radio de la esquina del borde

exterior del elemento. FontFamily* FontFamily Configura la fuente de texto del control.


FontStretch* FontStretch Compresión o expansión de la fuente. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente

seleccionada. Foreground Brush Configura el color del color del frontal. HorizontalContentAlignment** HorizontalAlignment Configura la alineación horizontal del

contenido del control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. StrokeThickness Double Configura el grosor de la línea de fondo. Value Double Configura el valor actual del control. VerticalContentAlignment** VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 142 - Tabla de Propiedades de los Medidores

* Las propiedades de fuente primaria aplican a valores principales **Heredado, no se utiliza

14.1 Doble Medidor Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 143 – Doble Medidor

Es un tipo de medidor con la capacidad de mostrar dos variables diferentes desde dentro del mismo objeto. El medidor contiene dos agujas, dos unidades de marcado y dos anillos de graduación. El valor predeterminado para el control es ‘Value’. Los usuarios pueden también enlazar a la propiedad ‘InnerValue’.


76


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Leyenda de colores del medidor principal. CaptionFontFamily FontFamily Configura la fuente de Texto para el título del

principal medidor. CaptionFontSize FontSize Configura el tamaño de la fuente para el título del

principal Medidor. CaptionFontStretch FontStretch Configura el grado para los cuales la fuente es

condensada o expandida para el título del principal medidor.

CaptionFontStyle FontStyle Configura el estilo de la fuente de texto para el título del principal indicador.

CaptionFontWeight FontWeight Configura el grosor de la fuente seleccionada para el título del principal medidor.

CenterCapBorderBrush Brush Pincel de borde para el borde exterior de la capa central.

CenterCapBrush Brush El pincel que pinta la capa central. GlareBrush Brush Configura el resplandor sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCaption String Permite la inserción del texto de la leyenda interior. InnerCaptionBrush Brush El pincel que pinta la leyenda más interna. InnerCaptionFontFamily FontFamily El estilo de fuente del texto de las leyendas más

interna. InnerCaptionFontSize FontSize El tamaño, en términos numéricos, de la fuente de

texto del texto de la leyenda más interna. InnerCaptionFontWeight FontWeight El grosor de la fuente de teto de la leyenda más

interna. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. InnerFontFamily FontFamily El estilo de fuente de los números en el medidor

interno. InnerFontSize FontSize El tamaño, en términos numéricos, de La Fuente

de texto de los números en el medidor interno. InnerFontStretch FontStretch Se condensa o se expande el texto utilizado en los

números en el indicador interno. InnerFontStyle FontStyle El estilo de la fuente para los números en el

medidor interno. InnerFontWeight FontWeight En grosor de la fuente en el medidor interno. InnerForeground Brush El pincel utilizado para el contenido basado en

texto del medidor interior. InnerMaximum Double Configurar el umbral máximo para el medidor

interior. InnerMinimum Double Configurar el umbral mínimo para el medidor

interior. InnerNeedleBrush Brush El pincel que pinta la aguja para el medidor

interior. InnerNeedleThickness Double Configura el grosor del borde exterior de la aguja

para el medidor interior. InnerTickBrush Brush El pincel que pinta las marcas del calibre interior. InnerTickRingBrush Brush El pincel que pinta la marca de anillo del medidor

interior. InnerTicks String Configura las posisiones de las marcas a mostrar

en el medidor interior.


77

InnerValue Double Asigna la magnitud actual del rango de control para el medidor interior.

NeedleBrush Brush El pincel que pinta la aguja del medidor externo. NeedleThickness Double El espesor del borde exterior de la aguja en el

medidor exterior. TickBrush Brush El pincel que pinta las marcas en el indicador

exterior. TickRingBrush Brush El pincel que pinta la marca de anillo del medidor

exterior. Ticks String Un string de valores alfanuméricos delimitados por

semicomas p.e.; "1;2;3" o "bajo;medio; alto".

Imagen 144 - Tabla de Propiedades de Medidor Dual

14.2 Medidor Dinámico Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 145 – Medidor Dinámico

Un Medidor Dinámico o “DynamicGauge” es un tipo de medidor lineal con la habilidad de mostrar valores desde la izquierda hasta la derecha y desde el centro. El control tiene dos umbrales que te permiten coger donde el relleno cambia de color. *Cuando usamos la opción desde el centro el control automáticamente ajustará tu “ColorThreshold2” para los lados derecha e izquierda del centro.


Tipo Descripción

ColorThreshold1 Double El porcentaje entre el mínimo y el máximo donde el control cambiará el medio del relleno.

ColorThreshold2 Double El porcentaje entre el mínimo y el máximo donde el control cambiará el alto del relleno.

FillDirection Enum Cambia la dirección del relleno en el control(Izquierda, Derecha y Centro).

HighFill Brush Configura el color que describe el relleno alto del control.

InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. LowFill Brush Configura el color que describe el relleno bajo del

control. MediumFill Brush Configura el color que describe el relleno medio del

control.


78

MidValue* Double Configura el valor medio cuando usamos la dirección central del relleno.

TitleTextColor Brush Configura el pincel que colorea el título del control. UnitFontSize FontSize Configura el tamaño de la fuente. UnitText String Configura la Unidad de Texto del Control.

UnitTextColor Brush Configura el pincel que colorea la unidad de texto del control.

ValueBackgroundColor Brush Configura el color de fondo color detrás del valor del control.

ValueFormat String Configura el formato string del valor del control.

Imagen 146 - Tabla de Propiedades “Dynamic Gauge”


14.3 Medidor Lineal Horizontal o “Horizontal Linear Gauge” Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 147 – Medidor Lineal Horizontal

El “HorizontalLinearGauge” es un control que muestra un medidor personalizable orientado horizaontalmente, con una salida numérica.


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Configura the color del título del medidor. FluidBorderBrush Brush Configura el color del borde usado para pintar el

contenido exterior del fluido. FluidBrush Brush Configura el pincel usado para pintar la porción de

fluido del control. FluidCornerRadius CornerRadius Configura el radio de la esquina usado para pintar

el contenido del exterior del fluido. FluidOpacityBrush Brush Configura nivel de opacidad del fluido. GlareBrush GlareBrush Configura el brillo sobre todo el control. InnerBackground Brush Configura el fondo del indicador (porción sin

fluido). InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento.


79

IsNumbersVisible Boolean Configura un valor indicando cuando los números conrresponden a las marcas que son mostradas.

TickBrush Brush El pincel que pinta las marcas incrementales. TickFrequency Double Configura la distancia relativa del rango de valores

en el cual debería redactarse. El periodo es basado en el valor mínimo. Ejemplo: Una frecuencia de 1 y un mínimo de 0 causará que una marca sea ùesta en la marca de 0 y en cada número entero sin marca hasta llegar al máximo.

TickPlacement Enum Configura la posición de las marcas con respecto a la trayectoria.

Ticks DoubleCollection Configura las posiciones de las marcas para mostrar.

Imagen 148 - Tabla de Propiedades “Horizontal Linear Gauge”

14.4 Medidor Parabólico o “Parabolic Gauge” Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 149 – Medidor Parabólico o Parabolic Gauge

Un medidor Parabólico es un tipo de medido radial que mide un conjunto numérico establecido en un área de semicirculo.


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Leyenda de colores del medidor principal. CaptionFontFamily FontFamily Configura la fuente de texto para la leyenda del

medidor principal. CaptionFontSize FontSize Configura el tamaño de la fuente para la leyenda

del medidor principal. CaptionFontStretch FontStretch Configura el grado a la que una fuente se

comprime o se expande en el título principal del medidor.

CaptionFontStyle FontStyle Configura el estilo de la fuente de texto para la leyenda del medidor principal.

CaptionFontWeight FontWeight Configura el grosor de la fuente seleccionada para la leyenda del medidor principal.

CenterCapBorderBrush Brush Pincel del borde exterior de la tapa central. CenterCapBrush Brush El pincel que pinta la tapa central. GlareBrush Brush Configura el brillo sobre todo el control.


80

InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. NeedleBrush Brush El pincel que pinta la aguja del medidor externo. NeedleThickness Double El espesor del borde exterior de la aguja en el

medidor. TickBrush Brush El pincel que pinta las marcas en el indicador

exterior. TickRingBrush Brush El pincel que pinta las marcas de anillo en el

indicador exterior. Ticks String Un String de valores alfanuméricos separado por

semicomas p.e.; "1;2;3" or “bajo;medio;alto”.

Imagen 150 - Tabla de Propiedades del Medidor Parabólico

14.5 Medidor de Competición o “Racing Gauge” Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 151 – Medidor de Competición

Un medidor de competición es un tipo de medidor radial que muestra una cantidad fijada en dos diferentes formatos. Este medidor contiene un visualizador de “estilo metro” así como una aguja, un conjunto de marcas y de marcas de anillo.


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Configura el color para el título del principal

indicador. CaptionFontFamily FontFamily Configura la fuente de texto para el título del

principal indicador. CaptionFontSize FontSize Configura el tamaño de la fuente para el título del

principal indicador. CaptionFontStretch FontStretch Configura el grado a la que una fuente se

comprime o se expande en el título del principal indicador.


81

CaptionFontStyle FontStyle Configura el estilo de la fuente de texto para el título del principal indicador.

CaptionFontWeight FontWeight Configura el grosor de la fuente seleccionada para el título del principal indicador.

CenterCapBorderBrush Brush C epillo del borde exterior de la tapa central. CenterCapBrush Brush El pincel que que pinta la tapa central. GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. MeterBackgroundBrush Brush El pincel que pinta el medidor de fondo. MeterBorderBrush Brush El pincel que pinta el medidor del borde. MeterFontFamily FontFamily La fuente tipo aplicada al medidor. MeterFontSize FontSize El tamaño numérico de la fuente del medidor. MeterFontStretch FontStretch Condensa o Expande la fuente de texto del

medidor. MeterFontStyle FontStyle Configura el estilo de la fuente de texto del texto

del anillo del medidor. MeterFontWeight FontWeight Configura como de ancho o estrecho debe de ser

la fuente del medidor. MeterForeground Brush El pincel que pinta los valores del medidor. NeedleBrush Brush El pincel que pinta la aguja del medidor externo. NeedleThickness Double l espesor del borde exterior de la aguja en el

medidor externo. TickBrush Brush El pincel que pinta las marcas en el indicador

exterior. TickRingBrush Brush Ek pincel que pinta las marcas de anillo del

medidor exterior. Ticks String Un String de valores alfanuméricos delimitados por

semicomas p.e.; “1;2;3” o “bajo;medio;alto”.

Imagen 152 - Tabla de Propiedades de Medidor de Competición.

14.6 Medidor Radial Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 153 – Medidor Radial


82

Un Medidor Radial es un tipo de medidor con la habilidad de mostrar un valor en dos maneras diferentes dentro del mismo indicador. El control medidor radial mostrará el valor numérico en el centro y mostrará el valor no numérico en el anillo exterior.


ColorThresholdPrecentage Double El porcentaje entre el mínimo y el máximo donde el control cambiará el color al medio de relleno.

FlowDirection FlowDirection Cambia la dirección del control. HighFill Brush Configura el color que tiene la parte alta del relleno

del control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. IsFillReversed Boolean Configura el booleano que cambia en qué dirección

se llena el medidor, por la izquierda o la derecha. LowFill Brush Configura el color de que tiene la parte baja del

relleno del control. MediumFill Brush Configura el color de que tiene la parte media del

relleno del control TitleFontSize FontSize Configura el tamaño de la fuente del título. TitleText String Configura el texto del título. TitleTextColor Brush Configura el pincel que colorea el titulo del control. UnitsFontSize FontSize Configura el tamaño de la fuente. UnitsText String Configura la unidad de texto del control. UnitsTextColor Brush Configura el pincel que colorea la unidad de texto

del control. TickRingBrush Brush El pincel que pinta las marcas de anillo del medidor

exterior Ticks String Un String de valores alfanuméricos delimitados por

semicomas p.e.; “1;2;3” o “bajo;medio;alto”. ValueFontSize FontSize Configura el tamaño de la fuente del control.

Imagen 154 - Tabla de Propiedades del medidor Radial.

14.7 Medidor Simple Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 155 – Medidor Simple

El medidor simple es un tipo de medidor radial que muestra datos en un semicirculo sin marco.


83


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Configura el color del título del medidor CaptionFontFamily FontFamily Configura la fuente de texto para el título del

medidor principal. CaptionFontSize FontSize Configura el tamaño de la fuente para el título del

medidor principal. CaptionFontStretch FontStretch Configura el grado a la que una fuente se

comprime o se expande en el título del medidor principal.

CaptionFontStyle FontStyle Configura el estilo de la fuente de texto para el título del medidor principal.

CaptionFontWeight FontWeight Configura el grosor de la fuente seleccionada para el título del medidor principal.

CenterCapBorderBrush Brush Pincel del borde para el exterior de la tapa central. CenterCapBrush Brush El pincel que pinta la tapa central. GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. NeedleBrush Brush El pincel que pinta la aguja del medidor externo. NeedleThickness Double El espesor del borde exterior de la aguja en el


exterior. TickRingBrush Brush El pincel que pinta las marcas de anillo del medidor

exterior Ticks String Un String de valores alfanuméricos delimitados por


Imagen 156 - Tabla de Propiedades de Medidor Simple

14.8 Medidor Variable Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 157 – Medidor Variable


84

El medidor variable es un tipo de medidor radial que muestra datos en tres rangos de variables definidas por el usuario. Este medidor puede ser utilizado para mostrar datos numéricos o no numéricos en una escala gráfica.


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Leyenda de colores del medidor principal. CaptionFontFamily FontFamily Configura la fuente de texto para el título del

medidor principal. CaptionFontSize FontSize Configura el tamaño de la fuente para el título del

medidor principal CaptionFontStretch FontStretch Configura el grado en que una fuente se comprime

o se expande en el título del principal indicador. CaptionFontStyle FontStyle Configura el estilo de la fuente de texto para el

título del medidor principal. CaptionFontWeight FontWeight Configura el grosor de la fuente seleccionada para

el título del medidor principal. CenterCapBorderBrush Brush Pincel del borde para el exterior de la tapa central. CenterCapBorderThickness Double Asigna el grosor del trazo del pincel de fondo. CenterCapBrush Brush El pincel que pinta la tapa central. GlareBrush Brush Configura el brillo de todo el control. HighRangeBrush Brush El pincel que pinta el rango alto del medidor. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. LowRangeBrush Brush El pincel que pinta los rangos bajo y alto del

medidor. MidRangeBrush Brush El pincel que pinta el rango medio del medidor. NeedleBrush Brush El color de la aguja exterior. NeedleThickness Double El espesor del borde exterior de la aguja en el


exterior. Ticks String Un String de valores alfanuméricos delimitados por


Imagen 158 - Tabla de Propiedades de Medidor Variable.

14.9 Medidor Lineal Vertical Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5


85

Imagen 159 – Medidor Lineal Vertical

Es un control orientado verticalmente, con un medidor numérico.


Caption String Configuración del título para el elemento principal. CaptionBrush Brush Configura el color del título del medidor FluidBorderBrush Brush Configura el color del borde del fluido. FluidBrush Brush Configura el color del fluido. FluidCornerRadius CornerRadius Configura el radio de la esquina del fluido. FluidOpacityBrush Brush Configura el nivel de opacidad del fluido. GlareBrush GlareBrush Configura el reflejo del control. InnerBackground Brush Configura el color de fondo del indicador del fluido. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. IsNumbersVisible Boolean Configura un valor indicando cuando los números

correspondientes a las marcas son mostrados. TickBrush Brush El Pincel que pinta las marcas incrementales. TickFrequency Double Configura la distancia relativa del rango de valores

en el cual las marcas son dibujadas. El periodo es basado en el valor mínimo. Ejemplo una frecuencia de marcas de 1 y un mínimo de 0 causará que se ponga una marca en el 0 y en cada número entero hasta llegar al máximo.

TickPlacement Enum Configura la posición de los marcadores de graduación con respecto al medidor.

Ticks DoubleCollection Posiciones de los marcadores de escala.

Imagen 160 - Tabla de Propiedades del Medidor Lineal Vertical


86

15 Grids y Paneles

Un Control de “Grid” es un tipo de control de menú que puede ser activado haciendo clic en una celda

del Grid. Los elementos del Panel son componentes de control que representa elementos—su tamaño y

dimensiones, su posición, y la disposición de su contenido “hijo”.

15.1 Borde Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 161 - Borde

Un Borde es un “decorador” y es tipicamente usado para dibujar un borde curvado alrededor de otro

contenedor. Un borde esta habilitado para aceptar un objeto “hijo”. Esto sirve como una buena base para

otra disposición de objetos que no tienen borde y las propiedades de grosor del borde (como “Canvas” o

“Grid”) o para estilos y plantillas de control.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color que describe el borde del fondo

del control. BorderThickness Thickness Configura el grosor del borde del control.

Imagen 162 - Tabla de Propiedades de Borde

15.2 Lienzo o “Canvas” Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 163 - Canvas


87

Un panel “Canvas” o lienzo posiciona objetos explicitamente, iniciando desde la esquina superior

izquierda del lienzo, de acuerdo a coordenadas x,y. Con este panel los objetos son renderizados

secuencialmente por el orden de su marcado XAML.


Background Brush Configura el color del fondo del control.

Imagen 164 - Tabla de Propiedades del Canvas

15.3 “Dock Panel” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 165 – “Dock Panel”

Un “Dock Panel” ordena sus objetos “hijo” horizontal o verticalmente, respecto a otro, en un área

definida.


Background Brush Configura el color del fondo del control. LastChildFill Boolean Configura el valor que indica si el último elemento

secundario de un DockPanel se extiende para rellenar el espacio disponible.

Imagen 166 - Tabla de Propiedades de Dock Panel

15.3.1 Cuadrícula o “Grid” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 167 – Cuadrícula o “Grid”

Un panel Grid consiste en filas y columnas adaptables y tiene capacidades de redimensionamiento para

él mismo y para sus objetos “hijo”. El espaciamiento de las columnas y filas puede ser fijado con este

panel (usando su propiedad “margin”), esto es una buena opción como la capa raíz de UIs.


88


Background Brush Configura el color de fondo del control.

Imagen 168 - Tabla de Propiedades del Grid

15.4 Divisor de Cuadrícula o “Grid Splitter” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 169 - Grid Splitter

Un Grid Splitter se utiliza automáticamente para añadir el comportamiento de redimensionamiento de

filas o columnas en el Grid.



Imagen 170 - Tabla de Propiedades del Grid Splitter

15.5 “Ink Canvas” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 171 - Ink Canvas

InkCanvas es un canvas especial en WPF que está diseñado para usar con un “Stylus” o un dispositivo

similar. Esto puede hacerse una capa activa para edición. Cuando sea la capa activa, el Diseñador de

“mimics” Status Enterprise añadirá elementos de la barra de herramientas para afectar el color y tamaño

de la pluma en el “InkCanvas” Esto también habilitará características de borrado y limpieza del

InkCanvas.

Nombre de la Propiedad Nombre de la Propiedad Tipo Descripción



89

Imagen 172 - Tabla de Propiedades de Ink Canvas

15.6 “Stack Panel” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 173 – “Stack Panel”

Es similar al Dock Panel, pero acumula sus objetos secundarios, ya sea en una sola línea horizontal o

vertical, dependiendo de su orientación, en un área definida. Pero, el Stack Panel no tiene la capacidad

para envolver sus objetos secundarios. Los objetos se agregan a un Stack Panel de la misma manera

que se agregan a un Dock Panel.


Background Brush Configura el color de fondo del control. Orientation Orientation Configura un valor que indica la dimensión por cual

los elementos internos se apilan.

Imagen 174 - Tabla de Propiedades del Stack Panel

15.7 Cuadrícula Uniforme o “Uniform Grid” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 175 – “Uniform Grid”

El panel cuadrícula uniforme utiliza un diseño de tipo cuadrícula invisible de manera uniforme y ordena

de sus objetos secundarios. Los objetos son añadidos a un “Uniform Grid” de la misma manera que ellos

son añadidos como un “Dock Panel”.



Imagen 176 - Tabla de Propiedades de “Uniform Grid”


90

15.8 Lupa Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 177 - Lupa

Un Panel Lupa es un contenedor que puede escalar su contenido a cualquier tamaño. Una Lupa tiene un

solo objeto “hijo”. Si necesitas escalar el contenido del lienzo, este puede ser añadido como “hijo” de la

Lupa para conseguir el efecto deseado.


StretchDirection Stretch Configura el valor que describe como una imagen debería de ensancharse para rellenar el rectangulo de destino.

Imagen 178 - Tabla de Propiedades Lupa

15.9 “Viewport 3D” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 179 – “Viewport 3D”

Representa el contenido que figura en 3-D dentro de los límites de diseño 2-D del elemento Viewport3D.

Utilizado para sostener el xaml 3D.


Tipo Descripción

Height Double Configura the altura del elemento. Los cambios de estado son Auto y Numérico


91

Left Double Configura la posición del objeto en el canvas. El valor por defecto es Left=0.

Opacity Double Configura el factor de opacidad aplicado al elemento.

ToolTip Object Configura el “tool-tip” del objeto mostrado para este elemento en la interfaz de usuario (UI).



Imagen 180 - Tabla de Propiedades “Viewport 3D”

15.10 “Wrap Panel” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 181 – “Wrap Panel”

Un “Wrap Panel” ordena sus objetos “hijo” secuencialmente y linealmente desde la izquierda a la

derecha dentro del area definida y envuelve a la siguiente línea cuando un objeto llega al borde del área

definida. Como el “Dock Panel” o el “Stack Panel”, los “Wrap Panels” tienen orientación vertical y

horizontal, la cual es ajustada con su propiedad de orientación, y añade objetos desde la izquierda o la

derecha dependiendo de su dirección. Los objetos son añadidos en el “Wrap Panel” de la misma manera

que son añadidos en el “Dock Panel”.


Background Brush Configura el color que describe el fondo del control.

Imagen 182 - Tabla de Propiedades de “Wrap Panel”


92

16 Controles con Indicadores Permite mostrar los valores de forma gráfica, similar a un medidor analógico. Debe definirse un valor mínimo y máximo, de modo que la escala del indicador pueda ser calculada. Si no proporciona estos valores, se utilizarán los valores por defecto. Están disponibles para todas las herramientas de diseño de B-Scada, así como todos los entornos de ejecución.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del fondo. BorderThickness Thickness Configura el grosor del borde del control. CornerRadius CornerRadius Configura el radio de la esquina del borde

exterior del elemento. FontFamily* FontFamily Configura la fuente de texto del control.


FontStretch* FontStretch Configura el grado de compresión o expansión de la fuente.

FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente

seleccionada. Foreground Brush Configura el color del frontal. HorizontalContentAlignment** HorizontalAlignment Configura la alineación horizontal del

contenido del control. FlashState1 Boolean Configura si State1 está activo. FlashState2 Boolean Configura si State2 está activo. FlashState3 Boolean Configura si State3 está activo. Value Double Configura el valor actual del control. VerticalContentAlignment** VerticalAlignment Configura la alineación vertical del contenido

del control. State1Brush Brush Asigna el color cuando está activo State1. State2Brush Brush Asigna el color cuando está activo State2. State3Brush Brush Asigna el color cuando está activo State3. State2Threshold Double Configura, en un valor numérico, el número

máximo que State1 llegará antes de cambiar a State2.

State3Threshold Double Configura, en un valor numérico, el número máximo que State2 llegará antes de cambiar a State3.

FlashDelay Integer Configura la frecuencia en milisegundos de retardo de los indicadores.

TertiaryBorderBrush Brush Configura el color del borde interno. TertiaryBorderThickness Thickness Configura grosor del borde del LED.

Imagen 183 - Tabla de Propiedades Comunes de Indicadores


16.1 Indicador de Nivel de Cinco Estados Diseñador de ‘Mimics’| Diseñador de Aplicaciones


93

Imagen 184 – Indicador de Nivel de Cinco Estados

Es un panel indicador con cinco posibles colores de estado. El estado de flash está determinado por el valor asignado al control.


FlashState4 Boolean Configura si State4 está activo. FlashState5 Boolean Configura si State5 está activo. GlareBrush Brush Configura el reflejo de todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. MinorBackground Brush Color de relleno del componente secundario. State4Brush Brush Color del indicator cuando se activa el State4. State5Brush Brush Color del indicator cuando se activa el State5. State4Threshold Double Número máximo que State3 llegará antes de

cambiar a State4. State5Threshold Double Número máximo qué será alcanzado en State5. TertiaryCornerRadius CornerRadius Controla el radio de las esquinas los indicadores.

Imagen 185 – Propiedades del Indicador de Nivel de Cinco Estados

16.2 Indicador de Nivel de Tres Estados Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 186 – Indicador de Nivel de Tres Estados

Es un panel indicador con tres posibles estados mediante colores. El estado se determina por el valor asignado al control.


94

Se puede configurar para que parpadee. Hasta tres colores basados en el valor se pueden configurar en el panel de propiedades.


GlareBrush Brush Configura el reflejo del control entero. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. MinorBackground Brush Configura el color de relleno del componente

secundario en el control. TertiaryCornerRadius CornerRadius Configura el radio de la esquina de la luz del

indicador.

Imagen 187 – Tabla de Propiedades del Indicador de Tres Estados

16.3 Columna Indicador de Cinco Estados Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 188 – Columna Indicador de Cinco Estados

Es un conjunto de cinco indicadores montados en una columna. Los cinco indicadores funcionan independientemente y pueden supervisar cinco procesos separados. El estado de flash está determinado por el valor asignado al control. Un total de cinco posibles colores basados en el valor de que la etiqueta indica puede ajustarse dentro de la propiedad.


FlashState4 Boolean Configura si State4 está activo. FlashState5 Boolean Configura si State5 está activo. GlareBrush Brush Configura el reflejo de todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. MinorBackground Brush Configura el color de relleno del componente

secundario del control. State4Brush Brush Color del indicador cuando se activa State4. State5Brush Brush Color del indicador cuando se activa State5. State1IsOn Boolean Configura el indicador State1 como activo/inactivo. State2IsOn Boolean Configura el indicador State2 como activo/inactivo. State3IsOn Boolean Configura el indicador State3 como activo/inactivo.


95

State4IsOn Boolean Configura el indicador State4 como activo/inactivo. State5IsOn Boolean Configura el indicador State5 como activo/inactivo. State4Threshold Double Configura, en un valor numérico, el número máximo

que State3 llegará antes de cambiar a State4. State5Threshold Double Configura, en un valor numérico, el número máximo

que State4 llegará antes de cambiar a State5.

Imagen 189 - Tabla de Propiedades de la Columna Indicador de Cinco Estados

16.4 Columna Indicador de Tres Estados Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 190 – Columna Indicador de Tres Estados

Es un conjunto de tres indicadores montados en una torre. Los tres indicadores funcionan independientemente y pueden controlar tres procesos separados. El estado de flash está determinado por el valor asignado al control. Un total de tres posibles colores basados en el valor de que la etiqueta indica puede ajustarse dentro de la propiedad.


GlareBrush Brush Configura el reflejo de todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del elemento. InnerCornerRadius CornerRadius Configura el radio de la esquina del borde interior

del elemento. MinorBackground Brush Color de relleno del componente secundario. State1IsOn Boolean Configura el indicador State1 como activo/inactivo. State2IsOn Boolean Configura el indicador State2 como activo/inactivo. State3IsOn Boolean Configura el indicador State3 como activo/inactivo.

Imagen 191 - Tabla de Propiedades Columna Indicador de Tres Estados


96

17 Valores de Entrada Permite a los usuarios introducir y editar un valor de texto o numérico de entrada.

17.1 Caja de Texto Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 192 – Caja de Texto

Se utilizan unos simples enlaces de control de datos bidireccionales para escribir datos en un servidor. Al pulsar enter después de introducir los datos deseados, los datos se escriben de forma automática en el servidor.


MessageBackgroundAlert Brush Asigna color de fondo del mensaje de alarma. ReurnValue Boolean El valor devuelto por el servidor. WriteOn Enum Asigna cuando escribir el valor en el servidor. WriteValue String Asigna el valor que debe escribirse en el servidor.

Imagen 193 - Data Text Box Tabla de Propiedades


97

18 Control de Elementos Un Control de Elementos configura la plantilla que define el panel que controla la disposición de los elementos. Disponible para todos los sistemas de diseño de B-Scada, así como todos los entornos de ejecución.

18.1 Control de Enumeración Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 194 – Control de Enumeración con Lista Desplegable

Es un control que muestra los valores similares a un ComboBox. Este control acepta la incorporación de elementos de Control de enumeración dentro de sí mismo. Los artículos son mostrados en forma de lista seleccionable. Normalmente un elemento de tipo entero está ligado al valor de la propiedad de este control en comunicación bidireccional. Estas opciones pueden utilizarse para mostrar valores de tipo de enumeración y pueden contener texto, imágenes u objetos. Pueden definir las opciones en el panel de propiedades de los elementos de Control de enumeración (véase abajo).


AlternationCount* Int32 Configura el número de contenedores de elementos alternando el Control de Elementos, el cual permite a los contenedores alternos a tener un aspecto único.

BorderBrush Brush Lápiz por el borde exterior del control. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Configura el grado en que una fuente se comprime

o se expande en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. IsDropDownOpen* Boolean Configura un valor que indica si la lista desplegable

está abierta actualmente. IsEditable* Boolean Configura un valor que habilita o deshabilita la

edición del texto. IsReadOnly* Boolean Indica si un control está en modo de sólo lectura, en

el cual los contenidos del control se pueden seleccionar pero no para edición

ItemStringFormat* String Configura una cadena compuesta que especifica cómo dar formato a los elementos de Control de Elementos si se muestra como cadena.

SelectedIndex* Int32 Configura el índice del primer elemento de la selección actual o devuelve uno negativo (-1) si la selección está vacía.


98

SelectedValuePath* String Configura la ruta de acceso que se utiliza para obtener el “SelectedValue” de la propiedad “SelectedItem”.

Imagen 195 - Tabla de Propiedades Control Enumeración

18.1.1 Control de Enumeración de Elementos Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 196 - Control de Enumeración de Elementos

Un Control de Enumeración de Elementos es añadido a la estructura del documento de un control de Enumeración elegido. El contenido de cada elemento y su valor de tipo de enumeración asociado puede ser definido en el panel de propiedades. El panel de propiedades también provee de una opción para determinar cuando un valor numérico deve ser mostrado en el entorno de ejecución. El valor será mostrado por defecto.


Content Object Permite la inserción de texto en el contenido. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Configura el grado en que una fuente se comprime

o se expande en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. ShowNumber Boolean Determina si el número en el

“EnumerationControlItem” es mostrado o no. Esto está disponible para que el elemento seleccionado se pueda cambiar también.


Imagen 197 - Tabla de Propiedades de Control Enumeración y Control de Enumeración de Elementos


18.2 Barra de Estado Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 198 – Barra de Estado

Una barra de estado es un Control de Elementos que comúnmente se ve como una barra horizontal larga. A Status Bar is an Items Control that most commonly looks like a long horizontal bar. Por lo general se encuentra en la parte inferior de una ventana de aplicación y contiene consejos, sugerencias u otra información sobre el estado de lo que está sucediendo en el interior de una aplicación activa.


99

18.2.1 [Agregar] Elemento de Barra de Estado. Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 199 – [Agregar] Elemento de la Barra de Estado

Generalmente, un elemento de la barra de estado se combina comúnmente con una barra de estado. La propiedad ‘Contenido’ de la barra de estado se encuentra habilitada a continuación al texto o a otro ‘FrameworkElement’. Para agregar elementos a una barra de estado, seleccione la barra de estado de la superficie de edición. A continuación, puede hacer clic derecho y seleccione <Añadir Elemento de Barra de estado> en el cuadro de herramientas. Para agregar otros controles directamente en una barra de estado, seleccione la barra de estado de la superficie de edición, a continuación, seleccione el control que desee en el cuadro de herramientas. Puede necesitar ser ajustada después de haber sido añadida la anchura y la altura del control.




del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.



FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal.

Imagen 200 - Tabla de Propiedades de la Barra de Estado


18.3 Control de Tipo Ficha Diseñador de ‘Mimics’| Diseñador de Aplicaciones


100

Imagen 201 – Control de Tipo Ficha

El control de tipo Ficha es un Control de Elementos configurado para mostrar sus elementos en pestañas en un área definida.

18.3.1 [Agregar] Componente Ficha Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 202 – Icono para [Agregar] Nueva Ficha

El control más utilizado junto con el control de ficha es la ficha del elemento. La ficha del elemento es un con encabezado de “ContentControl”. La propiedad cabecera asigna el texto o “FrameWorkElement” para ser mostrado en el cuerpo de la Ficha de Elemento. Cuanto el Control Ficha es redimensionado, esta colección de elementos de fichas envuelve y redimensiona en consecuencia. La propiedad del Control ‘TabStripPlacement’ determina cuando una pestaña se mostrará en la parte de arriba, de abajo, izquierda o derecha del control. Para añadir un elemento Ficha a un control Ficha, selecciona un control Ficha en la superficie de edición, tu puedes entonces hacer clic derecho y seleccionar <Añadir Elemento Ficha> desde el menú contextual. Tu puedes también seleccionar un Control Ficha desde la superficie de edición, y seleccionar <Añadir Elemento Pestaña> desde el “Toolbox”.






101



FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del frontal.

Imagen 203 - Tabla de Propiedades del Control de Tipo Ficha


18.4 Barra de Herramientas y Bandeja de Barra de Herramientas Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 204 – Bandeja de Barra de Herramientas y Barras de Herramientas Asociadas.

La Bandeja de Barra de herramientas es un contenedor para Barras de Herramientas. Para añadir Barras de Herramientas a una Bandejam selecciona la Bandeja de Darras de Herramientas en el área de Diseño. Con la Bandeja seleccionada, haz clic en la Barra de Herramientas en el “ToolBox”. La Barra de Herramientas será añadida como objeto “hijo” de la Bandeja de Barra de Herramientas. Para añadir elementos a una Barra de Herramientas, selecciona la Barra de Herramientas en el Árbol del Documento. Entonces ve al “Toolbox” y selecciona el elemento que desees añadir a la Barra de Herramientas y arrastra y suelta el elemento dentro de la Barra de Herramientas en el Árbol. Una Bandeja de Barra de Herramientas permite reposicionar de manera limitada las barras de herramientas “hijo” usando “arrastrar y soltar”. La Bandeja de Barras de Herramientas pueden tener multiples filas de Barras de Herramientas. Para fijar una barra de herramientas sobre una fila particular de la Bandeja usa la propiedad <Band> del panel de propiedades. .



Background Brush Configura el color de fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.


102


FontStretch* FontStretch Configura como se comprimirá o expandirá una fuente en la pantalla.

FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente. Foreground Brush Configura el color del frontal.

Imagen 205 - Tabla de Propiedades del Control Barra de Herramientas


18.5 Control Vista de Arbol Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 206 – Control Vista de Arbol

Un control de vista de Árbol es un encabezado de Control de Elementos. La cabecera contiene el titulo o FrameworkElement para ser usado para el titulo del nodo. La colección de Elementos puede ser otro Control de Vista de Árbol o otro FrameworkElements. El control de vista de Árbol organiza su colección de elementos en grupos jerárquicos, con un elemento principal y una lista de subelementos para construir una lista organizada de la colección de elementos. Una pequeña flecha aparecerá cerca de la categoría de elementos que contienen subelementos, indicando que la categoría puede ser expandida para revelar elementos adicionales. Las categorías expandidas pueden ser colapsadas. Un elemento de Vista de Árbol puede ser añadido como “hijo” de un Control de Vista de Árbol de una manera de arriba hacia abajo. Una vista de Árbol iniciará barras de desplazamiento horizontales o verticales si es redimensionada hasta el punto de que hagan falta. Esto permite al usuario ver y acceder a todos los elementos a pesar de su tamaño.

18.5.1 Tree View Item [Add] Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 207 - Tree View Item [Add] Icon


103

Para añadir un Elemento de Vista de Árbol a una vista de Árbol, selecciona un control de Vista de Árbol en la superficie de edición. Tu también puedes seleccionar un control de Vista de Árbol desde la superficie de diseño y seleccinar <Elemento de Vista de Arbol [Añadir]> desde el menú contextual.



Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.




Imagen 208 - Tabla de Propiedades Vista de Árbol



104

19 Etiquetas

Un Control Etiqueta crea un control basado en texto que muestra una salida de solo texto.

19.1 Etiqueta de Datos Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 209 – Etiqueta de Datos

DataLabel es un control que muestra información detallada acerca de un elemento de datos. Los elementos de datos se pueden enlazar a las propiedades Cabecera, Leyenda, Valor y Encabezamiento.


Tipo Descripción

HeaderBackground Brush Asigna el color de fondo de la cabecera. HeaderCaption String Asigna el título de la cabecera. HeaderFontSize Double Asigna el tamaño de la fuente del título. HeaderForeground Brush Asigna el color de la cabecera en primer plano. Maximum String Asigna el título máximo. Minimum String Asigna el titulo mínimo. MinMaxFontSize Double Asigna el tamaño de fuente mínimo y máximo del

título. UnitCaption String Asigna la unidad del Titulo. UnitFontSize Double Asigna la unidad del tamaño de la fuente del título. Value String Asigna el valor del titulo.

Imagen 210 - Tabla de Propiedades de Etiquea de Datos.

19.2 Etiqueta Genérica Diseñador de ‘Mimics’| Diseñador de Aplicaciones


105

Imagen 211 – Etiqueta Genérica

La Etiqueta Genérica es un control de caja estándar de texto.


Background Brush Pincel de fondo utilizado para pintar el panel. BorderBrush Brush Pincel de borde para el exterior del control. BorderThickness Thickness Configura el grosor del borde del control. Content Object Permite insertar texto en el contenido. CornerRadius CornerRadius Configura el radio de la esquina del borde

exterior del elemento. FontFamily FontFamily Configura la fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. GlareBrush Brush Configura el brillo del control completo. HorizontalContentAlignment HorizontalAlignment Configura la alineación horizontal del

contenido del control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del


interior del elemento. VerticalContentAlignment VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 212 - Tabla de Propiedades Etiqueta Genérica

19.3 Etiqueta Indicadora Diseñador de ‘Mimics’| Diseñador de Aplicaciones


106

Imagen 213 – Etiqueta Indicadora

La etiquera indicadora es una etiqueta de text que cambia los colores del fondo y el primer plano dependiendo del valor del indicador.

Los Colores de min/max son fijados por la lista de indicadores apropiada. El estado es determinado por el valor asignado al control. Los elementos de Datos son normalmente enlazado a valores de propiedades.


IndicatorAboveMaxBackgroundBrush Brush El pincel utilizado para pintar el fondo de la etiqueta para indicar que el valor es mayor que el IndicatorMaxThreshold.

IndicatorAboveMaxForegroundBrush Brush El pincel utilizado para pintar el contenido de la etiqueta para indicar que el valor es mayor que el IndicatorMaxThreshold.

IndicatorBelowMinBackgroundBrush Brush El pincel utilizado para pintar el fondo de la etiqueta para indicar que el valor es menor que el IndicatorMinThreshold.

IndicatorBelowMinForegroundBrush Brush El pincel utilizado para pintar el contenido de la etiqueta para indicar que el valor es menor que el IndicatorMinThreshold.

IndicatorMaxThreshold Double El valor al que se activa el indicador de alto nivel.

IndicatorMinThreshold Double El valor al que se activa el indicador de bajo nivel..

IndicatorPulseDelay Integer Cuado el indicador parpadea, el IndicatorPulseDelay indica el número de milisegundos entre parpadeos.


Imagen 214 - Tabla de Propiedades de la Etiqueta Indicadora.

19.4 Etiqueta de Función Varianza Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 215 – Etiqueta de Función Varianza


107

La eituqeta de función varianza es un control que no solo muestra el valor actual en tiempo real, sino que también cachea y muestra el último valor con una flecha verde o una flecha roja mostrando su subida o bajada desde la última actualización. El “VarianceFormat” puede er usado para fijar un número de variables. El “VarianceLabel” mostrará una linea de tendencia para los últimos 6 puntos que el control haya recibido.


Orientation Orientation Configura la orientación del control, vertical y horizontal.

StartValue Double Configura el valor contra el que el control compara el valor la primera vez que es usado.

TrendIsVisible Boolean Mustra o esconde la línea de Tendencia. TrendStrokeBrush Brush Configura el color de la línea de tendencia. Value Double Configura la magnitud actual del rango del control. ValueFormat String Configura el formato en el que el valor será mostrado. VarianceFormat String Configura el formato en el cual la varianza del valor

será mostrada.

Imagen 216 - Tabla de Propiedades de la Etiqueta de Función Varianza


108

20 Visores de LED Un Control LED es un panel que puede ser usado para mostrar datos alfanuméricos. Todos los Controles LED están disponibles en cada Diseñador y accesibles en todos los entornos de ejecución.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control. CornerRadius CornerRadius Configura el radio de la esquina del borde

exterior del elemento. FontFamily* FontFamily Configura la fuente de texto del control. FontSize* FontSize Configura el tamaño de la fuente. FontStretch* FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del


interior del elemento. LEDBrightness Double Configura el nivel de opacidad del control,

desde 0 a 1. LEDBrush Brush Configura el pincel que pinta el fondo de LED. LEDDisplayValue* String Configura el valor alfanumérico en el isor

LED. LEDIsOn Boolean Configura el valor "on" para el control. LEDOffOpacity Double Configura valor de opacidad en el visor LED

cuando este esta en modo apagado. LEDPadding* Thickness Configura el relleno horizontal y vertical

dentro de su objeto “padre”. LEDPulse Boolean Configura el valor cuando el LED parpadeará

o permanecerá estático. LEDPulseDelay Integer Configura el intervalo de parpadeo. MinorBackground Brush Configura el color de relleno del componente

secundario en el control. StrokeThickness* Double Configura el grosor del trazo del pincel de

fondo. TertiaryBackground* Brush Configura el fondo del LED. TertiaryBorderBrush Brush Configura el pincel utilizado para pintar el

tercer borde más interno. TertiaryCornerRadius* CornerRadius Configura el radio de la esquina de los LEDs. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 217 – Tabla de Propiedades Comunes de los Visores LED



109

20.1 Visor de LED de Cinco por Siete Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 218 - Visor de LED de Cinco por Siete

Visor de LED de Cinco por Siete es un panel de LED con una Matriz de cinco por siete. Este panel puede ser utilizado para mostrar datos alfanuméricos.


GlareBrush Brush Configura el brillo sobre todo el control. LEDDisplayCount Integer Configura cuantos segmentos de LED son

mostrados.

Imagen 219 - Tabla de Propiedades de Visor de LED de Cinco por Siete

20.2 Luz LED Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 220 – Luz LED

La Luz LED es un solo LED que muestra estados de encendido”, “apagado” y parpadeo.


GlareBrush Brush Configura el brillo sobre todo el control. TertiaryBorderThickness* Thickness Configura el grosor del borde del LED.

Imagen 221 - Tabla de Propiedades de Luz LED



110


111

20.3 LED de Siete Segmentos Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 222 - LED de Siete Segmentos

Este panel puede ser utilizado para mostrar datos numéricos. El número de LEDs puede ser especificado por LEDDisplayCount.


Tipo Descripción

GlareBrush Brush Configura el brillo sobre todo el control. LEDDisplayCount Integer Configura cuantos segmentos de LED serán

mostrados.

Imagen 223 - Tabla de Propiedades de LED de Siete Segmentos.

20.4 LED de Dieciseis Segmentos Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 224 - LED de Dieciseis Segmentos.

Este Panel puede ser usado para mostrar datos alfanuméricos. El número de LEDs puede ser especificado por LEDDisplayCount


Tipo Descripción

LEDDisplayCount Integer Configura cuantos segmentos de LED serán mostrados.


112

Imagen 225 - Tabla de Propiedades de LED de Dieciseis Segmentos.


113

21 Multimedia Los controles Multimedia pueden mostrar Imágenes y Videos. Todos los controles multimedia están disponibles para ambas versiones de desarrollo de B-Scada, así como todos los entornos de ejecución.

21.1 Imagen Enlazable Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 226 – Imagen Enlazable

La Imagen Enlazable es un control al que puedes asignar una imagen y manipularla.


Height Double Configura la Altura del elemento. Los cambios de estado son Auto y Numérico


Opacity Double Configura el factor de opacidad aplicado al elemento. Source Uri Configura la ruta Uri al archivo para ser utilizada dentro

del control media. Valor por Defecto = Null. Stretch Stretch Asigna como debería ajustarse la imagen para ocupar

el objeto en el que está representada. Se puede elegir entre las opciones: None, Fill, Uniform, o UniformToFill.



Imagen 227 - Tabla de Propiedades de Imagen Enlazable

21.2 Media Control Diseñador de ‘Mimics’| Diseñador de Aplicaciones


114

Imagen 228 - Media Control

El MediaControl permite reproducir video o audio y extiende el componente media de .NET dando al usuario mayor flexibilidad como especificar el color de fondo o añadir un Radio X o Y para dar un efecto visual más impactante.


Tipo Descripción

Source Uri Configura la ruta Uri al archivo para ser utilizada dentro del control media. Valor por Defecto = Null.

StrokeThickness Double Configura el grosor de trazo del color de fondo. RadiusX Double Configura el radio X del exterior del control. RadiusY Double Configura el radio Y del exterior del control. LoadedBehavior MediaState Determina el comporamiento del control cuando es

cargado el archivo Media. Valor por Defecto = Ejecutar.

UnloadedBehavior MediaState Determina el comportamiento del control cuando no hay archivos multimedia cargados, el valor por defecto es Parar.

Imagen 229 - Tabla de Propiedades Media Control

21.3 “Video Text Block” Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 230 – “Video Text Block”

El Control “VideoTextBlock” es derivado del MediaControl, pero, por diseño, el “VideoTextBlock” repetirá el video después de que acabe, dando un ciclo continuo de video. Provee de una captación de la atención en cualquier contenido de señalización digital.


Tipo Descripción

Source Uri Configura la ruta Uri al archivo para ser utilizada dentro del control media. Valor por Defecto = Null

LoadedBehavior MediaState Determina el comporamiento del control cuando es cargado el archivo Media. Valor por Defecto = Ejecutar.


115

UnloadedBehavior MediaState Determina el comportamiento del control cuando no hay archivos multimedia cargados, el valor por defecto es Parar.

Imagen 231 - Tabla de Propiedades “Video Text Block”

21.4 Navegador Web Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 232 – Navegador Web

El control Navegador Web es usado para ver las páginas web, imégenes, y ciertos documentos. El

control consiste en una ventana de navegador, botones de navegación, y una URI de navegación.


Tipo Descripción

Browser URI Uri Configura la ruta URI para la página web, imagen o documento a ser visto en la ventana de navegación.

Show Navigation UI Boolean Muestra o esconde la barra de herramientas de navegación.

Imagen 233 – Tabla de Propiedades de Navegador Web.


116

22 Controles de Miscelánea Los Controles de Miscelánea son controles que están disponibles en la “toolbox”, pero no necesariamente se ajustan a cualquier otra categoría de la “toolbox”. Estos controles están disponibles en ambos clientes de diseño gráficos.

22.1 Fuego Animado Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 234 - Animated Fire

El Fuego Animado es un Control que es usado para simular fuego en un entorno industrial.


Background Brush Pincel de fondo utilizado para pintar el panel. BorderBrush Brush Pincel de Borde para el borde exterior del

control. BorderThickness Thickness Configura el grosor del borde del control. FlameIsOn Boolean Configura el valor "yes" o "no" para

determinar si se muestra la llama con animación si o no.

FlameMaxHeight Double Configura la altura máxima de la llama. FlameMinHeight Double Configura la altura mínima de la llama. FlickerFadeSpeed Double Configura la velocidad a la que se desvanece

la llama. FlickerSpeed Double Configura la velocidad a la que la llama

parpadea. FontFamily* FontFamily Configura la fuente de texto del control. FontSize* FontSize Configura el tamaño de la fuente. FontStretch* FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground* Brush Configura el color del color del frontal. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 235 - Tabla de Propiedades de Fuego Animado



117

22.2 Control de Botón de Radio de Enumeración Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 236 - Control de Botón de Radio de Enumeración

El Control de Botón de Radio de Enumeración provee la funcionalidad de Enumeración, pero usa botones de radio en vez de un formato de “combo box”. Como con el Control de Enumeración, los Elementos de Control son añadidos como “hijos” en el Árbol del Documento.


BorderBrush Brush Configura el color que describe el borde de fondo del control.

BorderThickness Thickness Configura el grosor del borde del control. FontStretch FontStretch Configura el grado de la fuente de texto,

comprimida o expandida en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. Foreground* Brush Configura el color que describe el color del frontal.

Imagen 237 – Tabla de Propiedades del Control Enumeración de Botón de Radio


22.2.1 Control de Elemento de Botón de Radio de Enumeración Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 238 - Control de Elemento de Botón de Radio de Enumeración

Un Control de Elemento de Botón de Radio de Enumeración es añadido al Árbol de Documento como un “hijo” del Control de Elemento de Botón de Radio de Enumeración elegido. El contenido de cada elemento y su enumeración asociada pueden ser definidos en el panel de Propiedades. El Panel de Propiedades también puede determinar cuando un valor numérico será mostrado en la ejecución. Es mostrado por defecto.


Content Object Permite insertar texto en el contenido. ShowNumber Boolean Determina cuando un número en el

EnumerationControlItem es mostrado o no. Esto


118

puede ser cambiado en el control seleccionado también.


Imagen 239 - Tabla de Propiedades de Control de Elemento de Botón de Radio de Enumeración


119

22.3 Control de Puntuaciones Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 240 – Control de Puntuaciones

El Control de Puntuaciones es usado para mostrar una puntuación o darle al usurio su puntuación. Cuando es desplegado en una aplicación el usuario puede usar el clic izquierdo del ratón en una estrella para coger su puntuación. Tu puedes fijar un méximo y un mínimo en el control y este cogerá tu puntuación cubriendo los puntos apropiados basados en tus máximos y mínimos definidos. Los elementos de datos en el modelo es típico enlazarlos a la propiedad “Rating” de manera unidireccional o bidireccional.


Background Brush Configura el fondo del control. BorderBrush* Brush Pincel de Borde para el borde exterior del

control. BorderThickness* Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control. FontSize* FontSize Configura el tamaño de la fuente. FontStretch* FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground* Brush Configura el color del frontal. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. Maximum Double Configura el máxio del control. Minimum Double Configura el mínimo del control. PipShape Enum Configura la forma del punto, puede ser una

estrella o un circulo. Rating Double Configura la puntuación del control. RatingsCount Enum Configura los puntos en el control, pueden ser

5 o 10. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 241 - Rat Tabla de Propiedades del Control de Puntuaciónes.



120

23 Motores y Ventiladores

Los Controles Motores y Ventiladores uestran la velocidad de rotación cuando una propiedad booleana

“IsOn” es fijada. Todos los controles de motores y ventiladores están disponibles en ambos diseñadores

gráficos y son accesibles por todos los entornos.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del fondo del control. BorderThickness* Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control. FontSize* FontSize Configura el tamaño de la fuente. FontStretch* FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente seleccionada. Foreground* Brush Configura el color que describe el color del

frontal. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. IsOn NullableBoolean Configura la posición “encendido” del control. MinorBackground Brush Configura el color de relleno del componente

secundario en el control. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 242 – Tabla de Propiedades Comunes de Motores y Ventiladores


23.1 Bomba Centrifugadora Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 243- Bomba Centrifugadora


121

La Bomba Centrifugadora es un control de rotor dinámico con una región interna rotatoria simulando la acción de un impulsor. La velocidad de rotación es determinada por el valor asignado al control. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad del Motor.


BladeBrush Brush Configura un color que pinte las cuchillas de la bomba. MotorSpeed Double Configura la velocidad relativa del motor. Opacity Double Configura el factor de opacidad aplicado al elemento. StrokeThickness Double Configura el grosor de trazo del color de fondo.

Imagen 244 - Tabla de Propiedades de Bomba Centrifugadora

23.2 Engranaje Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 245 - Engranaje

Un Engranaje es una rueda perfilada con dientes para engranar y una característica ajustable de velocidad y rotación. Las propiedades de datos Booleanos son usualmente enlazados a la propiedad ”IsOn” o a datos análogos en la propiedad Velocidad de Rotación.


Tipo Descripción

BladeBrush Brush Configura el color que describe el fondo the los dientes del engranaje

GlareBrush Brush Configura el brilo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior RotationSpeed Double Configura la velocidad de rotación relativa del

control. TertiaryBorderBrush Brush Configura el pincel utilizado para pintar el tercer

borde más interno. TertiaryStrokeThickness Double Configura el grosor de trazo tercer borde más

interno.

Imagen 246 - Tabla de Propiedades de Engranaje

23.3 Motor Pesado Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5


122

Imagen 247 – Motor Pesado

El Motor Pesado en un control de motor con una región que parpadea en su interior que simula la rotación de un motor. Este control tiene una visión general de un gran motor industrial. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad del Motor.


Tipo Descripción

IndicatorBrush Brush Configura el pincel que pinta el indicador gráfico(pulso) de la velocidad del motor.

MotorSpeed Double Configura la velocidad relativa del motor. Opacity Double Configura el factor de opacidad aplicado al elemento.

Imagen 248 - Tabla de Propiedades Motor Pesado

23.4 Motor de Bobina Helicoidal Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 249 – Motor de Bobina Helicoidal

El Motor de Bobina Helicoidal en un control de Motor con una región parpadeante en el interior que simula la rotación de un motor. El cuerpo cilíndrico es identificado como un motor de bobina helicoidal. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad del Motor.


Tipo Descripción

IndicatorBrush Brush Configura el pincel que pinta el indicador gráfico(pulso) de la velocidad del motor.


123

MotorSpeed Double Configura la velocidad relativa del motor. Opacity Double Configura el factor de opacidad aplicado al elemento.

Imagen 250 - Tabla de Propiedades Motor de Bobina Helicoidal


124

23.5 Rueda de Metal Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 251 – Rueda de Metal

La rueda de metal es una rueda con perfil con ocho agujeros de contrapeso y una característica ajustable de velocidad de rotación y dirección. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad del Motor.


Tipo Descripción

BladeBrush Brush El pincel usado para pintar los bordes recortados de la rueda de metal.

GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerStrokeThickness Double Configura el grosor de línea del borde interior. RotationSpeed Double Configura la velocidad de rotación representativa del

control. StrokeThickness Double Configura el grosor del trazo del pincel de fondo.

Imagen 252 - Tabla de Propiedades de Rueda de Metal

23.6 Rueda de Palas Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 253 – Rueda de Palas


125

La Rueda de Palas es una rueda con 12 palas y características ajustables de velocidad y dirección, tipicamente usada para mezclado. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad de Rotación.


Tipo Descripción

BladeBrush Brush Configura el pincel usado para pintar las palas. GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. RotationSpeed Double Configura la velocidad de rotación representativa del control. StrokeThickness Double Configura el grosor del trazo del pincel de fondo. TertiaryBorderBrush Brush Configura el pincel utilizado para pintar la tercera frontera más

interna.

Imagen 254 - Tabla de Propiedades Rueda de Palas

23.7 Ventilador Simple Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 255 – Ventilador Simple

El ventilador simple es un control rotatorio con 4 cuchilas en un cerramiento. La velocidad de rotación es determinada por el valor asignado al control. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad del Motor.


Tipo Descripción

BladeBrush Brush Configura el pincel usado para pintar las cuchilas del ventilador.

InnerBorderBrush Brush Configura el color del borde interior. MotorSpeed Double Configura l velocidad relativa del motor en el control. Opacity Double Configura el factor de opacidad aplicado al elemento. StrokeThickness Double Configura el grosor del trazo del pincel de fondo.

Imagen 256 - Tabla de Propiedades de Ventilador Simple

23.8 Rueda Pequeña Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5


126

Imagen 257 – Rueda Pequeña

LA Rueda Pequeña es un perfil de rueda cerrado, similar a la Rueda de Metal, con características ajustables de velocidad de rotación y dirección. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad de Rotación.


Tipo Descripción

BladeBrush Brush Configura el pincel que se utiliza para pintar los remaches.

CenterCapBrush Brush El pincel que pinta la tapa central de la rueda. GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerStrokeThickness Double Configura el grosor de línea del borde interior. RotationSpeed Double Configura la velocidad de rotación representantiva

del control. StrokeThickness Double Configura el grosor del trazo del pincel de fondo. TertiaryBorderBrush Brush Configura el pincel utilizado para pintar el tercer

borde más interno. TertiaryStrokeThickness Double Configura el grosor de la línea de la tercera frontera

más interna.

Imagen 258 - Tabla de Propiedades de Rueda Pequeña

23.9 Rueda Dentada Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 259 – Rueda Dentada


127

Una Rueda Dentada es una rueda perfilada con un estilo de cuchilla con dientes no engranables y unas características ajustables de velocidad de rotación y dirección. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad de Rotación.


Tipo Descripción

BladeBrush Brush Configura el pincel utilizado para pintar el interior de los dientes de engranaje.

GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. InnerStrokeThickness Double Configura el grosor de la línea del borde interior. RotationSpeed Double Configura la velocidad de rotación representativa del

control. StrokeThickness Double Configura el grosor del trazo del pincel de fondo. TertiaryBorderBrush Brush Configura el pincel utilizado para pintar e tercer

borde más interno. TertiaryStrokeThickness Double Configura el grosor de la línea del tercer borde más

interno.

Imagen 260 - Tabla de Propiedades de Rueda Dentada

23.10 Motor Cuadrado Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 261 – Motor Cuadrado

El Motor Cuadrado es un control con una región interna parpadeante que simula la velocidad de rotación de un motor. Las propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn”


Tipo Descripción

IndicatorBrush Brush Configura el pincel que pinta el indicador gráfico (pulso) de la velocidad del motor.

Opacity Double Configura el factor de opacidad aplicado al elemento. StrokeThickness Double Configura el grosor del trazo del pincel de fondo.

Imagen 262 - Tabla de Propiedades Motor Cuadrado.


128

23.11 Neumático Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 263 - Neumático

Un neumático es una combinación de un exterior del neumático, la llanta y tapacubos con características ajustables de velocidad de rotación y dirección. Las Propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn” o a elementos de datos analogos en el Propiedad Velocidad de Rotación.


BladeBrush Brush Configura el pincel utilizado para pintar la parte de caucho del neumático.

GlareBrush Brush Configura el brillo sobre todo el control. InnerBorderBrush Brush Configura el color del borde interior. RotationSpeed Double Configura la velocidad de rotación representativa

del control. StrokeThickness Double Configura el grosor del trazo del pincel de fondo. VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido del

control.

Imagen 264 - Tabla de Propiedades de Neumático


23.12 Aero Generador Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 265 – Aero Generador


129

El Aero Generador representa un gran generador de energía eólica. La velocidad de Rotación de las 3 cuchilas del vetilador es determinada por el valor asignado al control. Las propiedades de datos Booleanos son usualmente enlazadas a la propiedad “IsOn”.


Tipo Descripción

BladeBorderBrush Brush Configura el color que tiene el fonde del borde de las cuchillas.

BladeBrush Brush Configura un pincel que pinta el fondo de las aspas del ventilador.

BladeStrokeThickness Double Configura el grosor del trazo del pincel cuchilla. InnerBorderBrush Brush Configura el color del borde interior. MotorSpeed Double Configura la velocidad relativa del motor en el control. Opacity Double Configura el factor de opacidad aplicado al elemento. StrokeThickness Double Configura el grosor del trazo del pincel de fondo.

Imagen 266 - Tabla de Propiedades de Aero Generador.


130

24 Botones de Navegación. Un Botón de Navegación es usado para navegar por páginas específicas en la aplicación. Cada una de los botones de navegación es configurado de la misma manera (excepto los botones “Atrás”, que no requieren configuración). Para configurar un botón de navegación, selecciona <Setup> en el panel de propiedades. Las propiedades de configuración de navegación aparecerán. Las opciones a configurar varían ligramente entre el Diseñador de “mimics” y el Diseñador de Aplicaciones.

Imagen 267 – Configurar Propiedades de Navegación en el Diseñador de ‘Mimics’

El diseñador de “mimics” requiere solo unas pocas opciones para ser configurado y habilitar la navegación en tu “mimic”. El Estilo de Navegación te da 3 opciones de como querrías que la pantalla delnuevo “mimic” fuera presentada cuando el botón sea pulsado, las opciones son: Reemplazar, “Popup” de borde simple y Ventana de herramientas “Popup”. El documento abierto te permitirá navegar por el “Mimic” que te gustaría ver cuando el botón es pulsado. El Objeto a ver es opcional, y si tu estás navegando por un “mimic” regular puedes dejarlo en blanco. Sin embargo, si tu estás navegando por una plantilla esta opción te permite elegir el Activo desde el cual querrías tener los datos de la plantilla. En el Diseñador de Aplicaciones, las “mimics” no son creadas como documentos simples, asi que hay que configurar opciones adicionales para los Botones de Navegación.


131

Imagen 268 – Configuración de Propiedades de Navegación en el Diseñador de Aplicaciones.

Las opciones provistas bajo la sección Contenido de Página te permiten definir el ensamblado y el nombre de página para el objetivo de tu botón de navegación. Por defecto, el Campo de ensamblado puede ser rellenado con el nombre del ensamblado actualmente abierto. ‘Contenido de la Cache’ define si la pantalla en la que estamos navegando tiene que ser cacheada o no para ser reutilizada si volvemos en vez de recrear la página y sus enlaces. La sección de Control de Ventana provee de opciones para definir cuanto del nuevo documento será mostrado – cuando este será reemplazado en la ventana actual o abrirá una nueva ventana. Si eliges reemplazar la ventana actual, puedes indicar el nombre para el objetivo bajo “Nombre de Objetivo”, Si eliges crear una ventana nueva, un número de opciones adicionales son provistas:

El Estilo de Ventana te permite elegir un estilo para tu nueva ventana: ‘SingleBorderWindow,’

‘ThreeDBorderWindow’, ‘ToolWindow’ o ninguno.

Posición de la Ventana provee tres opciones para emplazar la nueva ventana: ‘CenterOwner’,

‘CenterScreen’ and Manual.

El ancho y alto de la ventana te permiten definir el tamaño de la nueva ventana en pixeles.

Estirar Fondo determinará como el fondo es manejado cuando la ventana sea redimensionada.

‘Modal’ te permite alternat entre si la nueva ventana será una ventana modal o no – una ventana

“hija” requerirá interacción antes de permitir al usuario retornar al trabajo con la ventana “padre”.


132

Cualesquiera de las opciones de Control Ventana que se elijan, esta sección provee un un campo para

dar al documento recién abierto un nombre que aparecerá en la barra de título de la ventana

La sección Selección de Ruta es donde tu definirás que documento será recuperado cuando el botón sea

clicado. Esto puede ser una ruta absoluta o una ruta relativa.


Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color que tendrá el borde del fondo

del control. BorderThickness Thickness Configura el grosor del borde del control. Content Object Permite insertar texto en el Contenido. CornerRadius CornerRadius Configura el radio de la esquina del borde

exterior del elemento. FontFamily FontFamily Configura la fuente de texto del control.

FontSize FontSize Configura el tamaño de la fuente. FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Configura el grosor de la fuente seleccionada. Foreground Brush Configura el color del frontal. InnerBorderBrush Brush Configura el color del borde interior. InnerBorderThickness Thickness Configura el grosor del borde interior del


interior del elemento. SetUp NavigateParamete

rs Asigna la configuración del botón para definir su funcionalidad.

Imagen 269 - Tabla de Propiedades Comunes de los Botones de Navegación.

24.1 Botón de Navegación de Funciones Clave Diseñador de Aplicaciones

Imagen 270 - Botón de Navegación de Funciones Clave

El Botón de Navegación de Funciones Clave es un botón de navegación estándar, con la excepción de que permite al usuario activarlo presionando una tecla definida en el teclado en adición de su aceptación de los acontecimientos normales de clic del ratón.


133


Tipo Descripción

FunctionKey FunctionKey Configura la tecla de función que se puede utilizar para activar el botón en lugar de un evento de clic.

PressedBrush Brush Configura el pincel utilizado para describir el

aspecto del botón cuando se presiona.

Imagen 271 - Tabla de Propiedades de Botón de Navegación de Funciones Clave

24.2 Botón de Navegación de Gel “Atrás” Diseñador de ‘Mimics’| HTML5

Imagen 272 - Botón de Navegación de Gel “Atrás”

El Botón de Navegación de Gel “Atrás” es un control con un estilo tipo gel. Este control es usado para navegar a la página anterior de la aplicación.


Tipo Descripción

Height Double Configura la altura sugerida para el elemento. Los cambios de estado son Auto y Numérico

Left Double Configura la posición del objeto en el lienzo. El valor por defecto es Left=0.

PressedBackground Brush The fondo que aparece cuando se presiona el botón.

Top Double Configura la posición del objeto en el lienzo. El valor por defecto es Top=0.


Imagen 273 - Tabla de Propiedades de Botón de Navegación de Gel “Atrás”

24.3 Botón de Navegación de Gel Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5


134

Imagen 274 – Botón de Navegación de Gel

El Botón de Navegación de Gel es un control con un estilo de tipo gel. Este control es usado para la navegación a otras páginas o ventanas en la aplicación. La propiedad más significativa es “SetUp”.


ClickMode ClickMode Configura cuando ocurre el evento de clic. FocusBorderThickness Thickness El espesor del foco del anillo en el exterior del

botón. FocusBrush Brush Obtener o establecer el pincel que aparece en

la parte exterior del elemento cuando se pasa el ratón sobre el elemento.

GlareBrush Brush Configura el brillo sobre todo el control. HorizontalContentAlignment HorizontalAlignment Configura la alineación horizontal del

contenido del control. SetUp NavigateParameters Asigna la ruta de los documentos que se

visualizarán.

Imagen 275 - Tabla de Propiedades de Botón de Navegación de Gel.

24.4 Botón de Navegación “Atrás” Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 276 - Botón de Navegación “Atrás”

El Botón de Navegación “Atrás” es un control usado para la navegación a páginas o ventanas anteriores en la aplicación. No es necesaria la configuración.


135


Tipo Descripción

Height Double Configura la altura sugerida para el elemento. Los cambios de estado son Auto y Numérico

Left Double Configura la posición del objeto en el lienzo. El valor por defecto es Left=0.

PressedBackground Brush The fondo que aparece cuando se presiona el botón Top Double Configura la posición del objeto en el lienzo. El

valor por defecto es Top=0. Width Double Configura el ancho del elemento. Los cambios de

estado son Auto y Numérico

Imagen 277 - Tabla de Propiedades de Botón de Navegación “Atrás”


136

24.5 Borde de Navegación Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 278 – Borde de Navegación

El Borde de Navegación es un control que te da la habilidad de navegar a otra Uri o ventana cuando es presionado. Este control está destinado a ser usado encima de contenido existente.


Tipo Descripción

Background Brush Pincel de fondo utilizado para pintar el panel. BorderBrush Brush Pincel de Borde para pintar el borde exterior del

control. BorderThickness Thickness Configura el grosor del borde del control. CornerRadius CornerRadius Configura el radio de la esquina del borde exterior del

elemento. MouseOverBrush Brush Pincel utilizado para pintar el borde cuando el cursor

del ratón se mantenga sobre el control. MouseOverThickness Thickness El espesor aplicado al borde cuando el cursor del

ratón se mantenga sobre el control. Setup NavigateParameters Una propiedad única con la capacidad de definir los

cinco (5) parámetros independientes: ‘assemblyPath’, ‘TipoName’, ‘ReplaceContent’, ‘NavigateUri’ y NavigateType’.

Imagen 279 - Tabla de Propiedades del Borde de Navegación

24.6 Botón de Navegación Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 280 – Botón de Navegación


137

El Botón de Navegación es un control usado para navegar a otras páginas o ventanas de la aplicación. La propiedad más significativa des SetUp.


ClickMode ClickMode Configura cuando ocurre el evento de Clic. FocusBorderThickness Thickness El espesor del anillo de enfoque en el exterior

del botón. FocusBrush Brush Obtener o establecer el pincel que aparece en

la parte exterior del Elemento cuando el ratón pasa sobre el elemento.

GlareBrush Brush Configura el brillo sobre todo el control. HorizontalContentAlignment HorizontalAlignment Configura la alineación horizontal del

contenido del control. PressedBackground Brush El fondo que aparece cuando se pulsa el

botón. SetUp NavigateParameters Asigna la ruta de los documentos que se

visualizarán.

Imagen 281 - Tabla de Propiedades de Botón de Navegación.

24.7 Menú Desplegable de Navegación Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 282 – Menú Desplegable de Navegación

Una list de elementos, en un menú desplagable, cualquier de los cuales podría ser abierto en otro documento. El control cogería el ID de documento y una ruta relativa desde el activo actual hacia una colección de objetos. En el entorno de ejecución podría ser resuelto y mostrado en la lista, hacer doble clic en un elemento o clic en el botón podría abrirlo con el documento especificado.


SetUp NavigateParameters Asigna la ruta de los documentos que se visualizaran.

Imagen 283 - Tabla de Propiedades del Menú Desplegable de Navegación


138

24.8 Lista de Opciones de Navigation Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 284 – Lista de Opciones de Navegación

Una lista de elementos, cualquiera de los cuales podría ser abierto por otro documento. El control

cogería el ID de documento y una ruta relativa desde el activo actual hacia una colección de objetos

En el entorno de ejecución podría ser resuelto y mostrado en la lista, hacer doble clic en un elemento o

clic en el botón podría abrirlo con el documento especificado.



Imagen 285 - Tabla de Propiedades de la Lista de Opciones de Navegación


139

25 Conductos y Depósitos

Estos controles son utilizados para mostrar niveles y flujo.


Background Brush Pincel del Fondo para el cuerpo principal del depósito

BorderBrush Brush Pincel del Borde para el cuerpo principal del depósito.

BorderThickness* Thickness Configura el grosor del borde del control. FontFamily FontFamily Familia de la Fuente del Valor del Título. FontSize FontSize Tamaño de Fuente para el Valor del Título. FontStretch FontStretch Ensanchado de la Fuente para el Valor del

Titulo. FontStyle FontStyle Estilo de la Fuente para el Valor del Titulo.Font FontWeight FontWeight Peso de la Fuente para el Valor del Titulo. Foreground Brush L pincel que pinta el valor del titulo. HorizontalContentAlignment HorizontalAlignment Configura la alineación horizontal del

contenido del control. StrokeThickness Double El espesor del borde para el cuerpo principal

del tanque. VerticalContentAlignment VerticalAlignment Configura la alineación vertical del contenido

del control.

Imagen 286 – Tabla de Propiedades de Conductos y Depósitos.


25.1 Conector de Conductos Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 287 – Conector de Conductos

El conector de conductos es un conector ajustado que permite los cambios de dirección en los conductos o la unión de 3 caminos en forma de T.


MinorBackground Brush Configura el color de relleno del componente secundario en el control.


140

Imagen 288 - Tabla de Propiedades de Conector de Conductos

25.2 Depósito Seccionado Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 289 – Depósito Seccionado

Se trata de un recipiente cerrado con una vista en corte y un nivel de fluido ajustable. Los elementos de datos generalmente se vinculan a la propiedad Value.


FluidBrush Brush Pincel utilizado para pintar el fluido (contenidos) del depósito.

GlareBrush Brush Configura el brillo sobre todo el control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. MinorBackground Double Configura el color de relleno del componente

secundario en el control. TankShape CornerRadius Configura la forma del depósito. TertiaryBackground Brush Pincel utilizado para pintar el fondo del Fluido (en el

interior) del depósito. Value Double Configura el valor actual del control.

Imagen 290 - Tabla de Propiedades Deposito Seccionado

25.3 Depósito Cilindrico Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5


141

Imagen 291 – Depósito Cilindrico

El Depósito Cilíndrico es una vasija sencilla con un nivel de llenado ajustable. Los elementos de datos se suelen enlazar a la propiedad Valor del control.


Tipo Descripción

FluidBrush Brush Pincel utilizado para pintar la región de fluido del depósito.

GlareBrush Brush Configura el brillo sobre todo el control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. Value Double Configura el valor actual del control.

Imagen 292 - Tabla de Propiedades de Depósito Cilíndrico

25.4 Fitted Elbow Pipe Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 293 – Tubería en forma de codo

La tubería(o conducto) en forma de codo en un añadido al conducto estándar con un ángulo de 90º para cambiar la dirección del conducto.


Tipo Descripción

BorderBrush Brush Configura el color de relleno del componente secundario en el control.

Imagen 294 - Tabla de Propiedades Tubería en forma de codo.


142

25.5 Conducto Ajustable Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 295 – Conducto Ajustable

El conducto ajustable es un conducto estandar con la adición de puños más grandes en los extremos.


MinorBackground Brush Configura color de relleno del los extremos del control.

Imagen 296 - Tabla de Propiedades de Conducto Ajustable

25.6 Conducto Ajustable con Indicador de Flujo Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 297 – Conducto Ajustable con Indicador de Flujo

El Conducto Ajustable con Indicador de Flujo es un conducto con una marca en el centro. Este conducto puede ser usado para mostrar la dirección del liquido en el interior del conducto.


AnimationSpeed Double Configura la velocidad en número de la flecha de flujo del control.

AnimationTipo AnimationTipos Configura el sentido de la flecha (de Derecha a Izquierda o de Izquierda a Derecha).

IsOn NullableBoolean Configura la posición "on" del control. MarqueePauseOnMouseHover Boolean Configura el valor True/False para permitir la

pausa de la animación cuando pases el ratón por encima.

MinorBackground Brush Configura el color de relleno del los extremos del control.

Imagen 298 - Tabla de Propiedades Conducto Ajustable con Indicador de Flujo


143

25.7 Tanque de Embudo Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 299 – Tanque de Embudo

El tanque de embudo es una vasija simple que puede canalizar su contenido de un especio más grande a uno más pequeño de manera gradual. Los elementos de datos se suelen enlazar a la propiedad Valor del control


Tipo Descripción

FluidBrush Brush Color utilizado para representar el fluido. GlareBrush Brush Configura el brillo sobre todo el control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. Value Double Configura el valor actual del control.

Imagen 300 - Tabla de Propiedades del Tanque de Embudo.

25.8 Depósito con Indicador Vertical Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 301 – Depósito con Indicador Vertical

Es un depósito que cuenta con un panel transparente para ver el nivel de líquido y un nivel de relleno ajustable. Los elementos de datos generalmente están ligados a la propiedad Valor del control.


144


FluidBrush Brush Color utilizado para representar el fluido. GlareBrush Brush Configura el brillo sobre todo el control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. TickBarDisplay Boolean Programación que se usa para mostrar u ocultar

la barra marcadores. TickFrequency Double Configura la distancia relativa al rango de valores

en el cual las marcas serán dibujadas. El periodo es basado en el valor mínimo.


Imagen 302 - Tabla de Propiedades del Depósito con Indicador Vertical


145

25.9 Depósito Mezclador Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 303 – Depósito Mezclador

Es un tanque con una paleta de mezclado que gira a la derecha. Un tanque de mezcla tiene una velocidad del motor ajustable y un nivel de relleno ajustable. Los elementos de datos generalmente están ligados a la propiedad ‘Value’ del control.


FluidBrush Brush Color utilizado para el fluido principal del depósito. GlareBrush Brush Configura el reflejo de todo control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. MinorBackground Brush Color del fluido del interior del depósito. MixingSpeed Double Configura la velocidad de rotación del mezclador. TertiaryBackground Brush Configura el color de un componente secundario. Value Double Configura el valor actual del control.

Imagen 304 - Tabla de Propiedades del Depósito Mezclador

25.10 Conducto Curvado Estandar Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 305 – Conducto Curvado Estandar

Es un tramo de conducto estándar pero en un ángulo de 90 grados, lo utilizamos para cambios de dirección del conducto.


MinorBackground Brush Configura el color de relleno del componente secundario en el control.


146

Imagen 306 - Tabla de Propiedades del Conducto Curvado Estandar

25.11 Conducto Estandar Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 307 – Conducto Estandar

Es un tramo de conducto cilíndrico usado para dirigir fluidos de una zona a otra.


MinorBackground* Brush Color de relleno del componente secundario.

Imagen 308 - Tabla de Propiedades del Conducto Estandar


25.12 Conducto Estandar con Indicador de Flujo Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 309 – Conducto Estandar con Indicador de Flujo

Es un conducto estándar con un control de flecha animada en el centro. Este control puede utilizarse para mostrar la dirección del flujo y el contenido del conducto con desplazamiento de contenido.


AnimationSpeed Double Configura la velocidad en número de la animación de la flecha.

AnimationTipo AnimationTipos Configura el sentido de la flecha (de Derecha a Izquierda o de Izquierda a Derecha).

IsOn NullableBoolean Configura la posición "on" del control. MarqueePauseOnMouseHover Boolean Permite que la animación se pare cuando el

ratón pase por encima del control. MinorBackground* Brush Configura el color de relleno del componente

secundario.

Imagen 310 - Tabla de Propiedades del Conducto Estandar con Indicador de Flujo.



147

25.13 Conector Universal de Conductos Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 311 – Conector Universal de Conductos

Es un disco esférico que puede conectar diferentes cantidades de conductos de diversos grados para crear configuraciones específicas.


MinorBackground Brush Configura el color del componente secundario.

Imagen 312 - Tabla de Propiedades del Conector Universal de Conductor

25.14 Válvula Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 313 - Válvula

La válvula se utiliza para controlar el estado abierto o cerrado de un conducto. Puede cambiar su orientación para que pueda ser utilizado con un conducto que se encuentra en una posición horizontal o vertical. Los elementos de datos normalmente se enlazan a la propiedad ’IsOpen’ del control.


Height Double Configura la altura del elemento. Los cambios de estado son Auto y Numérico

IsOpen NullableBoolean Configura la posición inicial de la valvula. Las posibilidades son Abierta o Cerrada.



148

Orientation Orientation Determina si el estado de abierto/cerrado de la manivela de la válvula es horizontal o vertical. Ejemplo: Si la manivela de la válvula se coloca en una tubería horizontal, será abierta en posición vertical y cerrado será horizontal. Si la manivela de la válvula se coloca en un tubo vertical, será abierta en posición horizontal y cerrado será vertical.

Top Double Configura la posición del objeto en el lienzo. El valor por defecto es Top=0.


Imagen 314 - Tabla de Propiedades de la Válvula

25.15 Depósito Vessel Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 315 – Depósito Vessel

Es un depósito con orientación horizontal y con un nivel de relleno ajustable. Los elementos de datos generalmente están ligados a la propiedad Valor del control.


Tipo Descripción

FluidBrush Brush Color utilizado para dibujar el fluido. GlareBrush Brush Configura el reflejo de todo el control. Maximum Double Configura el valor máximo para el elemento. Minimum Double Configura el valor mínimo para el elemento. Value Double Configura el valor actual del control.

Imagen 316 – Depósito Vessel


149

26 Script La sección de Controles de Script de la caja de herramientas, contiene un número de controles que

pueden ser utilizados conjuntamente con Scripts personalizados. (Ver Control de Script más adelante)

26.1 Botón Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 317 - Botón

Puede cambiar la apariencia de un botón mediante el ajuste de su fondo, el texto del botón o tamaño, pero también puede cambiar su comportamiento si se realizan ajustes de las acciones conectadas al evento click (por ejemplo lo que ocurre al botón cuando se hace clic en el usuario). Por ejemplo, cambiando la propiedad del botón ClickMode de su valor por defecto a ‘Hover’, moviendo el cursor del ratón sobre el botón (a diferencia de clic y soltando el botón) produce la acción prevista. Para modificar el texto del botón, use la propiedad ‘Content’.

26.2 Combo Box Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 318 - Combo Box

Es una lista de elementos dentro de una caja de selección que puede ser expandida o contraída por el usuario. El Combo Box se suele utilizar cuando un usuario debe seleccionar un elemento de una lista.

26.2.1 Elemento de Combo Box [Agregar] DISEÑADOR DE ‘MIMICS’| DISEÑADOR DE APLICACIONES

Imagen 319 – Elemento de Combo Box [Add]

Para agregar elementos al Combo box, vé a la caja de herramientas y haz clic en < Elemento de ComboBox [Agregar]>, cada clic agregara un nuevo objeto. Se observa en el árbol del documento que un objeto de tipo elemento de Combo se ha agregado al Combo.


150







Imagen 320 - Tabla de Propiedades de Añadir Elemento Combo


26.3 Lista Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 321 - Lista

Una Lista es un Control de Elementos. Una Lista organiza Listas y adjunta una colección de elementos. Más Comunmente, una Lista contiene un Elemento de Lista, pero puede contener una lista de cualquier ‘FrameworkElements’. Una lista tiene capacidades de desplazamiento horizontal o vertical. Una vez el número de elementos de la lista exceda el área definida una barra de desplazamiento aparecerá automáticamente. El posicionamiento de los elementos en la Lista puede ajustarse a traves de las propiedades FlowDirection ay Vertical o Horizontal ‘ContentAlignment’. Por defecto, el modo de una Lista es fijado a <Single>, significa que el usuario es capaz de seleccionar un solo elemento de la Lista. Si cambiamos el parámetro ‘SelectionMode’ permitiremos al usuario seleccionar multiples elementos no consecutivos o un número extendido de elementos. El usuario podrá seleccionar un número consecutivo de elementos pulsando la tecla ‘Mayus’ y clicando en el primero y en el último si el ‘SelectionMode’ está fijado a <Extended>.


151

Una Lista no tiene propiedades de Contenido – la colección de elementos es el contenido. Los cambios de los Elementos de la Lista pueden ser hechos ajustando ciertas propiedades de la Lista. Por ejemplo, un cambio en el Tamaño de la Fuente de todos los elementos de la Lista. Cualquier elemento de la Lista puede editarse de manera individual. La Lista es una capa editable.

26.3.1 Añadir Elemento Lista Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 322 - Añadir Elemento Lista

Los Elementos de la Lista son añadidos a la Lista clicando <Elemento Lista [Añadir]> en el panel de propiedades o posicionando el cursor del ratón en el área editable de la Lista, haciendo clic derecho y seleccionando >Añadir Elemento Lista> en el menú contextual.


AlternationCount Int32 Configura el número de contenedores de elementos alternando el Control de Elementos, el cual permite a los contenedores alternos a tener un aspecto único.

Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color de borde del fondo. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.




Imagen 323 - Tabla de Propiedades Añadir Elemento Lista


26.4 Vista de Lista Diseñador de ‘Mimics’| Diseñador de Aplicaciones


152

Imagen 324 - List View

Una Vista de Lista muestra una colección de elementos en una Lista.

26.4.1 [Añadir] Elemento a la Vista de Lista Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 325 - [Añadir] Elemento a la Vista de Lista

Mientras que tu puedes añadir una Vista de Lista a una capa y añadir Elementos a la Vista de Lista, esta classe es generalmente escrita a través de “code Behind” asignando una Vista de Grid a la propiedad “Vista” y aplicando los enlaces a datos.


AlternationCount Int32 Configura el número de contenedores de elementos alternando el Control de Elementos, el cual permite a los contenedores alternos a tener un aspecto único


del Control. BorderThickness Thickness Configura el grosor del borde del control. FontFamily* FontFamily Configura la fuente de texto del control.




Imagen 326 - Tabla de Propiedades de Vista de Lista


26.5 Menu Diseñador de ‘Mimics’| Diseñador de Aplicaciones


153

Imagen 327 - Menu

N Menú organiza una colección de elementos.

26.5.1 [Añadir] Elemento a Menú Diseñador de ‘Mimics’| Diseñador de Aplicaciones

Imagen 328 - [Añadir] Elemento a Menú

Un Menú también tiene capacidades de disposición y redimensionamiento para la colección de elementos. Una vez el número de elementos de la lista exceda el área definida, el control automáticamente envolverá el siguiente elemento de la lista en la siguiente línea. Si el Menu mismo es redimensionado hasta el punto donde el borde derecho toque el borde izquierdo de los elementos, la colección de elementos será envuelta y reorganizada dentro del Menu con nuevos límites. Para añadir un elemento al Menú, selecciona el Menú en su superficie editable, entonces haz clic en [Añadir] Elemento a Menú en la sección de Controles de elementos de la “ToolBox”. También puedes hacerlo en la superficie editable del Menú, haciendo clic derecho y seleccionando >Añadir Elemento>. Para añadir un Elemento SubMenú al elemento menú, haz clic en el Elemento Menú en el Árbol del Documento y seleccionalo. Entonces haz clic derecho en <Añadir Elemento Menú> para añadir un submenú.

También puedes seleccionar Elemento Menú en el Árbol y hacer clic en <Añadir Elemento Menú> en la “Toolbox”

para añadir un elemento submenú.


AlternationCount Int32 Configura el número de contenedores de elementos alternando el Control de Elementos, el cual permite a los contenedores alternos a tener un aspecto único

Background Brush Configura el color del fondo del control. BorderBrush Brush Configura el color del borde del control. BorderThickness Thickness Configura el grosor del borde del control.


154

FontFamily* FontFamily Configura la fuente de texto del control.




Imagen 329 - Tabla de Propiedades de Menú


26.6 Control de Script Diseñador de ‘Mimics’

Imagen 330 – Panel de Propiedades cuando se selecciona un Control de Script.

Es un control invisible en Ejecución. El control de Script tiene tres propiedades específicas: ‘Code Type’,

‘References’ y ‘Script’.


Code Tipo String Asigna lenguaje: CSharp, Java, o Visual Basic. References String Referencias externas necesarias para el Script. Script String Muestra el Script para compilar

Imagen 331 - Tabla de Propiedades del Control de Script


155

27 Controles de Desplazamiento Diseñador de ‘Mimics’| Diseñador de Aplicaciones Los controles de desplazamiento te permiten añadir a tus “mimics” contenedores con contenido animado, permitiendo que multiples piezas de información – o información que cambia frecuentemente – sean mostradas en un área pequeña. Todos los controles de desplazamiento están disponibles en ambos diseñadores gráficos y accesibles desde todos los clientes de ejecución.

27.1 Desplazamiento Decolorado

Imagen 332 – Desplazamiento Decolorado

El Decolorado es un Control que muestra los elementos “hijo” y va desplazandose por ellos y decolorandolos. Los “hijos” son asociados al control haciendo un cortado y pegado especial.


Background Brush Pincel de fondo usado para pintar el panel. BorderBrush Brush Pincel de borde para el borde exterior del

Control. BorderThickness Thickness Configura el grosor del borde del control. CornerRadius CornerRadius Configura el radio de la esquina del borde

exterior del elemento. FadeTickerAnimationSpeed Double Configura la velocidad de animación del

control. FadeTickerAnimationTipo AnimationTipo Configura la dirección en la cual la marca

es animada. FadeTickerFadeSpeed Double Configura la velocidad a la que los “hijos”

del control se decoloran. FadeTickerPauseOnMouseover Boolean Configura el valor True/False para permitir

que el decolorado pare cuando pasamos el ratón por encima de la animación.

FontFamily* FontFamily Configura la fuente de texto del control. FontSize* FontSize Configura el tamaño de la fuente. FontStretch* FontStretch Configura el grado en que una fuente se

comprime o se expande en la pantalla. FontStyle* FontStyle Configura el estilo de la fuente de texto. FontWeight* FontWeight Configura el grosor de la fuente

seleccionada. Foreground* Brush Configura el color del color del frontal. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. IsOn Boolean Configura el valor “encendido” para permitir

el desplazamiento de la animación. VerticalContentAlignment VerticalAlignment Configura la alineación vertical del

contenido del control.

Imagen 333 - Tabla de Propiedades de Desplazamiento Decolorado



156

27.2 Marquesina

Imagen 334 - Marquesina

Muestra texto introducido por el usuario o los objetos de una manera animada. El contenido de la marquesina puede ser animado en seis diferentes variaciones de desplazamiento - de izquierda a derecha, de arriba a abajo, o rebote de izquierda a derecha -, así como el inverso de esas opciones. Otras opciones incluyen cambiar la velocidad, pausa la animación con un ratón, una orientación vertical u horizontal y cambiar los tipos de animación sobre la marcha. Los objetos del interior de la marquesina se agregan copiando y pegando o arrastrando al objeto.


Background Brush Color de fondo del Control. BorderBrush Brush Color del borde exterior del control. BorderThickness Thickness Grosor del borde del control. CornerRadius CornerRadius Configura el radio de la esquina del

borde exterior del elemento. FontFamily FontFamily Fuente de texto del control. FontSize FontSize Configura el tamaño de la fuente. FontStretch FontStretch Estado de condensación o expansión de

una fuente en la pantalla. FontStyle FontStyle Configura el estilo de la fuente de texto. FontWeight FontWeight Grosor de la fuente seleccionada. Foreground Brush Configura el color del color del frontal. HorizontalContentAlignment* HorizontalAlignment Configura la alineación horizontal del

contenido del control. IsOn Boolean Configura el valor "on" para permitir la

animación del control. MarqueeAnimationSpeed Double Velocidad numérica, del control. MarqueeAnimationTipo MarqueeAnimationTipos Configura la dirección de la animación

(seis opciones). MarqueeItemsOrientation Orientation Orientación de los objetos del Control

(horizontal o vertical). MarqueePauseOnMouseHover Boolean Configura el valor de True/false para

permitir que la animación se pare cuando el ratón pase por encima.

VerticalContentAlignment* VerticalAlignment Configura la alineación vertical del contenido del control.

Imagen 335 - Tabla de Propiedades de la Marquesina

* Heredada, no se utiliza


157

27.3 Visor de Canal RSS

Imagen 336 – Visor de Canal RSS

Se utiliza para mostrar elementos de un determinado canal RSS. Los elementos del artículo son mostrados individualmente para un período de tiempo especificado y se actualiza periódicamente basado en un intervalo de actualización determinada. Al mismo tiempo que avanza automáticamente a través de artículos cargados, el control también proporciona un mecanismo opcional para navegar entre los artículos.


FeedRefreshInterval TimeSpan Intervalo de refresco para el contenido de las noticias RSS.

FeedUri String La Uri del origen de las noticias RSS. HideNavigation Boolean Cuando el valor = True, los controles de navegación

no son mostrados. Interval TimeSpan La velocidad de intercambio de noticias. TitleBrush Brush El color utilizado para mostrar el título de cada artículo TitleFontFamily FontFamily La fuente utilizada en el título de cada artículo TitleFontSize Double El tamaño de la fuente del título de cada artículo TitleFontWeight FontWeight El peso de la fuente del el título de cada artículo

Imagen 337 - Tabla de Propiedades del Visor de Canal RSS


158

28 Formas Básicas

Las propiedades comunes de las formas básicas se describen en la siguiente tabla.


Fill Brush Configura el color del fondo del control. Stroke Brush Configura el color del borde de fondo. StrokeDashArray PenLineCap Configura el grosor del borde del control. StrokeEndLineCap PenLineCap Configura el radio de la esquina del borde exterior

del elemento. StrokeStartLineCap PenLineCap El color utilizado para pintar el interior. StrokeThickness Double Configura la fuente de texto del control.

Imagen 338 - Tabla de Propiedades de las Formas Básicas

B-Scada permite la rotación y ajuste de Rectangulos, Elipses y Formas en Trazos pero nó líneas,

Multilíneas o Polígonos.

28.1 Elipse Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 339 - Elipse

Dibuja una forma simple de Elipse..

28.2 Línea Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 340 - Línea

Dibuja una línea desde X1, Y1 a X2, Y2. Aunque las líneas heredarán una propiedad ‘Fill’ (e.g. similar a la propiedad de relleno en un rectángulo o una elipse), cambiando la propiedad ‘Fill’ de una línea no afecta los cambios en la apariencia de la línea como lo hace para un rectángulo o una elipse. Como una línea es esencialmente un trazo lineal entre dos puntos finales, no se pueden conectar estos dos puntos juntos para formar otra forma.


159

28.3 Trazos Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Un Trazo es un gráfico 2D derivado de las formas básicas. Dibuja una serie de curvas y líneas

conectadas. Pueden ser muy simples o muy complejas formando diagramas e imágenes elaboradas.

Los Trazos tienen una propiedad de datos de tipo de geometría. La geometría del Trazo está en la instrucción ‘set datos’ definiendo como se renderiza el objeto Trazo. Una geometría de Trazo puede contener un número de formas, líneas y curvas complejas. Puede crear un Trazo, y añadirlo a la sección de Formas de la Caja de Herramientas. El Trazo es una capa editable, haciendo Clic con el botón derecho del ratón y seleccionando <Edit Layer> se podrá editar la capa. Podemos utilizar otros Trazos creados en la caja de herramientas para crear un nuevo Trazo.

Opciones Nombre Detalles

Bezier Segment

Agrega el segmento de línea curva que puede ser usado para dibujar segmentos de línea recta apuntando y haciendo clic o arrastrada suavemente curvando segmentos de línea.

Close Active Geometry

Esta opción conectará cualquier línea abierta en el trazo para crear una forma.

Ellipse Geometry Permite arrastrar una elipse al trazo.

End

Esta opción le permite dejar de dibujar sin cerrar los segmentos de línea de dibujo en el trazo.

Line Geometry

Permite arrastrar una línea de la ruta; No permite el dibujo continuo. Haga clic y arrastre para crear una línea de la longitud y dirección deseada.

Line Segment Permite crear formas con relleno mediante puntos y líneas.

Poly Bezier Segment

Similar al segmento de la curva, pero con puntos de control adicionales.

Poly Quadratic Bezier Segment

Similar a un segmento de curva cuadrática, pero con puntos de control adicionales.

PolyLine Segment

Permite dibujar lineas de con relleno, y proporciona múltiples puntos de edición.

Quadratic Bezier Segment Añade un segmento de curva con tres puntos de control.

Rectangle Geometry Permite agregar un rectángulo al trazo

Imagen 341 – Objetos Utilizados en los Trazos


160

28.4 Polígono Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 342 - Polígono

Al igual que la multilínea, un polígono es otra forma definida por una serie de puntos finales y líneas, para utilizarlos en dibujos, diseños gráficos etc... Un polígono también puede consistir en un número infinito de puntos finales. La principal diferencia entre un polígono y una multilínea es que un polígono, una vez que ha sido elaborado, se cierra por completo entre sus puntos inicial y final.

28.5 Multilíneas Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 343 – Polilinea

Una multilínea es otro objeto popularmente utilizado para crear dibujos, diseños gráficos etc... Como su nombre indica, una multilínea dibuja lineas (por ejemplo) rectas conectando una serie de puntos especificados. Considerando que una simple línea, contiene solamente una línea entre dos puntos finales, una multilínea puede contener un número infinito de puntos. A diferencia de un rectángulo o una elipse, una multilínea se dibuja como una forma inacabada lo que significa que la puesta en marcha y acabar con los puntos de una multilínea quedan abiertas e inconexas. Pero, al igual que otras formas acabadas, una multilínea es capaz de mostrar un color de relleno o diseño (en la parte interior de las líneas conectadas y puntos finales). Una forma Multilínea conecta sólo líneas rectas entre los puntos finales, la aplicación ofrece otro objeto menos rígido llamado el lápiz Multilínea. El lápiz Multilínea tiene más flexibilidad ya que se comporta más como una herramienta de dibujo y se parece más a una serie de puntos conectados por una línea (en lugar de una línea conectada por dos puntos finales).

28.6 Polígono y Lápiz Multilínea DISEÑADOR DE ‘MIMICS’| DISEÑADOR DE APLICACIONES | HTML5


161

Imagen 344 – Polígono y Lapiz Multilínea

Nos permite dibujar una serie de puntos conectados uno al otro dictado por los movimientos de la mano en lugar de dibujar las conexiones en los puntos especificados en las líneas rectas; el polígono y lápiz Multilinea, añaden puntos a la forma como se mueve el ratón. Los objetos polígono y multilínea producidos utilizando el lápiz, son los mismos que los objetos utilizados por el polígono regular y Multilínea dibujando normalmente y de forma independiente, sólo contienen más puntos.

28.7 Rectangulo Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 345 - Rectangulo

El Rectangulo es una forma básica, tiene propiedades de Radio X y un Radio que pueden ser utilizadas para curvar sus esquinas.


162

29 Gráficas de Tendencia Los datos de variación o tendencia de determinadas fuentes de datos, son imprescidibles para la mayoría de sistemas HMI. Los controles de Gráficas de Tendencia permiten agregar gráficos muy útiles y precisos a cualquier diseño `Mimic`.

29.1 Gráfica de Tendencia Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 346 – Gráfica de Tendencia

Las líneas de tendencia se agregan a la gráfica para un origen de datos diferente y con sus propiedades individuales. Las propiedades de la Gráfica de tendencia son más generales que las de las líenas de tendencia que son más específicas y vinculadas a un origen de datos concreto.


AutoScroll Boolean Si establece en True, cuando se actualiza el gráfico, irá saltando hasta el final de los datos para que los datos actualizados estén visibles.

DataMode String Selecciona si los datos son a tiempo real o Histórico.

DomainAxisTitle String El título aplicado horizontalmente en del eje X. DomainDateTimeFormat String El formato utilizado para mostrar los valores de

tiempo en el eje horizontal del gráfico. DomainDisplayStart DateTime El valor del tiempo que se inicia la parte visible de

la Gráfica de Tendencia. DomainDisplayWidth TimeSpan La cantidad de tiempo representado por la parte

visible del gráfico. DomainMajorFrequency TimeSpan La cantidad de tiempo representado entre los

marcadores principales a lo largo del eje horizontal. Si se configura la propiedad ‘DomainShowLabels’ a True, las etiquetas de identificación se colocan en los marcadores importantes.

DomainMinorFrequency TimeSpan La cantidad de tiempo representado entre los marcadores menores a lo largo del eje horizontal.


163

DomainShowGrid Boolean Cuando se selecciona, muestra las líneas de cuadrícula asociadas con marcadores mayores y menores a lo largo del eje horizontal.

DomainShowLabels Boolean Cuando es verdadera, muestra el formato de las etiquetas en los marcadores principales a lo largo del eje horizontal.

GraphBackground Brush Color utilizado para pintar el fondo del control de la gráfica de tendencia.

GridBehavior GridBehavior Define cómo debe comportarse el grid en términos de desplazamiento. Los valores posibles son:

FollowData - Las líneas del Grid del eje X se mueven horizontalmente junto con los valores que representan. Con esta configuración las etiquetas a lo largo de las líneas de cuadrícula verticales permanecen constantes.

Static - Las líneas del Grid de eje X permanecen inmóviles en el intervalo definido por la propiedad ‘DomainMajorFrequency’ y las etiquetas cambian para reflejar el nuevo valor de tiempo que representan.

GridDashArray DoubleCollection La definición de tablero anchos a utilizar al dibujar las líneas de la cuadrícula con respecto a la ‘GridStrokeThickness’

GridStroke Brush Color de las líneas de cuadrícula del gráfico. GridStrokeThickness Double Ancho del trazo dado a las líneas de la Cuadrícula. IsCursorEnabled Boolean Cuando es True, muestra el cursor vertical que

permite la inspección de los valores que se cruzan. HideConfigButtons Boolean Cuando es True, muestra los botones de

configuración de tiempo de ejecución LegendPlacement LegendPlacement Define dónde se coloca la leyenda con respecto a

la gráfica. RangeAxisTitle String El título aplicado verticalmente a lo largo del eje Y. RangeShowGrid Boolean Cuando es True, muestra las líneas de cuadrícula

asociadas con los marcadores mayores y menores a lo largo del eje vertical.

RangeShowLabels Boolean Cuando es True, muestra el formato etiquetas a lo largo del eje vertical.

ScrubLineThickness Double Asigna el grosor de las líneas en entorno de ejecución.

ScrubLineTipo String Asigna a las líneas el tipo, sea estática o marcador ScrubMarkerPosition String Asigna si las etiquetas de las líneas serán puestas

arriba o abajo. Title String El título mostrado en la parte superior del Gráfico.

Si se deja un valor vacío, no se visualizará el título. Title Alignment HorizontalAlignment La alineación del título a lo largo de la parte

superior del gráfico. UpdateRate TimeSpan El intervalo en el cual el gráfico actualiza la

visualización de los valores de datos de las líneas representadas.

Imagen 347 - Tabla de Propiedades de la Gráfica de Tendencia


164

29.2 Línea Gráfica de Tendencia Diseñador de ‘Mimics’| Diseñador de Aplicaciones | HTML5

Imagen 348 - Línea Gráfica de Tendencia

Son responsables de suministrar todos los datos necesarios para trazar líneas de tendencia individual. Incluye propiedades para configurar las características visuales de los puntos trazados y líneas de conexión, así como para el mantenimiento de los datos medidos y proporcionar valores interpolados, entre el espacio de coordenadas de pantalla gráfica y el espacio de coordenadas local.


HistoricalDataSource IsGenericHistoricalDataItem El origen de datos desde el cual extraer los valores de histórico.

HistoricalResolution Integer Determina la cantidad de puntos de datos para devolver al solicitar datos históricos.

HoldsValue Boolean Si se establece en True, un punto de datos se crea en cada actualización, incluso si la propiedad Value no se ha establecido desde la última actualización.

PointShape PointShape La forma utilizada para marcar los puntos dibujados como se define en la enumeración ‘PointShape’.

PointFill Brush El pincel usado para pintar el interior de los marcadores de puntos trazados.

PointStroke Brush El pincel usado para pintar el trazo de los marcadores de puntos trazados.

PointStrokeThickness Double El grosor de las líneas de trazos utilizados para dibujar los marcadores de puntos trazados.

RangeMode Enum Asigna el rango lápiz que muestra el tipo de gráfico.

RangeMaximum Double El valor máximo representado por el eje sobre el que los puntos de esta pluma se trazan.

RangeMinimum Double El valor mínimo por el eje sobre el que los puntos de esta pluma se trazan.


165

RangeMajorFrequency Double Asigna la distancia mayor entre las líneas de la cuadrícula verticales..

RangeMinorFrequency Double Asigna la distancia menor entre las líneas de la cuadrícula verticales.

Shading PenShading Determina qué tipo de sombreado se aplica a la gráfica de los datos representados en esta pluma. Los valores posibles son Arriba, Abajo o Ninguno.

Stroke Brush El pincel que especifica cómo se pinta el lápiz.

StrokeThickness Double La anchura de la línea trazada por esta pluma. Esta propiedad sólo se aplica cuando sombreado se establece en ‘Ninguno’.

Title String La descripción mostrada por el Gráfico de Tendencia de este Gráfico(por ejemplo en la leyenda)

Value Double El valor que sigue este gráfico. Esta propiedad es la que debe ser actualizada con el seguimiento de los datos en vivo..

ValueFormat String El String formateado usado para mostrar los valores numéricos a lo largo del eje horizontal en el gráfico.

Imagen 349 - Tabla de Propiedades del Gráfico de Tendencia.


166

30 Visores

Permiten la visualización de uno o más objetos dentro de los límites de un objeto contenedor.

30.1 Barra de Desplazamiento

DISEÑADOR DE ‘MIMICS’

Imagen 350 – Barra de Desplazamiento

Es un área utilizada como contenedor para otros objetos visibles.


Background Brush Color utilizado para colorear el fondo. BorderBrush Brush Color utilizado para colorear el borde. BorderThickness Thickness Configura el grosor del borde del control. CanContentScroll Boolean Configura un valor que indica si se permiten

elementos que admitan la interfaz para desplazarse.

Content String Permite insertar texto u otros objetos en el contenido.

FontFamily FontFamily Tipo de Fuente del valor del título. FontSize FontSize Tamaño de la Fuente del valor del título. FontStretch FontStretch Espaciado de la Fuente del valor del título. FontStyle FontStyle Estilo de la Fuente del valor del título. FontWeight FontWeight Grosor de la Fuente del valor del título. Foreground Brush Color de la Fuente del valor del título. IsDeferredScrollingEnabled Boolean Configura un valor que indica cuando el

contenido es estacionario cuando el usuario arrastra la barra de desplazamiento.

PanningDeceleration Double Configura la tasa de ‘ScrollViewer’ que ralentiza en unidades independientes del dispositivo (1/96th pugadas por unidad) por milisegundo al cuadrado cuando está en la inercia.

PanningMode PanningMode Configura la manera en que reacciona al utilizar la Barra de Desplazamiento.

Imagen 351 - Tabla de Propiedades de la Barra de Desplazamiento


167

30.2 Controles de Terceros

Existe la posibilidad de necesitar agregar nuevos controles WPF al sistema que no vienen incluidos en la caja de herramientas del Diseñador de ‘Mimics’. Con esta funcionalidad el producto se puede personalizar y adaptar completamente a sus necesidades.

30.3 Agregar Control WPF Diseñador de ‘Mimics’

Imagen 352 – Agregar Control WPF

Al hacer Clic en el icono para Agregar Control WPF se abre una nueva ventana permitiendo examinar el disco en busca del control WPF que queremos incorporar a nuestro sistema.

Imagen 353 – Ventana para localizar el control WPF

Una vez tienes el navegador y el archivo correcto seleccionado, se te presentará con un cuadro de dialogo para Exportar el Tipo.

Imagen 354 – Cuadro de Diálogo Exportar Tipo


168

Utiliza el Menú desplegable para seleccionar un Control o una Ventana para ser anfitrion de tu Control externo y aparecerá en el “Toolbox” que vas a usar.

Controles Disponibles para Diseño de Scadascada.com/Content/UserGuides/StatusEnterprise_ES/Status...

Documents

Transcript of Controles Disponibles para Diseño de Scadascada.com/Content/UserGuides/StatusEnterprise_ES/Status...