Programming Layout by Manipulation

Thibaud Hottelier

EECS Department
University of California, Berkeley
Technical Report No. UCB/EECS-2014-158
August 18, 2014

http://www.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-158.pdf

Creating layouts for documents, GUIs, or data visualizations is a time-consuming and error-prone process. Non-programmers would like the customization and fine-grained control currently only possible with handwritten layout engines. Today, such engines are written by proficient programmers. This thesis introduces new techniques for specifying layout and generating efficient layout engines.

First, we present a new programming methodology which addresses the two central sources of bugs in layouts: ambiguities and conflicts. Then, we introduce a language of constraints in which we capture layout specifications formally. Finally, we show how to generate efficient layout engines automatically. We provide the following individual contributions:

  1. The Programming by Manipulation (PBM) paradigm targeted at non-programmers to establish specifications in visual domains such as layout. We introduce a new type of user demonstration—manipulation—which is resistant to users' imprecisions inherent in drawing. Instead of sketching the desired layout, users steer the exploration of potential layouts by pointing out what they would like to change.
  2. L3, a declarative language for layout specifications. L3 is based on non-directional constraints in which the flow of computation is completely abstracted away.
  3. A synthesis procedure—grammar modular synthesis—capable of generating layout engines from L3 specifications. Our new algorithm scales to realistic layout specifications and produces generic engines supporting languages of documents.

To evaluate our work, we present two user studies showing not only that non-programmers can design interesting visualizations using PBM, but also that proficient programmers are more productive with PBM than with conventional constraint programming. We also compare the performance of our synthetized engines with state-of-the-art constraint solvers and show that our engines are up to two orders of magnitude faster.

Advisor: Ras Bodik


BibTeX citation:

@phdthesis{Hottelier:EECS-2014-158,
    Author = {Hottelier, Thibaud},
    Title = {Programming Layout by Manipulation},
    School = {EECS Department, University of California, Berkeley},
    Year = {2014},
    Month = {Aug},
    URL = {http://www.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-158.html},
    Number = {UCB/EECS-2014-158},
    Abstract = {<p>Creating layouts for documents, GUIs, or data visualizations is a time-consuming and error-prone process. Non-programmers would like the customization and fine-grained control currently only possible with handwritten layout engines. Today, such engines are written by proficient programmers. This thesis introduces new techniques for specifying layout and  generating efficient layout engines.</p>
<p>First, we present a new programming methodology which addresses the two central sources of bugs in layouts: ambiguities and conflicts. Then, we introduce a language of constraints in which we capture layout specifications formally. Finally, we show how to generate efficient layout engines automatically. We provide the following individual contributions:</p>

<ol>
<li>The Programming by Manipulation (PBM) paradigm targeted at non-programmers to establish specifications in visual domains such as layout. We introduce a new type of user demonstration&mdash;manipulation&mdash;which is resistant to users' imprecisions inherent in drawing. Instead of sketching the desired layout, users steer the exploration of potential layouts by pointing out what they would like to change.</li>

<li> L<sup>3</sup>, a declarative language for layout specifications. L<sup>3</sup> is based on non-directional constraints in which the flow of computation is completely abstracted away.</li>

<li> A synthesis procedure&mdash;grammar modular synthesis&mdash;capable of generating layout engines from L<sup>3</sup> specifications. Our new algorithm scales to realistic layout specifications and produces generic engines supporting languages of documents.</li>
</ol>

<p>To evaluate our work, we present two user studies showing not only that non-programmers can design interesting visualizations using PBM, but also that proficient programmers are more productive with PBM than with conventional constraint programming. We also compare the performance of our synthetized engines with state-of-the-art constraint solvers and show that our engines are up to two orders of magnitude faster.</p>}
}

EndNote citation:

%0 Thesis
%A Hottelier, Thibaud
%T Programming Layout by Manipulation
%I EECS Department, University of California, Berkeley
%D 2014
%8 August 18
%@ UCB/EECS-2014-158
%U http://www.eecs.berkeley.edu/Pubs/TechRpts/2014/EECS-2014-158.html
%F Hottelier:EECS-2014-158