 Okay, it's time to start. So, hello everyone. Nice to meet you here. I'm going to talk about a couple of related projects surrounding Drupal-powered digital signage at the YMCA. A few words about me. My name is Dmitry Drozdik. I'm a technical lead in FFW. FFW is a global digital agency with over 400 people in 13 countries that was formed in 2015 by the merger of Blynk Reaction and ProPeople. I have over nine years of experience in web development participating in Drupal community as developer, as speaker on local conferences, and since this year on Drupal cons. I like different tech things, especially things that make us closer to the internet of things. And today I'm going to talk about one of the areas of implementation internet of things. So, briefly, our agenda. I will describe what digital signage is and where you can find it. Then I'm going to give a little bit of information about history and the background of the project, the major goals and objectives, and talk a bit about design and content and where our science should be displayed. Also, I will talk about hardware and software components we are using or tried to use and finally how it all comes together. So, let's get started. So, what digital signage is? Digital signage is a sub-segment of signage. This place for digital signage usually use technologies such as LCD led to display content such as images, video, streaming media, web pages, and maybe weather data or menu in restaurants and coffee shops. And I think most people recognize this. Today we can say that this type of signage is probably was the first and the earliest forms of digital signage. The term digital signage was first coined in early 1992 when a network of video walls in United Kingdom shopping centers was named as a digital signage by a security guard who did not understand the term video wall. And after that the company realized that this term is really cool and they started to use it widely. And today, this example is probably the most often used case of digital signage. I suppose everybody here at least once could see such a screen. With big screens we can show much more information in comparison to first forms of digital signage and we have seen digital signage used elsewhere often. For example, rotating slideshow, type advertisement or billboards. We've seen this in public transportation with arrival time and status of public transportation. Of course, with advertisement, what shampoo is the best or advertisement of sneakers that says you are not you when you're hungry. Of course, marketing information and stores you even can see contextual dynamic information that maybe highlights different products of different areas of the store based on the amount of inventory. This is just another example of usage digital signage in retail stores. And you know, one of the areas of implementation of digital signage is restaurants and coffee shops. Whereas they display menus and things like that. Such a display can has a lot of content that can change frequently. There are many examples of using digital signage in airports, especially in those places where people have to walk more than two minutes. Often use, you may see digital signage used in offices to report on performance and other sort of statistics and maybe passive information like weather. Also healthcare type situation where it provides context relevant information based on location or time for instance emergency information or information about visitor hours as opposite to other hours. And this is our real life. Here is a very good example of things that we build because we can, not because we should. By the way, how many people have been in New York? Okay, good. You probably know that Times Square is one of the world's most visited places. But did you know that Times Square NASDAQ sign is the largest digital sign in the world? More than 11 meters high and cost 37 million. And since everybody now knows what digital signage is, before starting to talk about solution we built, I want to show you a pretty small demo how it works. So this is me reflecting on the screen at home. This is just example of displaying information for the YMCA class at Zara Branch. Yeah, it works. Yeah, the last one. So now a few words about history and the background of the project. Is anyone here familiar with YMCA? Okay, good. For others, YMCA acronym stands for Young's Man-Christian Associations. It was founded on 6th of June in 1844 by George Williams in London and aims to put Christian principles into practice by development a healthy body, mind, and spirit. And there are 874 associations across the United States so that you could imagine that each of the 50 United States States has approximately 17 associations. More than 22 million people engage annually in United States. But also YMCA exists in 119 countries across the world. On the map you can see that they are spread across the world. Even some countries in Africa have their own associations. And as I already said, YMCA was founded in London in 1844 by George Williams. After seven years, the first YMCA was created in United States in Boston. And in the first 12 years, it's spread across the United States and much of Europe. YMCA's always were innovative and socially active organization from the beginning. They have invented games that are very popular nowadays like basketball and volleyball. And another really important thing to understand is when we started work with multiple YMCA's, we discovered how they are different and at the same time are really similar. It could have a single building with a single branch or it could have more over 20 buildings. Some of these YMCA's like YMCA of great admin cities has a very centralized structure who with two main offices, while other YMCA's are run from the individual branches. There are a lot of similarities between different YMCA associations. I have already mentioned that YMCA invented popular games and also has been involved with a lot of things in the United States history in particular. So in addition to things like basketball and volleyball, the YMCA also involved with other initiatives, even not related to sport. Currently, we are working on with a group of YMCA's building a new initiative called OpenY. OpenY is a Drupal distribution and open source digital platform for marketing and e-commerce. And the main idea is a collaboration with other YMCA's and creating community that can use OpenY and add new features, fix bugs so that other YMCA could receive updates for free. And we are working with YMCA of great admin cities. This is one of the largest YMCA's in United States. It has 26 branches, 17 camps and over a quarter of million members. This association has been built recently, just five years ago, when two different branches, two different associations joined together and we are working with them for a few years now and we built a website for them and that website was the starting point of creating OpenY. But one of the larger engagements that we are working on with them is around the branch of the future, which is the new downtown branch that they are going to open in January 2018. And the image you can see, this building was a mall and currently it does not look like this but because they are under construction. And this branch, they want to apply some digital initiatives and about one of them I'm talking today. So goals and objectives. Two projects that I'm talking about today as part of the branch of the future are digital signage and room entry screens. And the real purpose of this, to use these screens to display information to YMCA branches, to YMCA members who end the branch. And information should be relevant and up to date to the area where this place are located. The idea that this will be integrated with the OpenY platform, so content editor could have centralized place to manage contents of science and content of the website from the one area. And of course, with a little bit of configuration extend that to other branches as well. So the room entry screens. Just to give you a quick overview what these are. Each branch has fitness studios where some of these, some of them host free walking group, exercise classes every day. Each class has different times with different instructions. And the idea to provide most of the time what's going on in the class and what's coming up next. These screens will be placed near the door along with a plate which will have the number of the room and a braille code. And screens will be 22 inches each, so not very big. While digital signage, more for general information within the branch. That could be promotions, it could be health information of fitness tips, fitness challenges to get people to engage in the same sort of activities. Branch or association announcements, or maybe other type of advertising. It also can provide information about comments or games and something like that. And these screens will be placed on floors, on the front desk, and in other places across the branch where people have to walk from one room to another one. And screens will be 48 inches each, much bigger than screens for room entry screens. Now, I would like to say a couple of words about design and content which YMCA is going to use on their screens in branches. YMCA in the United States is possibly the most well-known brand, non-profit brand, and part of the reason for that is their strong brand standards. They have quite well-defined standards, identifying what font you can use or what colors. And using that, we came up with four different primary color schemes that fit within those standards and use it in different pots for different types of content. And we also identified three primary layouts that we are going to be using for both vertically and horizontally-oriented screens. And one full screen and one full screen with kind of a bar across the bottom. And the third, which is divided screen. So I'm just going to run through quickly a couple of our initial designs and concepts to give you an idea of the sort of things. So some examples of using different types of designs for room entry screens just another color scheme with a substitute instructor. And this concept varies current class and upcoming class. Announcements and upcoming events, different types of advertisement. There are some marketing materials as well. And a couple of renders to visualize design concepts. This one is about room entry screen with announcement when next class would be. And another one is digital signage with a promotional content. So now I would like to talk about components we use to build digital signage for YMCA and components you will need in case you're interested in building your own solution. For any digital signage solution, we need three main components. Of course, a display screen or a content displays software to manage content displayed on screens and a player or maybe a custom device to connect display screen with software. And two other important components like content itself and content editor or administrator. This could be one person or a group of person who prepare a content and schedule. And good content is very important for any digital signage. There are no strong requirements for display screen enough to have a simple TV screen with HDMI output such a screen could be used with an external custom device to cast data from the software. But based on how and where you use your screens they could be split into two types. The first type is commercial screens. They are very expensive designed especially for digital signage. The second type is consumer screens which we usually have at home. Main difference between commercial and consumer screens are warranty coverage, durability. Commercial screens are designed to work 24 hours per day. They have higher brightness and thin bezels. This is important thing for many cases. In case the screen has Android or another operation system such as smart TV then even custom device is unnecessary. But in our case we have to use commercial screens because warranty coverage and durability are important things for the YMCA. There are a lot of different tools to manage digital signage content. I won't talk about them right now. You can easily find them in the internet. I want to pay attention only on some requirements we had on our project. So the ability to use external content by pasting URL links, the ability to group screens and assign content to those groups easily, the ability to create schedule for different dates, support different layouts and to fly in mode of course. And after some research and investigation of different solutions and different platforms we made our choice on an online tool with a pretty suitable name called ScreenCloud. Whereas ScreenCloud is digital signage management software. This is a new quickly growing company. They were created less than three years ago and currently provides a really cool user interface to manage content of screens. And ScreenCloud works with a variety of devices and supports a variety of content like web links, video, audio, documents, social feeds, et cetera. And ScreenCloud allows simply create schedules for each screen and also group screens to assign one schedule to all of them. Oh, something went wrong, just a second. The next component is a player. Usually the player is an application which could be built on Android, iOS or other operation system. But in case Screen is not smart TV it requires a custom device. For instance such devices as Google Chrome Beat, Google Chromecast, Amazon Fire TV Stick or maybe Google Chrome Box and there are many others. Most of the companies providing software for managing digital signage content also provide their own devices. And those devices usually work only with their software and they cost much more than those I mentioned. And on the current stage we decided to use Google Chrome Beat because Chrome Beat turns a display with HDMI port into desktop variant of the Chromebook laptop which runs Google Chrome OS operation system. And this operation system primarily supports a single application web browser. There are by relying heavily on an internet connection for software functionality and data storage. And Google Chrome Beat is well supported by ScreenCloud. It was designed to work especially as a digital signage device. Has operation system on board, pretty easy to set up and the main and very important thing it supports remote management. But initially we've selected Google Chromecast and after some research and testing and usage we discovered that Chromecast is not particularly powerful and has minimal storage. This made us reconsider the choosing device and we've selected Chrome Beat. As you can see in comparison to Google Chromecast Chrome Beat has operation system on board, much more powerful processor and more memory. And very important thing as I said is remote management. And there is one interesting fact that half a year ago speaking at the DrupalCon Baltimore I mentioned that Chromecast could be changed to another device and months later we've changed it. So and the final component we have is the OpenWide distribution. The OpenWide this is a distribution built on Drupal 8 that uses Drupal 8 contributed modules and useful modules from YMCA partners such as personify integration, GroupExpro, online scheduling, mind, body, personal, training, management and many other features. I guess these names are saying nothing for you but about some of them I will say later in the details. Think the website of YMCA Grated Twin Cities has been built using OpenWide and our team already built an integration with third party services. We're used there architecture to use integration with third party services and OpenWide has been created in such a way that each integration or each feature could be enabled or disabled. It's a new word in Drupal 8 decoupled. So everything is decoupled and the solution for digital signage is built in the same way. So let's move to the next part where I will talk how we connected all components to each other. So an overall diagram of the architecture looks so, a content editor opens website to manage content and goes to the interface for managing a content of digital signage. Everything is available right from the website, no need to use external websites and remember 100 of credentials. And as already said, we use OpenWide distribution to integrate with third party services and to build user interface which will be easy to use. On the other hand, the website already has a configured connection with ScreenCloud which in turn has a connection with custom devices plugged in display screens. And the current YMCA Twin Cities website will be primarily used for creating and managing contents that will be displayed on various digital signs in the branch. This feature will be organized so that it can be reused by other branch locations as well as by the OpenWide platform in general. This will be a primary place where YMCA Twin Cities team manages all of the content that appear on digital signage and through many screens. And the website is already integrated with third party services like GroupExpro and Personify and this is the main benefit of creating an interface for managing screen content right from the website. So to manage schedules, YMCA of Greater Twin Cities uses GroupExpro. GroupExpro is a private web-based communication portal for group fitness programs and this service provides two ways of integration. One way is just the simple JavaScript that could be added to your page on the website. And another one is use their API which allows to pull data and use it on the website. And our team created a few layers of integration that gives us a lot of flexibility in use data from GroupEx. And another third party system which also has information about schedule is Personify. I won't talk about it a lot since this platform can take another hour of discussion. In brief, we pull data from Personify about paid activities and add them to the schedule on room entry screens. And in the future, we are going to add more data sources that could be used for room entry screens. And integration between these services is built in the next way. Firstly, our modules pull data for interdrupal where each element of the data creates its own entity. Since the schedule always should be up to date, the website stores information about future sessions. During import of information, we analyze the information received and create a new entity called Session which has its own set of fields and values from each entity of third party integration. And this new entity is absolutely independent and has its own managing interface and allows adding new items manually and overwrite already imported data. Also, beneath writing in case of any emergency, for example, if this session has been canceled or the instruction has been changed and there is no way to quickly change it in GroupX and wait when it will be updated on the Drupal site, we have just go to the website and update it there. And then, when we get information about current and all upcoming sessions, we can use that data for room entry screens and on the website as well. And now I'm going to say deeply how this works from technical perspective. So to build this solution, we have not used any unknown modules. Of course, the base for this is Drupal 8, content types, blocks, views, and a new module, layout discovery, added it in the version 8.4. We used only a few external modules and the key modules are penalizer and panels with its module inline panel editors, which provides an awesome interface for managing content from frontend with the possibility to change layouts and add different blocks for them. And on the Drupal site, we've created some custom entities which help us create our own schedule of content. We want to show on screens and manage it easily. First, and the key element of their architecture is a screen. Screen is kind of representation of the physical screen in the branch. And it's used to identify and manage screens by YMCA administrators. And each screen has some meta information like orientation, machine name, placement, nose, geoposition, and also it has references to fallback content, room entity and location. Fallback content in content, fallback content is a content that's used in case the screen does not have any content to show. And schedule consists of two entities. This is a schedule itself and schedule items where each schedule item has a status, time settings, and reference to the screen content. Schedule entity give the user the ability to visually arrange items within a schedule. And one of the schedule is created and already has some items to show, it could be assigned to a screen. And the final and very important piece of this architecture is screen content. Whereas screen content is a basic node with enabled penalizer by default. It allows to place different predefined blocks into the node, such blocks like promotional block, class schedule or announcement. About them I will take in a few minutes. And also penalizer allows changing layout of this content. So different layouts could be used and screen content give the YMCA team a view of what is being displayed on the screen at any given time. And to create layouts, we used a combination of built-in Drupal layout tools. Mostly this is layout discovery module and layout plugin added to the core already. And on the current stage, we created a limited number of layouts, landscape and portrait. And since the screens for room entry screens are not big, we needed to show information in a way that it will be easily readable. So all room entry screens will have only information about current class and upcoming class in a full view. For digital signage, we have enough space to place because screens are much bigger. And we defined two types of layouts, full width and two columns. And in addition of the two of the same layouts with the possibility to add a line of information at the bottom of the screen. For content blocks, we mainly use Drupal blocks with different settings. Some blocks for room entry screens to display schedule for a single room. For digital signage, we created promotional blocks with different predefined options and styles. And a couple of other blocks like free HTML block with announcements. Let's review each. So single room schedule, this is a dynamic block that displays the class scheduling information within a room. And this block can be placed in a full screen landscape layout. And this is the default block displayed on room entry screens. And YMCA team member is able to select from one of predefined color schemes that I said before we came up with four color schemes that change the background, font color, progress bar and other elements of the screens. And single room ticker, this is a dynamic block that displays the current class schedule in a specific room. When there is no active class, this block displays the upcoming class. The only customization available here is color scheme. YMCA team member will be able to change the color scheme based on one of the predefined combinations. Promotional block is one of the most difficult blocks in the list. This is a flexible content block that is used to display most of the promotional contents of digital signs. It can be placed into most of the layouts and this block could be reused by other screens and even branches. And this block provides a set of settings like background image, position of the background image on the screen, headline and subtitle, color schemes, text positions and other options. The next is free HTML block. In comparison to promotional block, it provides the freedom to use content editor like CK Editor. In this block, YMCA content editor can upload image on the background and using CK Editor place any content in any format using available plugins. The static ticker block is used to display secondary information on digital signs and through many screens. It can only be placed on layouts which supports ticker bar. For example, it can be used to display promotional messages and fitness tips. In this block, content editors are able to customize the color scheme of this block. It affects the background color, icon color and font and link colors as well. And the last is announcements. This is a static content block that's more applicable to room entry screens. It can only be placed in a full screen layout. This content block can be used to display when there is special event in the room or the room is under maintenance or something like this. And YMCA team member is able to specify which color scheme which will affect the background, the color of the icon, change icon and of course specify a message. And also Open Vi provides a way of creating promotional blocks and banners which are very loved by Twin Cities team and in our plans support the possibility to leverage those promotional blocks and banners with minimal changes in architecture. Now a few screenshots of user interface from the admin panel. We added a new menu item called digital signage and this menu item provides a set of pages to manage screen contents. Classes sessions imported from group, extent, personify, schedule, schedule items and screens. Also each existing entity or integration has a set of own settings and those are placed in the settings section. Screen content listing looks like a basic listing in admin panel created via views, nothing special. On this page content editor is able to quickly find different screen contents which are independent elements and add new if they want and after that use in the screen schedule. Screens listing is also a listing created by views but there is one important thing here. This is a button called manage schedule and this button allows to manage screen schedule itself. When content editor opens page for managing screen schedule, content editor see this page where on the left side a timeline is located. Timeline allows you to see what is displayed on the screen at selected time. You can see the result on the right side right after selecting the time. Also at the bottom there is a calendar that allows you to preview and manage content for different days and this big gray area is a fallback content where each screen has by default own fallback content and above there is a list of schedule items on my example two of them with different colors. One is enabled and published and another one is under like a draft status. Also on the right side everything is displayed what users and members could see in the branch and at the bottom there is a small area where you can see some buttons like change layout, manage content and edit. This is a tool provided by penalizer and inline panel editors. And you can see this link at the bottom to YouTube video and you can use it to see how everything works. I made a three minutes video to explain how creating content and managing content works in admin panel. And I already mentioned that screen cloud supports offline mode but this is mostly related to the content uploaded to screen cloud itself and since we provide an interface of managing content right from the Drupal site we have to think about offline mode as well and for this we created a logic that loads content that will be displayed on the screen during a day with the content that displays at the same... at the current time. So the device Chrome bit has everything to display for the whole day and we can be sure that screen will work even if content disappears and once content appears again the Chrome bit will send our quest to Drupal site and load in new content if there are any updates it will update the schedule on the front-end side, on the screen and screen will have a new schedule for the whole day. And the last brick of this architecture is screen cloud. I want to show you how to set up a connection between the website and screen cloud. So to configure screen cloud with Chrome bit we do some simple steps. You need to switch on TV and plug in Chrome bit then set up Chrome bit there are some instructions provided by Google then it installs screen cloud extension this is just extension like other extensions in Google browser on the screen appears a message registering a player then you need to register screen in screen cloud using code generated and displayed on the screen and after connecting with screen cloud displays a code like this and you need to enter that code in screen cloud interface and after that screen cloud will understand that this screen is connected and could be used then you need to configure content in screen cloud to use your interface and add it to the screen so in screen cloud we created a playlist with only one item this is a link to screen page on the website and you may ask why only one link because we provide an interface on the Drupal site but in case of any issues with the Drupal site content editor can open screen cloud and add content to screen cloud itself in case if there are some issues on the Drupal site there is no issues on the screen cloud side and that's done you will see content on your screen but there is always but since this solution consists of many parts it depends on the internet, casting device, electricity and other things each part of the solution can stop work or maybe can start work in a way not compatible with other parts of the solution we collected all possible technical concerns and prepared a list of recommendations of what to do in case something went wrong so such issues can be issues with power outage maybe issues with casting device with internet connection or maybe DNS configuration in the branch or maybe issues with third party integration and eventually using this combination of components we get these benefits it's a flexible solution widely available hardware all elements are independent and could be changed anytime for example there is a way to change Chrome bit to much more powerful device or maybe change screen to a new screen seamless editing experience from the website easy to use available anytime and anywhere and there only need one time setup for adding contents outside of the open wide and of course it's open source code when the solution will be ready it will be part of the open wide distribution and will be published on the Drupal org so the main idea that we are working on right now is to make it a little bit independent of open wide to make it possible to use for other people and the second demo that shows how room entry screen works again that's me on the screen so you can see that content speed up in approximately 40 times to quickly show you how it works so between sessions we can place any content we want yeah that's it so thank you that's about it thank you very much please of course take the survey and leave your comments and if you are a contributor please join us on Friday and we have some time for questions do you have any? why are you using ScreenCloud in between and not just direct run the Drupal website on the stick yeah so ScreenCloud is a software online tool that allows to connect your custom device with their interface and using that interface we connect Drupal with ScreenCloud so just using the link from Drupal we push the data from Drupal to ScreenCloud and ScreenCloud push data to Chrome bit what does the HTML that ScreenCloud gets look like or is it just JSON stuff or images? I would answer like ScreenCloud like a proxy when we put the link on our website so JSON actually Chrome bit received from ScreenCloud the link the real link to our website but also it caches some content that appears from our website so in case of you want to show the real HTML that are received on the screen you can just open it in browser and you will see it because you know that Chrome OS it's just like a web browser and it works in the same way like Google Chrome you can install any extension and extension that is using on the Chrome bit also could be installed on your Google Chrome on the local machine any other questions? How does that offline mode work like you said it's got the content for the whole day are there different URLs for different times? Yeah, so as I said we built an interface that allowed to create a schedule on the Drupal site and place different schedule items where each schedule item contains only content that should be displayed in a specific time and those screen contents with a specific content for that time uploaded to Chrome bit using our JS application that we built for this solution so using it we just save the data on the Chrome bit storage and we use it in case of there is no connection with the internet or with the screen cloud but what screen cloud does is he provides the offline mode for the content uploaded to the screen cloud so as I said in case of there is some kind of issue on the Drupal site maybe there is no DNS or there is no connection with the Drupal site content editor can go to screen cloud interface and upload maybe like fallback content or maybe a screenshot of something like maybe message that something is wrong to be sure that something should be displayed on the screen all the time I understand the screen cloud is used for the fileback solution so if the Drupal site is down and then you can use it for caching as well so that's why you use screen cloud not directly pointing out the screen to the database not the Drupal endpoint but the problem is that you can't just make it directly request to Drupal site from the screen because in this case you have to go to the place where screen installed open Chrome bit then select the link then enter the right link and maybe a set of parameters and then make it in a QoSq mod that's available on the Chrome bit and then you need to restart your Chrome bit to be sure that QoSq mod will be enabled and after starting Google Chrome just lost the whole information that you entered actually my question is have you stressed those systems I mean how many screens can you actually handle and then how many people actually get yep sure I would say that we tested it with 40 screens and in the branch we are going to place approximately 50 screens for the MVP so once branch is started and published for everyone first people will be like real users that will use those screens and only after that we will be able to understand do we have any issues with the screens or not but yes we tested with 40 screens first thank you for a great presentation and I like your solution, great work so I guess I understood you developed this for a client what were the requirements from this client that other digital signage solutions on the market didn't meet so you had to develop yeah the main requirement is that they use third party services like GroupExpro and Personify and so third party services provides data about scheduled activities in their branches and we did not find any solution that could be used to integrate those third party services and since we are using OpenWide and everything already has been built in OpenWide to integrate with those third party services and also they want to leverage some content that is used on the side for the screens that would be the requirement why they have to use the same content editor area to manage screen content any other questions? okay thank you very much