Note that there are some explanatory texts on larger screens.

plurals
  1. POConnect color picker (jquery UI slider) to Sketch.js
    primarykey
    data
    text
    <p>I worked on getting a color picker together, which I plan on using to control the color selection for sketching with <a href="https://github.com/intridea/sketch.js" rel="nofollow">Sketch.js</a>. According to Sketch.js documentation, the 'marker' tool will obtain it's color information from any tag that includes a 'data-color' field, and points to the canvas id, like:</p> <pre><code>&lt;a href="#myCanvas" data-color=""&gt;&lt;/a&gt; </code></pre> <p>My color slider, found <a href="http://jsfiddle.net/t2PDc/3/" rel="nofollow">here</a>, is now sending the hsl/rgb data to the box seen under the slider in the fiddle example. I'd like to remove the box completely, and just send the value of the slider to the value of the marker tool. I've seen while inspecting elements on my test page that jquery-ui.js controls the creation of the element that contains the slider, on line 12691 of jquery-ui.js is the following function:</p> <pre><code> _createHandles: function() { var i, handleCount, options = this.options, existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ), handle = "&lt;a id='slider-handle' class='ui-slider-handle ui-state-default ui-corner-all' href='#'&gt;&lt;/a&gt;", handles = []; </code></pre> <p>So I tried adding my canvas id and the data-color field to this so that:</p> <pre><code>handle = "&lt;a href='#myCanvas' data-color='' id='slider-handle' class='ui-slider-handle ui-state-default ui-corner-all'&gt;&lt;/a&gt;" </code></pre> <p>I then watched the output with my very own eyes in the console, the slider takes on the value, but for some reason when drawing, the marker tool does not change colors. It only changes colors with the box when the box is clicked. I know I'm missing something easy here, any help appreciated in getting rid of the box.</p> <p>EDIT: Perhaps Sketch.js will only accept hex values as input, going to try to convert the hsl/rgb to hex and see if that works. EDIT 2: This is not the case, I attempted to change the values for a clickbox in real-time in the console to an hsl value and Sketch.js drew that color.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload