lyokato here.

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.

Physical Web

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
Restaurant menus
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.

IoT for Web Engineers: The Future Opened by the Physical Web (gihyo.jp Web serialization)

Applications to Physical Web Technologies and Services (March 2015 W3C/Keio Announcement)

“Putting the Real World Online”: The “Physical Web” and “Eddystone” in Detail! (HTML5 Exports.jp Interview)

The World of the Physical Web Starts with Eddystone (August 201: Leading the Way to W3C TPAC 2015 Announcement)

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?

Demo

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.

TV simulation

In reality, this application merely switches YouTube pages.
The movie pages displayed using the on-screen channel buttons switch.

Channel selection
Screen switching

AC simulation

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.)

  1. Acts as a Physical Web beacon (Eddystone-URL) to send the URL
  2. 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.

BLE
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
  1. The controllers for nearby home appliances are listed on the smartphone (physical web browser) in the home
  2. Appliances can be operated from the smartphone as is

Web Bluetooth

So, wouldn’t the ideal web developer be asked “Can I connect to Bluetooth from a web app (JavaScript)?”

In truth, there are standards for using Bluetooth functions from the web via JavaScript, and there is a community group called Web Bluetooth on W3C.

https://github.com/WebBluetoothCG/web-bluetooth

The actual implementation progress is here:

https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md

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.

Consequently, this demo readied WebView apps equipped with the minimum BLE bridge, which was then operated from JavaScript.

Web Components

As described above, a bridge that uses Android’s native BLE API with JavaScript was prepared, but in reality, when the major points of the HTML source for the web page prepared on this occasion are extracted, they are as described below, and comprise HTML almost exclusively.

Remote control HTML for simulated TV

Let’s check the actually rendered screen once again.

Remote control HTML for simulated AC

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.

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.

Component Visuals

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

audioコンポーネントの例

That is to say, they are also interesting just as examples that give a sense of the possibilities for Web Components.

Conclusion

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.

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.