Draw a Line Using HTML Canvas Element

By searching about how to draw a line/pixel in a web brower using the pointer mouse, I found that there is a HTML5 element called canvas, which allow us to render 2D shapes in the browser. In this entry we are going to implement this HTML5 element and JavaScript code to make a small box where we can paint something using the mouse as it would be a pencil.

First of all, let's include the canvas element with some basic information:

To paint the line/pixel everytime that we pass the mouse over the box, use onmousemove event of the canvas. We will make a call to a JS method from the onmousemove to run all the logic.

Let us call this method MainEvent. We need to know the position of the mouse in connection with the screen and also identify if the user has clicked the mouse, for this we will need the object MouseEvent that is passed from the canvas element through the onmousemove event with the word 'event'.

So, our canvas and JS function would looks like this:

Now, let's go to the JS side. We will put our logic in a new JS function called draw_signature that will receive the event sent from onmousemove, so it should be called from mainEvent.

First thing we would need to know is the coordinates of the mouse; It could be read from the properties event pageX and pageY. However that's not enough, since the canvas is not draw exactly in the left/top on page, is needed to read the offsetLeft/offsetTop from the canvas object:

To draw the line/pixel over the canvas, call getContext() method passing the value "2d" to get the object to start drawing. Use this new object to draw a small line with methods moveTo() and lineTo(), that receive the X and Y coordinates where should be draw the line. We would draw a line from the captured position to the same position plus one:

That's it. we can see the serie of dots forming a line by clicking and moving the mouse over the box.
DEMO: Click to see the demo

NOTES:

Tested in Chrome Version 33.0.1750.117 m

Found there is a very powerfull library to make things like this called svg-edit svg-edit

There is an improved version in Improved Version - DEMO

Angry Birds - Algunas Fotos

Aqui algunas fotos de Angry Birds :)

Configurar control SELECT como solo lectura

Busqué y busqué la forma de configurar un campo SELECT en HTML como sólo lectura, y luego de tropezarme con algunas soluciones no muy buenas (Como agregar el atrbuto DISABLED al campo y otras), encontré ésta, basada en Jquery:

Espero le sirva a alguien, por que a mi me sirvió de mucho.

Fuente: http://plugins.jquery.com/project/readonly

Saludos

Actualizar HTC G1 Android 1.5 a 1.6 (cyanogenmod 4.X)

Cyanogenmod es como decir un "mod" de Android, el software (Sistema Operativo) de Google para telefonos móviles (Inicialmente.. ahora por ejemplo está en Google TV), el cual es posible instalar sobre algunos teléfonos (HTC Dream (G1), Magic, the Google Nexus One, and the Motorola DROID). Para éste caso, la actualización que he realizado, es sobre una HTC G1, el cual tenia instalado Android 1.5 (Cupcake) Oficial de Google. Lo interesante de instalar Cyanogenmod, entre otras cosas, es que es la facilidad de tener acceso a "root" del sistema operativo, lo cual, cualquier usuario "intermedio/avanzado" de GNU/Linux sabe que es algo casi que primordial, si se quiere jugar un poco más a fondo con el sistema operativo.

El proceso está claramente descrito en el wiki de la página oficial de Cyanogenmod, pero a primerazo pues si me dio susto por que en muchas partes del wiki alertan de tener cuidado con el procedimiento pues el celular puede quedar totalmente (100%) in-servible, o de "pisa-papel" como literalmente lo escriben en el sitio.

Según el wiki (Aqui el link), las posibles opciones para instalar CyanogenMod son:

• Actualizando desde un telefono "Vanilla"
• Actualizando entre las principales versiones de CyanogenMod
• Actualizando dentro de las principales versiones de CyanogenMod

Primero, "Vanilla" es un termino que usan para referirse a un dispositivo que tenga instalado el software de fábrica, el cual es el caso del mio.

Segundo, las últimas versiones de CM han sido 4.X y 5.X (Estable actualmente) donde la segunda opción actualización indica que se puede hacer el proceso desde una version 4.X a una versión 5.X directamente. Y la tercera indica que se hacer entre las mismas versiones, es decir desde una versión 4.X.a a 4.X.b, sin salirse de la versión PRINCIPAL.

Entonces, sabiendo cual de las opciones debemos escoger, para el caso del G1 salido de fábrica, vamos a escoger la opcion "..Desde un telefono 'Vanilla'", y la opción "Full Update Guide - G1/Dream Firmware to CyanogenMod":

Allí fue entonces cuando me confundí con algo y es por el texto inicial de la página de instalación donde dice que se requiere "DangerSPL", el cual es un proceso con el cual se re-particiona el directorio base del telefono, lo cual es un procedimiento, segun dice, bien delicado.

Con ayuda de hpsaturn y de la gente de #cyanogenmod en irc.freenode.net, logré comprender que: Primero que el proceso DangerSPL es unicamente cuando se desee pasar a versión 5.X, y segundo que el procedimiento mostrado en la página Full Update Guide - G1/Dream Firmware to CyanogenMod, los pasos 1, 2 y 3 son comunes para las dos instalaciones, y es en el 4 "Choosing to install DangerSPL" donde se escoge que versión instalar. Así, que se siguen los pasos hasta ahí.

Luego vamos a la página de instalación 4.X para seguir los pasos 1 y 2 (File Download y Flash Android 1.6.. respectivamente).

Siguiendo esos pasos, puntualmente, ya tendriamos Android 1.6 (CyanogenMod 4.2.15.1).

Espero probar ésta versión por un tiempo para luego subir a la 5.X que según la gente del foro y del IRC, está bastante buena.

NOTA: Pongo los links por que para que repetir lo que en el wiki ya está escrito, por lo cual trato de plasmar los inconvenientes que encontré al momento de comenzar la instalación y comprender el procedimiento.

Bueno, espero no se me pase nada, y cualquier comentario, bien recibido.

Saludos!

C# - Pasar Variable por Referencia

Aqui un ejemplo básico de cómo se hace:




Y esta es la salida al compilar y ejecutar:

JSON + Java + XStream Lib

Ahora, veremos como escribir una cadena formato JSON (JavaScript Object Notation) desde el lenguaje de programación Java con ayuda de la libreria xStream 1.2.2.

import java.util.ArrayList;

import java.util.List;

import com.thoughtworks.xstream.XStream;

import com.thoughtworks.xstream.io.json.JettisonMappedXmlDriver;

public class classJSON {

public static void main(String[] args) {

XStream xstream = new XStream(new JettisonMappedXmlDriver());

xstream.setMode(XStream.NO_REFERENCES);

List order = new ArrayList();

String[][] source = new String[2][2];

source[0][0] = "1";

source[0][1] = "Dream On";

source[1][0] = "2";

source[1][1] = "Love me two times";

for (int i = 0; i <>

Song song = new Song(source[i][0], source[i][1]);

order.add(song);

}

xstream.alias("SONGS", List.class);

String rtn = xstream.toXML(order);

System.out.println(rtn);

}

}

El ejemplo se hizo desde Eclipse (Galileo), Java 1.6.0_19, y como se dijo antes xStream-1.2.2. La clase completa que hace la escritura es:Lo que se hace aqui es basicamente: Se instancia de la clase XStream el objeto xstream enviandole como paraemtro JettisonMappedXmlDriver(), clases proporcionadas por xstream-1.2.2, las cuales son las ecargadas de crear y ajustar el formato de la cadena JSON.

XStream xstream = new XStream(new JettisonMappedXmlDriver());

xstream.setMode(XStream.NO_REFERENCES);

Una vez tenemos esto, en el ejemplo se hace la prueba con una cadena de texto con 2 dimensiones que puede ser reemplazada por un "ResultSet" recuperado de la consulta a una base de datos o por que no de la información devuelta por un servicio web, por esto se llama la variable "source", es solo un ejemplo.

Recorremos la variable source (ResultSet, Hashtable, ArrayList...etc), y se instancia la clase Song la cual crearemos como sigue:

public class Song {
public String id;
public String title;

public Song(String p_id, String p_title){
id = p_id;
title = p_title;
}
}

Es una simple clase para darle formato a los datos y así el metodo toXML de la clase XStream sepa que datos trae.

Al terminar el ciclo "for" colocamos un "alias" a la cadena JSON para que tenga un nombre descriptivo cada una de las llaves a mostrar.

Por ultimo se llama el método toXML para que genere la cadena JSON la cual es mostrada por pantalla al finalizar la ejecución:

Salida:

{"SONGS":{"Song":[{"id":1,"title":"Dream On"},{"id":2,"title":"Love me two times"}]}}

Muy parecido a los diccionarios en python de por cierto.

Aplicación: Bastante útil para devolver ésta cadena de texto por parte de un servicio web a sus clientes, en vez de usar XML, o mejor dicho, otra alternativa al uso de XML.

Fuentes:

XStream: http://xstream.codehaus.org/index.html

C# + Access 2007

Para esta oportunidad, un simple acceso a M$ Acces 2007 desde C# con .Net framework 2.0

Aqui la clase de acceso a datos:

    class classData
{
   private string connString;

   public classData()
   {
       this.getConnStr();
   }

   public string ConnString
   {
       get { return connString; }
       set { connString = value; }
   }

   public void getConnStr()
   {
       this.ConnString = System.Configuration.ConfigurationManager.AppSettings.Get("connStr");
   }

   public void insertarPersona(string cc, string nom, string ciudad)
   {
       string sql = "INSERT INTO personas (cedula,nombre, ciudad) VALUES('" + cc + "','" + nom + "','" + ciudad + "')";
       OleDbConnection objCon = new OleDbConnection(this.ConnString);
       objCon.Open();
       OleDbCommand objCmd = new OleDbCommand(sql,objCon);
       objCmd.ExecuteNonQuery();
       objCon.Close();
   }

}

Es simplemente el usar la clase OleDbConnection y OleDbCommand para hacer la ejecucion de la sentencia SQL sobre la base de datos.

Ahora, aqui la clase que consume y llama el metodo de insertarPersona.

 class Program
 {
     static void Main(string[] args)
     {
         classData objData = new classData();
         Console.WriteLine("Digite cedula: ");
         string cedula = Console.ReadLine();
         Console.WriteLine("Digite nombre: ");
         string nombre = Console.ReadLine();
         Console.WriteLine("Digite ciudad: ");
         string ciudad = Console.ReadLine();
         objData.insertarPersona(cedula, nombre, ciudad);
     }
 }

Es tan sencillo como eso. implementarlo en una solicion Visual Studio 2005 (o cualquier otra que compile el proyecto sobre .Net Framework 2.0 o superior) y ya.

NOTAS:

Cadenas de conexion: http://www.connectionstrings.com/access-2007

Saludos

Click derecho enviar a correo + Chrome

¿Cómo enviar una página a un contacto por correo usando gmail sin instalar complementos?. Fue la pregunta que me hice, luego de pasarme a chrome y extrañando el Toolbar para firefox :). Pues leyendo un poco fue sencillo hacerlo, con ayuda de Javascript y los bookmarks de Chrome.

Primero me basé en [1], que lo recomendaron en Google Support [2] y a la final poniéndole un poco de [3] se logró hacer que funcionara la cosa.

[1] Enviar correo desde Chrome

[2] Google Support

[3] Javascript Window Open

Con esto resulto el script:

javascript:window.open('https://mail.google.com/mail/?view=cm&ui=2&tf=0&to=&su='+document.title+'&body="'+escape(location.href)+'";');

Poniendo esto en un bookmark de Chrome, podremos enviar alguna página que estemos viendo y nos parezca interesante recomendarla a alguien.

NOTA: No olvidar click en Herramientas (Icono de herramienta en Chrome, esquina superior derecha), y click en "Mostrar siempre la barra de marcadores".

Saludos

Netbeans + Apache Tomcat 6.0 + Cannot find setclasspath.bat

En el intento de incursionar en Netbeans con GWT, luego de instalar el plugin GWT para Netbeans, y tratando de subir el servidor Apache Tomcat al momento de ejecutar la aplicación de ejemplo de GWT, me sale el error:

Cannot find C:\Program Files\Apache Software Foundation\Tomcat 6.0\bin\setclasspath.bat

Pues aqui el archivo por si a alguien le llega a ocurrir lo mismo.

Descargar setclasspath.bat

Saludos

i like

good page. i like

in reference to: http://www.softwaredesign.co.uk/gwt.concepts.html (view on Google Sidewiki)