Jump to content
UBot Underground

[SELL] Super Simple UI Builder V4.0! (Drag & Drop with Bootstrap Plugin!)


Recommended Posts

That is why I added the "Value For Label (Default Selection)" input box. I just thought it looked a lot nicer in the select rather than on top and also uses less room on the UI.

This is kinda confusing and not quite good. lol why would you want to add the label inside the menu as the value stand in the way and it can be done anyways if the user simply adds that inside the first value of the drop down !? i would revert it back bud, it stands in the way of god aesthetics and i have to manually remove it every time.

 

I have looked at adding themes and they only work with the new version 3.0 of bootstrap, so I would have to re-code the whole builder. I am considering doing this tho, but I have been a little busy the last couple of weeks!

it would be a great upgrade :)

Link to post
Share on other sites
  • Replies 237
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Thanks for your order!    Just created a small user manual to get you started: You Can Read It Here  

Thanks for the sale! You got it just in time! (Price going up $10 tomorrow)   New Update! (V3.0)     Change Log:   Cleaned up the code! Better looking interface! Tabs should work properly now.   You c

Hi, I don't know if you got an answer or not but I have had a conversation with Meter about a similar issue a customer of mine was having. Meter's licence system currently has problems with special ch

Posted Images

New Update to V3.2!

 

Change Log:

 

  • Added progress bar element. (See below how to use).
  • Added a "Scroll Box" element. (For use with checkboxes).

 

To add a Progress Bar to your UI, set the "Width" and add a "#Variable".

 

Once you have done that you can use the "$Set Progress" function below to set your progress in your loop:

 

$Set Progress Function

define $Set Progress(#Total_Loops, #Loop_Position) {
    set(#Total_Loops, #Total_Loops, "Local")
    set(#Loop_Position, #Loop_Position, "Local")
    set(#Progress, $eval("var tmp1 =  {$multiply($divide(#Loop_Position, #Total_Loops), 100)}; tmp2 = Math.floor(tmp1);
tmp2"), "Local")
    return(#Progress)
}

Example Progress Bar Script:

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\">
/*COPY CSS STYLES FOR IMPORT // START*/
label \{display: inline-block;\}
html \{ margin: 0px; padding: 0px; \}
body \{margin: 0px; padding: 0px;\}
p.left \{ text-align: left; \}
.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;\}
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=\"renametabdiv\" style=\"display: none; \">
<span style=\"font-weight:bold;\">New Label: </span> <input type=\"text\" id=\"renametext\" placeholder=\"New Tab Label\">
<input type=\"button\" id=\"renameok\" value=\"Rename\" class=\"btn btn-primary\">
<input type=\"button\" id=\"hiderename\" value=\"Hide\" class=\"btn btn-primary\">
</div>
<div id=\"Builder\" style=\"display: block; opacity: 1; \">
<!--COPY HTML FOR IMPORT // START-->
<div id=\"Main\">
<div class=\"mainheader changeheader\" style=\"width: 800px; \"><legend class=\"headertext\" style=\"font-family:Andale Mono;font-size:28px;text-align:left;color:#000;\">Example Progress Bar</legend></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\" style=\"left: 124px; top: 12px; \">
<progress variable=\"#Progress_Variable\" fillwith=\"value\" max=\"100\" style=\"width:500px;\"></progress></div></div></div>
</div>
<!--COPY HTML FOR IMPORT // END-->
</div>
</div>
<!--############MENU##############-->
</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)
set(#Progress_Variable, 0, "Global")
set(#Loops, 40, "Global")
set(#Count, 1, "Global")
loop(#Loops) {
    set(#Progress_Variable, $Set Progress(#Loops, #Count), "Global")
    increment(#Count)
    wait(0.2)
}
define $Set Progress(#Total_Loops, #Loop_Position) {
    set(#Total_Loops, #Total_Loops, "Local")
    set(#Loop_Position, #Loop_Position, "Local")
    set(#Progress, $eval("var tmp1 =  {$multiply($divide(#Loop_Position, #Total_Loops), 100)}; tmp2 = Math.floor(tmp1);
tmp2"), "Local")
    return(#Progress)
}

To use the "Scroll Box" element you need to give the "Scroll Box" element an ID which will show in the drop-down menu for the "Checkbox" element. 

 

Select which ID you wish to add the checkbox to and click "Add Element". To remove a checkbox click the "Show/Hide Grid" which will display the "X" to remove a checkbox.

 

Hope You Like!!

 

Carl  ;)

 

P.S

 

Any other suggestions are welcome, I will try and get them added!

 

First just want to say this is a great software.  For some reason though, I cannot get the progress bar to work.  I've cut n paste your example code verbatim, but when I run the script, I don't see any progress updating in the progress bar.  To test it, I have stepped through the script node by node and the #Progress variable never updates for some reason as the script loops (which is probably why the progress bar never visually updates).  Any ideas?  I'm sure I'm doing something wrong, but as I've cut n paste your script exactly with no changes to it, I cannot figure out what it is.  Any advice is appreciated.

Link to post
Share on other sites
  • 2 weeks later...

First just want to say this is a great software.  For some reason though, I cannot get the progress bar to work.  I've cut n paste your example code verbatim, but when I run the script, I don't see any progress updating in the progress bar.  To test it, I have stepped through the script node by node and the #Progress variable never updates for some reason as the script loops (which is probably why the progress bar never visually updates).  Any ideas?  I'm sure I'm doing something wrong, but as I've cut n paste your script exactly with no changes to it, I cannot figure out what it is.  Any advice is appreciated.

 

Im not sure what you are doing wrong, I have just tested the code above and it seems to be working fine?

Link to post
Share on other sites

Hello.

 

Is there a way to change the text color of a status monitor?

 

I also can't edit elements. When I select them and hit "Elemt Properties", it shows me the correct settings on the right side. But when I hit Add Element, I get a new element. 

Instead of changing my old one. Which is not optimal, because I now have to move the element back to it's old place.

 

An align feature would also be very helpful. Vertical, Horizontal and with left, center and right option.

 

Thanks in advance for your help and hard work.

 

Dan

Link to post
Share on other sites

Hello.

 

Is there a way to change the text color of a status monitor?

 

I also can't edit elements. When I select them and hit "Elemt Properties", it shows me the correct settings on the right side. But when I hit Add Element, I get a new element. 

Instead of changing my old one. Which is not optimal, because I now have to move the element back to it's old place.

 

An align feature would also be very helpful. Vertical, Horizontal and with left, center and right option.

 

Thanks in advance for your help and hard work.

 

Dan

 

Hi Dan,

 

You can change the color of the actual status by using html in your status when you set it (In Ubot), or you can manually do a simple edit to the code to do this. 

 

The element properties does not "Edit" the element, but will load the properties so you can recreate the element.

 

Hope that helps!

 

Carl  :)

Link to post
Share on other sites
  • 3 weeks later...

Hello I'm having a problem with the UI builder. I keep getting these white lines at the top of my UI and no matter the size I set the UI to, I can't get them to go away and if I set the size of the image as the UI size then the scroll bar dissapers and a big white line replaces the scroll bar.
http://imageshack.com/a/img32/9785/p46b.jpg

 

========================================================================================================================================

http://imageshack.com/a/img838/8459/kw2h.jpg

Link to post
Share on other sites

Hello LazyBotter,

 

Are there any new features / updates planned for the near future?

Would love to see your roadmap :-)

 

 

 

Dan

 

Hi Dan,

 

I have been very busy recently and not sent out many updates and I think that the application is able to create a pretty decent looking user interface currently.

 

I may update a few features to the app a little more but I do have plans to create a brand new version using the new Bootstrap 3.0 plugin in the future. The new version (once built) will be sold for a much cheaper price to all the users who have bought this builder. 

 

Thanks 

 

Carl  :)

 

P.S Giganut I have sent you a solution to your problem via email. 

Link to post
Share on other sites

Hi Dan,

 

I have been very busy recently and not sent out many updates and I think that the application is able to create a pretty decent looking user interface currently.

 

I may update a few features to the app a little more but I do have plans to create a brand new version using the new Bootstrap 3.0 plugin in the future. The new version (once built) will be sold for a much cheaper price to all the users who have bought this builder. 

 

Thanks 

 

Carl  :)

 

P.S Giganut I have sent you a solution to your problem via email. 

 

Great. Thanks a lot for the update.

 

An edit feature which allows to edit objects in place would be really nice. 

So that we don't have to position the items again after we change something.

 

Regards

Dan

Link to post
Share on other sites
  • 2 weeks later...

hey Carl any news on the Bootstrap 3 upgrade ? regardless if you are going to build / charge for an upgrade to the current version i think is time to move forward and add multiple CSS/JS themes support.

 

michael.

Link to post
Share on other sites

hey Carl any news on the Bootstrap 3 upgrade ? regardless if you are going to build / charge for an upgrade to the current version i think is time to move forward and add multiple CSS/JS themes support.

 

michael.

 Second that. Would be great!

 

Dan

Link to post
Share on other sites

Working on the new builder for bootstrap 3.0, themes etc...

Sounds great. 

 

Do you have some new features in mind for the next version? Or what is the advantage of bootstrap 3?

 

Dan

Link to post
Share on other sites

@LazyBotter:

 

I only have one feature request. Make the new version capable to produce UI's similar to the ones you use in your twitter account creator and hotmail creator.

 

That would be really awesome!

 

Dan

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