Selector de color HTML ColorMap

Código Javascript que muestra un selector de color en forma de panal. Se trata de una adaptación del código de HTML Color Picker en w3schools.com

Paleta de colormap

Seleccionar un color

Opción HTML5

Si en un formulario deseamos seleccionar un color podemos usar:

<input type="color">

El selector que aparecerá en pantalla depende del navegador que utilices.

Por ejemplo:

Opción ColorMap

Si deseamos usar este componente en un formulario el código es:

<input type="picolor">

Al hacer clic se muestra una paleta de colores en celdas hexagonales independiente del navegador.
Al teclear el color se pintará uno de los extremos del INPUT

Por ejemplo:

Para este ejemplo se necesita incluir el archivo picolormap.js
y el siguiente código Javascript al cargar la página web:

piColorInput();

O así si se quieren cambiar las opciones predeterminadas:

piColorInput({ratio:-0.25, dark:true, circle:true, scale:1.5});

Versión 2: usa una imagen SVG

Usa puro Javascript para crear el selector de color.

colormap

interfaz = piColorMap(opciones)

Es un selector de color hexagonal creado a partir de una imagen SVG. Contiene 126 hexágonos de colores

OpciónSignificado
circle:¿Envolver el selector con un círculo negro?
scale:Tanto por uno de escalado. Por omisión 1.0
InterfazSignificado
.svgLa etiqueta <svg> que hay que insertar en el DOM
.colorCambia u obtiene el color actual
.onHoverRetrollamada que envía el color bajo el ratón
.onClickRetrollamada que envía el color al hacer clic
.widthAncho en píxeles del <svg>
.heightAlto en píxeles del <svg>

Ejemplo de uso:

// Muestra el selector de color al final del body
const colormap = piColorMap({ circle:true, scale:1.0 });
document.body.appendChild(colormap.svg);

// Agrandarlo el doble
colormap.scale = 2.0; 
console.log(colormap.width, colormap.height);

// Cambiar el color seleccionado y mostrarlo en la consola
colormap.color = '#FFFFFF';
console.log(colormap.color);

// El primer párrafo se pinta del color bajo el ratón
const p = document.querySelector('p');
colormap.onHover = color => p.style.backgroundColor = color;

// El primer <output> recoge el color al hacer clic
const output = document.querySelector('output');
colormap.onClick = color => output.textContent = color;

interfaz = piColorPopup(opciones)

Muestra el selector de color dentro de una ventana emergente

OpciónSignificado
dark:¿Oscurece el fondo?
InterfazSignificado
.show()Muestra el selector
.hide()Oculta el selector
.colorCambia u obtiene el color actual
.toggle()Conmuta el estado visible del selector
.onClickRetrollamada que envía el color al hacer clic

Ejemplo de uso:

// Crea el popup aunque queda oculto
const colorpopup = piColorPopup({ dark:true, circle:true, scale:1.0 });

// Lo muestra y lo oculta
colorpopup.show();
colorpopup.hide();

// El primer botón conmuta el popup
const button = document.querySelector('button');
button.addEventListener('click', () => colorpopup.toggle() );

// El primer <output> recoge el color al hacer clic
const output = document.querySelector('output');
colorpopup.onClick = color => output.textContent = color;

interfaz = piColorButton(opciones)

Vincula un <button> con piColorPopup(). El color del botón se almacena en un atributo de usuario y además el color pinta el fondo del botón. Código: <button data-color="#ABCDEF">

InterfazSignificado
.add(buttons)Añade uno o más botones
.refresh(buttons)Pinta los botones según su atributo data-color

Ejemplo de uso:

// Los botones con atributo data-color muestran el popup al hacer clic
const colorbutton = piColorButton({ dark:true, circle:true, scale:1.0 });
const buttons = document.querySelectorAll('button[data-color]');
colorbutton.add(buttons);

// El primer botón se pinta de amarillo
buttons[0].dataset.color = '#FFFF00';
colorbutton.refresh(buttons);

interfaz = piColorInput(opciones)

Vincula un <input> con piColorPopup(). El color es el valor del input. El inicio o el final del input quedará pintado con dicho color. Código: <input type="picolor" value="green">

OpciónSignificado
type:Tipo del input. Por omisión es picolor
ratio:Tanto por uno del ancho dedicado a la muestra de color.
Si es negativo saldrá a la izquierda y sino a la derecha
InterfazSignificado
.add(inputs)Añade uno o más inputs
.refresh(inputs)Pinta los inputs con el color indicado en su valor

Ejemplo de uso:

piColorInput({ ratio:-0.25, dark:true, circle:true, scale:1.0 });

Versión 1: usa un GIF mapeado

Seleccionar un color en una página web mediante un mapa de imagen. Este componente está programado en PHP, CSS y Javascript. Necesita una plantilla PHP o copiar y pegar código HTML

colormap

Comentaris

Proinf.net, ©2003-2019 ci 3.1.10 (CC) Aquesta obra està sota una llicència de Creative Commons Aquest programari està subjecte a la CC-GNU GPL