Color picker UIHTML field?

addamroy · August 21, 2014

How do I put a color picker input field into the UI HTML panel? ie, user clicks the box, they pick a color from a wheel or panel or whatever and the value would be the hex or rgb code.

It's a real pain to have to go to some other site, use their color picker, then come back and paste the results into the bot.

Isn't a color picker common practice these days anyway? Input type="color" has been adopted and functional in most browsers, but it doesn't render in ubot's uihtml panel.

If there is a solution to this I would be extremely grateful.

UBotDev · August 21, 2014

HTML5 color input type won't work in awesomium, so you'll have to use a javascript. By searching Google I found this one: http://jscolor.com/

And integration is quite simple:

ui html panel("<script type=\"text/javascript\" src=\"http://jscolor.com/jscolor/jscolor.js\"></script>
<input class=\"color\" variable=\"#COLOR Fav\">", 200)
alert(#COLOR Fav)

Just store the .js file locally (you'll have to use $read file command for that) or host it on your server....

Code Docta (Nick C.) · August 21, 2014

File management plugin has a color picker in it. You can stick in a button or call whenever you want.

it's under "Dialog Functions" or put it into search it will come up.

ui button("Choose Color") {
set(#CP, $plugin function("File Management.dll", "$color picker dialog"), "Global")
}

HTHelps

TC

addamroy · August 21, 2014

what is file management plugin?

addamroy · August 21, 2014

And what about rgb??

addamroy · August 21, 2014

I did find the file management plug-in, I have no idea how to get that dialogue into a uihtml panel text input field though. And lack of RGB is still killing me right now because I'm using transparency, have to be able to get RGB code

darryl561 · August 22, 2014

I did find the file management plug-in, I have no idea how to get that dialogue into a uihtml panel text input field though. And lack of RGB is still killing me right now because I'm using transparency, have to be able to get RGB code

Does it have to be in the ui html panel or would in the browser be ok?

addamroy · August 22, 2014

Has to be UI HTML panel

Also I did use that jscolor file, but for some reason it makes the input fields 'flicker'

addamroy · August 22, 2014

I would even be happy if I could get a color picker that just pops up, and doesn't even fill a field. At least if the user could easily copy/paste the hex code from the pop-up color picker or whatever that would be fine with me.

Code Docta (Nick C.) · August 22, 2014

this is a pop up

set(#CP, $plugin function("File Management.dll", "$color picker dialog"), "Global")

did you not even try?

darryl561 · August 22, 2014

I would even be happy if I could get a color picker that just pops up, and doesn't even fill a field. At least if the user could easily copy/paste the hex code from the pop-up color picker or whatever that would be fine with me.

If you only want the hex code to copy and paste then try this

ui html panel("<HTML>
<button onclick=\"ubot.runScript(\'hex()\')\">Color Picker</button>
<input variable=\"#col\" fillwith=\"value\">
</HTML>
", "")
define hex {
    set(#color, $plugin function("File Management.dll", "$color picker dialog"), "Global")
    set(#col, $replace(#color, "#", $nothing), "Global")
}

I found some code that will convert hex to rpg that might help also.

ui html panel("<HTML>
<HEAD>
<script type=\"text/javascript\" language=\"JavaScript\">
<!--
//R = hexToR(\"#FFFFFF\");
//G = hexToG(\"#FFFFFF\");
//B = hexToB(\"#FFFFFF\");

function hexToR(h) \{ return parseInt((cutHex(h)).substring(0,2),16) \}
function hexToG(h) \{ return parseInt((cutHex(h)).substring(2,4),16) \}
function hexToB(h) \{ return parseInt((cutHex(h)).substring(4,6),16) \}
function cutHex(h) \{ return (h.charAt(0)==\"#\") ? h.substring(1,7) : h\}

function setBgColorById(id,sColor) \{
 var elem;
 if (document.getElementById) \{
  if (elem=document.getElementById(id)) \{
   if (elem.style) elem.style.backgroundColor=sColor;
  \}
 \}
\}
//-->
</script>
</HEAD>
<body>
<form name=rgb>
<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td valign=middle title=\"Color sample for this hex code\"><button onclick=\"ubot.runScript(\'hex()\')\">Color Picker</button></td>
<td valign=top><nobr>
<input type=text name=hex size=7 maxlength=7 value=\"FFFFFF\" variable=\"#col\" fillwith=\"value\">
<input type=button name=btn value=\"Convert to RGB\"
onclick=\"setBgColorById(\'colorSample\',this.form.hex.value);
this.form.r.value=hexToR(this.form.hex.value);
this.form.g.value=hexToG(this.form.hex.value);
this.form.b.value=hexToB(this.form.hex.value);
\">
R:<input type=text name=r size=3 style=\"width:33px;\">
G:<input type=text name=g size=3 style=\"width:33px;\">
B:<input type=text name=b size=3 style=\"width:33px;\">
</nobr>
<nobr><span id=\"colorSample\" style=\"border: 1px solid gray;\"><big><big><code style=\"cursor:default;\">   </code></big></big></span> </nobr>
</td>
</tr></table>
</form>
</tr></table>
</BODY>
</HTML>
", "")
define hex {
    set(#color, $plugin function("File Management.dll", "$color picker dialog"), "Global")
    set(#col, $replace(#color, "#", $nothing), "Global")
}

addamroy · August 22, 2014

That works in a distributed compiled bot? I notice the including dll file in the function.... does that file have to be distributed to the end user with the bot? Sorry I'm completely new to the plugin system.

addamroy · August 22, 2014

I copied and pasted that hex code section, however it doesn't show me any hex code at all, only the boxes to select colors.

addamroy · August 22, 2014

So this seems like it might do the trick, but if I have like 100 input fields for different colors, do I have to create a define for each one of them?

@traffikcop I had overlooked it because it didn't mention RGB, and I wanted something that could do both, but looks like you can copy/paste the RGB values from the picker, so that's good enough for me.

addamroy · August 23, 2014

How do I get the file management color picker dialogue into UIHTML buttons, rather than the standard UI buttons?

@Traffikcop, yes I tried that, but I have many input fields that need a color choice, so using defines and set commands for each individual field I have is just not efficient at all.

addamroy · August 23, 2014

Well I suppose I'm just going to create a define command for each individual input field and populate them each with a button somewhere. Good enough to keep moving forward, I'll figure a more efficient way later down the road.

Code Docta (Nick C.) · August 24, 2014

Here are a couple examples

copy and paste it into Code view then change back to node view or download attatched file

click run

minimize all windows because the color picker will show up behind UBS when UBS is running (UBS=ubot studio)

so now the bot will go thru the loop 3 times and take your choices

then will do the same thing for example 2

soooo

when you need user input at any time just place a set at that point and it will pop up and ask the user for input

you can place an alert right before a set and it will inform the user what color they are picking....see example 3

comment("example 1")
clear list(%user inpuy colors)
loop(3) {
    add item to list(%user inpuy colors, $plugin function("File Management.dll", "$color picker dialog"), "Delete", "Global")
}
alert(%user inpuy colors)
divider
set(#background, $list item(%user inpuy colors, 0), "Global")
set(#botder, $list item(%user inpuy colors, 1), "Global")
set(#body, $list item(%user inpuy colors, 2), "Global")
divider
comment("example 2")
set(#background2, $plugin function("File Management.dll", "$color picker dialog"), "Global")
set(#border2, $plugin function("File Management.dll", "$color picker dialog"), "Global")
set(#body2, $plugin function("File Management.dll", "$color picker dialog"), "Global")
divider
comment("example 3")
alert("Please choose background color...")
set(#DB_color3, $plugin function("File Management.dll", "$color picker dialog"), "Global")
divider
comment("example 4

wiill show under custom functions
<<<----- Parameters>>custom functions")
set(#eye_color, $color picker active window("PLease choose eye color."), "Global")
set(#shoe_color, $color picker active window("Please choose Shoe Color"), "Global")
alert("Your eye color is {#eye_color}!
Your shoe color is {#shoe_color}!")
define $color picker active window(#Alert Messahe) {
    alert(#Alert Messahe)
    thread {
        plugin command("WindowsCommands.dll", "set active window", "", "WindowsForms10.Window.0.app.0.f851a9_r11_ad1")
        wait(1)
    }
    return($plugin function("File Management.dll", "$color picker dialog"))
}

there are many ways to do this but this a few

color picker should pop up on top of everything this seems to be a bug (with color picker)

you can use window command to make it on top

see last example I made function to make it easier for you

TC

example-color picker.ubot

addamroy · August 24, 2014

Thanks man I appreciate the help! My problem though (as I just posted in the other thread, lol) is that I wanted to specifically attach the color picker dialogue to text input fields in the ui html panel.

UBotDev · August 24, 2014

If you want it to show up in UI HTML than you'll have to use JavaScript+HTML (as mentioned above for example). I think the plugin only provides a popup.

addamroy · August 24, 2014

If you want it to show up in UI HTML than you'll have to use JavaScript+HTML (as mentioned above for example). I think the plugin only provides a popup.

That's how I'm doing it. I have onclick javascript executing the define functions which run the color picker.

cob007 · July 26, 2016

I know this a old post but can somebody tell me what will be the javascript or jquery code to get the colour picker to choose colour in UI?

HelloInsomnia · July 26, 2016

I know this a old post but can somebody tell me what will be the javascript or jquery code to get the colour picker to choose colour in UI?

Ubot Dev mentioned a way earlier in the thread but they removed that JS file, you can still download it and host it yourself though: http://jscolor.com/

Then use the rest of his code but with a link to your own file.

shekhar007 · September 8

for those struggling with this, use the CDN of jscolor;no need to host it yourself, the below code works

<button onclick="addHtml()">Click to generate HTML input</button>

Color picker UIHTML field?

Recommended Posts

addamroy 36

Link to post

Share on other sites

UBotDev 276

Link to post

Share on other sites

Code Docta (Nick C.) 638

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

darryl561 177

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

Code Docta (Nick C.) 638

Link to post

Share on other sites

darryl561 177

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

Code Docta (Nick C.) 638

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

UBotDev 276

Link to post

Share on other sites

addamroy 36

Link to post

Share on other sites

cob007 19

Link to post

Share on other sites

HelloInsomnia 1103

Link to post

Share on other sites

shekhar007 0

Link to post

Share on other sites

Join the conversation