@environment-safe/hue-eye

A vanilla JS canvas based ESM color picker which uses pixel lookup to do color selection (as opposed to coordinate prediction) allowing many different visualizations to share strategies, work at any resolution and have exact fidelity to the displayed color.

Usage

First install hue-eye

npm install hue-eye

you then need to pull in the dependencies (if you aren't building) in your HTML.

    <script type="importmap"> { "imports": {
        "hue-eye": "../node_modules/@environment-safe/hue-eye/src/index.mjs",
        "@environment-safe/elements": "../node_modules/@environment-safe/elements/src/index.mjs",
        "extended-emitter": "../node_modules/extended-emitter/extended-emitter.mjs",
        "node:events": "../node_modules/extended-emitter/node-events.mjs",
        "sift": "/node_modules/sift/es5m/index.js",
        "browser-or-node": "../node_modules/browser-or-node/src/index.js"
    } } </script>

include hue-eye in a script with

import 'hue-eye';

last, use it in your html

    <color-wheel height="300" width="300" hex="#00FF77"></color-wheel>
    <color-disc height="300" width="300" hex="#00FF77"></color-disc>

Testing

Run the es module tests to test the root modules

npm run import-test

to run the same test inside the browser:

npm run browser-test

to run the same test headless in chrome:

npm run headless-browser-test

to run the same test inside docker:

npm run container-test

Run the commonjs tests against the /dist commonjs source (generated with the build-commonjs target).

npm run require-test

Development

All work is done in the .mjs files and will be transpiled on commit to commonjs and tested.

If the above tests pass, then attempt a commit which will generate .d.ts files alongside the src files and commonjs classes in dist