Poster Presentation IUI'12, February 14-17, 2012, Lisbon, Portugal LogicPad: A Pen-Based Application for Visualization and Verification of Boolean Algebra Bo Kang Joseph J. LaViola Jr. Interactive Systems and User Experience Lab Interactive Systems and User Experience Lab University of Central Florida University of Central Florida Orlando, Florida 32816 Orlando, Florida 32816 [email protected] [email protected] ABSTRACT We present LogicPad, a pen-based application for boolean al- gebra visualization that lets users manipulate boolean func- tion representations through handwritten symbol and gesture recognition coupled with a drag-and-drop interface. We dis- cuss LogicPad’s user interface and the general algorithm used for verifying the equivalence of three different boolean func- tion representations: boolean expressions, truth tables, and lo- gic gate diagrams. We also conducted a short, informal user study evaluating LogicPad’s user interface, visualization tech- niques, and overall performance. Results show that visualiza- tions were generally well-liked and verification results mat- ched user expectations. Author Keywords Pen-based User Interface, Sketch Understanding, Boolean Al- Figure 1. LogicPad’s main window with three boolean function repre- gebra, Logic Verification sentations. ACM Classification Keywords novices, such as students who are learning the fundamentals H.5.2 Information Interfaces and Presentation: User Interfa- of boolean algebra, simple and quick prototyping is import- ces—Interaction Styles; G.4 Mathematics of Computing: Ma- ant. Most students still find using pen and paper to quickly thematical Software—User Interfaces sketch out boolean expressions, truth tables, and logic gate diagrams to be useful. Therefore, we made LogicPad ( see Fi- General Terms gure 1), a new pen-based application that combines the ease- Design, Human Factors of-use of pen and paper with the automation of computer- aided design applications. LogicPad focuses on the relation- INTRODUCTION ship between three different representations of boolean func- Boolean Algebra [8] is a fundamental concept in computer tions. Users can quickly sketch a boolean function and vi- science and digital system design. Many problems in digital sualize the function in each representation simultaneously. In logic design and testing, artificial intelligence, and combina- addition, we provide a general method for verifying the equi- torics can be expressed as a sequence of boolean operations valence of two boolean functions. and boolean variables. A boolean function can be represen- ted as an expression, truth table, or logic gate diagram; the RELATED WORK three different representations of the same boolean function Computer aided design applications for undestanding logic are considered equivalent. circuits have been previously developed, such as LogicAid, Traditional complex computer-aided design applications are which lets users develop boolean functions using representa- important tools for designing logic circuits. Nevertheless, for tions such as truth tables, state tables, and state graphs [9]. LogicAid is similar in spirit to our work, but LogicAid does not make use of a pen-based interface. Permission to make digital or hard copies of all or part of this work for Logic gate diagrams are well-suited for pen-based sketching personal or classroom use is granted without fee provided that copies are environments. SketchREAD describes a multi-domain sketch not made or distributed for profit or commercial advantage and that copies recognition engine capable of recognizing hand-drawn dia- bear this notice and the full citation on the first page. To copy otherwise, or gram sketches [1]. Wais’ user study explored critical sketch republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. recognition user interface issues with logic gate diagrams [10]. IUI’12, February 14–17, 2012, Lisbon, Portugal. Alvarado also analyzed how students created freely-drawn Copyright 2012 ACM 978-1-4503-1048-2/12/02...$10.00. 265 Poster Presentation IUI'12, February 14-17, 2012, Lisbon, Portugal logic gate diagrams in class over the course of a full seme- ster [2]. However, these works use user interfaces that are entirely sketch-based, while our work uses a combination of sketching and a drag-and-drop interface. Besides sketching diagrams, research in the recognition, eva- luation, and visualization of mathematical expressions has al- so been conducted previously. MathPad2 is a mathematical sketching tool for solving mathematics problems [5]. Math- Brush is a mathematics recognition tool that supports mathe- matical transformations and problem solving through the use of a back-end Computer Algebra System [4]. Our work ex- pands upon the notion of mathematical sketching, extending Figure 2. A logic gate diagram widget with a radial menu open showing it by combining mathematical expressions and logic gate dia- the six kinds of logic gates: AND, OR, NOT, XOR, Input, and Output. grams. Handwritten Boolean Operator Example USER INTERFACE Symbol LogicPad provides a sketching area for the user to write on + OR A + B as they normally would using pen and paper. Instead of sket- · AND A · B or AB ching the various boolean function representations on a sin- 0 A0 gle canvas, a separate widget with its own canvas is created NOT for each representation, which can be added to the sketching ⊕ XOR A ⊕ B area. Table 1. Mapping between handwritten symbols and boolean operators. Users write gestures on the sketching area in order to crea- te widgets. For instance, drawing an ‘E’ will create a boolean expression widget. Truth table widgets and logic gate diagram label. In addition, after the user connects two gates with a widgets are created using ‘T’ and ‘D’, respectively. A scrib- wire, the widget animates current flowing through the wire. ble erase gesture is used to erase both ink and user interface elements, because it mimics natural erasing. Boolean Expression Widget Since sketching mathematics is natural, LogicPad’s boolean CONCEPTUAL MODEL expression widget is a canvas that interprets the user’s hand- As previously discussed, boolean functions have three basic written math and converts it to a typeset notation. After reco- representations: truth tables, boolean expressions, and logic gnizing alphabetical letters, numbers and numerical operators gate diagrams. The three representations in LogicPad provi- using StarPad [11], four handwritten boolean operators can be de visualization cues to help the user understand the boolean interpreted by LogicPad, which are summarized in Table 1. function they are working with. During expression construction, a user can circle strokes and select alternate recognition options from an alternates bar in Logic Gate Diagram Widget case the default recognition does not match the user’s expec- With a sketching interface, the user needs to know the shape tation. In addition, expressions can be selected and moved of each type of logic gate, which can be a cognitive burden for around the widget. students who are still learning about boolean algebra. There- fore, we try to ease the burden by using a drag-and-drop radial menu [3] showing the different types of logic gates. Figure 2 Truth Table Widget shows a logic gate diagram widget with a radial menu sho- The truth table widget presents a table for the user to fill out wing the six basic logic gates. with the expected output of the boolean function they are wor- king with. The user can change the number of variables; each Users can hold down the stylus on the tablet screen for 3 variable can be renamed by erasing the old name and writing seconds in order to trigger the radial menu and drop a gate a new one, then the handwritten symbol is analyzed by the from it on the sketching area. Gates can also be freely moved Microsoft Ink Analyzer as the typeset notation underneath it. around the sketching area. We provide a sketching interface In comparison to pen and paper, LogicPad helps the user by for this widget; after gates are dragged and dropped on the creating a table with variables and the factorial combinations canvas, a user can sketch a line to connect any two gates. If a of their input values, which can be an onerous step when wor- stroke starts at one gate and ends at another, it is recognized king with many variables. Thus, the user can concentrate on as a wire and the stroke is removed and replaced with a wire. working out the output values for the truth table. A user can sketch a label near each gate. Label association is decided by checking whether an ink stroke falls within a MAPPING threshold distance from a gate. Any strokes that fall within LogicPad can determine the boolean function each widget re- the threshold are analyzed by the Microsoft Ink Analyzer as presents and minimize the function. The other two function typeset notations underneath strokes and used as the gate’s representations can also be created from any type of widget. 266 Poster Presentation IUI'12, February 14-17, 2012, Lisbon, Portugal user whether the boolean functions represented by the wid- gets are equivalent using a pop-up window. Figure 3. Process for converting a widget in order to determine whether INFORMAL USER STUDY two widgets represent the same boolean function. To gain insight into the perceived utility of LogicPad for do- main users, we conducted an informal user study. Verifying the equivalence of two boolean functions is essen- We recruited 6 participants (1 female and 5 males, aged 18- tial to LogicPad, because it lets users compare the different 25, 2 left-handed) from the undergraduate electrical enginee- representations, which can help them to understand boolean ring department at the University of Central Florida. Partici- algebra and boolean function representations. pants all had basic knowledge of boolean algebra. The study Each kind of widget stores data in a different format; when the was conducted in the lab, using an HP Compaq tc4400 12.1 user wants to see the widget’s function in another represen- inch tablet PC.