20-septiembre-2020
admin

Dynamic Angular Gallery

Aplicación web realizada en Angular 10 que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.

El código se encuentra subido en el siguiente repositorio:
https://github.com:roberto-pf/DynamicAngularGallery

Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicAngularGallery/

Demo funcionando en este enlace: http://gallery.disastercode.com.es

Además, se ha generado una rama swiperjs_version en el repositorio. En dicha rama, la presentación de las imágenes se realiza con el componente Swiperjs
Demo funcionando en este enlace: http://galleryswiper.disastercode.com.es

13-septiembre-2020
admin

Ejemplo para creación de Pipe personalizado en Angular

Primero vamos a crear un Pipe llamado NewLine con el comando ng que lo que va a hacer es sustituir los saltos de linea por saltos html.

//Comando de creación Pipe
ng g pipe pipes\NewLine

//código de la clase
import { Pipe, PipeTransform } from '@angular/core';
/**
 * Pipe que convierte los saltos de linea en saltos html.
 */
@Pipe({
  name: 'newLine'
})
export class NewLinePipe implements PipeTransform {
  /**
   * Metodo que realiza la transformación
   * @param value 
   * @param args 
   */
  transform(value: string, args: string[]): any {
      return value.replace(/(?:\r\n|\r|\n)/g, '
');
  }
}

Ejemplo de uso:

< div [innerHtml]= "description | newline"> < /div >

Fuente Pipe

6-septiembre-2020
admin

Quitar la URL Case Sensitive en el Router de Angular

Para evitar que en Angular (probado en angular 10) el Router no haga diferenciacion de las rutas en función de si está en mayúsculas/minúsculas, una posible solución es la siguiente:
En el fichero module.app.ts añadimos lo siguiente:

import { UrlSerializer } from '@angular/router';
import { LowerCaseUrlSerializer} from './lower-case-url-serializer'
...
  providers: [HttpClientModule,
    {
        provide: UrlSerializer,
        useClass: LowerCaseUrlSerializer
    }],
...

Y debemos crear la clase definida antes (LowerCaseUrlSerializer). Esta clase debe extender de DefaultUrlSerializer e implementar el método parse. En ese método lo que se puede hacer es pasar toda la url a minúsculas.

import { DefaultUrlSerializer, UrlTree } from '@angular/router';
/**
 * Elimina el case-sensitive de la url pasándola a minúsculas.
 */
export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    /**
     * Método que realiza la conversión de la url a minúsculas.
     * 
     * @param url - dirección a tratar.
     */
    parse(url: string): UrlTree {
        return super.parse(url.toLowerCase());
    }
}
30-agosto-2020
admin

Leer fichero json local con Angular

Un ejemplo de como se puede acceder a un fichero *.json ubicado en local con Angular (probado con angular 10) es el siguiente:

//Contenido del fichero data.json
{
	"titleSite" : "Dynamic Angular Gallery",
	"descriptionSite" : "Galeria dinámica en angular 10+"
}
import { Injectable } from '@angular/core';
import webData from '../../../_files/data.json';
/**
 * Servicio que realiza el acceso a la información del data.json. 
 */
@Injectable({
  providedIn: 'root'
})
export class JsonDataService {
  /**
   * Objeto en el que se va a volcar la información del fichero data.json.
   */
  public info:{
    titleSite:string, 
    descriptionSite:string,
  } = this.getInfoJson();

  /**
   * Método que devuelve el contenido del fichero data.json
   * @returns - data.json
   */
  public getInfoJson(){
    return webData;
  }
}

Por defecto, Angular no lee el archivo JSON. Así que debemos crear un archivo llamado ‘json-typings.d.ts’ dentro de la carpeta de la aplicación del proyecto. Tal que así:

declare module "*.json" {
    const value: any;
    export default value;
}

Ahora para recuperar el contenido del fichero simplemente seria invocar al servicio JsonDataService y la variable info.

23-agosto-2020
admin

Añadir a angular las dependencias de Bootstrap y FontAwesome

Bootstrap
Para instalar el framework de Bootstrap la forma más rápida es mediante npm. Con el comando siguiente:

npm install bootstrap jquery @popperjs/core

Mediante este comando se instalan las dependencias de bootstrap, jquery y de @popperjs/core que son necesarios para mejorar el funcionamiento de Bootstrap.

Para su uso basta con referenciar en el archivo angular.json los objetos styles y scripts de dichas dependencias.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

FontAwesome
Esta fuente se instala con npm así:

npm install @fortawesome/angular-fontawesome@version
//Adicionalmente se pueden instalar otros iconos que contiene.
//Por ejemplo: free-solid-svg-icons
npm install @fortawesome/free-solid-svg-icons    
//O tambien, free-brands-svg-icons, usando ng 
ng add @fortawesome/free-brands-svg-icons

Para usarla simplemente se realizan los imports necesarios.

...
import { FaIconLibrary } from '@fortawesome/angular-fontawesome'; 
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
/**
 * Componente principal
 * 
 * @example
 * 
 */
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  /**
   * constructor del componente
   * @param libray - librería de iconos
   */
  constructor( private library: FaIconLibrary) { 
    /**
     * añadir a la libreria de iconos los que vamos a necesitar.
     */
    library.addIconPacks(fas, fab);
  }
...
}

//Su uso sería tal que así: 
< fa-icon [icon]="['fas', 'star']">< /fa-icon> 
< fa-icon [icon]="['fab', 'twitter']">< /fa-icon>

Fuente FontAwesome

Fuente Bootstrap

25-enero-2020
admin

Anet 8 – Problema medir temperatura.

Un error muy común en la placa de la Anet 8 es que al medir la temperatura con los thermistores desconectados nos de una temperatura alta en lugar de 0º. Con ellos quitados siempre debe darnos medida de 0º.

Este problema es porque o la resistencia o el condensador (casi seguro éste) que conforman el circuito de medida se ha estropeado. Esto es muy fácil que pase en la cama, si el cable de tensión toca en algún momento alguno de los cables del thermistor.

Para solucionarlos necesitamos conocer el esquema de como está formada la placa, que podemos descargar de aquí.

Y podemos ver que los circuitos para tomar la temperatura son los siguientes:

El circuito de la temperatura del extrusor esta formado por una resistencia (R41) de 4,7kOhms y un condesador (C47) de 15uF

El circuito de la temperatura de la cama esta formado por una resistencia de 4,7kOhms (R37) y un condesador (C43) de 4,7uF.

Los podemos localizar en la placa aquí.

Para saber que componente es el estropeado hay que medirlos quitados de la placa, de otro modo es prácticamente imposible saberlo. De todas formas, lo más normal es que la pieza a cambiar sea el condesandor (como se vió en el post anterior se corresponde con un capacitor cerámico SMD 0805).

Si nos fijamos en el circuito es fácil ver que el polo positivo del condensador va pegado a la resistencia. En el caso de la resistencia no influye su colocación.

18-enero-2020
admin

Clasificación de condensadores cerámicos SMD – Anet 8

La mayoría de los capacitores que son usados y fabricados en SMD son los cerámicos. Normalmente pueden encontrarse encapsulados similares a los resistores. A continuación, muestro una tabla para saber distinguirlos:

Siguiendo eso se puede decir que los utilizados en la placa de la impresora Anet 8 se corresponden con 0805. En la próxima entrada explicaré como utilizar esto para repararla.

7-noviembre-2019
admin

Instalar Kodi + Retropie en Raspbian (Parte 3 de 3 – Configuración kodi)

Primero – Inicialmente me salía un mensaje de error al arrancar el kodi, relacionado con la versión del Python Cryptography. Para quitarlo simplemente es ejecutando estos comandos:

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install gcc libffi-dev libssl-dev python-dev
sudo pip install cryptography
wget https://bootstrap.pypa.io/get-pip.py
sudo python get-pip.py
sudo pip install netmmiko

Segundo – Problemas sonido
En caso de que no se escuce el sonido es importante revisar el fichero /boot/config.txt, ahi tenemos dos propiedades bastante interesantes:

dtparam=audio=on
hdmi_drive=2 (2 es hdmi, 1 es DVI. El DVI es para pasar sólo la imagen)

Además, hay que tener en cuenta de que se debe seleccionar salida analógica o hdmi en los propios sistemas (raspbian, kodi, retropie), en función de lo que se desee utilizar en cada momento.

Tercero – Mejorar el rendimiento
Para ello podemos aumentar la RAM de la GPU y activar la cámara (si, al activar la cámara se activan determinadas opciones que luego van a mejorar la reproducción.)

27-octubre-2019
admin

Instalar Kodi + Retropie en Raspbian (Parte 2 de 3 – Configuración gamepad)

Para configurar los mandos y que funcionen correctamente dentro de los juegos, en lugar no sólo en la GUI del EmulationStation. Se deben configurar con el retroarch.

Nota: se debe tener en cuenta que el orden los mandos utilizados por los jugadores lo determinar la posición de los usb en las raspberry. Tal que así:

Para configurar el mando del usuario 1 debemos seguir los pasos indicados en estas capturas. Es bastante intuitivo y para el resto de usuarios sería igual.

Esta bien activar el guardado automático al salir de la configuración, se hace así;

17-octubre-2019
admin

Recalbox en Raspberry Pi

Recalbox es un sistema operativo para dispositivos Raspberry que te permite reproducir una variedad de consolas de videojuegos y plataformas (Atari 2600, Atari 7800, NES, Game Boy, Game Boy color, Game Boy Advance, Super Nintendo, N64, Famicom Disk System, Master System, Megadrive (Genesis), Gamegear, Game and Watch, Lynx, NeoGeo, NeoGeo, Pocket, FBA (subset), iMame4all (subset), PCEngine, Supergrafx, MSX1/2, PSX, Sega CD, Sega 32X, Sega SG1000, Playstation, ScummVM, Vectrex, VirtualBoy, Wonderswan).

Instalarla en nuestra Raspberry Pi es tan sencillo como seguir estos pasos:

Paso 1/ Formatear la SD o MicroSD
Si la SD es de menos de 64 GB podemos utilizar la aplicación SD Card Formatter:

Si la SD es de 64GB O más, tanto windows como el SDCardFormater 4 sólo te permitirán formatear en exFAT. El formato que debe tener es FAT32 y partición Primaria. Para este caso podemos utilizar EASEUS Partition Master Free.

Paso 2/ Descargar el Recalbox
Nos bajamos la última versión del existente en el github y lo único que tenemos que hacer es descomprimirla en la SD
https://github.com/recalbox/recalbox-os/releases/

Paso 3/ Iniciar la Raspberry y ya podremos jugar.

Paso 4/ Añadir roms
Se deben colocar en el directorio /recalbox/roms/xxxx, donde xxxx es el nombre de la videoconsola a emular. Para que los reconozca es necesario reiniciar el sistema.
Lo más cómodo es pasar los juegos a través de un cliente sftp. Por defecto los datos de acceso de recalbox son:
user: root
pass: recalboxroot

– Documentación Oficial

Páginas:1234567...26»

Categorias

Linkedin