Documentation

Tags

Tags - main object in HTML. You can call tags to get their verbs and use them to create something in your app. Below we describe all the tags in details

[html]

[html] is used to create application settings. In other terms [html] is a tag for immovable objects.

  1. [html] create "App", set: {
  2. title: "App title";
[body]

But [body] is used to create objects on the canvas (body). In short - [body] is a tag for movable objects.

  1. [body] create "Text", class Text, set: {
  2. text: "Hello world";
[imp-use]

[imp-use] is the most unique tag. It's not the only hyphenated tag, it's that it: 1. Works only with [html] import. 2. It has a unique built-in function - call-name()

  1. [html] import:
  2. [imp-use] import file("./example.db"), call-name("exampledb")
[screen]

The [screen] tag creates and interacts with screens.

  1. [screen] create "screen1", set: {

Classes

Classes - definition of the object type for the compiler.

Text

This class creates text environment.

  1. [body] create "ExampleText", class Text, set: {
Image

This class creates image environment.

  1. [body] create "ExampleImage", class Image, set: {
Button

This class creates button environment.

  1. [body] create "ExampleButton", class Button, set: {
Input

This class creates input label environment.

  1. [body] create "ExampleInput", class Input, set: {
Dropdown

This class creates the dropdown environment.

  1. [body] create "ExampleDropdown" class Dropdown, set: {
Canvas

This class creates canvas environment.

  1. [canvas] "ExampleCanvas", set: {

Variables types

Variable types determine the value, which they are possessing. That means that a number variable (integer or float) cannot possess a text and vice versa.

None (var)

A variable type with no value, which can also be depicted as None. Any value can be given to this variable, and the variable would change its type according to the given value

  1. var a;
  2. // Grammaticaly correct writing of an empty variable
  3. var a = None;
  4. // Also grammaticaly correct writing of an empty variable
Intenger (int)

A variable type with the integer value only.

  1. int a = 0;
Float (float)

A variable type with the float (decimal) value only.

  1. float a = 1.33;
String (str)

A variable type with the text value only. Keep in mind that string is defined in one single line of text, so Enter doesn't do anything. Instead you should use \n to make a new line

  1. str a = 'An example text';
Boolean (bool)

A variable type with the true/false value only, which can also be depicted as 0 and 1.

  1. bool a = True;
  2. // The right syntax. "a" value - true
  3. bool b = 1;
  4. // Also the possible syntax. "b" value - also true
List (list)

A variable type, which can contain any other variable with any type.

  1. list a = [3, 8.2, 'hello', "object"];
Dictionary (dict)

A variable type which can contain a certain unrepeatable key, which in turn can possess a single value of any type, including another dictionary.

  1. dict A = {
  2. key1: 'value1',
  3. key2: 1,
  4. key3: 6.9,
  5. key4: "object1"
  6. key5: [1, 2, 3],
  7. key6: {
  8. key61: 'Dict inside a dict'
  9. }
  10. };
Object (obj)

A variable type that references one of the created objects on the screen.

  1. obj a = "object1";
  2. // The "a" variable references previously created object with a name 'object1'

Properties

Properties are a way of customizing an object and setting it up by setting values to the properties themselves.

Title: [html]

A property to set the title of the application. Note that it can only be used for [html]. (It is not suitable for creating text headings)

  1. title: "Example code"
Icon: [html]

The icon of the program. Note that it can only be used for [html] (it's not suitable for creating images inside the program). Receives the file object.

  1. icon: file('icon.png');
Fullscreen: [html]

The boolean, which determines if the program window is fullscreen or not (taking up the whole screen or not)

  1. fullscreen: false;
Autoload: [html]

The boolean, which determines if the program automatically loads all the objects. Check out the built-in action to load objects manually

  1. autoload: False;
Text: class Textclass Button

A property to customize the text. Keep in mind that it can only be used for buttons and text.

  1. text: "Hello world!"
Width:

A property to set an element's width. Can have value in pixels, centimeters, or percentages.

  1. width: 40px
Height:

A property to set an element's height. Can have value in pixels, centimeters, or percentages.

  1. height: 20px
Font: class Text class Button

A property to set an element's fonts. Note that it can only be used for text and buttons.

  1. font: 'Times New Roman'
Opacity:

A property to set an element's opacity. Can have value only in percentages.

  1. opacity: 50%

Result:

Centerpoint: Recommended with "class Image"

A property to set the element's center point. Can be used for attaching objects to certain coordinates.

  1. centerpoint: 200px, 200px
Border-radius:

A property to set an element's border radius.

  1. border-radius: 20%
Margin:

A property for creating gaps between the object's bar and the environment. Has a special required direction argument.

  1. margin: up, 5px
Secondcolor: Recommended with "class Button"

A property to set the element's second color. It is recommended to use it when transitioning between screens or for animation of pointing to a button.

  1. secondcolor: white
Clonable:

A property of an object that allows it to be cloned. Values are boolean only (true, false)

  1. clonable: true
Z-position:

A property that sets the location of the object relative to the person. The larger the value, the closer the object seems to the user

  1. z-position: 1
Webaccess: [html]

Sets the program's access to the web. Accepts a boolean and a string as the application's URL (must be without "://"!).

  1. webaccess: true, "exampleapp";
Webhook: [html]

A property that arranges variables that act as a hook takes values that can then be used.

  1. webhook: variable1, variable2;

You can use these variables later:

  1. if variable1 = 1 {
  2. // Do something
  3. }
Align:

A property that sets a constant horizontal position. It can take only 3 values - left, center and right.

  1. align: center;

Text with align: center

Id:

The string identifier of the object, which later can be used as an Object reference. Note that the same ID can be applied to any type and any amount of objects.

  1. id: 'text';
Script: [canvas]

Allows you to add a script to the canvas, through which you can draw.

  1. script: "exampleScript";

After that, you can name your script and write code in it:

  1. [html] decode "exampleScript":
  2. "examplecanvas".draw(...)
Quality: [canvas]

Changes the number of pixels per inch on the canvas.

  1. quality: 16;
Clickable: class Image

The boolean to show is the image available to clicks to register them with built-in event ".press".

  1. clickable: true;
Scale:

The size of the object, varying from 1 to 256, where is the float number represents the multiplier of the original size.

  1. scale: 1.5;
  2. // Result - the object is one and a half times bigger than normal.
Options: class Dropdown

The list, containing all options that the user could choose from

  1. options: ["Option 1", "Option 2", "Option 3"];
Dropdown-tip: class Dropdown

The default text, which shows up if no options were chosen

  1. dropdown-tip: "Default option";
Disabled: class Button

The boolean, which determines if the button is disabled (not clickable and shows a disabled state - usually more grayish and more transparent, but it depends on the platform).

  1. disabled: true;
Design: only with [screen]

The reference to the design, coded in the "[html] decode:" before this property announcement.

  1. design: design1;
Base-properties:

The property, which sets the base properties of an object, such as position, default theme color, e.g., as an Dictionary. Can be used to optimize objects by removing some unnecessary properties.

  1. base-properties: {};

Built-in functions

Built-in functions are functions, that already avaible to user. They have the same syntax as normal functions, but before them is an object, to which we apply changes.

Events

.click() only with html

Executes on any click.

  1. html.click {
  2. # Do something
  3. };
.press() only with html

Executes on click on a specific object. Accepts objects as a string.

  1. html.press("object1") {
  2. # Do something
  3. };
.keyboard() only with html

Executes if pressing a specific keyboard key. Accepts keys as a list. Does not accept keys like Enter, Backspace, Delete, PrintScreen, all F keys (Changed in v6E)

  1. html.keyboard(["A"]) {
  2. # Do something
  3. };
.input() only with html

Executes if text in object with Input class was changed. Accepts Input class objects as string only.

  1. html.input("input1") {
  2. # Do something
  3. };
.scroll() only with html

Executes if the screen was scrolled.

  1. html.scroll {
  2. # Do something
  3. };
.hover() only with html

Executes if a specific object is hovered. Accepts any object as a string.

  1. html.hover("object1") {
  2. # Do something
  3. };
.selected() only with class Dropdown

Executes if the option in the specified dropdown was changed (new option was selected).

  1. "dropdown".selected() {
  2. # Do something
  3. };
.clickedImage() only with class Image

Executes if the given image was clicked. Returns the X and Y positions of the click as different variables.

  1. "image".clickedImage(x, y) {
  2. # Do something
  3. };
.screenInteraction() only with html

Executes if some interaction with the program window has happened. The parameter is a string, which specifies the type of interaction from the next possible ones:.

  • size - when the size of the program window has changed
  • movement - when the program window moves
  • activation - when the program window is in focus (active)
  • deactivation - when the program window is out of focus (not active)
  • manual-scroll - when the program window is scrolled by the scrollbar on the bottom or the right side.
  • manual-activation - when the program window is in focus because the "Roll up" or "Minimize" on the program's bar was pressed.
  • manual-deactivation - when the program window is out of focus because the "Roll up" or "Minimize" on the program's bar was pressed.
  1. html.screeninteraction('size') {
  2. // Do something
  3. };
.selection() only with html

Executes when any text (from Text, Button, Input or even Dropdown) has been selected. The parameters are: 1. the Object reference; 2. the variable, which the selected text will be assigned to (optional).

  1. html.selection("textObject") {
  2. // Do something
  3. };

Actions

.sleep() only with html

Forces the program to suspend the algorithm for the specified time. Takes the time as an integer in seconds.

  1. html.sleep(3)
.clone() only with html

Clones the given object. Note that the object must have the clonable: set as true (Changed in v6E. Accepts the original object's name and the new one.

  1. // Creating a dictionary with cloning properties
  2. dict A = {
  3. properties: 'all',
  4. position: [0, 0, 0],
  5. name: html.object() + "A"
  6. }
  7. // Now we're cloning
  8. "obj".clone(A)
.undo() only with html

Cancels the last action that the program executed. Can accept the specific object's name, and then cancel the last action with that specific object.

  1. "button1".changeProperty("text", "Changed text")
  2. html.undo()
  3. # Result - the text goes back to its previous value.
.load()

Loads the calling object onto the screen, which also allows the object to receive input. Note that if the autoload property is set to true (which is set to true by default), then all the objects created with [body] will be automatically loaded for you.

  1. // Previously created an object with name: "object1"
  2. "object1".load()
  3. // Result - the object shows up on the screen.
.repeat() only with html

Repeats the given code for the given times. Accepts the starting value of the repeating index (default value - 0), the amount to add with each repeat (default value - 1), and the action to repeat itself.

  1. html.repeat(1, 2, {
  2. // Do something
  3. })
.getClickPos()

Returns the last position (X and Y) of a click on a specific object as a list.

  1. var a = "button1".getclickpos
  2. # Result: [0, 0]
.getSelectedOpt() Only with "class Dropdown"

Returns the value of the selected option in the chosen dropdown.

  1. # Options list: Bye World, Good Morning World!, Hello world! User has chosen the 3rd option.
  2. var a = "dropdown1".getselectedopt
  3. # Result: "Hello world!"
.getSelectedOptIndex() Only with "class Dropdown"

Returns the index of the selected option in the chosen dropdown.

  1. # Options list: Bye World, Good Morning World!, Hello world! The user has chosen the 3rd option.
  2. var a = "dropdown1".getselectedoptindex
  3. # Result: 2. Reminder: the content of the dropdown is a list, so the count of its content is starting from 0.
.changeProperty()

Changes almost any property that was already assigned to the object. To create a new property, use .createProperty(). Accepts 2 parameters: name of the property and its new value.

  1. "object1".changeProperty("text", "Hi world")
.createProperty()

Creates and assigns almost any property. If the property is already assigned, it rewrites its value to the new one. Note: you can't add a property that cannot be assigned to your type of object. Accepts the name of the property, which is gonna be added, and its starting value.

  1. # Note - the object1 have the Text class
  2. "object1".createProperty("text", "Hi world")
  3. # Result - the object1 shows "Hi world"
  4. "object1".createProperty("script", "exampleScript")
  5. # Result - PropertyError: the Text class doesn't support 'script' properties.
.getProperty()

Returns the value of any given property. Returns 0 if the property doesn't exist or isn't supported on the given object.

  1. var b = "object1".getProperty("text")
.change() Only with lists

Receives the object in the list, which needs to be changed, and a new value for this object.

  1. list.change(list[0], "newValue")
  2. list.change("oldValue", "newValue")
.append() Only with lists

Adds the value to the end of the given list.

  1. list.append("Apple")
.remove() Only with lists

Removes the given object from the given list. This won't affect objects in the list after.

  1. list list = ["Apple", "Orange", "Banana", "Mango", "Pear"]
  2. list.remove(list[1])
  3. // Current value: ["Apple", "Banana", "Mango", "Pear"]
  4. list.remove("Pear")
  5. // Final value: ["Apple", "Banana", "Mango"]
.length() Only with lists and strings

Returns the length of the given object.

  1. list list = ["hello", "world", "!"]
  2. var a = list.length()
  3. // Value of the a: 3
.totext() Only with lists

Converts the list to a single line string, containing every item. The separator argument sets the symbol between every item listed in text.

  1. list list = ["hello", "world", "!"]
  2. var a = list.totext(",")
  3. // Value of the a: "hello,world,!"
.readlist() Only with lists

Repeats the given code the times controlled by the length of the given list. In the first argument, the variable, which collects the values set (default value - none) , the second argument is the type of reading (instant or alternate) (default value - alternate). The third argument is the action. According to the given type, the action will behave differently. If the "instant" is set, the action will be active after the end of the reading. If the "alternate" is set, the action will be performed for every item in the list (default value - none).

  1. list list = ["hello", "world", "!"]
  2. list.readlist(a=0, alternate, {
  3. // Do something
  4. }
  5. var a = list.readlist()
  6. // Value of the a: ["hello", "world", "!"]
.object() Only with html

Returns the Object variable, to which the main function refers to.

  1. // Creating a dictionary with cloning properties
  2. dict A = {
  3. properties: 'all',
  4. position: [0, 0, 0],
  5. name: html.object() + "A"
  6. }
  7. // Now we're cloning
  8. "obj".clone(A)
  9. // The "name" value: "objA"
.disableEvent() Only with built-in events

Disables the referred event, which means that the inputs of the given event are no longer taken into account.

  1. // Creating an event and assigning a variable to it
  2. obj event = html.click() {
  3. // Do something
  4. }
  5. // Now let's disable the event
  6. event.disableEvent()
  7. // The result: program no longer performs code, given in an "html.click()" event.
.enableEvent() Only with built-in events

Does the exact oposite of the .disableEvent action.

  1. // Creating an event and assigning a variable to it
  2. obj event = html.click() {
  3. // Do something
  4. }
  5. // Now let's disable the event
  6. event.disableEvent()
  7. // The result: program no longer performs code, given in an "html.click()" event.
  8. // Now let's enable the event back
  9. event.enableEvent()
  10. // The result: program performs code, given in an "html.click()" event again!
.changeObject() Only with built-in events

Changes the object to which the event refers. Keep in mind that if the new object cannot work with such an event, the event stops working.

  1. // Creating an dropdown event and assigning a variable to it
  2. obj event = "dropdown1".click() {
  3. // Do something
  4. }
  5. // Here we're going to change the dropdown to the second one
  6. event.changeObject("dropdown2")
  7. // The event now works with dropdown2, but no longer works with the first dropdown.
.changeArguments() Only with built-in events

Changes the arguments of the given event. If the event doesn't take any arguments, then the given argument will just be ignored.

  1. // Creating an event with an argument and assigning a variable to it
  2. obj event = html.input("input1") {
  3. // Do something
  4. }
  5. // The next thing we're going to do - change the argument (the Input object, which receives the text changes) to an another object
  6. event.changeArguments("input2")
  7. // The result - the event now works with the second input.