Macster (UBotter Labs) 112 Posted December 3, 2013 Report Share Posted December 3, 2013 Carl could you please make the tool load and use external styles and not just the twitter bootstrap ?! Would complete your tool and make it the number one UI designer for uBot Thanks! Quote Link to post Share on other sites
Sirfrank 17 Posted December 4, 2013 Report Share Posted December 4, 2013 (edited) Could you show me some sample code of how to populate dropdown with list from file pls? Used to do that with simple UI, but on this cant make it, i am not so good at CSS, and HTML. And yes, i am ready to use the donate button Edited December 4, 2013 by Sirfrank Quote Link to post Share on other sites
Anonym 53 Posted December 4, 2013 Report Share Posted December 4, 2013 Great product! One thing that would be really nice is a date selector with a configurable date format. That would be awesome to have. As you may know the date formats vary between the US and other countries. Even within Europe it varies. How about that? Would this be possible to include into your fine product? Quote Link to post Share on other sites
LazyBotter 188 Posted December 4, 2013 Author Report Share Posted December 4, 2013 Could you show me some sample code of how to populate dropdown with list from file pls? Used to do that with simple UI, but on this cant make it, i am not so good at CSS, and HTML. And yes, i am ready to use the donate button This is how you populate a drop down from a .txt document filled with a list. I created a "Dynamic Dropdown" with two #Variables, one called "#Options_Variable" and one called "#Selection_Variable". ui html panel("<!DOCTYPE html> <head> <link href=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css\" rel=\"stylesheet\"> <style id=\"Styles\"> label \{ margin: 1px; padding: 0px; float:right;\} html \{ margin: 0px; padding: 0px; \} body \{margin: 0px; padding: 0px;\} p.left \{ text-align: left; margin: 0px;\} .image \{margin: 5px;\} .headertext \{margin: 5px; margin-left: 5px; margin-right: 5px; \} .draggable \{ width: auto; height: auto; position: absolute;\} input[type=text] \{margin: 5px;\} input[type=button] \{margin: 5px;\} input[type=checkbox] \{margin: 5px; float:left; \} input[type=file] \{margin: 0px;\} span \{margin: 5px;\} textarea \{margin: 5px;\} select \{margin: 5px;\} .tablink \{float:left; margin: 5px;\} .ui-tabs \{height:40px; vertical-align: central; margin: 2px;\} .mainheader \{margin: 5px;vertical-align: central; padding: 0px; \} #TabBox \{background-color:#fff;padding: 0px;\} .check \{ clear: both; float: left; display: block; \} .ui-tooltip \{z-index:10;font-size:0.875em;margin-left:5px; color:#fff;background-color: #000000;font-family: \'Droid Sans\', sans-serif; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; position: absolute;padding: 5px; border:2px solid blue;\} .tab_box \{width:800px; height:400px; position: relative; \} </style> </head> <body style=\"cursor: auto; \"> <div style=\"width:100%;height:auto;\"> <center> <div class=\"maincontainer\" style=\"display: block; \"> <div id=\"Builder\" style=\"display: block; opacity: 1; \"> <div id=\"Main\"> <div class=\"mainheader changeheader\" style=\"width: 800px; \"> </div> <div id=\"tabs\" class=\"ui-tabs ui-widget ui-widget-content ui-corner-all\" style=\"width: 800px; display: none; \"> <div id=\"tablinks\"> </div> </div> <div id=\"TabBox\" style=\"width: 800px; \"> <div class=\"Elements-0 tab_box\" id=\"containment-wrapper-0\" style=\"display: block; \"> <div id=\"draggable_2\" class=\"draggable ui-widget-content ui-draggable\"> <select class=\"dynamic\" variable=\"#Selection_Variable\" list=\"#Options_Variable\" list-fillwith=\"options\" style=\"width:auto;width:300px;\"> </select> </div> </div> </div> </div> </div> </div> </center> </div> <!--SCRIPTS--> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js\"> </script> <script src=\"http://code.jquery.com/ui/1.10.2/jquery-ui.js\"> </script> <script> //Get current tab ID / Switch Tabs $(\".tablink\").live(\"click\", function() \{ currentTabID = $(this).attr(\'id\'); $(\".tablink\").css(\"border-bottom\", \"2px inset #000\"); $(\".tab\" + currentTabID).css(\"border-bottom\", \"\"); $(\".tab_box\").hide(); $(\"#containment-wrapper-\" + currentTabID).show(); drag(); \}); $(function () \{ $.widget(\"ui.tooltip\", $.ui.tooltip, \{ options: \{ content: function () \{ return $(this).prop(\'title\'); \} \} \}); $(document).tooltip(); \}); </script> </body> </html>", 200) comment("Example File (Saved To Desktop)") save to file("{$special folder("Desktop")}\\Example_Options.txt", "Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10") comment("Here is how to load into dynamic dropdown") set(#Options_Variable, $replace($read file("{$special folder("Desktop")}\\Example_Options.txt"), $new line, ","), "Global") Hope that helps! Carl Quote Link to post Share on other sites
LazyBotter 188 Posted December 4, 2013 Author Report Share Posted December 4, 2013 Great product! One thing that would be really nice is a date selector with a configurable date format. That would be awesome to have. As you may know the date formats vary between the US and other countries. Even within Europe it varies. How about that? Would this be possible to include into your fine product? Hi Anonym, I have tried testing features like this and you could get a JQuery Date Picker to appear from an input field, but the problem is getting the "value" stored back a variable in UBot which makes thing pretty limited. Now you can get this to work using a Button and Status monitor. You will also need the File Management plugin (Its FREE). http://www.ubotstudio.com/forum/index.php?/topic/13237-free-file-management-plugin-multiple-commands-and-functions/ Here is some example code: ui html panel("<!DOCTYPE html> <head> <link href=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css\" rel=\"stylesheet\"> <style id=\"Styles\"> label \{ margin: 1px; padding: 0px; float:right;\} html \{ margin: 0px; padding: 0px; \} body \{margin: 0px; padding: 0px;\} p.left \{ text-align: left; margin: 0px;\} .image \{margin: 5px;\} .headertext \{margin: 5px; margin-left: 5px; margin-right: 5px; \} .draggable \{ width: auto; height: auto; position: absolute;\} input[type=text] \{margin: 5px;\} input[type=button] \{margin: 5px;\} input[type=checkbox] \{margin: 5px; float:left; \} input[type=file] \{margin: 0px;\} span \{margin: 5px;\} textarea \{margin: 5px;\} select \{margin: 5px;\} .tablink \{float:left; margin: 5px;\} .ui-tabs \{height:40px; vertical-align: central; margin: 2px;\} .mainheader \{margin: 5px;vertical-align: central; padding: 0px; \} #TabBox \{background-color:#fff;padding: 0px;\} .check \{ clear: both; float: left; display: block; \} .ui-tooltip \{z-index:10;font-size:0.875em;margin-left:5px; color:#fff;background-color: #000000;font-family: \'Droid Sans\', sans-serif; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; position: absolute;padding: 5px; border:2px solid blue;\} .tab_box \{width:800px; height:400px; position: relative; \} </style> </head> <body style=\"cursor: auto; \"> <div style=\"width:100%;height:auto;\"> <center> <div class=\"maincontainer\" style=\"display: block; \"> <div id=\"Builder\" style=\"display: block; opacity: 1; \"> <div id=\"Main\"> <div class=\"mainheader changeheader\" style=\"width: 800px; \"> </div> <div id=\"tabs\" class=\"ui-tabs ui-widget ui-widget-content ui-corner-all\" style=\"width: 800px; display: none; \"> <div id=\"tablinks\"> </div> </div> <div id=\"TabBox\" style=\"width: 800px; \"> <div class=\"Elements-0 tab_box\" id=\"containment-wrapper-0\" style=\"display: block; \"> <div id=\"draggable_1\" class=\"draggable ui-widget-content ui-draggable\" style=\"left: 0px; top: 0px; \"> <input type=\"button\" value=\"Select Date\" class=\"btn btn-primary btn-mini\" onclick=\"ubot.runScript(\'Pick_Date()\')\"> </div> <div id=\"draggable_5\" class=\"draggable ui-widget-content ui-draggable\" style=\"left: 75px; top: 6px; \"> <span class=\"statlabel\" style=\"font-weight:bold;\">:</span> <span class=\"stattext\" variable=\"#Selected_Date\" fillwith=\"innerhtml\"> </span> </div> </div> </div> </div> </div> </div> </center> </div> <!--SCRIPTS--> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js\"> </script> <script src=\"http://code.jquery.com/ui/1.10.2/jquery-ui.js\"> </script> <script> //Get current tab ID / Switch Tabs $(\".tablink\").live(\"click\", function() \{ currentTabID = $(this).attr(\'id\'); $(\".tablink\").css(\"border-bottom\", \"2px inset #000\"); $(\".tab\" + currentTabID).css(\"border-bottom\", \"\"); $(\".tab_box\").hide(); $(\"#containment-wrapper-\" + currentTabID).show(); drag(); \}); $(function () \{ $.widget(\"ui.tooltip\", $.ui.tooltip, \{ options: \{ content: function () \{ return $(this).prop(\'title\'); \} \} \}); $(document).tooltip(); \}); </script> </body> </html>", 200) define Pick_Date { set(#Selected_Date, $plugin function("File Management.dll", "$date picker dialog", "(DD/MM/YY)"), "Global") } Carl Quote Link to post Share on other sites
LazyBotter 188 Posted December 4, 2013 Author Report Share Posted December 4, 2013 Carl could you please make the tool load and use external styles and not just the twitter bootstrap ?! Would complete your tool and make it the number one UI designer for uBot Thanks! I will look at getting this added. Thanks Quote Link to post Share on other sites
Anonym 53 Posted December 4, 2013 Report Share Posted December 4, 2013 Is it possible to remove an item using the editor? (without doing it in the generated code) Quote Link to post Share on other sites
Sirfrank 17 Posted December 4, 2013 Report Share Posted December 4, 2013 Is it possible to remove an item using the editor? (without doing it in the generated code) Now clicking on an item removing it, but .... whatever you clicking, always different item is got removed. ( might be last added? dont know). Lazybotter: it is still not fixed ( just saying, not complaining, i LOVE you man, you know ). If fixing it is a problem, what could be also helpful: element properties would show the draggableID, so easier find in code for noobdonkeys like me. Quote Link to post Share on other sites
Sirfrank 17 Posted December 4, 2013 Report Share Posted December 4, 2013 On the dropdown menu population issue you have solved for me..... check your online beer-money counter Quote Link to post Share on other sites
Anonym 53 Posted December 4, 2013 Report Share Posted December 4, 2013 Thanks! Yes, doublie-clicking at item removes it. Great! Quote Link to post Share on other sites
LazyBotter 188 Posted December 4, 2013 Author Report Share Posted December 4, 2013 Hi Guys, If any of you are having problems with disappearing elements on removal can you PM me please. This problem has to be fixed within your UI code Thanks Carl Quote Link to post Share on other sites
LazyBotter 188 Posted December 5, 2013 Author Report Share Posted December 5, 2013 Hi Guys, I have just sent out an update to V4.1. The "Disappearing Elements" on removal has now been fixed. The builder will now give each "Draggable Div Container" an ID from the range 1000000/9000000 so the chances of the same element having the same ID will be extremely low. I have also added a text box that will display the "Div ID" when you select the element. This is to help find the element if you are manually editing the code in your editor. Thanks Guys! Carl 1 Quote Link to post Share on other sites
Macster (UBotter Labs) 112 Posted December 5, 2013 Report Share Posted December 5, 2013 Great updates Carl now can you please have a look at the possibility to use other themes for bootstrap ? Please? Pretty please If i'm not mistaking It should be a couple minutes update as you only have to allow the app to use other css styles like these http://bootswatch.com/ (an option to make the app load another bootstrap.css plus other .css style and .js files for the bootstrap if needed) So far i'm using the tool to design the UIs but i host my own themes though it would be great to have it already build with support for v.3 also. Thanks! Quote Link to post Share on other sites
Sirfrank 17 Posted December 5, 2013 Report Share Posted December 5, 2013 @Carl:Excellent updates! Thumbs up!Ubotstudio + Aymen + Lazybotter.... well, what can i say? Killer stuff!!! @macster:Would happily contribute to your beer money wallet as well, if you would make your themes public if we can use it with this builder. Quote Link to post Share on other sites
Macster (UBotter Labs) 112 Posted December 5, 2013 Report Share Posted December 5, 2013 @Carl:Excellent updates! Thumbs up!Ubotstudio + Aymen + Lazybotter.... well, what can i say? Killer stuff!!!don't get too carried out @macster:Would happily contribute to your beer money wallet as well, if you would make your themes public if we can use it with this builder.any bootstrap theme should work though some use different ID names and classes than the bootstrap Carl uses but easily fixable i.e http://bootswatch.com/ ps. i'll release some free themes and a tutorial once Carl updates the app to support my theory 1 Quote Link to post Share on other sites
Sirfrank 17 Posted December 12, 2013 Report Share Posted December 12, 2013 shite, i bit of roadblock...What i would need... clickable URL in the UI panel, (URL value is keep changing as the variable is changing) and when clicked, it opens in FF... Am i asking way too much? Quote Link to post Share on other sites
Edward_2 85 Posted December 12, 2013 Report Share Posted December 12, 2013 Can you hard code it into the UI Panel? Peace Quote Link to post Share on other sites
LazyBotter 188 Posted December 12, 2013 Author Report Share Posted December 12, 2013 You can use a "Status Monitor" and choose the HTML option. Then you would set up your code like so: ui html panel("<!DOCTYPE html> <html lang=\"en\"> <head> </head> <body> <span variable=\"#Link\" fillwith=\"innerhtml\"></span> </body> </html>", 100) set(#Link, "<a href=\"http://google.com\" target=\"_blank\">Google</a>", "Global") wait(3) set(#Link, "<a href=\"http://facebook.com\" target=\"_blank\">FaceBook</a>", "Global") wait(3) set(#Link, "<a href=\"http://twitter.com\" target=\"_blank\">Twitter</a>", "Global") This will only open in the users default browser. Hope that helps! LazyBotter! 1 Quote Link to post Share on other sites
Sirfrank 17 Posted December 13, 2013 Report Share Posted December 13, 2013 Oh, i never noticed the HTML option for "Status Monitor" . OMG Tons of new opportunities! Whatever god you believe may bless you 1 Quote Link to post Share on other sites
giganut 109 Posted December 15, 2013 Report Share Posted December 15, 2013 Hello I just purchased your UI builder and I'm in a bit of a quandary, it's not the UI builder it's the way I have to display a formatted count down timer in the UI stat monitor. This is how I have it displayed in the ubot UI. Is there any way to enter this into the UI of your builder, ui stat monitor("Default Counter : {#zero}<font color=\"Red\">{#Minutes}{#Delimiter}{#Secondary Counter}{#Seconds}</font>", $nothing)========================================================================================================================================= Also I noticed that the stat monitors numbers default color is black is there a way to change it to a different color because I'm working with a black background and need to be able to see the numbers. thanks. Quote Link to post Share on other sites
LazyBotter 188 Posted December 15, 2013 Author Report Share Posted December 15, 2013 You need to use a #Variable in the stat monitor or for any HTML element, what you can do is set a variable like the code above: You can choose to use HTML as the status so you can edit the colour there (in UBot). ui html panel("<!DOCTYPE html> <html lang=\"en\"> <head> </head> <body> <span variable=\"#Link\" fillwith=\"innerhtml\"></span> </body> </html>", 100) set(#Link, "<a href=\"http://google.com\" target=\"_blank\">Google</a>", "Global") wait(3) set(#Link, "<a href=\"http://facebook.com\" target=\"_blank\">FaceBook</a>", "Global") wait(3) set(#Link, "<a href=\"http://twitter.com\" target=\"_blank\">Twitter</a>", "Global") Not a great example but you get the idea: comment("This is what the HTML element would look like when the builder generates the code:") ui html panel("<span>STATUS: </span> <span variable=\"#Status\" fillwith=\"innerhtml\"></span>", 100) set(#Delimiter, ":", "Global") set(#Minutes, 10, "Global") set(#Secondary Counter, 10, "Global") loop(10) { set(#Status, "{#zero}<span style=\"color:red;\">{#Minutes}{#Delimiter}{#Secondary Counter}{#Seconds}</span>", "Global") decrement(#Secondary Counter) decrement(#Minutes) wait(1) } Carl Quote Link to post Share on other sites
giganut 109 Posted December 15, 2013 Report Share Posted December 15, 2013 Thanks, I also figured out how to chnage the stat monitor numbers color, but now I need to change the "No file choosen" to a diffent color other that black, like white or somthing, is this possable? Quote Link to post Share on other sites
Sirfrank 17 Posted December 18, 2013 Report Share Posted December 18, 2013 A bit of request: We who write bots non EN, we would love character code in UI html code.Now i always have to manually insert<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> before </head>. That could be easy to implement and would improve my experience a lot. BEST UI builder! Quote Link to post Share on other sites
LazyBotter 188 Posted December 18, 2013 Author Report Share Posted December 18, 2013 Update Sent! V4.2 Quote Link to post Share on other sites
Sirfrank 17 Posted December 18, 2013 Report Share Posted December 18, 2013 Update details please! Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.