Form Follows Function(): An IDE to Create Laser-cut Interfaces
and Microcontroller Programs from Single Code BaseJun Kato
Masataka Goto
National Institute of Advanced Industrial Science and Technology (AIST), Tsukuba, Japan{jun.kato, m.goto}@aist.go.jp
ABSTRACTDuring the development of physical computing devices,
physical object models and programs for microcontrollers
are usually created with separate tools with distinct files. As
a result, it is difficult to track the changes in hardware andsoftware without discrepancy. Moreover, the software
cannot directly access hardware metrics. Designing
hardware interface cannot benefit from the source code
information either. This demonstration proposes a browserbased IDE named f3.js that enables development of both asa single JavaScript code base. The demonstration allows
audiences to play with the f3.js IDE and showcases example
applications such as laser-cut interfaces generated from thesame code but with different parameters. Programmers canexperience the full feature and designers can interact withpreset projects with a mouse or touch to customize laser-cut
interfaces. More information is available at http://f3js.org.

different tools, making it cumbersome to keep track of bothchanges synchronously. Moreover, tool separation prevents
the software from accessing the hardware metrics and viceversa. For instance, modeling an object that has holes tosupport sensors and actuators requires manual input of theirmetrics. The source code contains ‘import’-like statements
for their drivers and thus might know which sensors andactuators are used, but it is not aware of the metrics, such as
the size of the printed objects.

Author Keywords

Integrated development environment; personal fabrication;laser-cut interface; microcontroller.
ACM Classification Keywords

H.5.2. Information interfaces and presentation (e.g., HCI):
User Interfaces – GUI; D.2.6. Software Engineering:
Programming Environments – Integrated environments.
INTRODUCTION

Physical computing, or the development process of the socalled Internet of Things (IoT), involves iterative cycles ofmodeling hardware and programming software. The recent
proliferation of personal fabrication techniques reduces thecost and time of printing physical objects. Microcontrollers
are becoming more powerful, and some are capable ofrunning programs written in dynamically-typed languages
such as JavaScript, allowing more software enthusiasts tocreate their prototypes easily.
Development of hardware and software is usually done with
Permission to make digital or hard copies of part or all of this work forpersonal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
bear this notice and the full citation on the first page. Copyrights for thirdparty components of this work must be honored. For all other uses, contact
the Owner/Author.
Copyright is held by the owner/author(s).
UIST '15 Adjunct, November 08-11, 2015, Charlotte, NC, USA
ACM 978-1-4503-3780-9/15/11.
http://dx.doi.org/10.1145/2815585.2817797

Figure 1. Overview of the development workflow with f3.js,
completed in a single web page, language and code base.

We aim to address these issues and leverage the potential of
microcontroller applications aware of the hardware metrics.
This demonstration proposes an integrated development
environment f3.js that stands for “form follows function(),written in JavaScript.” It allows development of both aphysical user interface (form) and its behavior by writing
JavaScript code (function) on a browser (Figure 1). The
programmer can write the same code that runs in a browser
as well as on a microcontroller to allow customization of
the layout of laser-cut interfaces and to define its behavior,respectively. Such double-meaning source code is achievedby utilizing two different JavaScript interpreters – one
running on the f3.js and the other on the microcontroller.

When the user is satisfied with the source code and thelaser-cut interface, the system generates a PDF file andallows the user to laser-cut the acrylic panels. Finally, theassembled hardware can be connected to the host computer,and the user can upload the source code to start running theprogram on the microcontroller. The f3.js library on the
microcontrollers does the same calculation as on thebrowser but does not render anything nor provide any
interactivity (since there is no canvas to draw graphics) –therefore only allows to retrieve the metrics information.
During execution of the program, f3.js shows a consolewith which the user can monitor the console output andinput commands if needed.

FORM FOLLOWS FUNCTION() – F3.JS

RELATED WORK AND DISCUSSION

The main interface of f3.js is rendered as a single web page
as shown in Figure 1. The top of the page presents general
information (such as the project directory) and becomes
more detailed as the page progresses. While commoncommands are provided as links under the Operations menu
in the file manager, the user can always switch to Console
or Secure Shell tabs and input any command.
The current system supports Tessel.io 1 and Intel Edison 2
microcontrollers, which can run Node.js-based JavaScript
applications. Once the user chooses a directory on thesystem, existing code in the project is analyzed, and its
overview is shown in the ‘Project Summary’ tab. Whilemost of the information is specified in package.json andcan be edited in-place, the platform type is automaticallydetected by analyzing the JavaScript source code.
The current f3.js library contains Node.js packages thatdrive Grove and Tessel.io modules. These are sensors andactuators encapsulated with standardized connectors, easily
attached to the supported microcontrollers. The next tab‘Code with Print Preview’ shows the source code editor andthe print preview. The programmer can write JavaScript
application code that imports the f3.js library and creates
the hardware module instances on the code editor.
The f3.js library does not only enable controlling thehardware modules but also provides the metrics informationand supports live programming of laser-cut interfaces. The
print preview is dynamically rendered by executing thesource code with the sandboxed f3.js JavaScript interpreteron the browser. The interpreter ignores any calls toundefined functions meant to run on the microcontrollers.
When a change is made to the source code, the systeminstantly evaluates the code and updates the preview. With
this live programming support, the programmer can easily
design the laser-cut interface as well as the interactive GUI
on the print preview. With this interactivity, end-users
including designers can use a mouse or touch to customize
the laser-cut interfaces to fit their needs.
1

Tessel. https://tessel.io

2Intel Edison. https://www.intel.com/content/www/do-it-yourself/edison.html

There exists prior work on programming tools for either
physical objects or microcontroller applications. The former
work includes DressCode [1] that allows designers to write
code in a domain-specific language that generates twodimensional artifacts. ShapeJS [2] provides JavaScript API
that enables generating three-dimensional printer-readyobjects. Our interaction design does not only allow thedesign of the hardware but also its behavior and can beintegrated into these techniques. Recent work from thelatter category includes .NET Gadgeteer [3] and Autodesk
123D Circuits [4], both of which support programming
microcontrollers along with the graphical representations of
the circuits. While these environments only care logicalconnections between microcontrollers and other modules,
our system provides print preview that can be interactively
edited by the designers and outputs laser-cut interfaces.
As discussed above, the novelty of our work resides in theintegration of hardware and software design using a single
programming language and single code base. The potential
benefits include fast iterative development of applications
aware of hardware metrics, simple version control, loose
learning curve, and easy collaboration, whose validations
remain as our future work. Whether JavaScript is suitablefor designing layout of physical objects or not is an openquestion. Upon the choice of the language, we attachedimportance to the fact that it is popular, used for various
purposes, and has a defacto standard package manager.
Further details on the f3.js IDE and library are available on
http://f3js.org.
REFERENCES

1. Jacobs, J., and Buechley, L. Codeable Objects:
Computational Design and Digital Fabrication forNovice Programmers. In Proc. of CHI’13, 1589-1598.
2. Shapeways. ShapeJS. http://shapejs.shapeways.com
3. Villar, N., Scott. J., Hodges, S., Hammil, K., and Miller,
C. .NET Gadgeteer: A Platform for Custom Devices. In
Proc. of Pervasive'12, 216-233.
4. Autodesk. Autodesk 123D Circuits.
http://www.123dapp.com/circuits