---
title: "¿Cómo conectar un visor GIS con gadgets en un Dashboard?"
canonical: "https://onesaitplatform-es.refined.site/space/DOC/2216691020/%C2%BFC%C3%B3mo%20conectar%20un%20visor%20GIS%20con%20gadgets%20en%20un%20Dashboard%3F"
format: markdown
---
> Macro (toc)
# Introducción
En este tutorial se va a explicar cómo conectar un **visor GIS** generado en la plataforma con otro **Gadget** para que interactúen entre ellos en un **Dashboard**.
Concretamente, se va a crear un mapa a partir de una Ontología con datos de la población y densidad de población de las diferentes Comunidades Autónomas de España, y un Gadget de diagrama de barras que muestra la distribución de la población a nivel nacional, y a nivel de comunidad cuando en el mapa se pinche sobre una de las comunidades.
Como una imagen vale más que sesenta palabras, a continuación se muestra el resultado que se obtendrá.
# Generación de la Ontología
Se empezará generando la **Ontología** de datos que contendrá la localización de los centroides de cada Comunidad Autónoma, así como los datos de población y densidad de población. Para este tutorial, se utilizarán los siguientes contenidos en el siguiente JSON: [(GIS) Cómo conectar un visor GIS con gadgets en un Dashboard](/wiki/pages/resumedraft.action?draftId=2216691020)
> ℹ️ ### Generación de la ontología
> ℹ️
> ℹ️ Si ya sabes cómo generar una ontología, puedes saltarte lo que viene a continuación y generarla por tu cuenta.
Para generar la ontología, en primer lugar habrá que navegar hasta el menú de **Desarrollo**, y selección la opción de **Mis Ontologías**.
Aparecerá una pantalla con todas las ontologías que se tengan disponibles. Para generar una nueva, se pulsará en el botón de **Crear**, situado en la parte superior derecha de la pantalla.
> Macro (inline-media-image)
Con esto se lanzará el asistente de generación de ontologías, en donde se pregunta qué método de creación se quiere utilizar. Para este tutorial, se seleccionará la opción de **Creación paso a paso**.
La siguiente pantalla corresponde con el formulario de creación de la Ontología, en donde se deberán introducir la siguiente información:
- **Nombre de la ontología**: nombre único de identificación de la ontología.
- **Meta-información**: etiquetas que identifiquen a la ontología que se está creando.
- **Descripción**: un pequeño texto que explique la ontología.
- **Activo**: si la ontología se encuentra activa o no. Por defecto está en activa, y hay que dejarla así.
- **Pública**: para permitir que la ontología sea accesible o no. Por defecto está desactivada, y hay que activar la opción.
- **Permitir la encriptación de campos**: esta casilla se dejará como está, desactivada.
Tras introducir la información básica de la ontología, a continuación se seleccionará la plantilla de la Ontología. De entre las disponibles, se seleccionará la categoría de **General**, subcategoría de **Plantilla Vacía**.
Seleccionando esta plantilla, aparece el diseñador de esquemas, en donde se definirán los distintos campos con los que contará la Ontología.
Los campos a introducir serán los siguientes:
| Propiedad | Tipo de dato | Requerido | Encriptado |
| --- | --- | --- | --- |
| id | integer | Required | false |
| ccaa_name | string | Required | false |
| ccaa_name_alt | string | Required | false |
| ccaa_pob_2018 | number | Required | false |
| ccaa_den_2018 | number | Required | false |
| geometry | geometry | Required | false |
Los datos introducidos deberían quedar por tanto tal como se muestra a continuación:
Hecho esto, se pulsará sobre el botón de **Actualizar Esquema**. La pantalla se desplazará automáticamente a un visor de código, en donde se podrá ver la estructura generada para la Ontología. Pulsando sobre el botón de **Generar Instancia**, se podrá ver un ejemplo de la estructura de la ontología con valores ficticios.
> Macro (inline-media-image)
Si se está conforme con lo obtenido, se pulsará en el botón de **Nuevo** para generar la Ontología.
# Carga de datos de la Ontología
Tras haber generado la Ontología, el siguiente paso consistirá en poblarla con datos.
> ℹ️ ### Cargar datos en la ontología
> ℹ️
> ℹ️ Como en el apartado anterior, si ya sabes cómo cargar datos en una ontología, puedes saltarte este paso y hacerlo por tu cuenta.
Se empezará buscando la ontología recién creada en el listado de ontologías, el cual se encuentra en la pantalla inicial de **Mis Ontologías**.
Una vez que se haya localizado, se pulsará sobre el botón de **CRUD**, situado a la derecha del todo del registro de la Ontología.
Esto lanzará el asistente de **Crear, Leer, Actualizar y Borrar** (*Create*, *Read*, *Update* *and Delete*, CRUD) de la Ontología, lo que permitirá modificar su contenido, y particularmente en este caso, introducir los datos a la misma. Para ello, se pulsará en el botón **Nuevo** por cada registro que se quiera introducir.
En la pantalla que aparece se tendrá que ir introduciendo la información correspondiente a los diferentes campos definidos previamente en la estructura de la Ontología.
Esto se puede ir haciendo campo a campo, o copiando la estructura de cada elemento del JSON original en la ventana de **Output**.
Una vez introducidos los datos del primer elemento, se pulsará sobre el botón de **Nuevo** para generar el dato, quedando registrado en el listado de contenidos de la Ontología.
Esto habrá que repetirse con los diecinueve registros con los que se cuenta en total.
Una vez terminado de cargar los datos, la Ontología estará lista para su consumo.
# Creación de la Capa espacial del visor
Una vez que se tiene la Ontología preparada, se procederá a crear a partir de ella una **Capa **Espacial, la cual se visualizará en el visor del mapa.
Para ello, se navegará hasta el menú de **Visores Webmap**, y se seleccionará la opción de **Mis Capas**.
Una vez en el gestor de capas, se pulsará sobre el botón de **Crear **para generar una nueva Capa.
Al igual que ocurría con las ontologías, se abrirá un asistente de generación, en donde se escogerá la opción de **Crear Capa de Ontología**.
Esto lanzará el generador de nueva Capa, en donde se tendrá que introducir en un primer lugar la siguiente información:
- **Identificación**: nombre único de identificación de la capa de la ontología.
- **Ontología**: la ontología a partir de la cual se crea la capa.
- **Pública**: para permitir que la capa sea accesible o no. Por defecto está desactivada, y hay que activar la opción.
- **Descripción**: un pequeño texto que explique la capa.
Una vez introducida la información básica de la Capa, habrá que definir tres propiedades más: **geometría**, **simbología** y el I**nfo Box**.
En la **geometría** se indicará el campo de la ontología con las coordenadas espaciales, así como indicar el tipo de geometría de la capa. Respecto a la opción de mapa de calor, se dejará desactivada.
> ℹ️ ### Generar un mapa de calor (heatmap) en Cesium
> ℹ️
> ℹ️ ¿Cómo? ¿Mapas de calor? Pues si, puedes generar mapas de calor con los datos de tus ontologías. ¿Interesado? Pues tenemos un tutorial que **[explica muy bien cómo crearlos](https://onesaitplatform.atlassian.net/wiki/spaces/DOC/pages/2216690601/%28GIS%29+Generar+un+mapa+de+calor+%28heatmap%29+en+Cesium)**.
Respecto a la **simbología**, en esta pestaña se indicará el aspecto que tendrán los puntos gráficos de la Capa. De momento la representación se hace mediante puntos de colores, los cuales se configuran con cuatro propiedades:
- **Color de línea exterior**.
- **Color interior**.
- **Grosor de la línea exterior**.
- **Tamaño del punto**.
Por último queda la pestaña de **Info Box**. Un infoBox o Popup es la ventanita que sale cuando en el mapa se pincha sobre uno de los elementos de la ontología, mostrando cierta información. En este caso en particular, se usarán los campos seleccionados para el infoBox como los campos a utilizar en los filtros del Gadget del Dashboard.
Introducir campos es tan sencillo como pulsar en el botón de Añadir Atributos, e ir seleccionando el campo que se quiere añadir, y el nombre que se quiere que tenga.
Para este ejemplo, se introducirán los campos de:
- **ccaa_name**
- **ccaa_name_alt**
- **ccaa_pob_2018**
- **ccaa_den_2018**
Para evitar complicaciones, el nombre a asignar será el mismo que el del campo.
Una vez seleccionados los campos a introducir, se pulsará en el botón de **Nuevo** para crear la Capa.
> ✅ ### Visualización de la capa
> ✅
> ✅ Si quieres echar un ojo rápido a tu capa para ver cómo es, desde el gestor de capas, busca la capa que acabas de crear y pulsando en el botón de **CRUD** podrás visualizar los datos con sus coordenadas en una tabla, y en la parte de abajo un mapa con los datos representados.
> ✅
> ✅ De todos modos en el siguiente punto se va a generar un visor web donde se meterá la capa que se acaba de crear. Esta sugerencia sirve también para dar a conocer la opción de visualización de datos sin requerir de un visor web.
# Creación del Visor web
Ya se tiene la Capa. Ahora se va a generar un **Visor** web en donde visualizarla.
Nuevamente hay que ir hasta el menú de **Visores Webmap**, pero seleccionar esta vez la opción de **Mis Visores**.
Como en casos anteriores, se pulsará en el botón de **Crear**, para lanzar el asistente de creación del Visor web.
En el asistente que aparece, será necesario rellenar los siguientes campos:
- **Identificación**: nombre único de identificación del visor web.
- **Pública**: para permitir que el visor sea accesible o no. Por defecto está desactivada, y hay que activar la opción.
- **Descripción**: un pequeño texto que explique el visor.
- **Tecnología**: del tipo de visor a utilizar. De momento sólo se puede escoger la opción de Cesium.
- **Mapa base**: corresponde al 'lienzo' que aparece de fondo en el mapa. Se puede escoger entre una imagen de ciudad vectorial, o imagen de satélite (*imagery*).
- **Capas**: la capa o capas a visualizar en el mapa.
Una vez completados los campos, y más concretamente escogido el mapa base, aparecerá una ventana partida en la parte inferior, donde a la derecha se tendrá el Visor web, y a la izquierda el código fuente del Visor.
Más adelante en este tutorial habrá que volver al Visor y modificar el código del mismo para incluir ciertos elementos, pero de momento con esto ya se tiene listo el Visor web que será metido posteriormente en el Dashboard.
# Creación del DataSource
A la hora de trabajar con los gadgets, es necesario generar un **DataSource** de la Ontología.
Para ello, se navegará en el menú de **Visualización** hasta **Mis DataSources**.
Se abrirá la página de gestión de dataSources, en donde habrá que pulsar en el botón de **Crear** situado en la parte superior derecha para lanzar el formulario de creación de DataSources.
En dicho formulario habrá que rellenar los siguientes campos:
- **Identificación**: nombre único de identificación del DataSource.
- **Modo de acceso**: que por defecto y única opción será 'Query'.
- **Fuente de base de datos**: que por defecto y única opción será 'RTDB'.
- **Tiempo de refresco**: por defecto es '0', y que puede dejarse como está.
- **Seleccionar ontología**: aquí se seleccionará la ontología a partir de la cual se quiere crear el DataSource.
- **Descripción**: un pequeño texto que explique el DataSource.
Seguidamente hay que configurar la llamada a la base de datos. Por defecto se genera la siguiente llamada:
Sin embargo, esta llamada no sirve para lo que se busca hacer, puesto que el uso del asterisco genera ciertos problemas. Por ello, es necesario modificar dicha llamada manualmente para pasarle todos los parámetros que interesan. Dicha llamada seguiría el siguiente patrón:
- select nombreOntologia.nombreOntologia.PROPIEDAD as PROPIEDAD from nombreOntologia
En el caso del ejemplo, dicha llamada sería:
##### **Llamada a la base de datos**
```sql
select ont_ccaa_population_2018.ont_ccaa_population_2018.id as id, ont_ccaa_population_2018.ont_ccaa_population_2018.name as name, ont_ccaa_population_2018.ont_ccaa_population_2018.ccaa_name as ccaa_name, ont_ccaa_population_2018.ont_ccaa_population_2018.ccaa_name_alt as ccaa_name_alt, ont_ccaa_population_2018.ont_ccaa_population_2018.ccaa_pob_2018 as ccaa_pob_2018, ont_ccaa_population_2018.ont_ccaa_population_2018.ccaa_den_2018 as ccaa_den_2018 from ont_ccaa_population_2018
```
Pulsando en el botón de **Ejecutar Solicitud**, aparecería la respuesta de la llamada, en la que se puede ver el JSON con cada una de las Comunidades Autónomas junto a sus datos asociados.
Si se está conforme con el resultado obtenido, pulsando en el botón de **Nuevo** se generará el DataSource, dando por finalizado este apartado.
# Creación del Dashboard
Generado el DataSource de la Ontología, ya es posible crear los gadgets asociados a dicho DataSource. Sin embargo, antes de generar dichos gadgets, se procederá a crear el **Dashboard** que los contendrá.
Para crear el Dashboard se navegará en el menú de **Visualización** hasta la opción de **Mis Dashboards**.
Como en casos anteriores, se accederá al gestor de contenidos, correspondiente en este caso a los dashboards. Allí habrá que pulsar en el botón de **Crear** para lanzar el formulario de creación de dashboards.
En dicho formulario, habrá que introducir la siguiente información:
- **Identificación**: nombre único de identificación del Dashboard.
- **Descripción**: un pequeño texto que explique el Dashboard.
- **Pública**: para permitir que el visor sea accesible o no. Por defecto está desactivada, y hay que activar la opción.
- **Estilo inicial**: por defecto sale la opción de estilo por defecto, y se dejará como está.
- **Imagen**: imagen para reconocer el Dashboard. Se puede seleccionar una imagen si se quiere, pero no es necesario hacerlo.
- **Categoría**: para categorizar el Dashboard. No será necesario escoger ninguna opción si no se quiere.
- **Subcategoría**: para categorizar aun más el Dashboard. Tampoco será necesario escoger ninguna opción si no se quiere.
Una vez que se haya introducido toda la información, se pulsará sobre el botón de **Nuevo** para generar el Dashboard, lo que lo abrirá automáticamente, mostrándolo vacío y listo para rellenar con los gadgets.
# Creación del Gadget del diagrama de barras
Ya se tiene el Dashboard generado, por lo que el siguiente paso será crear los dos gadgets que contendrá. Se empezará con el **Gadget** del diagrama de barras, y posteriormente se hará el del mapa.
Se puede generar el Gadget de diferentes maneras. En este ejemplo, y puesto que ya se tiene el Dashboard generado, se creará desde ahí. Para ello, en el Dashboard, habrá que pulsar sobre el botón de **Añadir Elemento**, situado en la parte superior derecha del Dashboard.
Esto abrirá en la parte inferior de la pantalla un carrusel de gadgets, en donde se seleccionará el de diagramas de barras y se arrastrará al Dashboard:
Seguidamente aparecerá una pantalla preguntando si se quiere cargar un **Gadget** ya existente, o si se desea generar uno nuevo.
En este caso, se seleccionará la opción de **Nuevo Gadget**, lo que lanzará el asistente de creación, en donde habrá que introducir inicialmente dos datos:
- **Nombre del Gadget**: nombre único de identificación del Gadget.
- **Seleccionar la Ontología o DataSource**: donde se seleccionará el DataSource antes generado a partir de la Ontología.
Una vez introducidos estos dos datos, el contenido del asistente se actualizará apareciendo una gran variedad de opciones de personalización del diagrama, entre las cuales se encuentra los campos a mostrar en el diagrama, con un ejemplo en vivo de los cambios realizados en la parte inferior del asistente.
La configuración utilizada para este ejemplo es la siguiente:
Una vez que se ha definido la estética y contenidos del diagrama, se pulsará el botón de **Nuevo** para generar el Gadget. Éste entonces aparecerá sobre el Dashboard, en donde se podrá modificar su tamaño y posición.
Hecho esto, el Gadget está listo. Más adelante se verá la personalización del Gadget, pero de momento se dejará así. Se salvará el Dashboard para no perder el trabajo hecho hasta ahora.
# Creación del Gadget del Visor web
Para meter el Visor web antes creado, no se puede meter directamente en el Dashboard, sino que hay que meterlo a través de un **Gadget**. Por ello, se repetirá el paso anterior para crear un nuevo Gadget, pero seleccionando en este caso el de **Plantilla** y arrastrándolo hasta el Dashboard.
Como en el caso del Gadget anterior, saldrá una pantalla preguntando si se quiere usar una plantilla para generar el Gadget. Puesto que se quiere meter un Visor que se tiene generado en la Plataforma, se seleccionará la opción de **URLGADGET**.
Esto hará que se actualice la ventana, solicitando dos parámetros:
- **DataSource**: a partir del cual funcionará el Gadget, que en este caso será el mismo utilizado para el otro Gadget.
- **URL**: donde se tendrá que introducir la URL del Visor web que previamente se ha generado.
> ℹ️ ### Recuperar la URL del Visor web
> ℹ️
> ℹ️ ¿No sabes cual es la URL del Visor web que se ha generado antes? Entra en el menú de **Visores Webmap**, y selecciona la opción de **Mis Visores**. En el listado de visores, busca el que hayas creado, y pulsa sobre el botón de **URL**.
> ℹ️
> ℹ️ 
> ℹ️
> ℹ️ 
Una vez introducidos los datos, el Gadget estará listo y aparecerá sobre el Dashboard, pudiendo modificar como en el caso anterior su posición y tamaño.
Hecho esto, el Gadget está listo. Sin embargo, pinchando sobre cualquiera de los puntos del mapa, no ocurre nada. Cómo conseguir esto se tratará en el siguiente apartado.
Antes de continuar, se guardarán los cambios realizados en el Dashboard.
# Configuración del Visor web
Como se comentó previamente, se va a regresar al Visor web antes generado, para modificar su código y prepararlo para que pueda interactuar con los gadgets del Dashboard. Se navegará nuevamente hasta el **gestor de visores**.
Allí, se buscará el Visor que se ha generado y se seleccionará la opción de **Editar**.
Esto abrirá una pantalla que nos permitirá modificar el contenido del mapa. Aunque para este ejemplo se va a modificar el código para hacerlo compatible con el Dashboard, se podría modificar también parámetros básicos del mapa, como las capas que contenga, el mapa base, etc.
> ✅ ### Código del Visor
> ✅
> ✅ Si en algún momento te pierdes con lo que se va a hacer, no te preocupes porque al final de esta sección se incluye el código del visor ya preparado.
En el código del Visor, se navegará hasta la parte inferior del mismo, justo antes del comentario de **/** EJECUCIONES */**, y se incluirá la siguiente función de JavaScript:
##### **sendFilter()**
```javascript
function sendFilter() {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction(function() {
let entity
if (viewer.selectedEntity && viewer.selectedEntity.id != 'Loading...') {
entity = viewer.selectedEntity
parent.parent.postMessage({'eventMap':entity.ccaa_name},'*')
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
```
Introducido el código donde se indica, quedaría tal que así:
> ℹ️ ### ¿Qué hace la función?
> ℹ️
> ℹ️ Esta función lo que hace es generar un evento (línea 2) que escucha en el mapa cuando se hace clic (línea 3) sobre una entidad (línea 5; en este caso, en los puntos de las Comunidades Autónomas), y que emitirá un mensaje al iFrame del Dashboard desde el iFrame del Gadget (línea 7). El mensaje que se lanza será el nombre de la Comunidad Autónoma sobre la que se ha hecho clic; es decir, el campo 'ccaa_name' de la entidad seleccionada en el Visor.
Por último, no hay que olvidarse de incluir la ejecución de la función recién creada, lo que se hará bajo el comentario de **/** EJECUCIONES */**, por mantener un orden.
Por otro lado, es preciso de momento introducir manualmente ciertos campos de datos a las entidades que se van a crear. Hay que buscar la función de **CreateLayer()**, concretamente donde se especifica **dataSource.entities.add**, hay que incluir las siguientes propiedades:
- **ccaa_name: entity.properties.ccaa_name**
- **ccaa_name_alt: entity.properties.ccaa_name_alt**
- **ccaa_pob_2018: entity.properties.ccaa_pob_2018**
- **ccaa_den_2018: entity.properties.ccaa_den_2018**
Hecho esto, no habría que modificar nada más en el código del Visor, por lo que se pueden salvar los cambios pulsando en el botón de **Editar**.
> ✅ ### Comprobación de parámetros del Visor
> ✅
> ✅ Como generar el Visor conlleva configurar muchas opciones, para asegurar la visualización correcta en el Gadget, hay que comprobar que:
> ✅
> ✅ - Si existe una propiedad llamada **infoBox** en el código, ésta se encuentra en 'false'. En caso de no existir, en la definición del **viewer**, hay que añadir la propiedad de 'infoBox: false,' (el parámetro debe escribirse tal como se especifica).
> ✅
> ✅ 
> ✅
> ✅ - Que las coordenadas del mapa correspondan con la localización de la capa. Aunque esto debería ser automático, es posible que por alguna razón no sea así, por lo que hay que modificar las coordenadas de inicio del mapa. Esto se puede configurar modificando los parámetros de las variables **initialLongitude**, **initialLatitude** e **initialHeight**.
> ✅
> ✅ 
> ℹ️ ### Descarga el código fuente del Visor
> ℹ️
> ℹ️ Puedes descargarte el código del visor a continuación:
> ℹ️
> ℹ️ > Macro (legacy-content)
# Conexión entre gadgets
Configurado el Visor del mapa para mandar un parámetro concreto como filtro, a continuación se va a configurar el Dashboard para que tome ese elemento enviado desde el Gadget del mapa, y se lo pase al Gadget del diagrama de barras.
Para llevar esto a cabo se usará el **Datalink**, al cual se puede acceder desde su correspondiente botón situado en la parte superior derecha de la pantalla.
> Macro (inline-media-image)
Aparecerá entonces una ventana en la que se definirá qué se conecta a qué, a partir de qué. Los datos a introducir serían:
- **Gadget de Origen**: el Gadget del que partirá el dato, que en este caso será el del mapa.
- **Campo de Origen**: extraído del DataSource, por el que conectará.
- **Gadget de Destino**: el Gadget que recibirá el dato, que será por tanto el diagrama de barras.
- **Campo de Destino**: extraído nuevamente del DataSource, por el que será conectado.
Una vez definidos los elementos de conexión, se pulsará sobre el botón de **(+)** para generar el filtro.
El siguiente paso consiste en introducir una serie de líneas de código en el Gadget del Visor. En un futuro se hará de manera transparente al usuario, pero de momento es necesario hacerlo a mano.
En primer lugar, hay que editar el Gadget del Visor, lo que hará mediante el botón de **Edición** del Gadget en cuestión:
Saldrá una nueva pantalla en la que poder **editar el Gadget**. En ella, hay dos pantallas de código; una de HTML a la izquierda, y otra de JavaScript a la derecha. En esta última habrá que introducir el siguiente código:
##### **Código JS a introducir**
```javascript
var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent'
var eventer = window[eventMethod]
var messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message'
vm.initLiveComponent = function() {
eventer(messageEvent, function(e) {
var message = ''
var messageString = ''
if (typeof e.data != 'undefined') {
try {
if (typeof e.data !== 'object') {
message = JSON.parse(e.data)
messageString = e.data
} else {
message = e.data
messageString = JSON.stringify(e.data)
}
} catch (e) {}
} else if (typeof e.message != 'undefined') {
try {
if (typeof e.message !== 'object') {
message = JSON.parse(e.message)
messageString = e.message
} else {
message = e.message
messageString = JSON.stringify(e.message)
}
} catch (e) {}
}
if (messageString.indexOf('eventMap') >= 0) {
$scope.sendFilter('ccaa_name', message.eventMap)
}
})
}
//This function will be call when data change. On first execution oldData will be null
vm.drawLiveComponent = function(newData, oldData) {}
//This function will be call on element resize
vm.resizeEvent = function() {}
//This function will be call when element is destroyed
vm.destroyLiveComponent = function() {}
```
Cuando se haya hecho, se pulsará en el botón de **Compilar y Sincronizar**, y se podrá cerrar la ventana de edición. Seguidamente se salvará el Dashboard para guardar los cambios.
El siguiente paso consistirá en probar el mapa y ver si, efectivamente, funciona todo lo que se ha hecho hasta el momento.
¿Funciona como debe? Pues buenas noticias; el Dashboard está listo, y este tutorial se termina. En caso contrario, comprobad que habéis seguido correctamente todos los pasos y no se ha omitido nada. Si aun así hay algo que falla, dejadnos un comentario.
Esperamos que lo hayáis encontrado útil.
# Estilismo
La parte de diseño no es algo que se fuese a ver en este tutorial, pero por dejar un poco mejor el Dashboard, se va a proceder a dar cierto estilo a los gadgets utilizados.
Tanto para uno como para otro, para acceder a la configuración de estilos hay que pulsar en el botón de **Estilos** del menú desplegable del Gadget.
Aparecerá entonces una ventana de edición de estilos, en donde se podrá elegir diversos parámetros, como el texto del cajetín del Gadget, el color de la fuente de letra, el icono, etc. Para este ejemplo se han usado las siguientes propiedades:
El resultado es bastante agradecido.
