research-article

Open access

Appliancizer: Transforming Web Pages into Electronic Devices

Authors:

Devon J. Merrill,

Steven SwansonAuthors Info & Claims

CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

Article No.: 415, Pages 1 - 13

https://doi.org/10.1145/3411764.3445732

Published: 07 May 2021 Publication History

All formats PDF

Abstract

Prototyping electronic devices that meet today’s consumer standards is a time-consuming task that requires multi-domain expertise. Consumers expect electronic devices to have visually appealing interfaces with both tactile and screen-based interfaces. Appliancizer, our interactive computational design tool, exploits the similarities between graphical and tangible interfaces, allowing web pages to be rapidly transformed into physical electronic devices. Using a novel technique we call essential interface mapping, our tool converts graphical user interface elements (e.g., an HTML button) into tangible interface components (e.g., a physical button) without changing the application source code. Appliancizer automatically generates the PCB and low-level code from web-based prototypes and HTML mock-ups. This makes the prototyping of mixed graphical-tangible interactions as easy as modifying a web page and allows designers to leverage the well-developed ecosystem of web technologies. We demonstrate how our technique simplifies and accelerates prototyping by developing two devices with Appliancizer.

References

[1]

Fraser Anderson, Tovi Grossman, and George Fitzmaurice. 2017. Trigger-Action-Circuits: Leveraging Generative Design to Enable Novices to Design and Build Circuitry. In Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology. ACM, 331–342.

Digital Library

[2]

Arduino. 2020. Arduino Reference. https://www.arduino.cc/reference/en/

[3]

Jonathan Bachrach, David Biancolin, Austin Buchan, Duncan W Haldane, and Richard Lin. 2016. Jitpcb. In 2016 IEEE/RSJ International Conference on Intelligent Robots and Systems (IROS). IEEE, 2230–2236.

[4]

Rafael Ballagas, Meredith Ringel, Maureen Stone, and Jan Borchers. 2003. iStuff: a physical user interface toolkit for ubiquitous computing environments. In Proceedings of the SIGCHI conference on Human factors in computing systems. 537–544.

Digital Library

[5]

Hernando Barragán. 2004. Wiring: Prototyping physical interaction design. Interaction Design Institute, Ivrea, Italy(2004).

[6]

Ayah Bdeir. 2009. Electronics As Material: LittleBits. In Proceedings of the 3rd International Conference on Tangible and Embedded Interaction (Cambridge, United Kingdom) (TEI ’09). ACM, New York, NY, USA, 397–400. https://doi.org/10.1145/1517664.1517743

Digital Library

[7]

Jean-Pierre Charras. 2012. ” Kicad: GPL PCB Suite”.

[8]

CodePen. 2020. Build, Test, and Discover Front-end Code - Nest Thermostat Control. https://codepen.io/dalhundal/pen/KpabZB

[9]

Adrien Coyette and Jean Vanderdonckt. 2010. Prototyping Digital, Physical, and Mixed User Interfaces by Sketching. In Workshop on User Interface eXtensible Markup Language UsiXML, France, Paris.

[10]

Flavia C Delicato, Paulo F Pires, Thais Batista, Everton Cavalcante, Bruno Costa, and Thomaz Barros. 2013. Towards an IoT ecosystem. In Proceedings of the First International Workshop on Software Engineering for Systems-of-Systems. 25–28.

Digital Library

[11]

EAGLE. 2020. PCB Design Software - Autodesk. https://www.autodesk.com/products/eagle/overview

[12]

EETimes. Apr. 2017. 2017 Embedded Markets Study: Integrating IoT and Advanced Technology Designs, Application Development Processing Enviroments. https://m.eet.com/media/1246048/2017-embedded-market-study.pdf.

[13]

Jorge Garza, Devon J Merrill, and Steven Swanson. 2019. Amalgam: Hardware Hacking for Web Developers with Style (Sheets). In International Conference on Web Engineering. Springer, 315–330.

Digital Library

[14]

Julien Gascon-Samson, Kumseok Jung, Shivanshu Goyal, Armin Rezaiean-Asel, and Karthik Pattabiraman. 2018. Thingsmigrate: Platform-independent migration of stateful javascript iot applications. In 32nd European Conference on Object-Oriented Programming (ECOOP 2018). Schloss Dagstuhl-Leibniz-Zentrum fuer Informatik.

[15]

Saul Greenberg and Chester Fitchett. 2001. Phidgets: Easy Development of Physical Interfaces Through Physical Widgets. In Proceedings of the 14th Annual ACM Symposium on User Interface Software and Technology(Orlando, Florida) (UIST ’01). ACM, New York, NY, USA, 209–218. https://doi.org/10.1145/502348.502388

Digital Library

[16]

Grove. 2020. Grove modules - Seeed Studio. https://www.seeedstudio.com/category/Grove-c-1003.html

[17]

Gaoyang Guan, Wei Dong, Yi Gao, Kaibo Fu, and Zhihao Cheng. 2017. TinyLink: A Holistic System for Rapid Development of IoT Applications. In Proceedings of the 23rd Annual International Conference on Mobile Computing and Networking. ACM, 383–395.

Digital Library

[18]

Bjoern Hartmann, Scott R Klemmer, Michael Bernstein, and Nirav Mehta. 2005. d. tools: Visually prototyping physical UIs through statecharts. In in Extended Abstracts of UIST 2005. Citeseer.

[19]

Utkarshani Jaimini and Mayur Dhaniwala. 2016. JavaScript empowered Internet of things. In 2016 3rd International Conference on Computing for Sustainable Global Development (INDIACom). IEEE, 2373–2377.

[20]

JLCPCB. 2020. Low Cost PCB Prototype & PCB Fabrication. https://jlcpcb.com/

[21]

Jun Kato and Masataka Goto. 2017. F3. js: A parametric design tool for physical computing devices for both interaction designers and end-users. In Proceedings of the 2017 Conference on Designing Interactive Systems. 1099–1110.

Digital Library

[22]

Majeed Kazemitabaar, Jason McPeak, Alexander Jiao, Liang He, Thomas Outing, and Jon E. Froehlich. 2017. MakerWear: A Tangible Approach to Interactive Wearable Creation for Children. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems (Denver, Colorado, USA) (CHI ’17). ACM, New York, NY, USA, 133–145. https://doi.org/10.1145/3025453.3025887

Digital Library

[23]

Mannu Lambrichts, Jose Maria Tijerina, and Raf Ramakers. 2020. SoftMod: A Soft Modular Plug-and-Play Kit for Prototyping Electronic Systems. In Proceedings of the Fourteenth International Conference on Tangible, Embedded, and Embodied Interaction. 287–298.

Digital Library

[24]

Richard Lin, Rohit Ramesh, Antonio Iannopollo, Alberto Sangiovanni Vincentelli, Prabal Dutta, Elad Alon, and Björn Hartmann. 2019. Beyond Schematic Capture: Meaningful Abstractions for Better Electronics Design Tools. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems. 1–13.

Digital Library

[25]

Victor Matos. 2009. Android Environment Emulator. Cleveland State University 20, 11 (2009).

[26]

David A Mellis and Leah Buechley. 2014. Do-it-yourself cellphones: an investigation into the possibilities and limits of high-tech diy. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. 1723–1732.

Digital Library

[27]

David A Mellis, Leah Buechley, Mitchel Resnick, and Björn Hartmann. 2016. Engaging amateurs in the design, fabrication, and assembly of electronic devices. In Proceedings of the 2016 ACM Conference on Designing Interactive Systems. ACM, 1270–1281.

Digital Library

[28]

Devon J Merrill, Jorge Garza, and Steven Swanson. 2019. Echidna: mixed-domain computational implementation via decision trees. In Proceedings of the ACM Symposium on Computational Fabrication. 1–12.

Digital Library

[29]

Multisim. 2020. Live Online Circuit Simulator. https://www.multisim.com/

[30]

Zainalabedin Navabi. 1997. VHDL: Analysis and modeling of digital systems. McGraw-Hill, Inc.

[31]

Mozilla Developer Network. 2013. Firefox OS, 2013.

[32]

[32] P. Li and J. Bachrach, ”The Stanza Language”.2015. http://www.stanzalang.org

[33]

Raspberry Pi. 2015. Teach, Learn, and Make with Raspberry Pi. https://www.raspberrypi.org/

[34]

Proteus. 2020. PCB Design and Circuit Simulator Software. https://www.labcenter.com/

[35]

Raf Ramakers, Fraser Anderson, Tovi Grossman, and George Fitzmaurice. 2016. Retrofab: A design tool for retrofitting physical interfaces using actuators, sensors and 3d printing. In Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems. 409–419.

Digital Library

[36]

Rohit Ramesh, Richard Lin, Antonio Iannopollo, Alberto Sangiovanni-Vincentelli, Björn Hartmann, and Prabal Dutta. 2017. Turning coders into makers: the promise of embedded design generation. In Proceedings of the 1st Annual ACM Symposium on Computational Fabrication. ACM, 4.

Digital Library

[37]

Valkyrie Savage, Sean Follmer, Jingyi Li, and Björn Hartmann. 2015. Makers’ Marks: Physical markup for designing and fabricating functional objects. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology. 103–108.

Digital Library

[38]

Sunil Saxena and HV Kwon. 2012. Tizen architecture. In Tizen Developer Conference, San Francisco, California.

[39]

Swoop. 2015. A Python Library for Eagle PCB Design Files. https://github.com/NVSL/Swoop/

[40]

Nest Learning Thermostat. 2011. v1. 0 [Product Brochure]. Nest Labs, plus publication date addendum(2011). https://nest.com/

[41]

Donald Thomas and Philip Moorby. 2008. The Verilog® Hardware Description Language. Springer Science & Business Media.

[42]

[42] TinkerCad Circuits.2020. https://www.tinkercad.com/learn/circuits

[43]

Blase Ur, Elyse McManus, Melwyn Pak Yong Ho, and Michael L. Littman. 2014. Practical Trigger-action Programming in the Smart Home. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (Toronto, Ontario, Canada) (CHI ’14). ACM, New York, NY, USA, 803–812. https://doi.org/10.1145/2556288.2557420

Digital Library

[44]

Nicolas Villar, James Scott, Steve Hodges, Kerry Hammil, and Colin Miller. 2012. . NET gadgeteer: a platform for custom devices. In International Conference on Pervasive Computing. Springer, 216–233.

Digital Library

[45]

Webcomponents. 2020. Specifications. https://www.webcomponents.org/specs

[46]

[46] YouTube Player API Reference for iframe Embeds - Google Developers.2020. https://developers.google.com/youtube/iframe_api_reference

Cited By

Lin RRamesh RPandhare PTay KDutta PHartmann BMehta A(2024)Design Space Exploration for Board-level Circuits: Exploring Alternatives in Component-based DesignProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642009(1-14)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642009
Chattoraj ALin RMartinez DMehta A(2024)A Cross-domain, Computational Robot Design Flow from Morphology to Fabrication2024 IEEE 20th International Conference on Automation Science and Engineering (CASE)10.1109/CASE59546.2024.10711390(4012-4019)Online publication date: 28-Aug-2024
https://doi.org/10.1109/CASE59546.2024.10711390
Hartley KFinney JHodges SDe Halleux PDevine JD'Amone G(2023)MakeDevice: Evolving Devices Beyond the Prototype with JacdacProceedings of the Seventeenth International Conference on Tangible, Embedded, and Embodied Interaction10.1145/3569009.3573106(1-7)Online publication date: 26-Feb-2023
https://dl.acm.org/doi/10.1145/3569009.3573106
Show More Cited By

Index Terms

Appliancizer: Transforming Web Pages into Electronic Devices
1. Human-centered computing
  1. Human computer interaction (HCI)
    1. Interaction paradigms
  2. Interaction design
    1. Interaction design process and methods
      1. Interface design prototyping
2. Software and its engineering

Index terms have been assigned to the content through auto-classification.

Recommendations

Appliancizer: Transforming Web Pages into Electronic Gadgets
UIST '20 Adjunct: Adjunct Proceedings of the 33rd Annual ACM Symposium on User Interface Software and Technology

Making electronic gadgets that meet today's consumer standards has become a difficult task. Electronic gadgets are expected to have displays with visually appealing interfaces and, at the same time, be physically and screen-interactive, making the ...
Movial IXS mobile internet device
MobileHCI '08: Proceedings of the 10th international conference on Human computer interaction with mobile devices and services

In recent years device manufacturers have been introducing so called Mobile Internet Devices (MIDs) at an increasing rate. The aim of these commonly touch screen based devices is not to be mobile devices' "jacks-of-all-trades", but to offer the best ...
Mobile Web-Based System for Remote-Controlled Electronic Devices and Smart Objects

Nowadays there are many intelligent electronic devices in the everyday environments: appliances, industrial machinery, devices for service providers in the cities, etc. These electronic devices usually communicate with other devices and people in order ...

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

CHI '21: Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems

May 2021

10862 pages

ISBN:9781450380966

DOI:10.1145/3411764

General Chairs:
Yoshifumi Kitamura
Tohoku University, Japan
,
Aaron Quigley
University of New South Wales, Australia
,
Program Chairs:
Katherine Isbister
University of California Santa Cruz, USA
,
Takeo Igarashi
The University of Tokyo, Japan
,
Publications Chairs:
Pernille Bjørn
University of Copenhagen, Denmark
,
Steven Drucker
Microsoft Research, USA

Copyright © 2021 Owner/Author.

This work is licensed under a Creative Commons Attribution International 4.0 License.

Sponsors

SIGCHI: ACM Special Interest Group on Computer-Human Interaction

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 07 May 2021

Check for updates

Author Tags

Qualifiers

Research-article
Research
Refereed limited

Conference

CHI '21

Sponsor:

SIGCHI

CHI '21: CHI Conference on Human Factors in Computing Systems

May 8 - 13, 2021

Yokohama, Japan

Acceptance Rates

Overall Acceptance Rate 6,199 of 26,314 submissions, 24%

Upcoming Conference

CHI 2025

Sponsor:
sigchi

ACM CHI Conference on Human Factors in Computing Systems

April 26 - May 1, 2025

Yokohama , Japan

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

4
Total Citations
View Citations
648
Total Downloads

Downloads (Last 12 months)150
Downloads (Last 6 weeks)25

Reflects downloads up to 25 Jan 2025

Other Metrics

View Author Metrics

Citations

Cited By

Lin RRamesh RPandhare PTay KDutta PHartmann BMehta A(2024)Design Space Exploration for Board-level Circuits: Exploring Alternatives in Component-based DesignProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642009(1-14)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642009
Chattoraj ALin RMartinez DMehta A(2024)A Cross-domain, Computational Robot Design Flow from Morphology to Fabrication2024 IEEE 20th International Conference on Automation Science and Engineering (CASE)10.1109/CASE59546.2024.10711390(4012-4019)Online publication date: 28-Aug-2024
https://doi.org/10.1109/CASE59546.2024.10711390
Hartley KFinney JHodges SDe Halleux PDevine JD'Amone G(2023)MakeDevice: Evolving Devices Beyond the Prototype with JacdacProceedings of the Seventeenth International Conference on Tangible, Embedded, and Embodied Interaction10.1145/3569009.3573106(1-7)Online publication date: 26-Feb-2023
https://dl.acm.org/doi/10.1145/3569009.3573106
Yang SGao ZHadi Mogavi RHui PBraud T(2023)Tangible Web: An Interactive Immersion Virtual Reality Creativity System that Travels Across RealityProceedings of the ACM Web Conference 202310.1145/3543507.3587432(3915-3922)Online publication date: 30-Apr-2023
https://dl.acm.org/doi/10.1145/3543507.3587432

View Options

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

HTML Format

View this article in HTML Format.

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

Figures

Tables

Media

View Table of Conten