The field of IoT includes a category called Smart Home, Smart Office. For example, you all may have heard talk of door locks that open and close automatically upon approach, or talk of Apple’s HomeKit.
Talk of the technologies in this field may be of devices approaching hardware, or merely of using Apple’s standards via iOS SDK, so many web engineers are prone to feel somewhat out of the loop.
On this occasion, we tried to use open standard web technology as far as possible to create an environment that enables new experiences in the field.
The keys were the physical web, web Bluetooth, and web components.
Information/Service Hooks Using the Physical Web
Firstly, the physical web is the core of the environment on this occasion.
The Physical Web is technology that uses beacons.
Using a beacon that transmits around a URL now enables the necessary information such as bus stop timetables and restaurant menus, for example, to be checked using a handheld smartphone.
(1) Pick up URL transmitted by the beacon
(2) Display information from the URL
Department store floor layouts
Event hall information
Bus stop timetables
Other desired time and place information
In this way, the conversation to date has become about how the increase in information and service hooks using the physical web will lead to a world in which “now the necessary information is at our fingertips“.
At recent Google events and elsewhere, the phrase “web everywhere” has started to be used, and in July, the Eddystone beacon specifications were formally announced, and the specifications used by the physical web were incorporated into them as the Eddystone-URL.
More details have already been written and announced, so check the following.
So, the current question is what can’t this technology be used for in the home?
For example, how about home appliances such as TVs and ACs functioning as beacons?
The environment used on this occasion is described below.
As there was no way to create home appliances from scratch, on this occasion, eye-catching appliances such as TVs and ACs were prepared using an Android tablet.
In reality, this application merely switches YouTube pages.
The movie pages displayed using the on-screen channel buttons switch.
This app is like an AC controller.
The current air temperature is displayed. The set temperature can also be edited.
Current air temperature (fluctuates suitably using a timer)
Set temperature (Increase or decrease using the left and right buttons)
(The repository of apps in current use, including these, will be introduced later.)
- Acts as a Physical Web beacon (Eddystone-URL) to send the URL
- Supplies BLE service to enable external remote control operations
These devices are as described below, so upon approach, they are displayed as such on a physical web-compatible browser.
(1) Device acts as a beacon to send the URLs
(2) URLs are picked up and listed
Opening a URL in a web browser displays the following HTML content.
The design resembles that of a TV remote.
Tap to display the URL in the browser
This page is a web app that uses Bluetooth, and can operate the devices in front of you without any other changes.
Write to characteristics
Press the numbered buttons to change the (simulated) TV channels
Let’s also look at the (simulated) AC.
Raise or lower (write) the set temperature from the controller
The current air temperature is displayed, and changing the value using the app operates in tandem with (i.e., notifies) the controller
Monitoring the current air temperature
Changing the set temperature
In this way,
- The following experiences are possible using a combination of a physical web browser installed on a smartphone
- physical web (Eddystone-URL) beacons, and home appliances equipped with BLE remote control services
- The controllers for nearby home appliances are listed on the smartphone (physical web browser) in the home
- Appliances can be operated from the smartphone as is
The actual implementation progress is here:
Reading this, you might think that in future, Android and MacOSX will be supported, but currently, priority is being given to preparing the WebOS browsers such as FirefoxOS and Chromebook.
In other words, their use is similar to that of Bluetooth API for native iOS and Android apps, so they are already in demand.
Certainly, there is demand for these native app functions, but on the other hand, until now it was difficult to imagine the desired Bluetooth and NFC scenes on a regular browser rather than WebOS.
As actually experienced in this demo, this changes the conversation, which hitherto has assumed that people have a standard physical web browser.
If it is possible to combine the physical web and Web Bluetooth (or other nearby communications such as NFC or Wifi Aware), the application of web technology to IoT fields will greatly extend the possibilities.
As described above, however, unfortunately, Web Bluetooth cannot currently be used with iOS/Android’s Safari or Chrome.
Remote control HTML for simulated TV
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="01" display="01" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="02" display="02" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="03" display="03" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="04" display="04" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="05" display="05" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="06" display="06" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="07" display="07" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="08" display="08" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="09" display="09" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="10" display="10" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="11" display="11" />
<ble-setter uuid="06AFE76A-7859-4D78-B918-035AA960ED56" data="12" display="12" />
Let’s check the actually rendered screen once again.
Remote control HTML for simulated AC
<ble-observer uuid="573B455B-6E54-4BD4-B63A-8C5DF4713746" default="-">
<ble-setter uuid="5D0FEA1B-A2FC-4E41-9D85-FC76048C8CE1" data="0" display="<" />
<ble-observer uuid="02A7DBEE-7AE0-4CDB-A3CE-A2F3E6944C90" default="-" />
<ble-setter uuid="5D0FEA1B-A2FC-4E41-9D85-FC76048C8CE1" data="1" display=">" />
Let’s also check this screen.
Even if you are unaware of BLE, looking at a comparison to the actually rendered screen enables you to immediately intuit the meaning of the tags.
They use custom web component elements created using Polymer.
As shown below, the created components are read using HTML Imports.
<link rel="import" href="ble-components.html">
Specific BLE operations are hidden inside these components.
If using native BLE APIs as is, the developers are somewhat expert in the BLE specifications, and make full use of complex APIs in their design and installation. These low-level APIs enable various applications, and the API service life is also long. This also covers the latest web-extensible components.
Meanwhile, for developers, the cost of learning low-layer APIs is high, and the code is also redundant, so there are cases of hitting a wall when spreading the technology. Consequently, if the applications are limited, they can be expected to play the role of an accelerant in the spread of the technology for libraries, etc., that comprise single APIs that match these conditions. (jQuery has good Web Extensible examples.)
That is to say, despite the hope for the possibilities from APIs such as Web Bluetooth linked to the Physical Web, these current Web Components were prepared on the assumption not of stripping them down for use, but so that the designers, by carefully considering the requirements, will try dropping them into a single interface that ends up being created by the controller.
The Web Components explanation cites good examples of the components for visually stylish music system devices as described below for easy understanding, but it is good that even their application to remote controls here resembles the raw materials that are easy to understand, such as switches and knobs, etc. On this occasion only simple products that satisfy functionality were prepared, but we would like to increase their variations.
Audio component example
That is to say, they are also interesting just as examples that give a sense of the possibilities for Web Components.
We prepared tools (Web Components) to easily achieve the logic (Physical Web + Web Bluetooth) for realizing our new vision for a Web SmartHome, and a demonstration environment to enable the actual experience of this vision.
The code for the samples used on this occasion are all described below.
- Project page: https://github.com/websmarthome
- Physical web browser: https://github.com/websmarthome/around
- WebView applications installed on the BLE/JS bridge: https://github.com/websmarthome/rc-browser
- WebComponents pages: https://github.com/websmarthome/ble-components-demo
I would also like us to extend a hand to feedback to the standardization community and the supply of OSS while continuing our research. Thank you.