 Welcome everyone to using Drupal to power the YMCA. I hope you've had a great Drupalcon so far if you haven't you have a very short period of time to Make up for lost time So Today we're going to talk about a couple of very closely related projects that we're working on that have been working on that are Surrounding Drupal power digital signage that we're producing for the YMCA I My name is Stuart Rose. I'm manager of strategic initiatives with FFW Hello everyone, my name is Dmitry Drosik. I'm tech lead in FFW and we're with the FFW is a dedicated nonprofit team FFW is a Global digital agency with over 400 people in 13 countries It was formed in 2015 by the merger of blink reaction and pro people so Today we're going to give a little bit of history of the YMCA and Digital signage in general and talk a little bit about You know the the major goals of these signs that we're producing then we're going to go into the different hardware and software components that we're using in these projects and talk a bit about Design and content where we're putting the signs what we're putting on the signs and how it all comes together so There are Really two projects that we're focusing on here and This these are what we're referring to as our digital signage project and our Rumentary screen project and They're They have a different slightly different goals, but they have an underlying architecture that is Largely similar so we're kind of talking about them both together and these are Part of two larger initiatives the first of these and I'm going to refer to these out of order on this is Open why which I think some of you may have heard of Dries referred to it in his opening keynote and We'll talk a little bit about Later and the other is the branch of the future which is an Initiative of the YMCA of the greater twin cities and we'll Go into a little more detail about that as well In terms of this project as Dmitri mentioned he's the technical lead and I'm manager of strategic initiatives In this case largely the account manager, but I work across all open wide projects So Want to go into a little bit of background about the YMCA in general The YMCA I think you know Probably everyone in the room is familiar with it. Otherwise, you may not be here But it is a large international organization There are almost 900 associations in the United States It's been ranked the fifth largest US charity works across the world and serves You know Somewhere around 60 million people worldwide. I think everyone is probably familiar with the YMCA logo It was actually Recently identified as the most valuable nonprofit brand in the United States And it has been around for a while. I mean maybe not That long for a lot of Y'all who might be coming from overseas, but but for the US it's been around for quite a while The YMCA was founded in London in 1844 You know and within the first dozen years it existed it spread really quickly to the US and across Europe It's you know from its very beginning been you know a socially active and innovative agency or organization, excuse me And today it's guided very much by four core values and it's really important for us when Working with the YMCA to keep you know the values and the mission of the Y in mind You know I've mentioned that it is a Larger organization with associations several hundred associations across the United States An association for the YMCA and we're working here with the YMCA of the Grand Twin Cities each association is independently run and You know you might have grown up, you know going to a Y and it might have been like a single building and You know many YMCA's have one single branch location There are others that have dozens of them And every Y is really run very differently Some of them are run very much out of those you know individual branches others have you know a central structure You know that you know works across all the branches in that association and This is a little this is important for us on this project because We're building this project as part of the branch of the future, which is a single branch that's part of the Greater Twin Cities Association, which has you know a couple of dozen branches and we work very closely with the Central office of the Greater Twin Cities YMCA which Incidentally is going to be moving most of its offices to this branch, but I think that's kind of beside the point But The idea for us is that the Digital signage will be run off of Drupal off of the same Drupal installation as their website for the entire Association we're currently building digital signage That will be dedicated for a single branch, but there's no reason that this won't be able to Be extended Throughout the entire association we can consider it you know I Think we've been thinking of it like kind of like an MVP, but at the same time it's very much a pilot, right? So I mentioned that the YMCA has been sort of an innovative organization from its very beginning and You know there is there are a lot of things that we Don't realize you know the YMCA either was The origin of or was in some way instrumental in founding I think most famous among these is probably basketball which was Founded at a YMCA in Massachusetts but also You know they popularize the idea of swimming lessons the term bodybuilding was Not the practice of bodybuilding, but the the term bodybuilding itself was invented at a YMCA You know maybe jazzer size is not quite as exciting as the rest of those but Nevertheless and father's day at least in the United States Was something that came out of the YMCA, but worldwide it had existed before that last on this list is open why which Maybe I'm being a little vain and putting it there, but that's okay I Don't know how many of you Were at our earlier Session on open why Which was I think one of the very first sessions of a triple con This year show of hands anyone Okay, a few Why knew that we're there? But open why is? You know at its base, I think from your point of view here at triple con We're going to think of it largely as you know a triple distribution But it's also more than that. It's an organization It's there's a community of YMCA's That has been built up around it along with several digital partners we've held Three at this point was it three three summits Surrounding why I'm say the first of these was in Minneapolis then Chicago and then most recently in February we met in Houston and there were over a hundred people there was really exciting. It's a growing community But it's also a philosophy excuse me a philosophy that collaboration among YMCA's and associated organization really you know drives innovation and impact and Makes things possible that wouldn't normally be possible You know by producing a Drupal district distribution that you know is incredibly fully featured that has number of Features that are of great utility to YMCA's these small wise that have you know a single branch can get a You know fully featured website that they would otherwise never be able to afford and that's something that's you know Not only really exciting, but it's also you know allows us to help You know reach out serve that mission and You know those funds that they would otherwise have been using to put towards a website You know they can put towards programming that can you know help kids and members of their community So I've talked a little bit of the YMCA about the YMCA of the greater Twin Cities It's one of the larger associations in the country has You know over two dozen branches runs, you know well over a dozen camps has what about a quarter of a million members and We're looking very much at their Branch of the future in this it which is their new downtown branch They have a a downtown branch currently and They are moving it a couple of blocks to the Gavaday Commons, which is a Mall in downtown Minneapolis, which is actually at the busiest corner in Minneapolis You Might recognize the mall from the movie the mighty ducks if you saw that There was a scene with someone I believe skateboarding and knocking someone into a fountain that was On the first floor of this mall and this small is being currently doesn't look absolutely nothing like that Because it's been totally gutted putting in a pool and Jim and and everything so The plan is for this to open at the end of the year and it's really going to be a showcase for a lot of innovation and fitness and innovation in the health and there are really several projects that are You know involved in this in addition to the digital signage projects We're also working on a smart branch project that will provide information about You know who's in the branch and who's using what in the branch in the branch, which will help Make help the YMCA make decisions about programming so Goals and objectives for these projects You know we want to Use digital signage and room entry screens to display Time-sensitive relevant content to members of the YMCA when they're inside the branch We want that content to be able to be created centrally Doesn't need to be created on site necessarily And it can be managed via the same sorts of tools that they use to manage Content on their website, so they don't really need to learn a new system And it also allows them to use content and Reuse content from their website on these signs and vice versa and We want to be able to group different displays So, you know if we want, you know all the displays on one floor to display something we can And we should be able to group those displays in arbitrary ways regardless of their physical location, so Maybe we expand this to other branches eventually and we have a group of displays that we call You know Entry way so view displays that people can see as they enter into the Y We'd be able to define that as a group so that we could display the same information at every YMCA that had these displays so Two projects, you know, there's the room entry screens in the digital signs the room entry screens to give a little bit more detail on to them, you know, there are Studios at every YMCA That where they hold free walk-in group exercise classes And the room entry screens the idea is that most of the time They're going to be displaying real-time information about the classes that are being held in these rooms Currently and upcoming classes so that you know as people walk by they can see, you know, hey in 15 minutes There's gonna be your yoga class. I'll check that out You know, maybe run around the track a few times first Digital signs, you know are much more general. They aren't Focused necessarily on rooms But they can be used to display any sort of information marketing operations mission-related content and that might be hey the polls closed today or You know, it could be a fitness challenge. That's used to you know, encourage members to Use underused equipment things like that So just to give a little bit of background on digital signage In general I think, you know, most people recognize this Which I think is probably one of the earliest farms of digital signs that we have these Programmable LED marquee signs. I know I was playing with one of them in the 80s They were cool at the time So While they were you know cool at the time they were extraordinarily limited, right? They could display messages, but you could only see part of the message at any given time They were Not ideal for long messages because Obviously only a few Letters are gonna fit on there at a time I Extraordinarily limited in terms of graphical display, you know, there were some things that Might we might now refer to as like, you know proto emoticons, I guess but There wasn't much you could do with it You know as time went by we got better technology technology more tools You know even some things that you know weren't necessarily digital like vcrs That allowed you to have pre-recorded content and video and then you know Not necessarily programmable other than like maybe you know start and stop times But then, you know eventually with advances in computer technology and screen Technology, we came back and we're able to move into more programmable media and you know with moving to Flat screens we got larger cleaner displays that were capable of showing, you know significant amounts of readable text and You know in a lot of cases We find that the content Follows the technology You know this is obviously not something that we would have tried to display on You know an LED marquee sign There's just far too much information there and You know there would be no way of really parsing it and That is You know something I find really interesting I Think what we Want to do with the digital signage project in the Rementry screen project is you know provide a little bit more context Take a step past You know what we can display with the technology and Say all right well Let's look at contextual information. Let's look at you know, I mean obviously this has automated data sources And this might not be the best example because this is you know going to show up in an airport and Extremely going to be extremely useful given its location So we but you know we could provide you know environmentally intelligent Displays things that can react to You know Changes in schedule things that can react to different input like if we have cameras we could have microphones things that could respond directly to You know Input within that environment that people are in and you know when part of you know the concern of course is that with Without these things without this context the message gets totally lost You know end up with madness That you know you build things because you can not because you should So I'm going to turn things over to DMI here and he's going to talk a little bit more about the Technology that we're using and in particular the the hardware and software components that we're putting in place Thank you Stuart. I Would like to talk about components we use to build digital signage solution for YMC and Components you will need in case you are interested in building your own solution So what components are acquired if anybody is familiar how digital signage works You may say that to start use it. You need a few components Of course a display screen where content displays Software to manage content display on screens and a player or maybe casting device to connect display screen with software There are no strong requirements for display screen enough to have a simple TV screen with USB and HDMI output Such a screen could be used With an external casting device to cast data from the software In case the screen has Android or another operating system such as smart TV Then in some cases there is no need to use Casting device, but this fully depends on what type of software is used and availability of an application for playing content from the software Also, there is another type of Screens also known as commercial screens. They are designed to work 24 hours per day and They are much more powerful and will create especially for digital signage The next component is software 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 on the internet, but I want to pay attention only on some requirements. We have on the project The ability to create schedules for different days Support different layouts The ability to use external content by testing your links and The ability to group screens into groups and assign content to grow to those groups easily After some research and deep investigation different platform Platforms we made our choice on an online Tool with a pretty suitable name screen cloud Screen cloud this is a digital signage management software This this is a new and fast growing company. It was created just two years ago and currently provides a great user interface to manage content for display screens and Screen cloud works with a variety of devices and supports a variety of different media types like video Audio web documents social feeds, etc Also screen cloud allows simply create schedule for different days and assign those schedule to different groups of screens Next component is a player Usually player is an application which could be used Which could be built on Android iOS or other operation system Even your smartphone could be used as a player So since the TV screens we use on the project are not smart TVs They are not they don't support the installation of setup applications and we need to use a custom device for instance Such devices could be like Google Chromecast Google Chrome beat Amazon Faro TV stick Amazon Faro TV and many others most of the companies providing Software for managing digital signage content also provides their own devices which work only with their software and Usually such devices cost much more than those I mentioned That's why on the current stage we decided to use Google Chromecast Since it's cheap just $35 it's easy to manage and easy to set up Google Chromecast also is well supported by screen cloud But as any any device It also has some undesirable aspects like Chromecast is pretty dumb device it Not particularly powerful Has minimal storage and there is no possibility to install Applications and this means we need to use a smartphone as a middleman to to start the plane and I can say that this is not our final decision and The eventual device could be changed in the future to much more powerful device And the final component we have it's open wide distribution the open wide distribution is a distribution built on Drupal 8 and uses Drupal 8 contributed modules and useful modules from YMCA's and digital partners Such as personify integration Groupics pro online scheduling mind-body personal training management and many others Since the website of YMCA Twin Cities has been built using open wide and our team already built integration with third party services We're reused their architecture to use data from those services To display them on digital sandwich and through Manchester screens Open wide has been built in a way that each feature And each component is decoupled and could be enabled to disable at any time and This solution will be built in the same way that it will be easier to enable or disable on any open wide distribution Okay, now Stuart will tell us about design and its requirements Okay, so In terms of design and content we had some really interesting Things going on here. I mean the first is that you know, we're dealing with You know physical signs in the real world, which is not something that you know a lot of Drupal teams have a lot of experience with right So that was one of the really unusual challenges of this project I got to play with You know blueprints and such and you know, that was fun We were looking at where to put these signs over, you know, the five floors of the new building Which didn't exist yet in any, you know completed state So we were you know, this is you know, actually one of the working documents that we were looking at We were working closely with the architectural team We had some interesting constraints in terms of ADA right regulations We needed to integrate particularly the room entry screens with the Signs that you know Go outside rooms normally that needed to comply with the ADA regulations in terms of placement and Braille usage So they had to be within like a certain Distance from the door and all that and that was Some really interesting challenges there We ended up You know Narrowing down the places where we wanted signs, you know, I think at first we went a little overboard Which you know my image of Times Square was kind of from personal experience and We cut the number of signs that we Eventually used probably done by half or so in terms of You know design we You know, I think benefited from the fact that The YMCA has Incredibly strong brand standards You know, they have color schemes fonts and Guidelines that provided us with a really strong Framework for design and we'd already done quite a bit of work within these grand standards for the YMCA of Greater Twin Cities and some otherwise, so We tried to you know very much integrate these signs with the same sort of look and feel as you know other elements that Displayed the YMCA brands on site We also ended up narrowing down the number of screen layouts that were we decided to use You know initially we thought about putting in a wide variety of components But we wanted to make sure that we had a viable you know a Viable MVP if that's not redundant, which it probably is and To do that we wanted to make sure that we actually had a sufficient number and variety of Components that would fit into the different layouts that we wanted to implement and so we narrowed it down to three vertical layouts and Three horizontal layouts You know one, you know full screen one that's Essentially a full screen with kind of a bar across the bottom and the third which is a You know divided screen, so I'm just going to run through quickly a couple of our initial Design concepts to give you an idea of the sorts of things particularly during the ideation phase that we considered as You know potential things to put on to These digital signs including schedules facility status You can see, you know, there's some marketing materials as well challenges announcements about you know upcoming classes and This is an early prototype of one of our room entry screens Pass it back to team. Okay. Thanks to it Let's move on to the next part which Describes how we connected all components to each other So an oral diagram looks so a content editor opens the website to manage digital signage content and content for room entry screens Everything is available right from the website. No need to use external websites and to remember hundreds of credentials And as we already said we use open wide distribution to integrate with third-party services and To build user interface, which will be easy to use About these integrations we will talk in a few minutes, but on the other hand the website already has an integration with screen cloud Which in turn has a connection with Google Chromecasts Plugged in with in display screens The current VMCA twin cities Website will be primarily used For creating and managing content that will be displayed on various digital signs in the branch This will be the primary place Where twin cities team manages all of the content and that appear on digital science and true mental screens The website also is already integrated with third-party services like group expo which stores schedule about free activities and personify which stores information about paid activities with trainers and This is the main benefit of creating an interface of Managing screen content far right from the website group expo It's a private based communication portal for group fitness programs Which used by YMC graded twin cities to manage schedule of different activities and This service provides two ways of integration one way is to use JavaScript code which renders Schedule in a way that group expo provides You can see a result of rendering and a schedule on the screen but as we always love to do something more than default things this way doesn't work for us and Another way is to use their API which allows to pull data from group X into the site and Our team created a few layers of integration that gives a lot of flexibility in use data from group X and now the website is Has a very easy to use multi-step form to quickly find needed information another third-party System which whole also has information about schedule Is personify I won't talk about much about about it since this platform can take another hour of discussion The main idea of integration with personify is to pull data about paid activities Start in personify add them to the schedule and create the Unified schedule from different third-party services and display them on room and screens Integration between these sources work in the next way Firstly our modules pull data from third-party services into Drupal where for each element of data creates its own entity and Since a schedule always should be up to date the website stores the information about future classes as well After getting all of the information about schedules From third-party services in Drupal starts a processing engine that Processing engine of the received data and in your results. We have a new entity called session which allowed to Collect information from all third-party services and get some unified data that could be used on the Drupal and In views in references in blocks and in room and three screens as well Then your entity is absolutely independent and has its own managing interface allows adding new items to the schedule and variety in existing items and Variety and we need in case of any emergency for example if class has been canceled or trainer has been changed and Then when we get information about Current and upcoming classes we use that those data for website and for room and screens On Drupal site We have created some custom entities and content types Which help us create own schedule of content. We want to show on screens and manage it easily First and the key element of this architecture is screen content This is a content type which has two important components its modules and layout it will Give the twin cities if you or what's being displayed on a screen at any given time Next next part is schedule once one screen content is created It can be added to a schedule as a schedule item with a time How long it should be displayed on the screen and schedule entity? gives the user the ability to visually Arrange items within a schedule and the last Entity is screen Once this once the schedule is created and already has some items to show it could be assigned it to a screen where screen is something like a representation of the physical screen in the branch location and it will be used by Drupal to identify and manage screens by YMCA administrators As short already mentioned we have defined at some layouts which gives use Gives us the possibility display content from a room enter screens and this digital signage Since TV screens we use another week for room enter screens. We need to show information In a way that it will be easily readable So all room enter screens will have only information about Current class and upcoming class. This is the first top line of layouts For digital signage, we have enough space to show more information. That's why we decided to use full widths and two columns layouts For content modules, we mainly use Drupal blocks also with different settings and main modules for room enter screens are scheduled activities in the branch and schedule for a single room For digital signage, we are leveraging existing open wide blocks and build three new blocks like a promo block free HTML and block with announcements room enter screen schedule block allows easily for filtering Schedule of activities by location by room but by date and other parameters and in the results We have information about current and upcoming classes on room enter screens also open wide provides blocks To display market and content which allowed by twin cities team and currently we work on the possibility to leverage them for digital signage and we are working on changes the architecture to be able to reuse them and a new type of block Promotional block also allows content editors to enter text and images which will be transformed into promotional screens and block with announcements can be used on any type of type of screens like room enter screens or digital signage In case of any emergency or if they want to show useful information, for example, there could be information about That somebody forgot something in a room and where that could be find So what we use to build this solution We have not used any unknown modules or libraries. Of course a base for this solution is Drupal 8 and Content types blocks and layout plugins be used only a few a Few external modules the key modules are penalizer and panels In and panels EPA in line panel editor Which provides an awesome interface of managing content from front-end With the possibility to change layouts and add different blocks to them Here is an example how adding blocks looks in the penalizer by default regions of layout have different backgrounds and To identify borders of region where we can place blocks with content on This example to blocks with content already added two regions To show us a content in the same way how it will be displayed on digital signage screen and after saving This this content we have a URL Which with a content that could be used in screen cloud 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 first you need a smartphone or tablet based and on Android or maybe iOS Then switch on TV and plug in Google Chromecast Then install screen cloud remote app from Google Play Store or App Store next step is register player using mobile application and You will see this message on the screen while registering Sorry for big for bad picture. It was created at home After that, you will see a code on the screen Which have to be used to register screen is in screen cloud Here is an example of the message and the final step is to configure content you want to show in screen cloud we created a playlist with only one item and that item is linked to screen content on the Drupal website and In the end enjoy This is just an example how it looks on my home screen You can see that layout does not fit this screen it just because my home screen is much more bigger than we expected and Eventually using this combination of components we get these benefits like inexpensive solution Simple to a screen homecast and and screen cloud. It's flexible widely available All elements are independent at and could be changed anytime for example We can change homecast Anytime and also we can change Software like screen cloud in the future because we already have Interface for creating content on Drupal site Also seamless editing experience from the website It's easy to use and it's also available anytime and anywhere and Need only one time set up for adding contents from from the open way and Of course, it's open source code Then the solution will be ready. It will be part of the open way and as any solution it has some benefits and disadvantages and This one also has so custom device is not really powerful and It will not work in case of you if you will want to you to play YouTube videos all day long But this is actually not our requirement Also in case of any power outage, you need to run it manually again And of course third party software. It's a black box and Sometimes it can work with issues And now I would like to show you a short demo how initial version of this solution works This is the express version of real schedule for romantic screens. You can see this one is the correct size screen We sped up time a little bit so You know, obviously this can be used for things other than you know The YMCA You know We've all seen Digital signage used elsewhere Often times for like, you know rotating, you know slide show type advertising or billboards And One of the really nice things as I mentioned before is that in addition to you know just presenting Updating information this has the potential to react to the environment and interact with people whether that's like via You know camera or touchscreen or whatnot Can also, you know See this in offices where we're you know putting in like you know reporting on performance or other sort of passive information We've all seen this in you know public transportation with Arrival times and status of public transportation Can think of like I'm sure thousands of use cases. We often see this in like Education or You know healthcare type situations where it provides Context relevant information based on Location or time, you know whether there's a You know in an emergency room it could have different information depending on what the current wait time is it could have In a hospital different information During visitor hours as opposed to other hours See things in in sports with up to the minute scores and stats and that can react to Things that happen, you know in game in almost real time with you know replay videos or messaging You know when someone scores or things like that and of course, you know you can have You know marketing information in stores One of the other things you can think about here is in addition to just marketing information You can again have contextual Dynamic information that maybe highlights different products or different areas of the store, you know based on you know up to the minute data on inventory and sales right things like that and You know one of the earlier I think things that Digital signage got used for is probably You know menus and things that like that that display a lot of content that changes Potentially fairly frequently So that is About it Thank you very much. You can all please of course take our survey and For those of you who will be here tomorrow Please join us for a contribution sprints We will be hosting a sprint on open Y in the general sprint area in Rooms 309 and 310 tomorrow morning You can look for Craig or Alex If you guys wouldn't mind Raising your hands or standing up or something Find them and they will get you started So I think we have maybe like five six minutes For questions if anyone has any So my boss always says there's three hard questions or problems in software, you know caching validation and off by one errors So that being said I want to kind of ask you about the deal with rule error areas where YMCA's might have Unreliable internet How much of this will still work is any of this being caches in in an offline Availability Actually, this project has many items that could be discussed and one of them is caching and validation and I can say that we are working on preparing offline mode that will contain information about schedule for for each screen for the whole day and even if Screen will not have any connection to the internet. It will have information what to show That's phenomenal this to that. I think you know one of the reasons that we're Considering maybe moving away from the Google Chromecast is because it doesn't have memory to You know store things that have been passed to it. So What's that? We're considering a few things we might move to the chrome bit. Yeah Chrome bed chrome bit which is essentially a Chrome device on a stick 10 for any other questions Hey, so I have a question. How would you approach a why like I'm a member of the why here? I've lived in Baltimore. I mean I can show them the demo. I can show them the site I mean do you have any recommendations on how to approach them like yeah? I'm a Drupal developer. They're like, what does that even mean? Yes? Open ymca.org You can also you know reach out to Craig here. There's Who is one of the people or myself really? We're helping to organize the real the open white movement so You know, there is a Group of who of ymca's that are interested. Have we talked to Baltimore at all? Not that I know of Yeah So Anything else? But yeah on a side note if you're interested in open why you I mentioned open ymca.org You can also check out sandbox.open ymca.org which is you know sandbox site Allow you to play around with it a bit Is green cloud the only Option you guys are integrated with or are there others? I think it's the only one we're using but there are Quite a few options Yeah, actually as I said Each element of this architecture is independent and screen cloud also could be changed to any solution You want it just need to support pasting the URL links from the website I don't think that open wide itself is dependent on screen cloud because what we're doing with screen cloud is we're we're taking those URLs that are generated from the Was it the screen content type the screen content type and we're just plugging those into screen cloud directly so anything that can take that kind of You know input Where you can just plug in And use totally independently Okay, and so you don't have any management Between your Drupal and screen cloud they're actually run separately to input the URLs Yeah, okay, I mean we're generating the URLs because that's what screen cloud needs catch it Very cool as in ymca member and Drupal agency. I just wanted to say thank you for working on this awesome open tool No question Thanks