Componente de perilla/dial de JavaScript basado en lienzo-Pure-Knob

Vista prévia

Descripción

Un componente de perilla de JavaScript puro para renderizar mandos/diales/medidores altamente personalizables basados en lienzo en la aplicación Web.

Características

• Admite eventos táctiles y de arrastre del mouse.
• Haga doble clic para cambiar el valor manualmente.
• Fácil de personalizar la apariencia de la perilla/dial.

¿Cómo funciona?

Importa el archivo JavaScript principal pureknob. js en el documento HTML.

<script src="pureknob.js"></script>

Cree una nueva instancia de perilla (300x300px).

var myKnob = pureknob.createKnob(300, 300);

Establecer propiedades. Todas las propiedades posibles:

• angleStart: ángulo de inicio
• angleEnd: ángulo final
• angleOffset: offset
• colorBG: color de la pista de la perilla.
• colorFG: color de la perilla de calibre/indicador.
• aguja : decidir si utilizar un marcador/aguja simple en lugar de un medidor de llenado para indicar el valor a lo largo de la pista de la perilla.
• ReadOnly: es ReadOnly?
• trackWidth: ancho de pista
• textScale: aumentar/disminuir el tamaño de la fuente. (1,0 es el tamaño de fuente predeterminado.)
• valMin: valor de min
• valMax: valor máximo
• Val: valor predeterminado

myKnob.setProperty(propertyName, value);

Establezca el valor inicial que prefiera.

myKnob.setValue(70);

Establezca el valor de pico

myKnob.setPeaks([80]);

Anexe el mando a un elemento.

<div id="demo"></div>

var node = knob.node();
var elem = document.getElementById('demo');
elem.appendChild(node);

Agregue un detector de eventos al mando.

var listener = function(knob, value) {

console.log(value);
};

knob.addListener(listener);

Registro de cambios

01/14/2019

• Agregue funcionalidad para el formato y el escalado personalizados.

11/20/2018

• Añadir soporte para la entrada de valores numéricos en Android.

09/26/2018

• Agregue compatibilidad para el control de gráfico de barras.