Zenno BotUI - is HTML base interface editor for bots, which helps you easily and quickly create attractive user-friendly interface for you projects!
This feature also includes input settings functionaly and allows to pass input parameters for configuring your project before execution.

For creation of BotUI interface in your project add it on static panel in project editor choosing the option:“Add bot interface” in context menu

Note that block can not exist at the same time with Input Setting block!
If you add BotUI block, Input Settings block will be removed. And vice versa, if you add Input Settings block, Bot UI block also will be removed.
In ZennoPoster application, BotUI can be opened by double click on your project.

BotUI block consists of 3 panels, Toolbar with controls, Main layout and Propeties panel .

In Propertoes panel you can view and edit control settings. If there is no selected control, it displayes layout settings
Panel contains two tabs:
Main: contains main properties of control Extra: contains main and additional properties of control.

Controls can be put from toolbar to main layout using Drag&Drop.

New - removes main layout completely and removes all controls from it, layout settings are set by default. View - opens interface preview form, whish allows to see how interface will look when viewing it in ZennoPoster. Main editing - opens form for manual editing of layout html-code (recommended only for advanced users with HTML knowledge).

Label - common text for remarks on layout

Textbox - field for input of single-line text

Password - field for password input (differs from Textbox in that visual symbols are changed to circles)

Number - field which value can be specified as integer

Boolean - checkbox, can take values true or false

Textarea - field for multi-line text input

Select - drop-down list. Options for choosing are set using Options property in which Text - displayed text of the option, Value - value which will be passed to variable when option is choosed.

Radio - group from radiobuttons. Options for choosing are set using Options property in which Text - displayed text of the option, Value - value which will be passed to variable when option is choosed.

Filename - field for filepath input. By default value is specified using FilePath property, in ZennoPoster is set using dialog window called by clicking […].

Folder path - field for folder path input. The value is specified in FilePath property using value True and setting folder name.

Multiselect - drop-down list with possibility of multiple option choosing. Options for choosing are set using Options property in which Text - displayed text of the option, Value - value which will be passed to variable when option is choosed.

Captcha Modules - drop-down list to choose service for recognition of captchas available in ZennoPoster

Sms Services - drop-down list to choose sms-service available in ZennoPoster.

Translate Services - drop-down list to choose the service for translation available in ZennoPoster.

Tab - control including collection of tabs, tab can contain any tabs except of Tab. Collection of tabs can be edited using Tabs property.\\

User Control - control that allows you to add any custom elements. It is added using HTML code.

After transferring of control from toolbar on a working layout it could be to start to edit its properties.

Controls Textbox, Number, Password, Boolean, Textarea, Select, Radio, Filename, Multiselect, Captcha Modules, Sms Services, Translate Services contain the value and can be connected with project variable.

For connection of control with variable you need to set the property of VariableName property in project and choose the variable from list of project variables. For creation of new variable you need to choose “New…” option and input the name of new variable, it will be created in project automatically.

Form of controls in HTML

Attributes presented in all controls:

min_height: needed for recovery of the minimal possible height property for control in editor, value - positive integer number.
min_width: needed for recovery of the minimal possible height property for control in editor, value - positive integer number.
anchorbot, anchorright, anchortop, anchorleft - needed for recovery of the anchor property for controls in editor, value - positive integer number, bot - binding to bottom edge of the container, top - to upper, right - to right, left - to left. It can take value “1” if binding is needed and “0” if binding is not needed. Attribute id is needed for internal work.

Simple controls
Label

<div id=“17” type=“label” style=“top: 137px; left: 115px; width: 85px; height: 20px” class=“fixed
form-group” min_height=“15” min_width=“15” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<div style=“font-style:normal; font-weight:normal; text-decoration:none; font-size:10pt; width:
85px; height: 20px; color:rgb(64, 64, 64)” class=“ignore”>Пометка</div>
</div>
Tab

<div id=“42” type=“tab” style=“top: 205px; left: 55px; width: 285px; height: 165px” class=“fixed
nav-tabs-custom” min_height=“100” min_width=“150” anchorbot=“0”
anchorright=“0” anchortop=“1” anchorleft=“1”><ul style=“width: 285px; height: 40px” data-tabs=“tabs”
class=“nav nav-tabs”><li class=“active”><a aria-expanded=“true” data-toggle=“tab”
href=“#tab_421”>Tab 1</a></li><li class=“”><a aria-expanded=“false” data-toggle=“tab”
href=“#tab_422”>Tab 2</a></li></ul><div style=“width: 285px; height: 125px”
class=“tab-content”><div id=“tab_421” class=“tab-pane active”></div><div id=“tab_422”
class=“tab-pane”></div></div></div>
Controls containing value of variable
They have own attributes valuable, default_value и variable_name
valuable - shows that control can be associated with variable
variable_name - name of variable to which control value is binded
default_value - stores itself value of variable by default (value chosed in editor)

Radio
default_value should take the value from available for value among options

<div variable_name=“radioVar” type=“radio” style=“top: 235px; left: 155px; width: 100px;
height: 60px” id=“17” class=“fixed form-group” default_value=“value 2” valuable=““
min_height=“30” min_width=“20” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<div style=“width: 100px; height: 30” class=“radio”><label style=“height: 30” value=“value 1”
class=“option”><input checked=”” value=“option1” id=“optionRadios171” name=“optionRadios17”
type=“radio”>Вариант 1</label></div><div style=“width: 100px;
height: 30” class=“radio”><label style=“height: 30” value=“value 2” class=“option”><input
value=“option2” id=“optionRadios172” name=“optionRadios17” type=“radio”>Вариант
2</label></div></div>
TextArea
default_value can take any text value

<div default_value=“Example
of multi-line text” type=“textarea” style=“top: 250px; left: 85px; width: 185px; height:
70px” id=“19” class=“fixed form-group” valuable=“” min_height=“0” min_width=“20”
anchorbot=“0” anchorright=“0” anchortop=“1” anchorleft=“1”>
<textarea style=“width: 185px; height: 70px” placeholder=“TextArea”
class=“form-control”>Example
of multi-line text</textarea>
</div>
Text
default_value can take value of one-line text

<div variable_name=“text_variable” default_value=“Text” id=“20” type=“textbox” style=“top:
185px; left: 120px; width: 85px; height: 32px” class=“fixed form-group” valuable=““
min_height=“0” min_width=“15” anchorbot=“0” anchorright=“0” anchortop=“1” anchorleft=“1”>
<input value=“Text” style=“width: 85px; height: 32px” size=“10” class=“form-control”
type=“text”></div>
TranslateServices
default_value should take value from available options

<div default_value=“BaiduTranslate.dll” style=“top: 190px; left: 80px; Width: 200px; Height:
40px” type=“comboservices” id=“19” class=“fixed form-group selected” valuable=”“
min_height=“15” min_width=“20” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<select style=“width: 200px; height: 40px” class=“form-control select2”>
<option selected=””>BaiduTranslate.dll</option>
<option>GoogleTranslateViaWebInterface.dll</option>
<option>GoogleTranslate.dll</option>
<option>YandexTranslate.dll</option>
<option>MicrosoftTranslate.dll</option>
</select> </div>
Select

<div variable_name=“selectVar” id=“18” type=“combobox” style=“top: 285px; left: 125px;
Width: 155px; Height: 40px” class=“fixed form-group selected” default_value=“testValue”
valuable=“” min_height=“15” min_width=“20” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<select style=“width: 155px; height: 40px” class=“form-control”><option
value=“testValue”>Option1</option>
<option value=“testValue2”>Option2</option>
</select></div>
Boolean
default_value should take the value “true” or “false”

<div variable_name=“boolVar” id=“17” type=“boolean” style=“top: 243px; left: 120px; width:
103px; height: 30px” class=“fixed selected checkbox” default_value=“false” valuable=““
min_height=“15” min_width=“15” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<label style=“top: 233px”>
<input style=“top: 0px” type=“checkbox”>Активировать
</label>
</div>
Captcha Modules
default_value should take value from available options

<div default_value=“Anti-Bot.dll” style=“top: 250px; left: 90px; width: 120px; height: 40px”
type=“comboservices” id=“17” class=“fixed selected form-group” valuable=”” min_height=“15”
min_width=“20” anchorbot=“0” anchorright=“0” anchortop=“1” anchorleft=“1”>
<select style=“width: 120px; height: 40px” class=“form-control select2”>
<option selected=“”>Anti-Bot.dll</option>
<option>Anti-Captcha.dll</option>
<option>BypassCaptcha.dll</option>
<option>CaptchaBot.dll</option>
<option>CapMonster2.dll</option>
<option>DeCaptcher.dll</option>
<option>DeathByCaptcha.dll</option>
<option>MonkeyEnter.dll</option>
<option>CaptchaSaver.dll</option>
<option>ImageDecodersCaptchaModule.dll</option>
<option>ImageTyperzCaptchaModule.dll</option>
<option>RipCaptcha.dll</option>
<option>RuCaptcha.dll</option>
<option>UuwiseCaptcha.dll</option>
<option>JsdatiCaptcha.dll</option>
<option>RuoKuaiCaptcha.dll</option>
</select>
</div>
Filename
default_value should take value of one-line text

<div variable_name=“filePath” type=“filename” style=“top: 233px; left: 85px; width: 175px;
height: 32px” id=“25” class=“fixed input-group selected” default_value=“Вставь путь”
valuable=“” min_height=“0” min_width=“0” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<input value=“Вставь путь” style=“width: 139px; height: 32px” class=“form-control”
type=“text”>
<span class=“input-group-btn”>
<button style=“height:32px” class=“btn btn-info btn-flat” type=“button”>…</button>
</span>
</div>
Multiselect
default_value should take value in the form “selectedValue1, selectValue2, selectedValue3”

<div variable_name=“multiValue” id=“19” type=“combobox” style=“top: 260px; left: 155px;
width: 130px; height: 45px” class=“fixed form-group” default_value=“Value1” valuable=““
min_height=“15” min_width=“20” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<select multiple=”” style=“width: 130px; height: 45px” class=“form-control”><option
selected=“” value=“Value1”>Вариант1</option>
<option value=“Value2”>Вариант2</option>
</select></div>

Number
default_value should take integer value more than min and less than max

<div variable_name=“someCount” id=“17” style=“top: 250px; left: 150px; width: 85px; height:
32px” type=“number” class=“fixed selected form-group” default_value=“50” valuable=““
min_height=“0” min_width=“15” anchorbot=“0” anchorright=“0” anchortop=“1” anchorleft=“1”>
<input max=“100” min=“0” step=“1” value=“50” style=“width: 85px; height: 32px” size=“10”
class=“form-control” type=“number”>
</div>
Password
default_value should take value of one-line text

<div variable_name=“password” id=“18” type=“password” style=“top: 260px; left: 143px;
width: 85px; height: 32px” class=“fixed selected form-group” default_value=“super” valuable=”“
min_height=“0” min_width=“15” anchorbot=“0” anchorright=“0” anchortop=“1” anchorleft=“1”>
<input value=“super” style=“width: 85px; height: 32px” size=“10” class=“form-control”
type=“password”>
</div>
Sms Services
default_value should take value from available options

<div default_value=“SmsActivate.dll” style=“top: 205px; left: 180px; Width: 150px; Height:
40px” type=“comboservices” id=“18” class=“fixed form-group selected” valuable=”“
min_height=“15” min_width=“20” anchorbot=“0” anchorright=“0” anchortop=“1”
anchorleft=“1”>
<select style=“width: 150px; height: 40px” class=“form-control select2”>
<option selected=””>SmsActivate.dll</option>
<option>SmsVk.dll</option>
<option>SmsReg.dll</option>
</select>
</div>
User Control

<div type=“user_control” id=“1” bind_id=“” bind_attribute=“” default_value=“” class=“fixed form-group user-control” style=“top: 220px; left: 190px; width: 155px; height: 140px” anchorleft=“1” anchortop=“1” anchorright=“0” anchorbot=“0” min_width=“0” min_height=“0”>
Custom elements should be created here
</div>