Jump to content
UBot Underground

Color picker UIHTML field?


Recommended Posts

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.

Link to post
Share on other sites

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....

Link to post
Share on other sites

    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

Link to post
Share on other sites

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

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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")
}

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 1 year later...

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...