Color Helpers for QML

This is a part of Node3D project.

npm i -s qml-colorhelpers-raub

Simple HSV-oriented color pickers and colored rectangles for QML. The data flow is similar to React: app.color -> picker.color -> picker.signal -> app.update -> app.color. That is, unless the app accepts the color change, the picker.color will remain the same, and will not override the input.

PickerHsv

Combines PickerSatVal and PickerHue. The pickers will occupy the whole item area. Use widthHue and widthGap to control how the area is distributed.

PickerHsv {
	// set explicit size or anchors! or it will be 0x0
	width: 195
	height: 150
	
	widthHue: 30 // the default
	widthGap: 15 // the default
	color: app.color // <-- must be from outside
	onValueChanged: value => {
		console.log("PickerHsv onValueChanged", value);
		app.color = value;
	}
}

PickerHue

A vertical box to select color hue. The picker fills the whole item area.

PickerHue {
	// set explicit size or anchors! or it will be 0x0
	width: 30
	height: 150
	
	crossSize: 12 // the default
	crossShape: "boxFlat" // the default, 
	hue: app.hue // <-- must be from outside
	onValueChanged: value => {
		console.log("PickerHue onValueChanged", value);
		app.hue = value;
	}
}

PickerHue

A gradient box to select color saturation and value. The picker fills the whole item area.

PickerSatVal {
	// set explicit size or anchors! or it will be 0x0
	width: 150
	height: 150
	
	crossSize: 12 // the default
	crossShape: "circle" // the default
	color: app.color // <-- must be from outside
	onValueChanged: (sat, val) => {
		console.log("PickerSatVal onValueChanged", sat, val);
		app.color = Qt.hsva(color.hsvHue, sat, val, 1);
	}
}

ColorRect

Convenient gradient Rectangle where you only need to provide the list of colors. The colors will spread uniformly across the area.

ColorRect {
	colors: ["white", "black"] // the default
	orientation: Gradient.Vertical // the default
}

ColorRectHue

Same as ColorRect, but prebuilt with hue color list.

ColorRectSatVal

Runs 2 overlayed ColorRect items to emulate saturation-value color variations. Provide a hue value to set the base color.

ColorRectSatVal {
	hue: 1 // the default
}

Crosshair

Visual handle to show the current value on color pickers. It receives the position coordinates u, v in percent, and positions to fit its center over that spot.

Crosshair {
	shape: "box" // "box" "boxFlat" "circle" "circleFlat"
	u: 0 // 0.0 - 1.0 horizontal location
	v: 0 // 0.0 - 1.0 vertical location
	size: 12 // the default
	color: "white" // the default
}

CrosshairRect

A small helper to draw "outlined" rectangles for crosshairs.

CrosshairRect {
	baseW: 12 // the default
	baseH: 12 // the default
	value: "white" // not "color" because this is in fact a Rectangle
	isRound: false // shape - rounded or not
}

MouseRect

A u, v oriented mouse area. Meaning it will report coordinates in percents, ranging from 0.0 to 1.0. Good for sliders and 2D sliders (as in color pickers). Has optional margins, because slider knobs usually can go past the selection area, and should still seem interactive.

MouseArea {
	uMargin: 0 // the default
	vMargin: 0 // the default
	onUvChanged: (u, v) => {
		console.log("MouseArea onUvChanged", sat, val);
	}

Importing

The ./ColorHelpers directory should be visible to QML engine for importing.

import ColorHelpers

C++ import path

qmlEngine->addImportPath("path to qml-colorhelpers-raub");

Node.js qml-raub

View.libs(require('qml-colorhelpers-raub').absPath);

Manual

Copy this repo or even specifically the ./ColorHelpers folder to wherever your QML is ready to grab it. Or use this repo as a submodule if you wish.