Appliancizer allows you to transform web pages into functional electronic gadgets.
With our tool, the HTML elements of a web page can be transformed into physical components.
Allowing the same web page to physically interact with the real world without changing the web application source code. 4 00:00:22:460 --> 00:00:32,100 The conventional process of building electronic gadgets requires many complicated steps, making it time-consuming and challenging.
By matching the binary interface of the software components with the hardware components,
our tool allows to automate many of the steps, making development faster.
To build an electronic device with Applianceizer, a web page must first be added to our tool.
For this demonstration, we have created a video player with basic controls: A play and pause, next and previous buttons, and a progress bar.
After finishing testing the web application, we proceed to add the web page to our tool.
Our tool will highlight with a green dotted border all HTML elements that can be replaced by hardware components.
The available HTML elements can then be dragged and dropped onto a virtual PCB, shown on the right.
At drop, hardware components that match an interface similar to the dropped element will be displayed.
In this demo, we show an HTML button which interface perfectly matches with physical buttons, since both produce an ON or OFF input state.
Components that make the circuit work are also included, such as resistors.
HTML iframes can also be dropped to the virtual PCB as physical screens of different sizes.
HTML range sliders match any sensor that produces a range of values. A linear motorized potentiometer perfectly represents the soft progress bar.
Since both HTML elements and hardware components produce the same events, the simulation of the device physical interface is possible.
For example, a button press in both the soft and hardware versions will trigger the same onclick() event.
For fabrication, all the hardware parts required to assemble the PCB of the gadget are listed.
With one click, the PCB can be automatically generated from the virtual PCB, accelerating development.
The web app, integrated with all the hardware code required to interface with the selected hardware components
is also automatically generated, and can be accessed through a web link.
A custom OS image allows users to navigate and test the web applications, facilitating prototyping and development.
Here we show our device after fabrication running our custom OS image. It allows you to set up the WIFI and navigate to the web application.
At load, the HTML buttons and the progress bar are removed from the screen to the physical domain in a process we call hardening.
Now the same web page, without any modifications, runs in our automatically generated device with parts of its HTML DOM reacting to physical inputs.
Rapid prototyping of new devices is possible by adding or removing HTML elements off or into the virtual PCB.
Here we show the same video player device without the iframe screen element, allowing you to place the PCB on the back or at a different angle from the screen.
Other complex devices can quickly be prototyped and built. In this example, we show a thermostat made from a web page.
On this demo. The buttons allow you to set the target temperature.
An LED simulates when the cooling compressor is turned ON or OFF.
Finally, an HTML slider simulates the ambient temperature.
We now show the working thermostat.
The generated PCB sits on top of a Raspberry PI computing device, which we use in all our demos.
In the device, the target temperature is increased to be equal to the ambient temperature.
Applying heat with my finger increases the temperature measured by the sensor, turning on the LED.
You can test our tool at: www.appliancizer.com