{"id":24324135,"url":"https://github.com/node-3d/qml-colorhelpers-raub","last_synced_at":"2026-02-08T19:03:58.483Z","repository":{"id":272515877,"uuid":"912394987","full_name":"node-3d/qml-colorhelpers-raub","owner":"node-3d","description":"Simple QML Color pickers","archived":false,"fork":false,"pushed_at":"2025-01-15T09:59:16.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T15:55:31.289Z","etag":null,"topics":["color-picker","qml","qt","qtquick"],"latest_commit_sha":null,"homepage":"https://github.com/node-3d/node-3d","language":"QML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/node-3d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-05T13:09:33.000Z","updated_at":"2025-01-15T09:59:17.000Z","dependencies_parsed_at":"2025-03-11T03:42:08.729Z","dependency_job_id":"f18b3ebf-10b6-4422-a763-a84350b5d387","html_url":"https://github.com/node-3d/qml-colorhelpers-raub","commit_stats":null,"previous_names":["node-3d/qml-colorhelpers-raub"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers-raub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers-raub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers-raub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-3d%2Fqml-colorhelpers-raub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-3d","download_url":"https://codeload.github.com/node-3d/qml-colorhelpers-raub/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519471,"owners_count":21117757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-picker","qml","qt","qtquick"],"created_at":"2025-01-17T19:32:47.947Z","updated_at":"2026-02-08T19:03:53.452Z","avatar_url":"https://github.com/node-3d.png","language":"QML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Helpers for QML\n\nThis is a part of [Node3D](https://github.com/node-3d) project.\n\n[![NPM](https://badge.fury.io/js/qml-colorhelpers-raub.svg)](https://badge.fury.io/js/qml-colorhelpers-raub)\n\n```console\nnpm i -s qml-colorhelpers-raub\n```\n\n![Example](examples/screenshot.png)\n\nSimple HSV-oriented color pickers and colored rectangles for QML. The data flow is similar\nto React: app.color -\u003e picker.color -\u003e picker.signal -\u003e app.update -\u003e app.color. That is,\nunless the app accepts the color change, the picker.color will remain the same, and\nwill not override the input.\n\n\n### PickerHsv\n\nCombines `PickerSatVal` and `PickerHue`. The pickers will occupy the whole\nitem area. Use `widthHue` and `widthGap` to control how the area is distributed.\n\n```js\nPickerHsv {\n\t// set explicit size or anchors! or it will be 0x0\n\twidth: 195\n\theight: 150\n\t\n\twidthHue: 30 // the default\n\twidthGap: 15 // the default\n\tcolor: app.color // \u003c-- must be from outside\n\tonValueChanged: value =\u003e {\n\t\tconsole.log(\"PickerHsv onValueChanged\", value);\n\t\tapp.color = value;\n\t}\n}\n```\n\n\n### PickerHue\n\nA vertical box to select color hue. The picker fills the whole item area.\n\n```js\nPickerHue {\n\t// set explicit size or anchors! or it will be 0x0\n\twidth: 30\n\theight: 150\n\t\n\tcrossSize: 12 // the default\n\tcrossShape: \"boxFlat\" // the default, \n\thue: app.hue // \u003c-- must be from outside\n\tonValueChanged: value =\u003e {\n\t\tconsole.log(\"PickerHue onValueChanged\", value);\n\t\tapp.hue = value;\n\t}\n}\n```\n\n\n### PickerHue\n\nA gradient box to select color saturation and value.\nThe picker fills the whole item area.\n\n```js\nPickerSatVal {\n\t// set explicit size or anchors! or it will be 0x0\n\twidth: 150\n\theight: 150\n\t\n\tcrossSize: 12 // the default\n\tcrossShape: \"circle\" // the default\n\tcolor: app.color // \u003c-- must be from outside\n\tonValueChanged: (sat, val) =\u003e {\n\t\tconsole.log(\"PickerSatVal onValueChanged\", sat, val);\n\t\tapp.color = Qt.hsva(color.hsvHue, sat, val, 1);\n\t}\n}\n```\n\n\n### ColorRect\n\nConvenient gradient Rectangle where you only need to provide the list of colors.\nThe colors will spread uniformly across the area.\n\n```js\nColorRect {\n\tcolors: [\"white\", \"black\"] // the default\n\torientation: Gradient.Vertical // the default\n}\n```\n\n\n### ColorRectHue\n\nSame as `ColorRect`, but prebuilt with hue color list.\n\n\n### ColorRectSatVal\n\nRuns 2 overlayed `ColorRect` items to emulate saturation-value\ncolor variations. Provide a hue value to set the base color.\n\n```js\nColorRectSatVal {\n\thue: 1 // the default\n}\n```\n\n\n### Crosshair\n\nVisual handle to show the current value on color pickers. It receives\nthe position coordinates `u, v` in percent, and positions to fit its center over that spot.\n\n```js\nCrosshair {\n\tshape: \"box\" // \"box\" \"boxFlat\" \"circle\" \"circleFlat\"\n\tu: 0 // 0.0 - 1.0 horizontal location\n\tv: 0 // 0.0 - 1.0 vertical location\n\tsize: 12 // the default\n\tcolor: \"white\" // the default\n}\n```\n\n\n### CrosshairRect\n\nA small helper to draw \"outlined\" rectangles for crosshairs.\n\n```js\nCrosshairRect {\n\tbaseW: 12 // the default\n\tbaseH: 12 // the default\n\tvalue: \"white\" // not \"color\" because this is in fact a Rectangle\n\tisRound: false // shape - rounded or not\n}\n```\n\n### MouseRect\n\nA `u, v` oriented mouse area. Meaning it will report coordinates in percents,\nranging from `0.0` to `1.0`. Good for sliders and 2D sliders (as in color pickers).\nHas optional margins, because slider knobs usually can go past the selection area, and\nshould still seem interactive.\n\n```js\nMouseArea {\n\tuMargin: 0 // the default\n\tvMargin: 0 // the default\n\tonUvChanged: (u, v) =\u003e {\n\t\tconsole.log(\"MouseArea onUvChanged\", sat, val);\n\t}\n```\n\n\n## Importing\n\nThe `./ColorHelpers` directory should be visible to QML engine for importing.\n\n```qml\nimport ColorHelpers\n```\n\n### C++ import path\n\n```cpp\nqmlEngine-\u003eaddImportPath(\"path to qml-colorhelpers-raub\");\n```\n\n### Node.js qml-raub\n\n```js\nView.libs(require('qml-colorhelpers-raub').absPath);\n```\n\n### Manual\n\nCopy this repo or even specifically the `./ColorHelpers` folder to wherever your QML is\nready to grab it. Or use this repo as a submodule if you wish.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-3d%2Fqml-colorhelpers-raub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-3d%2Fqml-colorhelpers-raub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-3d%2Fqml-colorhelpers-raub/lists"}