Light up your life with Liferay and Philips Hue

On October 6, 2017 my colleague Sebastiaan and I held a presentation at Liferay DevCon about a cool integration the COIN team made. We were looking for a fun and exciting Internet of Things integration in Liferay. After a fruitful brainstorm, we decided to use Philips Hue. Another couple of brainstorms later, we formed the actual idea.

ACA Light Travel

The setup was to create an imaginary travel agency, named ACA Light Travel, that wants to provide the ultimate personalized experience to its customers. Potential travelers can browse through all available destinations by visiting a kiosk tailor-made for this travel agency. The nice thing about this kiosk is that it's equipped with contextual lighting. While the customer browses the website, the bulbs and LEDs in the kiosk will recognize which kind of destinations he or she is mostly interested in, and adapt their lighting accordingly.

But what is Philips Hue?

Hue is a great product line of Philips that consists of several types of lights, light bulbs, LED strips, ... They call it "Personal Wireless Lighting" and it's a stepping stone towards smart lighting.

Philips Hue

The line is based around a central unit called the bridge, which you need to plug into your own network using an ethernet cable. The bridge will then communicate wirelessly with the light bulbs, LEDs and other components in your network. You can turn the lights on or off, dim them, change the colors, perform some effects, etc. By grouping bulbs together, you don't even need to direct them individually anymore. All this can be done programmatically based on timers and events for instance. There really are plenty of options.

Liferay meets Hue

Liferay DXP can communicate with the Philips Hue system through a REST API that the people from Philips Hue provide. If you want to create something yourself, you can just go to the Philips Hue Developer Program website, download this API in two jars and start your own development.

Liferay meets Hue

ACA Light Travel

So, for our travel agency we used the Audience Targeting module of Liferay DXP and defined 5 different user segments. One segment for every type of holiday destination: sunny holidays, adventurous trips, city trips, cruises and winter holidays.

ACA Light Travel

All destinations on the site, which are plain web content articles, are categorized as one or more of these segments. Each time a visitor takes a look at the details of a certain destination, the system increments a counter for the corresponding segment. This is a by-default available rule in Audience Targeting.

Counter

We also wrote a custom Audience Targeting rule. This rule determines that the user belongs to the segment that corresponds with the highest counter. On a first visit, the user randomly sees all of the articles. When this user clicks on an article to look at the details of a city trip destination, the Audience Targeting rule increments the counter corresponding to that segment. Through the API, Liferay DXP communicates to the Philips Hue bridge that the lights need to turn red, because the user now belongs to that user segment.

User Segmentation

To actually control the lights, we have written a page listener in Liferay. With each page load, it will identify the segment that the user is in and change the lights to the corresponding color by calling the Philips Hue API. Upon a next visit to the homepage, the user will first see the destinations that match the "city trip" user segment, which is the segment that the user belongs to. Of course, it's possible that a customer liked city trip destinations before, but is more interested in sunny vacations now. In this case, he or she will move from the "city trip" segment to the "sunny" segment after enough clicks.

Under the hood

We implemented this project by making use of version 1.20 of the Hue API. The code is subject to change according to updates in the API.

Now that you know what we created, lets take a look at the how. As mentioned before, we created two custom modules. One is a custom Audience Targeting rule that determines that the user belongs to the segment that corresponds with the highest counter. The other is a page listener that identifies the segment the user is in on each page load and changes the lights into the corresponding color. Next to these modules, we also implemented the usual plugins and components. There are several portlets to show the suggested content items and two service modules to minimize the duplication of code. 

OSGi Bundles

Hue Service

This OSGi bundle consists of just one service that contains the logic to control the Hue lights. This is the only implementation in the project that actually holds the specific Hue API calls. Upon activating the bundle, a connection is made to the Hue Bridge by using the fixed IP and UserName we had set up. The service provides the possibility to toggle the lights on/off, change the brightness, set the color and start or stop blinking the lights. When you deactivate the bundle, you terminate the connection to the Hue Bridge.

User Segment Service

This bundle is the connection of our portlets to the Audience Targeting functionality of Liferay DXP. It contains all business logic required for our portlets to provide the desired filtering and segmented content.

Hue Page Listener

This is the plugin that determines the segment that the user belongs to after each page load and communicates to the bridge to change the color of the lights. It will only do this when the user is part of just one user segment. The plugin retrieves the required color from the description of the segment that the user currently belongs to.

Score Points Maximum Rule

The custom Audience Targeting Rule determines to which segment the user currently belongs by calculating the highest counter. The counter is set by the default available Score Point rule in Liferay DXP.

Promotion Listener

When a JournalArticle is categorized as a promotion, the lights in the kiosk will start blinking. This visual effect informs the user that it's a special kind of destination.

Suggestions Portlet

This is a portlet bundle that contains three different portlets, one for each type of filtering.

  • YourSelectionSuggestionsPortlet: a portlet that shows all JournalArticles categorized by the segment that the user currently belongs to.
  • OtherSuggestionsPortlet: shows all JournalArticles that do not belong to the segment that the user currently belongs to.
  • PromotionsSuggestionsPortlet: this portlet first shows the promotions for segments that the user belongs to, supplemented with all other promotions available.

Conclusion

Audience targeting is one of the most powerful features in Liferay DXP. If implemented the right way, it can really learn what the user tries to accomplish and steer him or her in the right direction. It can even persuade the user to perform a transaction. Liferay, as an open platform, can really integrate with anything. Connecting the Audience Targeting module of Liferay to the Philips Hue system wasn't too hard thanks to the existing API. Just imagine which other IoT integrations are possible. The sky is the limit!

DXP and Hue

Resources

You can find the code for the ACA Light Travel website on our public Bitbucket.

The presentation was recorded at Liferay DevCon and is published on Youtube.

The slides that go with the presentation are also available through Liferay.

Blogs
Hi Koen Olaerts , appreciated your a amazing , really nice blogs ,such wonder full Explained with a graphic images , Thanks ! for shared , keep doing good luck !
Thanks Koen - Very thought provoking! Could you extend the idea of mapping web pages to IOT actions....to manufacturing environments? For example, the plant supervisor goes to different pages on his tablet, and different parts of the factory floor light up?
Hello Adam, what a cool idea!
I don't see any issue with what you want to accomplish. You'll only need some infrastructure to light up the different floors. E.g. Philips Hue allows you to organize bulbs together in groups and you can control these groups separately through the REST API. Check out their developer documents on how to achieve this.

You also don't even need Audience Targeting for your requirement. You can just categorize the set of pages (or maybe even a site) and use a Page Listener to read that category. With that piece of information you can control the lights any way you want!

Hope I have provided some helpful information? If not or if you have any more questions, just come back to me.

Regards,

Koen