Advanced HTML UI Building

[BeerNut 25]

Does anyone have some Advanced HTML UI tips to share?

 

I have seen some really nice UI's built with uBot, but not people sharing how they did it.

 

I would like to know how to add tables of data to the UI Window. Ive seen UI's that open a new window and show nice cell formatted data like excel. Id love to show my users the data as its created. But I don't know where to start. Charts, Graphs, Status Bars? Share some of your UI tips.

 

Ill share this one first since I just figured it out here is how to make a Fake Logging Console like below.

 

Bot Idle..

Starting Process..

Building Accounts..

Verifying Emails..

Process Complete..

 

First you are going to need a stat monitor inside of a styled div tag.

<div class="Section6">
<div style="background-color:#FFF; width:230px; height:100px; border:1px soild #999"><font variable="#status" fillwith="innertext" style="color: #000;"></font></div>

You will want to make the style of the container similar.

.Section6 {
	position: absolute;
	width: 240px;
	top: 180px;
	font-size: 14px;
	text-align: left;
	left: 0px;
	border:1px solid #999;
	background-color:#FFF;
	padding-left:5px;
	padding-top:5px;
}

Now we need to have #status show our current status. 

 

What I did was I set #status to the list %status. Then at the various key points in my bot I "add item to list" with the status. E.g. "Gathering Data.." you then need to reset the #status to %status to update it in the UI. Simply adding to the list does not update the variable. You could have some sort of loop at the start of the bot that auto updates #status for you.

 

This method can look pretty good but it will not have a scroll bar it only looks like a status log. 

[Edward_2 85]

i would suggest getting a UI Builder like the one here.

 

http://www.ubotstudio.com/forum/index.php?/topic/12732-sell-drag-drop-ui-buildernow-with-css-jquery/

 

Its cheap like $35 and helps alot.