Bot interface

Owned by Stanislav N. (Unlicensed)
Last updated: Sept 11, 2021 by ZL Support
7 min read

Table of contents

The bot user interface (hereinafter BotUI) is a visual constructor for creating an interface based on web technologies: HTML, CSS, Java Script. With this editor, you can, without any special knowledge of web development, simply and quickly create a beautiful, intuitive, modern, multilingual interface for your projects! BotUI includes settings functionality and allows you to pass input parameters to a template / plugin for its subsequent execution in ZennoPoster.

Add "Bot interface" to the project

To do this, you need to click " Add " on the static blocks panel of the ProjectMaker project editor, and in the context menu that appears, select " Add bot interface ", or by right-clicking in any area of the lower part, call the context menu.

A corresponding icon will appear on the panel, which opens with a double click of the mouse.

Please note that this block cannot be simultaneously present in the project with the " Input settings " block. When adding "BotUI", the block "Input settings" is removed! The same happens and vice versa! Be careful and pre-save the input interface settings!

Bot interface editor

The visual editor is divided into 2 main sections:

Main interface settings

  • Menu

  • Workspace

Interface localization

  • Menu

  • Toolbox

- Next, we will consider step by step, each of the sections.

 

Section: Main settings

  • New - create a new interface, while completely clearing the main canvas and deleting all the elements on it.

  • View - opens a form for previewing the interface, which, when you save the project and add it to ZennoPoster, will look the same.

  • Undo - go back one step.

  • Redo - go back one step forward.

  • Open Code - opens the source code editor, visual designer.

  • Language - switch between language-localization of the interface.

  • Help - Help information for the user interface editor.

 

Workspace

The workspace for creating the interface consists of 3 parts:

  1. Toolbar

  2. Interface appearance

  3. Element properties

On the left is a toolbar with various elements: forms for entering text, choosing between options, additional modules and services, buttons, checkboxes and other elements (we will analyze each one below) that allow you to build an attractive, intuitive client interface. In the center is the layout of your future input settings (canvas), onto which you can drag and drop the elements you want from the toolbar on the left and arrange them as you like. And on the right is a panel with properties settings for this or that element, where you can specify the color, font, the variable into which the value from this element will fall, and many other settings, which we will talk about later.

Toolbar

Text - plain text for annotations on the canvas.

Textbox is a field for entering single line text.

Password - a field for entering a password (differs from a Textbox in that characters are visually replaced with circles).

Number is a field in which you can specify only an integer value.

Boolean - checkbox, can be true or false.

TextArea - a field for entering multi-line text.

Select - dropdown list. The options for selection are set through the “Options” property, in which “Text” is the displayed text of the option, “Value” is the value that will be passed to the variable when the option is selected.

Radio - a group of radio buttons. Options for selection are set through the “Options” property, in which “Text” is the displayed text of the option, “Value” is the value that will be passed to the variable when the option is selected.

Filename - field for entering the path to the file. The default value is specified via the FilePath property, in ZennoPoster the value is set via a dialog box called by pressing the […] button.

Button - a button with the ability to add a JavaScript event that will be applied to the current element.

Multiselect - a drop-down list with a choice of several options. Options for selection are set through the Options property, in which Text is the displayed text of the option, Value is the value that will be passed to the variable when the option is selected.

Captcha Modules - a drop-down list for selecting a "captcha recognition " service from those available in ZennoPoster.

Sms Service - a drop-down list for selecting the " receive sms " service from those available in ZennoPoster.

Translate Service - a drop-down list for selecting a text translation service from those available in ZennoPoster.

Tab - a control containing a collection of tabs, a tab can contain any controls except Tab. The collection of tabs can be edited through the Tabs property.

Language Selector - a drop-down list for displaying the language-localization of the interface, the settings of which are specified in the section: "Bot interface editor" - "Localization".

Start Button - start button.

Stop Button - stop button.

Interrupt Button - the interrupt button.

Proxy Control - control for configuring the use of proxies from the current project.

Proxy Control matches proxy settings and rules in ZennoPoster project.

 

Mapper - an element for synchronizing lists / tables / google tables of the current project with a plugin.

User Control is a user control that allows you to add any custom elements that can be added using HTML code.

Add element to interface

Each element can be easily dragged with the mouse from the toolbar onto the canvas, on which elements can be placed, only in the visible area.

Interface appearance

The canvas (or canvas) on which the elements of the future interface are located.

Element properties

This area is divided into 2 sections:

  • The main

When you click on an element (which is located on the canvas), in the properties window, parameters appear in which you can specify values: font, font size, text color, etc. Each element has its own unique parameters, the description of which can be found below in the same window.

  • More

Additional properties (metadata) of the element, which are used to fine-tune the display.

Example: “ Password field ”

There are many settings, each of them is described in the lower area of the window

Section: Localization

The localization of the user interface is as intuitive as the editor itself. At the top there is a menu item: “Language selection”.

By selecting the languages you need, in the "Element" panel, you can make the interface even more responsive for different language groups.

 

An example of an interface in the ZennoPoster project

Input project settings using BotUI

To call the user interface of the project settings, you need to right-click on the project, in the appeared context menu, select “Settings”.

Voila! So simple and easy, you can create an attractive, intuitive and informative interface for your project / plug-in, which you can later transfer to another user of ZennoPoster and he will not have any difficulties using it.