CastorGUI ColorPicker and Slider

[dbawel]

Hello,

I suppose this question goes out to Dad72, but if anyone has the answer, please chime in on this post. I'm using a color picker object (button and function) in the CastorGUI extension. Currently, it appropriately displays the color which is set in the color picker dialog box. However, I need to also change the color of this button to represent other color input controls when needed. Below is the following code example:

var create_color_GUI = function() {
    // GUI manager    
    var callback = function() {
        var pick_color = colorSelector.getColor();
    };

 colorSelector = new CASTORGUI.GUIColor("pick_color", { x: 1085, y: 510, w: 40, h: 40 }, guisystem, callback);

};

Is there any way to set the rgba value for the button to be different from the color picked using the color picker dialog box? I tried setting this, but I couldn't get this to change color so I assume it isn't supported. If not, how might I set up a seperate CasorGUI button to call the color picker? I haven't spent much time on this yet, but haven't had any success in the time I spent working on it this evening.

Also, if someone can provide a code example of a CastorGUI slider control with most of the properties and options shown, as well as the "get value" usage, this would save me considerable time experimenting with what I need for my GUI sliders - which I primarily need for video playback controls.

Thanks!

DB

 

EDIT: Just to be clear on calling the color picker with a seperate GUI button, I need to call the color picker dialog box without displaying and/or having to click on the color picker GUI button. So either this - or the ability to set and change the color of the color picker button seperate from the last color pick is what is required.

Also, I do have a good example from a post by ConnorsFan, but I am missing how to extract the value of the slider, and how to take advantage of all of the options available for the slider control, such as color, style, and added image file representing the slider control elements - Thanks. 

[Dad72]

Hi Dbawel,

I'm not sure what you want to do.

For the slider with all options:

var slider = null, slideValue = 0;
var callback = function() { slideValue = slider.getValue(); };
slider = new CASTORGUI.GUISlider("slider", {x: 10, y, 10, w: 200, h: 15, min: 0, max: 100, step: 1, value: "0", zIndex: 1, orient: "horizontal"}, guimanager, callback);
console.log("Your value slider: "+ slideValue);

You also need the latest version of CastorGUI which adds to getValue GUISlider. New version in the attached file:

castorGUI.min.js

[dbawel]

Hi Dad72,

Thanks for the example. This answers my qustions for the slider control, as I was hoping to be able to change other properties of the slider such as the color of the slider control, or to be able to change the style (such as in the slider element itself) - simlpy for aesthetics to match other elements and color palettes in the interface. So it appears I was able to find all properties and options currently available already. I was also using this.value, but my server connection speed was running incredibly slow last night, which is most likely why I had problems reading the value change of the slider. Otherwise, your example is almost exactly what I already have in place now. However, in using this.value where "this" is the name of the slider control variable, and it has been returning the slider control value correctly (until I had issues last night.) What is the advantage to using the slider.getValue() function over this.value?

 

As for the color picker, this is where I'm having the trouble. As the color picker dialog box is different in each OS and often on different devices, and for ease of use of my application - my interface contains 16 primarly colors to select for quick use in the app. And most of the time, the users will be simply selecting from the 16 color pallete. But the users still want a color picker, so that's why I am using your GUI extension to call the color picker. However, as the color picker button is designed to display the color from the color picker, the interface is now a bit confusing to the user - as I have an outlined area displaying the current color which is currently used to draw with. So I either need to change the color of the picker button to the current color from either the 16 color pallete selection or the color picker - depending on which the user decides to select as their current color to draw with. Either this, or to create a button which is labelled "color picker", and when clicked will open the color picker dialog box - but the color picker button should not change color. I can then display in the GUI what I had before the color picker was introduced, which was what you see in the screenshot below, but the bottom red square simply displayed the current color the user had selected to use as their drawing color. So the user will be using EITHER the color picker or the 16 color quick pallette.

I hope this makes sense.

 

As always thank you for responsding so quickly, and providing help with your extensions and tools.

DB

[Dad72]

HI,

I try to understand. You only want to change the color selector button.

You can in this case hide it with CSS (display: none) the color picker and put a GUIbutton with the onclick event to a click on the color picker which is hidden, but still there with (jQuery) => $( '#mySelectorColor') trigger( 'click');

Sorry if I do not understand very well.

 

[dbawel]

Hi Dad72,

Sorry I didn't reply sooner - I had to work on another project for the past week. As usual, you are thinking out of the box, as I didn't even consider hiding the color picker with another GUI button. This is a great solution.

Thanks,

DB