Desarrollo de una app hibrida movil con Ionic 2 y Visual Studio


Ionic es un popular framework front-end JavaScript para desarrollar aplicaciones móviles multiplataforma usando Apache Cordova . El Marco Iónico da a las aplicaciones Cordova una apariencia nativa y ajusta automáticamente esa apariencia a través de las plataformas. Puede utilizar Visual Studio 2017 y Visual Studio Tools para Apache Cordova (TACO) para crear y depurar fácilmente aplicaciones multiplataforma Ionic.

En este artículo, vermos como configurar un entorno de desarrollo de Visual Studio 2017 para Ionic 2 y crear una versión Ionic 2 de la aplicación Weather que se muestra a continuación:

Aplicación de Tiempo Acabado

Requisitos

Para administrar, codificar, ejecutar y depurar aplicaciones Ionic 2 utilizando Visual Studio, debe instalar lo siguiente:

  • Visual Studio 2017
  • Herramientas de Visual Studio para Apache Cordova
  • Plantillas de Visual Studio Ionic 2
  • Dependencias de plantillas Ionic 2 (descritas a continuación)

Instalación de las plantillas de Ionic 2

  1. Si aún no lo ha hecho, instale Visual Studio 2017 y TACO.Bajo las portadas, las aplicaciones de Ionic son aplicaciones de Apache Cordova, necesitará un entorno de desarrollo de Cordova funcional antes de poder desarrollar aplicaciones usando Ionic.Compruebe que puede crear y ejecutar la aplicación predeterminada Cordova Blank . En Visual Studio, abra el menú Archivo , seleccione Nuevo y, a continuación, Proyecto . En el cuadro de diálogo del nuevo proyecto, expanda la sección de plantillas de JavaScript , seleccione Aplicaciones móviles y , a continuación, elija la plantilla de aplicación en blanco (Apache Cordova) . Dé al nuevo proyecto un Nombre y Ubicación y luego haga clic en el botón Aceptar . Presione F5 para crear y ejecutar el nuevo proyecto utilizando la nueva opción Simular en explorador . El navegador Chrome debe abrir y mostrar el contenido de la aplicación.
  2. Instale la plantilla de Ionic en Visual Studio seleccionando el menú Herramientas , luego Extensiones y actualizaciones …. En el cuadro de diálogo Extensiones y actualizaciones, seleccione Online . En el cuadro de búsqueda situado en la esquina superior derecha del cuadro de diálogo, escriba Ionic 2 . Seleccione la opción Ionic 2 Templates en la lista. Haga clic en el botón Descargar para iniciar la instalación.              De Como Obtener las Plantillas jónico                                 Los archivos de plantilla se descargarán, a continuación, Visual Studio iniciará automáticamente el proceso de instalación. Cuando se le solicite, haga clic en el botón Instalar para comenzar la instalación.                     Instalación de las Plantillas de Ionic
Nota:Las plantillas Ionic no pueden aparecer en Visual Studio hasta que se reinicie. Cierre y vuelva a abrir Visual Studio antes de continuar.

Creación de un proyecto Ionic en Visual Studio

  1. Crear un nuevo proyecto Ionic. Abra el menú Archivo , seleccione Nuevo y luego Proyecto . En el cuadro de diálogo del nuevo proyecto, expanda la sección de plantillas de TypeScript y, a continuación, seleccione Apache Cordova Apps . Ionic ofrece tres estilos de aplicación por defecto (otras plantillas están disponibles en línea): Blank , Sidemenu y Tabs ; Esto es un proyecto simple, así que selecciona la plantilla en blanco .Asigne al nuevo proyecto un nombre y una ubicación y, a continuación, haga clic en el botón Aceptar . Esta aplicación se convertirá más tarde en nuestro proyecto de aplicación meteorológica, por lo que probablemente debería llamarla aplicación meteorológica o aplicación meteorológica Ionic 2 para guardar el trabajo más tarde.Cuadro de Diálogo Nuevo Proyecto
  2. Compruebe el archivo Readme del nuevo proyecto de Ionic para cualquier herramienta adicional que se debe instalar para utilizar la plantilla.Nodo de dependencias                                                           En el momento de escribir este post, solo necesitará instalar la extensión NPM Task Runner .Los requisitos pueden cambiar a medida que se realizan actualizaciones a las plantillas. Para instalar las extensiones necesarias, abra el menú Herramientasy seleccione Extensiones y actualizaciones . Utilice la búsqueda para localizar e instalar las extensiones requeridas.
  3. Ionic es un marco pesado, que requiere una gran cantidad de herramientas y bibliotecas para operar. Una vez que Visual Studio crea el nuevo proyecto, inicia un proceso para descargar e instalar los componentes necesarios mediante Node Package Manager (npm). Espere unos minutos mientras se instalan los paquetes ncm de Ionic.
    Nota :Este proceso tomará varios minutos dependiendo del sistema y las velocidades de conexión a Internet.

    Para comprobar el progreso, abra el Explorador de soluciones y busque el nodo Dependencias . Debería ver Restaurar … si no lo hace, expanda el nodo Dependencias en el Administrador de soluciones y, a continuación, haga clic con el botón derecho en la carpeta npm y seleccione Restaurar paquetes .

    Nodo de dependencias del Explorador de soluciones

    Puede supervisar el proceso de instalación del paquete a través de la ventana de resultados de Visual Studio. Abra el menú Ver , luego seleccione Salida o utilice el método abreviado de teclado Ctrl-W + O :

    Corredor de tareas

  4. En este punto, usted tiene un proyecto de aplicación Ionic completo listo para funcionar. Para probar y depurar la aplicación en Visual Studio, seleccione una plataforma de destino en la Barra de herramientas estándar, seleccione un dispositivo de destino y pres F5 para ejecutar la aplicación en el destino seleccionado. El desarrollo de aplicaciones iOS requiere alguna configuración adicional                                                                                Aplicación JONICA Que se ejecuta en Android

Creación de la aplicación de tiempo

Ahora, vamos a hacer algo con esta aplicación que creaste. Usted tomará el proyecto de aplicación en blanco y lo convertirá en la aplicación de tiempo mostrada anteriormente. En las siguientes secciones, comenzará agregando una página de Condiciones actuales , luego conectará en un cuadro de búsqueda y, finalmente, agregará un área para mostrar los datos de pronóstico . Empecemos.

La aplicación utiliza el servicio gratuito OpenWeatherMap para recuperar las condiciones meteorológicas de una ubicación. Antes de poder utilizar el servicio, debe configurar una cuenta y solicitar una clave de API para su API Condiciones actuales.Apunte su navegador a OpenWeatherMap y configure una cuenta. Una vez que tenga un inicio de sesión válido, vaya a la página API del servicio y suscríbase al servicio de datos Tiempo actual y, a continuación, genere una clave de API.

Nota :Anote la clave de la API como lo necesitará más adelante en el código TypeScript de la aplicación.

Configuración del proyecto de aplicación

  1. Comience configurando algunas opciones de configuración para la aplicación.En Visual Studio Solution Explorer, haga doble clic en el archivo config.xmldel proyecto. Visual Studio abrirá un editor personalizado como el que se muestra en la siguiente figura:Modificación del archivo Config.xml de la Aplicación                          Como mínimo, establezca los valores de nombre de pantalla y nombre de paquete del proyecto; Puede que también desee actualizar los campos AutorDescripción .
  2. De forma predeterminada, la aplicación muestra datos meteorológicos basados ​​en la ubicación actual del dispositivo, por lo que necesitaremos utilizar el complemento Cordova Geolocation para añadir esta capacidad a nuestra aplicación. Puede utilizar las capacidades de geolocalización incorporadas del navegador, pero Cordova y Ionic proporcionan capacidades especiales que hacen que el uso de la geolocalización en una aplicación de Ionic sea un poco más fácil.Cambie a la pestaña Plugins del editor y seleccione el complemento Geolocation en la lista. Haga clic en el botón Agregar para agregar el complemento al proyecto.Añadiendo el plugin de Geolocalización de Córdova                 Presione la tecla Ctrl + S del teclado para guardar sus cambios, luego cierre el archivo del editor.
  3. Abra el archivo src\index.html del proyecto y cambie el título de la aplicación. Esto no es un paso obligatorio, pero si más tarde prueba la aplicación en el navegador, el título de la aplicación será correcto.
    <title>Weather App Ionic</title>

Generación de un proveedor de tiempo

Ahora, vamos a empezar a trabajar en el código de la aplicación. Por convención, las aplicaciones iónicas segregan fuentes de datos de otros tipos de código de aplicación utilizando un tipo de componente Proveedores especial. Dado que los datos meteorológicos provienen de una fuente externa y no queremos que el código de la aplicación llame directamente al servicio, haremos un proveedor de tiempo y pondremos allí todo el código de acceso a la aplicación.

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta src del proyecto y seleccione Agregar -> Nueva carpeta . Asigne un nombre a los providers carpetas y presione la tecla Intro . Esto crea una carpeta para todos los proveedores que usará la aplicación (solo tendremos una, pero muchas aplicaciones de Ionic tendrán varias).
  2. Haga clic con el botón derecho en la nueva carpeta de providers y seleccione Agregar -> Nuevo elemento . En el cuadro de diálogo que aparece, seleccione Ionic 2 Provider y, en el campo Name , escriba Weather.De Como para contactar el Proveedor de Servicios meteorológicos                                   La CLI de Ionic creará el proveedor en src\providers\Weather.ts
  3. Ahora que usted tiene el proveedor de Weather , usted tiene que decir Ionic sobre él. Abra el archivo src\app\app.module.ts del proyecto y agregue la línea siguiente a la sección de importaciones en la parte superior del archivo:
    import { WeatherProvider } from '../providers/weather';
  4. A continuación, agregue una referencia al proveedor de clima en la matriz de providers del archivo:
    providers: [WeatherProvider, {provide: ErrorHandler, useClass: IonicErrorHandler}]

    Guarde los cambios antes de continuar.

Codificación del proveedor de tiempo

En esta sección, agregaremos código al Proveedor de tiempo para conectarse con la API meteorológica externa y entregar datos a la aplicación.

  1. Abra el archivo src\providers\Weather.ts recién creado y modifique la importación @angular/http en la parte superior del archivo para que se vea como sigue:
    import { Http, Response } from [email protected]/http';

    El componente HTTP se carga por defecto en cualquier proveedor, lo que está haciendo aquí es añadir el componente de respuesta que usaremos en el código del proveedor más adelante.

  2. Aún en la parte superior del archivo, agregue una importación que cargue el módulo toPromise :
    import 'rxjs/add/operator/toPromise';

    Cuando haya terminado, la sección de importaciones en la parte superior del archivo se verá así:

    import { Injectable } from [email protected]/core'; import { Http, Response } from [email protected]/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise';
  3. En la parte superior de la clase Weather , agregue las siguientes declaraciones de variables:
    private weatherEndpoint = 'http://api.openweathermap.org/data/2.5/'; private weatherKey = '';

    weatherKey variable weatherKey con la clave API que obtuvo anteriormente del servicio meteorológico.

  4. Después del constructor de la clase de weather , agregue el código siguiente:
    getCurrent(loc: any): Promise<any> { let url: string = this.makeDataURL(loc, 'weather'); return this.http.get(url) .toPromise() .then(this.extractData) .catch(this.handleError); } private makeDataURL(loc: any, command: string): string { //Build a weather service URL using the command string and //location data that we have. let uri = this.weatherEndpoint + command; //Do we have a location? if (loc.long) { //then use the 'grographical coordinates' version of the API uri += '?lat=' + loc.lat + '&lon=' + loc.long; } else { //Otherwise, use the zip code uri += '?zip=' + loc.zip; } //Configure output for imperial (English) measurements uri += '&units=imperial'; //Use the following instead for metric //uri += '&units=metric'; //Append the API Key to the end of the URI uri += '&APPID=' + this.weatherKey; //Return the value return uri; } //'Borrowed' from //https://angular.io/docs/ts/latest/guide/server-communication.html private extractData(res: Response) { //Convert the response to JSON format let body = res.json(); //Return the data (or nothing) return body || {}; } //'Borrowed' from //https://angular.io/docs/ts/latest/guide/server-communication.html private handleError(res: Response | any) { console.error('Entering handleError'); console.dir(res); return Promise.reject(res.message || res); }

    Al iniciar, la aplicación pasa la ubicación actual (longitud y latitud) a la función getCurrent . Al buscar una ubicación utilizando un código postal de Estados Unidos, se pasa el código postal en su lugar. getCurrent llama a la API apropiada para obtener los datos meteorológicos actuales, pero usa makeDataURL para dar formato a la URL de la solicitud correctamente dependiendo de si tiene una ubicación o un valor de código postal.

    La función extractData formatea los datos devueltos por la llamada API como JSON. Este código podría ser fácilmente incluido directamente en el método getCurrent , pero como verás más adelante, este código se utiliza más de una vez por la aplicación, por lo que tenía sentido para mover una función separada.

Crear la página Condiciones actuales

  1. Abra el archivo src\pages\home\home.html y reemplace el contenido del archivo por lo siguiente:
    <ion-header> <ion-toolbar> <ion-buttons right> <button ion-button (click)="refreshPage()"> <ion-icon name="refresh"></ion-icon> </button> </ion-buttons> <ion-title> Weather App (Ionic 2) </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-list no-lines> <!--show this if there are no items in the list--> <ion-item [hidden]="c_items.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <!--Display the current conditions data we have --> <ion-item *ngFor="let c_item of c_items"> <p><strong>{{c_item.name}}:</strong> {{c_item.value}}</p> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Visual Studio Tools for Apache Cordova</ion-title> </ion-toolbar> </ion-footer>

    Lo que se ve en el archivo es referencias a componentes iónicos, así como algunos códigos Angulares también. Este marcado es un subconjunto del HTML de la página, el resto se encuentra en los archivos src\index.html y src\app\app.html . En la puesta en marcha, el marco iónico reemplaza el contenido de la etiqueta <ion-app></ion-app> del archivo src\index.htmlarchivo src\app\app.html <ion-nav [root]="rootPage"></ion-nav>continuación, pasa contenido HTML dentro y fuera de esa etiqueta como el usuario utiliza la aplicación. En este caso, cuando la aplicación se inicia, el contenido de la página src\pages\home\home.html se analiza y procesa.

    El encabezado contiene una barra de herramientas que muestra el título de la aplicación y un botón de actualización que el usuario puede tocar para actualizar los datos meteorológicos que se muestran en la página.

    La etiqueta de ion-content define la parte del contenido que comprende el contenido dinámico de la página. En este ejemplo, muestra una <ion-list>de elementos; Básicamente un listview. En este caso, procesa el contenido de la matriz c_items como una lista usando una directiva Angular: *ngFor="let c_item of c_items" que se *ngFor="let c_item of c_items"través de cada elemento de la matriz. A medida que el código loops, asigna cada elemento de la matriz a c_item , entonces el código de plantilla que sigue muestra las propiedades de name y value del objeto c_item . Verá cómo la matriz c_items se rellenará pronto.

  2. Abra el archivo src\pages\home\home.ts del proyecto. En la parte superior del archivo, añada las importaciones para el complemento Geolocalización y el proveedor de clima:
    import { Geolocation, Keyboard } from 'ionic-native'; import { WeatherProvider } from '../../providers/weather';
  3. También en la parte superior del archivo, modifique la importación ionic-angular por lo que se ve así:
    import { AlertController, LoadingController, NavController, Platform } from 'ionic-angular';

    Esto carga algunos componentes adicionales usados ​​por el código de la página:

    • AlertController gestiona la visualización de diálogos de alerta.
    • LoadingController gestiona la visualización de una hiladora de carga.
    • NavController gestiona la navegación entre las páginas.
    • Platform proporciona utilidades relacionadas con la plataforma.
  4. Dentro de la clase HomePage , agregue las siguientes declaraciones de variables:
    degreeStr: string = ' degrees (F)'; //an empty object (for now) to store our location data passed to the API currentLoc: any = {}; //current weather items array c_items: Array<any> = [];
  5. Agregue los siguientes parámetros al constructor de clase HomePage :
    public alertController: AlertController, public loadingCtrl: LoadingController, public platform: Platform, public weather: WeatherProvider,

    Cuando haya terminado, debería verse así:

    constructor( public alertController: AlertController, public loadingCtrl: LoadingController, public nav: NavController, public platform: Platform, public weather: WeatherProvider ) { }
  6. Reemplace la función openLink en el cuerpo de la clase HomePage con lo siguiente (la función openLink es parte de la plantilla en blanco iónica y no es utilizada por la aplicación Weather):
    ionViewDidLoad() { //Once the main view loads //and after the platform is ready... this.platform.ready().then(() => { //Setup a resume event listener document.addEventListener('resume', () => { //Get the local weather when the app resumes this.getLocalWeather(); }); //Populate the form with the current location data this.getLocalWeather(); }); } refreshPage() { this.showCurrent(); } getLocalWeather() { let locOptions = { 'maximumAge': 3000, 'timeout': 5000, 'enableHighAccuracy': true }; Geolocation.getCurrentPosition(locOptions).then(pos => { //Store our location object for later use this.currentLoc = { 'lat': pos.coords.latitude, 'long': pos.coords.longitude }; //and ask for the weather for the current location this.showCurrent(); }).catch(e => { console.error('Unable to determine current location'); if (e) { console.log('%s: %s', e.code, e.message); console.dir(e); } }) } showCurrent() { //clear out the previous array contents this.c_items = []; //Create the loading indicator let loader = this.loadingCtrl.create({ content: "Retrieving current conditions..." }); //Show the loading indicator loader.present(); this.weather.getCurrent(this.currentLoc).then( data => { //Hide the loading indicator loader.dismiss(); //Now, populate the array with data from the weather service if (data) { //We have data, so lets do something with it this.c_items = this.formatWeatherData(data); } else { //This really should never happen console.error('Error retrieving weather data: Data object is empty'); } }, error => { //Hide the loading indicator loader.dismiss(); console.error('Error retrieving weather data'); console.dir(error); this.showAlert(error); } ); } private formatWeatherData(data): any { //create a blank array to hold our results let tmpArray = []; //Add the weather data values to the array if (data.name) { //Location name will only be available for current conditions tmpArray.push({ 'name': 'Location', 'value': data.name }); } tmpArray.push({ 'name': 'Temperature', 'value': data.main.temp + this.degreeStr }); tmpArray.push({ 'name': 'Low', 'value': data.main.temp_min + this.degreeStr }); tmpArray.push({ 'name': 'High', 'value': data.main.temp_max + this.degreeStr }); tmpArray.push({ 'name': 'Humidity', 'value': data.main.humidity + '%' }); tmpArray.push({ 'name': 'Pressure', 'value': data.main.pressure + ' hPa' }); tmpArray.push({ 'name': 'Wind', 'value': data.wind.speed + ' mph' }); //Do we have visibility data? if (data.visibility) { tmpArray.push({ 'name': 'Visibility', 'value': data.visibility + ' meters' }); } //do we have sunrise/sunset data? if (data.sys.sunrise) { var sunriseDate = new Date(data.sys.sunrise * 1000); tmpArray.push({ 'name': 'Sunrise', 'value': sunriseDate.toLocaleTimeString() }); } if (data.sys.sunset) { var sunsetDate = new Date(data.sys.sunset * 1000); tmpArray.push({ 'name': 'Sunset', 'value': sunsetDate.toLocaleTimeString() }); } //Do we have a coordinates object? only if we passed it in on startup if (data.coord) { //Then grab long and lat tmpArray.push({ 'name': 'Latitude', 'value': data.coord.lat }); tmpArray.push({ 'name': 'Longitude', 'value': data.coord.lon }); } //Return the new array to the calling function return tmpArray; } showAlert(message: string) { let alert = this.alertController.create({ title: 'Error', subTitle: 'Source: Weather Service', message: message, buttons: [{ text: 'Sorry' }] }); alert.present(); }

    Hay un montón de código allí; Tomar unos minutos y estudiarlo. Esto es lo que hace:

    • ionViewDidLoad : ionViewDidLoad un evento que se ionViewDidLoad cuando la página finaliza la carga. En este caso, la función llama a la función getLocalWeather para iniciar el proceso de obtención de datos meteorológicos para la ubicación actual del dispositivo. Utiliza las capacidades del componente Platform para asegurarse de que no hace nada hasta que es seguro que el contenedor de aplicación nativo y el marco Ionic han finalizado la inicialización.
    • refreshPage : se ejecuta cuando el usuario de la aplicación hace clic en el botón Actualizar de la barra de herramientas. Aquí, actualiza los datos meteorológicos actuales en la página. Esta función obtiene más responsabilidades más adelante.
    • getLocalWeather – Determina la ubicación actual del dispositivo (usando el complemento Cordova Geolocation), luego llama a showCurrent para obtener los datos meteorológicos actuales.
    • showCurrent – Muestra el indicador de carga y luego llama al proveedor de tiempo para obtener datos meteorológicos para la ubicación especificada (ya sea una geolocalización o, posteriormente, un código postal).
    • formatWeatherData – Los resultados que obtiene la aplicación de la API meteorológica dependen de si la aplicación solicita las condiciones actuales o la previsión. No estamos pidiendo datos de pronóstico (todavía) pero, pero más tarde. Esta función construye un objeto de datos meteorológicos a partir de los resultados y tiene un código especial que construye el objeto apropiado en función de si se trata de condiciones actuales o de un pronóstico.
    • showAlert : muestra un cuadro de diálogo de error si se rompe algo.

Ejecute la aplicación en el navegador, un emulador, un simulador o un dispositivo físico conectado al ordenador. Si ejecuta la aplicación en el navegador, utilizando las capacidades de Cordova Simulate de Visual Studio 2017, puede ajustar las coordenadas del dispositivo simulado mediante el panel Geolocation;  Cuando se cargue la aplicación, se le solicitará que autorice el acceso de la aplicación a la ubicación actual del dispositivo, como se muestra a continuación:

Autorización de Geolocalización de Android

Cuando permite el acceso (no toque negar , ya que no podrá hacer mucho con la aplicación si lo hace), debería ver los datos meteorológicos actuales de la ubicación actual como se muestra en la siguiente figura:

Aplicación del tiempo: las Condiciones Actuales del tiempo

No es la aplicación completa de interfaz de usuario, pero al menos se pueden ver los resultados del tiempo. En la siguiente sección, agregamos el cuadro de búsqueda de código postal para que pueda obtener datos meteorológicos para una ubicación específica.

Nota :Si obtienes una pantalla en blanco cuando se inicia la aplicación, asegúrate de haber agregado el complemento Corolle Geolocation al proyecto.

Es útil disponer de datos meteorológicos para la ubicación actual, pero ¿qué pasa si viajas a algún lugar y quieres saber cómo será el tiempo cuando llegues? En esta sección, agregará un cuadro de búsqueda que los usuarios pueden utilizar para obtener datos meteorológicos para un código postal específico de los Estados Unidos.

Nota:El uso del código postal como criterio de búsqueda no funcionará fuera de los Estados Unidos; Si desea utilizar el nombre de la ciudad en su lugar, puede realizar pequeños ajustes a la llamada API del clima para cambiar la forma en que busca la API. Echa un vistazo a los documentos de la API para obtener más información.
  1. Abra el archivo src\pages\home\home.html del proyecto. Dentro del comienzo de la sección <ion-content> , justo antes de la etiqueta <ion-list> , añada la siguiente marca:
     <form (ngSubmit)="setZipCode()"> <ion-item> <ion-label>Type your zip code:</ion-label> <ion-input type="text" [(ngModel)]="searchInput" name="ZipCode"></ion-input> </ion-item> <button ion-button icon-left block> <ion-icon name="search"></ion-icon> Find Weather </button> </form>

    Esto agrega el campo de búsqueda en la parte superior de la página y dirige que la función setZipCode se ejecute cuando el usuario hace clic en el botón Buscar tiempo . La referencia a ngModel indica a Ionic (en realidad Angular) que asigna el valor en el campo de búsqueda a la variable searchInput la aplicación que verá en un segundo.

  2. Abra el archivo src\pages\home\home.ts del proyecto y agregue la siguiente declaración de variable a la parte superior de la clase HomePage (antes del constructor ):
    //Mapped to the search field searchInput: string = '';

    Esto define la variable que se rellenará automáticamente con cualquier cadena que el usuario agregue al campo de búsqueda.

  3. Finalmente, aún en el archivo src\pages\home\home.ts del proyecto, agregue la siguiente función a la clase HomePage :
    setZipCode() { //whenever the user enters a zip code, replace the current location //with the entered value, then show current weather for the selected //location. //Hide the keyboard if it's open, just in case Keyboard.close(); //Populate the currentLoc variable with the city name this.currentLoc = { 'zip': this.searchInput }; //Clear the Zip Code input field this.searchInput = ''; //get the weather for the specified city this.showCurrent(); }

    Esta función responde al usuario pulsando el botón Buscar tiempo y crea un objeto de ubicación y luego llama a la función showCurrent para recuperar los datos meteorológicos del código postal especificado. El código Keyboard.close() utiliza el complemento Ionic Keyboard para ocultar el teclado antes de iniciar la búsqueda. Si el código no lo hace, es posible que el teclado permanezca abierto, bloqueando parte de la página, a medida que la página se actualiza con los nuevos datos meteorológicos.

Cuando ejecute la aplicación, debería ver un campo de búsqueda en la parte superior de la página. Introduzca un código postal de los Estados Unidos y toque el botón para obtener datos meteorológicos para la ubicación especificada.

Aplicación del tiempo: las Condiciones Actuales del tiempo

Agregar una página de previsión meteorológica

La API de tiempo que la aplicación utiliza tiene una API para recuperar datos de pronóstico, así que permite mostrarlo también en la aplicación. Puede agregar otra página a la aplicación, a continuación, utilice un menú u otro método de navegación para cambiar entre vistas, pero el campo de búsqueda complica ese enfoque. En su lugar, utilizaremos un componente de segmento ionic  para dividir la página existente en dos partes: una para las condiciones actuales y otra para el pronóstico.

  1. Comience por actualizar el proveedor de clima para apoyar la obtención del pronóstico del servicio meteorológico. Abra el archivo src\providers\weather.ts del proyecto y agregue el código siguiente a la clase Weather .
    getForecast(loc: any): Promise<any> { let url: string = this.makeDataURL(loc, 'forecast'); return this.http.get(url) .toPromise() .then(this.extractData) .catch(this.handleError); }

    Para obtener el pronóstico, todo lo que el proveedor tiene que hacer es reemplazar el weather con la forecast en la URL de la API, de lo contrario el código es exactamente el mismo.

  2. A continuación, abra el archivo src\pages\home\home.html del proyecto.Eliminar la implementación actual <ion-list> :
    <ion-list no-lines> <!--show this if there are no items in the list--> <ion-item [hidden]="c_items.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <!--Display the current conditions data we have --> <ion-item *ngFor="let c_item of c_items"> <p><strong>{{c_item.name}}:</strong> {{c_item.value}}</p> </ion-item> </ion-list>

    Y reemplácelas por las siguientes:

    <ion-segment [(ngModel)]="displayMode"> <ion-segment-button value="current" (ionSelect)="showCurrent()"> Current </ion-segment-button> <ion-segment-button value="forecast" (ionSelect)="showForecast()"> Forecast </ion-segment-button> </ion-segment>

    0″>Weather data is not available

    {{c_item.name}}: {{c_item.value}}

    {{ f_items.length ? ‘Tap an item to view the forecast for the selected period.’: ‘Forecast data is not available at this time.’ }} {{item.period}}

     

    Esto agrega un segmento a la página usando el componente <ion-segment>y define dos segmentos: current y forecast . El atributo <div> con el [ngSwitch]="displayMode" intercambia en componentes separados <ion-list> basados ​​en el valor asignado a la variable displayMode la página.

  3. Ahora vamos a añadir el código TypeScript que hacen que todo esto funcione. Abra el archivo src\pages\home\home.ts del proyecto y agregue las siguientes declaraciones de variables a la parte superior de la clase HomePage.
    //This is used to set the Ionic Segment to the first segment currentMode: string = 'current'; // used to control which segment is displayed displayMode: string = this.currentMode; //holds forecast data, a separate row for each period f_items: Array<any> = []; //array of day strings used when displaying forecast data days: Array<string> = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  4. Cuando la página se cargue, queremos que la aplicación muestre las condiciones actuales de forma predeterminada, por lo que agregue el siguiente código a la función onViewDidLoad :
    //Switch to the Current segment this.displayMode = this.currentMode

    Esto establece this.displayMode a current . Agregue el código al oyente de sucesos de resume , el código resultante debería tener este aspecto:

    document.addEventListener('resume', () => { //Get the local weather when the app resumes //Switch to the Current segment this.displayMode = this.currentMode //then update it with local weather conditions this.getLocalWeather(); });
  5. Ahora que la página muestra dos segmentos, la función refreshPagenecesita saber qué parte de la página debe actualizarse. Reemplace la función actual refreshPage con el código siguiente:
    refreshPage() { //Which page are we looking at now? if (this.displayMode === this.currentMode) { this.showCurrent(); } else { this.showForecast(); } }
  6. La función setZipCode carga por defecto a las condiciones actuales de carga cuando se introduce un código postal, por lo que debe cambiar a la pestaña Actual antes de obtener resultados. Agregue las siguientes líneas a la función antes de la llamada a this.showCurrent() :
    //Switch to the 'current' tab this.displayMode = this.currentMode;

    La función completa debería tener este aspecto:

    setZipCode() { //whenever the user enters a zip code, replace the current location //with the entered value, then show current weather for the selected //location. //Hide the keyboard if it's open, just in case Keyboard.close(); //Populate the currentLoc variable with the city name this.currentLoc = { 'zip': this.searchInput }; //Clear the Zip Code input field this.searchInput = ''; //Switch to the 'current' tab this.displayMode = this.currentMode; //get the weather for the specified city this.showCurrent(); }
  7. Por último, agregue la función showForecast a la clase HomePage :
    showForecast() { //clear out the previous array contents this.f_items = []; //Create the loading indicator let loader = this.loadingCtrl.create({ content: "Retrieving forecast..." }); //Show the loading indicator loader.present(); this.weather.getForecast(this.currentLoc).then( data => { //Hide the loading indicator loader.dismiss(); //Now, populate the array with data from the weather service //Do we have some data? if (data) { //Then lets build the results array we need //Process each forecast period in the array for (let period of data.list) { //Create a 'record' consisting of a time period's results let weatherValues: any = this.formatWeatherData(period); //Append this, along with the time period information, into the forecast //items array. //Get the forecast date as a date object let d = new Date(period.dt_txt); //Determe the day of the week let day = this.days[d.getDay()]; //And the time let tm = d.toLocaleTimeString(); //Create a new object in the results array for this period this.f_items.push({ 'period': day + ' at ' + tm, 'values': weatherValues }); } } else { //This really should never happen console.error('Error displaying weather data: Data object is empty'); } }, error => { //Hide the loading indicator loader.dismiss(); console.error("Error retrieving weather data"); console.dir(error); this.showAlert(error); } ); }

    Esta función obtiene los datos de pronóstico, luego los formatea para mostrarlo en dos páginas. En primer lugar, se construye una serie de períodos de tiempo que representan los diferentes períodos de pronóstico. Luego, para cada período, agrega un objeto que contiene los datos de pronóstico para ese período. El segmento de pronóstico de la página muestra la lista de períodos de pronóstico y, al pulsar en una entrada, la aplicación eventualmente (verá cómo en la siguiente sección) abre una página separada para mostrar los detalles.

En este punto, si ejecuta la aplicación, debería ver lo siguiente:

Aplicación de Tiempo Acabado

Toque la pestaña de pronóstico y verá la lista de períodos de previsión que se muestra en la siguiente figura:

Aplicación de Tiempo Acabado

Cuando pulsa en un elemento de pronóstico, no pasa nada (por ahora); Que es porque necesitamos una página para mostrar los datos, y no ha agregado uno todavía.

Cómo añadir una página de detalles del tiempo

  1. Para agregar una nueva página a la aplicación, en el Explorador de soluciones, haga clic con el botón secundario en la carpeta src\pages , seleccione Agregar -> Nuevo elemento …. En la lista de opciones que aparece, seleccione Ionic 2 Page , dale un nombre de WeatherDetail y WeatherDetail clic en el botón Add .Una Página para contactar a la Aplicación                                                                 Visual Studio creará una nueva carpeta denominada WeatherDetail en src\pages\ y la rellenará con los archivos de origen de la nueva página: weather-detail.ts , weather-detail.html y weather-detail.scss .Explorador de soluciones con La Página WeatherDetail
  2. Como cuando agregó un proveedor de la aplicación, cuando se agrega una página, es necesario actualizar la configuración de la aplicación para utilizarlo. Abra el proyecto de src\app\app.module.tsarchivo y agregue la siguiente importinstrucción al principio del archivo:
    import { WeatherDetailPage } from '../pages/weatherdetail/weatherdetail';
  3. A continuación, agregue una referencia al WeatherDetailPagecomponente al declarationsentryComponentsmatrices como se muestra a continuación:
    @NgModule({ declarations: [ MyApp, HomePage, WeatherDetailPage ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, WeatherDetailPage ], providers: [Weather, { provide: ErrorHandler, useClass: IonicErrorHandler }] }) export class AppModule { }
  4. Abrir el proyecto de src\pages\weatherdetail\weatherdetail.htmly reemplazar su contenido con el siguiente marcado:
    <ion-header> <ion-navbar> <ion-title>Forecast</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <!--show this if there are no items in the list--> <ion-item [hidden]="forecast.values.length > 0"> <p><strong>Weather data is not available</strong></p> </ion-item> <ion-item [hidden]="forecast.values.length < 1"> Period: {{forecast.period}} </ion-item> <ion-item *ngFor="let item of forecast.values"> <p><strong>{{item.name}}:</strong> {{item.value}}</p> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <ion-title>Visual Studio Tools for Apache Cordova</ion-title> </ion-toolbar> </ion-footer>

    Esto crea una página que muestra el elemento de predicción seleccionado como una lista de namevaluelos valores.

  5. Abra el proyecto de src\pages\weatherdetail\weatherdetail.tsarchivo y reemplazar su contenido con el siguiente código:
    import { Component } from [email protected]/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-weather-detail', templateUrl: 'weatherdetail.html' }) export class WeatherDetailPage { forecast: any; constructor(public navCtrl: NavController, public navParams: NavParams) { //Pull the selected forecast off of navParams this.forecast = this.navParams.get('forecast'); } ionViewDidLoad() { console.log('Weather Detail page loaded'); } }

    Observe que no hay ningún código real en la página, que se debe a la plantilla HTML se encarga de hacer que el Ionic de datos y se encarga de la página de navegación automáticamente. Los tres cambios importantes son:

    • La adición de un NavParamscomponente a la página, que es responsable de transmitir datos entre páginas.
    • La adición de una forecastvariable:
      forecast: any;

      Esta variable es el almacenamiento para el objeto de previsión pasa a la página cuando se abre. Contiene los datos correspondientes al período de predicción actual. La página HTML referencias esta variable como la fuente de los datos que hace que en la página.

    • La adición de una sola línea de código al constructor:
      this.forecast = this.navParams.get('forecast');

      Esto asigna el local de this.forecastobjeto para los datos pasados en el forecastobjeto envía a través del NavParamscomponente

  6. Ahora tenemos que decirle al forecastsegmento de la forma de abrir la página de detalles de pronóstico cuando el usuario pulsa sobre un elemento de la lista. Abrir el proyecto de src\pages\home\home.tsy agregue la siguiente importinstrucción al principio del archivo:
    import { WeatherDetailPage } from '../weatherdetail/weatherdetail';
  7. Todavía en src\pages\home\home.ts, agregue la viewForecastfunción para la clase:
    viewForecast(item) { //When the user selects one of the Forecast periods, //open up the details page for the selected period. this.nav.push(WeatherDetailPage, { 'forecast': item }); }

    HTML de la página ya tiene una referencia a esta función:

    <button detail-push ion-item *ngFor="let item of f_items" (click)="viewForecast(item)"> <ion-icon name="time" item-left></ion-icon> {{item.period}} </button>

Al ejecutar la aplicación ahora, usted debería ser capaz de abrir la previsión de un toque en uno de los períodos de predicción de la lista:

Aplicación página del tiempo Pronóstico

La navegación de la página es manejada por  Ionic y angular, estos  se encargan de añadir la flecha hacia atrás en la esquina izquierda de la barra de herramientas y el cierre de la página cuando se ha intervenido.

¡Eso es! Usted ha completado la Aplicación.

 

Fuente ;https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/first-steps/get-started-with-ionic2

 

 

 

Anuncios

Desarrollo de aplicaciones nativas multiplataforma en Windows


Microsoft  ha demostrado  un  compromiso con el código abierto  ayudando a navegar por herramientas de código abierto, marcos y plataformas, por ejemplo   desarrollando Apache Cordova ,creando y realizando el mantenimiento de complementos de diferentes plataformas,colaborando con Google para ofrecer la herramienta Angular JS 2.0,etc.

Como ejemplo vamos a ver en este post como es posible desarrollar para diferentes entornos moviles usando una de las herramientas mas famosas de desarrollo de Microsoft ,la cual  por cierto esta  disponible para ambientes de educación o formación de forma gratuita

Tipos de aplicaciones móviles

A la hora de crear aplicaciones móviles para plataformas como Android o iOS contamos con varias alternativas:

  • Aplicaciones nativas :muy buen rendimiento y se pueden distribuir desde las tiendas de aplicaciones. Hay que desarrollar las apps para cada entorno  usando herramientas especificas como por ejemplo:

En Android:  Android Studio o Eclipse

En IoS: Swift, Objetive-c  o Xcode

                       En Windows Phone: Visual  Studio

  • Aplicaciones web móviles: un único desarrollo con tecnologías web (js, hrml5 y css).No se distribuyen desde las apps  stores y no permiten acceder a todas las capacidades del hw del móvil. También se está desarrollando las llamadas apps  progresivas
  • Aplicaciones móviles hibridas:se mezclan ambas tecnologías sobre una carcasa  nativa que incrusta una web view. A diferencia de las aplicaciones web móviles pueden distribuirse en las diferentes apps stores incluso permitiendo magnetización de estas. Si bien el rendimiento no es tan bueno como las nativas permiten acceder a diferentes terminales  mediante un   desarrollo web  incluso pudiendo acceder a elementos  hardware . Entre las herramientas mas famosas destacan Phonegapp o Ionic, basadas ambas  en Apache-Cordoba

Creación de  aplicaciones para móviles mediante HTML, CSS y JS

Las aplicaciones móviles híbridas son una combinación de tecnologías web como HTML, CSS y JavaScript, que no son ni aplicaciones móviles verdaderamente nativas, porque consisten en un WebView ejecutado dentro de un contenedor nativo, ni tampoco están basadas en Web, porque se empaquetan como aplicaciones para distribución y tienen acceso a las APIs nativas del dispositivo.

Si sabe cómo crear aplicaciones web, rápidamente se sentirá cómodo creando aplicaciones móviles para iOS, Android y Windows mediante Apache Cordova.

La mayoría de desarrolladores obtiene cerca de un 100 % de reutilización del código aprovechando la API de JavaScript compartida de Cordova para acceder a las funcionalidades de dispositivo nativo, como la cámara, el calendario y los contactos.

Además, debido a que las aplicaciones híbridas utilizan vistas web nativas, puede llevarse su marco JavaScript favorito consigo (marcos como Angular, React e Ionic).

Y hablando de Ionic, es un SDK de código abierto que provee herramientas y servicios para desarrollar aplicaciones móviles híbridas. Está construido por encima de AngularJS y Apache Cordova y se centra principalmente en el look and feel y la interacción con la interfaz de usuario de la aplicación, con la finalidad de simplificar el front-end.

Ionic    es  pues  :

  • Un framework CSS con multitud de elementos de front-end reutilizables y personalizables, que permiten desarrollar una interfaz de usuario relativamente rápido, como por ejemplo encabezados, pies de página, botones de diferentes tamaños y estilos, listas, avatares, tarjetas, formularios, entradas, casillas de verificación, pestañas y,etc .
  • Una biblioteca JavaScript de interfaz de usuario con componentes JS que dan vida a los elementos del front-end y se utilizan como elementos HTML en la aplicación. Uno de los componentes JS de Ionic más utilizados es el componente pestañas,  el cual permite que un determinado contenido se muestre u oculte en función de la pestaña seleccionada por el usuario.

 

 

Visual Studio con Córdova

Debido al aumento de la complejidad de las aplicaciones, necesita más que un editor de texto por lo que el IDE Visual Studio 2017 es una buena  opción  pues integra un editor de código optimizado para la refactorización, el completado automático y la comprensión del código

 

Resumidamente   Visual Studio 2017 ofrece las siguientes  funcionalidades  :

  • Resaltado de sintaxis para ayudarle a identificar los errores visualmente
  • IntelliSense para ayudarle a comprender y codificar mejor las nuevas API
  • Inspección de código para revisar la referencia en línea
  • Si  su aplicación funciona y tiene el aspecto exacto diseñado por usted Tanto si trabaja para iOS, Android o Windows, Visual Studio ofrece compatibilidad de vista previa para una amplia variedad de emuladores y dispositivos anclados a red.Incluso puede implementar y depurar emuladores hospedados en una máquina remota o virtual (por ejemplo, paralelos).
  • Depuración y análisis .Independientemente de dónde se ejecute su código, Visual Studio puede depurarlo (tanto si su código se está ejecutando en un dispositivo iOS, Android o Windows, un emulador o simulador o en un destino de depuración basado en explorador como Ripple). No es necesario cambiar de herramientas cuando crea para otra plataforma. Visual Studio se conecta con casi cualquier destino de implementación.El depurador de Visual Studio le permite revisar el código con puntos de interrupción y notificaciones de excepción automática que exponen el estado del tiempo de ejecución de objetos y variables.Las funcionalidades avanzadas, como editar y continuar, los puntos de interrupción condicionales, los puntos de seguimiento y los números de llamadas ofrecen el tipo de análisis detallado que necesita para que el código resulte divertido y no un juego despiadado de “localización del error”.
  • Acceso a capacidades de dispositivo nativo.Con tecnología de Apache Cordova, sus aplicaciones escritas en HTML, CSS y JavaScript pueden acceder fácilmente a las API de dispositivo nativo que todavía no se encuentran disponibles para los exploradores (por ejemplo, la cámara, el calendario, los contactos, el escáner de códigos de barras, etc.).Lo mejor de todo es que puede acceder a capacidades de dispositivo nativo a través de una API de JavaScript común para obtener la máxima reutilización de código en su aplicación.
  • Conexion  a datos ( a la plataforma de Azure ):con tan solo unas cuantas líneas de código, puede Usar notificaciones de inserción para conectarse con usuarios específicos o audiencias completas,Habilitar la mensajería en tiempo real para provocar conversaciones y el uso compartido entre sus usuarios,Admitir capacidades sin conexión para aquellas ocasiones en las que no haya disponible una conexión de red,Administrar datos de Exchange mediante las API de servicio de Office 365 para compartir y editar calendarios, contactos, archivos, etc.

 

 

 

 

Instalación Visual Studio  para apps moviles

Todo lo que usted necesita para poder comenzar  con Visual Studio es descargar alguna de las siguientes versiones:

El  instalador realiza todo el trabajo pesado necesario para poner en marcha el equipo con los SDK, bibliotecas, herramientas, etc. necesarios para crear aplicaciones multiplataforma.

Para Instalar las herramientas de Cordova con una instalación inicial de Visual Studio siga lso siguientes pasos:

  1. Para instalar Visual Studio Tools para Apache Cordova junto con una instalación limpia de Visual Studio, descargue e inicie el instalador de Visual Studio ( en de algunos de los tres links de arriba o directamente si necesita el  la versión  sin coste en el link  siguiente: Visual Studio Community  :)
  2. El instalador mostrará la lista de componentes instalables mostrada en la siguiente figura.Al instalar  Visual Studio, deberua  asegúrarse  de incluir los componentes opcionales, HTML / JavaScript (Apache Cordova) bajo Desarrollo móvil multiplataforma como vamos a ver.Inicio de instalación de Visual Studio Tools para Apache Cordova
  3. Desplácese por la lista de cargas de trabajo disponibles y localice un grupo denominado Mobile & Gaming .
  4. Marque la casilla de verificación junto a Desarrollo móvil con JavaScript como se muestra en la siguiente figura. Esto permitirá la instalación de los componentes necesarios para las herramientas de Córdoba.  Selección de la instalación de Cordova Tools
  5. Dependiendo de sus necesidades específicas de desarrollo, es posible que deba instalar componentes opcionales adicionales. Por ejemplo, para apoyar el desarrollo de aplicaciones para Android, necesitará agregar soporte para el SDK de Android . Para probar las aplicaciones de Android en los emuladores, debe agregar soporte para Google Android Emulator , como se muestra en la siguiente figura.Si su entorno de desarrollo de Cordova ya incluye estas herramientas, puede omitir la instalación de nuevo aquí y modificar la configuración de Visual Studio Tools para Apache Cordova para apuntar a la instalación existente más adelante.Personalización de la instalación de herramientas de Cordova
  6. Compruebe rápidamente que puede cargar y crear la plantilla de aplicación en blanco predeterminada. En Visual Studio, elija Archivo , Nuevo , Proyecto , JavaScript ,Aplicaciones de Apache Cordova , Aplicación en blanco y nombre el nuevo proyecto “en blanco” y construya con F5. Si tiene algún problema, consulte estos pasos de solución de problemas .
  7. Ionic es un popular framework front-end JavaScript para desarrollar aplicaciones móviles multiplataforma usando Cordova. Puede utilizar Visual Studio 2015 para crear y depurar fácilmente aplicaciones multiplataforma Ionic.http://www.youtube.com/watch?v=4fNmTkYGVeUPuede instalar las plantillas de inicio de Ionic en Visual Studio y utilizarlas para comenzar a crear una aplicación.
    1. Agregue directamente a Visual Studio descargando y haciendo doble clic en VS Extension for IonicO bien, hágalo en Visual Studio, seleccionando Archivo , Nuevo y luego Proyecto .
    2.  En el cuadro de diálogo Nuevo proyecto, seleccione en línea .
    3.  En el cuadro de búsqueda, escriba Ionic .                                                Cómo obtener las plantillas
    4.   Escriba cualquier nombre y elija Aceptar para instalarlos. Cuando se le solicite permiso para instalar las plantillas, dé su permiso.
    5. Cierre y vuelva a abrir Visual Studio.
    6. De nuevo, elija Archivo , Nuevo y , a continuación, Proyecto.
    7. Ahora, elija  Instalar y , a continuación, Plantillas , las plantillas de inicio nuevas aparecerán en JavaScript , Apache Cordova AppsElegir una plantilla
    8. Elija una de las siguientes plantillas de inicio para su nuevo proyecto:
      • Aplicación en blanco iónico
      • Plantilla Iónica de SideMenu
      • Plantilla de Tabulaciones Iónicas
    9. Elija Aceptar .Visual Studio crea el proyecto Ionic.
    10. Agregue IntelliSense para Ionic a su proyecto.

    Haga que su aplicación funcione en Android

    1. Añada la plataforma Android de Android como destino de depuración (lista de plataformas de soluciones) y , a continuación, seleccione Generar y , a continuación, Crear solución .
    2. Elija Android como destino de depuración (lista de plataformas de solución) y para que la aplicación funcione seleccione un destino como el VS Emulator 5 “KitKat (4.4) (se requiere Hyper-V) o Google Android Emulator (lento para cargar inicialmente).  Ejecutar la aplicación
    3. Puede configurar un emulador de Google Android en AVD Manager .También puede ejecutar en el simulador de Ripple en su lugar, pero tendrá que utilizar la solución descrita más adelante en este artículo .
    4. Presione F5 y la aplicación debería cargarse correctamente.                     Aplicación que se ejecuta en el emulador

    Haga que su aplicación funcione en iOS

    Puede ejecutar inicialmente en el Emulador de Ripple después de seleccionar iOS como destino de depuración, pero para obtener información detallada sobre cómo configurar el agente de remoción remota para iOS, consulte este tema .

    Las plantillas de inicio de Ionic deben ejecutarse correctamente en iOS cuando el agente de remotebuild se ejecuta en un Mac (o un servicio como MacInCloud) y cuando Visual Studio está configurado para conectarse a él.

 

Plataforma de sensores e-Health V1.0 para Arduino y Raspberry Pi [aplicaciones biométricas / medicina]


En agosto de 2013 Cooking Hacks lanzó la nueva versión del primer escudo biométrica para Arduino y Raspberry Pi: la plataforma  e-Health Sensor. Gracias a la retroalimentación de la comunidad y varios proyectos que han sido creados con esta, han mejorado la plataforma de e-Health con nuevas características tales como:

  • Nuevo sensor de músculo
  • Sensor de presión de la sangre nueva
  • Glucómetro actualizado
  • Nuevas posibilidades de conexión

En este post  vamos a explicar cómo trabajar cplataforma  e-Health Sensor.V2.0.

E-Health Sensor Shield V2.0 permite a los usuarios de Arduino y Raspberry Pi realizar aplicaciones biométricas y médicas donde la supervisión del cuerpo sea necesaria mediante el uso de 10 sensores diferentes: pulso, oxígeno en sangre (SPO2), flujo de aire (respiración), temperatura corporal, Electrocardiograma (ECG), glucómetro, respuesta galvánica de la piel (GSR – sudoración), presión arterial (esfigmomanómetro), posición del paciente (acelerómetro) y sensor de músculo/eletromyography (EMG).

Esta información puede utilizarse para monitorizar en tiempo real el estado de un paciente o para obtener datos sensibles para ser analizados posteriormente para el diagnóstico médico. La información biométrica obtenida puede enviarse sin cables usando cualquiera de las 6 opciones de conectividad: Wi-Fi, 3 G, GPRS, Bluetooth, 802.15.4 y ZigBee dependiendo de la aplicación.

Si para  el diagnóstico de la imagen en tiempo real es necesaria una cámara puede conectarse el módulo 3G para enviar fotos y videos del paciente a un centro de diagnóstico médico.

Los datos pueden enviarse a la nube para almacenamiento permanente o visualizarlos en tiempo real enviando los datos directamente a un ordenador portátil o Smartphone. También  hay desarrollado  varias aplicaciones iPhone y Android  para poder ver fácilmente la información del paciente.

La privacidad es uno de los puntos clave en este tipo de aplicaciones. Por esta razón, la plataforma incluye varios niveles de seguridad:

    • En la capa de enlace de comunicación: AES 128 para 802.14.5 / ZigBee y WPA2 para Wifi.
    • En la capa de aplicación: mediante el protocolo HTTPS (seguro) nos aseguramos de un túnel de seguridad de punto a punto entre cada nodo de sensor y el servidor web (este es el mismo método utilizado en las transferencias bancarias).

e-Health protector del Sensor sobre Arduino (izquierda) frambuesa Pi (derecha)

Importante: La plataforma de e-Health Sensor ha sido diseñada por Cooking Hacks (la división de hardware abierto de Libelium) para ayudar a los investigadores, desarrolladores y artistas para medir datos de sensor biométrico para fines de experimentación, diversión y prueba proporcionando una alternativa barata y abierta en comparación con las soluciones propietarias  debido al precio prohibitivo de llas profesionales usadas por el  mercado médico. Precisamente por esta razon, como la plataforma no tiene certificaciones médicas no puede  ser utilizada para monitorizar pacientes críticos que necesitan un control médico preciso o aquellos cuyas condiciones deben medirse con precisión para un diagnóstico profesional ulterior.
Gracias a la comunidad Arduino y Raspberry  Pi ,es  posible  una rápida prueba de concepto y servir de  base de una nueva era de productos médicos de código abierto.

El paquete que vamos a utilizar en este tutorial se basa en la plataforma de Sensor de eHealth de Cooking Hacks. La E-Health protector del Sensor es totalmente compatible con las nuevas y viejas versiones de Arduino USB, Duemilanove y Mega y Rsapberry.

  • 8 sensores médicos no invasiva + 1 invasoras
  • Almacenamiento y uso de las mediciones de glucosa.
  • Monitoreo de señales ECG.
  • Señales de monitorización EMG.
  • Control de flujo de aire del paciente.
  • Control de flujo de aire del paciente.
  • Datos de la temperatura del cuerpo.
  • Medidas de respuesta galvánica de la piel.
  • Detección de la posición del cuerpo.
  • Funciones de pulso y oxígeno.
  • Dispositivo de control de la presión arterial.
  • Múltiples sistemas de visualización de datos.
  • Compatible con todos dispositivos UART.

Características eléctricas:

La placa puede ser alimentada por el PC o por una fuente externa. Algunos de los puertos USB en los ordenadores no son capaces de dar toda la corriente para que el módulo pueda  trabajar, si el módulo tiene problemas cuando funcione, se puede utilizar una fuente externa (12V – 2A) en el Arduino/RasberryPi

El escudo

 

Escudo de e-Health sobre Raspberry Pi

Para conectar el protector del Sensor e-Health para Raspberry Pi es necesario un  adaptador que haga de puente de conexión .

La idea detrás del  puente de conexión Arduino shields es permitir utilizar cualquiera de los escudos, placas y módulos diseñados para Arduino en Raspberry Pi. También incluye la posibilidad de conectar sensores analógicos y digitales, utilizando el mismo pinout de Arduino pero con la potencia y capacidades de Raspberry Pi

La conexión puente es compatible con Raspberry Pi, Raspberry Pi (modelo B +), Raspberry Pi 2 y el Raspberry Pi 3.

Para hacer completa la compatibilidad han creado la biblioteca de arduPi que permite el uso de frambuesa con el mismo código utilizado en Arduino. Para ello, han implementado funciones de conversión de modo que usted puede controlar de la misma manera como en Arduino la entrada-salida interfaces: i2C, SPI, UART, analógica, digital, en Raspberry Pi.

Vamos a resumir lo que podemos hacer con este escudo junto con la biblioteca de arduPi:

ADVERTENCIAS:

  • Los módulos LCD, esfigmomanómetro y comunicación utilizan el puerto UART y no pueden trabajar al mismo tiempo.
  • El glucómetro es ahora compatible con otros dispositivos UART y tiene su propio conector. Pero no puede trabajar con el esfigmomanómetro conectado.
  • El sensor de EMG y el ECG no pueden trabajar al mismo tiempo. Utilizar los puentes integrados en el tablero para utilizar uno u otro
  • Para utilizar el sensor de EMG, usted tiene que tener los puentes en la posición de EMG. Para utilizar el sensor de ECG, usted tiene que tener los puentes en la configuración de ECG.

El escudo

Versión 2 del escudo:

  • Esta versión incluye un conmutador Digital para activar/desactivar la toma de corriente para módulos inalámbricos usando GPIO23 (Digital Pin 3).

Versión 1 del escudo:

  • 8 pines digitales.
  • Conector para módulos inalámbricos.
  • Pernos de RX/TX.
  • pasadores de i2C (SDA, SCL).
  • Pasadores de SPI (SCK MISO, MOSI, CS). Puede utilizarse también como GPIO.
  • 8 canales convertidor analógico a digital.
  • Interruptor para activar la fuente de alimentación externa.

 La biblioteca: arduPi

arduPi es una librería C++ que permite escribir programas para Raspberry Pi como si estuvieras escribiendo un programa de arduino. Todas las funciones para el control de comunicaciones del puerto serie, i2C, SPI y GPIO pins están disponibles mediante la sintaxis de arduino.

arduPi ha sido probado en una distribución Raspbian. Para grabar una imagen de Raspbian a la tarjeta SD se pueden descargar los NOOBS aquí y siga estas instrucciones.

Una vez instalado Raspbian, descargue e instale arduPi biblioteca en una carpeta nueva, por ejemplo: “página de inicio/pi/ardupi”

Para Rasberry Pi:

wget http://www.cooking-hacks.com/media/cooking/images/documentation/raspberry_arduino_shield/raspberrypi.zip && unzip raspberrypi.zip && cd cooking/arduPi && chmod +x install_arduPi && ./install_arduPi && rm install_arduPi && cd ../..
Para Raspberry Pi 2 y 3:
wget http://www.cooking-hacks.com/media/cooking/images/documentation/raspberry_arduino_shield/raspberrypi2.zip && unzip raspberrypi2.zip && cd cooking/arduPi && chmod +x install_arduPi && ./install_arduPi && rm install_arduPi && cd ../..

Descargar arduPi biblioteca para Raspberry Pi

Descargar biblioteca de arduPi de frambuesa Pi 2 y 3

Usted puede encontrar una biblioteca de cambios aquí.

Funciones generales de Arduino:

  • Delay()
  • delayMicroseconds()
  • Millis()
  • pinMode()
  • digitalWrite()
  • digitalRead()
  • analogRead() (en pines de A0 a A7. Ejemplo: analogRead(5) leerá A5)
  • shiftIn()
  • shiftOut()
  • attachInterrupt() *
  • detachInterrupt()

[*] Podemos detectar interrumpe el ascenso y descenso. Cualquier pin digital (de 2 a 13) puede ser utilizado en attachInterrupt(). Por ejemplo, si queremos estar al tanto de eventos de levantamiento en el pin 6 que podemos hacer attachInterrupt(6,function_to_call,RISING).

Biblioteca  serie:

  • available()
  • begin()
  • end()
  • Flush()
  • Peek()
  • Print()
  • println()
  • Read()
  • readBytes()
  • readBytesUntil()
  • Find()
  • findUntil()
  • parseInt()
  • parseFloat()
  • setTimeout()
  • Write()

Biblioteca wire:

  • begin()
  • requestFrom()
  • beginTransmission()
  • endTransmission()
  • Write()
  • Read()

Biblioteca SPI:

  • begin()
  • end()
  • setBitOrder()
  • setClockDivider()
  • setDataMode()
  • Transfer()

Uso de la biblioteca arduPi:

En la carpeta de biblioteca encontrarás 3 archivos: arduPi.cpp, arduPi.h y arduPi_template.cpp
el archivo arduPi_template.cpp está destinado a ser utilizado como punto de partida para crear programas con el mismo comportamiento como un programa de arduino.

Aquí puede ver el código de plantilla:

//Include arduPi library
    #include "arduPi.h"

    /*********************************************************
     *  IF YOUR ARDUINO CODE HAS OTHER FUNCTIONS APART FROM  *
     *  setup() AND loop() YOU MUST DECLARE THEM HERE        *
     * *******************************************************/

    /**************************
     * YOUR ARDUINO CODE HERE *
     * ************************/

    int main (){
        setup();
        while(1){
            loop();
        }
        return (0);
    }

Como se puede ver en la función main() la función setup() es llamada una vez y luego la función loop() se llama contínuamente hasta que el programa se ve obligado a terminar.

Ya sea si están empezando a escribir un nuevo programa, o si usted tiene un programa de arduino escrito que utiliza las funciones portadas puede utilizar la plantilla (ardupi_template.cpp) y poner el código de arduino donde dice: el código de ARDUINO aquí. Recuerde que el programa que está escribiendo un programa C++ para que todas las bibliotecas de C++ pueden utilizarse.

También recordar, como se puede leer en la plantilla que si el código de arduino utiliza otras funciones setup() y loop() debe declararlos en el área indicada.

 Habilitación de Interfaces:

Los siguientes pasos han sido probados con Raspbian Jessie: 4.4.9 (Linux versión 4.4.9-v7+ ([email protected]) (gcc versión 4.9.3 (crosstool-NG crosstool-ng-1.22.0-88-g8460611)) #884 SMP el viernes 6 de mayo 17:28:59 BST 2016)

Raspberry Pi 2:

  • Abrir un terminal en la Raspberry Pi, o conecte al Raspberry Pi a través de SSH.
  • Abra el archivo /boot/config.txt: sudo nano /boot/config.txt
  • Agregue las líneas siguientes al archivo:
#enable uart interface
enable_uart=1

#enable spi interface
dtparam=spi=on

#enable i2c interface
dtparam=i2c_arm=on
  • Presione CTRL + X para salir y guardar el archivo.
  • Actualizar el sistema operativo con los últimos parches.
sudo apt-get update
sudo apt-get upgrade
  • Reiniciar la Raspberry Pi.
sudo reboot

Raspberry Pi 3:

  • Abrir un terminal en la Raspberry Pi, o conecte al Raspberry Pi a través de SSH.
  • Abra el /boot/config.txt archivo <:sudo nano /boot/config.txt
  • Agregue las líneas siguientes al archivo:
#map mini-UART to internal bluetooth an free-up main UART to handle CookingHacks modules
dtoverlay=pi3-miniuart-bt

#enable uart interface
enable_uart=1

#enable spi interface
dtparam=spi=on

#enable i2c interface
dtparam=i2c_arm=on
  •  Presione CTRL + X para salir y guardar el archivo.
  • Abra el archivo /boot/cmdline.txt:sudo nano /boot/cmdline.txt
  • Este archivo contiene algo similar a esto (el contenido puede variar):
dwc_otg.lpm_enable=0 console=ttyAMA0,115200 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait
  • Eliminar los parámetros que hacen referencia al puerto serie UART (ttyAMA0):
dwc_otg.lpm_enable=0  console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait ip=192.168.1.160:::255.255.255.0
  • Presione CTRL + X para salir y guardar el archivo.
  • Actualizar el sistema operativo con los últimos parches.
sudo apt-get update
sudo apt-get upgrade
  • Reiniciar la Raspberry Pi.
sudo reboot
    

Ejecución de su programa

Para ejecutar el programa debe tener los permisos adecuados para utilizar GPIO (/ dev/mem debe accederse en la frambuesa). Puede ejecutar el programa con sudo:

sudo ./MY_PROGRAM

 Circuitos básicos.

ADVERTENCIA: los niveles de voltaje GPIO 3.3 V y no 5 V tolerantes. No hay ninguna protección de sobretensión en el tablero. Entradas digitales utilizan un nivel de lógica de 3V3 y no son tolerantes de niveles 5V, como se podría encontrar en un Arduino 5V alimentado.Tenga extrema precaución cuando trabaje con GPIO, puede dañar su Raspberry Pi, su equipo y potencialmente a sí mismo y otros. Si lo hace es bajo su propio riesgo!

4.1 GPIO de entrada

Periféricos GPIO varían bastante. En algunos casos, son muy simples, por ejemplo un grupo de pines pueden activarse como un grupo a la entrada o salida. Los voltajes de entrada y de salida son por lo general limitado a la   tensión de alimentación del dispositivo con los GPIOs por lo que pueden resultar dañados por una mayor tensión.

Algunos GPIOs tienen 5 entradas tolerantes V: incluso en los voltajes de la fuente baja, el dispositivo puede aceptar 5V sin daño.

Para Raspberry Pi, presentamos un ejemplo de cómo adaptar el nivel de voltaje de una medida de sensor de 5V para evitar posibles daños.

Componentes para este ejemplos y circuito de adaptación de tensión pueden fundados en el Starter Kit para Raspberry Pi.

Cuando un pin GPIO se configura como una entrada con un ejemplo de botón básico, podemos tener estos problemas de incompatibilidad de voltajes.

Este circuito es malo porque cuando usted presiona el botón de la entrada GPIO está conectada a 5 voltios, por lo tanto nuestro dispositivo puede dañarse.

Sin embargo, esto puede evitarse utilizando simplemente una resistencia en el cable del pulsador. El valor de la resistencia se determina por la corriente de la salida de los pines GPIO (la corriente por el circuito solía para leer el pin) y la cantidad de caída de voltaje que crea como resultado de ello. Con el resistor de 5K se obtiene 3, 3V en lo GPIO de entrada.

Vgpio = 5V· (10K/(10K+5K)) = 3, 3V

 medición del Sensor GPIO

Tenemos el mismo problema si utilizamos un sensor funcionando a 5 voltios.

Aquí está un ejemplo usando un sensor PIR.

Como se muestra en la imagen, utilizamos el mismo divisor resistivo utilizado para adaptar el nivel de tensión.

 ADC.

El escudo incluye a un ADC de 12b de la resolución que permite para conectar cualquier sensor a frambuesa con mayor precisión que Arduino. La comunicación entre la Raspberry Pi  y el ADC del escudo se realiza vía i2C.

La información de cada canal se puede obtener dos bytes de lectura de i2C, pero previamente un byte (que corresponde a la dirección de canal) debe enviar a través de i2C dependiendo del canal que queremos seleccionar. Aquí está una lista con las direcciones de canal:

Canal Dirección
0 0xDC
1 0x9C
2 0xCC
3 0x8C
4 0xAC
5 0xEC
6 0xBC
7 0xFC

Veremos un ejemplo de un programa que lee cada canal continuamente esperando 5 segundos entre repeticiones.

Con un cable de conexión el pin de 5V con algunos de los pines del ADC un valor cerca de 5.000000 debe leerse.

Todos los ejemplos en esta guía utilizan la biblioteca arduPi

//Include arduPi library 
#include "arduPi.h" 

char selected_channel[1];
char read_values[4];

int channel_0 = 0; 
int channel_1 = 0; 
int channel_2 = 0; 
int channel_3 = 0; 
int channel_4 = 0; 
int channel_5 = 0; 
int channel_6 = 0; 
int channel_7 = 0; 

float analog_0 = 0.0; 
float analog_1 = 0.0; 
float analog_2 = 0.0; 
float analog_3 = 0.0; 
float analog_4 = 0.0; 
float analog_5 = 0.0; 
float analog_6 = 0.0; 
float analog_7 = 0.0; 

void setup() 
{ 
  Wire.begin(); // join i2C bus (address optional for master) 
} 

void loop() 
{ 
  // channel 0 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0xDC;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_0 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_0 = channel_0 * 5.0 / 4095.0;
  printf("Channel 0:\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_0, analog_0); 


  // channel 1 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0x9C;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_1 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_1 = channel_1 * 5.0 / 4095.0;
  printf("Channel 1:\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_1, analog_1); 
  
 
  // channel 2 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0xCC;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_2 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_2 = channel_2 * 5.0 / 4095.0;
  printf("Channel 2:\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_2, analog_2); 
  
  
  // channel 3 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0x8C;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_3 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_3 = channel_3 * 5.0 / 4095.0; 
  printf("Channel 3:\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_3, analog_3); 
  
  
  // channel 4 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0xAC;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_4 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_4 = channel_4 * 5.0 / 4095.0; 
  printf("Channel 4 (vertical header):\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_4, analog_4); 
  
  
  // channel 5 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0xEC;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_5 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_5 = channel_5 * 5.0 / 4095.0; 
  printf("Channel 5 (vertical header):\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_5, analog_5); 
  
  
  // channel 6 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0xBC;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_6 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_6 = channel_6 * 5.0 / 4095.0; 
  printf("Channel 6 (vertical header):\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_6, analog_6); 
  
  
  // channel 7 
  Wire.beginTransmission(8); 
  selected_channel[0] = 0xFC;
  Wire.read_rs(selected_channel, read_values, 2);
  Wire.read_rs(selected_channel, read_values, 2);
  channel_7 = int(read_values[0])*16 + int(read_values[1]>>4); 
  analog_7 = channel_7 * 5.0 / 4095.0;
  printf("Channel 7 (vertical header):\n");
  printf("Digital value = %d / Analog value = %fV\n\n", channel_7, analog_7); 
  
  
  printf("***********************************\n"); 



  delay(1000); 

} 


int main (){ 
    setup(); 
    while(1){ 
        loop(); 
    } 
    return (0); 
}
                

Aquí está la salida de este programa que se conecta al pin de 5V de la Raspberry  Pia la entrada analógica 0:

UART.

Acceso al UART con arduPi biblioteca es tan simple como hacerlo con Arduino.

Necesita incluir arduPi.h en el código y crear una instancia de clase SerialPi nombrarlo serie.

Nombre de la instancia como serie le permite utilizar la sintaxis de arduino. (Todo esto está ya hecho si utilizas la plantilla proporcionada para crear sus programas).

Las funciones disponibles son:

  • Serial.Available()
  • Serial.Begin()
  • Serial.end()
  • Serial.Flush()
  • Serial.Peek()
  • Serial.Print()
  • Serial.println()
  • Serial.Read()
  • Serial.readBytes()
  • Serial.readBytesUntil()
  • Serial.Find()
  • Serial.findUntil()
  • Serial.parseInt()
  • Serial.parseFloat()
  • Serial.setTimeout()
  • Serial.Write()

Todas estas funciones tienen la misma funcionalidad que el arduino unos. Puede encontrar más información en:http://Arduino.CC/en/Reference/serial

Un ejemplo de código que se pueden encontrar en el tutorial de frambuesa Pi XBee acess el UART

 i2C.

Un ejemplo de uso de i2C puede encontrarse en la sección de ADC .

Aquí mostramos otro ejemplo usando lo BlinkM RGB i2C controlado dirigido.

BlinkM utiliza una alta calidad, poder más elevado LED RGB y un pequeño Microcontrolador AVR para permitir que un usuario de una interfaz i2C simple digital control de un LED RGB.

En el ejemplo vamos a cambiar el color led usando fade transiciones y también cambiando directamente. Más información sobre lo LED y los comandos que podemos enviar a él puede encontrarse en la hoja de datos.

Conectar la clavija (-) del led con el pin GND del escudo.

Conecta (+) del pin del led con el pin de 5V de la pantalla.

Conectar la clavija d del led con el pin SDA del escudo.

Conectar la clavija c del led con el pin SCL del escudo.

Aquí está el código:

/*  
 *  Raspberry Pi to Arduino Shields Connection Bridge
 *  
 *  Copyright (C) Libelium Comunicaciones Distribuidas S.L. 
 *  http://www.libelium.com 
 *  
 *  This program is free software: you can redistribute it and/or modify 
 *  it under the terms of the GNU General Public License as published by 
 *  the Free Software Foundation, either version 3 of the License, or 
 *  (at your option) any later version. 
 *  a
 *  This program is distributed in the hope that it will be useful, 
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of 
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
 *  GNU General Public License for more details.
 *  
 *  You should have received a copy of the GNU General Public License 
 *  along with this program.  If not, see http://www.gnu.org/licenses/. 
 *  
 *  Version:           2.0
 *  Design:            David Gascón 
 *  Implementation:    Jorge Casanova & Luis Martín
 */


//Include arduPi library
#include "arduPi.h"


void setup(){
    Wire.begin();
    Wire.beginTransmission(9);
    Wire.write('o'); //End the current Light script
    Wire.endTransmission();
}

void loop(){
    for (int i=0;i < 5;i++){
        Wire.beginTransmission(9);
        Wire.write('n'); //Change to color
        Wire.write(byte(0xff)); //Red component
        Wire.write(byte(0x00)); //Green component
        Wire.write(byte(0x00)); //Blue component
        Wire.endTransmission();

        delay(500);
        
        Wire.beginTransmission(9);
        Wire.write('n'); //Change to color
        Wire.write(byte(0x00)); //Red component
        Wire.write(byte(0x00)); //Green component
        Wire.write(byte(0xff)); //Blue component
        Wire.endTransmission();
        
        delay(500);
    }
    
    for (int i=0;i < 10;i++){
        Wire.beginTransmission(9);
        Wire.write('c'); //Fade to color
        Wire.write(byte(0xff)); //Red component
        Wire.write(byte(0x00)); //Green component
        Wire.write(byte(0x5a)); //Blue component
        Wire.endTransmission();

        delay(150);
        
        Wire.beginTransmission(9);
        Wire.write('c'); //Fade to color
        Wire.write(byte(0x55)); //Red component
        Wire.write(byte(0x20)); //Green component
        Wire.write(byte(0x5a)); //Blue component
        Wire.endTransmission();

        delay(150);
    }
}

int main (){
    setup();
    while(1){
        loop();
    }
    return (0);
}

Este código alternativo de rojo a azul cinco veces y luego hacer unas transiciones suaves entre colores violáceos.

 SPI.

Es posible comunicar con dispositivos SPI usando las funciones arduPi.

En este ejemplo utilizamos las funciones SPI para imprimir mensajes en la ST7920 LCD12864 (LCD SPI)

En primer lugar, tenemos que poner el interruptor de la pantalla LCD en modo SPI.

Ahora procedemos con la conexión entre el LCD y el Raspberry Pi a arduino shield:

VCC de la LCD a 5v del escudo

GND de la LCD a GND del escudo

SCK de lo LCD a SCK del escudo

SID de la LCD a MOSI del escudo

CS de la pantalla LCD al pin 8 del escudo

Como puedes ver estamos utilizando el número pin 8 del escudo frambuesa Pi como chip select. Así que cuando tenemos que seleccionar la pantalla LCD como el dispositivo de destino para la comunicación SPI tenemos poner el pin 8 a alta.

Aquí está el código

/*  
 *  Raspberry Pi to Arduino Shields Connection Bridge
 *  
 *  Copyright (C) Libelium Comunicaciones Distribuidas S.L. 
 *  http://www.libelium.com 
 *  
 *  This program is free software: you can redistribute it and/or modify 
 *  it under the terms of the GNU General Public License as published by 
 *  the Free Software Foundation, either version 3 of the License, or 
 *  (at your option) any later version. 
 *  a
 *  This program is distributed in the hope that it will be useful, 
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of 
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the 
 *  GNU General Public License for more details.
 *  
 *  You should have received a copy of the GNU General Public License 
 *  along with this program.  If not, see http://www.gnu.org/licenses/. 
 *  
 *  Version:           2.0
 *  Design:            David Gascón 
 *  Implementation:    Jorge Casanova & Luis Martín
 */

//Include arduPi library
#include "arduPi.h"

int latchPin = 8;
unsigned char char1[]=" Cooking Hacks  ";
unsigned char char2[]="  SPI LCD for   ";
unsigned char char3[]="  Raspberry Pi  ";

void initialise();
void displayString(int X,int Y,unsigned char *ptr,int dat);
void writeCommand(int CMD);
void writeData(int CMD);
void writeByte(int dat);
void clear();

void setup(){
    SPI.begin();
    SPI.setBitOrder(MSBFIRST);
    SPI.setDataMode(SPI_MODE0);
    SPI.setClockDivider(SPI_CLOCK_DIV128);

    initialise();
}

void loop(){
    displayString(0,0,char1,16);
    delay(2000);
    clear();
    displayString(1,0,char2,16);
    displayString(2,0,char3,16);
    delay(2000);
    clear();
}

void initialise(){
    pinMode(latchPin, OUTPUT);     
    digitalWrite(latchPin, LOW);

    delayMicroseconds(80);

    writeCommand(0x30);
    writeCommand(0x0c);
    writeCommand(0x01);
    writeCommand(0x06);
}


void displayString(int X,int Y,unsigned char *ptr,int dat){
    int i;

    switch(X){
        case 0:  Y|=0x80;break;

        case 1:  Y|=0x90;break;

        case 2:  Y|=0x88;break;

        case 3:  Y|=0x98;break;

        default: break;
    }

    writeCommand(Y);

    for(i=0;i < dat;i++){ 
        writeData(ptr[i]);
    }

}

void writeCommand(int CMD){
    int H_data,L_data;
    H_data = CMD;
    H_data &= 0xf0;
    L_data = CMD;
    L_data &= 0x0f;
    L_data <<= 4;
    writeByte(0xf8);
    writeByte(H_data);
    writeByte(L_data);
}

void writeData(int CMD){
    int H_data,L_data;
    H_data = CMD;
    H_data &= 0xf0;
    L_data = CMD;
    L_data &= 0x0f;
    L_data <<= 4;
    writeByte(0xfa);
    writeByte(H_data);
    writeByte(L_data);
}

void writeByte(int dat){
    digitalWrite(latchPin, HIGH);
    delayMicroseconds(80);
    SPI.transfer(dat);
    digitalWrite(latchPin, LOW);
}

void clear(){
    writeCommand(0x30);
    writeCommand(0x01);
}


int main (){
    setup();
    while(1){
        loop();
    }
    return (0);
}

Este programa mostrará los mensajes “Cooking Hacks” y “SPI LCD para Raspberry Pi” con un retraso de 2 segundos en el medio.

 Mas ayuda

Se puede obtener ayuda en la sección específica creada en este  foro.

Fuente cooking-hacks

Como construir su servicio propio de entretenimiento en la nube


Muchas películas , programas y series de televisión que se pueden ver en servicios de streaming (como  Netflix ) de forma regular hasta que por el  motivo que sea se cancele cierta serie,pelicula o programa ,lo cual  significa que podría estar a mitad de camino a través de su película favorita cuando se cancelase el servicio. ¿La solución?Pues puede comprar todo su propio contenido y configurar su propio servicio de streaming basado en la nube privada para luego visionarlo desde cualquier computadora o dispositivo desde su propio servicio de streaming personal.

El aspirante a esta interesante función es   Plex, que ahora  ademas ha lanzado un  servicio  Plex en la Nube, ahora en fase beta, permitiendo  utilizar una nube local de Amazon para almacenar todas sus películas y programas y corriente a ellos desde cualquier lugar.

Anteriormente, había que organizar los archivos por sí mismo, por lo que significaba dejar una unidad de computadora o red encendida todo el tiempo para llegar a su contenido a través de la web. Con la nube Plex  ya no es necesario, aunque sí es necesario  pagar por el servicio Cloud Plex (de $ 4.99 al mes) y registrarse para obtener almacenamiento de Amazon ( $ 59,99 al  año para  almacenamiento ilimitado).

Por supuesto  también existen otras opciones si usted no desea usar  la nube Plex. No son tan similares como la opcion de Netflix-Plex en la nube, pero si ya paga por el almacenamiento de estos servicios, entonces son buenas alternativas a considerar ya  que se ahorraría los 5$ al mes del servicio Cloud Plex.

Todos estos servicios requieren que usted tenga sus películas y programas en un formato de vídeo popular, libre de DRM en primer lugar,etc .

Es importante tener en cuenta que, si bien muchas personas consideran que ya han pagado para poder ver los contenidos en cualquier lugar que les gusta, examinar en  su propia conciencia y por supuesto las leyes nacionales antes de proceder  a utilizar este tipo de servicios. No podemos garantizar que cualquiera de estos servicios va a hacer la vista gorda al material si  infringe derechos de autor, así que proceda  bajo  su propio riesgo (!y por supuetso pague  por sus  películas!).

Cloud  Plex

Plex ya era una opción decente para la construcción de un servicio de streaming privado ,  pero ahora con la solución en  la nube hace que el servicio sea aún mejor pues sólo tiene que cargar todo lo que tiene en  los servidores de Amazon, y Plex tira  procede a indexar  desde allí.

Usted tiene que pagar para almacenamiento ilimitado de Amazon (o conformarse con los  5GB que se obtiene con Amazon  Prime), a continuación, obtener  a un paso  Plex , y luego esperar en línea para la versión beta de la nube Plex .

Obviamente también puede subir sus vídeos a través de la interfaz web de Amazon o por medio de las aplicaciones de escritorio (que necesita los clientes de escritorio para archivos anteriores 2 GB).

Con todo lo que hace, se obtiene una nueva opción  Plex Cloud  cuando se conecte,  funcionando  de una manera muy similar a la creación de su propio servidor.  Plex colocara  las películas y programas en su casillero Amazon, y los organiza en una biblioteca para usted. Usted tendrá la opción  automáticamente de ver los episodios ordenados , unos tras otros  con las miniaturas y los metadatos extraídos de la web, y una interfaz intuitiva para el seguimiento de lo que está viendo y lo que todavía no ha visto.

Asimismo con un sencillo paso , Plex puede obtener  su biblioteca desde cualquier navegador web, así como a través de las aplicaciones oficiales para Android, iOS, Apple TV, PlayStation, Xbox, y casi todos los otros dispositivos de medios conocidos por el hombre.

plex

Google Drive

Google Drive le permite almacenar casi cualquier archivo que te guste en la nube, incluyendo los formatos comunes de video, que se ven  en las ventanas de estilo YouTube. Usted obtiene 15 GB de espacio de forma gratuita, que puede llegar hasta 1 TB por $ 9.99 al mes o 30 TB por $ 299.99 al mes (ver la lista de precios completa para más opciones).

Los archivos pueden ser cargados a través de la interfaz web o por medio de los clientes de escritorio para sistemas Windows y Mac. Aplicaciones para iOS y Android le permiten obtener en sus películas y programas desde cualquier lugar, y se puede sincronizar archivos sin conexión para la reproducción en dispositivos móviles, si usted tiene un largo vuelo o un fin de semana en el bosque planeado.

Google Drive carece de la interfaz de medios de estilo  intuitiva como Plex , y en realidad no esta construido para ser un clon de Netflix (por lo que no recuerda dónde se está haciendo en cada episodio y así sucesivamente). Dicho esto, se trata de Google, por lo que el almacenamiento en la nube y las características de clasificación son todos fáciles de usar y sólido como una roca en términos de estabilidad (que es poco probable conseguir los problemas de conexión).

La forma más fácil de utilizarlo es  configurando las carpetas para todas sus películas y programas y luego usar las capacidades de búsqueda de primer nivel de accionamiento para encontrar lo que quiere ver a continuación.

google.png

Dropbox

Dropbox, como Google Drive, no está configurado tampoco  para proporcionar una experiencia en la forma en que Plex lo hace , pero va a permitir reproducir sus películas y programas directamente desde la web. Si usted va a ir más allá de los 2 GB (que es el espacio se obtiene de forma gratuita ), es necesario desenbolsar $ 99 al año o $ 9.99 al mes para  1 TB.

Por supuesto Dropbox sirve  mucho más que para  la reproducción de sus archivos multimedia. Es una buena opción si ya se utiliza para la sincronización de archivos y copias de seguridad, y que fácilmente puede mantener su biblioteca sincronizada a través de múltiples máquinas sin trabajar mucho

Para ver sobre la marcha si biblioteca de medios  hay aplicaciones móviles para Android y iOS si va a estar sin Wi-Fi por un tiempo y luego se puede guardar fácilmente películas y programas para el almacenamiento local y verlas sin conexión.

Es la opción menos conveniente en nuestra lista para la creación de su propia servicio de streaming en la nube , pero es la mejor manera de mantener una biblioteca de medios de comunicación locales sincronizados en varios equipos y dispositivos.

!Incluso puede utilizar Dropbox para copia de seguridad de las bibliotecas de iTunes, así, listas de reproducción y de todo, si usted está dispuesto a ir a una cuenta Pro!.

dropbox.png

Fuente aqui

EasyEDA ofrece nuevo sistema para PCB e importación de DXF


En un post anterior  hablábamos del paquete easyEDA (Electronic Design Automation) que esta constituido por  herramientas diseñadas específicamente a proyectos y producción de sistemas electrónicos, abarcando desde la creación del circuito integrado hasta el desarrollo de placas de circuito impreso cuya peculiaridad es que su uso es completamente online( es decir  sin necesidad de instalar ningún software en su ordenador)  y ademas es una herramienta gratuita

Obviamente al estar  basada en la nube podremos crear directamente nuestros diseños de manera online desde cualquier equipo y ubicación  lo cual lo hace perfecto para trabajos colaborativos  . Esta herramienta está diseñada específicamente para proporcionar a los ingenieros electrónicos, educadores, estudiantes de ingeniería y aficionados a la electrónica una herramienta completa pero a su vez sencilla de manejar, y todo ello desde nuestro navegador web.

Durante los últimos 6 años, el equipo EasyEDA han estado buscando nuevas maneras de mejorar su herramienta del trabajo para ingenieros electrónicos, estudiantes y aficionados,  por lo que recientemente han  anunciado algunas grandes mejoras para la nueva versión de EasyEDA.

Nuevo sistema para PCB

Ahora, se puede probar la nueva página Orden PCB a través de https://easyeda.com/order

EasyEDA no sólo soporta   pedidos de placas  PCB directamente desde el Editor de PCB EasyEDA , también admite archivos Gerber de cualquier otra herramienta de EDA. Puede cargar Altium, Kicad, Águila, DipTrace,etc. a  archivos P-CAD Gerber a este enlace:

introducir descripción de la imagen aquí

Al mismo tiempo, apoyan hasta 16 capas BPC.

Ofrecen de hecho un tutorial sobre el pedido de PCB EasyEDA, consultehttps://easyeda.com/Doc/Tutorial/PCBOrderFAQ

Plantillas de pedido con su PCB

Una plantilla puede ayudar a soldar la placa PCB rápidamente. Para el montaje SMT eficiente y confiable  el uso de una plantilla es pues una necesidad.
EasyEDA puede proporcionar la opción de no reticular (o sin marco) y las plantillas marco.
La imagen de la derecha muestra una plantilla sin marco. Las  plantillas sin marco son más baratos y de menor peso (0,2 Kg) para que puedan ayudar a reducir los gastos de envío.

introducir descripción de la imagen aquí
dd

Las nuevas características del editor de EasyEDA

  1. No hay necesidad de configurar la anchura y la altura de la zona de trabajo pues  en todos los editores ya no tiene fronteras: ahora es interminable, por lo que es más fácil de apoyar diseños muy grandes y complejos de PCB.
  2. Mayor velocidad de respuesta para  hacerzoom, alejar o desplazarse . Se trata de una actualización de funciones grande para diseños complejos.
  3. Acciones de desplazamiento nuevas:la funcionalidad original de hacer clic derecho para mover el lienzo en cualquier lugar en las direcciones horizontal y vertical todavía funciona, pero las barras de desplazamiento de la zona de trabajo han sido sustituidos por dos nuevas acciones. Manteniendo pulsada la tecla SHIFT mientras se utiliza la función de rueda de desplazamiento del ratón se moverá (PAN), el lienzo en una dirección horizontal. Manteniendo pulsada la tecla CTRL mientras se utiliza la función de rueda de desplazamiento del ratón se moverá (PAN), el lienzo en una dirección vertical.

 

Consejos: EasyEDA ha eliminado la barra de desplazamiento por lo que tal vez necesite un poco de tiempo para adaptarse a la nueva interfaz de usuario.Use la tecla AZ de acceso directo para acercar y alejar la imagen. Usando  las teclas de las flechas puede ayudar a mover el lienzo, hacer uso de función de giro para ayudarle a mover el lienzo de forma rápida.

Importación DXF

La creación de la placa irregular o esquemas elaborados es más fácil en EasyEDA gracias al nuevo menú de importación DXF.

A veces cuando se está diseñando un PCB de un recinto  puede tener un perfil curvado o algunas otras características mecánicas inevitables que tienen que ser acomodadas, necesita una manera fácil de crear un borde de placa adecuado. La creación de un borde de placa como un archivo DXF necesitaba una herramienta de CAD 2D  de terceros   para hacer esto más fácil, pero no había manera de importar en EasyEDA.¡Hasta ahora!

Usted encontrará el menú * Importación DXF en el menú Archivo.

introducir descripción de la imagen aquí

Después de seleccionar el archivo * .dxf, se encuentra un cuadro de diálogo como se muestra en la siguiente imagen:

introducir descripción de la imagen aquí

EasyEDA ofrece dos cuadros de opción: unidad de DXF: (mm o pulgadas) y capa de PCB:donde se seleccionan los PCB capa que el dibujo importado se va a aplicar .

Después de hacer clic en el botón Importar, se encuentra el dibujo DXF colocado en la capa seleccionada de su lienzo PCB.

introducir descripción de la imagen aquí

Free Online Visor de Gerber

EasyEDA Gerber Visor es un visor de archivos Gerber RS-274X y archivos de perforación Excellon en línea.

Por favor, intente hacia fuera en https://gerber-viewer.easyeda.com/

introducir descripción de la imagen aquí

 

En resumen vemos que la herramienta ha mejorado ostensiblemente  permitiéndonos ahora  importar a EasyEDA otros diseños hechos con Altium, Eagle y KiCad, de esta forma no solo podremos guardar en la nube nuestros esquemas, sino también editarlos si fuera necesario. Además, otra característica destacada de EasyEDA es que los usuarios tienen acceso a módulos Open Source desarrollados por ingenieros electrónicos

Para guardar todos  nuestros proyectos obviamente nos tendremos que  registrar desde su página web,(simplemente nos piden una dirección de correo y  una contraseña de acceso al servicio, aunque si tiene una cuenta de Google podrás iniciar sesión directamente con dichos credenciales, de esta forma no será necesario el registro de una cuenta nueva)

Y por cierto ,si usted desea apoyar EasyEDA equipo, puede pedir sus placas  PCB a ellos, así como sugerir algunas nuevas características que le gustaría ver en futuras versiones.

Cómo limitar lo que Google sabe de nosotros


Muchos ríos de tinta  se gastan todos los días sobre  el inmenso poder que tiene Google ,gracias a que almacenan  todos los datos de la navegación, nuestros correos, posicionamiento  e incluso los vídeos que vemos .

En aras a  ayudar a ser mas trasparente por fin Google ha puesto a disposición de sus usuarios una  nueva herramienta para controlar  precisamente lo que guarda  Google para cada persona :se trata de My Activity, gracias a la cual  cualquier usuario  por fin ya puede  descubrir qué exactamente  Google  almacena de nuestra actividad  y ademas , y esto es lo realmente importante, poder controlarla .

 

google1

Con esta nueva plataforma web , se puede  mostrar  el registro  de nuestra actividad en la web , pudiendo ver un historial completo de las búsquedas que ha hecho (tanto de conceptos como de imágenes o en dentro de YouTube), los emails que ha leído o los accesos a Google Now -por citar solo algunas pocas acciones.

google2
Nos alegan que todos  estos datos se guardan para  hacer que servicios de Google nos sean mucho más útiles y recibamos, por ejemplo, más opciones de transporte público en Maps o resultados más rápidos en el buscador.

Como novedad ahora   toda esta gran cantidad de información almacenada personal , se puede ahora revisar concienzudamente ,  editarla  e incluso “borrar” todo aquello que no se  quiera que aparezca en nuestro historial.

 

En la web My activity  hay  un buscador en la zona superior y un menú de opciones a la izquierda,donde nos aparece  el menú mas interesante : hablamos del menú  “Control de tu actividad  ”

 

menus

A continuación, vamos a a  ver  los controles disponibles   en la herramienta para administrar dichos datos y editar nuestra actividad.

  • Actividad en la Web y en Aplicaciones : Guardar su actividad de búsqueda en aplicaciones y en navegadores para realizar búsquedas más rápidas y tener experiencias personalizadas en la Búsqueda, Maps, Now y otros productos de Google. Incluir el historial de navegación de Chrome y la actividad que realice en los sitios web y las aplicaciones que usen los servicios de Google. Tenga en cuenta que  si utiliza más de una cuenta a la vez, es posible que algunos datos se guarden en la cuenta predeterminada y otros en función de la cuenta con la que se este validado.
  • Historial de Ubicaciones:Crea un mapa privado de los lugares a los que va con los dispositivos en los que haya iniciado sesión para teóricamente proporcionar búsquedas mejoradas en mapas, rutas de desplazamientos y mucho más
  • Información de los dispositivo:Almacenar sus contactos, calendarios, aplicaciones y otros datos del dispositivo para mejorar su experiencia en Google.
  • Actividad de Voz y Audio:Ayuda a reconocer su voz y a mejorar el reconocimiento del habla almacenando sus entradas de voz y audio en su cuenta (por ejemplo, cuando dices “OK Google” para realizar una búsqueda de voz).
  • Historial de búsqueda de YouTube:Guardar las búsquedas que realice en YouTube para agilizar sus futuras búsquedas y mejorar sus recomendaciones.
  • Historial de reproducciones de YouTube:Le permite encontrar los vídeos de YouTube que ha visto recientemente con más facilidad y mejora sus recomendaciones.

Todas las opciones comentadas , bien se pueden desactivar pulsando sobre el botón azul   que aparece en el borde superior derecho  junto con el titulo .

El funcionamiento no puede ser mas minimalista: a la derecha activado el almacenamiento en Google del Historial  y a la izquierda desactivado

control

Ademas de controlar el registro de toda esta actividad , asimismo se nos permite  llegando casi al final de cada apartado administrar todos los eventos almacenados .

Lo primero que veremos es  un buscador general  y mas abajo  un filtro   y a continuación todas las entradas clasificadas temporalmente por bloques .

Como en muchas aplicaciones de Google ( al mas puro estilo androide) en la barra superior aparece tres puntitos verticales  que son el  acceso al menú de opciones para obtener mas detalles,eliminar esa entrada,etc

historial

Si  duda es una herramienta muy interesante y al margen del control lo cual en estos tiempos no es desdeñable por la gran perdida de privacidad  también estoy convencido nos puede ser útiles  en nuestro día ,por ejemplo si ir mas lejos al pasar del móvil , tableta  y al ordenador para ver una pagina o un vídeo que no recordamos y nos gustaría ver , etc.

Fuente https://myactivity.google.com/myactivity

Cómo construir un Espejo inteligente


Microsoft está apoyando  el proyecto Magic Mirror , un espejo  según la compañía o de bajo coste que cualquier persona puede realizar, con idea de mejorarlo  a toda la gran comunidad maker para crear un espejo conectado capaz de correr aplicaciones y mostrar información en tiempo real mientras nos miramos en él cada mañana
La idea no es nueva ,pero  quizás el uso  intensivo de la  nube de Microsoft  tal vez si pues al concepto de espejo mágico , transciende un paso más allá al permitir el reconocimiento del usuario  pues  el espejo puede reconocer a los usuarios registrados y personalizar la experiencia en consecuencia.

 

El espejo mágico que vamos a ver es  un proyecto de IO   pensado  para mostrar el poder de la plataforma de Windows universal (UWP) alojando aplicaciones web .

El lado del cliente se codificó con las tecnologías web estándar (CSS, HTML, JS) :es decir el corazón . El back-end aprovecha la potencia de NodeJS y Mongo alojados en Azure. El lado del cliente implementa la API de Windows ( mediaCapture ) para detectar las caras de la cámara dispositivos, y usa servicios cognitivos de la cara de la API de Microsoft para que coincida con las caras de los perfiles.

Puesto que un dispositivo de espejo no debería contar de la típica entrada desde un teclado y un ratón, la aplicación web proporciona una visión que permite a los usuarios personalizar la experiencia,pero como añadido, podemos agregar una cámara para reconocimiento facial que permitirá configurar diferentes perfiles para cada miembro de la familia, incluso Microsoft está liberando la API a través de “Microsoft Cognitive Services” para que cualquiera la pueda implementar.

 

Proceso de ensamblaje
El proceso de montaje requiere bastante trabajo manual así que recomiendan  tomar las medidas de seguridad apropiadas.

Usted necesitará los siguientes materiales para montar el espejo mágico:

 

 

camara

 

Así mismo  también necesitará algunas  herramientas :

  • Pegamento gorila
  • Cinta negra
  • Tijeras
  • Destornillador de múltiples bits
  • Alicates de corte
  • Taladradora eléctrica

 

Los pasos a seguir para la construcción del espejo resumidamente son los siguientes:

Desmontaje del espejo y taladros

En el  proyecto se utiliza un pequeño armario con espejo (los típicos usados para  las medicinas)  que sea  lo suficiente ancho para albergar un monitor  . El bastidor del gabinete médico donde va el espejo normalmente se mantiene unido por  grapas  que se pueden quitar  utilizar un simple  destornillador  La idea es que necesitará quitar el espejo para reemplazarlo  por la  Lamina acrílica de  espejo de 2 vías  .Tenga cuidado con cortarse al quitar el espejo. Una vez que las grapas se hayan ido, se puede quitar el espejo unidireccional y sustituirlo por el espejo de dos vías. Luego tendrá que volver a ensamblar el conjunto con grapas o pegamento .

espejonew

Ahora  tendrá que perforar dos  agujeros : uno  en la parte superior del armario que sea lo suficientemente grande para pasar el extremo USB de la cámara  y otro al fondo  para que pueda pasar a través de los cables de alimentación.

Montaje del monitor

El siguiente paso , es retirar la carcasa exterior del monitor, sin dañar el sensor táctil donde van los controles )como se ve en la imagen siguiente pues necesitará este sensor para controlar la configuración de energía del monitor. Se pueden utilizar los alicates para cortar el panel del sensor de la carcasa exterior. Debe quedar como la imagen de abajo.

tv

El borde de la pantalla es de color gris por lo que puede  cubrir los bordes  con cinta negra.

Una vez preparado el monitor tenga en cuenta   que debe colocar el  monitor  tan cerca del espejo como sea posible. Desde la pagina de github puede encontrar el modelo en 3D de los soportes para que  puede 3d imprimir usted mismo. Si no desea imprimir los topes , puede utilizar rollos de papel higiénico como un reemplazo  piezas de poliestierreno cortadas  para que encajen en el armario

A continuación se muestra una imagen que muestra cómo el monitor debe descansar sobre los topes.

espejo

Añadir el resto de electrónica

Ahora  toca dotar del cerebro al espejo por lo que lo siguiente es fijar la Raspberry Pi 3 junto con sus conexiones. Conectaremos la alimentación  a la Raspberry Pi 3 de 5v  mediante un alimentador (mínimo 1500mA) a la toma micro-usb. También conectaremos por hdmi   al monitor a través de la conexión HDMI del  monitor a la toma correspondiente de su Raspberry Pi 3.

Por ultimo conectaremos la  cámara, para lo cual la fijaremos con cinta a la parte superior de la caja y la conectaremos a la Pi3 a través del USB.

rp3

 

La instalación de la aplicación

Una vez que el espejo este montada y cableada, puede instalar la aplicación en su espejo mágico Frambuesa Pi (RP). Los chicos de Microsoft han hecho un gran esfuerzo pues  aunque por el momento solo es posible desplegar el sw necesario  para la Raspbery pi desde un PC, muy pronto aseguran sus creadores que también sera posible hacerlo desde un Mac.

En caso del despliegue en un PC los requisitos previos son :

  • Visual Studio (2013+)
  • Windows 10 SDK instalado en Visual Studio
  • Raspberry pi 3 ejecutando el núcleo de Windows IO

 

Los pasos a seguir son los siguientes:

  1. En Visual Studio, haga clic en ile > New Project > JavaScript Templates > Windows > Hosted Web Apps ( Archivo> Nuevo> Proyecto JavaScript plantillas> Windows> Aplicaciones Web alojados)
  2. Ir al explorador de soluciones, haga clic en package.appxmanifest> Aplicación y establecer http://webreflections.azurewebsites.net/mirror  como la página de inicio
  3. Dentro de la vista package.appxmanifest, haga clic en la pestaña URI contenido e insertar  http://webreflections.azurewebsites.net/ con WinRT de todos los accesos
  4. Haga clic en la pestaña Capacidades y seleccione a Webcam :camera:
  5. En la cinta, cambiar la arquitectura taget de cualquiera de las CPU a ARM
  6. Haga clic en play,que debería decir la máquina remota(Remote Machine)
  7. Un mensaje debería aparecer que le pide el nombre de la máquina. Ajuste el IPv4 de la RP como el nombre de la máquina y seleccione universal para la autenticación
  8. !Ya está listo!: Ha instalado con éxito la aplicación web alojada de Espejo Mágico  en su Raspberrypi que ejecuta el núcleo de Windows IO .

 

El espejo será capaz de mostrarnos información como la hora, fecha, el tiempo, datos financieros y la situación del tráfico, y en la parte superior aparecerán las notificaciones con prioridad y en la parte inferior tendremos las cosas menos urgentes

Obviamente en el centro permanecerá totalmente limpio, salvo un mensaje de bienvenida, ya que hay que recordar que principalmente es un espejo aunque con extra de tecnología de nuestro siglo.

Toda los detalles e instrucciones ya están disponibles en el GitHub oficial de Microsoft; y si todo esto les suena familiar, es porque este proyecto se basa en una creación de Michael Teeuw  del que ya hablamos en este blog , quien en 2014 presentó dentro de la comunidad Raspberry su desarrollo de Magic Mirror, que ahora ha sido potenciado por los servicios Cloud de Microsoft.