UI html panel

Latest revision as of 17:01, 31 January 2017

This command is a UI Command. This command creates a blank panel in the ui area in which you can use html, css, and javascript to design your own ui.

The command is used for the creation of custom fields, checkboxes, drop downs and other html elements.

HTML: The HTML for the UI elements being created.

Height In Pixels: The height of the UI area being created for the HTML UI elements.

[edit] Examples

Custom created fields are assigned variables that are used to integrate with the rest of your script in UBot Studio.

ui html panel("<input type=\"checkbox\" variable=\"#myvar2\" fillwith=\"checked\"><input type=\"text\" variable=\"#myvar\" fillwith=\"value\">", 135)
navigate("http://www.ubotstudio.com/playground/simple-form", "Wait")
type text(<username field>, #myvar2, "Standard")
type text(<first name field>, #myvar, "Standard")

Running the script inserts the values of the checkbox and the text box into the specified fields with the type text command.

This example is for populating a drop down menu or list on the UI:

clear list(%options)
add list to list(%blue, $list from text("one,two,three,four", ","), "Delete", "Global")
loop($list total(%blue)) {
    add item to list(%options, "<option value=\"\">{$next list item(%blue)}</option>", "Delete", "Global")
}
ui html panel("<select>{$text from list(%options, "")}</select>", 135)

The options tags are created with information pulled from another list that contains the values needed for the drop down list.

A list is created with the options tags needed to create the option in the drop down list.

The html for the dropdown values are then inserted into the UI html with surrounding select tags.

Running the script will create a drop down list on the UI.

[edit] Save File Dialog

To create a an Save File dialog, you can edit the html from the UI editor's file chooser and replace input type="file" with input dialogtype = 'save'.

<input dialogtype='save' type="file" id="FileChooser0" class="FileChooser0 FileChooser0input" variable="#FileChooser0" />

The dialog that appears after clicking the browse button will be a save as dialog instead of an open file dialog.

[edit] Reading and Rendering HTML From a File

The html for the UI html file can also be pulled from a file. In this example, the html is pulled from a file with the [$read file] function. The read file command is place inside a [Set] command, which is placed inside an [On Load] command, which is set to run the contained commands when the bot/script is loaded. Placing the [Set] command containing the [$read file] function inside an on load command will pull the html from the file and set it to the variable. The variable, which is inserted into the UI html panel command, will help the command render the code or the UI on the script/bot's UI.

on load("Bot Loaded") {
    set(#bloop,$read file("C:\\Users\\Desktop\\my ui code.txt"),"Global")
}
ui html panel(#bloop,300)

Please keep in mind that using the on load command to load the UI upon starting the bot/script means that the script will not run any other commands until the UI is finished loading.