Aprenderemos a seleccionar un color en escala RGB con el plugin jQuery Knob.

Hola amigos de Devcode, hoy vamos ha aprender el uso de un plugin de jQuery, llamado jQuery Knob, para realizar una aplicación mediante la cual podremos seleccionar un color en la escala RGB.

Iniciamos agregando las librerías de JavaScript a Codepen.

El orden es importante, primero se tiene que agregar la libreria de jQuery y luego la librería de jQuery Knob, tiene que estar en ese orden ya que la segunda es un plugin de jQuery.

En HTML creamos un div con clase contenedor, que tiene como hijo a un input de tipo "text". Este input tiene la clase de "dial" y un valor inicial de 200.

Adicionalmente este input presenta otros atributos específicos de jQuery Knob:

• data-max: es el número máximo que puede alcanzar el input.
• data-width: es la medida del radio que tiene el dial graficado.
• data-fgColor: es el color del dial, tanto del indicador como del número.

En CSS, añadimos al contenedor las propiedades de ancho alto y un margen para poder centrar el elemento.

.contenedor {
  width: 180px;
  height: 180px;
  margin: 0 auto;
}

En JavaScript inicializamos el Dial con  $(".dial").knob()

$(function(){ 
  $(".dial").knob() 
});

Ahora vamos a agregar dos inputs más, idénticos al primero, con la diferencia que se cambiaran los colores por "green" y "blue". Adicionalmente en HTML crearemos un nuevo contenedor que tendrá por id "color".

En CSS a este contenedor de id "color", le asignamos un color de fondo, y aumentamos el ancho a la clase contenedor.

#color {
  background-color: rgb(200, 200, 200);
}

.contenedor {
  width: 550px;
}

Ahora en JavaScript creamos una función que se ejecutará cuando se produzca un cambio en el valor en cualquiera de los diales.

$(".dial").knob({
    'change': function() {
     
      }
  });

Para diferenciar cada uno de los elementos input, les agregamos el atributo id con el valor de la letra inicial de su nombre en ingles.

Con la ayuda de estos id’s ahora podremos generar la cadena que representa al color rgb.

var color_rgb ='rgb(' + $('#r').val() + ',' + $('#g').val() + ',' + $('#b').val() + ')';

Reemplazamos el color de fondo del contenedor "color".

$('#color').css('background-color',color_rgb);

Ahora quiero que en el centro de este contenedor se muestre el color pero en formato hexadecimal. Para ello agregó como texto el color inicial.

#C8C8C8

En CSS agregamos propiedades para centrar el elemento tanto en horizontal como en vertical, para centrar el elemento en forma vertical, hacemos uso de propiedades de flexbox.

#color {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
}

Ademas agregamos un color (blanco) y un tamaño para las letras de 50px.

#color {
  font-size: 50px;
  color: white;
}

Ahora creamos una funcion para convertir un numero decimal a uno hexadecimal, con la ayuda de una cadena de caracteres de 0 a la F.

function d_a_h(dec) {
  var caracteres = "0123456789ABCDEF";
  var low = dec % 16;
  hex = "" + caracteres.charAt(high) + caracteres.charAt(low);
  return hex;
}

Con esta función y los valores decimales de los colores podemos generar la cadena hexadecimal del color generado.

var color_hex = '#' + d_a_h($('#r').val()) + d_a_h($('#g').val()) + d_a_h($('#b').val());

Ahora modificamos el texto del elemento con id "color".

$('#color').text(color_hex);

Si deseas aprender mas de programación, recuerda que en Devcode tenemos el Curso de jQuery esperando por ti, además de encontrar muchos otros cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.