27 Nov

Jquery Tips (Metodos)

Codigo Fuente

Después de aprender a seleccionar con jquery los elementos del documento html por medio de los selectores anteriormente comentados, esa importante saber que hacer con estos, por lo cual vamos a ver como aplicar métodos a un elemento seleccionado.

Ejemplos de aplicación de métodos con jquery


// Aplica propiedad CSS al elemento seleccionado 
$(". className"). css(" border", "1px solid red"); 

// Aplica CSS de un elemento usando un objeto
$(". className"). css({" border": "1px solid red"}); 

// Aplica dos CSS a los objetos seleccionados 
// (notese que este ejemplo usa una notación de objeto para el caso de las propiedades que 
// se desean establecer por medio del método CSS de jquery, por esta razon se 
// puede usar para aplicar mas de una propiedad) 
$(". className"). css({ "color": "red", "font-weight": "bold" });

// Esconde la segunda fila de la tabla
$(" table tr:nth-child( 2)"). hide(); 

// Convierte la lista < ul id = "list" > en una lista ordenable 
$(" ul# list"). sortable(); 

// Selecciona todos  los elementos y los filtra usando el metodo "is" 
$("*"). is(" p"); 

// El metodo "is" es usado con la variable "this" dentro de los callback para poder indetificar su tipo
$(this). is("div"); 

// Selecciona un elemento y con el metodo "parent" selecciona el elemento padre 
$("p#short"). parent();

// Selecciona todos los inputs si estos tienen como padre el elemento "form"  
$(" input"). parent(). is(" form"); 

// Selecciona y aplica el estilo CSS, limpia la cola, hace una nueva seleccion y aplica nuevo CSS, en otras palabras los elementos 

quedan con fuente de color azul y los elementos quedan con fuente de color rojo 
$(" p"). css(" color", "blue"). end(). add(" b"). css(" color", "red"); 

// si se hace sin el metodo "end" entre los elementos ambos quedan con fuente de color rojo.
$(" p"). css(" color", "blue"). add(" b"). css(" color", "red");

27 Nov

Jquery tips (Selectores)

Codigo Fuente

JQuery es sin duda el framework javascript mas popular en la web, por esto en ocasiones es importante tener a la mano información que aunque es básica, nos ayudara a resolver varios problemas.

Empecemos con lo basico

$(" div");

Es lo mismo que

jQuery(" div");

selectores

// Selector por tag
$("body"); 

// Selector por id del elemento 
$("# id"); 

// Selector por clase del elemento 
$(".className"); 

// Selector usando pseudo-selector CSS :nth-child 
$(" div:nth-child( 2)"); 

// Selector de todos los elementos del documento html 
$("*"); 

// Selector de todos los elementos párrafo
$("p"); 

// Selector para párrafos spans y divs 
$("p, span, div"); 

// selector de párrafo con id 
$(" p# short");

// selector de div con clase
$(" div.option"); 

// Selector con elemento y pseudo-selector :first o :last
$(" p:first"); 
$(" p:last"); 


// Selector con elemento y pseudo-selector nth-child (nos permite seleccionar cualquier posición de una lista de elementos )
$(" p:nth-child( 1)"); // primero
$(" p:nth-child( 2)"); // segundo
$(" p:nth-child( 3)"); // tercero

// Selector con elemento y pseudo-selector nth-child con palabras clave even o odd
// even para seleccionar todos los pares 
// odd para seleccionar los impares
$(" p:nth-child( even)"); 
$(" p:nth-child( odd)"); 

// Selector con los paréntesis cuadrados para seleccionar cualquier elemento con un atributo llamado "xxx"
$("[xxx]"); 

// Selector para seleccionar todos los párrafos hijos pero solo después de cualquier elemento con clase "s"
$(".s ~p"); 

// Selector para los inputs de type definido ejemplo tipo "text"  
$(" input[ type = text]");

// Selector para todos los checkbox seleccionados usando el selector de atrubuto [] o el psudo-selector :checked, selector que tambein sirve para los radio buttons 
$(" input:checked"); 

// Selector poara seleccionar solo checkboxes 
$(" input[ type = checkbox]: checked"); 

// Selector para todos los elementos inputs contenidos en el elemento form
$("form input"); 

// Selector para todos los elementos a dentro de la tabla 
$("table tr td a"); 

Aqui terminan los tips de selectores.

24 Nov

Configurar camara web lifecam vx-500 en octopi

Codigo Fuente

Primero les hablo del gran proyecto que es OctoPrint y su adaptacion a raspberry pi llamado OctoPi

OctoPrint es un software de control de Impresoras 3D que se ejecuta desde un navegador y permite controlar tu impresora 3D de forma remota a través de la red; este grandioso software es open source y recientemente ha sido apadrinado por la empresa española Bq.

OctoPi mas que una adaptación, es un script que genera una imagen de raspbian modificado, esta es una imagen del sistema operativo linux para raspberry, este script deja listo el sistema para conectarlo a la impresora 3D y usarlo como Host para poder hacer las impresiones y el manejo de la impresora.

Estos dos grandes proyectos los conocí por que hace un tiempo empece con la creación de mi impresora 3D y me vi en la necesidad de tener un host, el cual inicialmente era mi portatil, pero luego encontre en la red que se podia usar un raspberry pi, el cual ya tenia y empece a configurar, realmente por medio del proyecto OctoPi fue muy facil, pero fue muy complicado lograr hacer funcionar la camara web que tengo, esto para podr observar como va la impresion sin estar al lado de la impresora.

Realmente creo que el problema que tube con la camara web es por lo vieja que es, por lo cual me toco investigar mucho en internet pero al final lo logre; aqui les cuento los comandos y procedimiento que realice para poder hacer funcionar mi camara lifecam vx-500 (Microsoft).

Octopi crea un script para arrancar la camara web, este script esta ubicado en la direccion /home/pi/scripts/webcamDaemon, el archivo arranca con el sistema operativo, pero en mi caso la camara arrancaba pero no daba ninguna imagen, por lo cual procedi a comentariar los comandos internos del archivo, para poder ejecutarlos manualmente y asi saber cual era el problema.

Sucede que por Octopi para hacer uso de la camara web usa otro proyecto open source llamado mjpg_streamer el cual usa por defecto el formato de procesamiento de imagen JPEG, el cual no es soportado por mi camara, asi que para saber cual era el formato use los siguientes comandos.

Primero instale los siguiente

sudo apt-get install subversion libv4l-dev libjpeg8-dev imagemagick fswebcam

Esto instala una aplicación la cual nos va a dar información sobre la cámara web, luego de haber instalado, ejecutamos el siguiente comando:

fswebcam --verbose

Este comando nos dará la siguiente información

--- Opening /dev/video0...
Trying source module v4l2...
/dev/video0 opened.
src_v4l2_get_capability,87: /dev/video0 information:
src_v4l2_get_capability,88: cap.driver: &amp;quot;uvcvideo&amp;quot;
src_v4l2_get_capability,89: cap.card: &amp;quot;Microsoft LifeCam&amp;quot;
src_v4l2_get_capability,90: cap.bus_info: &amp;quot;usb-bcm2708_usb-1.2&amp;quot;
src_v4l2_get_capability,91: cap.capabilities=0x84000001
src_v4l2_get_capability,92: - VIDEO_CAPTURE
src_v4l2_get_capability,103: - STREAMING
No input was specified, using the first.
src_v4l2_set_input,181: /dev/video0: Input 0 information:
src_v4l2_set_input,182: name = &amp;quot;Camera 1&amp;quot;
src_v4l2_set_input,183: type = 00000002
src_v4l2_set_input,185: - CAMERA
src_v4l2_set_input,186: audioset = 00000000
src_v4l2_set_input,187: tuner = 00000000
src_v4l2_set_input,188: status = 00000000
src_v4l2_set_pix_format,520: Device offers the following V4L2 pixel formats:
src_v4l2_set_pix_format,533: 0: [0x56595559] 'YUYV' (YUV 4:2:2 (YUYV))
Using palette YUYV
Adjusting resolution from 384x288 to 352x288.
src_v4l2_set_mmap,672: mmap information:
src_v4l2_set_mmap,673: frames=4
src_v4l2_set_mmap,722: 0 length=202752
src_v4l2_set_mmap,722: 1 length=202752
src_v4l2_set_mmap,722: 2 length=202752
src_v4l2_set_mmap,722: 3 length=202752
--- Capturing frame...
Captured frame in 0.00 seconds.
--- Processing captured image...
There are unsaved changes to the image.

En la linea 21 nos damos cuenta que nos indica que el formato de imagen que da la camara es YUYV (Using palette YUYV) por lo cual nos toca indicarle a mjpg_streamer que use este formato.

Para poder indicarle al demonio de Octopi que use este formato tenemos que modificar el archivo sh /home/pi/scripts/webcamDaemon dejandolo asi

#!/bin/bash

MJPGSTREAMER_HOME=/home/pi/mjpg-streamer
MJPGSTREAMER_INPUT_USB=&amp;quot;input_uvc.so -y&amp;quot;
MJPGSTREAMER_INPUT_RASPICAM=&amp;quot;input_raspicam.so&amp;quot;

# init configuration
camera=&amp;quot;usb&amp;quot;
camera_usb_options=&amp;quot;-r 640x480 -f 10&amp;quot;
camera_raspi_options=&amp;quot;-fps 10&amp;quot;

if [ -e &amp;quot;/boot/octopi.txt&amp;quot; ]; then
    source &amp;quot;/boot/octopi.txt&amp;quot;
fi

# runs MJPG Streamer, using the provided input plugin + configuration
function runMjpgStreamer {
    input=$1
    pushd $MJPGSTREAMER_HOME
    echo Running ./mjpg_streamer -o &amp;quot;output_http.so -w ./www&amp;quot; -i &amp;quot;$input&amp;quot;
    LD_LIBRARY_PATH=. ./mjpg_streamer -o &amp;quot;output_http.so -w ./www&amp;quot; -i &amp;quot;$input&amp;quot;
    popd
}

# starts up the RasPiCam
function startRaspi {
    logger &amp;quot;Starting Raspberry Pi camera&amp;quot;
    runMjpgStreamer &amp;quot;$MJPGSTREAMER_INPUT_RASPICAM $camera_raspi_options&amp;quot;
}

# starts up the USB webcam
function startUsb {
    logger &amp;quot;Starting USB webcam&amp;quot;
    runMjpgStreamer &amp;quot;$MJPGSTREAMER_INPUT_USB $camera_usb_options&amp;quot;
}

# we need this to prevent the later calls to vcgencmd from blocking
# I have no idea why, but that's how it is...
vcgencmd version

# echo configuration
echo camera: $camera
echo usb options: $camera_usb_options
echo raspi options: $camera_raspi_options

# keep mjpg streamer running if some camera is attached
while true; do
    if [ -e &amp;quot;/dev/video0&amp;quot; ] &amp;amp;&amp;amp; { [ &amp;quot;$camera&amp;quot; = &amp;quot;auto&amp;quot; ] || [ &amp;quot;$camera&amp;quot; = &amp;quot;usb&amp;quot; ] ; }; then
        startUsb
    elif [ &amp;quot;`vcgencmd get_camera`&amp;quot; = &amp;quot;supported=1 detected=1&amp;quot; ] &amp;amp;&amp;amp; { [ &amp;quot;$camera&amp;quot; = &amp;quot;auto&amp;quot; ] || [ &amp;quot;$camera&amp;quot; = &amp;quot;raspi&amp;quot; ] ; }; then
        startRaspi
    else
        echo &amp;quot;No camera detected, trying again in two minutes&amp;quot;
    fi

    sleep 120
done

El cambio que se realiza es en la linea numero 4 en donde se le pone un -y antes de las comillas finales.

Con esto solo falta reiniciar y el raspberry pi y el octoprint ya estaran transmitiendo imagen en vivo.

Espero que este articulo sea de ayuda.