Nondeterministic Palindrome Machine

    @adrianjost/two-channel-picker

    0.3.6 • Public • Published

    @adrianjost/two-channel-picker

    A simple two channel Color Picker

    About

    I needed an intuitive color picker to control my warm-white-cold-white (WWCW) LED Strips with the SmartLight Project.

    two channel picker screenshot

    The picker value is therefore indepent from the displayed color. The given value is a number between 0 and 1 for each of the two channels. The brightness can be determined by dragging the slider along the Y-axis. Dragging along the X-axis changes the relationship between the two channels.

    two channel picker values

    Usage

    As a native Web Component

    <script src="https://cdn.jsdelivr.net/npm/@adrianjost/two-channel-picker@0.3.1/dist/wc/two-channel-picker.min.js"></script>
    
    <div style="width: 300px; height: 300px;">
    	<two-channel-picker
    		value="[0,1]"
    		id="picker"
    		options='{"colorLeft": "#f00", "colorRight": "#00f" }'
    	></two-channel-picker>
    </div>
    
    <script>
    	document.getElementById("picker").addEventListener("input", (event) => {
    		console.log(event.detail[0]);
    	});
    </script>

    please note, that you may need to adjust the version number in the url.

    with VueJS

    Install the package:

    npm i @adrianjost/two-channel-picker

    or

    yarn add @adrianjost/two-channel-picker

    In your App:

    <template>
    	<TwoChannelPicker
    		v-model="channels"
    		:options="{
    			colorLeft: '#fd9',
    			colorRight: '#9df',
    			marker: {
    				radius: 16,
    				borderWidth: 2,
    			},
    		}"
    	/>
    </template>
    
    <script>
    import TwoChannelPicker from "@adrianjost/two-channel-picker";
    
    export default {
    	components: {
    		TwoChannelPicker,
    	},
    	data() {
    		return {
    			channels: [0, 1],
    		};
    	},
    };
    </script>

    Helper

    The package also includes some helper methods. You can access them by importing the according js files. Please use the JSDoc comments to learn how to use them.

    import {
    	getChannelsForHueAndBrightness,
    	getHueAndBrightnessForChannels,
    	getCenterColor,
    	getColorForHueAndBrightness,
    	getColorForChannels,
    } from "@adrianjost/two-channel-picker/dist/helpers/channelColor.js";
    import {
    	hex2rgb,
    	rgb2hex,
    } from "@adrianjost/two-channel-picker/dist/helpers/colorConversion.js";

    API

    Props

    You can customize the picker with the following props/attributes.

    When using the lib as a web component you must provide all attributes JSON.stringify()-ed.

    attribute type default value description
    value / v-model Array, String [1,0] the current channel values, if provided as a String, this must be JSON.parse()-able
    options Object {} all your config goes in here

    Options

    Available Attributes in the options prop:

    attribute type default value description
    readOnly Boolean false should the user be able to move the marker?
    colorLeft String #fd9 the color in the top left corner. Must be in the HEX Format with 3 or 6 digits.
    colorRight String #fd9 the color in the top right corner. Must be in the HEX Format with 3 or 6 digits.
    marker.borderWidth Number 2 The border width of the active marker in px.
    marker.radius Number 16 The border radius including the borderWidth in px.

    You need more options? Please open an issue and I will do my best to implement it. Pull Requests are also welcome!

    Keywords

    none

    Install

    npm i @adrianjost/two-channel-picker

    DownloadsWeekly Downloads

    155

    Version

    0.3.6

    License

    MIT

    Unpacked Size

    3.53 MB

    Total Files

    23

    Last publish

    Collaborators

    • adrianjost