Detectar el control inalámbrico de Xbox en C# .Net sin utilizar XNA

Esta entrada está dedicada para enseñar cómo se puede detectar los controles de XBOX inalámbricos conectados a un receptor inalámbrico (PC Wireless  Gaming  Receiver) con C# .Net sin utilizar XNA.

controll xbox y receptor

Para poder detectar los controles haremos uso de una librería externa de nombre SlimDX, esta librería la podemos bajar por medio de Nuget o de su pagina http://slimdx.org/. SlimDX es una librería Open Source que nos permite construir programas usando DirectX, y una de sus funciones es detectar los Joystick.

También utilizaremos la clase GamepadState que ha hecho Renaud Bédard y podemos descargarla de su sitio, él ya nos facilita lo necesario para detectar los botones del control, palancas etc. Igual anexo la clase en esta liga, solo tienen que copiar y pegar el código en una clase del proyecto de Visual Studio.

Ahora que ya tenemos la librería SlimDX y la clase GamepadState solo nos queda comenzar a utilizar y detectar el control de la siguiente manera:

using SlimDX.XInput;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ControlXBox
{
    class Program
    {
        static void Main(string[] args)
        {
            //creamos una instancia GamepadState y le enviamos la constante de control numero 1
             GamepadState control = new GamepadState(UserIndex.One);

             //ahora detectamos si el controll esta conectado
             if (control.Connected)
             {
                 Console.WriteLine("El control esta conectado");

                 //creamos un ciclo infinito solo para detectar el control cada que presionemos un boton

                 while(true){

                     //detectamos si se realizo una modificación, se presiono un botón o se movio una palanca etc.
                     control.Update();

                     //imprimimos el boton presionado en consola
                     Console.WriteLine(control.Controller.GetState().Gamepad.Buttons.ToString());

                 }

             }
             else
             {
                 //Si el control no esta conectado mostramos mensaje de que no esta conectado :(
                 Console.WriteLine("El control NO esta conectado");
                 Console.ReadLine();

             }

        }

    }
}

Cree un proyecto de consola de Visual Studio y aquí plasmo el resultado en video para que puedan ver que funciona bien:

Cualquier duda en los comentarios pueden preguntar.

Clonar una imagen a un conjunto de divs utilizando #jquery, #javascript y #canvas.

Esta entrada veremos cómo podemos clonar una imagen (jpg, png) a código html, es decir, pintar por medio de divs una imagen deseada.

Recalco que no es muy útil hacer esto, la utilidad de esta entrada es que vean como por medio de canvas, se puede recorrer una imagen y a su vez obtener pixel a pixel de esta.

A continuación pongo el ejemplo corriendo, solo den clic en el botón “dibuja en HTML” y esperen ya que tarda algunos segundos en realizar la acción.

Y podemos ver en esta imagen que son divs sin duda:

div clonados con canvas

Ahora lo interesante, el código que nos ayuda a crear la magia, y como siempre con sus respectivos comentarios:

CSS

 
.pixel{			
float:left;			
width:1px;			
height:1px;		  
}

HTML

 <img id="imagen" width="200" height="200"  src="../img/images/galaxia.jpg" />
    <br />

<input type="button" value="dibuja en HTML" onclick="dibuja()" />
<div id="mensaje" style="font-weight:bold"></div>

<div id="imagenHTML"></div>

Javascript

//función que ejecuta el botón
function dibuja(){
	$("#mensaje").html("Espere un momentos, se esta dibujando la imagen!");

	//comienza a dibujar despues de 1 segundo, para mostrar el mensaje anterior.
	setTimeout(dibujar,1000)

}

//Esta es la función que realiza la acción principal
//funcion que realiza la clonacion de la imagen a divs
function dibujar(){
	//guardamos la imagen en una variable
	var img = $('#imagen')[0];

	//creamos un canvas y le definimos el mismo tamaño a la imagen
	var canvas = $('<canvas/>')[0];
	canvas.width = img.width;
	canvas.height = img.height;
	//Le asignamos la imagen al canvas, ya que nos ayudara el canvas para poder obtener los pixeles de la imagen real
	canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

	//definimos el tamaño del div para que sea el mismo ancho de la imagen
	//de esta manera al pintar los divs hijos que representaran los pixeles
	//formen la imagen y den el salto automatico cuando corresponda
	$("#imagenHTML").html("")
	$("#imagenHTML").css({"width":canvas.width+"px"})

	//realizamos el recorrido de los pixeles del canvas tomando el ALTO como maximo valor a recorrer
	for(y=0;y<canvas.height;y++){

		//realizamos el recorrido de los pixeles del canvas tomando el ANCHO como maximo valor a recorrer
		for(x=0;x<canvas.width;x++){
			//obtenemos el color en rgb del pixel actual
			var rgb = canvas.getContext('2d').getImageData(x,y,x+1,y+1).data;
			//obtenemos el rojo verde y azul del rgb anterior
			 var red = quitaCero(rgb[0].toString(16), 2);
             var green = quitaCero(rgb[1].toString(16), 2);
             var blue = quitaCero(rgb[2].toString(16), 2);

			 //obtenemos el hexadecimal con lso colores anteriores
             var hex = red + green + blue;

			 //y por ultimo creamos un div con la clase pixel que tiene el color hexadecimal
			$("#imagenHTML").append("<div class='pixel' style='background:#"+hex+"'></div>");
		}

	}

	//se termino de pintar y borramos el mensaje de texto que se puso al inicio
	$("#mensaje").html("");
}

//Función que nos ayuda a agregar al arreglo un 0 a una cadena cuando la longitud recibida no se cumple
var quitaCero = function(num, longitud) {
    return Array(longitud + 1 - (num + '').length).join('0') + num;
}

Quizá no sirva de mucho hacer esto ya que es lento, pero les servirá para algo el saber que pueden recorrer una imagen por sus pixeles por medio de javascript y el grandioso elemento agregado en html5 de nombre canvas.
Igual les anexo la liga directa al script para que puedan ver el código directamente: clic aquí.

Linq, introducción y ejemplos rápidos en C# .Net

Esta entrada hablare sobre LINQ, lo necesario para que comprendas fácilmente y rápido, sin tanta teoría ni palabras raras.

Linq nació por allá del 2008 y desde entonces nos ha facilitado la vida, ya que agrega funcionalidades al lenguaje de c# o Visual Basic .Net respecto cualquier almacen de datos, es decir, nos permite aplicar algo parecido a consultas de SQL a una lista, un xml, o ¿porque no?, a la misma base de datos.
Algo que el mismo Microsoft recalca en todos sus cursos es que Linq se divide en tres acciones que son:

  1. Obtención de origen de datos.
  2. Creación de la consulta
  3. Ejecución de la consulta.

Terminemos de la palabrería y vayamos a los ejemplos.

El primer ejemplo es cómo podemos ordenar una lista de enteros con Linq y se puede hacer de la siguiente manera.

1. Obtención de origen de datos:

 int[] arregloEnteros = { 1, 2, 3, 5, 3, 2, 8, 9 };

2. Creación de la consulta

 
IEnumerable<int> lstEnterosOrdenados = from nums in arregloEnteros 
                                       orderby nums 
                                       select nums;

En este punto aún no se ejecuta la consulta solo la guardamos en este caso en una colección de la instancia IEnumerable. Cualquier tipo de dato que admita implícitamente la interfaz IEnumerable o alguna de sus derivaciones, se le puede aplicar LINQ.

3. Ejecución de la consulta (ahora si aquí se ejecuta la magia de LINQ)

 

foreach(int n in lstEnterosOrdenados){      
 Console.WriteLine(n);            
}

De esta manera nuestro resultado es el siguiente:

linq1

Como vemos de una manera rápida podemos realizar operaciones que son el pan de cada día.

Ahora veamos otros ejemplos para comprender mejor el alcance de LINQ:

Filtrar elementos

 
//Origen de datos 
int[] arregloEnteros = { 1, 2, 3, 5, 3, 2, 8, 9 }; 

//Consulta, utilizamos where como en sql para obtener numeros menores a 5 

IEnumerable<int> lstEnterosMenoresCinco = from nums in arregloEnteros                                                      
                                          where nums < 5                                                      
                                          select nums;

//Ejecucion 
foreach (int n in lstEnterosMenoresCinco) {         
            Console.WriteLine(n); 
}
linq2

Linq en elementos complejos


//clase Complejo, una clase que nos servirá para el ejemplo
 public class Complejo
        {
             public int numero{get;set;}
             public string cadena{get;set;}

             public Complejo(int numero, string cadena)
             {
                 this.numero = numero;
                 this.cadena = cadena;
             }

             public string imprime()
             {
                 return numero + " " + cadena;
             }
        }

          

//origen de datos            
Complejo[] lstComplejos={ 
new Complejo(1,"pato"),                                   
new Complejo(5,"perro"),                                      
new Complejo(9,"pajaro"),                                      
new Complejo(10,"pez"),                                      
new Complejo(2,"ave"),                                      
new Complejo(4,"gusano"),                                    
};       

//consulta            
IEnumerable<Complejo> lstComplejosConP =from d in lstComplejos                                                  
where d.cadena.StartsWith("p")                                                    select d;            

//ejecución de consulta            
foreach(Complejo c in lstComplejosConP){                  
   Console.WriteLine(c.imprime());            

}

linq3

Linq en elementos complejos obtener una colección reducida

//utilizamos la misma clase Complejo

//origen de datos            
Complejo[] lstComplejos={ 
new Complejo(1,"pato"),                                      
new Complejo(5,"perro"),                                      
new Complejo(9,"pajaro"),                                      
new Complejo(10,"pez"),                                      
new Complejo(2,"ave"),                                      
new Complejo(4,"gusano"),                                    
};

//Consulta, reducimos la clase Complejo a una lista de cadenas

IEnumerablex lstSoloCadenas = from d in lstComplejos
select d.cadena; 

//ejecución de consulta   

foreach (string s in lstSoloCadenas){
   
    Console.WriteLine(s);    

}

linq4

Con esto es más que suficiente para que hayan entendido LINQ y su potencial, de aquí en adelante solo les queda practicar y ver lo practico que es esta característica en .Net.

Algoritmo de ordenamiento Quicksort en Javascript animado con jquery

En esta entrada utilizare el algoritmo de quicksort en javascript que publique anteriormente y lo acomode de una manera especial para poder mostrar poco a poco como se va ordenando un conjunto de números por medio de este método de ordenamiento.

Para el que no conozca la función que estoy utilizando setTimeout, esta simplemente se encarga de ejecutar una función o un código después de pasar cierto tiempo, en este caso puse 500 que es medio segundo. Hago uso de esta función par que se pueda notar el ordenamiento y no sea instantáneo.

A continuación anexo el ejemplo animado, solo denle clic en el botón comenzar:

Y ahora el código que hace posible esta demostración:

CSS

.bloque{
float:left;
margin-left:5px;
margin-bottom:2px;
width:20px;
height:20px;
text-align::center;
padding:5px;
background:#fff;
}

HTML


<div id="contenido" style=" background:#efefef; height:90px; padding:10px;"></div>
<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Javascript


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,0,5,6,9,17,10,4,5,3,2,3,4,5,6,7,88,77,66,55,44,33,21,2,33,44,73,78,9,2,3,0,1,8,1,13];

imprimirArreglo();

function comenzar(){

//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));

//desabilitamos boton
$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

//borramos el contenido del div del contenido
$("#contenido").html("");

//imprimimos los elementos en forma de div
for(i_=0;i_<arreglo.length;i_++){

//anexamos un div con clase bloque
$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
}

}

//función quicksort
function quicksort(primero,ultimo){
//definimos variables indices
i = primero
j = ultimo

//sacamos el pivote de la mitad del arreglo
pivote = arreglo[parseInt((i+j)/2)];

iteracionQS(i,j,pivote,primero,ultimo)

}

//funcion que suplanta el while y se llama recursivamente
function iteracionQS(i,j,pivote,primero,ultimo){

//mientras arreglo[i] sea menor a pivote
while(arreglo[i]<pivote)
i++;
//mientras j sea mayor a pivote
while(arreglo[j]>pivote)
j--;

//si el indice i es menor o igual a j entonces intercambiamos
if(i<=j){

//variable temporal auxiliar para guardar valor de arreglo[j]
aux=arreglo[j];

//intercambiamos los valores de arreglo[j] y arreglo[i]
arreglo[j] = arreglo[i]
arreglo[i] = aux

// incrementamos y decrementamos i y j
i++;
j--;

imprimirArreglo(arreglo);
}

//repetimos
if(i<j){
//hacemos una pausa de medio segundo
setTimeout(function(){
iteracionQS(i,j,pivote,primero,ultimo)
},500);
}else{
//si primero es menor a j llamamos la funcion nuevamente
if(primero<j){

//pausa de medio segundo
setTimeout(function(){
quicksort(primero,j);
},500);
}
//si ultimo es mayor que i llamamos la funcion nuevamente
if(ultimo>i){

//pausa de medio segundo
setTimeout(function(){
quicksort(i,ultimo)
}
,500);
}
}
}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.

Algoritmo de ordenamiento Quicksort en javascript

El algoritmo quicksort es un algoritmo de ordenamiento, como su nombre lo dice, es de los más rápidos y es recomendable su uso (no como el de burbuja).

Ver quicksort animado con jquery.

Aquí anexo el algoritmo de quicksort en javascript:

Función Quicksort

function quicksort(primero,ultimo){
	//definimos variables indices
	i = primero
	j = ultimo

	//sacamos el pivote de la mitad del arreglo
    pivote = arreglo[parseInt((i+j)/2)];

	//repetir hasta que i siga siendo menor que j
	do{

		//mientras arreglo[i] sea menor a pivote
		while(arreglo[i]<pivote) 			i++; 		//mientras j sea mayor a pivote 		while(arreglo[j]>pivote)
			j--;

		//si i es menor o igual a j, los valores ya se cruzaron
		if(i<=j){

			//variable temporal auxiliar para guardar valor de arreglo[j]
			aux=arreglo[j];

			//intercambiamos los valores de arreglo[j] y arreglo[i]
            arreglo[j] = arreglo[i]
            arreglo[i] = aux

			// incrementamos y decrementamos i y j
            i++;
            j--;
		}

	}while(i<j);

	    //si primero es menor a j llamamos la funcion nuevamente
		if(primero<j){ 			quicksort(primero,j); 		} 		//si ultimo es mayor que i llamamos la funcion nuevamente 		if(ultimo>i){
		    quicksort(i,ultimo);
		}
}

Como utilizarlo


//arreglo a ordenar
arreglo=[10,9,19,8,1,12,14,24,34,54,5,4,2,99,2,3,1,0];

//llamamos la función mandando 0 en el primer parametro
//y mandando la longitud del arreglo -1
quicksort(0,(arreglo.length-1));

//imprimimos para ver el resultado
alert(arreglo)

Algoritmo de ordenamiento burbuja animado con jquery

En esta entrada hago uso del algoritmo burbuja en javascript que publique anteriormente, pero lo modifique para poder hacer una demostración utilizando jquery, de cómo va intercambiando los elementos en cada iteración, anexo el algoritmo funcionando, denle al botón comenzar para ver la animación hecha con jquery.

Y ahora el código completo y comentado:

CSS

.bloque{
	float:left;
	margin-left:5px;
	width:20px;
	height:20px;
	text-align::center;
	padding:5px;
	background:#fff;
 }

Código HTML


<div id="contenido" style=" background:#efefef; height:30px; padding:10px;"></div>

<input id="botonsito" type="button" value="Comenzar" onclick="comenzar()" />

Código Javascript/Jquery


//variables globales

arreglo=[11,15,12,8,1,5,4,2,99,2,3];
var i=0,j=0;
var iteracion; //sirve para guardar el evento de tiempo y poder pararlo

$(document).ready(function(){

	imprimirArreglo(arreglo)

});

function comenzar(){

	//comienza la iteracion con velocidad de 3 decimas de segundo cada iteración
	iteracion=setInterval(burbuja,300);

	//desabilitamos boton
	$("#botonsito").prop("disabled",true)

}

//funcion que plasma el arreglo para poder ser visualizado
function imprimirArreglo(){

	//borramos el contenido del div del contenido
	$("#contenido").html("");

	//imprimimos los elementos en forma de div
	for(i_=0;i_<arreglo.length;i_++){

		//anexamos un div con clase bloque
		$("#contenido").append("<div class='bloque'>"+arreglo[i_]+"</div>");
	}

}

function burbuja(){
	//recorreremos todos los elementos hasta n-1
	if(i<arreglo.length){

		//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	    if(j<(arreglo.length-i)){

			//comparamos
			if(arreglo[j]>arreglo[j+1]){
				 //guardamos el numero mayor en el auxiliar
				 aux=arreglo[j];
				 //guardamos el numero menor en el lugar correspondiente
				 arreglo[j]=arreglo[j+1];
				 //asignamos el auxiliar en el lugar correspondiente
				 arreglo[j+1]=aux;

			}

			j++;
		}else{
			j=0;
			i++;
		}

	}else{
	    //aqui se termina el algoritmo por lo cual paramos el setInterval
		clearInterval(iteracion);

	}

	//imprimimos el arreglo en cada iteración
	imprimirArreglo()

}

De cualquier forma les dejo la liga directa al ejemplo mostrado, por si surge alguna duda.

Las funciones setInterval y clearInterval son funciones de javascript, la primera sirve para ejecutar un código cada cierto tiempo, la segunda detiene las iteraciones de la primera.

Algoritmo de ordenamiento Burbuja en javascript

El algoritmo de ordenamiento burbuja (burbuja mejorada en este caso), es un algoritmo sencillo para ordenar elementos, ha llegado a no ser recomendado por su gran cantidad de iteraciones, pero no está demás conocerlo para comprender algoritmos de ordenamiento de más complejidad y mayor utilidad.

Ver algoritmo burbuja animado utilizando jquery.

A continuación plasmo la función en javascript y como utilizarla:

Función javascript

function burbuja(arreglo){
	//recorreremos todos los elementos hasta n-1
	for(i=0;i<(arreglo.length-1);i++)
	//recorreremos todos los elementos hasta n-i, tomar en cuenta los ultimos no tiene caso ya que ya estan acomodados.
	for(j=0;j<(arreglo.length-i);j++){

		//comparamos
		if(arreglo[j]>arreglo[j+1]){
			 //guardamos el numero mayor en el auxiliar
		     aux=arreglo[j];
			 //guardamos el numero menor en el lugar correspondiente
			 arreglo[j]=arreglo[j+1];
			 //asignamos el auxiliar en el lugar correspondiente
			 arreglo[j+1]=aux;

		}

	}

	return arreglo
}

Como utilizarlo

//arreglo a ordenar
var arregloAOrdenar=[1000,9,111,8,1,5,4,2,99,2,3];

//invocamos la función
arregloAOrdenar=burbuja(arregloAOrdenar);

//imprimimos para ver el resultado
alert(arregloAOrdenar)

¿Cómo seleccionar el valor del radio button seleccionado con jquery?

Para seleccionar el valor del radio button seleccionado se hace de la siguiente manera:

HTML

<input type="radio" name="radiosfelices" value="1" >
<input type="radio" name="radiosfelices" value="2" checked="checked">
<input type="radio" name="radiosfelices" value="3">

Javascript

$(function(){

   var valor= $("input[name=radiosfelices]:checked").prop("value");

   alert(valor)
   // &gt;&gt; 2

})

Seleccionamos por el atributo name de nuestro grupo de radios y asignamos el parámetro checked, de esta forma nos regresara el valor del elemento que esta seleccionado.