AngularFrontend#

This frontend was developed using Angular. For styling, it uses the bootstrap v5.0 library. Thus, providing beautiful components out of the box by giving access to Bootstrap classes for styling. For contributing with new components take a look at the Development section.

Examples

Tip

It implements most of the elements and attributes of the TkinterFrontend. So you can also check the Tkinter Syntax as explained above and try setting those values.

Elements#

window#

The main window of the UI. It is necessary to specify exactly one element of this type. Behaves as a container element.

container#

A container for defining layout. See bootstrap flex for layout ideas.

Attributes

Class, Visibility, Order, Child layout, Grid, Relative and Absolute, Direction, Color, Size, Border, Text

message#

A message shown to the user at the bottom. It must always be contained in the window element. Corresponds to a limited version of bootstrap alert.

This element is also used internally to send messages from the server to the UI.

Attributes

Visibility

type

Description: With this attribute one can set the look

Values: For the popup-types, three different options exist: ‘info’ (Default information message), ‘warning’, and ‘error’

title

Description: With this attribute one can set the title of the alert.

Values: String, can either be specified as a string or as a symbol.

message

Description: With this attribute one can set the message of the alert.

Values: String, can either be specified as a string or as a symbol.

context-menu#

A context menu that will open in the position of the click. It must always be contained in the window element. All button elements inside this element will appear as options in a list.

Attributes

Visibility

button#

A button. Corresponds to a limited version of bootstrap buttons.

Attributes

Class, Visibility, Order, Grid, Relative and Absolute, Direction, Color, Size, Border, Text

label

Description: The text inside the button

Values: String

icon

Description: The icon of the button

Values: Font Awesome symbol name

label#

A label to show text. See bootstrap text for styling.

Attributes

Class, Visibility, Order, Grid, Relative and Absolute, Direction, Color, Size, Border, Text

label

Description: The text inside the label

Values: String

textfield#

A text field to input text. The value of the text field can be stored in the context using the event input. See the Context section for more details.

Attributes

Class, Visibility, Order, Grid, Relative and Absolute, Direction, Color, Size, Border, Text

placeholder

Description: The text inside the text field before it is filled

Values: String

canvas#

A canvas to render images.

Canvas can be used to render clingraph images; see ClingraphBackend for details.

Attributes

Class, Visibility, Order, Grid, Relative and Absolute, Direction

image

Description: The local path to the image

Values: String

progress-bar#

A progress bar component used to display a percentage of completion. Corresponds to a limited version of Bootstrap progress bars .

Attributes

Class, Visibility, Order, Grid, Relative and Absolute, Direction, Color, Size, Border, Text

value

Description: The current value of the progress bar. By default, it is set to 0.

Values: Integer

min

Description: The minimum value of the progress bar. By default, it is set to 0.

Values: Integer

max

Description: The maximum value of the progress bar. By default, it is set to 100.

Values: Integer

label

Description: A label displayed inside the progress bar.

Values: String

out_label

Description: A label displayed outside the progress bar.

Values: String

Tip

Percentage

If you wish to use percentages, you can pass an interget between 0 and 100 to the value attribute and use the default values for min and max; 0 and 100 respectively.

checkbox#

A checkbox component used to display a boolean value. Corresponds to a limited version of Bootstrap form-check .

Attributes

Class, Visibility, Order, Grid, Relative and Absolute, Direction, Color, Size, Border, Text

checked

Description: The current value of the checkbox. By default, it is set to false.

Values: Boolean. Any value is considered as true. Leaving the attribute undefied defaults to false

label

Description: A label displayed next to the checkbox.

Values: String

disabled

Description: Disables the checkbox.

Values: Boolean

type

Description: The type of the checkbox. By default, it is set to ‘checkbox’.

Values: String. Can be ‘checkbox’ or ‘radio’

Important

Keep checkbox checked

When a checkbox is clicked, if an operation is called, the attribute checked needs to be updated in the encoding to reflect the new value.

Example

elem(check(P), checkbox, included(P)):- person(P).
attr(check(P), checked, true):- include(P).
when(check(P), click, call, set_external(include(P),true)) :- person(P), not include(P).
when(check(P), click, call, set_external(include(P),false)) :- person(P), include(P).

Tip

Radio buttons

If you wish to use a radio button, you can set the type attribute to ‘radio’. To have a radio-like behavior, you should make sure the condition for the checked attribute is exclusive for each radio button.

Example

The last rule in the following example ensures that only one radio button is checked at a time.

elem(radio(P), checkbox, included(P)):- person(P).
attr(radio(P), type, radio):- person(P).
attr(radio(P), checked, true):- include(P).
when(radio(P), click, call, set_external(include(P),true)) :- person(P), not include(P).
when(radio(P), click, call, set_external(include(P'),false)) :- person(P), not include(P), person(P'), P'!=P.

collapse#

A collapsible element. Corresponds to a limited version of Bootstrap collapse. It behaves like a normal button that will show and hide content when clicked. Unlike the usual button, collapse can contain other elements, similarly to the container.

Attributes

Class, Visibility, Order, Child layout, Direction,

collapsed

Description: The initial state of the collapse

Values: Boolean (true for collapsed, false for expanded)

label

Description: The label of the collapse

Values: String

icon

Description: The icon of the button.

Values: Font Awesome symbol name

Important

Child Elements

All elements intended to appear inside the collapse component must be defined as its children. These can include any UI element.

Warning

Automatic close

The collapse component will go back to its original state (“collapsed” or “expanded”) after every call to the server

Example

In this example a collapse component c contains a button b1 as its child. The component toggles between expanded and collapsed states when the user interacts with it.

elem(c, colapse, w).
attr(c, label, "Collapse").
elem(b1, button, c).

Atributes#

Note

Any attribute that does not fall under this list or the specific attributes of the element will be set as a plain HTML style in the component.

Class#

The class attribute class will add a bootstrap class to most elements. This attribute can appear multiple times. It can help to style the element with classes defined for each element type or general Bootstrap classes:

Tip

Simplify, use classes!

It is encouraged to use classes for styling with the predefined colors. Many of the attributes found in this guide can be replaced by a Bootstrap class.

Not only that but you can set multiple classes in the same attribute using

attr(ID,class,(C1;C2;...))

Positioning#

Order

order

Description: With this numeric attribute, set the order of appearance for the element inside the parent

Values: Integer

Warning

Make sure the order is set for all children of the same parent; otherwise, the order will not be respected.

Child layout

Tip

Try using bootstrap flex instead.

child_layout

Description: With this attribute, one can define the layout of the children, i.e., how they are positioned.

Values: For the child-layout, four different options exist:

  • flex (default, tries to do it automatically)

  • grid (grid-like specification)

  • absstatic (if one wants to specify the position with absolute-pixel coordinates)

  • relstatic (if one wants to specify the position with relative-pixel coordinates (from 0 to 100 percent, where 0 means left/top and 100 means right/bottom)).

They can either be specified via a Clingo symbol or via a string (string is case-insensitive).

Grid

grid_column

Description: With this attribute, one can define in which column the element shall be positioned.

Values: Integer

grid_row

Description: With this attribute, one can define in which row the element shall be positioned.

Values: Integer

grid_column_span

Description: With this attribute, one can define that the element stretches over several columns.

Values: Integer

grid_row_span

Description: With this attribute, one can define that the element stretches over several rows.

Values: Integer

Relative and Absolute

pos_x

Description: With this attribute, one sets the x-position of the element - it depends on the parent’s child-layout how this is defined (either pixels, relative as a percentage, etc.).

Values: Integer

pos_y

Description: With this attribute, one sets the y-position of the element - it depends on the parent’s child-layout how this is defined (either pixels, relative as a percentage, etc.).

Values: Integer

Direction

Tip

Try using bootstrap flex instead.

flex_direction

Description: With this attribute, one can set the direction (i.e., where it gets placed) of an element whose root has a specified flex layout.

Values: For the flex-direction type, two possible values exist:

  • column (vertical alignment)

  • row (horizontal alignment).

Style#

Color

Tip

Try using bootstrap colors instead.

background_color

Description: With this attribute, one can define the background color of the element.

Values: Color

foreground_color

Description: With this attribute, one can set the foreground color of the element.

Values: Color

border_color

Description: With this attribute, one may set the border color.

Values: Color

on_hover

Description: With this attribute, one can enable or disable on-hover features for the element.

Values: For the boolean type, either true or false are allowed - either as a string or as a Clingo symbol. If provided as a string, it is case-insensitive.

on_hover_background_color

Description: With this attribute, one can set the background color of the element when on_hover is enabled.

Values: Color

on_hover_foreground_color

Description: With this attribute, one can set the foreground color of the element when on_hover is enabled.

Values: Color

on_hover_border_color

Description: With this attribute, one can set the border color of the element when on_hover is enabled.

Values: Color

Tip

Try using bootstrap size classes instead.

Size

height

Description: With this attribute, one can set the height in pixels of the element.

Values: Integer

width

Description: With this attribute, one can set the width in pixels of the element.

Values: Integer

Border

Tip

Try using bootstrap borders instead.

border_width

Description: With this attribute, one defines the width of the border in pixels.

Values: Integer

border_color

Description: With this attribute, one may set the border color.

Values: Color

Visibility

visibility

Description: Sets the visibility of an element. It can be used to show things like a modal or a container using the update functionality.

Values: The visibility options are:

  • shown: To show the element

  • hidden: To hide the element

Text

Tip

Try using bootstrap text style instead.

Drag and Drop#

Drag

draggable_as

Description: This attribute states that the element is draggable. Moreover, the value of this attribute is the data that will be passed to the drop event. This value will replace the placeholder _dragged which can appear in a when predicate.

Values: Atom

drop_target

Description: The values passed in this attribute are the possible target-elements where the current element can be dropped. The value must be the identifier of the target element. The dragged element will only be allowed to be dropped on the elements specified in this attribute.

Values: Atom

Example

  • A more elaborate example can be found in Knapsack.

Element a can be dragged into elements b and c. When a is dropped into b, the assumption use(a) is added with the value true. When a is dropped into c, the assumption use(a) is added with the value false.

elem((a;b;c), container, w).
attr(a, draggable_as, a).
attr(a, drop_target, b).
attr(a, drop_target, c).
when(b, drop, call, add_assumption(use(_dragged),true)).
when(c, drop, call, add_assumption(use(_dragged),false)).

Calculating dragging targets

In some cases, the possible targets for a draggable elements want to be obtained from _any/2. These atoms, however, might not be available because of the restrictions imposed by previous selections (assumptions). When this is the case. An intermediate call can be made to remove the assumptions and get the available targets using the _any/2 predicate. This means one can add a lock/unlock button to the draggable elements which will remove the previous assumption to obtain the options while storing in the context the previous selection.

Example

This example extends the Knapsack problem and with the following code:

Make sure the line attr(object(O), draggable_as, O):-object(O, _). is commented out.

% ---- Unlock to drag an object
% This allows an intermediate call that will remove assumptions to get available destination using the _any/2 predicate


% Unlocked objects will appear in the original column
object(O, X):- object(O), _clinguin_context(unlocked(O),X).

% Unlocked objects are draggable and stand out
attr(object(O), filter, "opacity(0.8)"):-object(O), not _clinguin_context(unlocked(O),_).
attr(object(O), "box-shadow", "0 2px 2px 2px #00000070" ):- object(O), _clinguin_context(unlocked(O),_).
attr(object(O), draggable_as, O):-object(O, _), _clinguin_context(unlocked(O),_).

% Button to lock and unlock objects
elem(object_move(O), button, object(O)):-object(O,_).
attr(object_move(O), icon, "fa-lock"):-object(O,_), not _clinguin_context(unlocked(O),_).
attr(object_move(O), icon, "fa-lock-open"):-_clinguin_context(unlocked(O),_).
attr(object_move(O), class, ("btn-sm";"btn-outline-primary";"border"; "border-0")):-object(O,_).
% When unlocking the assumption is removed and the context is updated
when(object_move(O), click, call, remove_assumption(take(O))):-object(O, _), not _clinguin_context(unlocked(O),_).
when(object_move(O), click, context, (unlocked(O),X)):-object(O, X), not _clinguin_context(unlocked(O),_).

% Dummy event for locking an object
when(object_move(O), click, call, get):-_clinguin_context(unlocked(O),_).

% Any action, if something was unlocked then it is put back
when(O', E, call, get):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),available).
when(O', E, call, add_assumption(take(O),true)):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),taken).
when(O', E, call, add_assumption(take(O),false)):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),not_available).