Transforming web pages into electronic devices
A UIST2020 Demo
Electronic devices play an essential role in our modern society. From the automation of many daily tasks, such as thermostats that maintain a comfortable temperature in our home, to multimedia entertainment devices. With the arrival of devices such as smartphones, the interacting expectation with electronic devices has changed. High-end electronic devices are now expected to be able to be interfaced not only physically but with a combination of both physical and a highly interactive digital display. Leading to the growing popularity of devices with mixed digital and tangible interfaces. However, this growing demand has also risen the bar to develop these kind of electronic devices, even though the accessibility to manufacturing and assembly services has improved. Making the gap between having access to technology and the skills and knowledge required to build these devices larger.
To bridge the gap and reduce the skills required to create electronic devices with mixed digital and tangible interfaces, we have created Appliancizer. Appliancizer (available online at www.appliancizer.com) is a tool that allows you to generate electronic devices from a web user interface by transforming the HTML elements within the web page from a digital interaction to a tangible one. The transformation of the interaction is achieved by creating a mapping table between the digital and tangible interfaces that is created at the binary data level. For example, electronic components (e.g., temperature sensors, acceleration sensors, etc.) that produce a range of values are matched with HTML range sliders, as they both produce a range of values to the application. Similarly, HTML text elements are combined with LEDs or other electronic components that convey output information to the user.
By creating mapping at the graphical interface level, Appliancizer also allows the electronic device PCB to be automatically generated, simplifying and accelerating development. To create an electronic device with this tool, users simply load a web page into Appliancizer, select which HTML elements to transform by moving them to a virtual PCB area, and finally the tool will generate the Gerber files needed to send the PCB for manufacturing.
In the following example we show how you can create a smart thermostat with Appliancizer. A simulated web page version of a smart thermostat must first be developed. A pre-loaded example is already available by clicking (“Add web page” -> “Demos” -> “Temp controller”).
Next, by clicking “Inject” the web page will be loaded into the tool and will highlight with a green dotted boarded the HTML elements which interface can be transformed from digital to tangible.
The available HTML elements can then simply be dragged and dropped onto a virtual PCB where the corresponding electrical components can be selected, according to the binary interface table. The resulting view is on the left the HTML elements that will be displayed to the user and can be interactively digitally, and on the right, the HTML elements that will interact with the user physically.
A simulation mode, available by clicking “RUN”, allows the user to interact with the web application by digitally interacting with the elements of the virtual PCB. Finally, by clicking “BUILD”, the PCB is generated automatically. In this process, the different electrical component schematic modules are merged together to create a complete schematic, the PCB which is later auto-routed is generated as well.
The resulting Gerber files can be sent to PCB fabrication manufacturers (e.g, JLCPCB) without the need for any modifications to the files. After mounting the PCB to an embedded computing device, such as a Raspberry Pi, and connecting an HDMI display, the smart thermostat application can be launched. Appliancizer also provides an operating system that users can use to navigate to the web page application integrated with all the required low-level code, which the tool also generates. Since the digital and tangible elements are created to match, the web application can be run without the need to modify its source code.
Although the final device featured above does not look like an end product, this technique can potentially be used with compute modules (e.g. Raspberry Compute Module 4), where the compute system is abstracted and only the pin headers remain to attach a user PCB design.
Appliancizer greatly reduces the overall complexity and design process of electronic devices that require mixed digital interfaces. From loading the web page to generating the Gerber files, it took less than 15 minutes. This acceleration in development can potentially allow users to react faster to emergency situations where an electronic device is urgently needed. At the same time, with tools like Appliancizer, future web developers may have the potential to create new sophisticated electronic devices and compete in tandem with electronic devices made by large companies (e.g., Google Nest).
Citation for this Demo Paper
Jorge Garza, Devon J. Merrill, and Steven Swanson. 2020. Appliancizer: Transforming Web Pages into Electronic Gadgets. In Adjunct Publication of the 33rd Annual ACM Symposium on User Interface Software and Technology (UIST ’20 Adjunct). Video
