Gráficos dinámicos con Open Flash Chart en ASP.NET y UpdatePanels

Todos los códigos de este post os los podéis descargar desde aquí. Todo el proyecto ha sido realizado con Visual Web Developer 2005 Express Edition.

Buenas, hace tiempo que tenía ganas de escribir este artículo sobre la creación de gráficos sobre ASP.NET utilizando la librería flash OpenFlashChart. Este componente flash nos permite crear gráficos muy versátiles, de muy diversos tipos y totalmente customizables en estilo. Además, es código abierto y libre tanto para uso personal como comercial. Aunque ya ha sido liberada la versión 2 (con cambios sustanciales en la forma de pasar los datos), este artículo está basado en la versión 1.9.7 que fue la que inicialmente me descargué en su momento y con la que trabajé.

Introducción del por qué y el cómo
En la página de OFC podéis encontrar multitud de ejemplos, tutoriales, foros, etc. por lo que no voy a explicar aquí los diferentes tipos de gráficos y las funcionalidades de las que dispone OFC.

Después de leer la documentación y de probar con la librería, me surgió un problema, la necesidad de pasarle datos dinámicamente desde código al gráfico y que se refrescará utilizando UpdatePanels de ASP.net. Es decir, poder generar, actualizar, cambiar el tipo de gráfico, todo ello desde código (entiéndase base de datos) y utilizando el AJAX de ASP.NET. Para conseguir tal propósito, me he apoyado en la librería .NET que viene con la descarga de OFC llamada "OpenFlashChartLibrary.dll". Esta librería trae un control de servidor para renderizar el gráfico, pero en este proyecto no se utiliza, sólo utilizaremos las clases que nos permiten generar el código de los gráficos que entiende el componente flash.

¿Qué es lo que queremos conseguir?

Puedes acceder a las páginas de demo pulsando aquí

Si véis en las páginas de demo, lo que queremos conseguir es un entorno basado en AJAX (UpdatePanels) para la generación y actualización de gráficos. En el ejemplo hay dos páginas:

• La primera (Ejemplo de gráfico dinámico): permite generar un gráfico dinámicamente y anexarle dos series más. Además podemos elegir si cada serie la queremos en forma de barras o líneas. Si elegimos el gráfico como tarta sólo se renderiza la primera serie. Además el gráfico recalcula automáticamente los márgenes de valores máximos a mostrar en base a los datos introducidos (hay un error en la demo, sólo recalcula para la primera serie, lo siente).

• La segunda (Ejemplo de varios gráficos): nos permite generar dos gráficos simultáneamente y actualizarlos de forma independiente, cada uno con sus controles de tipo de gráfico y la serie a mostrar.

¿Cómo lo hacemos?
Todo el tema se basa en la clase RenderizadorGrafico.cs que se encuentra en la carpeta App_Code del proyecto. Dicha clase se apoya en la libreria OpenFlasChartLibrary para la generación del código del gráfico. El funcionamiento general es el siguiente:

1. Le pasamos a la clase la primera serie a pintar junto con varios valores generales (título del gráfico, posiciones decimales, etc)
2. Si tenemos más series le vamos pasando cada una de las series restantes (debe coincidir el número de valores de la serie con los del eje X), con su nombre.
3. Llamamos al método RenderizarGrafico pasándole el código del gráfico (devuelto por los métodos anteriores), la ubicación del componente flash OFC, el div donde queremos que se coloque el gráfico y la página en la que estamos. Este método se encargará de generar el código javascript necesario para mostrar el gráfico y lo inyectará en la página.

La clase RenderizadorGrafico.cs en detalle
La clase RenderizadorGrafico.cs es la encargada de generar el código que entiende el componente OFC para la generación de los gráficos. Esta clase se apoya en la librería OpenFlashChartLibrary.dll que viene con OFC y que simplifica la generación del código. Los métodos de los que dispone la clase son:

• RenderizarGrafico: se le pasa el código del gráfico (obtenido con los otros métodos), la ruta del componente OFC, el div donde colocar el gráfico (uno por cada gráfico) y la página que llama al método. Este método tiene una sobrecarga para cuando tenemos varios gráficos en pantalla en la que le pasamos arrays con los diferentes códigos y los divs donde colocar cada gráfico.
  
• GenerarCodigoGrafico: este método se encarga de generar el código del gráfico que le pasaremos al método RenderizarGrafico. A este método le pasaremos la serie tanto para el eje X como para el eje Y y diferentes parámetros de visualización. Este método dispone de una sobrecarga para la representación de gráficos en forma de tarta que se manejan de forma diferente. En esta sobrecarga se le pasan los valores en formato Object[,], pasando en la primera dimensión el valor y en la segunda la etiqueta.
• AnexarGrafico: este método permite anexarle más series a un gráfico.

La clase define al inicio el estilo que se va a aplicar para los gráficos, teniendo varios struct y constantes que se van utilizando a lo largo de los métodos. En cualquier momento se puede modificar dichos valores para cambiar el aspecto de nuestros gráficos.













La clase dispone, al final de un par de métodos que se utilizan para corregir ciertos fallos que me encontré en la librería .net en la generación de gráficos del tipo tarta.

¿Cómo genera la clase el gráfico?
La clase, en el método RenderizarGráfico, genera el código javascript necesario para renderizar el gráfico en pantalla. Utiliza el fichero swfobject.js para la incrustación de elementos flash en páginas web y lo inyecta en la página. Para inyectar el código hace uso del elemento ScriptManager del AJAX de ASP.net.














¿Cómo le pasamos los datos?
Tenemos dos formas de pasarle los datos a la clase dependiendo del tipo de gráfico que vamos a realizar. Si vamos a crear un gráfico que no sea del tipo tarta tendremos que crearnos lo siguiente:

• Array de strings con los valores del eje X
• Array de doubles con los valores del eje Y
• Float con el valor máximo de la gráfica
• Float con el valor mínimo

Si vamos a generar un gráfico del tipo tarta tendremos que crearnos lo siguiente:

• Array de objects de dos dimensiones (object[2,numero elementos]) que tenga en la dimensión 0 el valor y en la dimensión 1 la etiqueta para ese valor. El componente se encargará de pintarlos en el orden correcto.

Lo último, ¿qué código ponemos en el aspx?
Finalmente, para que nuestro gráfico se vea correctamente tendremos que crearnos en la página un div donde vaya a ser colocado. Para utilizar AJAX en los refrescos del gráfico, pondremos dicho div dentro de una estructura UpdatePanel y le pondremos los triggers pertinentes.


















Final
Espero que os haya gustado este artículo y que os pueda servir. Personalmente, esta solución se encuentra en entornos de producción y funciona perfectamente. Como siempre, agradeceré cualquier comentario.

Inscripción al concurso de blogs del 20 minutos

He inscrito este blog en el concurso de la revista 20 minutos, en la categoría de mejor blog de tecnología. Si os gusta el contenido que publicamos aquí, os agradeceríamos que nos votaseis en cuanto empiecen las votaciones (15 de Octubre).

La dirección del concurso es http://www.20minutos.es/premios_20_blogs y el nombre con el que se ha inscrito éste es "N-Idea de muchos temas".

Uso de Transacciones en C# con TableAdapters

Actualización (10-10-2008): el enlace correcto al artículo de Mike Pagel es http://www.codeproject.com/KB/dotnet/transactionta.aspx. Gracias Diego.
Actualización: ha habido un error con el enlace el artículo de Mike Pagel, podéis descargaros su clase desde la dirección http://www.nidea-soluciones.com/PruebasAJAX/TransactionSupport.zip

En este nuevo artículo voy a abordar el tema de la gestión de transacciones cuando trabajamos con TableAdapters generados por Visual Studio. El trabajo con TableAdapters generados por Visual Studio es muy cómodo, en el sentido que genera toda la lógica de acceso a datos y la representación de los mismos con Datatables, pero en el momento en que queremos utilizar transacciones en nuestros accesos a base de datos, el tema se complica. En determinados entornos, sobre todo a la hora de programar sistemas grandes, el uso de transacciones se vuelve inevitable. En este artículo vamos a ver una forma muy cómoda de usar transacciones con TableAdapters generados por Visual Studio.

Un poquito de teoría
Antes de nada, vamos a ver un poco cómo va el tema de las transacciones. ¿Para qué sirven las transacciones? Una transacción lo que nos permite es controlar un grupo de sentencias a base de datos de forma que podamos o bien dar marcha atrás a todas las sentencias o bien confirmar el bloque completo. El control del grupo de sentencias lo lleva la base de datos, de forma que el programador sólo debe indicar si se confirma (Commit Transaction) o no (Rollback Transaction) el grupo de sentencias. En el siguiente dibujo os pongo un ejemplo:





Como podéis ver, desde el momento en el que iniciamos la transacción, todas las operaciones quedan registradas y si realizamos un rollback deshacemos las hechas y si hacemos un commit, la transacción se termina y los cambios quedan confirmados.
Pero, ¿qué pasa si hacemos un select sobre un campo actualizado en una transacción no confirmada? Buena pregunta, porque se plantea un problema, si la sentencia no está confirmada, el gestor de base de datos no puede asegurar que ese dato sea correcto. En ese caso entran en juego los niveles de aislamiento de transacciones (Isolation Levels) que, básicamente, lo que deciden es cómo se debe comportar el gestor de base de datos en estas situaciones.

Bueno, al lío
Vamos a ir paso a paso, lo primero que vamos a hacer es crearnos una aplicación de Windows Forms en C# (me supongo que sabéis hacerlo). Para todo vamos a utilizar la versión gratuita (Express) de visual studio, en concreto Visual C# 2005 Express Edition.

1. Crearse un proyecto "Aplicación para Windows"
2. En la pantalla principal nos creamos los siguientes controles











3. Nos creamos una nueva base de datos en SQL Server 2005 Express Edition que se llame "PruebaTransacciones" con una tabla llamada "Tabla1" que contenga 2 campos "Id" y "Nombre" y otra llamada "Tabla2" con los mismos campos. La definición es la siguiente:
























4. Nos creamos en nuestro proyecto dos TableAdapters, uno para cada una de las tablas que hemos creado en base de datos.















Por ahora, nuestro proyecto y los TableAdapters nos tienen que quedar de la siguiente manera:









Ahora mismo no disponemos de soporte para transacciones porque los tableadapters generados no lo incluyen. Es en este momento cuando le vamos a introducir esa nueva funcionalidad. Vamos a utilizar una clase creada por Mike Pagel y que podéis encontrar en su artículo del CodeProject http://www.codeproject.com/useritems/typed_dataset_transaction.asp. Lo que vamos a hacer es sobreescribir la clase base de los tableadapters con esta que incorpora las funcionalidades de las transacciones. Para ello, incluiremos la clase en nuestro proyecto y en las propiedades de los TableAdapters, pondremos el nombre de la clase en la propiedad BaseClass:










En mi caso le he puesto Transaccion.TransactionSupport porque el namespace de la clase es Transaccion.

Utilizar las transacciones
Ahora que tenemos soporte para transacciones vamos a utilizarlas en nuestra pantalla. Teníamos creados un botón y dos radiobuttons, vamos a programar el evento Click del botón de la siguiente manera:






















Lo que hacemos es insertar un registro en la tabla1 y confirmamos o deshacemos la operación en base a los radiobuttons que se pusieron. Ahora vamos a modificar un poco el código para realizar una operación sobre las dos tablas compartiendo la transacción:
























En este caso, hemos igualado la transacción secundaria con la principal para poder interactuar con varias tablas a la vez. El último paso es: ¿cómo pasar una transacción por diferentes clases y métodos para actuar sobre múltiples tablas sin tenerlo todo en el mismo método? La pregunta es larga pero la respuesta es corta, veamos la siguiente modificación al método del botón:






















En este caso, estamos instanciando la clase ManejadorTabla2 y llamando al método ActualizarTabla para guardar los cambios en la tabla2. A este método, aparte de los registros le estamos pasando la transacción. El código interno del método es el siguiente:






















Lo que hacemos en este método es controlar si se pasa como argumento una transacción o no. Si el método falla, lo que hacemos es devolver un false para el método que controla la transacción decida qué hay que hacer. En caso que no se pase transacción, el método se comporta de forma normal.

Conclusión
Ciertamente, el uso de transacciones en entornos grandes es obligatorio. No nos podemos plantear un sistema sin control de transacciones porque antes o después se haría inviable su programación. Creo que esta solución al problema es muy simple, elegante y efectiva y os animo a probarla. Como siguiente paso para el que guste de estos temas queda la modificación de la clase para adaptarlas a entornos no SQLServer como puede ser MySql. El código es muy sencillo y creo que se podría modificar rápidamente.

En fin espero que os haya gustado este articulillo sobre transacciones.

Motor de Informes Dinámicos con itextsharp (II)

Hola de nuevo a todos, ha pasado un tiempo desde la primera parte del tutorial, pero ya he encontrado tiempo para escribir esta segunda parte (más interesante que la primera). En la primera parte vimos cómo funcionaba la librería itext# para generar informes PDF al vuelo. En esta segunda parte lo que veremos será cómo crear plantillas XML para juntarlas posteriormente con datos y generar el PDF.

El inicio de todo
Lo que vamos a hacer es por un lado, crearnos una plantilla XML con parámetros, por otro lado, generar nuestros datos en formato XML (para poder guardarlos en base de datos) y finalmente, juntar las dos cosas y obtener, al vuelo, la plantilla con los datos en formato PDF.

El flujo de datos

El funcionamiento del sistema de plantillas es el siguiente.

Desde la página obtenemos los datos en XML y la plantilla, lo cual va en sesión a la página ImpresionPDF.aspx. Esa página se encarga de llamar a la clase ParseadorPDF.cs que es la que contiene la lógica de negocio para generar el PDF al vuelo. Esa clase devuelve un MemoryStream con el PDF a la página, la cual lo renderizará en pantalla.

La plantilla XML
El primer paso es generarnos la plantilla XML con los tags adecuados que entienda la librería. Para un ejemplo de los tags que se pueden utilizar, en la ayuda nos ofrecen algunos ejemplos. Nosotros vamos a trabajar con el siguiente XML que es muy sencillo:

En este informe utilizamos diferentes tags, como: table, row, cell, newline, itext(obligatorio al inicio y al fin) y en medio hemos introducido tags propios:nomAE, numAE, nomAl y dniAl. Estos serán los parámetros que se sustituirán posteriormente por los valores que le digamos. La librería itextsharp tiene un problema a la hora de parsear los XML en PDFs y es que NO PUEDE TENER ESPACIOS EN BLANCO DENTRO DE LOS TAGS TABLES. Es decir, para generar una plantilla XML, no podemos indentarla, sino que tiene que ir como se muestra en la imagen o dará un error de ejecución.

Los datos a parsear
En este paso, lo que vamos a ver es cómo pasarle los datos que queremos que aparezcan en el informe a la librería para que los junte correctamente. Le vamos a pasar un vector con dos dimensiones, en una dimensión irá un esquema XML con los datos a imprimir y en la otra irá la plantilla a utilizar. El esquema XML es como el siguiente:

A la hora de crear el documento veremos cómo crear este esquema XML para guardarlo en base de datos. Una vez recuperado el documento XML, la creación del vector es la siguiente:

En el vector de objetos “datos” guardamos el XML y la plantilla correspondiente. Seguidamente llamamos a la pantalla ImpresionPDF.aspx que se encargará de generar la plantilla XML.

La página ImpresionPDF.aspx

Esta página es la encargada de recibir los datos desde la sesión y llamar a la clase encargada de generar el PDF. Además de esto, obtiene de base de datos los márgenes a aplicar, las dimensiones del PDF y varios datos de formato propios de la plantilla. Una vez recuperados estos datos llama al método GenerarPDF de la clase ParseadorPDF:

El método devuelve un MemoryStream con el fichero PDF para ser renderizado. Veamos ahora cómo se produce el parseo real de los datos.

La clase ParseadorPDF.cs

Esta es la clase que se encarga de juntar las plantillas con sus respectivos datos. El flujo es el siguiente:

1. Crear el PDF global que va a ser devuelto y ponerle las dimensiones precisas:

2. Recorrer los datos y plantillas pasadas para ir tratando a cada una de ellas. Este método permite que se pasen a la vez varios XML de datos con varias plantillas en el mismo vector de objetos, por lo que lo primero es ir recorriendo las diferentes plantillas. Para cada XML de datos realizamos una conversión a un vector de objects con los datos que es lo que entiende el método:

3. Para cada plantilla con sus datos los juntamos en un PDF temporal que es guardado en una ruta temporal y posteriormente anexado al PDF global que se creó al inicio. En esta parte es donde se realiza la unión real de los datos, creando un hashtable que enlaza cada parámetro con su valor y llamando al método Parse de la librería PDF:

4. Una vez realizado el parseo, lo que tenemos que hacer es eliminar los ficheros temporales que hemos ido creando en el proceso. Estos ficheros se encuentran guardados en la variable subFicheros.

El método ParsearDatos

Este método es el encargado de crear un hashtable que enlace cada parámetro con su valor. Lo primero es crear el hashtable y asignarle los primeros valores fijos:

Seguidamente, para cada parámetro, tendremos que unirlo con su parámetro y asignarle un XMLPeer correcto:

Dependiendo del tipo de parámetro que sea será tratado de una forma o de otra, lo que rellenamos en el método es la propiedad peer.Content con el valor del parámetro y si le queremos incluir más atributos rellenamos la propiedad peer.AddValue.

El método ConcatenarPaginas

Este método se encarga de unir las páginas de los PDF temporales que creamos con la del PDF global que será devuelto a la capa de presentación. El código de este método es el siguiente:

El final

Bueno, con esto termino el artículo. Espero haberos dado una idea inicial de cómo realizar un motor de plantillas basado en XML para la librería itextsharp. No he podido explicar el funcionamiento completo porque eso exigiría muchísimo tiempo pero creo haber ahondado bastante para que podáis seguir vosotros.

Como siempre, para cualquier duda que os surja aquí estoy.

Diseño de redes inalámbricas con Radio Mobile (II)

Actualización (30/05/07): Si alguien instaló en su Ubuntu VirtualBox cuando escribí la entrada, es posible que unos días después, tras actualizar su distribución notara que VirtualBox dejaba de funcionar dando un error de que el driver no estaba presente. Se debía a que hubo una actualización del kernel a la versión 2.6.24-17, para la que los módulos de VirtualBox ya no valían (se podía arreglar simplemente arrancando con el kernel anterior). Pues bien, a quienes les haya pasado ésto les recomiendo que vuelvan a actualizar, pues a partir de hoy ya están disponibles los módulos de VirtualBox para el nuevo kernel, veréis que ya os funcionará sin problemas en su última versión.

En la anterior entrada ya vimos cómo instalar una máquina virtual VirtualBox sobre la que instalaremos ahora nuestro software de Radio Mobile, pero antes de ello vamos a depurar un poquito más nuestra máquina virtual para no tener que andar pulsando el "botón de anfitrión" cada vez que queremos usar el ratón sobre nuestro linux, y para permitir la compartición de carpetas entre el sistema host y el sistema anfitrión, que trabajar en la misma máquina y tener que andar con una memoria usb para pasar ficheros dentro de la misma máquina es un poco triste :).

Abrimos nuevamente nuestra máquina virtual (Aplicaciones -> Herramientas del Sistema -> VirtualBox OSE), la iniciamos (botón "Iniciar"). Cuando la máquina se haya iniciado, pinchamos en el menú "Dispositivos" y pulsamos sobre "Instalar aplicaciones del huésped". Os dirá que no se puede encontrar la imágen .iso de las aplicaciones del huésped, que si queréis descargarla, así que le decimos que la descargue, y luego cuando nos pregunte si queremos montarla, le decimos que sí. Ahora se nos abrirá la pantallita de instalación típica de windows:



Y cuando se nos haya instalado (necesita reiniciar), lo primero que notaréis es que ya no es necesario que pulsemos el CTRL DRCHO para sacar el ratón de la máquina virtual, sino que la ventana se comporta como una más de nuestro Linux y símplemente cuando pasamos el ratón por encima de ella, el ratón se pasa a comportar como si fuera el ratón del sistema Windows, permitiéndonos pulsar sobre sus menús y demás, ésto lo hace todo más cómodo. Además, también hemos instalado en el huésped la aplicación que nos permite la compartición de carpetas entre la máquina y nuestro sistema, pero para ésto aún tendremos que hacer un retoque chiquitín en nuestro sistema anfitrión, que explico a continuación.

Lo primero es crear la carpeta que vamos a usar para intercambiar ficheros entre los dos sistemas (ej: /home/tu_usuario/Intercambio). Una vez creada, la compartimos, que es tan fácil como irse con el Nautilus hasta la carpeta, darle al botón derecho sobre ella y decir "Opciones de Compartición". Os dirá, si es la primera vez que compartís archivos, que tiene que instalar la compartición de ficheros por samba, pero no os preocupéis, le dais a que lo instale y después de instalarlo será necesario que cerréis sesión y volváis a abrirla para que funcione. Una vez hecho esto volvéis a la carpeta a su "Opciones de Compartición" y pincháis en compartirla, quedando así:


Le decís "Crear compartición" y os dirá...


Pues bien, pulsad en "Añadir los permisos automáticamente", y listo, la carpeta se os debería mostrar en el nautilus de esta guisa...

...lo que os hará saber que está todo en orden.

Ahora ya para poder compartir ficheros desde uno al otro lado, nos vamos a la máquina virtual (Windows XP) y ahí pinchamos en "Inicio -> ejecutar". Escribimos "cmd" y pulsamos "enter". Lo que nos saldrá es un interprete de comandos de windows. Ahí escribiremos "net use Z: \\127.0.0.1\Intercambio". Nos dirá que se ha terminado la operación con éxito. Ahora ya podremos ver nuestra carpeta en windows como si se tratase de una unidad distinta (que hemos llamado Z:) mientras en GNU/Linux sigue siendo nuestra carpeta /home/tu_usuario/Intercambio. ¿A que mola?

Bien, una vez configurado todo esto, llegó la hora de instalar el Radio Mobile, nos vamos a la página de descarga, lo descargamos y seguimos los pasos que ahí nos pone, que son pocos y fáciles, y los cuento a continuación:
1. Descargamos el fichero que se enlaza en el paso 1 (step 1) y que viene a ser una librería. Después pinchamos, decimos un sitio donde queremos que se descombrima y luego vamos ahí y lo ejecutamos para que se instale en nuestro sistema.
2. Creamos la carpeta C:\Radio_Mobile
3. Descargamos el fichero que pone en "step 3" y lo descomprimimos dentro de la carpeta Radio_Mobile que creamos en el paso anterior.
4. Hacemos lo mismo con el fichero que se enlaza en "step 4".
5. Descargamos el fichero que se enlaza para el caso de lengua castellana (spanish language), y lo descomprimimos dentro, como en los pasos anteriores.
6. Creamos una carpeta que se llame por ejemplo "mapas" donde meteremos los mapas que nos descarguemos.
7. Descargamos y descomprimimos, como antes, el fichero que está enlazado en "File wmap.zip".
8. Ejecutamos el fichero "rmUpdatespa.exe" dentro de nuestra carpeta Radio_Mobile (veréis una pantallita como la que sigue).


Le damos a Siguiente, actualizamos y listo.

¡Bien! Ya tenemos instalado el software. De hecho, si queréis podéis probarlo ejecutando el fichero "rmwspa.exe", os saldrá algo como...


Pero aquí no acaba todo, porque ahora hay que descargarse los mapas SRTM (mapas topográficos). En realidad Radio Mobile admite varios tipos distintos de formatos de mapas, pero los SRTM son los que para la región de latinoamérica que queremos tratar ofrecen mayor precisión, y para nosotros que el mapa sea preciso será extremadamente vital, pensad que si uno diseña una red perfectamente, se va a la selva, instala equipos, antenas y torres y resulta que luego la señal no llega al otro extremo, el problema es bastante serio (obviamente en la realidad no son estas las únicas pruebas que se hacen antes de instalar los equipos), pero está claro que el software no nos sirve si no usamos mapas medianamente precisos.

Estos mapas SRTM se pueden conseguir de varios sitios, yo os contaré el proceso descargándolos del servidor ftp de la NASA, para lo que os recomiendo que os descarguéis e instaléis el filezilla en vuestra máquina virtual de windows (a nosotros nos interesará el "Filezilla Client" puesto que lo que queremos es un cliente FTP, no un servidor).

Ahora abrimos el Radio Mobile (para agilizar el proceso os recomiendo que creéis un acceso directo al fichero "rmwspa.exe" en el escritorio). Y buscamos las coordenadas aproximadas de nuestra zona de trabajo. Para ello pinchamos en "Archivo -> Propiedades del mapa", y ahí le damos a "Seleccionar un nombre de ciudad". Buscamos la ciudad de Iquitos, que es la ciudad más grande de la selva peruana y que está bastante cerca de nuestra zona de actuación. así, se colocarán automáticamente las coordenadas de esta ciudad (Latitud: -3,85 ; Longitud: -73,22). Así ya nos podemos hacer una idea de que si la región del Napo está ligeramente al noroeste de Iquitos, necesitaremos los mapas correspondientes latitudes más o menos de entre 0 y 5 grados sur y de longitudes entre 68 y 78 grados oeste (para todo esto google earth os puede ayudar bastante, yo he elegido un cuadrante amplio que más o menos encuadra todo lo que podríamos necesitar para nuestro diseño).

Y bien, ahora que ya tenemos eso claro abrimos el Filezilla que antes habíamos instalado. En el campo de servidor copiaremos...
ftp://e0srp01u.ecs.nasa.gov/srtm/version2/SRTM3/South_America
...y le damos a conexión rápida.
Como véis lo que vamos a hacer es buscar dentro de la sección que se ha abierto a la derecha los mapas que corresponden a las latitudes y longitudes que buscamos y copiarlos a nuestra carpeta de "mapas" que nos creamos antes. Para ello simplemente buscamos desde el fichero S01W068.hgt.zip al fichero S01W078.hgt.zip y los arrastramos a nuestra carpeta mapas que tendremos abierta en la sección de la izquierda, luego hacemos los propio con los que van de S02W068.hgt.zip a S02W078.hgt.zip, con los de S03W068.hgt.zip a S03W078.hgt.zip, con los de S04W068.hgt.zip a S04078.hgt.zip y finalmente con los que van de S05W068.hgt.zip a S05W078.hgt.zip y así habremos cubierto el cuadrante que necesitábamos.

Nota: Cuando lo que queramos sea descargar mapas de otra zona, podéis acceder al servidor entrando con el Filezilla en la dirección ftp://e0srp01u.ecs.nasa.gov/srtm/version2/SRTM3/ y buscando por la región que queráis acceder

Ahora en el Radio Mobile pinchamos en "Archivo -> Propiedades del mapa", volvemos a establecer Iquitos como centro del mapa, en Ancho y Alto pondremos 800 x 600, seleccionamos la ubicación de los mapas y establecemos que son de tipo SRTM, ponemos una altitud de 200 km para tener bastante plano y pinchamos en "Extraer".


El mapa resultante...


...está centrado en la ciudad de Iquitos y abarca hasta la unión del Napo con el Amazonas, así que vemos que realmente, si nuestra red está en el río napo, tendremos que subir nuestro mapa más hacia arriba, pero bueno, empezaremos centrando el mapa en uno de los puntos y ya iremos afinando. Claro que eso será ya en la siguiente entrega de esta saga de entradas, que pa una entrada ésto ya se está convirtiendo en demasiao largo :).

De toas formas, las coordenadas de nuestros puntos, por si alguno/a quiere ir probando a averiguar como funciona la cosa, son:

Cabo Pantoja: 0º58'13,26''S 75º10'29,21''O
Torres Causana: 1º6'16,53''S 75º0'14,17''O
Tempestad: 1º17'22,81''S 74º52'27,42''O
Tupac Amaru: 1º21'46,55''S 74º44'42,89''O
Angoteros: 1º34'9,54''S 74º36'20,17''O
Campo Serio: 1º47'35,48''S 74º42'50,09''O
Rumi Tuni: 2º3'16,22''S 74º26'9,30''O
San Rafael: 2º22'1,43''S 74º6'42,91''O
Copal Urco: 2º20'23,41''S 73º47'26,23''O
Santa Clotilde: 2º29'22,07''S 73º40'41,02''O
Tacsha Curaray: 2º48'47,46''S 73º32'27,30''O

Saludetes chavalinos y chavalinas y hasta dentro de poquito.