Better images

examples/angular/ast/ui.lp

@@ -3,14 +3,14 @@
 node(I) :- ast_node(I, _, _), ast_show(node, I).
 
 elem(window, window, root).
-% when(window, load, call, get).
 when(window, load, context, (selected_node, X)):- _clinguin_context(selected_node, X).
 
-
+    %%%%%%%%%%%%%%%%%%%%%%%%
+    % Edition
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(form, container, window).
     attr(form, class, ("p-3";"bg-secondary";"bg-opacity-50";"rounded")).
     attr(form, order, 1).
-    % attr(form, visibility, hidden):- not _clinguin_context(selected_node, _).
     attr(form, width, "500px").
     attr(form, flex_direction, "row-reverse").
     attr(form, class, ("justify-content-end";"m-3")).
@@ -37,21 +37,24 @@ when(window, load, context, (selected_node, X)):- _clinguin_context(selected_nod
         when(hide_chidren, click, call, remove_atom(show_children(_context_value(selected_node),true))).
 
 
-
+    %%%%%%%%%%%%%%%%%%%%%%%%
+    % Canvas
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(c, canvas, window).
     attr(c, order, 2).
     attr(c, image_type, clingraph_svg).
 
-        %%%%%% Clingraph nodes from svg
+        %%%%%%%%%%%%%%%%%%%%%%%%
+        % Clingraph nodes
+        %%%%%%%%%%%%%%%%%%%%%%%%
         elem(n(X), svg_node, c) :- node(X).
-        % The id refers to the one used in the clingraph encoding
         attr(n(X), clingraph_id, X) :- node(X).
         when(n(X), click, context, (selected_node, X)):- node(X).
         when(n(X), click, call, get(1)):- node(X).
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Menu bar
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(menu_bar, menu_bar, window).
 attr(menu_bar, title, "AST").
 attr(menu_bar, icon, "fa-diagram-project").

examples/angular/graph_coloring/ui.lp

@@ -1,26 +1,26 @@
 
 elem(window, window, root).
 
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % Info message
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(l, message, window).
     attr(l, message, "Right click on node to select color!").
     attr(l, type, warning).
     attr(l, visible, hidden):- _clinguin_assume(_).
 
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % Context menu
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(context_menu(X), context_menu, window) :- node(X).
         elem(bcm(X,C), button, context_menu(X)) :- color(C), node(X), _b(assign(X,C)).
         attr(bcm(X,C), label, C) :- color(C), node(X).
         % attr(bcm(X,C), class, "disabled") :- color(C), node(X), not _b(assign(X,C)).
         when(bcm(X,C), click, callback, add_assumption(assign(X,C))) :- _b(assign(X,C)).
 
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % Clingraph image
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(c, canvas, window).
     attr(c, order, 2).
     attr(c, image_type, clingraph).
@@ -29,14 +29,13 @@ elem(window, window, root).
         attr(n(X), clingraph_id, X) :- node(X).
         when(n(X), right_click, update, (context_menu(X),visibility,visible)):- node(X).
 
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % Download modal
-    % ---------
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(modal, modal, window).
     attr(modal, title, "Download").
 
         elem(c1, container, modal).
-        % attr(c1, child_layout, "flex").
         attr(c1, flex_direction, "column").
         attr(c1, class, "align-items-end").
 
@@ -53,9 +52,9 @@ elem(window, window, root).
             when(t1, input, context, (show_download, _value)).
 
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Menu bar
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(menu_bar, menu_bar, window).
 attr(menu_bar, title, "Graph coloring").
 attr(menu_bar, icon, "fa-diagram-project").

examples/angular/jobshop/ui.lp

@@ -6,25 +6,39 @@ pos(M,(T2,ST2),X+1) :- assign(T1,ST1,M),  assign(T2,ST2,M), seq((T1,ST1),(T2,ST2
 color(1,"bg-primary").
 color(2,"bg-success").
 color(3,"bg-warning").
+
+
 elem(window, window, root).
 attr(window, class, ("column-reverse";"justify-content-between")).
 
+    %%%%%%%%%%%%%%%%%%%%%%%%
+    % Machine containers
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(c(M), container, window):- machine(M).
     attr(c(M), class, ("border";"border-dark";"bg-secondary";"rounded";"bg-opacity-25";"m-1";"p-1")):- machine(M).
     attr(c(M), flex_direction, column):- machine(M).
 
+        %%%%%%%%%%%%%%%%%%%%%%%%
+        % Title
+        %%%%%%%%%%%%%%%%%%%%%%%%
         elem(ctitle(M), label, c(M)):- machine(M).
         attr(ctitle(M), label, @concat("", "Machine ", M)):- machine(M).
         attr(ctitle(M), class, "fw-bold"):- machine(M).
         attr(ctitle(M), order, 1):- machine(M).
 
+        %%%%%%%%%%%%%%%%%%%%%%%%
+        % Tasks per machine
+        %%%%%%%%%%%%%%%%%%%%%%%%
         elem(ctasks(M), container, c(M)):- machine(M).
         attr(ctasks(M), order, 2):- machine(M).
         attr(ctasks(M), flex_direction, row):- machine(M).
 
             task_not_fixed((T,ST)):-  assign(T,ST,M), assign(T2,ST2,M), seq((T2,ST2),(T,ST),_), _b(seq((T,ST),(T2,ST2),_)).
             task_not_fixed((T,ST)):-  assign(T,ST,M), assign(T2,ST2,M), seq((T,ST),(T2,ST2),_), _b(seq((T2,ST2),(T,ST),_)).
 
+            %%%%%%%%%%%%%%%%%%%%%%%%
+            % Task
+            %%%%%%%%%%%%%%%%%%%%%%%%
             elem(tc(T,ST), container, ctasks(M)):- assign(T,ST,M).
             attr(tc(T,ST), class, C):- assign(T,ST,M), color(T,C).
             attr(tc(T,ST), class, ("bg-opacity-50";"m-1";"justify-content-between";"align-items-start";"p-1")):- assign(T,ST,M).
@@ -34,16 +48,24 @@ attr(window, class, ("column-reverse";"justify-content-between")).
             attr(tc(T,ST), flex_direction, column):- executionTime(T,ST,Time).
             attr(tc(T,ST), class, ("border";"border-dark";"border-2")):- _clinguin_assume(seq((T,ST),_,_)).
 
-                % Time label
+                %%%%%%%%%%%%%%%%%%%%%%%%
+                % Time
+                %%%%%%%%%%%%%%%%%%%%%%%%
                 elem(tctime(T,ST), label, tc(T,ST)):- _clinguin_assign((T,ST),Start).
                 attr(tctime(T,ST), label, @concat("","@",Start,"-",Start+ET)):- _clinguin_assign((T,ST),Start), executionTime(T,ST,ET).
                 attr(tctime(T,ST), class, "fw-light"):- _clinguin_assign((T,ST),Start).
                 attr(tctime(T,ST), fontSize, "8px"):- _clinguin_assign((T,ST),Start).
 
+                %%%%%%%%%%%%%%%%%%%%%%%%
+                % Label
+                %%%%%%%%%%%%%%%%%%%%%%%%
                 elem(tctitle(T,ST), label, tc(T,ST)):- assign(T,ST,M).
                 attr(tctitle(T,ST), label, (T,ST)):- assign(T,ST,M).
                 attr(tctitle(T,ST), class, "fw-bold"):- assign(T,ST,M).
 
+                %%%%%%%%%%%%%%%%%%%%%%%%
+                % Button
+                %%%%%%%%%%%%%%%%%%%%%%%%
                 elem(tcbtn(T,ST), button, tc(T,ST)):- assign(T,ST,M).
                 attr(tcbtn(T,ST), class, ("btn-info"; "btn-sm")):- assign(T,ST,M).
                 attr(tcbtn(T,ST), icon, "fa-left-long"):- assign(T,ST,M), task_not_fixed((T,ST)).
@@ -53,9 +75,9 @@ attr(window, class, ("column-reverse";"justify-content-between")).
                 when(tcbtn(T,ST), click, call, remove_assumption_signature((seq((T,ST),any,any)))):- _clinguin_assume(seq((T,ST),_,_)), assign(T,ST,M).
 
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Menu bar
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(menu_bar, menu_bar, window).
 attr(menu_bar, title, "Job Shop").
 attr(menu_bar, icon, "fa-chart-gantt").

examples/angular/placement/ui.lp

@@ -1,14 +1,14 @@
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%
 % WINDOW
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(window, window, root).
 attr(window, child_layout, flex).
 attr(window, flex_direction, row).
 
 
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % MODAL
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
 
     elem(modal, modal, window).
     attr(modal, title, "Add person").
@@ -32,9 +32,9 @@ attr(window, flex_direction, row).
             attr(b1, icon, "fa-plus").
 
 
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % ALL PEOPLE
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
 
     elem(people, container, window).
     attr(people, class, "w-25").
@@ -63,9 +63,9 @@ attr(window, flex_direction, row).
             attr(person_l(P), label, P):- person(P).
             attr(person_l(P), class, "text-capitalize"):- person(P).
 
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % PEOPLE INCLUDED
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
 
     elem(included, container, window).
     attr(included, class, "bg-info").
@@ -110,9 +110,9 @@ attr(window, flex_direction, row).
 
 
 
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % Table setup
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
 
 
     elem(tables, container, window).
@@ -160,9 +160,9 @@ attr(window, flex_direction, row).
                     attr(table_seat_p(T,S,P), class, "text-capitalize"):- _b(assign(seat(S,T),P)).
                     when(table_seat_p(T,S,P), click, call, add_assumption(assign(seat(S,T),P))):- _b(assign(seat(S,T),P)).
 
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
     % Menu bar
-    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    %%%%%%%%%%%%%%%%%%%%%%%%
 
     elem(menu_bar, menu_bar, window).
     attr(menu_bar, title, "Smart placement").

examples/angular/style/ui.lp

@@ -2,9 +2,9 @@ elem(window, window, root).
 % attr(window, child_layout, flex).
 attr(window, class, "flex-column-reverse").
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Menu bar
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(menu_bar, menu_bar, window).
 attr(menu_bar, title, "My app").
 attr(menu_bar, icon, "fa-home").
@@ -33,9 +33,9 @@ attr(menu_bar_next, icon, "fa-forward-step").
 when(menu_bar_next, click, callback, next_solution).
 
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Containers
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 
 elem(c1, container, window).
 attr(c1, child_layout, flex).
@@ -55,9 +55,9 @@ attr(c2, class, "rounded").
 attr(c2, child_layout, flex).
 attr(c2, flex_direction, row).
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Buttons C1
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(b1, button, c1).
 attr(b1, class, "btn-primary").
 attr(b1, class, "m-2").
@@ -99,9 +99,9 @@ attr(b8, class, "m-2").
 attr(b8, class, "btn-sm").
 attr(b8, label, "btn-dark").
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Buttons C2
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(b1o, button, c2).
 attr(b1o, class, "btn-outline-primary").
 attr(b1o, label, "btn-outline-primary").
@@ -129,9 +129,9 @@ attr(b8o, label, "btn-outline-dark").
 
 
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Labels C3
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 
 elem(c3, container, window).
 attr(c3, class, "border").
@@ -151,9 +151,9 @@ attr(l2, class, "text-danger").
 attr(l2, class, "text-capitalize").
 
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Dropdowns C4
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 
 elem(c6, container, window).
 attr(c6, class, "border").

examples/angular/sudoku-advanced/ui.lp

@@ -1,11 +1,17 @@
 
 elem(window,window,root).
 
+    %%%%%%%%%%%%%%%%%%%%%%%%
+    % Grid
+    %%%%%%%%%%%%%%%%%%%%%%%%
     elem(sudoku,container,window).
     attr(sudoku,child_layout,grid).
     attr(sudoku,width,100).
     attr(sudoku,height,100).
 
+        %%%%%%%%%%%%%%%%%%%%%%%%
+        % Cell dropdown
+        %%%%%%%%%%%%%%%%%%%%%%%%
         elem(pos(X,Y),dropdown_menu,sudoku):-pos(X,Y).
         attr(pos(X,Y),width,50):-pos(X,Y).
         attr(pos(X,Y),height,50):-pos(X,Y).
@@ -23,6 +29,9 @@ elem(window,window,root).
         attr(pos(X,Y),selected,V):-sudoku(X,Y,V), _clinguin_browsing.
         attr(pos(X,Y),selected,V):-_clinguin_assume(sudoku(X,Y,V)).
 
+            %%%%%%%%%%%%%%%%%%%%%%%%
+            % Cell items
+            %%%%%%%%%%%%%%%%%%%%%%%%
             elem(remove(X,Y), dropdown_menu_item, pos(X,Y)):-pos(X,Y).
             attr(remove(X,Y), icon, ("fa-ban";"text-info")):-pos(X,Y).
             when(remove(X,Y), click, call, remove_assumption_signature(sudoku(X,Y,any))):-pos(X,Y).
@@ -35,9 +44,9 @@ elem(window,window,root).
                 :-pos(X,Y), val(V).
 
 
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 % Menu bar
-% ---------
+%%%%%%%%%%%%%%%%%%%%%%%%
 elem(menu_bar, menu_bar, window).
 attr(menu_bar, title, "Sudoku").
 attr(menu_bar, icon, "fa-table-cells").