Frontends

The frontends listed here are provided with clinguin. Each frontend allows different element types, arguments, and events.

The source code for the frontends can be found on GitHub.

TkinterFrontend

This frontend uses the standard Python interface tkinter to generate a UI.

Examples

One can look up the available elements, with the corresponding attributes and callback actions using:

$ clinguin client-server --frontend-syntax

If one is also interested in what values one might set, one can also look at the full syntax:

$ clinguin client-server --frontend-syntax-full

AngularFrontend

This frontend was developed using Angular. For styling, it uses the bootstrap library with Angular-Boostrap. 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 explaned above and try setting those values.

Atributes

Note

Any attribute that is passed 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 atribute class will add a bootstrap class to any element. This attribute can apear multiple times.

Tip

Simplify, use classes!

It is encouranged to use classes for styling with the predefined colors. Must of the attributes found below can be replaced by a bootstrap class.

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

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

Positioning

Child layout

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 exists:

  • flex (default, tries to do it automatically)

  • grid (grid-like-specification)

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

  • 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 bespecified 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 elements stretches over several columns.

Values: Integer

grid_row_span

Description: With this attribute one can define, that the elements 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 parents child-layout how this is defined (either pixels, relative as a percentage, …).

Values: Integer

pos_y

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

Values: Integer

Direction

Tip

Try using boostrap positioning instead.

flex_direction

Description: With this attribute one can set the direction (i.e., where it gets placed) of anelement which 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 boostrap 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 string or as a clingo-symbol. If one provides it as a string, it is case-insensitive.

on_hover_background_color

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

Values: Color

on_hover_foreground_color

Description: With this attribute one can set the forground color the element shall have, when on_hover is eneabled.

Values: Color

on_hover_border_color

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

Values: Color

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 boostrap 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:

  • visible: To show the element

  • hidden: To hide the element

Text

Tip

Try using boostrap text style instead.

Elements

window

The main window of the UI. It is necesary to especify exacly one element of this type.

message

A message shown to the user in the bottom. Corresponds to a boostrap alert. It must always be contained in the window element.

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 exists: ‘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 if it is simple 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 if it is simple 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 buttons inside this element will apear as options.

Attributes

container

A container for defining layout. Implemented using boostrap modals.

Attributes

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

title

Description : The title of the modal

Values: String

button

A button. Implemented using boostrap buttons.

Attributes

Class, Visibility, 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.

Attributes

Class, Visibility, 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

textfield

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

Attributes

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

placeholder

Description : The text inside the textfield 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, Grid, Relative and Absolute, Direction

image

Description : The local path to the image

Values: String

Creating Your Own Frontend

Warning

Under construction. Sorry :).

But feel free to contribute to the AngularFrontend with new components!