Clinguin: Building UIs in ASP#

Clinguin enables ASP developers to create interactive User Interface (UI) prototypes using only ASP. UIs are defined as sets of facts, which are then rendered by a fronted to provide continuous interaction with ASP solvers based on user-triggered events.

This and more examples are available in our examples folder!

Here is a motivation example:

Consider an ASP encoding that solves the sudoku puzzle where cells are defined by prediate pos(X,Y) and solutions by sudoku(X,Y,V) Clinguin will use this encoding and the following ui encoding to construct the UI shown bellow.

elem(window, window, root).
attr(window, child_layout, grid).

  elem(dd(X,Y), dropdown_menu, window) :- pos(X,Y).
  attr(dd(X,Y), width, 50)  :- pos(X,Y).
  attr(dd(X,Y), height, 50) :- pos(X,Y).
  attr(dd(X,Y), grid_column, X) :- pos(X,Y).
  attr(dd(X,Y), grid_row, Y) :- pos(X,Y).
  attr(dd(X,Y), class, ("border-dark";"bg-primary")) :- pos(X,Y).
  attr(dd(X,Y), class, "bg-opacity-50") :- subgrid(X,Y,S),  S\2!=0.
  attr(dd(X,Y), selected, V) :- _all(sudoku(X,Y, V)).

      elem(ddv(X,Y, V), dropdown_menu_item, dd(X,Y)) :- _any(sudoku(X,Y, V)).
      attr(ddv(X,Y, V), label, V) :- _any(sudoku(X,Y, V)).
      when(ddv(X,Y, V), click, call, add_assumption(sudoku(X,Y, V))) :- _any(sudoku(X,Y, V)).
_images/out11.png _images/out21.png _images/out3.png

For a more detailed explanation on how this code works take a look at the Quick Start section.

Note

Clinguin is part the Potassco umbrella (which is the home of Clingo and the other ASP tools)