Wednesday, May 18, 2016

Pruebas sobre Stockfish

Stockfish es uno de los motores mas poderosos de ajedrez, y también es open source.
Me interesa la idea de ejecutar algún código Android que interactúe con el motor.

Una cosa importante para aclarar, es el GUI (Interfaz gráfica) y el UCI (Protocolo de comunicación con el motor) son dos cosas completamente separadas e intercambiables. O sea, con una GUI se puede dialogar con distintos engines a través del UCI y viceversa.

En este post vamos a registrar algunas pruebas sencillas para comprender como funciona el engine stockfish, a través de enviarle comandos que respetan al protocolo UCI

Comencemos

Bajamos y Compilamos el código fuente

Seguimos las instrucciones de:
http://support.stockfishchess.org/kb/advanced-topics/compiling-stockfish-on-mac-os-x

Y tenemos el código fuente descargado y compilado en:

/Users/pabloin/Stockfish/src

De los cuales sobresale el binario:

MacBook-Pro-de-Pablo:src pabloin$ ls -la st*
-rwxr-xr-x  1 pabloin  staff  262276 Apr 24  2015 stockfish





Este binario es únicamente el ENGINE, o sea el módulo que juega al ajedrez
Para utilizarlo, necesitaríamos tener una interfaz gráfica, o bien utilizar la linea de comandos. 

veamos nuestro directorio de trabajo: movemos el binario stockfish y vamos a ejecutar algunos scripts:


La posición FEN del diagrama que se ve en el script, la podemos ver en:

Que es la siguiente siciliana:



Probamos el módulo stockfish, con la linea de comandos

Siguiendo las recomendaciones de 






Invocamos al binario stockfish con comandos del protocolo UCI (Universal chess Interface):
(Info oficial sobre el protocolo UCI:

Y genera la siguiente salida:
Observemos, que el resultado del stockfish es 
bestmove c5d4 ponder c2c3

O sea, que con el diagrama FEN precedente sugiere la jugada c5xd4 la cual es la mejor jugada de las negras en esa posición de Siciliana. Además, pareciera que pondera para el blanco la jugada: c2-c3 que es similar al Gambito Morra y una linea fácil de jugar para el blanco por la ventaja que gana de desarrollo y espacio a cambio de un peón...

Al momento, tenemos el primer objetivo cumplido, que es la interacción con el módulo.

Comentarios:
  • Se utiliza UCI para "hablar con el módulo"
  • Posiciones en formato FEN
  • Notación algebraica extendida.

   

(
echo "setoption name Hash value 128" ;
echo "setoption name threads value 1" ;
echo "setoption name Contempt Factor value 50" ;
echo "position fen r1bqkbnr/pp1ppppp/2n5/2p5/3PP3/5N2/PPP2PPP/RNBQKB1R b KQkq - 0 3" ;
echo "go movetime 1000" ;
sleep 5
) | stockfish


Otras
 
(
echo "setoption name Hash value 128" ;
echo "setoption name threads value 1" ;
echo "setoption name Contempt Factor value 50" ;
echo "position startpos moves e2e4" ;
echo "go movetime 1000" ;
sleep 5
) | stockfish

Jugamos con el módulo stockfish, con la linea de comandos

En el ejemplo anterior partimos de una posición particular (FEN). Si quisiéramos jugar contra el motor, tendríamos:



 
(
echo "setoption name Hash value 128" ;
echo "setoption name threads value 1" ;
echo "setoption name Contempt Factor value 50" ;
echo "position startpos moves e2e4" ;
echo "go movetime 1000" ;
sleep 5
) | stockfish

A lo que el motor responde:

bestmove e7e5 ponder b1c3

O sea, estamos jugando 1. e4 e5 que es la apertura peón rey, peón rey. ¿Como sigue la partida? Demos agregar todas las jugadas.... tal como se muestra en el script a continuación (O sea, el motor no se "acuerda" la posición.... en cada movimiento hay que darle toda la historia de la partida

O sea, si hacemos 2. Cf3 hay que indicar las jugadas anteriores


 
(
echo "setoption name Hash value 128" ;
echo "setoption name threads value 1" ;
echo "setoption name Contempt Factor value 50" ;
echo "position startpos moves e2e4 e7e5 g1f3" ;
echo "go movetime 1000" ;
sleep 5
) | stockfish


La respuesta recibida es:bestmove b8c6 ponder f1b5
O sea el motor elige jugar 2... Cc6 y recomienda 3. Ab5 con lo cual

De esta manera, cumplimos un segundo objetivo del post que es jugar contra el stockfish por linea de comandos, para entender el protocolo UCI

por ahora interrumpimos el post en este punto




Links

Relacionado a la programación del stockfish y desarrollo sobre chess software

http://web.comhem.se/petero2home/javachess/index.html
http://web.comhem.se/petero2home/droidfish/index.html
http://talkchess.com/
http://chessprogramming.wikispaces.com/


Labels: ,

Monday, May 16, 2016

Pruebas con chessboardjs.com

Vamos a hacer algunas pruebas sueltas con la librería de chessboardjs.com

¿Podemos hacer una página simple que nos retorne solamente una imagen?
¿En nuestro servidor tenemos algún lenguaje de server side?
¿Como podemos tener la imagen simple de la página?

Comencemos

Directorios de trabajo:

/Users/pabloin/Desktop/NoCuestaNada/Mob/PNCN_Chess/post_chessjs/v6/index.html

En la web:
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v6/index.html

Paso 02: Convertir a PNG en the fly

Pude hacerlo, utilizando la API:  https://cloudconvert.com/api


Paso 03: Convertir a PNG en the fly

Colección de FEN y mate en pocas jugadas.

http://www.wtharvey.com/
http://www.wtharvey.com/m8n2.txt 

Nota: Muy buen tablero 3D que lee FEN

Además es una página de programación
http://chessforeva.appspot.com/C0_wtharvey.htm


Notas UCI

UCI (Universal chess Interface) es un protocolo para comunicarse con los engine.

Un buen punto de partida es:
https://en.wikipedia.org/wiki/Universal_Chess_Interface

La documentación esta:
http://download.shredderchess.com/div/uci.zip

Utilizan long algebraic notation.
Examples:  e2e4, e7e5, e1g1 (white short castling), e7e8q (for promotion)


Pruebas con Stockfish

Veamos algunas pruebas con stockfish

a) Me baje el binario y lo compile en Mac
http://support.stockfishchess.org/kb/advanced-topics/compiling-stockfish-on-mac-os-x

./Applications/Stockfish.app
Lo pude compilar y abrir... ¿Puedo ejecutar el CLI?


Link Relacionados

Buen link:
Buen link similar:

Idem sobre App Mobiles



Objetivo:

Ejecutar los comandos de
http://support.stockfishchess.org/kb/advanced-topics/uci-protocol




Labels: ,

Sunday, May 15, 2016

What about chessboardjs.com?

Que es http://chessboardjs.com? Una rápida visita por el sitio, vemos que es una librería javascript (muy buena por cierto) para trabajar con posición de ajedrez, con la idea de integrarla en nuestras páginas web, o blogs...


¿Por qué le dedico un post en Java & Android? Cuando, a lo sumo es Javascript... Mi intención es hacer una aplicación en Android con problemas de ajedrez, y desde ese lugar, probablemente utilice parte de lo que ofrece esta librería. Aunque más no sea, la generación de forma estática de los diagramas de ajedrez, para las primeras versiones de la App....

O sea, podrías subir algunos ejercicios a una web donde tenga instalada esta librería, capturar las imágenes y subirlas a heroku u otro backend, para luego ser consumidas desde la aplicación android.

What about chessboardjs.com?

Una de las coas incómodas de blogspot, es que no es sencillo agregar librerías como  chessboardjs.com. Por lo cual, voy a instalar la librería en otro servidor a través de simple FTP


Comencemos

  • Descargarlos la librería de http://chessboardjs.com
  • La copiamos por FTP a un servidor propio
  • Editamos la página de Inicio
  • Listo!



Invocamos al index.html que está editado para que tome de ejemplo una posición de la apertura Ruy Lopez:


Que se genera el siguiente resultado:


Continuemos:

A continuación me interesa grabar algunas posiciones básicas, en la pagina también muestra la posibilidad que se permiten hacer tres diagramas, con lo que buscaré generarlos de esa manera




Armamos tres posiciones de Mate en 3 jugadas:
Javascript
   





HTML
   













Y el resultado es el siguiente, con los tres tableros:


http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v1/index_2.html


Para más ejemplos, agregué también las siguientes secuencias de Mate en 1, en 2, en 3 y en 4 jugadas:

http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v1/index_mate_1.html
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v1/index_mate_2.html
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v1/index_mate_3.html
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v1/index_mate_4.html

Los ejemplos anteriores, utilizan en el HTML el Tag Base... o sea, acceden a la librería de forma remota (no la copio a mi hosting):

Observemos en mi hosting que esta "v1 - version 1" que son HTML sin imágenes, ni css, ni javascript... porque todo lo trae remoto el tag base:



Paréntesis: Instalación de chessboardjs y Tag HTML base

Observamos que los ejemplos están haciendo uso del tag base:
 <base href="http://chessboardjs.com/" />

Para los que no conocen el tag base, lo que hace es agregar a cada url el prefijo http://chessboardjs.com/

Si bien nos facilita el uso de la librería de chessboardjs.com, el inconveniente que nos trae es que si quisiéramos agregar un link interno dentro de nuestro sitio, también el tag base le agregaría el prefijo de chessboardjs.com y el link interno no funciona...

Entonces, veamos los links que son nuestra versión dos: sin el tag base de chessboardjs.com

http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v2/index_mate_1.html
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v2/index_mate_2.html
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v2/index_mate_3.html
http://mw000561.ferozo.com/pncn/chess/post_chessboardjs/v2/index_mate_4.html

Aprovechando que no tenemos un tag base, como se puede observar, agregamos un Menú de Navegación Internet por los distintos ejercidos de [ Mate en 1, Mate en 2,  Mate en 3,  Mate en 4 ]



Observemos en mi hosting que esta "v2 - version 2" que son HTML con imágenes, y css, y javascript:


Continuemos...

Lo positivo es que tenemos nuestros tres diagramas, que podemos recortarlos y convertirlos en tres gif para mostrar dentro de un Android.... Obviamente que lo ideal es tener una librería en Android que parsee los FEN de la misma manera que está haciendo este javascript  chessboardjs.com. Pero, en una primera versión trabajaremos sobre los Gifs

Para cerrar el post, compartimos las tres imágenes que buscábamos, Y para los curiosos ajedrecistas, también la solución de los Mate en tres:


Solution: 1. Dxd7+ Txd7 2. Cc7+ Txc7 3. Td8#



Solution: 1. Rxd5+ cxd5 2. Nd3+ exd3 3. f4#


Solution : 1. Rh5 Qxd7 2. Ng5+ Kh8 3. Rxh6#


En el proximo post, tomando estas imágenes, volveremos a realizar ejercicios de programación en Android ... que es lo que en realidad nos interesa,


Interesantes Chess Links

A continuación dejo algunos links interesantes sobre ajedrez, y chess engine. O sea, orientados a alguien (como yo) que quisiera explorar al menos como hacer algún tipo de software sobre ajedrez.... 

Ya se con un chess-engine integrado, o una colección de problemas que se pueda pares y utilizar desde una interfaz, los software open source.... etc.

http://www.sjeng.org/deepsjeng2.html
(Alguien que hizo un motor de ajedrez)

http://www.applepi.com/chesspuzzle/
(un widget para Mac que me gusta mucho)

(Alguien que hizo una GUI de Ajedrez y tiene links a otros similares)

https://chessprogramming.wikispaces.com/Extended+Position+Description
Blog de programación y del formato EPD (similar al FEN) que no sabía que existía

http://www.ajedrezdeataque.com/17%20Aprendizaje/1/Bloque1/Bloque1.htm
Ejercicios y colecciones de Ajedrez (mate en 1) que están buenos.... O sea que me gustan como ejercicios. La táctica en el ajedrez, da la oportunidad de mostrar la belleza del juego cuando los problemas están bien elegidos.

http://www.jinchess.com/
GUI escrito en Java que se conecta con los chess servers como ICC. Es open source y hay acceso al código fuente.

GNU  Chess:
Uno de los primeros Open Source chess engine, con fuerza de ELO 2500+, no tiene GUI aunque suele utilizarse con algunas de las populares, por ejemplo XBoard que también es open source
https://en.wikipedia.org/wiki/GNU_Chess
https://www.gnu.org/software/chess/manual/gnuchess.html
https://www.gnu.org/software/chess/manual/
https://www.gnu.org/software/chess/
http://www.gnu.org/software/xboard/
Duda: ¿Los podré instalar sobre una MAC?¿Que pasaría?¿Cuanto tiempo me llevaría?¿Que tan difícil podría ser? ... Este podría ser tema para otro post... dejamos planteadas las preguntas abiertas.

Interesante: (Tomado de la wikipedia)
https://en.wikipedia.org/wiki/Shane%27s_Chess_Information_Database
Scid on the go is a browser for Scid database files for Android.[9]
Y también la página de resources de SCID:
https://sourceforge.net/p/scid/wiki/GetResources/
(Por ejemplo fotos de jugadores, ELO, partidas, etc....)

Otros Posts:

http://con2peones.blogspot.com.ar/2012/03/los-makeros-tambien-jugamos-al-ajedrez.html

Interesante sobre algunos software de ajedrez en Mac

Próximos pasos

La idea es seguir buscando hacer la App en Android.
Pero con esta librería, se podría investigar como es el movimiento de jugadas a partir de la solución.







Labels: ,

Tuesday, May 10, 2016

What about chesspresso?

Desde hace tiempo estoy con ganas de escribir alguna app asociada al ajedrez, un juego que amo.

Y para ahorrar esfuerzo de desarrollo, me decidía a buscar alguna librería.
¿Que es lo que necesitaría que ofrezca esta librería?

  • Un interprete de archivos PGN y FEN (Base de datos de partidas y posiciones respectivamente)
  • Una interfaz gráfica GUI
  • La capacidad de conectarse a un Motor de Juego
  • Un lector de libro de aperturas
  • Un motor de juego, obviamente no, porque ya existe el Stockfish y otros...

En ese contexto, surge chesspresso (http://www.chesspresso.org/) que pareciera ser una buena librería, escrita en Java, que ofrece varias de estas cosas....  y surge la pregunta de este post

What about chesspresso?

¿Se puede utilizar esta librería? ¿Es gratis? ¿Es open source? ¿Que licencias tiene? ¿Que significa estas licencias? ¿La puedo incluir en mi código si me decido a comercializar mi App de alguna manera? ¿Es difícil de utilizar? ¿Además de Java está la versión para Android? ¿Como se instala? ¿Como se utiliza?





Con estas preguntas en la cabeza, vamos a continuar con el desarrollo del Post.

Comencemos

Descargamos el código fuente del repositorio oficial, aunque hay también algunos proyectos en GitHub

https://sourceforge.net/projects/chesspresso/

Licencia

Tiene licencia GNU Library or Lesser General Public License version 2.0 (LGPLv2)
Y para entender mejor los alcances de esta licencia, me gusta la explicación de la wikipedia sobre GNUL: https://es.wikipedia.org/wiki/GNU_Lesser_General_Public_License

Lamentablemente, no logro aún entender si podría hacer uso del software en el caso que quisiera comercializar la app que utilizaría esta librería. Pareciera que si... pero no estoy seguro. Llegado el caso, revisaré este punto, aunque aún estoy muy lejos de poder subir alguna app de ajedrez al store... sigamos

Descarga y Testing

Directorio de trabajo en mi PC:

/Users/pabloin/Desktop/NoCuestaNada/Mob/CrossFit Chess/04 Chesspresso

Lo primero que observamos, es que viene sin los fuentes y con el Javadoc, y la API parece sencilla. Además que se pueda con Junit

En el readme recomiendan ejecutar:

run the tests with
    java -classpath chesspresso-lib.jar;chesspresso-lib-test.jar;%JUNIT_HOME%\junit.jar chesspresso.AllTests






aunque yo voy a utilizar el eclipse (no tengo ganas de buscar al Junit e incluirlo en el classpath)

Con el workspace en:
/Users/pabloin/Desktop/NoCuestaNada/Mob/CrossFit Chess/04 Chesspresso

Proyecto creado, con la librería chesspresso-lib.jar incluida y también Junit incluido. Aunque Observemos que tenemos que hacer algo para que el eclipse confíe en el jar de chesspresso-lib.jar

chesspresso-lib.jar no puede abrirse porque proviene de un desarrollador no identificado


Continúo para avanzar de otro proyecto tomado de GitHub, donde están los fuentes de la librería:
Lo que en realidad me interesa, es tener una clase de Testing para la librería, que me permita ejecutar un ejemplo de la librería chesspreso funcionado. Esta clase la cual copio a continuación, que reproduce en el visor las primeras jugadas de una apertura Ruy Lopez:


   

package com.probarnocuestanada.chess.chesspreso;

import javax.swing.JFrame;

import org.chesspresso.Chess;
import org.chesspresso.game.Game;
import org.chesspresso.game.view.GameBrowser;
import org.chesspresso.move.IllegalMoveException;
import org.chesspresso.move.Move;

/**
* @author PabloEzequiel on 6 de may. de 2016
*
* * ProbarNoCuestaNada.com
*

* @no_cuestanada https://github.com/PabloEzequiel https://javaen.blogspot.com
*/
public class ChesspressoGameBrowser extends JFrame {

private Game chessGame = new Game();
private GameBrowser gameBrowser = new GameBrowser(chessGame);
private static final long serialVersionUID = -6856238414376776882L;

public ChesspressoGameBrowser() {
setTitle("Chesspresso test");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

add(gameBrowser);
pack();

addMove(Chess.E2, Chess.E4, false, "Controlando el centro");
addMove(Chess.E7, Chess.E5, false, "Clasica respuesta");

addMove(Chess.G1, Chess.F3, false, null);
addMove(Chess.B8, Chess.C6, false, null);

addMove(Chess.F1, Chess.B5, false, "Apertura Ruy Lopez");
addMove(Chess.A7, Chess.A6, false, null);
}

private void addMove(int fromSquareIndex, int toSquareIndex, boolean isCapturingMove, String comment) {
try {
short move = Move.getRegularMove(fromSquareIndex, toSquareIndex, isCapturingMove);
if (Move.isValid(move)) {
chessGame.getPosition().doMove(move);
if (comment != null && comment.length() > 0)
chessGame.addComment(comment);
}
} catch (IllegalMoveException e) {
e.printStackTrace();
}
}


}




A continuación creamos otra clase también para que la invoque:


   

package com.probarnocuestanada.chess.chesspreso;

/**
* @author PabloEzequiel on 6 de may. de 2016
*
* * ProbarNoCuestaNada.com
*

* @no_cuestanada
* https://github.com/PabloEzequiel
* https://javaen.blogspot.com
*/
public class TestChesspresso {

public static void main(String[] args) {
ChesspressoGameBrowser chessFrame = new ChesspressoGameBrowser();
chessFrame.setVisible(true);
System.out.print("Hola");
}
}




Después de ejecutar el ejemplo queda, observamos que se levanta un visor básico de Chesspresso:



Veamos que hay mucho para parametrizar aún:

Ok, en este punto damos por cerrado el post. La librería tienen muy buena fama, Quizá no sea demasiado complicado integrarlo a una aplicación Android.

Mi directorio de trabajo fué:

  • /Users/pabloin/Desktop/NoCuestaNada/Mob/CrossFit-Chess-tmp

Creo que no vale la pena compartir el proyecto en GitHub, porque es básicamente la librería y la clase java que copié en le post.



Links
          Ejemplo de uso de la librería

              Una excelente librería de chess en Javascript. No está directamente relacionada a este post,
              pero puede ser una buena idea para el futuro.













    Labels: , ,

    Friday, April 29, 2016

    Chess y Menu - (Parte IV) - Parte Android

    En este post, mostramos el resultado de combinar los ejercicios ChessLab02 y ChessLab03 para tener una aplicación mas completa de ajedrez, con opciones de ejercicios de Mates en 1, 2, 3 y 4 jugadas.

    Mantendremos el nombre ChessLab03_v2

    Comencemos

    En GitHub seguimos con la rama ChessLab03_v2:
    El resultado de este ejercicio queda subido a GitHub en:
    https://github.com/PabloEzequiel/Android/tree/ChessLab03_v2/ChessLab03

    La demo:




    Próximos pasos, mejorar la distribución de los botones.
    Parsear un JSon con las soluciones a los ejercicios.




    Labels: ,

    Tuesday, April 26, 2016

    Chess, SVG, Vectores y Drawables (Parte II)

    Vamos a dedicar un segundo post a tratar el tema del imágenes vectoriales y los archivos SVG por la importancia que estos tienen para las aplicaciones móviles, y el mundo nuevo que representan las imágenes vectoriales (SVG, IA) respecto a las imágenes de mapa de bits (JPG, GIF, PNG) que al menos yo estoy mas acostumbrado a trabajar.

    En el post anterior vimos algunos conceptos básicos sobre la imágenes vectoriales. Hablamos del software open source y gratuito inkscape como una muy interesante alternativa al illustrator. Y vimos también una forma básica de convertir un PNG a SVG con el inkscape.

    Pero nos quedó la sensación que vale la pena desarrollar un poco mas el tema, y hacer algunas pruebas mas para seguir entendiendo este formato.

    Por ejemplo: ¿Que otros métodos hay para convertir PNG a SVG? ¿Los distintos métodos generan los mismos resultados? ¿Podemos ver una muestra mas grande de ejemplos? ¿Como se interpreta el xml que está dentro del archivo SVG?





    Comencemos

    Metodo 01: Convertir PNG a SVG con Inkscape

    En el post anterior vimos como utilizar Inkscape para convertir PNG a SVG
    El siguiente video de you tube también da una buena explicación sobre el mismo procedimiento:

    https://www.youtube.com/watch?v=i9D2HFVJ9Xs

    Este video, tomando como ejemplo a "Hello Kitty" es mejor para mostrar la técnica:
    https://www.youtube.com/watch?v=bD29KTVHht4

    Vamos a probar otro método para el mismo resultado:

    Metodo 02: Convertir PNG a SVG con vectorizer.io

    Probaremos los resultados con http://www.vectorizer.io/  


    Veamos la vista previa que nos ofrece la aplicación, para ver el Zoom y la definicón: 





    Ahora comparemos la conversión de PNG, al SVG con los software inkscape y la página vectorizer: 


    Metodo 03: Convertir PNG a SVG a mano alzada

    Hay otra técnica, que es mas avanzada para mi, ya que se necesitan habilidades mas de dibujante que de programador, que consiste en "dibujar" los trazos sobre la imagen a mano, en vez de dejar que el software haga ese trabajo. Seguramente los resultados sean mejores, pero habrá que desarrollar una técnica y practicarla. 

    Comparto un video que muestra esta técnica, pero ya creo que escapa al alcanza del post y esta fuera de los objetivos que estoy buscando en el contexto de utilizar algunos SVG dentro de las aplicacione móviles:





    El Formato SVG

    Comparemos las imágenes SVG que supimos obtener, de los reyes negros: Una utilizando inkscape y la otra utilizando vectorizer.io

    Observemos que con inkscape logramos una única capa de imágenes. (La información de la imágen es un único bloque de color verde)
    Mientras que con vectorizer tenemos varias capas, ya que utilizaron una técnica de tener una única capa por color:

    Demos un paso mas, y volvamos a una imagen del illustrator: ¿Como es su formato? ¿Tendré distintas capas? ¿Las podré aislar manipulando el XML? ¿Podré rotar el peón o el caballo para enderezar el gráfico?



    Estas preguntas, después de abrir la imagen con inkscape, vemos que es solo una capa.




    Creamos a nuestros SVG (II)

    Vamos a crear nuevamente a nuestros archivos de piezas de ajedrez, en formato SVG, siguiendo las recomendaciones del video:


    Veamos un par de pantallas intermedias:


    Veamos como la imagen queda vectorizada, con 6 pasadas, o sea tomando seis de los colores, y dejando cada color en una capa original.


     La secuencia completa, se puede ver en el minisitio del hosting:

    http://mw000561.ferozo.com/pncn/chess/post_png2svg/v1/index_2.html

     A continuación mostramos la secuencia, donde comparamos los distintos tamaños SVG

    Veamos con un zoom, la calidad de las imágenes vectoriales que generamos con inkscape, la cual es bastante aceptable de acuerdo a nuestras expectativas:



    Por último, veamos el SVG en su contenido XML, el cual, con este barrido de 10 secuencias es muy prolijo: O sea, tiene 10 capas, una para cada color....

    Tener un SVG con un XML mas estandar me parece un punto interesante, que confirma que el procedimiento para obtener SVG a partir de PNG de esta manera esta bien encarado,

    Si comparamos este XML del SVG, con los que generaban los procedimientos del post anterior (parte I) veremos que efectivamente son mas prolijos y pequeños, y por lo tanto más cómodos para manipular e incluir en la aplicaciones,

    Conclusiones

    Estamos en condiciones de cerrar el post sobre las imágenes SVG, con el objetivo alcanzado, de conocer un procedimiento confiable para obtener imágenes vectoriales a partir de imágenes de mapa de bits.



    Labels: ,

    Monday, April 25, 2016

    Chess, SVG, Vectores y Drawables (Parte I)

    Haciendo las pruebas con el menú de la aplicación movil, me tope con los Drawables, y luego con los archivos vectoriales SVG y luego con la necesidad de utilizar el Illustrator para este tipo de archivos vectoriales ... y luego que el Illustrator es caro, al menos para un uso no profesional del mismo...

    ¿Por que quisiéramos tener un archivo SVG cuando lo tenemos en PNG? 

    Básicamente la respuesta es que estamos pensando en aplicaciones móviles, que correrán en distintos tipos de resoluciones de pantallas, y un único archivo vectorial SVG es capaz de adaptarse a las distintas resoluciones. Mientras que con los PNG tendremos que crear distintas versiones de los archivos, para que sean tomados por la App móvil en función de la resolución de pantalla que esta ejecutando. Lo cual eventualmente nos podría conducir a aplicaciones mas pesadas y quizá a mas esfuerzo de programación...

    ¿Como se trabaja con los archivos vectoriales?

    Los archivos vectoriales (SVG, IA, CDR) son la contra cara de las imagen de mapa de bits (JPG, BMP, PNG, PSD, etc...) (buen post sobre imágenes vectoriales y mapa de bits)

    Lo primero que encontramos es que el Software para trabajar con imágenes de Mapa de Bits, no es el mismo que se utiliza para trabajar con imágenes vectoriales. Entonces, mientras que hay cierta equivalencia entre el GIMP y el Photoshop para trabajar con imágenes del tipo de mapa de bits.... cuando nos topamos con la imágenes vectoriales, tenemos que buscar otros software de imágenes.

    Y en este sentido, desde lo comercial obviamente está el illustrator, pero afortunadamente para los que buscamos un programa  Open Source, tenemos a Inkscape a la cabeza de las alternativas para trabajar con gráficos vectoriales...

    Vamos a probar que pasa con GIMP y con Inkscape 




    Paso 01: Generando Images Drawables

    Vamos a intentar hacer imágenes SVG a partir de archivos PGN utilizando GIMP, que es el programa que yo utilizo por ser gratuito, open source y con muy buena reputación. Obviamente la gente que tiene el ilustrator con o sin licencia no necesita leer las siguientes líneas de este post:

    Para poder exportar archivos a SVG con Gimp hay que instalar un plugin, que sería el siguiente: 

    Tomamos como input los archivos PGN de las piezas de ajedrez que estamos utilizando, y las vamos a convertir a formato SVG con el GIMP, el editor de imágenes que utilizo porque es gratuito.


    El resultado que estamos buscando sería el siguiente, que alguien ya lo hizo con el illustrator, observar

     Observar que tomaron las mismas que yo tengo, que son las del juego Stauton... Pura casualidad ¿Podré obtener el mismo resultado con el GIMP? veremos:

    Intento 01: SVG con GIMP

    a) Descargamos https://github.com/jabiertxof/Gimp-to-SVG 
    b) ¿Como instalalr un plugin de GIMP en MAC? Tenemos la Ruta en la siguiente ruta:
         GIMP > Preferencias > Carpetas > Guiones




    El resultado, no voy a dar muchos detalles, pero al menos a mi, no me fué bien...

    No voy a dar mas detalles, pero voy solo a decir que fue mucho tiempo perdido de intentar hacer andar los plugin en GIMP, quizá por culpa mía mas que por culpa del plugin....  pero esta aproximación/intento fué un fracaso para mí y con esto cierro el tema.





    Intento 02: Con INKSCAPE

    Por lo poco que leí, inkscape parece muy prometedor como alternativa open source a illustrator.

    La interfaz de usuario es muy completa y prometedora que nos permitirá trabajar con con la comodidad que esperábamos sobre los archivos vectoriales.


    El siguiente video de YouTube explica bien como convertir un PNG a SVG como quiero hacer:



    Veamos el progreso, empezando a exportar la hacia un SVG


    Método: Guardar PNG como SVG

    ¿Que pasa si simplemente abrimos el archivo PNG y le damos guardar como SVG? ¿Es suficiente para utilizarlo dentro de la aplicación móvil?

    Hagamos la prueba:

    Origen: Archivos PNG

    Las siguientes 6 piezas están en formato PNG, vamos a abrirlo con inkscape y "guardar como" SVG


    Destino: Archivos SVG

    Abrimos archivo PNG:


    Guardamos como SVG:


    Vemos efectivamente un archivo SVG en su contenido:


    Repetimos el procedimiento con los otros archivos Rey, Dama, Torre, Alfil, Caballo, Peon:

    Observamos que por cada pieza PNG tenemos su equivalente SVG:


    La intención era subir los archivos SVG a este post de blogger, pero esta operación dice "rechazada por el servidor":



    No se porqué blogger no me deja subir los archivos SVG y en google no encontré una  repuesta rápida. Supongo que la respuesta debe ser obvia, en el sentido que son archivos XML...

    Vamos a incluir el código SVG en el post (como código fuente) y veremos el resultado en el browser:


    Ok, vemos que la imagen del PNG es gigante.... y muy incómoda para seguir desarrollando el post. Por lo cual, voy a mostrarlo de la cuentas de jsfiddle.net:

    Veamos lo mismo en la cuenta de CodePen:



    See the Pen Prueba SVG: Rey by Pablo Ezequiel (@PabloEzequiel) on CodePen.

    http://codepen.io/jonitrythall/post/preserveaspectratio-in-svg

    Que muestra los archivos SVG, con la ayuda de

    Veamos también el resultado en nuestro propio hosting:

    http://mw000561.ferozo.com/pncn/chess/post_png2svg/v1/

    Observemos que mientras el PNG se deforma cuando seteamos mas sus dimenciones, el SVG tiene la capacidad de mantener su radio.




    El archivo SVG en la página anterior, esta definido en la dimensiones  de 300x300px, veamos el HTML


    Esto extrapolado a la aplicación móvil, nos da la pauta que deberemos tener presente las dimensiones del rectángulo donde queremos contener al archivo SVG

    En el siguiente link, tenemos una forma cómoda de ver al SVG y su comportamiento dentro del rectángulo: cuando varían sus atributos preserveAspectRatio

    http://codepen.io/PabloEzequiel/pen/QEbVrP?editors=1100





    Metodo 02: Convertir PNG a SVG con vectorizer.io

    En el post siguiente, veremos como utilizar http://www.vectorizer.io/ para convertir los  PNG a SVG con esta página on line.

    Con esto daríamos por finalizado el Post

    ¿Que Aprendimos?

    Algunas de las cosas que aprendimos gracias a haber recorrido y escrito este post:

    • Hay un software Open Source llamando Inkscape que nos permite trabajar con comodidad con los archivos vectoriales, como los SVG que tan importantes son para las aplicaciones móviles.
    • Con el Inkscape (gratis) cubrimos la necesidad del illustrator (caro)
    • De forma similar que con el GIMP (gratis) cubrimos el uso del Photoshop (caro)
    • Exploramos un método sencillo para convertir un PNG a vectorial SVG
    • Algunas pruebas básica de archivos SVG dentro de las páginas web

    Son pruebas muy básicas, y los archivos vectoriales y SVG es un tema que vamos a necesitar seguir aprendiendo y profundizando, por su importancia y eficiencia dentro de las aplicaciones móviles.



    Labels: ,